@colijnit/corecomponents_v12 12.0.28 → 12.0.29

package/fesm2015/colijnit-corecomponents_v12.js

@@ -3992,7 +3992,7 @@ class BaseInputComponent {
                 return node;
             }
             else if (node.children.length > 0) {
-                return this._findInputNode(node.children);
+                this._findInputNode(node.children);
             }
         }
     }
@@ -6156,22 +6156,26 @@ class InputTextComponent extends BaseInputComponent {
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
         this.elementRef = elementRef;
-        this.Icons = CoreComponentsIcon;
         this.placeholder = "";
         this.type = "text";
         this.showClearButton = undefined;
+        this.showPlaceholderOnFocus = true;
         this.hasOwnLabel = true;
         super._markAsOnPush();
     }
     showClass() {
         return true;
     }
+    get hasLeftIcon() {
+        return this.leftIcon !== undefined && this.leftIcon !== null;
+    }
 }
 InputTextComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-input-text",
                 template: `
-    <label [textContent]="placeholder"></label>
+    <label *ngIf="showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)" [textContent]="placeholder"></label>
+    <co-icon *ngIf="leftIcon" class="input-text-left-icon" [icon]="leftIcon"></co-icon>
     <input #input
            [type]="type"
            [ngModel]="model"
@@ -6212,7 +6216,10 @@ InputTextComponent.propDecorators = {
     type: [{ type: Input }],
     showClearButton: [{ type: Input }],
     keyDownWhiteList: [{ type: Input }],
+    showPlaceholderOnFocus: [{ type: Input }],
+    leftIcon: [{ type: Input }],
     showClass: [{ type: HostBinding, args: ["class.co-input-text",] }],
+    hasLeftIcon: [{ type: HostBinding, args: ['class.has-left-icon',] }],
     hasOwnLabel: [{ type: HostBinding, args: ["class.has-own-label",] }]
 };
 
@@ -6451,38 +6458,44 @@ InputRadioButtonModule.decorators = [
             },] }
 ];
 
-class InputSearchComponent {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
+class InputSearchComponent extends BaseInputComponent {
+    constructor() {
+        super(...arguments);
         this.searchIcon = CoreComponentsIcon.Magnifier;
+        this.search = new EventEmitter();
     }
     showClass() {
         return true;
     }
-    ngOnDestroy() {
-        this._elementRef = undefined;
-    }
-    focus() {
-        this._elementRef.nativeElement.focus();
+    handleKeyDown(event) {
+        switch (event.code) {
+            case 'Enter':
+                event.preventDefault();
+                this.search.next(this.model);
+                return;
+        }
     }
 }
 InputSearchComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-input-search",
+                selector: 'co-input-search',
                 template: `
-      <co-icon class="search-icon" [icon]="searchIcon"></co-icon>
-      <input class="input" [placeholder]="placeHolderText">
-    `,
+    <co-input-text
+      [model]="model"
+      [leftIcon]="searchIcon"
+      [placeholder]="placeholder"
+      [showPlaceholderOnFocus]="false"
+      (modelChange)="modelChange.emit($event)"
+    ></co-input-text>
+  `,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
-InputSearchComponent.ctorParameters = () => [
-    { type: ElementRef }
-];
 InputSearchComponent.propDecorators = {
-    placeHolderText: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-input-search",] }]
+    placeholder: [{ type: Input }],
+    search: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ['class.co-input-search',] }]
 };
 
 class InputSearchModule {
@@ -6491,7 +6504,9 @@ InputSearchModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
-                    IconModule
+                    IconModule,
+                    FormsModule,
+                    InputTextModule
                 ],
                 declarations: [InputSearchComponent],
                 exports: [InputSearchComponent]
@@ -8034,7 +8049,8 @@ var ColumnAlign;
     ColumnAlign["Right"] = "right-align";
 })(ColumnAlign || (ColumnAlign = {}));
 class SimpleGridColumnDirective {
-    constructor() {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
         this.resizable = true;
         this.required = false;
         this.readonly = false;
@@ -8083,6 +8099,9 @@ SimpleGridColumnDirective.decorators = [
                 selector: "co-simple-grid-column"
             },] }
 ];
+SimpleGridColumnDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
 SimpleGridColumnDirective.propDecorators = {
     template: [{ type: ContentChild, args: ['template',] }],
     editTemplate: [{ type: ContentChild, args: ['editTemplate',] }],
@@ -8103,8 +8122,9 @@ SimpleGridColumnDirective.propDecorators = {
 
 class BaseSimpleGridComponent {
     constructor() {
-        this.data = [];
+        this.MIN_COLUMN_WIDTH = 60;
         this.dragDropEnabled = false;
+        this.resizable = false;
         this.inlineEdit = false;
         this.showToolbar = false;
         /**
@@ -8117,27 +8137,38 @@ class BaseSimpleGridComponent {
         this.dblClickRow = new EventEmitter();
         this.saveRow = new EventEmitter();
         this.columns = [];
+        this.headerColumns = [];
+        this._data = [];
+        this._prepared = false;
     }
     set content(columnComponents) {
         this._setColumns(columnComponents.toArray());
+        this._prepareData();
+    }
+    set data(value) {
+        this._data = value;
+        this._prepareData();
+    }
+    get data() {
+        return this._data;
     }
     set extraColumns(value) {
         this._setColumns(value);
     }
     handleMouseMove(event) {
-        if (event.buttons === 1 && this._columnForResize) {
-            if (!this._columnForResize.width) {
-                const rect = event.target.parentElement.getBoundingClientRect();
-                this._columnForResize.width = rect.width;
-            }
-            this._columnForResize.width += event.movementX;
+        if (this.resizable && event.buttons === 1 && this._columnForResize) {
+            this._columnForResize.width = this._columnForResize.originalWidth - (this._startMousePositionX - event.clientX);
         }
     }
     handleMouseUp(event) {
+        this._startMousePositionX = undefined;
         this._columnForResize = undefined;
     }
     handleSizerMouseDown(event, column) {
+        this._setWidthOfAllColumns();
+        this._startMousePositionX = event.clientX;
         this._columnForResize = column;
+        this._columnForResize.originalWidth = this._columnForResize.width;
     }
     handleCanDragDrop(drag, drop) {
         return true;
@@ -8160,10 +8191,50 @@ class BaseSimpleGridComponent {
             console.error(e);
         }
     }
+    isSingleColumnRow(row) {
+        return row.hasOwnProperty('singleColumnIndex');
+    }
+    singleColumnIndex(row) {
+        return row.singleColumnIndex;
+    }
     _setColumns(columns) {
         this.columns.push(...columns);
         this.columns.sort((a, b) => a.order < b.order ? -1 : 1);
     }
+    _prepareData() {
+        if (this._prepared) {
+            return;
+        }
+        if (this.columns && this.columns.length > 0 && this.data && this.data.length > 0) {
+            this.headerColumns = this.columns.filter(c => !c.singleColumn);
+            let singleColumnIndex = -1;
+            for (let i = 0; i < this.columns.length; i++) {
+                if (this.columns[i].singleColumn) {
+                    singleColumnIndex = i;
+                    break;
+                }
+            }
+            // first check if there's single column data
+            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;
+                    }
+                }
+            }
+            this._prepared = true;
+        }
+    }
+    _setWidthOfAllColumns() {
+        this.columns.forEach((column) => {
+            if ((column.width === undefined || column.width === null) && column.elementRef && column.elementRef.nativeElement) {
+                const rect = column.elementRef.nativeElement.getBoundingClientRect();
+                column.width = rect.width;
+            }
+        });
+    }
 }
 BaseSimpleGridComponent.decorators = [
     { type: Directive }
@@ -8172,6 +8243,7 @@ BaseSimpleGridComponent.propDecorators = {
     content: [{ type: ContentChildren, args: [SimpleGridColumnDirective,] }],
     data: [{ type: Input }],
     dragDropEnabled: [{ type: Input }],
+    resizable: [{ type: Input }],
     inlineEdit: [{ type: Input }],
     showToolbar: [{ type: Input }],
     emitDragDrop: [{ type: Input }],
@@ -8197,6 +8269,12 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
         this._doubleClicked = false;
         this._newRow = false;
     }
+    set headerCells(cells) {
+        const headerElements = cells.toArray();
+        for (let i = 0; i < headerElements.length; i++) {
+            this.columns[i].elementRef = headerElements[i];
+        }
+    }
     showClass() {
         return true;
     }
@@ -8434,45 +8512,61 @@ SimpleGridComponent.decorators = [
                      (saveClick)="validateAndSave()"
                      (cancelClick)="cancelEditRow()"
     ></co-grid-toolbar>
-    <div class="simple-grid-column-header-wrapper">
-      <div class="simple-grid-column-header" *ngFor="let column of columns; let index = index"
-           [style.min-width.px]="column.width" [style.max-width.px]="column.width" [style.padding-right.px]="isSingleColumn(column) ? 0 : 5">
-        <div class="simple-grid-column-header-label" [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
-             [textContent]="column.headerText"
-        ></div>
-        <div *ngIf="column.resizable" class="simple-grid-column-sizer"
-             (mousedown)="handleSizerMouseDown($event, column)"
-        ></div>
-      </div>
-    </div>
-    <div cdkDropListGroup class="drop-list-group">
-      <div #dropList cdkDropList cdkDropListOrientation="vertical"
-           class="simple-grid-drag-drop-list"
-           [cdkDropListDisabled]="!dragDropEnabled"
-           [cdkDropListData]="data"
-           [cdkDropListEnterPredicate]="handleCanDragDrop"
-           (cdkDropListDropped)="handleDrop($event)"
-      >
-        <div class="simple-grid-row" [class.selected]="rowIndex === selectedRowIndex"
-             [class.editting]="rowIndex === editRowIndex" *ngFor="let row of data; let rowIndex = index" cdkDrag
-             (click)="handleClickRow($event, rowIndex)" (dblclick)="handleDblClickRow($event, rowIndex)">
+    <table class="simple-grid-table">
+      <colgroup>
+        <col *ngFor="let column of headerColumns; let index = index" [attr.width]="column.width">
+      </colgroup>
+      <thead>
+      <tr>
+        <th scope="col" #headerCell class="simple-grid-column-header" *ngFor="let column of headerColumns; let index = index">
+          <div class="simple-grid-column-header-wrapper" [class.resizable]="resizable">
+            <div class="simple-grid-column-header-label" [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
+                 [textContent]="column.headerText"
+            ></div>
+            <div *ngIf="resizable && column.resizable" class="simple-grid-column-sizer"
+                 (mousedown)="handleSizerMouseDown($event, column)"
+            ></div>
+          </div>
+        </th>
+      </tr>
+      </thead>
+      <tbody #dropList cdkDropList cdkDropListOrientation="vertical"
+             class="simple-grid-drag-drop-list"
+             [cdkDropListDisabled]="!dragDropEnabled"
+             [cdkDropListData]="data"
+             [cdkDropListEnterPredicate]="handleCanDragDrop"
+             (cdkDropListDropped)="handleDrop($event)">
+        <tr class="simple-grid-row" [class.selected]="rowIndex === selectedRowIndex"
+          [class.editting]="rowIndex === editRowIndex" *ngFor="let row of data; let rowIndex = index" cdkDrag
+          (click)="handleClickRow($event, rowIndex)" (dblclick)="handleDblClickRow($event, rowIndex)">
           <co-form class="simple-grid-row-form">
-            <div class="simple-grid-column-cell" *ngFor="let column of columns; let columnIndex = index"
-                 [style.min-width]="isSingleColumn(column) ? 'fit-content' : column.width" [style.max-width.px]="column.width"
-                 [style.padding-right.px]="isSingleColumn(column) ? 0 : 5" >
+            <ng-container *ngIf="isSingleColumnRow(row)">
+              <td class="simple-grid-single-column-cell" [attr.colspan]="headerColumns.length">
                 <co-simple-grid-cell
-                  [column]="column"
+                  [column]="columns[singleColumnIndex(row)]"
                   [row]="row"
-                  [editMode]="inlineEdit && editting && rowIndex === editRowIndex && !isSingleColumn(column) && !rowContainsSingleColumn(row, columns)"
-                  [fieldEditMode]="editCellIndex === columnIndex"
-                  (cellClick)="handleCellClick(columnIndex)"
+                  [editMode]="false"
                 ></co-simple-grid-cell>
-              <div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
-            </div>
+              </td>
+            </ng-container>
+            <ng-container *ngIf="!isSingleColumnRow(row)">
+              <ng-container *ngFor="let column of headerColumns; let columnIndex = index">
+                <td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
+                  <co-simple-grid-cell
+                    [column]="column"
+                    [row]="row"
+                    [editMode]="inlineEdit && editting && rowIndex === editRowIndex"
+                    [fieldEditMode]="editCellIndex === columnIndex"
+                    (cellClick)="handleCellClick(columnIndex)"
+                  ></co-simple-grid-cell>
+                  <div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
+                </td>
+              </ng-container>
+            </ng-container>
           </co-form>
-        </div>
-      </div>
-    </div>
+        </tr>
+      </tbody>
+    </table>
   `,
                 providers: [
                     FormMasterService
@@ -8486,6 +8580,7 @@ SimpleGridComponent.ctorParameters = () => [
     { type: FormMasterService }
 ];
 SimpleGridComponent.propDecorators = {
+    headerCells: [{ type: ViewChildren, args: ["headerCell",] }],
     showClass: [{ type: HostBinding, args: ["class.co-simple-grid",] }],
     handleKeyDown: [{ type: HostListener, args: ['keydown', ['$event'],] }]
 };