@colijnit/corecomponents_v12 12.2.15 → 12.2.17

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -5420,7 +5420,7 @@
     }());
     FormComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-form-test",
+                    selector: "co-form",
                     template: "\n    <ng-content></ng-content>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
@@ -6118,7 +6118,13 @@
                 this._elementRef.nativeElement.style.width = parentRect.width + "px";
             }
             if (this.rightAlign) {
-                this._elementRef.nativeElement.style.left = (parentRect.right - elementRect.width) + "px";
+                var left = (parentRect.right - elementRect.width);
+                if (this.keepInView) {
+                    var viewToKeepIn = this.view ? this.view : window;
+                    var viewLeft = viewToKeepIn.offsetLeft || 0;
+                    left = Math.max(left, viewLeft);
+                }
+                this._elementRef.nativeElement.style.left = left + "px";
             }
             else if (this.fullSize) {
                 this._elementRef.nativeElement.style.left = "0px";
@@ -8070,7 +8076,7 @@
             event.preventDefault();
             event.stopPropagation();
             if (!this.readonly) {
-                this.model = !this.model;
+                this.model = true;
                 this.modelChange.next(this.model);
                 if (this.control) {
                     this.control.markAsDirty({ onlySelf: true });
@@ -9700,6 +9706,7 @@
             this.columns = [];
             this.headerColumns = [];
             this._data = [];
+            this.disabledRows = [];
             this._prepared = false;
         }
         Object.defineProperty(BaseSimpleGridComponent.prototype, "content", {
@@ -9771,6 +9778,8 @@
         BaseSimpleGridComponent.prototype.singleColumnIndex = function (row) {
             return row.singleColumnIndex;
         };
+        BaseSimpleGridComponent.prototype.prepareDataRow = function (row, index) {
+        };
         BaseSimpleGridComponent.prototype._setColumns = function (columns) {
             var _a;
             (_a = this.columns).push.apply(_a, __spreadArray([], __read(columns)));
@@ -9780,6 +9789,7 @@
             if (this._prepared) {
                 return;
             }
+            this.disabledRows.length = 0;
             if (this.columns && this.columns.length > 0) {
                 this.headerColumns = this.columns.filter(function (c) { return !c.singleColumn; });
                 var singleColumnIndex = -1;
@@ -9799,6 +9809,9 @@
                         }
                     }
                 }
+                for (var i = 0; i < this.data.length; i++) {
+                    this.prepareDataRow(this.data[i], i);
+                }
                 this._prepared = true;
             }
             this._resizeColumnsToFit();
@@ -9853,6 +9866,7 @@
             _this.defaultTextAlign = exports.ColumnAlign.Left;
             _this.showAdd = false;
             _this.showDelete = false;
+            _this.editOnCellClick = true;
             _this.rightToolbar = false;
             _this.rowsPerPage = 1000;
             _this.editing = false;
@@ -9904,13 +9918,35 @@
         SimpleGridComponent.prototype.handleClickOutsideRow = function () {
             this.validateAndSave();
         };
-        SimpleGridComponent.prototype.isRowDisabled = function (row) {
-            if (this.rowDisabledFn && (typeof this.rowDisabledFn === 'function')) {
-                return this.rowDisabledFn.call(this, row);
-            }
-            else {
-                return false;
-            }
+        SimpleGridComponent.prototype.getIsRowDisabled = function (idx) {
+            return this.disabledRows.indexOf(idx) > -1;
+        };
+        SimpleGridComponent.prototype.isRowDisabled = function (row, index) {
+            return __awaiter(this, void 0, void 0, function () {
+                var disabled, idxRow;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(this.rowDisabledFn && (typeof this.rowDisabledFn === 'function'))) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.rowDisabledFn.call(this, row)];
+                        case 1:
+                            disabled = _a.sent();
+                            idxRow = this.disabledRows.indexOf(index);
+                            if (disabled) {
+                                if (idxRow < 0) {
+                                    this.disabledRows.push(index);
+                                }
+                            }
+                            else {
+                                if (idxRow > -1) {
+                                    this.disabledRows.splice(idxRow, 1);
+                                }
+                            }
+                            return [2 /*return*/, disabled];
+                        case 2: return [2 /*return*/, false];
+                    }
+                });
+            });
         };
         SimpleGridComponent.prototype.isSingleColumn = function (column) {
             return column.singleColumn;
@@ -9981,10 +10017,6 @@
         };
         SimpleGridComponent.prototype.handleClickRow = function (event, index, row) {
             var _this = this;
-            if (this.isRowDisabled(row)) {
-                this.selectedRowIndex = -1;
-                return;
-            }
             setTimeout(function () {
                 if (_this._doubleClicked) {
                     return;
@@ -10003,17 +10035,36 @@
             this._detectChanges();
         };
         SimpleGridComponent.prototype.handleDblClickRow = function (event, index, row) {
-            if (this.isRowDisabled(row)) {
-                this.selectedRowIndex = -1;
-                return;
-            }
-            this._doubleClicked = true;
-            this.dblClickRow.next(this.data[index]);
-            this.selectTheRow(index, false);
-            if (this.inlineEdit) {
-                this.editRow(event);
-            }
-            this._resetDblClick();
+            return __awaiter(this, void 0, void 0, function () {
+                var canEdit;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.isRowDisabled(row, index)];
+                        case 1:
+                            if (_a.sent()) {
+                                this.selectedRowIndex = -1;
+                                return [2 /*return*/];
+                            }
+                            canEdit = true;
+                            if (!(this.canRowBeEdittedFn && typeof this.canRowBeEdittedFn === 'function')) return [3 /*break*/, 3];
+                            return [4 /*yield*/, this.canRowBeEdittedFn.call(this, row)];
+                        case 2:
+                            canEdit = _a.sent();
+                            _a.label = 3;
+                        case 3:
+                            if (canEdit) {
+                                this._doubleClicked = true;
+                                this.dblClickRow.next(this.data[index]);
+                                this.selectTheRow(index, false);
+                                if (this.inlineEdit) {
+                                    this.editRow(event);
+                                }
+                            }
+                            this._resetDblClick();
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         SimpleGridComponent.prototype.editRow = function (event, selectCell) {
             var _this = this;
@@ -10029,18 +10080,37 @@
             this._detectChanges();
         };
         SimpleGridComponent.prototype.handleCellClick = function (event, row, rowIndex, cellIndex) {
-            if (this.isRowDisabled(row)) {
-                this.selectedRowIndex = -1;
-                return;
-            }
-            this.selectTheRow(rowIndex, false);
-            if (this.inlineEdit) {
-                this.editRowIndex = rowIndex;
-                this.editCellIndex = cellIndex;
-                this.editing = true;
-                this.editRow(event, false);
-            }
-            this._detectChanges();
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this.editOnCellClick) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.isRowDisabled(row, rowIndex)];
+                        case 1:
+                            if (_a.sent()) {
+                                this.selectedRowIndex = -1;
+                                return [2 /*return*/];
+                            }
+                            this.selectTheRow(rowIndex, false);
+                            if (this.inlineEdit) {
+                                this.editRowIndex = rowIndex;
+                                this.editCellIndex = cellIndex;
+                                this.editing = true;
+                                this.editRow(event, false);
+                            }
+                            return [3 /*break*/, 3];
+                        case 2:
+                            this.editCellIndex = cellIndex;
+                            _a.label = 3;
+                        case 3:
+                            this._detectChanges();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        SimpleGridComponent.prototype.prepareDataRow = function (row, index) {
+            this.isRowDisabled(row, index);
         };
         SimpleGridComponent.prototype._resetDblClick = function () {
             var _this = this;
@@ -10190,7 +10260,7 @@
     SimpleGridComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-simple-grid',
-                    template: "\n    <co-grid-toolbar *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    <table class=\"simple-grid-table\" [clickOutside]=\"editing\" (clickOutside)=\"handleClickOutsideRow()\">\n      <colgroup>\n        <col *ngFor=\"let column of headerColumns; 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 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               [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 class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                   [textContent]=\"column.headerText || '&nbsp;'\"\n              ></div>\n            </ng-template>\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 || editing\"\n             [cdkDropListData]=\"data\"\n             [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n             (cdkDropListDropped)=\"handleDrop($event)\">\n        <tr class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n            [class.disabled]=\"isRowDisabled(row)\"\n          [class.editing]=\"rowIndex === editRowIndex\" *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\" cdkDrag\n          (click)=\"handleClickRow($event, rowIndex, row)\" (dblclick)=\"handleDblClickRow($event, rowIndex, row)\" (visibilityChange)=\"rowVisible.next(row)\">\n          <co-form-test 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 && 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>\n          </co-form-test>\n        </tr>\n      </tbody>\n    </table>\n    <co-pagination-bar *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  ",
+                    template: "\n    <co-grid-toolbar *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    <table class=\"simple-grid-table\" [clickOutside]=\"editing\" (clickOutside)=\"handleClickOutsideRow()\">\n      <colgroup>\n        <col *ngFor=\"let column of headerColumns; 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 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               [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 class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                   [textContent]=\"column.headerText || '&nbsp;'\"\n              ></div>\n            </ng-template>\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 || editing\"\n             [cdkDropListData]=\"data\"\n             [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n             (cdkDropListDropped)=\"handleDrop($event)\">\n        <tr class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n            [class.disabled]=\"getIsRowDisabled(rowIndex)\"\n          [class.editing]=\"rowIndex === editRowIndex\" *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\" cdkDrag\n          (click)=\"handleClickRow($event, rowIndex, row)\" (dblclick)=\"handleDblClickRow($event, rowIndex, row)\" (visibilityChange)=\"rowVisible.next(row)\">\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 && 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>\n          </co-form>\n        </tr>\n      </tbody>\n    </table>\n    <co-pagination-bar *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  ",
                     providers: [
                         FormMasterService
                     ],
@@ -10206,9 +10276,11 @@
         headerCells: [{ type: i0.ViewChildren, args: ['headerCell',] }],
         showAdd: [{ type: i0.Input }],
         showDelete: [{ type: i0.Input }],
+        editOnCellClick: [{ type: i0.Input }],
         rightToolbar: [{ type: i0.Input }],
         rowsPerPage: [{ type: i0.Input }],
         rowDisabledFn: [{ type: i0.Input }],
+        canRowBeEdittedFn: [{ type: i0.Input }],
         showClass: [{ type: i0.HostBinding, args: ['class.co-simple-grid',] }],
         handleKeyDown: [{ type: i0.HostListener, args: ['keydown', ['$event'],] }]
     };
@@ -11411,6 +11483,7 @@
             }
             this.model = option;
             this.modelChange.emit(this.model);
+            this.detectChanges();
         };
         ListOfValuesComponent.prototype.closePopup = function () {
             this.keepFocussed = false;
@@ -12845,7 +12918,7 @@
     LoaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-loader',
-                    template: "\n      <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n           viewBox=\"0 0 200 200\" xml:space=\"preserve\">\n        <defs>\n          <linearGradient id=\"gradientFade\" x1=\"20%\" x2=\"50%\" y1=\"60%\" y2=\"100%\">\n            <stop offset=\"0%\" class=\"spinner-gradient-stop\" />\n            <stop offset=\"25%\" stop-opacity=\"75%\" class=\"spinner-gradient-stop\" />\n            <stop offset=\"50%\" stop-opacity=\"50%\" class=\"spinner-gradient-stop\" />\n            <stop offset=\"75%\" stop-opacity=\"25%\" class=\"spinner-gradient-stop\" />\n            <stop offset=\"100%\" stop-opacity=\"5%\" class=\"spinner-gradient-stop\" />\n          </linearGradient>\n        </defs>          \n        <g id=\"mask\">\n            <ellipse transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -41.0887 100.8995)\" class=\"circle\" cx=\"101.25\" cy=\"101.25\" rx=\"77.58\"\n                     ry=\"77.58\"/>\n        </g>\n        <g>\n            <circle id=\"ring\" class=\"ring-color\" cx=\"100\" cy=\"100\" r=\"90\" fill=\"transparent\" />\n        </g>\n        <g id=\"js\">\n          <path class=\"main-color\" d=\"M87.93,149.17c-0.12-0.17-0.08-0.4,0.09-0.52l0.61-0.45c2.92-2.14,4.34-4.61,4.34-7.56l0-20.64h2.47\n            c0.74,0,1.34,0.6,1.34,1.34v18.32c0,2.97-0.65,5.4-1.93,7.23c-0.61,0.89-1.25,1.66-1.9,2.28c-0.63,0.6-1.41,1.23-2.3,1.87\n            l-0.65,0.47c-0.18,0.12-0.42,0.08-0.54-0.1L87.93,149.17z\"/>\n              <path class=\"main-color\" d=\"M107.12,142.92c-2.24,0-4.18-0.59-5.79-1.75l0,0c-0.47-0.34-0.59-1-0.27-1.48l1.06-1.59\n            c0.12-0.17,0.35-0.22,0.53-0.11l0.58,0.38c1.18,0.77,2.43,1.14,3.84,1.14c1.36,0,2.39-0.25,3.05-0.75\n            c0.59-0.44,0.86-1.04,0.86-1.92c0-0.59-0.22-1.15-0.68-1.71c-0.55-0.67-1.23-1.29-2.02-1.84c-0.85-0.58-1.74-1.22-2.66-1.88\n            c-0.97-0.7-1.81-1.55-2.5-2.53c-0.75-1.06-1.12-2.23-1.12-3.46c0-1.67,0.63-3.02,1.89-4.01c1.17-0.93,2.74-1.4,4.66-1.4\n            c1.83,0,3.55,0.37,5.13,1.11l0.62,0.29c0.19,0.09,0.27,0.31,0.19,0.5l-1.03,2.37c-0.08,0.19-0.31,0.28-0.5,0.2l-0.64-0.27\n            c-1.22-0.52-2.45-0.78-3.64-0.78c-3.01,0-3.01,1.31-3.01,1.94c0,0.63,0.22,1.21,0.68,1.77c0.55,0.67,1.22,1.28,2.01,1.8\n            c0.91,0.61,1.8,1.22,2.66,1.82c0.97,0.68,1.82,1.52,2.5,2.47c0.75,1.04,1.13,2.2,1.13,3.44c0,2.05-0.72,3.64-2.14,4.72\n            C111.17,142.4,109.36,142.92,107.12,142.92z\"/>\n        </g>\n        <g id=\"i\">\n          <path class=\"second-color\" d=\"M38.1,100.24V80.62c0-0.18,0.14-0.32,0.32-0.32h2.53c0.88,0,1.6,0.72,1.6,1.6v18.34\n            c0,0.18-0.14,0.32-0.32,0.32h-3.8C38.25,100.56,38.1,100.42,38.1,100.24z\"/>\n        </g>\n        <g id=\"n\">\n          <path class=\"second-color\" d=\"M126.95,107l-14.97-17.18c-0.19-0.22-0.56-0.09-0.56,0.21v16.62c0,0.18-0.14,0.32-0.32,0.32h-3.8\n            c-0.18,0-0.32-0.14-0.32-0.32V82.12c0-0.88,0.72-1.6,1.6-1.6h1.07c0.09,0,0.18,0.04,0.24,0.11l14.97,17.22\n            c0.19,0.22,0.56,0.09,0.56-0.21V80.99c0-0.18,0.14-0.32,0.32-0.32h3.8c0.18,0,0.32,0.14,0.32,0.32v25.81\n            c0,0.18-0.14,0.32-0.32,0.32h-2.35C127.1,107.11,127.01,107.07,126.95,107z\"/>\n        </g>\n        <g id=\"e\">\n          <path class=\"second-color\" d=\"M150.28,105.37V80.99c0-0.18,0.14-0.32,0.32-0.32h13.12c0.18,0,0.32,0.14,0.32,0.32v3.59\n            c0,0.18-0.14,0.32-0.32,0.32h-8.68c-0.18,0-0.32,0.14-0.32,0.32v5.14c0,0.18,0.14,0.32,0.32,0.32h7.77c0.18,0,0.32,0.14,0.32,0.32\n            v3.55c0,0.18-0.14,0.32-0.32,0.32h-7.77c-0.18,0-0.32,0.14-0.32,0.32v7.17c0,0.18,0.14,0.32,0.32,0.32h9.04\n            c0.18,0,0.32,0.14,0.32,0.32v3.66c0,0.18-0.14,0.32-0.32,0.32h-12.2C151,106.97,150.28,106.25,150.28,105.37z\"/>\n        </g>\n        <g id=\"o\">\n        <path class=\"second-color\" d=\"M67.44,86.2c0.59,0.54,0.68,1.43,0.23,2.09c-0.41,0.6-0.75,1.24-1.01,1.92c-0.42,1.1-0.63,2.31-0.63,3.61\n          c0,1.3,0.21,2.51,0.63,3.61c0.42,1.1,1.04,2.1,1.88,2.98c0.82,0.87,1.75,1.53,2.8,1.97c1.04,0.44,2.19,0.66,3.44,0.66\n          c1.25,0,2.4-0.22,3.43-0.66c1.04-0.44,1.97-1.09,2.78-1.97c0.83-0.88,1.45-1.88,1.86-2.98c0.42-1.1,0.63-2.31,0.63-3.61\n          c0-1.3-0.21-2.51-0.63-3.62c-0.42-1.1-1.04-2.11-1.87-3c-0.81-0.87-1.74-1.53-2.78-1.97c-1.04-0.44-2.18-0.66-3.43-0.66\n          c-0.77,0-1.49,0.08-2.18,0.25c-0.75,0.18-1.53-0.19-1.84-0.9l-1.03-2.32c-0.07-0.17,0-0.36,0.17-0.43\n          c1.49-0.58,3.12-0.87,4.86-0.87c1.87,0,3.59,0.33,5.17,0.99c1.58,0.66,3,1.64,4.27,2.95c1.26,1.3,2.21,2.76,2.84,4.36\n          c0.63,1.6,0.95,3.34,0.95,5.22c0,1.88-0.32,3.62-0.95,5.22c-0.63,1.6-1.58,3.06-2.84,4.36c-1.27,1.31-2.69,2.29-4.27,2.95\n          c-1.58,0.66-3.31,0.99-5.17,0.99c-1.87,0-3.6-0.33-5.17-0.99c-1.58-0.66-3-1.64-4.27-2.95c-1.26-1.3-2.21-2.76-2.84-4.36\n          c-0.63-1.6-0.95-3.34-0.95-5.22c0-1.88,0.32-3.62,0.95-5.22c0.6-1.51,1.47-2.88,2.63-4.13c0.12-0.13,0.32-0.13,0.45-0.02\n          L67.44,86.2z\"/>\n        </g>\n        <g id=\"smile\">\n          <path class=\"main-color\" d=\"M101.26,178.35c-3.73-0.01-7.38-0.28-10.86-0.82c-3.62-0.57-6.94-1.38-9.85-2.4c-3.01-1.05-5.69-2.3-7.94-3.73\n            c-1.09-0.71-2.1-1.76-2.99-2.84c0.98,0.74,2.03,1.44,3.16,2.07c2.38,1.38,5.13,2.58,8.16,3.55c5.99,1.93,13.15,2.99,20.17,2.99\n            h0.31c7.01,0,14.17-1.06,20.16-2.99c3.03-0.97,5.78-2.16,8.17-3.55c1.12-0.64,2.17-1.32,3.15-2.06c-0.89,1.08-1.89,2.13-2.99,2.83\n            c-2.25,1.42-4.92,2.67-7.94,3.72c-2.91,1.02-6.23,1.83-9.85,2.4C108.65,178.07,105,178.35,101.26,178.35z\"/>\n        </g>\n    </svg>\n  ",
+                    template: "\n      <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n           viewBox=\"0 0 200 200\" xml:space=\"preserve\">\n        <defs>\n          <linearGradient id=\"gradientFade\" x1=\"20%\" x2=\"50%\" y1=\"60%\" y2=\"100%\">\n            <stop offset=\"0%\" class=\"spinner-gradient-stop\" />\n            <stop offset=\"25%\" stop-opacity=\"75%\" class=\"spinner-gradient-stop\" />\n            <stop offset=\"50%\" stop-opacity=\"50%\" class=\"spinner-gradient-stop\" />\n            <stop offset=\"75%\" stop-opacity=\"25%\" class=\"spinner-gradient-stop\" />\n            <stop offset=\"100%\" stop-opacity=\"5%\" class=\"spinner-gradient-stop\" />\n          </linearGradient>\n        </defs>          \n        <g id=\"mask\">\n            <ellipse transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -41.0887 100.8995)\" class=\"circle\" cx=\"101.25\" cy=\"101.25\" rx=\"77.58\"\n                     ry=\"77.58\"/>\n        </g>\n        <g id=\"ring\" fill=\"none\">\n            <circle id=\"ring-loader\" class=\"ring-color\" cx=\"100\" cy=\"100\" r=\"90\" fill=\"none\" />\n        </g>\n        <g id=\"js\">\n          <path class=\"main-color\" d=\"M87.93,149.17c-0.12-0.17-0.08-0.4,0.09-0.52l0.61-0.45c2.92-2.14,4.34-4.61,4.34-7.56l0-20.64h2.47\n            c0.74,0,1.34,0.6,1.34,1.34v18.32c0,2.97-0.65,5.4-1.93,7.23c-0.61,0.89-1.25,1.66-1.9,2.28c-0.63,0.6-1.41,1.23-2.3,1.87\n            l-0.65,0.47c-0.18,0.12-0.42,0.08-0.54-0.1L87.93,149.17z\"/>\n              <path class=\"main-color\" d=\"M107.12,142.92c-2.24,0-4.18-0.59-5.79-1.75l0,0c-0.47-0.34-0.59-1-0.27-1.48l1.06-1.59\n            c0.12-0.17,0.35-0.22,0.53-0.11l0.58,0.38c1.18,0.77,2.43,1.14,3.84,1.14c1.36,0,2.39-0.25,3.05-0.75\n            c0.59-0.44,0.86-1.04,0.86-1.92c0-0.59-0.22-1.15-0.68-1.71c-0.55-0.67-1.23-1.29-2.02-1.84c-0.85-0.58-1.74-1.22-2.66-1.88\n            c-0.97-0.7-1.81-1.55-2.5-2.53c-0.75-1.06-1.12-2.23-1.12-3.46c0-1.67,0.63-3.02,1.89-4.01c1.17-0.93,2.74-1.4,4.66-1.4\n            c1.83,0,3.55,0.37,5.13,1.11l0.62,0.29c0.19,0.09,0.27,0.31,0.19,0.5l-1.03,2.37c-0.08,0.19-0.31,0.28-0.5,0.2l-0.64-0.27\n            c-1.22-0.52-2.45-0.78-3.64-0.78c-3.01,0-3.01,1.31-3.01,1.94c0,0.63,0.22,1.21,0.68,1.77c0.55,0.67,1.22,1.28,2.01,1.8\n            c0.91,0.61,1.8,1.22,2.66,1.82c0.97,0.68,1.82,1.52,2.5,2.47c0.75,1.04,1.13,2.2,1.13,3.44c0,2.05-0.72,3.64-2.14,4.72\n            C111.17,142.4,109.36,142.92,107.12,142.92z\"/>\n        </g>\n        <g id=\"i\">\n          <path class=\"second-color\" d=\"M38.1,100.24V80.62c0-0.18,0.14-0.32,0.32-0.32h2.53c0.88,0,1.6,0.72,1.6,1.6v18.34\n            c0,0.18-0.14,0.32-0.32,0.32h-3.8C38.25,100.56,38.1,100.42,38.1,100.24z\"/>\n        </g>\n        <g id=\"n\">\n          <path class=\"second-color\" d=\"M126.95,107l-14.97-17.18c-0.19-0.22-0.56-0.09-0.56,0.21v16.62c0,0.18-0.14,0.32-0.32,0.32h-3.8\n            c-0.18,0-0.32-0.14-0.32-0.32V82.12c0-0.88,0.72-1.6,1.6-1.6h1.07c0.09,0,0.18,0.04,0.24,0.11l14.97,17.22\n            c0.19,0.22,0.56,0.09,0.56-0.21V80.99c0-0.18,0.14-0.32,0.32-0.32h3.8c0.18,0,0.32,0.14,0.32,0.32v25.81\n            c0,0.18-0.14,0.32-0.32,0.32h-2.35C127.1,107.11,127.01,107.07,126.95,107z\"/>\n        </g>\n        <g id=\"e\">\n          <path class=\"second-color\" d=\"M150.28,105.37V80.99c0-0.18,0.14-0.32,0.32-0.32h13.12c0.18,0,0.32,0.14,0.32,0.32v3.59\n            c0,0.18-0.14,0.32-0.32,0.32h-8.68c-0.18,0-0.32,0.14-0.32,0.32v5.14c0,0.18,0.14,0.32,0.32,0.32h7.77c0.18,0,0.32,0.14,0.32,0.32\n            v3.55c0,0.18-0.14,0.32-0.32,0.32h-7.77c-0.18,0-0.32,0.14-0.32,0.32v7.17c0,0.18,0.14,0.32,0.32,0.32h9.04\n            c0.18,0,0.32,0.14,0.32,0.32v3.66c0,0.18-0.14,0.32-0.32,0.32h-12.2C151,106.97,150.28,106.25,150.28,105.37z\"/>\n        </g>\n        <g id=\"o\">\n        <path class=\"second-color\" d=\"M67.44,86.2c0.59,0.54,0.68,1.43,0.23,2.09c-0.41,0.6-0.75,1.24-1.01,1.92c-0.42,1.1-0.63,2.31-0.63,3.61\n          c0,1.3,0.21,2.51,0.63,3.61c0.42,1.1,1.04,2.1,1.88,2.98c0.82,0.87,1.75,1.53,2.8,1.97c1.04,0.44,2.19,0.66,3.44,0.66\n          c1.25,0,2.4-0.22,3.43-0.66c1.04-0.44,1.97-1.09,2.78-1.97c0.83-0.88,1.45-1.88,1.86-2.98c0.42-1.1,0.63-2.31,0.63-3.61\n          c0-1.3-0.21-2.51-0.63-3.62c-0.42-1.1-1.04-2.11-1.87-3c-0.81-0.87-1.74-1.53-2.78-1.97c-1.04-0.44-2.18-0.66-3.43-0.66\n          c-0.77,0-1.49,0.08-2.18,0.25c-0.75,0.18-1.53-0.19-1.84-0.9l-1.03-2.32c-0.07-0.17,0-0.36,0.17-0.43\n          c1.49-0.58,3.12-0.87,4.86-0.87c1.87,0,3.59,0.33,5.17,0.99c1.58,0.66,3,1.64,4.27,2.95c1.26,1.3,2.21,2.76,2.84,4.36\n          c0.63,1.6,0.95,3.34,0.95,5.22c0,1.88-0.32,3.62-0.95,5.22c-0.63,1.6-1.58,3.06-2.84,4.36c-1.27,1.31-2.69,2.29-4.27,2.95\n          c-1.58,0.66-3.31,0.99-5.17,0.99c-1.87,0-3.6-0.33-5.17-0.99c-1.58-0.66-3-1.64-4.27-2.95c-1.26-1.3-2.21-2.76-2.84-4.36\n          c-0.63-1.6-0.95-3.34-0.95-5.22c0-1.88,0.32-3.62,0.95-5.22c0.6-1.51,1.47-2.88,2.63-4.13c0.12-0.13,0.32-0.13,0.45-0.02\n          L67.44,86.2z\"/>\n        </g>\n        <g id=\"smile\">\n          <path class=\"main-color\" d=\"M101.26,178.35c-3.73-0.01-7.38-0.28-10.86-0.82c-3.62-0.57-6.94-1.38-9.85-2.4c-3.01-1.05-5.69-2.3-7.94-3.73\n            c-1.09-0.71-2.1-1.76-2.99-2.84c0.98,0.74,2.03,1.44,3.16,2.07c2.38,1.38,5.13,2.58,8.16,3.55c5.99,1.93,13.15,2.99,20.17,2.99\n            h0.31c7.01,0,14.17-1.06,20.16-2.99c3.03-0.97,5.78-2.16,8.17-3.55c1.12-0.64,2.17-1.32,3.15-2.06c-0.89,1.08-1.89,2.13-2.99,2.83\n            c-2.25,1.42-4.92,2.67-7.94,3.72c-2.91,1.02-6.23,1.83-9.85,2.4C108.65,178.07,105,178.35,101.26,178.35z\"/>\n        </g>\n    </svg>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -12872,6 +12945,53 @@
                 },] }
     ];
 
+    var TileSelectComponent = /** @class */ (function () {
+        function TileSelectComponent() {
+            this.selected = false;
+            this.readonly = false;
+            this.showRadioButton = true;
+            this.selectedChange = new i0.EventEmitter();
+        }
+        TileSelectComponent.prototype.showClass = function () {
+            return true;
+        };
+        return TileSelectComponent;
+    }());
+    TileSelectComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'co-tile-select',
+                    template: "\n      <div class=\"co-tile-wrapper\" (click)=\"selectedChange.emit(selected)\">\n          <div class=\"co-tile-select-wrapper\" *ngIf=\"showRadioButton\">\n              <co-input-radio-button [model]=\"selected\" [readonly]=\"selected || readonly\" (modelChange)=\"selectedChange.emit($event)\"></co-input-radio-button>\n          </div>\n          <div class=\"co-tile-content-wrapper\">\n              <ng-content></ng-content>\n          </div>\n      </div>\n    ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    TileSelectComponent.propDecorators = {
+        selected: [{ type: i0.HostBinding, args: ['class.selected',] }, { type: i0.Input }],
+        readonly: [{ type: i0.Input }],
+        showRadioButton: [{ type: i0.Input }],
+        selectedChange: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-tile-select',] }]
+    };
+
+    var TileSelectModule = /** @class */ (function () {
+        function TileSelectModule() {
+        }
+        return TileSelectModule;
+    }());
+    TileSelectModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        InputRadioButtonModule
+                    ],
+                    declarations: [
+                        TileSelectComponent
+                    ],
+                    exports: [
+                        TileSelectComponent
+                    ]
+                },] }
+    ];
+
     var FilterPipe = /** @class */ (function () {
         function FilterPipe() {
         }
@@ -13738,6 +13858,8 @@
     exports.TextInputPopupComponent = TextInputPopupComponent;
     exports.TileComponent = TileComponent;
     exports.TileModule = TileModule;
+    exports.TileSelectComponent = TileSelectComponent;
+    exports.TileSelectModule = TileSelectModule;
     exports.TooltipDirectiveModule = TooltipDirectiveModule;
     exports.ViewModeButtonsComponent = ViewModeButtonsComponent;
     exports.ViewModeButtonsModule = ViewModeButtonsModule;