ca-components 2.0.921 → 2.0.922
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.
|
@@ -27293,7 +27293,7 @@ class CaMainTableComponent {
|
|
|
27293
27293
|
this.onReorder.emit(event);
|
|
27294
27294
|
}
|
|
27295
27295
|
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 }); }
|
|
27296
|
-
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<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]=\"tableData\"\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 \n cdkDragLockAxis=\"y\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n cdkDragBoundary=\".table-body-list\"\n class=\"table-tr table-preview-row\"\n [cdkDragDisabled]=\"true\"\n 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:nth-child(2):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 }); }
|
|
27296
|
+
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<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]=\"tableData\"\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 \n cdkDragLockAxis=\"y\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n cdkDragBoundary=\".table-body-list\"\n class=\"table-tr table-preview-row\"\n [cdkDragDisabled]=\"true\"\n 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:nth-child(2):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.None }); }
|
|
27297
27297
|
}
|
|
27298
27298
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaMainTableComponent, decorators: [{
|
|
27299
27299
|
type: Component,
|
|
@@ -27305,7 +27305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
27305
27305
|
CommonModule,
|
|
27306
27306
|
ScrollingModule,
|
|
27307
27307
|
CaMainTableHiddenRowsPipe,
|
|
27308
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Main Table -->\n@let tableData = data$ | async;\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]=\"tableData\"\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 \n cdkDragLockAxis=\"y\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n cdkDragBoundary=\".table-body-list\"\n class=\"table-tr table-preview-row\"\n [cdkDragDisabled]=\"true\"\n 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:nth-child(2):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"] }]
|
|
27308
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Main Table -->\n@let tableData = data$ | async;\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]=\"tableData\"\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 \n cdkDragLockAxis=\"y\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n cdkDragBoundary=\".table-body-list\"\n class=\"table-tr table-preview-row\"\n [cdkDragDisabled]=\"true\"\n 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:nth-child(2):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"] }]
|
|
27309
27309
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { onPressEvent: [{
|
|
27310
27310
|
type: Output
|
|
27311
27311
|
}], onReorder: [{
|