ets-fe-ng-sdk 19.0.112 → 19.0.114
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.
|
@@ -3197,7 +3197,6 @@ class NumberFormatService {
|
|
|
3197
3197
|
this.isNormal = computed(() => this.numberFormat() != 'EU');
|
|
3198
3198
|
this.locale = computed(() => (this.isNormal() ? 'en-US' : 'fr-FR'));
|
|
3199
3199
|
this.decimal = computed(() => (this.isNormal() ? '.' : ','));
|
|
3200
|
-
this.numberFormat.set('EU');
|
|
3201
3200
|
}
|
|
3202
3201
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: NumberFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3203
3202
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: NumberFormatService, providedIn: 'root' }); }
|
|
@@ -21558,7 +21557,7 @@ class TablePlainComponent extends TableBaseComponent {
|
|
|
21558
21557
|
this.filterChange.emit(e);
|
|
21559
21558
|
}
|
|
21560
21559
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TablePlainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21561
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: TablePlainComponent, isStandalone: true, selector: "table-plain", inputs: { customSelectClass: { classPropertyName: "customSelectClass", publicName: "customSelectClass", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, obsDataSource: { classPropertyName: "obsDataSource", publicName: "obsDataSource", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPager: { classPropertyName: "showPager", publicName: "showPager", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByField: { classPropertyName: "disableSelectionByField", publicName: "disableSelectionByField", isSignal: false, isRequired: false, transformFunction: null }, filterExactMatch: { classPropertyName: "filterExactMatch", publicName: "filterExactMatch", isSignal: true, isRequired: false, transformFunction: null }, _data: { classPropertyName: "_data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, _filterFields: { classPropertyName: "_filterFields", publicName: "filterFields", isSignal: false, isRequired: false, transformFunction: null }, _filterFieldsMap: { classPropertyName: "_filterFieldsMap", publicName: "filterFieldsMap", isSignal: false, isRequired: false, transformFunction: null }, selectionPerPage: { classPropertyName: "selectionPerPage", publicName: "selectionPerPage", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { _view: "view", dataChanged: "dataChanged", filterChange: "filterChange", listMutated: "listMutated" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-plain\">\n @if (header()) {\n <h6 class=\"text-primary\">\n {{ header() | appTranslate | async }}\n </h6>\n }\n\n @if (filterFields()) {\n <div class=\"d-flex\">\n <app-btn\n text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n </div>\n <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n @for (scheme of filterFields(); track scheme.field) {\n <div class=\"col-md-4 col-xxl-3\">\n @switch (scheme.type) {\n @case ('autocomplete') {\n <div class=\"col\">\n <app-autocomplete\n [form]=\"filterForm\"\n [label]=\"scheme.label\"\n [labelField]=\"scheme.labelField\"\n [labelType]=\"scheme.labelType | toAny\"\n [name]=\"scheme.field | toAny\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [valueField]=\"scheme.valueField\"\n [hint]=\"scheme.hint\"\n [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n #inputTag\n [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n <app-validation-message [input]=\"inputTag\" />\n </div>\n }\n @default {\n <app-input-basic\n #formField\n [name]=\"scheme.field | toAny\"\n [form]=\"filterForm\"\n [stacked]=\"true\"\n [type]=\"scheme.type\"\n [valueField]=\"scheme.valueField\"\n [labelType]=\"scheme.labelType | toAny\"\n [labelField]=\"scheme.labelField\"\n [noFormat]=\"true\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [decimalPoints]=\"scheme.decimalPoints\"\n [hint]=\"scheme.hint\"\n [max]=\"scheme.max\"\n [min]=\"scheme.min\"\n [placeholder]=\"scheme.placeholder\"\n [label]=\"scheme.label\"\n [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n <app-validation-message [input]=\"formField\" />\n }\n }\n </div>\n }\n <div class=\"col-md justify-content-end d-flex\">\n <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\" />\n </div>\n </div>\n }\n\n @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n <div class=\" \">\n <div class=\"row g-3 justify-content-between align-items-end\">\n <div class=\"col-md\">\n @if (startSectionTemplate()) {\n <div class=\"{{ starterSectionClass() }}\">\n <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n </div>\n }\n @if (showFilter()) {\n <form [formGroup]=\"filterForm\">\n <div class=\"row justify-content-center align-items-end\">\n <div class=\"col-md-auto\">\n <app-autocomplete\n label=\"Filter\"\n type=\"select\"\n [form]=\"filterForm\"\n name=\"field\"\n [stacked]=\"false\"\n [options]=\"filterOptions()\"\n valueField=\"code\"\n labelField=\"description\" />\n </div>\n <div class=\"col-md-auto\">\n <app-input-basic\n label=\"Value\"\n type=\"text\"\n [form]=\"filterForm\"\n name=\"value\"\n [stacked]=\"false\" />\n </div>\n <div class=\"col-md-auto\">\n <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\" />\n </div>\n </div>\n </form>\n }\n </div>\n @if (showExport() || showAdditionalColumns()) {\n <div class=\"col-md-auto\">\n <div class=\"row row-cols-auto g-3 justify-content-end\">\n <span>\n @if (showExport()) {\n <app-export-table\n [disabled]=\"!dataSource()?.data?.length\"\n [label]=\"label()\"\n [debug]=\"debug()\"\n [displayedColumns]=\"computedDisplayedColumns()\"\n [data]=\"dataSource()?.data\" />\n }\n </span>\n @if (showAdditionalColumns()) {\n <div class=\"d-flex\">\n <fields-to-display\n [fields]=\"allTableColumns()\"\n [currentColumns]=\"computedDisplayedColumns()\"\n (fieldsChanged)=\"fieldsChanged($event)\" />\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n <div\n [ngClass]=\"{ border: distinct() }\"\n class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n <div class=\"table-responsive\">\n <table\n mat-table\n [dataSource]=\"dataSource() || obsDataSource()\"\n matSort\n class=\"w-100 d-table table mb-0\"\n [multiTemplateDataRows]=\"isExpandable()\"\n #table\n [ngClass]=\"{\n smallerFonts: smallerFonts(),\n nowrap: nowrap(),\n centerCells: centerCells(),\n curvy: curvy(),\n 'table-striped': striped(),\n }\">\n <!-- Checkbox Column -->\n <ng-container\n matColumnDef=\"mselect\"\n [sticky]=\"!placeSelectionAtRight()\"\n [stickyEnd]=\"placeSelectionAtRight()\">\n <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n @if (customSelectClass()) {\n <input\n type=\"checkbox\"\n [class]=\"customSelectClass()\"\n (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [attr.aria-label]=\"checkboxLabel()\" />\n }\n @if (!customSelectClass()) {\n <mat-checkbox\n (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n }\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n @if (customSelectClass()) {\n <input\n type=\"checkbox\"\n class=\"form-control control-bg-gray\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [attr.aria-label]=\"checkboxLabel(row)\" />\n }\n @if (!customSelectClass()) {\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [aria-label]=\"checkboxLabel(row)\"\n [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n }\n </td>\n </ng-container>\n <!-- Columns -->\n @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n <ng-template #thContent>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </ng-template>\n\n @switch (col.type) {\n <!-- CHECKBOX -->\n @case ('textarea') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <!-- <app-input-td-rf [(model)]=\"col.\" [showLabel]=\"false\" /> -->\n </td>\n </ng-container>\n }\n <!--// -->\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n <!-- Removing the empty space above checkboxes -->\n <app-input-ngmodel\n [showLabel]=\"false\"\n [stacked]=\"true\"\n type=\"checkbox\"\n [disabled]=\"col.disabled\"\n [checked]=\"col.checked\"\n [(model)]=\"row[col.f]\"\n (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Input -->\n @case ('input') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <!-- Removing the empty space above checkboxes -->\n <app-input-basic\n [showLabel]=\"false\"\n [stacked]=\"true\"\n type=\"text\"\n [disabled]=\"col.disabled\"\n [form]=\"row\"\n [name]=\"col.f\"\n [noFormat]=\"true\" />\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- PROGRESS BAR -->\n @case ('progress') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"progress\">\n <div\n class=\"progress-bar progress-bar-striped bg-success\"\n role=\"progressbar\"\n [ngStyle]=\"{ width: row[col.f] }\">\n {{ row[col.f] }}\n </div>\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- COLOR -->\n @case ('color') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Button -->\n @case ('button') {\n <ng-container\n [sticky]=\"col.stickyStart\"\n [stickyEnd]=\"col.stickyEnd || col.sticky\"\n matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n <app-btn\n [icon]=\"col.icon || col.btn?.icon\"\n [type]=\"col.btn?.type\"\n (mclick)=\"\n col.action\n ? col.action(row, col.f, getActionStatusCallback(col), index)\n : null\n \"\n [help]=\"col.btn?.help\"\n [showHelpIcon]=\"col.btn?.showHelpIcon\"\n [text]=\"col.btn?.label\"\n [loading]=\"col.btn?.loading\"\n [iconBtn]=\"col.btn?.iconBtn\"\n mclass=\"w-auto\"\n [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Sub Table -->\n @case ('table') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n <div class=\"inline-block\">\n <app-btn\n [icon]=\"col.icon\"\n [type]=\"col.btn?.type || 'dark'\"\n (mclick)=\"col.action ? col.action(row, col.f) : null\"\n [group]=\"col.btn?.group\"\n [help]=\"col.subTable | tableToString: row | async\"\n [showHelpIcon]=\"false\"\n [text]=\"col.btn?.label\"\n [iconBtn]=\"true\"\n mclass=\"w-auto\" />\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- ACTION COLUMNS -->\n @case ('btns') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\" [stickyEnd]=\"true\" [sticky]=\"true\">\n <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n @for (button of col.buttons; track button.icon + button.label) {\n <div class=\"mx-2\">\n <app-btn\n [icon]=\"button.icon\"\n [text]=\"button.label\"\n [help]=\"button.help\"\n [showHelpIcon]=\"button.showHelpIcon\"\n [type]=\"button.type\"\n [group]=\"button.group\"\n [iconBtn]=\"!button.label\"\n mclass=\"w-auto\"\n (mclick)=\"\n button.action(row, i + paginator.pageIndex * paginator.pageSize, btn)\n \"\n #btn />\n </div>\n }\n </div>\n </td>\n </ng-container>\n }\n\n <!-- EDITABLE -->\n @case ('editable') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <a\n class=\"cell\"\n [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n <i\n (click)=\"col.action ? col.action(row, col.f) : null\"\n class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n </td>\n </ng-container>\n }\n\n <!-- DEFAULT -->\n @default {\n <ng-container\n [sticky]=\"col.stickyStart\"\n [stickyEnd]=\"col.stickyEnd || col.sticky\"\n matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let rowIndex = index\"\n [matTooltip]=\"\n col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\n \">\n <ng-template #cellContent>\n @switch (true) {\n @case (!!col.routeFormatter) {\n @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n <a\n class=\"cell\"\n [ngClass]=\"{ pointer: col.action, link: col.action }\"\n (click)=\"col.action ? col.action(row, col.f) : null\"\n [queryParams]=\"cellRoute.queryParams\"\n routerLink=\"{{ cellRoute.route }}\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n }\n }\n @case (!!col.customTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n col.customTemplate;\n context: { $implicit: { row, rowIndex } }\n \" />\n }\n @default {\n <span\n class=\"cell\"\n [ngClass]=\"{ pointer: col.action, link: col.action }\"\n (click)=\"col.action ? col.action(row, col.f) : null\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></span>\n }\n }\n @if (col.expandable) {\n <button\n matTooltip=\"Exapnd\"\n [matTooltipShowDelay]=\"1000\"\n mat-icon-button\n (click)=\"expandCell(row, col, expandModal)\"\n class=\"expandBtn\">\n <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n </button>\n }\n </ng-template>\n\n @if (col._onHoverFunction) {\n <span\n class=\"\"\n [nelDebug]=\"debug()\"\n [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n [nelDelay]=\"col._onHoverDelay\">\n <ng-container *ngTemplateOutlet=\"cellContent\" />\n </span>\n } @else {\n <ng-container *ngTemplateOutlet=\"cellContent\" />\n }\n </td>\n </ng-container>\n }\n\n <!--// -->\n }\n }\n <!-- EXPANDABLE COLUMN-->\n @if (isExpandable()) {\n <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\"> </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"d-flex justify-content-end\">\n <app-btn\n [iconBtn]=\"true\"\n type=\"clear\"\n [customIcon]=\"\n expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n \"\n aria-label=\"expand row\"\n (mclick)=\"\n expandedElement.set(expandedElement() === row ? null : row);\n clickedExpandRow.emit({ open: expandedElement() === row, row });\n $event.stopPropagation()\n \" />\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n <!-- Options Column -->\n @if (hasRowOptions()) {\n <ng-container matColumnDef=\"option\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef disableClear></th>\n <td mat-cell *matCellDef=\"let row\">\n @if (rowOptionsMap()) {\n @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\n <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n <i class=\"fa fa-ellipsis-v me-0\"></i>\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (option of _rowoptions; track option.t) {\n <button\n mat-menu-item\n class=\"{{ option.itemClass }}\"\n (click)=\"option.action?.(row)\">\n @if (option.iconClass) {\n <i class=\"{{ option.iconClass }}\"></i>\n }\n {{ option.t | appTranslate | async }}\n </button>\n }\n </mat-menu>\n }\n } @else {\n <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n <i class=\"fa fa-ellipsis-v me-0\"></i>\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (option of rowOptions(); track option.t) {\n <button\n mat-menu-item\n class=\"{{ option.itemClass }}\"\n (click)=\"option.action?.(row)\">\n @if (option.iconClass) {\n <i class=\"{{ option.iconClass }}\"></i>\n }\n {{ option.t | appTranslate | async }}\n </button>\n }\n </mat-menu>\n }\n </td>\n </ng-container>\n }\n\n @if (rawColumns(); as dcols) {\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n @if (isExpandable()) {\n <ng-container matColumnDef=\"expandedDetail\">\n <td\n mat-cell\n *matCellDef=\"let row\"\n [attr.colspan]=\"dcols?.length || 1\"\n [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n <div\n class=\"example-element-detail\"\n [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n @if (row == expandedElement()) {\n <ng-container\n *ngTemplateOutlet=\"\n expandedRowTemplate();\n context: { $implicit: { row } }\n \"></ng-container>\n }\n </div>\n </td>\n </ng-container>\n }\n <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: dcols\"\n [ngClass]=\"{\n pointer: showRowPointer(),\n disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n }\"\n [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n (click)=\"rowClick(row)\"></tr>\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n {{ noItemTxt() | appTranslate | async }}\n </td>\n </tr>\n @if (isExpandable()) {\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['expandedDetail']\"\n class=\"expanded-detail-row\"\n [style.height.px]=\"0\"></tr>\n }\n }\n </table>\n </div>\n @if (showPager()) {\n <mat-paginator\n [length]=\"resultsLength()\"\n [pageSizeOptions]=\"computedPageSizeOptions()\"\n [pageSize]=\"pageSize()\"\n showFirstLastButtons></mat-paginator>\n }\n </div>\n</div>\n\n<modal-comp\n [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n [header]=\"selectedCellForExpansion()?.column?.t\"\n [showFooter]=\"false\"\n (modalClose)=\"closeExpandedCell()\"\n #expandModal>\n <ng-template modalBody>\n @if (selectedCellForExpansion(); as _selected) {\n <div\n class=\"\"\n [innerHTML]=\"\n _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n \"></div>\n }\n </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ExportTableComponent, selector: "app-export-table", inputs: ["data", "displayedColumns", "searchFunc", "searchQuery", "label", "debug", "disabled"] }, { kind: "component", type: FieldsToDisplayComponent, selector: "fields-to-display", inputs: ["query1", "query2", "fields", "currentColumns"], outputs: ["query1Change", "query2Change", "fieldsChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "component", type: InputNGModelComponent, selector: "app-input-ngmodel", inputs: ["mvalue", "cls", "colored", "disabled", "hide", "hint", "id", "inpCl", "label", "lblCl", "lblPosition", "mini", "light", "name", "model", "optionFormatter", "options", "checked", "contextData", "decimalPoints", "labelField", "max", "min", "placeholder", "prefix", "readonly", "required", "showEmptyOption", "showLabel", "showValidation", "showValidationIcon", "small", "stacked", "suffix", "theme", "type", "valueField", "labelType", "xsmall"], outputs: ["modelChange", "mchange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MouseEnterListenerDirective, selector: "[nelMouseEntered]", inputs: ["nelMouseEntered"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }], animations: [
|
|
21560
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: TablePlainComponent, isStandalone: true, selector: "table-plain", inputs: { customSelectClass: { classPropertyName: "customSelectClass", publicName: "customSelectClass", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, obsDataSource: { classPropertyName: "obsDataSource", publicName: "obsDataSource", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPager: { classPropertyName: "showPager", publicName: "showPager", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByField: { classPropertyName: "disableSelectionByField", publicName: "disableSelectionByField", isSignal: false, isRequired: false, transformFunction: null }, filterExactMatch: { classPropertyName: "filterExactMatch", publicName: "filterExactMatch", isSignal: true, isRequired: false, transformFunction: null }, _data: { classPropertyName: "_data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, _filterFields: { classPropertyName: "_filterFields", publicName: "filterFields", isSignal: false, isRequired: false, transformFunction: null }, _filterFieldsMap: { classPropertyName: "_filterFieldsMap", publicName: "filterFieldsMap", isSignal: false, isRequired: false, transformFunction: null }, selectionPerPage: { classPropertyName: "selectionPerPage", publicName: "selectionPerPage", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { _view: "view", dataChanged: "dataChanged", filterChange: "filterChange", listMutated: "listMutated" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-plain\">\n @if (header()) {\n <h6 class=\"text-primary\">\n {{ header() | appTranslate | async }}\n </h6>\n }\n\n @if (filterFields()) {\n <div class=\"d-flex\">\n <app-btn\n text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n </div>\n <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n @for (scheme of filterFields(); track scheme.field) {\n <div class=\"col-md-4 col-xxl-3\">\n @switch (scheme.type) {\n @case ('autocomplete') {\n <div class=\"col\">\n <app-autocomplete\n [form]=\"filterForm\"\n [label]=\"scheme.label\"\n [labelField]=\"scheme.labelField\"\n [labelType]=\"scheme.labelType | toAny\"\n [name]=\"scheme.field | toAny\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [valueField]=\"scheme.valueField\"\n [hint]=\"scheme.hint\"\n [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n #inputTag\n [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n <app-validation-message [input]=\"inputTag\" />\n </div>\n }\n @default {\n <app-input-basic\n #formField\n [name]=\"scheme.field | toAny\"\n [form]=\"filterForm\"\n [stacked]=\"true\"\n [type]=\"scheme.type\"\n [valueField]=\"scheme.valueField\"\n [labelType]=\"scheme.labelType | toAny\"\n [labelField]=\"scheme.labelField\"\n [noFormat]=\"true\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [decimalPoints]=\"scheme.decimalPoints\"\n [hint]=\"scheme.hint\"\n [max]=\"scheme.max\"\n [min]=\"scheme.min\"\n [placeholder]=\"scheme.placeholder\"\n [label]=\"scheme.label\"\n [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n <app-validation-message [input]=\"formField\" />\n }\n }\n </div>\n }\n <div class=\"col-md justify-content-end d-flex\">\n <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\" />\n </div>\n </div>\n }\n\n @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n <div class=\" \">\n <div class=\"row g-3 justify-content-between align-items-end\">\n <div class=\"col-md\">\n @if (startSectionTemplate()) {\n <div class=\"{{ starterSectionClass() }}\">\n <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n </div>\n }\n @if (showFilter()) {\n <form [formGroup]=\"filterForm\">\n <div class=\"row justify-content-center align-items-end\">\n <div class=\"col-md-auto\">\n <app-autocomplete\n label=\"Filter\"\n type=\"select\"\n [form]=\"filterForm\"\n name=\"field\"\n [stacked]=\"false\"\n [options]=\"filterOptions()\"\n valueField=\"code\"\n labelField=\"description\" />\n </div>\n <div class=\"col-md-auto\">\n <app-input-basic\n label=\"Value\"\n type=\"text\"\n [form]=\"filterForm\"\n name=\"value\"\n [stacked]=\"false\" />\n </div>\n <div class=\"col-md-auto\">\n <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\" />\n </div>\n </div>\n </form>\n }\n </div>\n @if (showExport() || showAdditionalColumns()) {\n <div class=\"col-md-auto\">\n <div class=\"row row-cols-auto g-3 justify-content-end\">\n <span>\n @if (showExport()) {\n <app-export-table\n [disabled]=\"!dataSource()?.data?.length\"\n [label]=\"label()\"\n [debug]=\"debug()\"\n [displayedColumns]=\"computedDisplayedColumns()\"\n [data]=\"dataSource()?.data\" />\n }\n </span>\n @if (showAdditionalColumns()) {\n <div class=\"d-flex\">\n <fields-to-display\n [fields]=\"allTableColumns()\"\n [currentColumns]=\"computedDisplayedColumns()\"\n (fieldsChanged)=\"fieldsChanged($event)\" />\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n <div\n [ngClass]=\"{ border: distinct() }\"\n class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n <div class=\"table-responsive\">\n <table\n mat-table\n [dataSource]=\"dataSource() || obsDataSource()\"\n matSort\n class=\"w-100 d-table table mb-0\"\n [multiTemplateDataRows]=\"isExpandable()\"\n #table\n [ngClass]=\"{\n smallerFonts: smallerFonts(),\n nowrap: nowrap(),\n centerCells: centerCells(),\n curvy: curvy(),\n 'table-striped': striped(),\n }\">\n <!-- Checkbox Column -->\n <ng-container\n matColumnDef=\"mselect\"\n [sticky]=\"!placeSelectionAtRight()\"\n [stickyEnd]=\"placeSelectionAtRight()\">\n <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n @if (customSelectClass()) {\n <input\n type=\"checkbox\"\n [class]=\"customSelectClass()\"\n (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [attr.aria-label]=\"checkboxLabel()\" />\n }\n @if (!customSelectClass()) {\n <mat-checkbox\n (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n }\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n @if (customSelectClass()) {\n <input\n type=\"checkbox\"\n class=\"form-control control-bg-gray\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [attr.aria-label]=\"checkboxLabel(row)\" />\n }\n @if (!customSelectClass()) {\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [aria-label]=\"checkboxLabel(row)\"\n [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n }\n </td>\n </ng-container>\n <!-- Columns -->\n @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n <ng-template #thContent>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </ng-template>\n\n @switch (col.type) {\n <!-- CHECKBOX -->\n @case ('textarea') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <!-- <app-input-td-rf [(model)]=\"col.\" [showLabel]=\"false\" /> -->\n </td>\n </ng-container>\n }\n <!--// -->\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n <!-- Removing the empty space above checkboxes -->\n <app-input-ngmodel\n [showLabel]=\"false\"\n [stacked]=\"true\"\n type=\"checkbox\"\n [disabled]=\"col.disabled\"\n [checked]=\"col.checked\"\n [(model)]=\"row[col.f]\"\n (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Input -->\n @case ('input') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <!-- Removing the empty space above checkboxes -->\n <app-input-basic\n [showLabel]=\"false\"\n [stacked]=\"true\"\n type=\"text\"\n [disabled]=\"col.disabled\"\n [form]=\"row\"\n [name]=\"col.f\"\n [noFormat]=\"true\" />\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- PROGRESS BAR -->\n @case ('progress') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"progress\">\n <div\n class=\"progress-bar progress-bar-striped bg-success\"\n role=\"progressbar\"\n [ngStyle]=\"{ width: row[col.f] }\">\n {{ row[col.f] }}\n </div>\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- COLOR -->\n @case ('color') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Button -->\n @case ('button') {\n <ng-container\n [sticky]=\"col.stickyStart\"\n [stickyEnd]=\"col.stickyEnd || col.sticky\"\n matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n <app-btn\n [icon]=\"col.icon || col.btn?.icon\"\n [type]=\"col.btn?.type\"\n (mclick)=\"\n col.action\n ? col.action(row, col.f, getActionStatusCallback(col), index)\n : null\n \"\n [help]=\"col.btn?.help\"\n [showHelpIcon]=\"col.btn?.showHelpIcon\"\n [text]=\"col.btn?.label\"\n [loading]=\"col.btn?.loading\"\n [iconBtn]=\"col.btn?.iconBtn\"\n mclass=\"w-auto\"\n [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Sub Table -->\n @case ('table') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n <div class=\"inline-block\">\n <app-btn\n [icon]=\"col.icon\"\n [type]=\"col.btn?.type || 'dark'\"\n (mclick)=\"col.action ? col.action(row, col.f) : null\"\n [group]=\"col.btn?.group\"\n [help]=\"col.subTable | tableToString: row | async\"\n [showHelpIcon]=\"false\"\n [text]=\"col.btn?.label\"\n [iconBtn]=\"true\"\n mclass=\"w-auto\" />\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- ACTION COLUMNS -->\n @case ('btns') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\" [stickyEnd]=\"true\" [sticky]=\"true\">\n <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n @for (button of col.buttons; track button.icon + button.label) {\n <div class=\"mx-2\">\n <app-btn\n [icon]=\"button.icon\"\n [text]=\"button.label\"\n [help]=\"button.help\"\n [showHelpIcon]=\"button.showHelpIcon\"\n [type]=\"button.type\"\n [group]=\"button.group\"\n [iconBtn]=\"!button.label\"\n mclass=\"w-auto\"\n (mclick)=\"\n button.action(\n row,\n i + (paginator ? paginator.pageIndex * paginator.pageSize : 0),\n btn\n )\n \"\n #btn />\n </div>\n }\n </div>\n </td>\n </ng-container>\n }\n\n <!-- EDITABLE -->\n @case ('editable') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <a\n class=\"cell\"\n [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n <i\n (click)=\"col.action ? col.action(row, col.f) : null\"\n class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n </td>\n </ng-container>\n }\n\n <!-- DEFAULT -->\n @default {\n <ng-container\n [sticky]=\"col.stickyStart\"\n [stickyEnd]=\"col.stickyEnd || col.sticky\"\n matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let rowIndex = index\"\n [matTooltip]=\"\n col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\n \">\n <ng-template #cellContent>\n @switch (true) {\n @case (!!col.routeFormatter) {\n @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n <a\n class=\"cell\"\n [ngClass]=\"{ pointer: col.action, link: col.action }\"\n (click)=\"col.action ? col.action(row, col.f) : null\"\n [queryParams]=\"cellRoute.queryParams\"\n routerLink=\"{{ cellRoute.route }}\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n }\n }\n @case (!!col.customTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n col.customTemplate;\n context: { $implicit: { row, rowIndex } }\n \" />\n }\n @default {\n <span\n class=\"cell\"\n [ngClass]=\"{ pointer: col.action, link: col.action }\"\n (click)=\"col.action ? col.action(row, col.f) : null\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></span>\n }\n }\n @if (col.expandable) {\n <button\n matTooltip=\"Exapnd\"\n [matTooltipShowDelay]=\"1000\"\n mat-icon-button\n (click)=\"expandCell(row, col, expandModal)\"\n class=\"expandBtn\">\n <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n </button>\n }\n </ng-template>\n\n @if (col._onHoverFunction) {\n <span\n class=\"\"\n [nelDebug]=\"debug()\"\n [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n [nelDelay]=\"col._onHoverDelay\">\n <ng-container *ngTemplateOutlet=\"cellContent\" />\n </span>\n } @else {\n <ng-container *ngTemplateOutlet=\"cellContent\" />\n }\n </td>\n </ng-container>\n }\n\n <!--// -->\n }\n }\n <!-- EXPANDABLE COLUMN-->\n @if (isExpandable()) {\n <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\"> </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"d-flex justify-content-end\">\n <app-btn\n [iconBtn]=\"true\"\n type=\"clear\"\n [customIcon]=\"\n expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n \"\n aria-label=\"expand row\"\n (mclick)=\"\n expandedElement.set(expandedElement() === row ? null : row);\n clickedExpandRow.emit({ open: expandedElement() === row, row });\n $event.stopPropagation()\n \" />\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n <!-- Options Column -->\n @if (hasRowOptions()) {\n <ng-container matColumnDef=\"option\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef disableClear></th>\n <td mat-cell *matCellDef=\"let row\">\n @if (rowOptionsMap()) {\n @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\n <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n <i class=\"fa fa-ellipsis-v me-0\"></i>\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (option of _rowoptions; track option.t) {\n <button\n mat-menu-item\n class=\"{{ option.itemClass }}\"\n (click)=\"option.action?.(row)\">\n @if (option.iconClass) {\n <i class=\"{{ option.iconClass }}\"></i>\n }\n {{ option.t | appTranslate | async }}\n </button>\n }\n </mat-menu>\n }\n } @else {\n <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n <i class=\"fa fa-ellipsis-v me-0\"></i>\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (option of rowOptions(); track option.t) {\n <button\n mat-menu-item\n class=\"{{ option.itemClass }}\"\n (click)=\"option.action?.(row)\">\n @if (option.iconClass) {\n <i class=\"{{ option.iconClass }}\"></i>\n }\n {{ option.t | appTranslate | async }}\n </button>\n }\n </mat-menu>\n }\n </td>\n </ng-container>\n }\n\n @if (rawColumns(); as dcols) {\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n @if (isExpandable()) {\n <ng-container matColumnDef=\"expandedDetail\">\n <td\n mat-cell\n *matCellDef=\"let row\"\n [attr.colspan]=\"dcols?.length || 1\"\n [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n <div\n class=\"example-element-detail\"\n [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n @if (row == expandedElement()) {\n <ng-container\n *ngTemplateOutlet=\"\n expandedRowTemplate();\n context: { $implicit: { row } }\n \"></ng-container>\n }\n </div>\n </td>\n </ng-container>\n }\n <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: dcols\"\n [ngClass]=\"{\n pointer: showRowPointer(),\n disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n }\"\n [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n (click)=\"rowClick(row)\"></tr>\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n {{ noItemTxt() | appTranslate | async }}\n </td>\n </tr>\n @if (isExpandable()) {\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['expandedDetail']\"\n class=\"expanded-detail-row\"\n [style.height.px]=\"0\"></tr>\n }\n }\n </table>\n </div>\n @if (showPager()) {\n <mat-paginator\n [length]=\"resultsLength()\"\n [pageSizeOptions]=\"computedPageSizeOptions()\"\n [pageSize]=\"pageSize()\"\n showFirstLastButtons></mat-paginator>\n }\n </div>\n</div>\n\n<modal-comp\n [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n [header]=\"selectedCellForExpansion()?.column?.t\"\n [showFooter]=\"false\"\n (modalClose)=\"closeExpandedCell()\"\n #expandModal>\n <ng-template modalBody>\n @if (selectedCellForExpansion(); as _selected) {\n <div\n class=\"\"\n [innerHTML]=\"\n _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n \"></div>\n }\n </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ExportTableComponent, selector: "app-export-table", inputs: ["data", "displayedColumns", "searchFunc", "searchQuery", "label", "debug", "disabled"] }, { kind: "component", type: FieldsToDisplayComponent, selector: "fields-to-display", inputs: ["query1", "query2", "fields", "currentColumns"], outputs: ["query1Change", "query2Change", "fieldsChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "component", type: InputNGModelComponent, selector: "app-input-ngmodel", inputs: ["mvalue", "cls", "colored", "disabled", "hide", "hint", "id", "inpCl", "label", "lblCl", "lblPosition", "mini", "light", "name", "model", "optionFormatter", "options", "checked", "contextData", "decimalPoints", "labelField", "max", "min", "placeholder", "prefix", "readonly", "required", "showEmptyOption", "showLabel", "showValidation", "showValidationIcon", "small", "stacked", "suffix", "theme", "type", "valueField", "labelType", "xsmall"], outputs: ["modelChange", "mchange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MouseEnterListenerDirective, selector: "[nelMouseEntered]", inputs: ["nelMouseEntered"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }], animations: [
|
|
21562
21561
|
trigger('detailExpand', [
|
|
21563
21562
|
state('collapsed', style({ height: '0px', minHeight: '0' })),
|
|
21564
21563
|
state('expanded', style({ height: '*' })),
|
|
@@ -21612,7 +21611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
21612
21611
|
ValidationMessageComponent,
|
|
21613
21612
|
ValueOrXPipe,
|
|
21614
21613
|
FunctionCaller,
|
|
21615
|
-
], template: "<div class=\"table-plain\">\n @if (header()) {\n <h6 class=\"text-primary\">\n {{ header() | appTranslate | async }}\n </h6>\n }\n\n @if (filterFields()) {\n <div class=\"d-flex\">\n <app-btn\n text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n </div>\n <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n @for (scheme of filterFields(); track scheme.field) {\n <div class=\"col-md-4 col-xxl-3\">\n @switch (scheme.type) {\n @case ('autocomplete') {\n <div class=\"col\">\n <app-autocomplete\n [form]=\"filterForm\"\n [label]=\"scheme.label\"\n [labelField]=\"scheme.labelField\"\n [labelType]=\"scheme.labelType | toAny\"\n [name]=\"scheme.field | toAny\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [valueField]=\"scheme.valueField\"\n [hint]=\"scheme.hint\"\n [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n #inputTag\n [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n <app-validation-message [input]=\"inputTag\" />\n </div>\n }\n @default {\n <app-input-basic\n #formField\n [name]=\"scheme.field | toAny\"\n [form]=\"filterForm\"\n [stacked]=\"true\"\n [type]=\"scheme.type\"\n [valueField]=\"scheme.valueField\"\n [labelType]=\"scheme.labelType | toAny\"\n [labelField]=\"scheme.labelField\"\n [noFormat]=\"true\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [decimalPoints]=\"scheme.decimalPoints\"\n [hint]=\"scheme.hint\"\n [max]=\"scheme.max\"\n [min]=\"scheme.min\"\n [placeholder]=\"scheme.placeholder\"\n [label]=\"scheme.label\"\n [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n <app-validation-message [input]=\"formField\" />\n }\n }\n </div>\n }\n <div class=\"col-md justify-content-end d-flex\">\n <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\" />\n </div>\n </div>\n }\n\n @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n <div class=\" \">\n <div class=\"row g-3 justify-content-between align-items-end\">\n <div class=\"col-md\">\n @if (startSectionTemplate()) {\n <div class=\"{{ starterSectionClass() }}\">\n <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n </div>\n }\n @if (showFilter()) {\n <form [formGroup]=\"filterForm\">\n <div class=\"row justify-content-center align-items-end\">\n <div class=\"col-md-auto\">\n <app-autocomplete\n label=\"Filter\"\n type=\"select\"\n [form]=\"filterForm\"\n name=\"field\"\n [stacked]=\"false\"\n [options]=\"filterOptions()\"\n valueField=\"code\"\n labelField=\"description\" />\n </div>\n <div class=\"col-md-auto\">\n <app-input-basic\n label=\"Value\"\n type=\"text\"\n [form]=\"filterForm\"\n name=\"value\"\n [stacked]=\"false\" />\n </div>\n <div class=\"col-md-auto\">\n <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\" />\n </div>\n </div>\n </form>\n }\n </div>\n @if (showExport() || showAdditionalColumns()) {\n <div class=\"col-md-auto\">\n <div class=\"row row-cols-auto g-3 justify-content-end\">\n <span>\n @if (showExport()) {\n <app-export-table\n [disabled]=\"!dataSource()?.data?.length\"\n [label]=\"label()\"\n [debug]=\"debug()\"\n [displayedColumns]=\"computedDisplayedColumns()\"\n [data]=\"dataSource()?.data\" />\n }\n </span>\n @if (showAdditionalColumns()) {\n <div class=\"d-flex\">\n <fields-to-display\n [fields]=\"allTableColumns()\"\n [currentColumns]=\"computedDisplayedColumns()\"\n (fieldsChanged)=\"fieldsChanged($event)\" />\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n <div\n [ngClass]=\"{ border: distinct() }\"\n class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n <div class=\"table-responsive\">\n <table\n mat-table\n [dataSource]=\"dataSource() || obsDataSource()\"\n matSort\n class=\"w-100 d-table table mb-0\"\n [multiTemplateDataRows]=\"isExpandable()\"\n #table\n [ngClass]=\"{\n smallerFonts: smallerFonts(),\n nowrap: nowrap(),\n centerCells: centerCells(),\n curvy: curvy(),\n 'table-striped': striped(),\n }\">\n <!-- Checkbox Column -->\n <ng-container\n matColumnDef=\"mselect\"\n [sticky]=\"!placeSelectionAtRight()\"\n [stickyEnd]=\"placeSelectionAtRight()\">\n <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n @if (customSelectClass()) {\n <input\n type=\"checkbox\"\n [class]=\"customSelectClass()\"\n (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [attr.aria-label]=\"checkboxLabel()\" />\n }\n @if (!customSelectClass()) {\n <mat-checkbox\n (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n }\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n @if (customSelectClass()) {\n <input\n type=\"checkbox\"\n class=\"form-control control-bg-gray\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [attr.aria-label]=\"checkboxLabel(row)\" />\n }\n @if (!customSelectClass()) {\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [aria-label]=\"checkboxLabel(row)\"\n [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n }\n </td>\n </ng-container>\n <!-- Columns -->\n @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n <ng-template #thContent>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </ng-template>\n\n @switch (col.type) {\n <!-- CHECKBOX -->\n @case ('textarea') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <!-- <app-input-td-rf [(model)]=\"col.\" [showLabel]=\"false\" /> -->\n </td>\n </ng-container>\n }\n <!--// -->\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n <!-- Removing the empty space above checkboxes -->\n <app-input-ngmodel\n [showLabel]=\"false\"\n [stacked]=\"true\"\n type=\"checkbox\"\n [disabled]=\"col.disabled\"\n [checked]=\"col.checked\"\n [(model)]=\"row[col.f]\"\n (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Input -->\n @case ('input') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <!-- Removing the empty space above checkboxes -->\n <app-input-basic\n [showLabel]=\"false\"\n [stacked]=\"true\"\n type=\"text\"\n [disabled]=\"col.disabled\"\n [form]=\"row\"\n [name]=\"col.f\"\n [noFormat]=\"true\" />\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- PROGRESS BAR -->\n @case ('progress') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"progress\">\n <div\n class=\"progress-bar progress-bar-striped bg-success\"\n role=\"progressbar\"\n [ngStyle]=\"{ width: row[col.f] }\">\n {{ row[col.f] }}\n </div>\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- COLOR -->\n @case ('color') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Button -->\n @case ('button') {\n <ng-container\n [sticky]=\"col.stickyStart\"\n [stickyEnd]=\"col.stickyEnd || col.sticky\"\n matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n <app-btn\n [icon]=\"col.icon || col.btn?.icon\"\n [type]=\"col.btn?.type\"\n (mclick)=\"\n col.action\n ? col.action(row, col.f, getActionStatusCallback(col), index)\n : null\n \"\n [help]=\"col.btn?.help\"\n [showHelpIcon]=\"col.btn?.showHelpIcon\"\n [text]=\"col.btn?.label\"\n [loading]=\"col.btn?.loading\"\n [iconBtn]=\"col.btn?.iconBtn\"\n mclass=\"w-auto\"\n [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Sub Table -->\n @case ('table') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n <div class=\"inline-block\">\n <app-btn\n [icon]=\"col.icon\"\n [type]=\"col.btn?.type || 'dark'\"\n (mclick)=\"col.action ? col.action(row, col.f) : null\"\n [group]=\"col.btn?.group\"\n [help]=\"col.subTable | tableToString: row | async\"\n [showHelpIcon]=\"false\"\n [text]=\"col.btn?.label\"\n [iconBtn]=\"true\"\n mclass=\"w-auto\" />\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- ACTION COLUMNS -->\n @case ('btns') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\" [stickyEnd]=\"true\" [sticky]=\"true\">\n <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n @for (button of col.buttons; track button.icon + button.label) {\n <div class=\"mx-2\">\n <app-btn\n [icon]=\"button.icon\"\n [text]=\"button.label\"\n [help]=\"button.help\"\n [showHelpIcon]=\"button.showHelpIcon\"\n [type]=\"button.type\"\n [group]=\"button.group\"\n [iconBtn]=\"!button.label\"\n mclass=\"w-auto\"\n (mclick)=\"\n button.action(row, i + paginator.pageIndex * paginator.pageSize, btn)\n \"\n #btn />\n </div>\n }\n </div>\n </td>\n </ng-container>\n }\n\n <!-- EDITABLE -->\n @case ('editable') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <a\n class=\"cell\"\n [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n <i\n (click)=\"col.action ? col.action(row, col.f) : null\"\n class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n </td>\n </ng-container>\n }\n\n <!-- DEFAULT -->\n @default {\n <ng-container\n [sticky]=\"col.stickyStart\"\n [stickyEnd]=\"col.stickyEnd || col.sticky\"\n matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let rowIndex = index\"\n [matTooltip]=\"\n col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\n \">\n <ng-template #cellContent>\n @switch (true) {\n @case (!!col.routeFormatter) {\n @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n <a\n class=\"cell\"\n [ngClass]=\"{ pointer: col.action, link: col.action }\"\n (click)=\"col.action ? col.action(row, col.f) : null\"\n [queryParams]=\"cellRoute.queryParams\"\n routerLink=\"{{ cellRoute.route }}\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n }\n }\n @case (!!col.customTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n col.customTemplate;\n context: { $implicit: { row, rowIndex } }\n \" />\n }\n @default {\n <span\n class=\"cell\"\n [ngClass]=\"{ pointer: col.action, link: col.action }\"\n (click)=\"col.action ? col.action(row, col.f) : null\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></span>\n }\n }\n @if (col.expandable) {\n <button\n matTooltip=\"Exapnd\"\n [matTooltipShowDelay]=\"1000\"\n mat-icon-button\n (click)=\"expandCell(row, col, expandModal)\"\n class=\"expandBtn\">\n <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n </button>\n }\n </ng-template>\n\n @if (col._onHoverFunction) {\n <span\n class=\"\"\n [nelDebug]=\"debug()\"\n [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n [nelDelay]=\"col._onHoverDelay\">\n <ng-container *ngTemplateOutlet=\"cellContent\" />\n </span>\n } @else {\n <ng-container *ngTemplateOutlet=\"cellContent\" />\n }\n </td>\n </ng-container>\n }\n\n <!--// -->\n }\n }\n <!-- EXPANDABLE COLUMN-->\n @if (isExpandable()) {\n <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\"> </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"d-flex justify-content-end\">\n <app-btn\n [iconBtn]=\"true\"\n type=\"clear\"\n [customIcon]=\"\n expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n \"\n aria-label=\"expand row\"\n (mclick)=\"\n expandedElement.set(expandedElement() === row ? null : row);\n clickedExpandRow.emit({ open: expandedElement() === row, row });\n $event.stopPropagation()\n \" />\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n <!-- Options Column -->\n @if (hasRowOptions()) {\n <ng-container matColumnDef=\"option\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef disableClear></th>\n <td mat-cell *matCellDef=\"let row\">\n @if (rowOptionsMap()) {\n @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\n <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n <i class=\"fa fa-ellipsis-v me-0\"></i>\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (option of _rowoptions; track option.t) {\n <button\n mat-menu-item\n class=\"{{ option.itemClass }}\"\n (click)=\"option.action?.(row)\">\n @if (option.iconClass) {\n <i class=\"{{ option.iconClass }}\"></i>\n }\n {{ option.t | appTranslate | async }}\n </button>\n }\n </mat-menu>\n }\n } @else {\n <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n <i class=\"fa fa-ellipsis-v me-0\"></i>\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (option of rowOptions(); track option.t) {\n <button\n mat-menu-item\n class=\"{{ option.itemClass }}\"\n (click)=\"option.action?.(row)\">\n @if (option.iconClass) {\n <i class=\"{{ option.iconClass }}\"></i>\n }\n {{ option.t | appTranslate | async }}\n </button>\n }\n </mat-menu>\n }\n </td>\n </ng-container>\n }\n\n @if (rawColumns(); as dcols) {\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n @if (isExpandable()) {\n <ng-container matColumnDef=\"expandedDetail\">\n <td\n mat-cell\n *matCellDef=\"let row\"\n [attr.colspan]=\"dcols?.length || 1\"\n [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n <div\n class=\"example-element-detail\"\n [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n @if (row == expandedElement()) {\n <ng-container\n *ngTemplateOutlet=\"\n expandedRowTemplate();\n context: { $implicit: { row } }\n \"></ng-container>\n }\n </div>\n </td>\n </ng-container>\n }\n <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: dcols\"\n [ngClass]=\"{\n pointer: showRowPointer(),\n disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n }\"\n [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n (click)=\"rowClick(row)\"></tr>\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n {{ noItemTxt() | appTranslate | async }}\n </td>\n </tr>\n @if (isExpandable()) {\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['expandedDetail']\"\n class=\"expanded-detail-row\"\n [style.height.px]=\"0\"></tr>\n }\n }\n </table>\n </div>\n @if (showPager()) {\n <mat-paginator\n [length]=\"resultsLength()\"\n [pageSizeOptions]=\"computedPageSizeOptions()\"\n [pageSize]=\"pageSize()\"\n showFirstLastButtons></mat-paginator>\n }\n </div>\n</div>\n\n<modal-comp\n [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n [header]=\"selectedCellForExpansion()?.column?.t\"\n [showFooter]=\"false\"\n (modalClose)=\"closeExpandedCell()\"\n #expandModal>\n <ng-template modalBody>\n @if (selectedCellForExpansion(); as _selected) {\n <div\n class=\"\"\n [innerHTML]=\"\n _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n \"></div>\n }\n </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"] }]
|
|
21614
|
+
], template: "<div class=\"table-plain\">\n @if (header()) {\n <h6 class=\"text-primary\">\n {{ header() | appTranslate | async }}\n </h6>\n }\n\n @if (filterFields()) {\n <div class=\"d-flex\">\n <app-btn\n text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n </div>\n <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n @for (scheme of filterFields(); track scheme.field) {\n <div class=\"col-md-4 col-xxl-3\">\n @switch (scheme.type) {\n @case ('autocomplete') {\n <div class=\"col\">\n <app-autocomplete\n [form]=\"filterForm\"\n [label]=\"scheme.label\"\n [labelField]=\"scheme.labelField\"\n [labelType]=\"scheme.labelType | toAny\"\n [name]=\"scheme.field | toAny\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [valueField]=\"scheme.valueField\"\n [hint]=\"scheme.hint\"\n [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n #inputTag\n [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n <app-validation-message [input]=\"inputTag\" />\n </div>\n }\n @default {\n <app-input-basic\n #formField\n [name]=\"scheme.field | toAny\"\n [form]=\"filterForm\"\n [stacked]=\"true\"\n [type]=\"scheme.type\"\n [valueField]=\"scheme.valueField\"\n [labelType]=\"scheme.labelType | toAny\"\n [labelField]=\"scheme.labelField\"\n [noFormat]=\"true\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [decimalPoints]=\"scheme.decimalPoints\"\n [hint]=\"scheme.hint\"\n [max]=\"scheme.max\"\n [min]=\"scheme.min\"\n [placeholder]=\"scheme.placeholder\"\n [label]=\"scheme.label\"\n [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n <app-validation-message [input]=\"formField\" />\n }\n }\n </div>\n }\n <div class=\"col-md justify-content-end d-flex\">\n <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\" />\n </div>\n </div>\n }\n\n @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n <div class=\" \">\n <div class=\"row g-3 justify-content-between align-items-end\">\n <div class=\"col-md\">\n @if (startSectionTemplate()) {\n <div class=\"{{ starterSectionClass() }}\">\n <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n </div>\n }\n @if (showFilter()) {\n <form [formGroup]=\"filterForm\">\n <div class=\"row justify-content-center align-items-end\">\n <div class=\"col-md-auto\">\n <app-autocomplete\n label=\"Filter\"\n type=\"select\"\n [form]=\"filterForm\"\n name=\"field\"\n [stacked]=\"false\"\n [options]=\"filterOptions()\"\n valueField=\"code\"\n labelField=\"description\" />\n </div>\n <div class=\"col-md-auto\">\n <app-input-basic\n label=\"Value\"\n type=\"text\"\n [form]=\"filterForm\"\n name=\"value\"\n [stacked]=\"false\" />\n </div>\n <div class=\"col-md-auto\">\n <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\" />\n </div>\n </div>\n </form>\n }\n </div>\n @if (showExport() || showAdditionalColumns()) {\n <div class=\"col-md-auto\">\n <div class=\"row row-cols-auto g-3 justify-content-end\">\n <span>\n @if (showExport()) {\n <app-export-table\n [disabled]=\"!dataSource()?.data?.length\"\n [label]=\"label()\"\n [debug]=\"debug()\"\n [displayedColumns]=\"computedDisplayedColumns()\"\n [data]=\"dataSource()?.data\" />\n }\n </span>\n @if (showAdditionalColumns()) {\n <div class=\"d-flex\">\n <fields-to-display\n [fields]=\"allTableColumns()\"\n [currentColumns]=\"computedDisplayedColumns()\"\n (fieldsChanged)=\"fieldsChanged($event)\" />\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n <div\n [ngClass]=\"{ border: distinct() }\"\n class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n <div class=\"table-responsive\">\n <table\n mat-table\n [dataSource]=\"dataSource() || obsDataSource()\"\n matSort\n class=\"w-100 d-table table mb-0\"\n [multiTemplateDataRows]=\"isExpandable()\"\n #table\n [ngClass]=\"{\n smallerFonts: smallerFonts(),\n nowrap: nowrap(),\n centerCells: centerCells(),\n curvy: curvy(),\n 'table-striped': striped(),\n }\">\n <!-- Checkbox Column -->\n <ng-container\n matColumnDef=\"mselect\"\n [sticky]=\"!placeSelectionAtRight()\"\n [stickyEnd]=\"placeSelectionAtRight()\">\n <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n @if (customSelectClass()) {\n <input\n type=\"checkbox\"\n [class]=\"customSelectClass()\"\n (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [attr.aria-label]=\"checkboxLabel()\" />\n }\n @if (!customSelectClass()) {\n <mat-checkbox\n (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n }\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n @if (customSelectClass()) {\n <input\n type=\"checkbox\"\n class=\"form-control control-bg-gray\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [attr.aria-label]=\"checkboxLabel(row)\" />\n }\n @if (!customSelectClass()) {\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [aria-label]=\"checkboxLabel(row)\"\n [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n }\n </td>\n </ng-container>\n <!-- Columns -->\n @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n <ng-template #thContent>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </ng-template>\n\n @switch (col.type) {\n <!-- CHECKBOX -->\n @case ('textarea') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <!-- <app-input-td-rf [(model)]=\"col.\" [showLabel]=\"false\" /> -->\n </td>\n </ng-container>\n }\n <!--// -->\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n <!-- Removing the empty space above checkboxes -->\n <app-input-ngmodel\n [showLabel]=\"false\"\n [stacked]=\"true\"\n type=\"checkbox\"\n [disabled]=\"col.disabled\"\n [checked]=\"col.checked\"\n [(model)]=\"row[col.f]\"\n (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Input -->\n @case ('input') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <!-- Removing the empty space above checkboxes -->\n <app-input-basic\n [showLabel]=\"false\"\n [stacked]=\"true\"\n type=\"text\"\n [disabled]=\"col.disabled\"\n [form]=\"row\"\n [name]=\"col.f\"\n [noFormat]=\"true\" />\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- PROGRESS BAR -->\n @case ('progress') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"progress\">\n <div\n class=\"progress-bar progress-bar-striped bg-success\"\n role=\"progressbar\"\n [ngStyle]=\"{ width: row[col.f] }\">\n {{ row[col.f] }}\n </div>\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- COLOR -->\n @case ('color') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Button -->\n @case ('button') {\n <ng-container\n [sticky]=\"col.stickyStart\"\n [stickyEnd]=\"col.stickyEnd || col.sticky\"\n matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n <app-btn\n [icon]=\"col.icon || col.btn?.icon\"\n [type]=\"col.btn?.type\"\n (mclick)=\"\n col.action\n ? col.action(row, col.f, getActionStatusCallback(col), index)\n : null\n \"\n [help]=\"col.btn?.help\"\n [showHelpIcon]=\"col.btn?.showHelpIcon\"\n [text]=\"col.btn?.label\"\n [loading]=\"col.btn?.loading\"\n [iconBtn]=\"col.btn?.iconBtn\"\n mclass=\"w-auto\"\n [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Sub Table -->\n @case ('table') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n <div class=\"inline-block\">\n <app-btn\n [icon]=\"col.icon\"\n [type]=\"col.btn?.type || 'dark'\"\n (mclick)=\"col.action ? col.action(row, col.f) : null\"\n [group]=\"col.btn?.group\"\n [help]=\"col.subTable | tableToString: row | async\"\n [showHelpIcon]=\"false\"\n [text]=\"col.btn?.label\"\n [iconBtn]=\"true\"\n mclass=\"w-auto\" />\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- ACTION COLUMNS -->\n @case ('btns') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\" [stickyEnd]=\"true\" [sticky]=\"true\">\n <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n @for (button of col.buttons; track button.icon + button.label) {\n <div class=\"mx-2\">\n <app-btn\n [icon]=\"button.icon\"\n [text]=\"button.label\"\n [help]=\"button.help\"\n [showHelpIcon]=\"button.showHelpIcon\"\n [type]=\"button.type\"\n [group]=\"button.group\"\n [iconBtn]=\"!button.label\"\n mclass=\"w-auto\"\n (mclick)=\"\n button.action(\n row,\n i + (paginator ? paginator.pageIndex * paginator.pageSize : 0),\n btn\n )\n \"\n #btn />\n </div>\n }\n </div>\n </td>\n </ng-container>\n }\n\n <!-- EDITABLE -->\n @case ('editable') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <a\n class=\"cell\"\n [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n <i\n (click)=\"col.action ? col.action(row, col.f) : null\"\n class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n </td>\n </ng-container>\n }\n\n <!-- DEFAULT -->\n @default {\n <ng-container\n [sticky]=\"col.stickyStart\"\n [stickyEnd]=\"col.stickyEnd || col.sticky\"\n matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let rowIndex = index\"\n [matTooltip]=\"\n col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\n \">\n <ng-template #cellContent>\n @switch (true) {\n @case (!!col.routeFormatter) {\n @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n <a\n class=\"cell\"\n [ngClass]=\"{ pointer: col.action, link: col.action }\"\n (click)=\"col.action ? col.action(row, col.f) : null\"\n [queryParams]=\"cellRoute.queryParams\"\n routerLink=\"{{ cellRoute.route }}\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n }\n }\n @case (!!col.customTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n col.customTemplate;\n context: { $implicit: { row, rowIndex } }\n \" />\n }\n @default {\n <span\n class=\"cell\"\n [ngClass]=\"{ pointer: col.action, link: col.action }\"\n (click)=\"col.action ? col.action(row, col.f) : null\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></span>\n }\n }\n @if (col.expandable) {\n <button\n matTooltip=\"Exapnd\"\n [matTooltipShowDelay]=\"1000\"\n mat-icon-button\n (click)=\"expandCell(row, col, expandModal)\"\n class=\"expandBtn\">\n <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n </button>\n }\n </ng-template>\n\n @if (col._onHoverFunction) {\n <span\n class=\"\"\n [nelDebug]=\"debug()\"\n [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n [nelDelay]=\"col._onHoverDelay\">\n <ng-container *ngTemplateOutlet=\"cellContent\" />\n </span>\n } @else {\n <ng-container *ngTemplateOutlet=\"cellContent\" />\n }\n </td>\n </ng-container>\n }\n\n <!--// -->\n }\n }\n <!-- EXPANDABLE COLUMN-->\n @if (isExpandable()) {\n <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\"> </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"d-flex justify-content-end\">\n <app-btn\n [iconBtn]=\"true\"\n type=\"clear\"\n [customIcon]=\"\n expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n \"\n aria-label=\"expand row\"\n (mclick)=\"\n expandedElement.set(expandedElement() === row ? null : row);\n clickedExpandRow.emit({ open: expandedElement() === row, row });\n $event.stopPropagation()\n \" />\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n <!-- Options Column -->\n @if (hasRowOptions()) {\n <ng-container matColumnDef=\"option\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef disableClear></th>\n <td mat-cell *matCellDef=\"let row\">\n @if (rowOptionsMap()) {\n @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\n <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n <i class=\"fa fa-ellipsis-v me-0\"></i>\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (option of _rowoptions; track option.t) {\n <button\n mat-menu-item\n class=\"{{ option.itemClass }}\"\n (click)=\"option.action?.(row)\">\n @if (option.iconClass) {\n <i class=\"{{ option.iconClass }}\"></i>\n }\n {{ option.t | appTranslate | async }}\n </button>\n }\n </mat-menu>\n }\n } @else {\n <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n <i class=\"fa fa-ellipsis-v me-0\"></i>\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (option of rowOptions(); track option.t) {\n <button\n mat-menu-item\n class=\"{{ option.itemClass }}\"\n (click)=\"option.action?.(row)\">\n @if (option.iconClass) {\n <i class=\"{{ option.iconClass }}\"></i>\n }\n {{ option.t | appTranslate | async }}\n </button>\n }\n </mat-menu>\n }\n </td>\n </ng-container>\n }\n\n @if (rawColumns(); as dcols) {\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n @if (isExpandable()) {\n <ng-container matColumnDef=\"expandedDetail\">\n <td\n mat-cell\n *matCellDef=\"let row\"\n [attr.colspan]=\"dcols?.length || 1\"\n [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n <div\n class=\"example-element-detail\"\n [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n @if (row == expandedElement()) {\n <ng-container\n *ngTemplateOutlet=\"\n expandedRowTemplate();\n context: { $implicit: { row } }\n \"></ng-container>\n }\n </div>\n </td>\n </ng-container>\n }\n <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: dcols\"\n [ngClass]=\"{\n pointer: showRowPointer(),\n disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n }\"\n [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n (click)=\"rowClick(row)\"></tr>\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n {{ noItemTxt() | appTranslate | async }}\n </td>\n </tr>\n @if (isExpandable()) {\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['expandedDetail']\"\n class=\"expanded-detail-row\"\n [style.height.px]=\"0\"></tr>\n }\n }\n </table>\n </div>\n @if (showPager()) {\n <mat-paginator\n [length]=\"resultsLength()\"\n [pageSizeOptions]=\"computedPageSizeOptions()\"\n [pageSize]=\"pageSize()\"\n showFirstLastButtons></mat-paginator>\n }\n </div>\n</div>\n\n<modal-comp\n [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n [header]=\"selectedCellForExpansion()?.column?.t\"\n [showFooter]=\"false\"\n (modalClose)=\"closeExpandedCell()\"\n #expandModal>\n <ng-template modalBody>\n @if (selectedCellForExpansion(); as _selected) {\n <div\n class=\"\"\n [innerHTML]=\"\n _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n \"></div>\n }\n </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"] }]
|
|
21616
21615
|
}], ctorParameters: () => [], propDecorators: { disableSelectionByField: [{
|
|
21617
21616
|
type: Input
|
|
21618
21617
|
}], _view: [{
|