ca-components 2.0.70 → 2.0.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -27090,7 +27090,7 @@ class CaMainTableComponent {
|
|
|
27090
27090
|
this.onReorder.emit(event);
|
|
27091
27091
|
}
|
|
27092
27092
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaMainTableComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27093
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaMainTableComponent, isStandalone: true, selector: "app-ca-main-table", inputs: { reorderTemplate: "reorderTemplate", reorderTemplatePreview: "reorderTemplatePreview", transparentTable: "transparentTable", sortPredicate: "sortPredicate", hideFieldsToHide: "hideFieldsToHide", reorderItems: "reorderItems", disableReorderRow: "disableReorderRow", columns: "columns", data$: "data$" }, outputs: { onPressEvent: "onPressEvent", onReorder: "onReorder" }, ngImport: i0, template: "<!-- Main Table -->\n@let tableData = data$ | async;\n\n<div class=\"ca-main-table-holder\">\n <table\n class=\"ca-main-table\"\n [class.transparent]=\"transparentTable\"\n cdkDropListGroup\n >\n <thead>\n <tr\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListDisabled]=\"!reorderItems\"\n (cdkDropListDropped)=\"dropHeader($event)\"\n class=\"table-body-list th-table-body-list\"\n >\n @let filteredColumns =\n columns | caMainTableHiddenRows: hideFieldsToHide;\n @for (col of filteredColumns; let indx = $index; track indx) {\n <div\n cdkDragLockAxis=\"x\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n class=\"cdk_th_div table-tr\"\n [class]=\"col.cellCustomClasses\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n headerThTemplate;\n context: { $implicit: col, index: indx }\n \"\n ></ng-container>\n </div>\n }\n </tr>\n </thead>\n <tbody\n #tableMainBody\n cdkScrollable\n cdkDropList\n [cdkDropListData]=\"data$ | async\"\n [cdkDropListSortPredicate]=\"sortPredicate\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-body-list\"\n >\n @for (row of tableData; track $index; let rowIndex = $index) {\n @let isSelected = selectedRowIndex === rowIndex;\n @if (row.rowType === 'reorder') {\n <tr\n cdkDragLockAxis=\"y\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n cdkDragBoundary=\".table-body-list\"\n class=\"table-tr table-preview-row\"\n [cdkDragDisabled]=\"disableReorderRow\"\n >\n <ng-template cdkDragPreview matchSize>\n <tr class=\"table-tr\">\n <ng-container\n *ngTemplateOutlet=\"\n reorderTemplatePreview;\n context: { row: row, index: rowIndex }\n \"\n ></ng-container>\n </tr>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n reorderTemplate;\n context: { row: row, index: rowIndex }\n \"\n ></ng-container>\n </tr>\n } @else {\n <tr\n cdkDragLockAxis=\"y\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n cdkDragBoundary=\".table-body-list\"\n [cdkDragDisabled]=\"!reorderItems\"\n class=\"table-tr\"\n (click)=\"onPressRow(row, rowIndex)\"\n [class]=\"{'selected-row': isSelected}\"\n >\n @for (\n (col of columns | caMainTableHiddenRows: hideFieldsToHide);\n track $index\n ) {\n <td [class]=\"col.cellCustomClasses\">\n <ng-container\n *ngTemplateOutlet=\"\n rowTemplate;\n context: {\n row: row,\n col: col,\n index: rowIndex,\n }\n \"\n ></ng-container>\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<!-- Header Template -->\n<ng-template #headerThTemplate let-col let-indx=\"index\">\n <th>\n @switch (col.headerCellType) {\n @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n col.headerTemplate;\n context: { $implicit: col.header, index: indx }\n \"\n ></ng-container>\n }\n @default {\n <div class=\"th-content-container text-color-bw6-2 user-select-none\">\n {{ col.header }}\n </div>\n }\n }\n </th>\n</ng-template>\n\n<!-- Row Template -->\n<ng-template #rowTemplate let-row=\"row\" let-col=\"col\" let-index=\"index\">\n <div class=\"td-container\">\n <div class=\"td-content-container\">\n @switch (col.cellType) {\n @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n col.template;\n context: {\n $implicit: col.row ? row : row[col.field],\n index: index,\n field: col.field,\n }\n \"\n ></ng-container>\n }\n @case ('component') {\n <ng-container\n *ngComponentOutlet=\"\n col.component;\n injector: createInjector(col.inputs)\n \"\n ></ng-container>\n }\n @default {\n <ng-container\n *ngTemplateOutlet=\"\n customTextTemplate;\n context: {\n $implicit: {\n field: row[col.field],\n pipeType: col.pipeType,\n pipeString: col.pipeString,\n textCustomClasses: col.textCustomClasses,\n index: index,\n },\n }\n \"\n ></ng-container>\n }\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Default Text Template -->\n<ng-template #customTextTemplate let-data let-index>\n @switch (data.pipeType) {\n @case ('date') {\n <div\n [ngClass]=\"data.textCustomClasses\"\n class=\"text text-color-black\"\n >\n {{ data.field | date: data.pipeString }}\n </div>\n }\n @case ('currency') {\n <div\n [ngClass]=\"data.textCustomClasses\"\n class=\"text text-color-black\"\n >\n {{ data.field | currency: data.pipeString }}\n </div>\n }\n @default {\n <div\n [ngClass]=\"data.textCustomClasses\"\n class=\"text text-color-black\"\n >\n {{ data.field }}\n </div>\n }\n }\n</ng-template>\n", styles: ["@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.ca-main-table-holder .main-table-scroll-viewport{min-height:200px}.ca-main-table-holder .ca-main-table{color:#424242;width:100%;border-collapse:collapse;background-color:#eee}.ca-main-table-holder .ca-main-table.transparent{background-color:transparent}.ca-main-table-holder .ca-main-table thead.hidden_thead{display:none!important}.ca-main-table-holder .ca-main-table thead tr th{color:#6c6c6c;text-transform:uppercase;font-size:11px}.ca-main-table-holder .ca-main-table thead tr th .th-content-container{padding:4px}.ca-main-table-holder .ca-main-table thead .table-tr.text-right{text-align:right}.ca-main-table-holder .ca-main-table thead .table-tr.text-center{text-align:center}.ca-main-table-holder .ca-main-table tbody.cdk-drop-list-dragging *{-webkit-user-select:none;-ms-user-select:none;user-select:none}.ca-main-table-holder .ca-main-table tbody .table-tr.selected-row{background-color:var(--selected-row-background, #eee)}.ca-main-table-holder .ca-main-table tbody .table-tr.selected-row td .td-container .td-content-container{background-color:#e5e5e5}.ca-main-table-holder .ca-main-table tbody .table-tr:first-child:not(.table-preview-row){opacity:var(--opacity-first-row, 1)}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row~.table-tr:not(.cdk-drag-preview){opacity:var(--under-reorder-opacity, 1)}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row{border-top:var(--table-preview-row-border-top)}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row:not(.cdk-drag-disabled){cursor:grab}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row.cdk-drag-placeholder{cursor:grabbing}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row td:first-child .td-content-container{border-top-left-radius:0;padding:var(--table-preview-row-first-td-padding, 0)}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row td:last-child .td-content-container{border-top-right-radius:0}.ca-main-table-holder .ca-main-table tbody tr td{height:var(--td-height, 36px);padding:var(--td-padding, 1px 0)}.ca-main-table-holder .ca-main-table tbody tr td .td-container{padding:var(--td-container-padding, 4px 0);display:flex;align-items:center;height:var(--td-container-height, 34px);background-color:#fff}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container{min-height:var(--td-container-content-min-height, 26px);flex:1;padding:var(--td-container-content-padding, 0px 4px);display:flex;align-items:center}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text{font-size:14px}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-100{font-weight:100}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-200{font-weight:200}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-300{font-weight:300}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-400{font-weight:400}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-500{font-weight:500}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-600{font-weight:600}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-700{font-weight:700}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-800{font-weight:800}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-900{font-weight:900}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .dragg-move-end-period{display:inline-block;padding:2px 6px;background-color:#91919166;color:#fff;font-size:11px;line-height:14px}.ca-main-table-holder .ca-main-table tbody tr td:first-child .td-container{border-top-left-radius:3px;border-bottom-left-radius:3px;padding-left:var(--td-cointainer-first-child-padding-left, 4px)}.ca-main-table-holder .ca-main-table tbody tr td:first-child .td-container .td-content-container{border-top-left-radius:3px;border-bottom-left-radius:3px}.ca-main-table-holder .ca-main-table tbody tr td:last-child .td-container{border-top-right-radius:3px;border-bottom-right-radius:3px;padding-right:var(--td-cointainer-last-child-padding-right, 4px)}.ca-main-table-holder .ca-main-table tbody tr td:last-child .td-container .td-content-container{border-top-right-radius:3px;border-bottom-right-radius:3px}.ca-main-table-holder .ca-main-table tbody tr td.text-right .td-content-container{justify-content:flex-end}.ca-main-table-holder .ca-main-table tbody tr td.text-center .td-content-container{justify-content:center}.ca-main-table-holder .ca-main-table tbody tr td.text-left .td-content-container{justify-content:flex-start}.ca-main-table-holder .ca-main-table tbody tr:hover td .td-container .td-content-container{background-color:#eee}.cdk_th_div{display:table-cell}.cdk_th_div th{display:block}.drag-placeholder{background-color:#fff}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:var(--cdk-drag-preview-box-shadow, 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12))}.cdk-drag-preview td{background-color:var(--cdk-preview-td-bgcolor, transparent)!important}.cdk-drag-preview td .with-padding{padding:0 8px!important}.cdk-drag-preview .td-container{background-color:var(--cdk-preview-bgcolor, transparent)!important;color:var(--cdk-preview-textColor, \"#fff\")}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.table-tr:last-child{border:none}.table-body-list.cdk-drop-list-dragging .table-tr:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1);cursor:grabbing!important}.table-body-list.cdk-drop-list-dragging .table-tr:not(.cdk-drag-placeholder) *{cursor:grabbing!important}.drag-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-placeholder,.th-table-body-list .cdk-drag-placeholder{opacity:0}.th-table-body-list .cdk_th_div{box-shadow:none!important;background-color:transparent!important}.tr-border-left{border-left:1px solid #dadada!important}.tr-border-top{border-top:1px solid #dadada!important}.tr-border-bottom{border-bottom:1px solid #dadada!important}\n"], dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: CaMainTableHiddenRowsPipe, name: "caMainTableHiddenRows" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
|
|
27093
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaMainTableComponent, isStandalone: true, selector: "app-ca-main-table", inputs: { truckTemplate: "truckTemplate", reorderTemplate: "reorderTemplate", reorderTemplatePreview: "reorderTemplatePreview", transparentTable: "transparentTable", sortPredicate: "sortPredicate", hideFieldsToHide: "hideFieldsToHide", reorderItems: "reorderItems", disableReorderRow: "disableReorderRow", columns: "columns", data$: "data$" }, outputs: { onPressEvent: "onPressEvent", onReorder: "onReorder" }, ngImport: i0, template: "<!-- Main Table -->\n@let tableData = data$ | async;\n\n<div class=\"ca-main-table-holder\">\n <table\n class=\"ca-main-table\"\n [class.transparent]=\"transparentTable\"\n cdkDropListGroup\n >\n <thead>\n <tr\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListDisabled]=\"!reorderItems\"\n (cdkDropListDropped)=\"dropHeader($event)\"\n class=\"table-body-list th-table-body-list\"\n >\n @let filteredColumns =\n columns | caMainTableHiddenRows: hideFieldsToHide;\n @for (col of filteredColumns; let indx = $index; track indx) {\n <div\n cdkDragLockAxis=\"x\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n class=\"cdk_th_div table-tr\"\n [class]=\"col.cellCustomClasses\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n headerThTemplate;\n context: { $implicit: col, index: indx }\n \"\n ></ng-container>\n </div>\n }\n </tr>\n </thead>\n <tbody\n #tableMainBody\n cdkScrollable\n cdkDropList\n [cdkDropListData]=\"data$ | async\"\n [cdkDropListSortPredicate]=\"sortPredicate\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-body-list\"\n >\n @for (row of tableData; track $index; let rowIndex = $index) {\n @let isSelected = selectedRowIndex === rowIndex;\n @if (row.rowType === 'reorder') {\n <tr\n cdkDragLockAxis=\"y\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n cdkDragBoundary=\".table-body-list\"\n class=\"table-tr table-preview-row\"\n [cdkDragDisabled]=\"disableReorderRow\"\n >\n <ng-template cdkDragPreview matchSize>\n <tr class=\"table-tr\">\n <ng-container\n *ngTemplateOutlet=\"\n reorderTemplatePreview;\n context: { row: row, index: rowIndex }\n \"\n ></ng-container>\n </tr>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n reorderTemplate;\n context: { row: row, index: rowIndex }\n \"\n ></ng-container>\n </tr>\n } @else if (row.rowType === 'truck') {\n <tr class=\"table-tr\">\n <ng-container\n *ngTemplateOutlet=\"\n truckTemplate;\n context: { row: row, index: rowIndex }\n \"\n ></ng-container>\n </tr>\n } @else {\n <tr\n cdkDragLockAxis=\"y\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n cdkDragBoundary=\".table-body-list\"\n [cdkDragDisabled]=\"!reorderItems\"\n class=\"table-tr\"\n (click)=\"onPressRow(row, rowIndex)\"\n [class]=\"{'selected-row': isSelected}\"\n >\n @for (\n (col of columns | caMainTableHiddenRows: hideFieldsToHide);\n track $index\n ) {\n <td [class]=\"col.cellCustomClasses\">\n <ng-container\n *ngTemplateOutlet=\"\n rowTemplate;\n context: {\n row: row,\n col: col,\n index: rowIndex,\n }\n \"\n ></ng-container>\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<!-- Header Template -->\n<ng-template #headerThTemplate let-col let-indx=\"index\">\n <th>\n @switch (col.headerCellType) {\n @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n col.headerTemplate;\n context: { $implicit: col.header, index: indx }\n \"\n ></ng-container>\n }\n @default {\n <div class=\"th-content-container text-color-bw6-2 user-select-none\">\n {{ col.header }}\n </div>\n }\n }\n </th>\n</ng-template>\n\n<!-- Row Template -->\n<ng-template #rowTemplate let-row=\"row\" let-col=\"col\" let-index=\"index\">\n <div class=\"td-container\">\n <div class=\"td-content-container\">\n @switch (col.cellType) {\n @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n col.template;\n context: {\n $implicit: col.row ? row : row[col.field],\n index: index,\n field: col.field,\n }\n \"\n ></ng-container>\n }\n @case ('component') {\n <ng-container\n *ngComponentOutlet=\"\n col.component;\n injector: createInjector(col.inputs)\n \"\n ></ng-container>\n }\n @default {\n <ng-container\n *ngTemplateOutlet=\"\n customTextTemplate;\n context: {\n $implicit: {\n field: row[col.field],\n pipeType: col.pipeType,\n pipeString: col.pipeString,\n textCustomClasses: col.textCustomClasses,\n index: index,\n },\n }\n \"\n ></ng-container>\n }\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Default Text Template -->\n<ng-template #customTextTemplate let-data let-index>\n @switch (data.pipeType) {\n @case ('date') {\n <div\n [ngClass]=\"data.textCustomClasses\"\n class=\"text text-color-black\"\n >\n {{ data.field | date: data.pipeString }}\n </div>\n }\n @case ('currency') {\n <div\n [ngClass]=\"data.textCustomClasses\"\n class=\"text text-color-black\"\n >\n {{ data.field | currency: data.pipeString }}\n </div>\n }\n @default {\n <div\n [ngClass]=\"data.textCustomClasses\"\n class=\"text text-color-black\"\n >\n {{ data.field }}\n </div>\n }\n }\n</ng-template>\n", styles: ["@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.ca-main-table-holder .main-table-scroll-viewport{min-height:200px}.ca-main-table-holder .ca-main-table{color:#424242;width:100%;border-collapse:collapse;background-color:#eee}.ca-main-table-holder .ca-main-table.transparent{background-color:transparent}.ca-main-table-holder .ca-main-table thead.hidden_thead{display:none!important}.ca-main-table-holder .ca-main-table thead tr th{color:#6c6c6c;text-transform:uppercase;font-size:11px}.ca-main-table-holder .ca-main-table thead tr th .th-content-container{padding:4px}.ca-main-table-holder .ca-main-table thead .table-tr.text-right{text-align:right}.ca-main-table-holder .ca-main-table thead .table-tr.text-center{text-align:center}.ca-main-table-holder .ca-main-table tbody.cdk-drop-list-dragging *{-webkit-user-select:none;-ms-user-select:none;user-select:none}.ca-main-table-holder .ca-main-table tbody .table-tr.selected-row{background-color:var(--selected-row-background, #eee)}.ca-main-table-holder .ca-main-table tbody .table-tr.selected-row td .td-container .td-content-container{background-color:#e5e5e5}.ca-main-table-holder .ca-main-table tbody .table-tr:first-child:not(.table-preview-row){opacity:var(--opacity-first-row, 1)}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row~.table-tr:not(.cdk-drag-preview){opacity:var(--under-reorder-opacity, 1)}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row{border-top:var(--table-preview-row-border-top)}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row:not(.cdk-drag-disabled){cursor:grab}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row.cdk-drag-placeholder{cursor:grabbing}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row td:first-child .td-content-container{border-top-left-radius:0;padding:var(--table-preview-row-first-td-padding, 0)}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row td:last-child .td-content-container{border-top-right-radius:0}.ca-main-table-holder .ca-main-table tbody tr td{height:var(--td-height, 36px);padding:var(--td-padding, 1px 0)}.ca-main-table-holder .ca-main-table tbody tr td .td-container{padding:var(--td-container-padding, 4px 0);display:flex;align-items:center;height:var(--td-container-height, 34px);background-color:#fff}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container{min-height:var(--td-container-content-min-height, 26px);flex:1;padding:var(--td-container-content-padding, 0px 4px);display:flex;align-items:center}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text{font-size:14px}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-100{font-weight:100}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-200{font-weight:200}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-300{font-weight:300}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-400{font-weight:400}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-500{font-weight:500}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-600{font-weight:600}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-700{font-weight:700}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-800{font-weight:800}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-900{font-weight:900}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .dragg-move-end-period{display:inline-block;padding:2px 6px;background-color:#91919166;color:#fff;font-size:11px;line-height:14px}.ca-main-table-holder .ca-main-table tbody tr td:first-child .td-container{border-top-left-radius:3px;border-bottom-left-radius:3px;padding-left:var(--td-cointainer-first-child-padding-left, 4px)}.ca-main-table-holder .ca-main-table tbody tr td:first-child .td-container .td-content-container{border-top-left-radius:3px;border-bottom-left-radius:3px}.ca-main-table-holder .ca-main-table tbody tr td:last-child .td-container{border-top-right-radius:3px;border-bottom-right-radius:3px;padding-right:var(--td-cointainer-last-child-padding-right, 4px)}.ca-main-table-holder .ca-main-table tbody tr td:last-child .td-container .td-content-container{border-top-right-radius:3px;border-bottom-right-radius:3px}.ca-main-table-holder .ca-main-table tbody tr td.text-right .td-content-container{justify-content:flex-end}.ca-main-table-holder .ca-main-table tbody tr td.text-center .td-content-container{justify-content:center}.ca-main-table-holder .ca-main-table tbody tr td.text-left .td-content-container{justify-content:flex-start}.ca-main-table-holder .ca-main-table tbody tr:hover td .td-container .td-content-container{background-color:#eee}.cdk_th_div{display:table-cell}.cdk_th_div th{display:block}.drag-placeholder{background-color:#fff}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:var(--cdk-drag-preview-box-shadow, 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12))}.cdk-drag-preview td{background-color:var(--cdk-preview-td-bgcolor, transparent)!important}.cdk-drag-preview td .with-padding{padding:0 8px!important}.cdk-drag-preview .td-container{background-color:var(--cdk-preview-bgcolor, transparent)!important;color:var(--cdk-preview-textColor, \"#fff\")}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.table-tr:last-child{border:none}.table-body-list.cdk-drop-list-dragging .table-tr:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1);cursor:grabbing!important}.table-body-list.cdk-drop-list-dragging .table-tr:not(.cdk-drag-placeholder) *{cursor:grabbing!important}.drag-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-placeholder,.th-table-body-list .cdk-drag-placeholder{opacity:0}.th-table-body-list .cdk_th_div{box-shadow:none!important;background-color:transparent!important}.tr-border-left{border-left:1px solid #dadada!important}.tr-border-top{border-top:1px solid #dadada!important}.tr-border-bottom{border-bottom:1px solid #dadada!important}\n"], dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: CaMainTableHiddenRowsPipe, name: "caMainTableHiddenRows" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
|
|
27094
27094
|
}
|
|
27095
27095
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaMainTableComponent, decorators: [{
|
|
27096
27096
|
type: Component,
|
|
@@ -27102,11 +27102,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
27102
27102
|
CommonModule,
|
|
27103
27103
|
ScrollingModule,
|
|
27104
27104
|
CaMainTableHiddenRowsPipe,
|
|
27105
|
-
], encapsulation: ViewEncapsulation.ShadowDom, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Main Table -->\n@let tableData = data$ | async;\n\n<div class=\"ca-main-table-holder\">\n <table\n class=\"ca-main-table\"\n [class.transparent]=\"transparentTable\"\n cdkDropListGroup\n >\n <thead>\n <tr\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListDisabled]=\"!reorderItems\"\n (cdkDropListDropped)=\"dropHeader($event)\"\n class=\"table-body-list th-table-body-list\"\n >\n @let filteredColumns =\n columns | caMainTableHiddenRows: hideFieldsToHide;\n @for (col of filteredColumns; let indx = $index; track indx) {\n <div\n cdkDragLockAxis=\"x\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n class=\"cdk_th_div table-tr\"\n [class]=\"col.cellCustomClasses\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n headerThTemplate;\n context: { $implicit: col, index: indx }\n \"\n ></ng-container>\n </div>\n }\n </tr>\n </thead>\n <tbody\n #tableMainBody\n cdkScrollable\n cdkDropList\n [cdkDropListData]=\"data$ | async\"\n [cdkDropListSortPredicate]=\"sortPredicate\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-body-list\"\n >\n @for (row of tableData; track $index; let rowIndex = $index) {\n @let isSelected = selectedRowIndex === rowIndex;\n @if (row.rowType === 'reorder') {\n <tr\n cdkDragLockAxis=\"y\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n cdkDragBoundary=\".table-body-list\"\n class=\"table-tr table-preview-row\"\n [cdkDragDisabled]=\"disableReorderRow\"\n >\n <ng-template cdkDragPreview matchSize>\n <tr class=\"table-tr\">\n <ng-container\n *ngTemplateOutlet=\"\n reorderTemplatePreview;\n context: { row: row, index: rowIndex }\n \"\n ></ng-container>\n </tr>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n reorderTemplate;\n context: { row: row, index: rowIndex }\n \"\n ></ng-container>\n </tr>\n } @else {\n <tr\n cdkDragLockAxis=\"y\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n cdkDragBoundary=\".table-body-list\"\n [cdkDragDisabled]=\"!reorderItems\"\n class=\"table-tr\"\n (click)=\"onPressRow(row, rowIndex)\"\n [class]=\"{'selected-row': isSelected}\"\n >\n @for (\n (col of columns | caMainTableHiddenRows: hideFieldsToHide);\n track $index\n ) {\n <td [class]=\"col.cellCustomClasses\">\n <ng-container\n *ngTemplateOutlet=\"\n rowTemplate;\n context: {\n row: row,\n col: col,\n index: rowIndex,\n }\n \"\n ></ng-container>\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<!-- Header Template -->\n<ng-template #headerThTemplate let-col let-indx=\"index\">\n <th>\n @switch (col.headerCellType) {\n @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n col.headerTemplate;\n context: { $implicit: col.header, index: indx }\n \"\n ></ng-container>\n }\n @default {\n <div class=\"th-content-container text-color-bw6-2 user-select-none\">\n {{ col.header }}\n </div>\n }\n }\n </th>\n</ng-template>\n\n<!-- Row Template -->\n<ng-template #rowTemplate let-row=\"row\" let-col=\"col\" let-index=\"index\">\n <div class=\"td-container\">\n <div class=\"td-content-container\">\n @switch (col.cellType) {\n @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n col.template;\n context: {\n $implicit: col.row ? row : row[col.field],\n index: index,\n field: col.field,\n }\n \"\n ></ng-container>\n }\n @case ('component') {\n <ng-container\n *ngComponentOutlet=\"\n col.component;\n injector: createInjector(col.inputs)\n \"\n ></ng-container>\n }\n @default {\n <ng-container\n *ngTemplateOutlet=\"\n customTextTemplate;\n context: {\n $implicit: {\n field: row[col.field],\n pipeType: col.pipeType,\n pipeString: col.pipeString,\n textCustomClasses: col.textCustomClasses,\n index: index,\n },\n }\n \"\n ></ng-container>\n }\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Default Text Template -->\n<ng-template #customTextTemplate let-data let-index>\n @switch (data.pipeType) {\n @case ('date') {\n <div\n [ngClass]=\"data.textCustomClasses\"\n class=\"text text-color-black\"\n >\n {{ data.field | date: data.pipeString }}\n </div>\n }\n @case ('currency') {\n <div\n [ngClass]=\"data.textCustomClasses\"\n class=\"text text-color-black\"\n >\n {{ data.field | currency: data.pipeString }}\n </div>\n }\n @default {\n <div\n [ngClass]=\"data.textCustomClasses\"\n class=\"text text-color-black\"\n >\n {{ data.field }}\n </div>\n }\n }\n</ng-template>\n", styles: ["@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.ca-main-table-holder .main-table-scroll-viewport{min-height:200px}.ca-main-table-holder .ca-main-table{color:#424242;width:100%;border-collapse:collapse;background-color:#eee}.ca-main-table-holder .ca-main-table.transparent{background-color:transparent}.ca-main-table-holder .ca-main-table thead.hidden_thead{display:none!important}.ca-main-table-holder .ca-main-table thead tr th{color:#6c6c6c;text-transform:uppercase;font-size:11px}.ca-main-table-holder .ca-main-table thead tr th .th-content-container{padding:4px}.ca-main-table-holder .ca-main-table thead .table-tr.text-right{text-align:right}.ca-main-table-holder .ca-main-table thead .table-tr.text-center{text-align:center}.ca-main-table-holder .ca-main-table tbody.cdk-drop-list-dragging *{-webkit-user-select:none;-ms-user-select:none;user-select:none}.ca-main-table-holder .ca-main-table tbody .table-tr.selected-row{background-color:var(--selected-row-background, #eee)}.ca-main-table-holder .ca-main-table tbody .table-tr.selected-row td .td-container .td-content-container{background-color:#e5e5e5}.ca-main-table-holder .ca-main-table tbody .table-tr:first-child:not(.table-preview-row){opacity:var(--opacity-first-row, 1)}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row~.table-tr:not(.cdk-drag-preview){opacity:var(--under-reorder-opacity, 1)}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row{border-top:var(--table-preview-row-border-top)}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row:not(.cdk-drag-disabled){cursor:grab}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row.cdk-drag-placeholder{cursor:grabbing}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row td:first-child .td-content-container{border-top-left-radius:0;padding:var(--table-preview-row-first-td-padding, 0)}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row td:last-child .td-content-container{border-top-right-radius:0}.ca-main-table-holder .ca-main-table tbody tr td{height:var(--td-height, 36px);padding:var(--td-padding, 1px 0)}.ca-main-table-holder .ca-main-table tbody tr td .td-container{padding:var(--td-container-padding, 4px 0);display:flex;align-items:center;height:var(--td-container-height, 34px);background-color:#fff}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container{min-height:var(--td-container-content-min-height, 26px);flex:1;padding:var(--td-container-content-padding, 0px 4px);display:flex;align-items:center}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text{font-size:14px}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-100{font-weight:100}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-200{font-weight:200}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-300{font-weight:300}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-400{font-weight:400}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-500{font-weight:500}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-600{font-weight:600}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-700{font-weight:700}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-800{font-weight:800}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-900{font-weight:900}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .dragg-move-end-period{display:inline-block;padding:2px 6px;background-color:#91919166;color:#fff;font-size:11px;line-height:14px}.ca-main-table-holder .ca-main-table tbody tr td:first-child .td-container{border-top-left-radius:3px;border-bottom-left-radius:3px;padding-left:var(--td-cointainer-first-child-padding-left, 4px)}.ca-main-table-holder .ca-main-table tbody tr td:first-child .td-container .td-content-container{border-top-left-radius:3px;border-bottom-left-radius:3px}.ca-main-table-holder .ca-main-table tbody tr td:last-child .td-container{border-top-right-radius:3px;border-bottom-right-radius:3px;padding-right:var(--td-cointainer-last-child-padding-right, 4px)}.ca-main-table-holder .ca-main-table tbody tr td:last-child .td-container .td-content-container{border-top-right-radius:3px;border-bottom-right-radius:3px}.ca-main-table-holder .ca-main-table tbody tr td.text-right .td-content-container{justify-content:flex-end}.ca-main-table-holder .ca-main-table tbody tr td.text-center .td-content-container{justify-content:center}.ca-main-table-holder .ca-main-table tbody tr td.text-left .td-content-container{justify-content:flex-start}.ca-main-table-holder .ca-main-table tbody tr:hover td .td-container .td-content-container{background-color:#eee}.cdk_th_div{display:table-cell}.cdk_th_div th{display:block}.drag-placeholder{background-color:#fff}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:var(--cdk-drag-preview-box-shadow, 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12))}.cdk-drag-preview td{background-color:var(--cdk-preview-td-bgcolor, transparent)!important}.cdk-drag-preview td .with-padding{padding:0 8px!important}.cdk-drag-preview .td-container{background-color:var(--cdk-preview-bgcolor, transparent)!important;color:var(--cdk-preview-textColor, \"#fff\")}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.table-tr:last-child{border:none}.table-body-list.cdk-drop-list-dragging .table-tr:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1);cursor:grabbing!important}.table-body-list.cdk-drop-list-dragging .table-tr:not(.cdk-drag-placeholder) *{cursor:grabbing!important}.drag-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-placeholder,.th-table-body-list .cdk-drag-placeholder{opacity:0}.th-table-body-list .cdk_th_div{box-shadow:none!important;background-color:transparent!important}.tr-border-left{border-left:1px solid #dadada!important}.tr-border-top{border-top:1px solid #dadada!important}.tr-border-bottom{border-bottom:1px solid #dadada!important}\n"] }]
|
|
27105
|
+
], encapsulation: ViewEncapsulation.ShadowDom, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Main Table -->\n@let tableData = data$ | async;\n\n<div class=\"ca-main-table-holder\">\n <table\n class=\"ca-main-table\"\n [class.transparent]=\"transparentTable\"\n cdkDropListGroup\n >\n <thead>\n <tr\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListDisabled]=\"!reorderItems\"\n (cdkDropListDropped)=\"dropHeader($event)\"\n class=\"table-body-list th-table-body-list\"\n >\n @let filteredColumns =\n columns | caMainTableHiddenRows: hideFieldsToHide;\n @for (col of filteredColumns; let indx = $index; track indx) {\n <div\n cdkDragLockAxis=\"x\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n class=\"cdk_th_div table-tr\"\n [class]=\"col.cellCustomClasses\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n headerThTemplate;\n context: { $implicit: col, index: indx }\n \"\n ></ng-container>\n </div>\n }\n </tr>\n </thead>\n <tbody\n #tableMainBody\n cdkScrollable\n cdkDropList\n [cdkDropListData]=\"data$ | async\"\n [cdkDropListSortPredicate]=\"sortPredicate\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-body-list\"\n >\n @for (row of tableData; track $index; let rowIndex = $index) {\n @let isSelected = selectedRowIndex === rowIndex;\n @if (row.rowType === 'reorder') {\n <tr\n cdkDragLockAxis=\"y\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n cdkDragBoundary=\".table-body-list\"\n class=\"table-tr table-preview-row\"\n [cdkDragDisabled]=\"disableReorderRow\"\n >\n <ng-template cdkDragPreview matchSize>\n <tr class=\"table-tr\">\n <ng-container\n *ngTemplateOutlet=\"\n reorderTemplatePreview;\n context: { row: row, index: rowIndex }\n \"\n ></ng-container>\n </tr>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n reorderTemplate;\n context: { row: row, index: rowIndex }\n \"\n ></ng-container>\n </tr>\n } @else if (row.rowType === 'truck') {\n <tr class=\"table-tr\">\n <ng-container\n *ngTemplateOutlet=\"\n truckTemplate;\n context: { row: row, index: rowIndex }\n \"\n ></ng-container>\n </tr>\n } @else {\n <tr\n cdkDragLockAxis=\"y\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n cdkDragBoundary=\".table-body-list\"\n [cdkDragDisabled]=\"!reorderItems\"\n class=\"table-tr\"\n (click)=\"onPressRow(row, rowIndex)\"\n [class]=\"{'selected-row': isSelected}\"\n >\n @for (\n (col of columns | caMainTableHiddenRows: hideFieldsToHide);\n track $index\n ) {\n <td [class]=\"col.cellCustomClasses\">\n <ng-container\n *ngTemplateOutlet=\"\n rowTemplate;\n context: {\n row: row,\n col: col,\n index: rowIndex,\n }\n \"\n ></ng-container>\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<!-- Header Template -->\n<ng-template #headerThTemplate let-col let-indx=\"index\">\n <th>\n @switch (col.headerCellType) {\n @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n col.headerTemplate;\n context: { $implicit: col.header, index: indx }\n \"\n ></ng-container>\n }\n @default {\n <div class=\"th-content-container text-color-bw6-2 user-select-none\">\n {{ col.header }}\n </div>\n }\n }\n </th>\n</ng-template>\n\n<!-- Row Template -->\n<ng-template #rowTemplate let-row=\"row\" let-col=\"col\" let-index=\"index\">\n <div class=\"td-container\">\n <div class=\"td-content-container\">\n @switch (col.cellType) {\n @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n col.template;\n context: {\n $implicit: col.row ? row : row[col.field],\n index: index,\n field: col.field,\n }\n \"\n ></ng-container>\n }\n @case ('component') {\n <ng-container\n *ngComponentOutlet=\"\n col.component;\n injector: createInjector(col.inputs)\n \"\n ></ng-container>\n }\n @default {\n <ng-container\n *ngTemplateOutlet=\"\n customTextTemplate;\n context: {\n $implicit: {\n field: row[col.field],\n pipeType: col.pipeType,\n pipeString: col.pipeString,\n textCustomClasses: col.textCustomClasses,\n index: index,\n },\n }\n \"\n ></ng-container>\n }\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Default Text Template -->\n<ng-template #customTextTemplate let-data let-index>\n @switch (data.pipeType) {\n @case ('date') {\n <div\n [ngClass]=\"data.textCustomClasses\"\n class=\"text text-color-black\"\n >\n {{ data.field | date: data.pipeString }}\n </div>\n }\n @case ('currency') {\n <div\n [ngClass]=\"data.textCustomClasses\"\n class=\"text text-color-black\"\n >\n {{ data.field | currency: data.pipeString }}\n </div>\n }\n @default {\n <div\n [ngClass]=\"data.textCustomClasses\"\n class=\"text text-color-black\"\n >\n {{ data.field }}\n </div>\n }\n }\n</ng-template>\n", styles: ["@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.ca-main-table-holder .main-table-scroll-viewport{min-height:200px}.ca-main-table-holder .ca-main-table{color:#424242;width:100%;border-collapse:collapse;background-color:#eee}.ca-main-table-holder .ca-main-table.transparent{background-color:transparent}.ca-main-table-holder .ca-main-table thead.hidden_thead{display:none!important}.ca-main-table-holder .ca-main-table thead tr th{color:#6c6c6c;text-transform:uppercase;font-size:11px}.ca-main-table-holder .ca-main-table thead tr th .th-content-container{padding:4px}.ca-main-table-holder .ca-main-table thead .table-tr.text-right{text-align:right}.ca-main-table-holder .ca-main-table thead .table-tr.text-center{text-align:center}.ca-main-table-holder .ca-main-table tbody.cdk-drop-list-dragging *{-webkit-user-select:none;-ms-user-select:none;user-select:none}.ca-main-table-holder .ca-main-table tbody .table-tr.selected-row{background-color:var(--selected-row-background, #eee)}.ca-main-table-holder .ca-main-table tbody .table-tr.selected-row td .td-container .td-content-container{background-color:#e5e5e5}.ca-main-table-holder .ca-main-table tbody .table-tr:first-child:not(.table-preview-row){opacity:var(--opacity-first-row, 1)}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row~.table-tr:not(.cdk-drag-preview){opacity:var(--under-reorder-opacity, 1)}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row{border-top:var(--table-preview-row-border-top)}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row:not(.cdk-drag-disabled){cursor:grab}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row.cdk-drag-placeholder{cursor:grabbing}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row td:first-child .td-content-container{border-top-left-radius:0;padding:var(--table-preview-row-first-td-padding, 0)}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row td:last-child .td-content-container{border-top-right-radius:0}.ca-main-table-holder .ca-main-table tbody tr td{height:var(--td-height, 36px);padding:var(--td-padding, 1px 0)}.ca-main-table-holder .ca-main-table tbody tr td .td-container{padding:var(--td-container-padding, 4px 0);display:flex;align-items:center;height:var(--td-container-height, 34px);background-color:#fff}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container{min-height:var(--td-container-content-min-height, 26px);flex:1;padding:var(--td-container-content-padding, 0px 4px);display:flex;align-items:center}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text{font-size:14px}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-100{font-weight:100}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-200{font-weight:200}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-300{font-weight:300}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-400{font-weight:400}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-500{font-weight:500}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-600{font-weight:600}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-700{font-weight:700}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-800{font-weight:800}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .text.b-900{font-weight:900}.ca-main-table-holder .ca-main-table tbody tr td .td-container .td-content-container .dragg-move-end-period{display:inline-block;padding:2px 6px;background-color:#91919166;color:#fff;font-size:11px;line-height:14px}.ca-main-table-holder .ca-main-table tbody tr td:first-child .td-container{border-top-left-radius:3px;border-bottom-left-radius:3px;padding-left:var(--td-cointainer-first-child-padding-left, 4px)}.ca-main-table-holder .ca-main-table tbody tr td:first-child .td-container .td-content-container{border-top-left-radius:3px;border-bottom-left-radius:3px}.ca-main-table-holder .ca-main-table tbody tr td:last-child .td-container{border-top-right-radius:3px;border-bottom-right-radius:3px;padding-right:var(--td-cointainer-last-child-padding-right, 4px)}.ca-main-table-holder .ca-main-table tbody tr td:last-child .td-container .td-content-container{border-top-right-radius:3px;border-bottom-right-radius:3px}.ca-main-table-holder .ca-main-table tbody tr td.text-right .td-content-container{justify-content:flex-end}.ca-main-table-holder .ca-main-table tbody tr td.text-center .td-content-container{justify-content:center}.ca-main-table-holder .ca-main-table tbody tr td.text-left .td-content-container{justify-content:flex-start}.ca-main-table-holder .ca-main-table tbody tr:hover td .td-container .td-content-container{background-color:#eee}.cdk_th_div{display:table-cell}.cdk_th_div th{display:block}.drag-placeholder{background-color:#fff}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:var(--cdk-drag-preview-box-shadow, 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12))}.cdk-drag-preview td{background-color:var(--cdk-preview-td-bgcolor, transparent)!important}.cdk-drag-preview td .with-padding{padding:0 8px!important}.cdk-drag-preview .td-container{background-color:var(--cdk-preview-bgcolor, transparent)!important;color:var(--cdk-preview-textColor, \"#fff\")}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.table-tr:last-child{border:none}.table-body-list.cdk-drop-list-dragging .table-tr:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1);cursor:grabbing!important}.table-body-list.cdk-drop-list-dragging .table-tr:not(.cdk-drag-placeholder) *{cursor:grabbing!important}.drag-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-placeholder,.th-table-body-list .cdk-drag-placeholder{opacity:0}.th-table-body-list .cdk_th_div{box-shadow:none!important;background-color:transparent!important}.tr-border-left{border-left:1px solid #dadada!important}.tr-border-top{border-top:1px solid #dadada!important}.tr-border-bottom{border-bottom:1px solid #dadada!important}\n"] }]
|
|
27106
27106
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { onPressEvent: [{
|
|
27107
27107
|
type: Output
|
|
27108
27108
|
}], onReorder: [{
|
|
27109
27109
|
type: Output
|
|
27110
|
+
}], truckTemplate: [{
|
|
27111
|
+
type: Input
|
|
27110
27112
|
}], reorderTemplate: [{
|
|
27111
27113
|
type: Input
|
|
27112
27114
|
}], reorderTemplatePreview: [{
|