ets-fe-ng-sdk 19.0.29 → 19.0.31
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.
|
@@ -15625,7 +15625,7 @@ class TableHttpsComponent extends TableBaseComponent {
|
|
|
15625
15625
|
this.search();
|
|
15626
15626
|
}
|
|
15627
15627
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableHttpsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
15628
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: TableHttpsComponent, isStandalone: true, selector: "table-https", inputs: { observableFunc: { classPropertyName: "observableFunc", publicName: "observableFunc", isSignal: true, isRequired: false, transformFunction: null }, pageNumber: { classPropertyName: "pageNumber", publicName: "pageNumber", isSignal: false, isRequired: false, transformFunction: null }, queryData: { classPropertyName: "queryData", publicName: "queryData", isSignal: true, isRequired: false, transformFunction: null }, searchIfNoQuery: { classPropertyName: "searchIfNoQuery", publicName: "searchIfNoQuery", isSignal: true, isRequired: false, transformFunction: null }, showRefreshBtn: { classPropertyName: "showRefreshBtn", publicName: "showRefreshBtn", isSignal: true, isRequired: false, transformFunction: null }, useStaticLoader: { classPropertyName: "useStaticLoader", publicName: "useStaticLoader", isSignal: true, isRequired: false, transformFunction: null }, searchPromptText: { classPropertyName: "searchPromptText", publicName: "searchPromptText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryData: "queryDataChange", dataFetched: "dataFetched" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-https\">\n @if (header()) {\n <h6 class=\"text-primary\">\n {{ header() | appTranslate | async }}\n </h6>\n }\n\n <!-- {{queryData()|json}} -->\n <div class=\"\" [hidden]=\"!allowSearch()\">\n <div class=\"row g-3 m-0 row-cols-md-auto justify-content-between align-items-center\">\n <div class=\"ps-0\">\n @if (startSectionTemplate()) {\n <div class=\"{{ starterSectionClass() }}\">\n <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n </div>\n }\n </div>\n <div class=\"pe-0\">\n <div class=\"row g-3 row-cols-lg-auto align-items-center justify-content-between\">\n <div class=\"col-auto\">\n @if (showExport()) {\n <app-export-table\n [disabled]=\"!resultsLength()\"\n [label]=\"label()\"\n [debug]=\"debug()\"\n [searchQuery]=\"allQueryData() | toAny\"\n [searchFunc]=\"observableFunc()\"\n [displayedColumns]=\"computedDisplayedColumns()\"></app-export-table>\n }\n </div>\n @if (showAdditionalColumns()) {\n <div class=\"col-auto\">\n <fields-to-display\n [fields]=\"allTableColumns()\"\n [currentColumns]=\"computedDisplayedColumns()\"\n (fieldsChanged)=\"fieldsChanged($event)\" />\n </div>\n }\n @if (showRefreshBtn()) {\n <div class=\"col-auto\">\n <app-btn icon=\"refresh\" [iconBtn]=\"true\" (mclick)=\"refresh()\" />\n </div>\n }\n </div>\n </div>\n </div>\n <div\n class=\"mt-2 overflow-auto {{ tableContainerClass() }} table-container rounded-10\"\n [ngClass]=\"{ border: distinct() }\">\n <loader\n [loading]=\"isLoadingResults()\"\n [useStaticLoader]=\"useStaticLoader()\"\n [height]=\"container?.scrollHeight + 400\">\n <div #container>\n <div class=\"table-responsive\">\n <table\n mat-table\n [dataSource]=\"filteredAndPagedResults()\"\n class=\"w-100 d-table table\"\n [multiTemplateDataRows]=\"isExpandable()\"\n [ngClass]=\"{\n smallerFonts: smallerFonts(),\n nowrap: nowrap(),\n centerCells: centerCells(),\n curvy: curvy(),\n 'table-striped': striped(),\n }\"\n matSort\n matSortActive=\"{{ orderField() | toAny }}\"\n matSortDisableClear\n [matSortDirection]=\"orderDirection()\"\n #table\n (matSortChange)=\"resetPaging()\">\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 <mat-checkbox\n (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [aria-label]=\"checkboxLabel(row)\"></mat-checkbox>\n </td>\n </ng-container>\n <!-- COLUMNS -->\n @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n @switch (col.type) {\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef class=\"w-1\">\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\" 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 <!-- Sub Table -->\n @case ('table') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n {{ col.t | appTranslate | async }}\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <app-btn\n [icon]=\"col.icon\"\n type=\"dark\"\n (mclick)=\"col.action ? col.action(row, col.f) : null\"\n [help]=\"col.subTable | tableToString: row | async\"\n [showHelpIcon]=\"false\"\n [iconBtn]=\"true\"\n mclass=\"w-auto\" />\n </td>\n </ng-container>\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 <!-- Button -->\n @case ('button') {\n <ng-container [sticky]=\"col.sticky\" 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 [mini]=\"col.btn?.mini\"\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 <!-- ACTION/BTNS COLUMNS -->\n @case ('btns') {\n <ng-container\n matColumnDef=\"{{ col.f | toAny }}\"\n [stickyEnd]=\"true\"\n [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\">\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 [mini]=\"button.mini\"\n [iconBtn]=\"!button.label\"\n mclass=\"w-auto\"\n (mclick)=\"button.action(row, i, btn)\"\n #btn />\n </div>\n }\n </div>\n </td>\n </ng-container>\n }\n <!-- EDITABLE -->\n @case ('editable') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n {{ col.t | appTranslate | async }}\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 <!-- DEFAULT -->\n @default {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\" [sticky]=\"col.sticky\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n {{ col.t | appTranslate | async }}\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let rowIndex = index\"\n [matTooltip]=\"\n col.hintFormatter\n ? (col.hintFormatter | functionCaller1: row | async)\n : 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]=\"\n row | getColFormatted: col | async | valueOrX: '-'\n \"></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]=\"\n row | getColFormatted: col | async | valueOrX: '-'\n \"></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 <!-- {{expandedElement()|json}} -->\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 loggingValue=\"Expand Row Button {{ row | json }}\"\n (mclick)=\"\n expandedElement.set(expandedElement() === row ? null : 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\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 <ng-container\n *ngTemplateOutlet=\"\n expandedRowTemplate();\n context: { $implicit: { row } }\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 <mat-paginator\n [length]=\"resultsLength()\"\n [pageSizeOptions]=\"computedPageSizeOptions()\"\n [pageSize]=\"pageSize()\"\n showFirstLastButtons />\n </div>\n </loader>\n </div>\n </div>\n @if (!allowSearch()) {\n <div class=\"not-allowed-search\">{{ searchPromptText() }}</div>\n }\n</div>\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: "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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { 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: "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: 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: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { 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: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { 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: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { 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: "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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MouseEnterListenerDirective, selector: "[nelMouseEntered]", inputs: ["nelMouseEntered"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "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: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }], animations: [
|
|
15628
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: TableHttpsComponent, isStandalone: true, selector: "table-https", inputs: { observableFunc: { classPropertyName: "observableFunc", publicName: "observableFunc", isSignal: true, isRequired: false, transformFunction: null }, pageNumber: { classPropertyName: "pageNumber", publicName: "pageNumber", isSignal: false, isRequired: false, transformFunction: null }, queryData: { classPropertyName: "queryData", publicName: "queryData", isSignal: true, isRequired: false, transformFunction: null }, searchIfNoQuery: { classPropertyName: "searchIfNoQuery", publicName: "searchIfNoQuery", isSignal: true, isRequired: false, transformFunction: null }, showRefreshBtn: { classPropertyName: "showRefreshBtn", publicName: "showRefreshBtn", isSignal: true, isRequired: false, transformFunction: null }, useStaticLoader: { classPropertyName: "useStaticLoader", publicName: "useStaticLoader", isSignal: true, isRequired: false, transformFunction: null }, searchPromptText: { classPropertyName: "searchPromptText", publicName: "searchPromptText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryData: "queryDataChange", dataFetched: "dataFetched" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-https\">\n @if (header()) {\n <h6 class=\"text-primary\">\n {{ header() | appTranslate | async }}\n </h6>\n }\n\n <!-- {{queryData()|json}} -->\n <div class=\"\" [hidden]=\"!allowSearch()\">\n <div class=\"row g-3 m-0 row-cols-md-auto justify-content-between align-items-center\">\n <div class=\"ps-0\">\n @if (startSectionTemplate()) {\n <div class=\"{{ starterSectionClass() }}\">\n <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n </div>\n }\n </div>\n <div class=\"pe-0\">\n <div class=\"row g-3 row-cols-lg-auto align-items-center justify-content-between\">\n <div class=\"col-auto\">\n @if (showExport()) {\n <app-export-table\n [disabled]=\"!resultsLength()\"\n [label]=\"label()\"\n [debug]=\"debug()\"\n [searchQuery]=\"allQueryData() | toAny\"\n [searchFunc]=\"observableFunc()\"\n [displayedColumns]=\"computedDisplayedColumns()\"></app-export-table>\n }\n </div>\n @if (showAdditionalColumns()) {\n <div class=\"col-auto\">\n <fields-to-display\n [fields]=\"allTableColumns()\"\n [currentColumns]=\"computedDisplayedColumns()\"\n (fieldsChanged)=\"fieldsChanged($event)\" />\n </div>\n }\n @if (showRefreshBtn()) {\n <div class=\"col-auto\">\n <app-btn icon=\"refresh\" [iconBtn]=\"true\" (mclick)=\"refresh()\" />\n </div>\n }\n </div>\n </div>\n </div>\n <div\n class=\"mt-2 overflow-auto {{ tableContainerClass() }} table-container rounded-10\"\n [ngClass]=\"{ border: distinct() }\">\n <loader\n [loading]=\"isLoadingResults()\"\n [useStaticLoader]=\"useStaticLoader()\"\n [height]=\"container?.scrollHeight + 400\">\n <div #container>\n <div class=\"table-responsive\">\n <table\n mat-table\n [dataSource]=\"filteredAndPagedResults()\"\n class=\"w-100 d-table table\"\n [multiTemplateDataRows]=\"isExpandable()\"\n [ngClass]=\"{\n smallerFonts: smallerFonts(),\n nowrap: nowrap(),\n centerCells: centerCells(),\n curvy: curvy(),\n 'table-striped': striped(),\n }\"\n matSort\n matSortActive=\"{{ orderField() | toAny }}\"\n matSortDisableClear\n [matSortDirection]=\"orderDirection()\"\n #table\n (matSortChange)=\"resetPaging()\">\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 <mat-checkbox\n (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [aria-label]=\"checkboxLabel(row)\"></mat-checkbox>\n </td>\n </ng-container>\n <!-- COLUMNS -->\n @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n @switch (col.type) {\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef class=\"w-1\">\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\" 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 <!-- Sub Table -->\n @case ('table') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n {{ col.t | appTranslate | async }}\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <app-btn\n [icon]=\"col.icon\"\n type=\"dark\"\n (mclick)=\"col.action ? col.action(row, col.f) : null\"\n [help]=\"col.subTable | tableToString: row | async\"\n [showHelpIcon]=\"false\"\n [iconBtn]=\"true\"\n mclass=\"w-auto\" />\n </td>\n </ng-container>\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 <!-- Button -->\n @case ('button') {\n <ng-container [sticky]=\"col.sticky\" 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 [mini]=\"col.btn?.mini\"\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 <!-- ACTION/BTNS COLUMNS -->\n @case ('btns') {\n <ng-container\n matColumnDef=\"{{ col.f | toAny }}\"\n [stickyEnd]=\"true\"\n [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\">\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 [mini]=\"button.mini\"\n [iconBtn]=\"!button.label\"\n mclass=\"w-auto\"\n (mclick)=\"button.action(row, i, btn)\"\n #btn />\n </div>\n }\n </div>\n </td>\n </ng-container>\n }\n <!-- EDITABLE -->\n @case ('editable') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n {{ col.t | appTranslate | async }}\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 <!-- DEFAULT -->\n @default {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\" [sticky]=\"col.sticky\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n {{ col.t | appTranslate | async }}\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let rowIndex = index\"\n [matTooltip]=\"\n col.hintFormatter\n ? (col.hintFormatter | functionCaller1: row | async)\n : 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]=\"\n row | getColFormatted: col | async | valueOrX: '-'\n \"></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]=\"\n row | getColFormatted: col | async | valueOrX: '-'\n \"></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 <!-- {{expandedElement()|json}} -->\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 loggingValue=\"Expand Row Button {{ row | json }}\"\n (mclick)=\"\n expandedElement.set(expandedElement() === row ? null : 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\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 <ng-container\n *ngTemplateOutlet=\"\n expandedRowTemplate();\n context: { $implicit: { row } }\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 <mat-paginator\n [length]=\"resultsLength()\"\n [pageSizeOptions]=\"computedPageSizeOptions()\"\n [pageSize]=\"pageSize()\"\n showFirstLastButtons />\n </div>\n </loader>\n </div>\n </div>\n @if (!allowSearch()) {\n <div class=\"not-allowed-search\">{{ searchPromptText() | appTranslateNL | async }}</div>\n }\n</div>\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: "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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { 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: "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: 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: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { 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: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { 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: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { 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: "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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MouseEnterListenerDirective, selector: "[nelMouseEntered]", inputs: ["nelMouseEntered"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "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: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }], animations: [
|
|
15629
15629
|
trigger('detailExpand', [
|
|
15630
15630
|
state('collapsed', style({ height: '0px', minHeight: '0' })),
|
|
15631
15631
|
state('expanded', style({ height: '*' })),
|
|
@@ -15671,8 +15671,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
|
|
|
15671
15671
|
ToAnyPipe,
|
|
15672
15672
|
SDKTranslatePipe,
|
|
15673
15673
|
FunctionCaller,
|
|
15674
|
-
FunctionCaller1
|
|
15675
|
-
], template: "<div class=\"table-https\">\n @if (header()) {\n <h6 class=\"text-primary\">\n {{ header() | appTranslate | async }}\n </h6>\n }\n\n <!-- {{queryData()|json}} -->\n <div class=\"\" [hidden]=\"!allowSearch()\">\n <div class=\"row g-3 m-0 row-cols-md-auto justify-content-between align-items-center\">\n <div class=\"ps-0\">\n @if (startSectionTemplate()) {\n <div class=\"{{ starterSectionClass() }}\">\n <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n </div>\n }\n </div>\n <div class=\"pe-0\">\n <div class=\"row g-3 row-cols-lg-auto align-items-center justify-content-between\">\n <div class=\"col-auto\">\n @if (showExport()) {\n <app-export-table\n [disabled]=\"!resultsLength()\"\n [label]=\"label()\"\n [debug]=\"debug()\"\n [searchQuery]=\"allQueryData() | toAny\"\n [searchFunc]=\"observableFunc()\"\n [displayedColumns]=\"computedDisplayedColumns()\"></app-export-table>\n }\n </div>\n @if (showAdditionalColumns()) {\n <div class=\"col-auto\">\n <fields-to-display\n [fields]=\"allTableColumns()\"\n [currentColumns]=\"computedDisplayedColumns()\"\n (fieldsChanged)=\"fieldsChanged($event)\" />\n </div>\n }\n @if (showRefreshBtn()) {\n <div class=\"col-auto\">\n <app-btn icon=\"refresh\" [iconBtn]=\"true\" (mclick)=\"refresh()\" />\n </div>\n }\n </div>\n </div>\n </div>\n <div\n class=\"mt-2 overflow-auto {{ tableContainerClass() }} table-container rounded-10\"\n [ngClass]=\"{ border: distinct() }\">\n <loader\n [loading]=\"isLoadingResults()\"\n [useStaticLoader]=\"useStaticLoader()\"\n [height]=\"container?.scrollHeight + 400\">\n <div #container>\n <div class=\"table-responsive\">\n <table\n mat-table\n [dataSource]=\"filteredAndPagedResults()\"\n class=\"w-100 d-table table\"\n [multiTemplateDataRows]=\"isExpandable()\"\n [ngClass]=\"{\n smallerFonts: smallerFonts(),\n nowrap: nowrap(),\n centerCells: centerCells(),\n curvy: curvy(),\n 'table-striped': striped(),\n }\"\n matSort\n matSortActive=\"{{ orderField() | toAny }}\"\n matSortDisableClear\n [matSortDirection]=\"orderDirection()\"\n #table\n (matSortChange)=\"resetPaging()\">\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 <mat-checkbox\n (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [aria-label]=\"checkboxLabel(row)\"></mat-checkbox>\n </td>\n </ng-container>\n <!-- COLUMNS -->\n @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n @switch (col.type) {\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef class=\"w-1\">\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\" 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 <!-- Sub Table -->\n @case ('table') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n {{ col.t | appTranslate | async }}\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <app-btn\n [icon]=\"col.icon\"\n type=\"dark\"\n (mclick)=\"col.action ? col.action(row, col.f) : null\"\n [help]=\"col.subTable | tableToString: row | async\"\n [showHelpIcon]=\"false\"\n [iconBtn]=\"true\"\n mclass=\"w-auto\" />\n </td>\n </ng-container>\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 <!-- Button -->\n @case ('button') {\n <ng-container [sticky]=\"col.sticky\" 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 [mini]=\"col.btn?.mini\"\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 <!-- ACTION/BTNS COLUMNS -->\n @case ('btns') {\n <ng-container\n matColumnDef=\"{{ col.f | toAny }}\"\n [stickyEnd]=\"true\"\n [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\">\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 [mini]=\"button.mini\"\n [iconBtn]=\"!button.label\"\n mclass=\"w-auto\"\n (mclick)=\"button.action(row, i, btn)\"\n #btn />\n </div>\n }\n </div>\n </td>\n </ng-container>\n }\n <!-- EDITABLE -->\n @case ('editable') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n {{ col.t | appTranslate | async }}\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 <!-- DEFAULT -->\n @default {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\" [sticky]=\"col.sticky\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n {{ col.t | appTranslate | async }}\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let rowIndex = index\"\n [matTooltip]=\"\n col.hintFormatter\n ? (col.hintFormatter | functionCaller1: row | async)\n : 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]=\"\n row | getColFormatted: col | async | valueOrX: '-'\n \"></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]=\"\n row | getColFormatted: col | async | valueOrX: '-'\n \"></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 <!-- {{expandedElement()|json}} -->\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 loggingValue=\"Expand Row Button {{ row | json }}\"\n (mclick)=\"\n expandedElement.set(expandedElement() === row ? null : 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\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 <ng-container\n *ngTemplateOutlet=\"\n expandedRowTemplate();\n context: { $implicit: { row } }\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 <mat-paginator\n [length]=\"resultsLength()\"\n [pageSizeOptions]=\"computedPageSizeOptions()\"\n [pageSize]=\"pageSize()\"\n showFirstLastButtons />\n </div>\n </loader>\n </div>\n </div>\n @if (!allowSearch()) {\n <div class=\"not-allowed-search\">{{ searchPromptText() }}</div>\n }\n</div>\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"] }]
|
|
15674
|
+
FunctionCaller1,
|
|
15675
|
+
SDKTranslateNoLoaderPipe
|
|
15676
|
+
], template: "<div class=\"table-https\">\n @if (header()) {\n <h6 class=\"text-primary\">\n {{ header() | appTranslate | async }}\n </h6>\n }\n\n <!-- {{queryData()|json}} -->\n <div class=\"\" [hidden]=\"!allowSearch()\">\n <div class=\"row g-3 m-0 row-cols-md-auto justify-content-between align-items-center\">\n <div class=\"ps-0\">\n @if (startSectionTemplate()) {\n <div class=\"{{ starterSectionClass() }}\">\n <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n </div>\n }\n </div>\n <div class=\"pe-0\">\n <div class=\"row g-3 row-cols-lg-auto align-items-center justify-content-between\">\n <div class=\"col-auto\">\n @if (showExport()) {\n <app-export-table\n [disabled]=\"!resultsLength()\"\n [label]=\"label()\"\n [debug]=\"debug()\"\n [searchQuery]=\"allQueryData() | toAny\"\n [searchFunc]=\"observableFunc()\"\n [displayedColumns]=\"computedDisplayedColumns()\"></app-export-table>\n }\n </div>\n @if (showAdditionalColumns()) {\n <div class=\"col-auto\">\n <fields-to-display\n [fields]=\"allTableColumns()\"\n [currentColumns]=\"computedDisplayedColumns()\"\n (fieldsChanged)=\"fieldsChanged($event)\" />\n </div>\n }\n @if (showRefreshBtn()) {\n <div class=\"col-auto\">\n <app-btn icon=\"refresh\" [iconBtn]=\"true\" (mclick)=\"refresh()\" />\n </div>\n }\n </div>\n </div>\n </div>\n <div\n class=\"mt-2 overflow-auto {{ tableContainerClass() }} table-container rounded-10\"\n [ngClass]=\"{ border: distinct() }\">\n <loader\n [loading]=\"isLoadingResults()\"\n [useStaticLoader]=\"useStaticLoader()\"\n [height]=\"container?.scrollHeight + 400\">\n <div #container>\n <div class=\"table-responsive\">\n <table\n mat-table\n [dataSource]=\"filteredAndPagedResults()\"\n class=\"w-100 d-table table\"\n [multiTemplateDataRows]=\"isExpandable()\"\n [ngClass]=\"{\n smallerFonts: smallerFonts(),\n nowrap: nowrap(),\n centerCells: centerCells(),\n curvy: curvy(),\n 'table-striped': striped(),\n }\"\n matSort\n matSortActive=\"{{ orderField() | toAny }}\"\n matSortDisableClear\n [matSortDirection]=\"orderDirection()\"\n #table\n (matSortChange)=\"resetPaging()\">\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 <mat-checkbox\n (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [aria-label]=\"checkboxLabel(row)\"></mat-checkbox>\n </td>\n </ng-container>\n <!-- COLUMNS -->\n @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n @switch (col.type) {\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef class=\"w-1\">\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\" 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 <!-- Sub Table -->\n @case ('table') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n {{ col.t | appTranslate | async }}\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <app-btn\n [icon]=\"col.icon\"\n type=\"dark\"\n (mclick)=\"col.action ? col.action(row, col.f) : null\"\n [help]=\"col.subTable | tableToString: row | async\"\n [showHelpIcon]=\"false\"\n [iconBtn]=\"true\"\n mclass=\"w-auto\" />\n </td>\n </ng-container>\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 <!-- Button -->\n @case ('button') {\n <ng-container [sticky]=\"col.sticky\" 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 [mini]=\"col.btn?.mini\"\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 <!-- ACTION/BTNS COLUMNS -->\n @case ('btns') {\n <ng-container\n matColumnDef=\"{{ col.f | toAny }}\"\n [stickyEnd]=\"true\"\n [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\">\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 [mini]=\"button.mini\"\n [iconBtn]=\"!button.label\"\n mclass=\"w-auto\"\n (mclick)=\"button.action(row, i, btn)\"\n #btn />\n </div>\n }\n </div>\n </td>\n </ng-container>\n }\n <!-- EDITABLE -->\n @case ('editable') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n {{ col.t | appTranslate | async }}\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 <!-- DEFAULT -->\n @default {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\" [sticky]=\"col.sticky\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n {{ col.t | appTranslate | async }}\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let rowIndex = index\"\n [matTooltip]=\"\n col.hintFormatter\n ? (col.hintFormatter | functionCaller1: row | async)\n : 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]=\"\n row | getColFormatted: col | async | valueOrX: '-'\n \"></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]=\"\n row | getColFormatted: col | async | valueOrX: '-'\n \"></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 <!-- {{expandedElement()|json}} -->\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 loggingValue=\"Expand Row Button {{ row | json }}\"\n (mclick)=\"\n expandedElement.set(expandedElement() === row ? null : 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\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 <ng-container\n *ngTemplateOutlet=\"\n expandedRowTemplate();\n context: { $implicit: { row } }\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 <mat-paginator\n [length]=\"resultsLength()\"\n [pageSizeOptions]=\"computedPageSizeOptions()\"\n [pageSize]=\"pageSize()\"\n showFirstLastButtons />\n </div>\n </loader>\n </div>\n </div>\n @if (!allowSearch()) {\n <div class=\"not-allowed-search\">{{ searchPromptText() | appTranslateNL | async }}</div>\n }\n</div>\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"] }]
|
|
15676
15677
|
}], propDecorators: { pageNumber: [{
|
|
15677
15678
|
type: Input
|
|
15678
15679
|
}] } });
|