ca-components 2.0.981 → 2.0.982
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.
|
@@ -27312,7 +27312,7 @@ class CaMainTableComponent {
|
|
|
27312
27312
|
this.onReorder.emit(event);
|
|
27313
27313
|
}
|
|
27314
27314
|
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 }); }
|
|
27315
|
-
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{position:relative;padding:var(--td-container-padding, 4px 0);display:flex;align-items:center;height:var(--td-container-height, 34px);background-color:var(--td-container-bg, #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;background-color:var(--td-content-container-bg, transparent)}.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 }); }
|
|
27315
|
+
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);height:var(--table-preview-row-height, \"inherit\")}.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 .td-content-container{height:var(--table-preview-row-td-content-container-height, \"inherit\")}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row .td-container{height:var(--table-preview-row-td-container-height, \"inherit\")}.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:var(--table-preview-row-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:var(--table-preview-row-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{position:relative;padding:var(--td-container-padding, 4px 0);display:flex;align-items:center;height:var(--td-container-height, 34px);background-color:var(--td-container-bg, #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;background-color:var(--td-content-container-bg, transparent)}.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 }); }
|
|
27316
27316
|
}
|
|
27317
27317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaMainTableComponent, decorators: [{
|
|
27318
27318
|
type: Component,
|
|
@@ -27324,7 +27324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
27324
27324
|
CommonModule,
|
|
27325
27325
|
ScrollingModule,
|
|
27326
27326
|
CaMainTableHiddenRowsPipe,
|
|
27327
|
-
], 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{position:relative;padding:var(--td-container-padding, 4px 0);display:flex;align-items:center;height:var(--td-container-height, 34px);background-color:var(--td-container-bg, #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;background-color:var(--td-content-container-bg, transparent)}.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"] }]
|
|
27327
|
+
], 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);height:var(--table-preview-row-height, \"inherit\")}.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 .td-content-container{height:var(--table-preview-row-td-content-container-height, \"inherit\")}.ca-main-table-holder .ca-main-table tbody .table-tr.table-preview-row .td-container{height:var(--table-preview-row-td-container-height, \"inherit\")}.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:var(--table-preview-row-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:var(--table-preview-row-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{position:relative;padding:var(--td-container-padding, 4px 0);display:flex;align-items:center;height:var(--td-container-height, 34px);background-color:var(--td-container-bg, #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;background-color:var(--td-content-container-bg, transparent)}.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"] }]
|
|
27328
27328
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { onPressEvent: [{
|
|
27329
27329
|
type: Output
|
|
27330
27330
|
}], onReorder: [{
|