@colijnit/corecomponents_v12 12.0.27 → 12.0.30

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -4408,7 +4408,7 @@
                     return node;
                 }
                 else if (node.children.length > 0) {
-                    return this._findInputNode(node.children);
+                    this._findInputNode(node.children);
                 }
             }
         };
@@ -5860,23 +5860,33 @@
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.dateFormat = "dd-MM-yyyy";
             _this.placeholder = "";
+            _this.startDateChange = new core.EventEmitter();
+            _this.endDateChange = new core.EventEmitter();
             return _this;
         }
         InputDateRangePickerComponent.prototype.showClass = function () {
             return true;
         };
+        InputDateRangePickerComponent.prototype.dateRangeChange = function () {
+            this.startDateChange.emit(this.startDate);
+            this.endDateChange.emit(this.endDate);
+        };
         return InputDateRangePickerComponent;
     }(BaseInputComponent));
     InputDateRangePickerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-date-range",
-                    template: "\n    <ejs-daterangepicker\n      [format]=\"dateFormat\"\n      [placeholder]=\"placeholder\"\n      [ngModel]=\"model\"\n      (ngModelChange)=\"modelChange.emit($event)\"\n    ></ejs-daterangepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <ejs-daterangepicker\n      [format]=\"dateFormat\"\n      [placeholder]=\"placeholder\"\n      [ngModel]=\"model\"\n      (ngModelChange)=\"dateRangeChange()\"\n      [(startDate)]=\"startDate\"\n      [(endDate)]=\"endDate\"\n    ></ejs-daterangepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
     InputDateRangePickerComponent.propDecorators = {
         dateFormat: [{ type: core.Input }],
         placeholder: [{ type: core.Input }],
+        startDate: [{ type: core.Input }],
+        endDate: [{ type: core.Input }],
+        startDateChange: [{ type: core.Output }],
+        endDateChange: [{ type: core.Output }],
         showClass: [{ type: core.HostBinding, args: ["class.co-input-date-range-picker",] }]
     };
 
@@ -6640,23 +6650,51 @@
             _this.formUserChangeListener = formUserChangeListener;
             _this.ngZoneWrapper = ngZoneWrapper;
             _this.elementRef = elementRef;
-            _this.Icons = exports.CoreComponentsIcon;
             _this.placeholder = "";
             _this.type = "text";
             _this.showClearButton = undefined;
+            _this.showPlaceholderOnFocus = true;
             _this.hasOwnLabel = true;
+            _this.hideArrowButtons = false;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
+        Object.defineProperty(InputTextComponent.prototype, "model", {
+            get: function () {
+                return _super.prototype.model;
+            },
+            set: function (value) {
+                if (this.type === 'number' && !isNaN(value)) {
+                    if (this.min && value < this.min || this.max && value > this.max) {
+                        _super.prototype.model = this._initialModel;
+                    }
+                    else {
+                        _super.prototype.model = value;
+                    }
+                }
+                else {
+                    _super.prototype.model = value;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         InputTextComponent.prototype.showClass = function () {
             return true;
         };
+        Object.defineProperty(InputTextComponent.prototype, "hasLeftIcon", {
+            get: function () {
+                return this.leftIcon !== undefined && this.leftIcon !== null;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return InputTextComponent;
     }(BaseInputComponent));
     InputTextComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-text",
-                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <input #input\n           [type]=\"type\"\n           [ngModel]=\"model\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n    >\n    <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n      [committing]=\"committing\"\n      [commitFinished]=\"commitFinished\"\n      (commitClick)=\"commitClick($event)\"\n      (cancelClick)=\"cancelClick($event)\"\n    >\n    </co-commit-buttons>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\" [textContent]=\"placeholder\"></label>\n    <co-icon *ngIf=\"leftIcon\" class=\"input-text-left-icon\" [icon]=\"leftIcon\"></co-icon>\n    <input #input\n           [type]=\"type\"\n           [ngModel]=\"model\"\n           [min]=\"type === 'number' && this.min ? this.min : undefined\"\n           [max]=\"type === 'number' && this.max ? this.max : undefined\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n    >\n    <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n      [committing]=\"committing\"\n      [commitFinished]=\"commitFinished\"\n      (commitClick)=\"commitClick($event)\"\n      (cancelClick)=\"cancelClick($event)\"\n    >\n    </co-commit-buttons>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputTextComponent; })
@@ -6678,10 +6716,16 @@
     InputTextComponent.propDecorators = {
         placeholder: [{ type: core.Input }],
         type: [{ type: core.Input }],
+        min: [{ type: core.Input }],
+        max: [{ type: core.Input }],
         showClearButton: [{ type: core.Input }],
         keyDownWhiteList: [{ type: core.Input }],
+        showPlaceholderOnFocus: [{ type: core.Input }],
+        leftIcon: [{ type: core.Input }],
         showClass: [{ type: core.HostBinding, args: ["class.co-input-text",] }],
-        hasOwnLabel: [{ type: core.HostBinding, args: ["class.has-own-label",] }]
+        hasLeftIcon: [{ type: core.HostBinding, args: ['class.has-left-icon',] }],
+        hasOwnLabel: [{ type: core.HostBinding, args: ["class.has-own-label",] }],
+        hideArrowButtons: [{ type: core.Input }, { type: core.HostBinding, args: ['class.hideArrows',] }]
     };
 
     var ValidationErrorModule = /** @class */ (function () {
@@ -6929,36 +6973,39 @@
                 },] }
     ];
 
-    var InputSearchComponent = /** @class */ (function () {
-        function InputSearchComponent(_elementRef) {
-            this._elementRef = _elementRef;
-            this.searchIcon = exports.CoreComponentsIcon.Magnifier;
+    var InputSearchComponent = /** @class */ (function (_super) {
+        __extends(InputSearchComponent, _super);
+        function InputSearchComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.searchIcon = exports.CoreComponentsIcon.Magnifier;
+            _this.search = new core.EventEmitter();
+            return _this;
         }
         InputSearchComponent.prototype.showClass = function () {
             return true;
         };
-        InputSearchComponent.prototype.ngOnDestroy = function () {
-            this._elementRef = undefined;
-        };
-        InputSearchComponent.prototype.focus = function () {
-            this._elementRef.nativeElement.focus();
+        InputSearchComponent.prototype.handleKeyDown = function (event) {
+            switch (event.code) {
+                case 'Enter':
+                    event.preventDefault();
+                    this.search.next(this.model);
+                    return;
+            }
         };
         return InputSearchComponent;
-    }());
+    }(BaseInputComponent));
     InputSearchComponent.decorators = [
         { type: core.Component, args: [{
-                    selector: "co-input-search",
-                    template: "\n      <co-icon class=\"search-icon\" [icon]=\"searchIcon\"></co-icon>\n      <input class=\"input\" [placeholder]=\"placeHolderText\">\n    ",
+                    selector: 'co-input-search',
+                    template: "\n    <co-input-text\n      [model]=\"model\"\n      [leftIcon]=\"searchIcon\"\n      [placeholder]=\"placeholder\"\n      [showPlaceholderOnFocus]=\"false\"\n      (modelChange)=\"modelChange.emit($event)\"\n    ></co-input-text>\n  ",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
-    InputSearchComponent.ctorParameters = function () { return [
-        { type: core.ElementRef }
-    ]; };
     InputSearchComponent.propDecorators = {
-        placeHolderText: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-input-search",] }]
+        placeholder: [{ type: core.Input }],
+        search: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ['class.co-input-search',] }]
     };
 
     var InputSearchModule = /** @class */ (function () {
@@ -6970,7 +7017,9 @@
         { type: core.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        IconModule
+                        IconModule,
+                        forms.FormsModule,
+                        InputTextModule
                     ],
                     declarations: [InputSearchComponent],
                     exports: [InputSearchComponent]
@@ -8573,7 +8622,8 @@
         ColumnAlign["Right"] = "right-align";
     })(exports.ColumnAlign || (exports.ColumnAlign = {}));
     var SimpleGridColumnDirective = /** @class */ (function () {
-        function SimpleGridColumnDirective() {
+        function SimpleGridColumnDirective(elementRef) {
+            this.elementRef = elementRef;
             this.resizable = true;
             this.required = false;
             this.readonly = false;
@@ -8632,6 +8682,9 @@
                     selector: "co-simple-grid-column"
                 },] }
     ];
+    SimpleGridColumnDirective.ctorParameters = function () { return [
+        { type: core.ElementRef }
+    ]; };
     SimpleGridColumnDirective.propDecorators = {
         template: [{ type: core.ContentChild, args: ['template',] }],
         editTemplate: [{ type: core.ContentChild, args: ['editTemplate',] }],
@@ -8652,8 +8705,9 @@
 
     var BaseSimpleGridComponent = /** @class */ (function () {
         function BaseSimpleGridComponent() {
-            this.data = [];
+            this.MIN_COLUMN_WIDTH = 60;
             this.dragDropEnabled = false;
+            this.resizable = false;
             this.inlineEdit = false;
             this.showToolbar = false;
             /**
@@ -8666,10 +8720,25 @@
             this.dblClickRow = new core.EventEmitter();
             this.saveRow = new core.EventEmitter();
             this.columns = [];
+            this.headerColumns = [];
+            this._data = [];
+            this._prepared = false;
         }
         Object.defineProperty(BaseSimpleGridComponent.prototype, "content", {
             set: function (columnComponents) {
                 this._setColumns(columnComponents.toArray());
+                this._prepareData();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BaseSimpleGridComponent.prototype, "data", {
+            get: function () {
+                return this._data;
+            },
+            set: function (value) {
+                this._data = value;
+                this._prepareData();
             },
             enumerable: false,
             configurable: true
@@ -8682,19 +8751,19 @@
             configurable: true
         });
         BaseSimpleGridComponent.prototype.handleMouseMove = function (event) {
-            if (event.buttons === 1 && this._columnForResize) {
-                if (!this._columnForResize.width) {
-                    var 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);
             }
         };
         BaseSimpleGridComponent.prototype.handleMouseUp = function (event) {
+            this._startMousePositionX = undefined;
             this._columnForResize = undefined;
         };
         BaseSimpleGridComponent.prototype.handleSizerMouseDown = function (event, column) {
+            this._setWidthOfAllColumns();
+            this._startMousePositionX = event.clientX;
             this._columnForResize = column;
+            this._columnForResize.originalWidth = this._columnForResize.width;
         };
         BaseSimpleGridComponent.prototype.handleCanDragDrop = function (drag, drop) {
             return true;
@@ -8717,11 +8786,51 @@
                 console.error(e);
             }
         };
+        BaseSimpleGridComponent.prototype.isSingleColumnRow = function (row) {
+            return row.hasOwnProperty('singleColumnIndex');
+        };
+        BaseSimpleGridComponent.prototype.singleColumnIndex = function (row) {
+            return row.singleColumnIndex;
+        };
         BaseSimpleGridComponent.prototype._setColumns = function (columns) {
             var _a;
             (_a = this.columns).push.apply(_a, __spreadArray([], __read(columns)));
             this.columns.sort(function (a, b) { return a.order < b.order ? -1 : 1; });
         };
+        BaseSimpleGridComponent.prototype._prepareData = function () {
+            if (this._prepared) {
+                return;
+            }
+            if (this.columns && this.columns.length > 0 && this.data && this.data.length > 0) {
+                this.headerColumns = this.columns.filter(function (c) { return !c.singleColumn; });
+                var singleColumnIndex = -1;
+                for (var 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) {
+                    var field = this.columns[singleColumnIndex].field;
+                    for (var 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;
+            }
+        };
+        BaseSimpleGridComponent.prototype._setWidthOfAllColumns = function () {
+            this.columns.forEach(function (column) {
+                if ((column.width === undefined || column.width === null) && column.elementRef && column.elementRef.nativeElement) {
+                    var rect = column.elementRef.nativeElement.getBoundingClientRect();
+                    column.width = rect.width;
+                }
+            });
+        };
         return BaseSimpleGridComponent;
     }());
     BaseSimpleGridComponent.decorators = [
@@ -8731,6 +8840,7 @@
         content: [{ type: core.ContentChildren, args: [SimpleGridColumnDirective,] }],
         data: [{ type: core.Input }],
         dragDropEnabled: [{ type: core.Input }],
+        resizable: [{ type: core.Input }],
         inlineEdit: [{ type: core.Input }],
         showToolbar: [{ type: core.Input }],
         emitDragDrop: [{ type: core.Input }],
@@ -8758,6 +8868,16 @@
             _this._newRow = false;
             return _this;
         }
+        Object.defineProperty(SimpleGridComponent.prototype, "headerCells", {
+            set: function (cells) {
+                var headerElements = cells.toArray();
+                for (var i = 0; i < headerElements.length; i++) {
+                    this.columns[i].elementRef = headerElements[i];
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         SimpleGridComponent.prototype.showClass = function () {
             return true;
         };
@@ -9002,7 +9122,7 @@
     SimpleGridComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-simple-grid",
-                    template: "\n    <co-grid-toolbar *ngIf=\"inlineEdit && showToolbar\"\n                     (addClick)=\"addRow()\"\n                     (editClick)=\"editRow($event)\"\n                     (saveClick)=\"validateAndSave()\"\n                     (cancelClick)=\"cancelEditRow()\"\n    ></co-grid-toolbar>\n    <div class=\"simple-grid-column-header-wrapper\">\n      <div class=\"simple-grid-column-header\" *ngFor=\"let column of columns; let index = index\"\n           [style.min-width.px]=\"column.width\" [style.max-width.px]=\"column.width\" [style.padding-right.px]=\"isSingleColumn(column) ? 0 : 5\">\n        <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n             [textContent]=\"column.headerText\"\n        ></div>\n        <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer\"\n             (mousedown)=\"handleSizerMouseDown($event, column)\"\n        ></div>\n      </div>\n    </div>\n    <div cdkDropListGroup class=\"drop-list-group\">\n      <div #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n           class=\"simple-grid-drag-drop-list\"\n           [cdkDropListDisabled]=\"!dragDropEnabled\"\n           [cdkDropListData]=\"data\"\n           [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n           (cdkDropListDropped)=\"handleDrop($event)\"\n      >\n        <div class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex\"\n             [class.editting]=\"rowIndex === editRowIndex\" *ngFor=\"let row of data; let rowIndex = index\" cdkDrag\n             (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex)\">\n          <co-form class=\"simple-grid-row-form\">\n            <div class=\"simple-grid-column-cell\" *ngFor=\"let column of columns; let columnIndex = index\"\n                 [style.min-width]=\"isSingleColumn(column) ? 'fit-content' : column.width\" [style.max-width.px]=\"column.width\"\n                 [style.padding-right.px]=\"isSingleColumn(column) ? 0 : 5\" >\n                <co-simple-grid-cell\n                  [column]=\"column\"\n                  [row]=\"row\"\n                  [editMode]=\"inlineEdit && editting && rowIndex === editRowIndex && !isSingleColumn(column) && !rowContainsSingleColumn(row, columns)\"\n                  [fieldEditMode]=\"editCellIndex === columnIndex\"\n                  (cellClick)=\"handleCellClick(columnIndex)\"\n                ></co-simple-grid-cell>\n              <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n            </div>\n          </co-form>\n        </div>\n      </div>\n    </div>\n  ",
+                    template: "\n    <co-grid-toolbar *ngIf=\"inlineEdit && showToolbar\"\n                     (addClick)=\"addRow()\"\n                     (editClick)=\"editRow($event)\"\n                     (saveClick)=\"validateAndSave()\"\n                     (cancelClick)=\"cancelEditRow()\"\n    ></co-grid-toolbar>\n    <table class=\"simple-grid-table\">\n      <colgroup>\n        <col *ngFor=\"let column of headerColumns; let index = index\" [attr.width]=\"column.width\">\n      </colgroup>\n      <thead>\n      <tr>\n        <th scope=\"col\" #headerCell class=\"simple-grid-column-header\" *ngFor=\"let column of headerColumns; let index = index\">\n          <div class=\"simple-grid-column-header-wrapper\" [class.resizable]=\"resizable\">\n            <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                 [textContent]=\"column.headerText\"\n            ></div>\n            <div *ngIf=\"resizable && column.resizable\" class=\"simple-grid-column-sizer\"\n                 (mousedown)=\"handleSizerMouseDown($event, column)\"\n            ></div>\n          </div>\n        </th>\n      </tr>\n      </thead>\n      <tbody #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n             class=\"simple-grid-drag-drop-list\"\n             [cdkDropListDisabled]=\"!dragDropEnabled\"\n             [cdkDropListData]=\"data\"\n             [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n             (cdkDropListDropped)=\"handleDrop($event)\">\n        <tr class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex\"\n          [class.editting]=\"rowIndex === editRowIndex\" *ngFor=\"let row of data; let rowIndex = index\" cdkDrag\n          (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex)\">\n          <co-form class=\"simple-grid-row-form\">\n            <ng-container *ngIf=\"isSingleColumnRow(row)\">\n              <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumns.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 headerColumns; 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 && editting && rowIndex === editRowIndex\"\n                    [fieldEditMode]=\"editCellIndex === columnIndex\"\n                    (cellClick)=\"handleCellClick(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>\n          </co-form>\n        </tr>\n      </tbody>\n    </table>\n  ",
                     providers: [
                         FormMasterService
                     ],
@@ -9015,6 +9135,7 @@
         { type: FormMasterService }
     ]; };
     SimpleGridComponent.propDecorators = {
+        headerCells: [{ type: core.ViewChildren, args: ["headerCell",] }],
         showClass: [{ type: core.HostBinding, args: ["class.co-simple-grid",] }],
         handleKeyDown: [{ type: core.HostListener, args: ['keydown', ['$event'],] }]
     };