dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fx flex replacements. Switch to tailwind.css.

Browse Source
This commit is contained in:
Igor Kulikov 2024-10-10 16:10:04 +03:00
parent 899820cd27
commit b48e276f44
6 changed files with 91 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.html
View File

@ -19,7 +19,7 @@
ngxClipboard ngxClipboard
[cbContent]="credential" [cbContent]="credential"
(cbOnSuccess)="onCopyCredential()" (cbOnSuccess)="onCopyCredential()"
[fxHide]="hideButton" [class.!hidden]="hideButton"
[disabled]="disabled || loading"> [disabled]="disabled || loading">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon> <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
<span>{{ buttonLabel }}</span> <span>{{ buttonLabel }}</span>

4
ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m-server.component.html
View File

@ -15,7 +15,7 @@
limitations under the License. limitations under the License.
--> -->
<section [formGroup]="serverFormGroup" fxLayout="column"> <section [formGroup]="serverFormGroup" class="flex flex-col">
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
<mat-label translate>device.lwm2m-security-config.mode</mat-label> <mat-label translate>device.lwm2m-security-config.mode</mat-label>
<mat-select formControlName="securityMode"> <mat-select formControlName="securityMode">
@ -24,7 +24,7 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<div [fxShow]="serverFormGroup.get('securityMode').value !== securityConfigLwM2MType.NO_SEC"> <div [class.!hidden]="serverFormGroup.get('securityMode').value === securityConfigLwM2MType.NO_SEC">
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
<mat-label>{{ 'device.lwm2m-security-config.client-publicKey-or-id' | translate }}</mat-label> <mat-label>{{ 'device.lwm2m-security-config.client-publicKey-or-id' | translate }}</mat-label>
<mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;" <mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"

2
ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
View File

@ -16,7 +16,7 @@
--> -->
<section [formGroup]="deviceCredentialsFormGroup"> <section [formGroup]="deviceCredentialsFormGroup">
<section [fxShow]="credentialsTypes?.length > 1" style="margin-bottom: 16px"> <section [class.!hidden]="!(credentialsTypes?.length > 1)" style="margin-bottom: 16px">
<div class="tb-type-title" translate>device.credentials-type</div> <div class="tb-type-title" translate>device.credentials-type</div>
<tb-toggle-select formControlName="credentialsType" appearance="fill"> <tb-toggle-select formControlName="credentialsType" appearance="fill">
<tb-toggle-option *ngFor="let credentialsType of credentialsTypes" [value]="credentialsType"> <tb-toggle-option *ngFor="let credentialsType of credentialsTypes" [value]="credentialsType">

6
ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html
View File

@ -30,9 +30,9 @@
</ng-container> </ng-container>
</ng-template> </ng-template>
<ng-template #deviceFilterPanel> <ng-template #deviceFilterPanel>
<form fxLayout="column" class="mat-content mat-padding" (ngSubmit)="update()"> <form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
<ng-container *ngTemplateOutlet="deviceFilter"></ng-container> <ng-container *ngTemplateOutlet="deviceFilter"></ng-container>
<div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center"> <div class="tb-panel-actions flex flex-row justify-end items-center">
<button type="button" <button type="button"
mat-button mat-button
(click)="cancel()"> (click)="cancel()">
@ -48,7 +48,7 @@
</form> </form>
</ng-template> </ng-template>
<ng-template #deviceFilter> <ng-template #deviceFilter>
<div fxLayout="column" fxLayoutGap="16px" style="min-width: 280px;" [formGroup]="deviceInfoFilterForm"> <div class="flex flex-col gap-4" style="min-width: 280px;" [formGroup]="deviceInfoFilterForm">
<tb-device-profile-autocomplete <tb-device-profile-autocomplete
subscriptSizing="dynamic" subscriptSizing="dynamic"
formControlName="deviceProfileId" formControlName="deviceProfileId"

6
ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
View File

@ -15,10 +15,10 @@
limitations under the License. limitations under the License.
--> -->
<form (ngSubmit)="add()" style="min-width: 400px; width: 750px;" [ngStyle]="entitiesTableConfig.addDialogStyle"> <form (ngSubmit)="add()" style="min-width: 400px; width: 750px;" [style]="entitiesTableConfig.addDialogStyle">
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<h2 translate>{{ translations.add }}</h2> <h2 translate>{{ translations.add }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<div [tb-help]="helpLinkId()"></div> <div [tb-help]="helpLinkId()"></div>
<button mat-icon-button <button mat-icon-button
(click)="cancel()" (click)="cancel()"
@ -32,7 +32,7 @@
<div mat-dialog-content> <div mat-dialog-content>
<tb-anchor #entityDetailsForm></tb-anchor> <tb-anchor #entityDetailsForm></tb-anchor>
</div> </div>
<div mat-dialog-actions fxLayoutAlign="end center"> <div mat-dialog-actions class="flex justify-end items-center">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
cdkFocusInitial cdkFocusInitial

153
ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
View File

@ -34,18 +34,18 @@
</mat-drawer> </mat-drawer>
<mat-drawer-content> <mat-drawer-content>
<div class="mat-padding tb-entity-table tb-absolute-fill"> <div class="mat-padding tb-entity-table tb-absolute-fill">
<div fxLayout="column" class="tb-entity-table-content tb-outlined-border"> <div class="tb-entity-table-content tb-outlined-border flex flex-col">
<mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()"> <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode || !dataSource.selection.isEmpty()">
<div class="mat-toolbar-tools"> <div class="mat-toolbar-tools">
<div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container"> <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
<span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span> <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
<tb-anchor #entityTableHeader></tb-anchor> <tb-anchor #entityTableHeader></tb-anchor>
<tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow" <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
(ngModelChange)="onTimewindowChange()" (ngModelChange)="onTimewindowChange()"
asButton strokedButton historyOnly [forAllTimeEnabled]="entitiesTableConfig.forAllTimeEnabled"></tb-timewindow> asButton strokedButton historyOnly [forAllTimeEnabled]="entitiesTableConfig.forAllTimeEnabled"></tb-timewindow>
</div> </div>
<span fxFlex></span> <span class="flex-1"></span>
<div [fxShow]="addEnabled()"> <div [class.!hidden]="!addEnabled()">
<button mat-icon-button [disabled]="isLoading$ | async" <button mat-icon-button [disabled]="isLoading$ | async"
*ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions" *ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions"
(click)="addEntity($event)" (click)="addEntity($event)"
@ -56,7 +56,7 @@
<ng-template #addActions> <ng-template #addActions>
<button mat-icon-button [disabled]="isLoading$ | async" <button mat-icon-button [disabled]="isLoading$ | async"
*ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu" *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu"
[fxShow]="entitiesTableConfig.addActionDescriptors[0].isEnabled()" [class.!hidden]="!entitiesTableConfig.addActionDescriptors[0].isEnabled()"
(click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)" (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}" matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}"
matTooltipPosition="above"> matTooltipPosition="above">
@ -72,7 +72,7 @@
<mat-menu #addActionsMenu="matMenu" xPosition="before"> <mat-menu #addActionsMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor="let actionDescriptor of entitiesTableConfig.addActionDescriptors" <button mat-menu-item *ngFor="let actionDescriptor of entitiesTableConfig.addActionDescriptors"
[disabled]="isLoading$ | async" [disabled]="isLoading$ | async"
[fxShow]="actionDescriptor.isEnabled()" [class.!hidden]="!actionDescriptor.isEnabled()"
(click)="actionDescriptor.onAction($event)"> (click)="actionDescriptor.onAction($event)">
<tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon> <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
<span>{{ actionDescriptor.name }}</span> <span>{{ actionDescriptor.name }}</span>
@ -82,7 +82,7 @@
</ng-template> </ng-template>
</div> </div>
<button mat-icon-button [disabled]="isLoading$ | async" <button mat-icon-button [disabled]="isLoading$ | async"
[fxShow]="actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors" [class.!hidden]="!actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors"
matTooltip="{{ actionDescriptor.name }}" matTooltip="{{ actionDescriptor.name }}"
matTooltipPosition="above" matTooltipPosition="above"
(click)="actionDescriptor.onAction($event)"> (click)="actionDescriptor.onAction($event)">
@ -101,14 +101,14 @@
</button> </button>
</div> </div>
</mat-toolbar> </mat-toolbar>
<mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()"> <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !dataSource.selection.isEmpty()">
<div class="mat-toolbar-tools"> <div class="mat-toolbar-tools">
<button mat-icon-button <button mat-icon-button
matTooltip="{{ translations.search | translate }}" matTooltip="{{ translations.search | translate }}"
matTooltipPosition="above"> matTooltipPosition="above">
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</button> </button>
<mat-form-field fxFlex> <mat-form-field class="flex-1">
<mat-label>&nbsp;</mat-label> <mat-label>&nbsp;</mat-label>
<input #searchInput matInput <input #searchInput matInput
[formControl]="textSearch" [formControl]="textSearch"
@ -121,14 +121,14 @@
</button> </button>
</div> </div>
</mat-toolbar> </mat-toolbar>
<mat-toolbar *ngIf="entitiesTableConfig.selectionEnabled" class="mat-mdc-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()"> <mat-toolbar *ngIf="entitiesTableConfig.selectionEnabled" class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="dataSource.selection.isEmpty()">
<div class="mat-toolbar-tools"> <div class="mat-toolbar-tools">
<span class="tb-entity-table-info"> <span class="tb-entity-table-info">
{{ translations.selectedEntities | translate:{count: dataSource.selection.selected.length} }} {{ translations.selectedEntities | translate:{count: dataSource.selection.selected.length} }}
</span> </span>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button [disabled]="isLoading$ | async" <button mat-icon-button [disabled]="isLoading$ | async"
[fxShow]="actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors" [class.!hidden]="!actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"
matTooltip="{{ actionDescriptor.name }}" matTooltip="{{ actionDescriptor.name }}"
matTooltipPosition="above" matTooltipPosition="above"
(click)="actionDescriptor.onAction($event, dataSource.selection.selected)"> (click)="actionDescriptor.onAction($event, dataSource.selection.selected)">
@ -136,7 +136,7 @@
</button> </button>
</div> </div>
</mat-toolbar> </mat-toolbar>
<div fxFlex class="table-container"> <div class="table-container flex-1">
<table mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId" <table mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId"
matSort [matSortActive]="pageLink.sortOrder?.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear> matSort [matSortActive]="pageLink.sortOrder?.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<ng-container matColumnDef="select" sticky> <ng-container matColumnDef="select" sticky>
@ -148,23 +148,23 @@
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let entity"> <mat-cell *matCellDef="let entity">
<mat-checkbox (click)="$event.stopPropagation()" <mat-checkbox (click)="$event.stopPropagation()"
[fxShow]="entitiesTableConfig.entitySelectionEnabled(entity)" [class.!hidden]="!entitiesTableConfig.entitySelectionEnabled(entity)"
(change)="$event ? dataSource.selection.toggle(entity) : null" (change)="$event ? dataSource.selection.toggle(entity) : null"
[checked]="dataSource.selection.isSelected(entity)"> [checked]="dataSource.selection.isSelected(entity)">
</mat-checkbox> </mat-checkbox>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container [matColumnDef]="column.key" *ngFor="let column of entityColumns; trackBy: trackByColumnKey;"> <ng-container [matColumnDef]="column.key" *ngFor="let column of entityColumns; trackBy: trackByColumnKey;">
<mat-header-cell [ngClass]="{'mat-number-cell': column.isNumberColumn}" <mat-header-cell [class.mat-number-cell]="column.isNumberColumn"
[fxHide.lt-lg]="column.mobileHide" [class.lt-lg:!hidden]="column.mobileHide"
*matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
{{ column.ignoreTranslate ? column.title : (column.title | translate) }} </mat-header-cell> {{ column.ignoreTranslate ? column.title : (column.title | translate) }} </mat-header-cell>
<mat-cell [ngClass]="{'mat-number-cell': column.isNumberColumn}" <mat-cell [class.mat-number-cell]="column.isNumberColumn"
[fxHide.lt-lg]="column.mobileHide" [class.lt-lg:!hidden]="column.mobileHide"
*matCellDef="let entity; let row = index" *matCellDef="let entity; let row = index"
[matTooltip]="cellTooltip(entity, column, row)" [matTooltip]="cellTooltip(entity, column, row)"
matTooltipPosition="above" matTooltipPosition="above"
[ngStyle]="cellStyle(entity, column, row)"> [style]="cellStyle(entity, column, row)">
<ng-container [ngSwitch]="column.type"> <ng-container [ngSwitch]="column.type">
<ng-template [ngSwitchCase]="'link'"> <ng-template [ngSwitchCase]="'link'">
<a *ngIf="column.entityURL(entity) as detailsPageURL; else defaultContent" <a *ngIf="column.entityURL(entity) as detailsPageURL; else defaultContent"
@ -183,7 +183,7 @@
<ng-template [ngSwitchCase]="cellActionType.COPY_BUTTON"> <ng-template [ngSwitchCase]="cellActionType.COPY_BUTTON">
<tb-copy-button <tb-copy-button
[disabled]="isLoading$ | async" [disabled]="isLoading$ | async"
[fxShow]="column.actionCell.isEnabled(entity)" [class.!hidden]="!column.actionCell.isEnabled(entity)"
[copyText]="column.actionCell.onAction(null, entity)" [copyText]="column.actionCell.onAction(null, entity)"
tooltipText="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}" tooltipText="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
tooltipPosition="above" tooltipPosition="above"
@ -193,11 +193,11 @@
</ng-template> </ng-template>
<ng-template ngSwitchDefault> <ng-template ngSwitchDefault>
<button mat-icon-button [disabled]="isLoading$ | async" <button mat-icon-button [disabled]="isLoading$ | async"
[fxShow]="column.actionCell.isEnabled(entity)" [class.!hidden]="!column.actionCell.isEnabled(entity)"
matTooltip="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}" matTooltip="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
matTooltipPosition="above" matTooltipPosition="above"
(click)="column.actionCell.onAction($event, entity)"> (click)="column.actionCell.onAction($event, entity)">
<tb-icon [ngStyle]="column.actionCell.style"> <tb-icon [style]="column.actionCell.style">
{{column.actionCell.icon}} {{column.actionCell.icon}}
</tb-icon> </tb-icon>
</button> </button>
@ -207,74 +207,83 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container [matColumnDef]="column.key" *ngFor="let column of actionColumns; trackBy: trackByColumnKey;"> <ng-container [matColumnDef]="column.key" *ngFor="let column of actionColumns; trackBy: trackByColumnKey;">
<mat-header-cell *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
<mat-cell *matCellDef="let entity; let row = index" <mat-cell *matCellDef="let entity; let row = index"
[ngStyle]="cellStyle(entity, column, row)"> [style]="cellStyle(entity, column, row)">
<button mat-icon-button [disabled]="isLoading$ | async" <button mat-icon-button [disabled]="isLoading$ | async"
[fxShow]="column.actionDescriptor.isEnabled(entity)" [class.!hidden]="!column.actionDescriptor.isEnabled(entity)"
matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}" matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}"
matTooltipPosition="above" matTooltipPosition="above"
(click)="column.actionDescriptor.onAction($event, entity)"> (click)="column.actionDescriptor.onAction($event, entity)">
<tb-icon [ngStyle]="column.actionDescriptor.style"> <tb-icon [style]="column.actionDescriptor.style">
{{column.actionDescriptor.iconFunction ? column.actionDescriptor.iconFunction(entity) : column.actionDescriptor.icon}} {{column.actionDescriptor.iconFunction ? column.actionDescriptor.iconFunction(entity) : column.actionDescriptor.icon}}
</tb-icon> </tb-icon>
</button> </button>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="actions" stickyEnd> <ng-container matColumnDef="actions" stickyEnd>
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 48) + 'px', <mat-header-cell *matHeaderCellDef>
maxWidth: (cellActionDescriptors.length * 48) + 'px', <ng-container *ngIf="cellActionDescriptors.length">
width: (cellActionDescriptors.length * 48) + 'px' }"> <div class="gt-md:!hidden" style="width: 48px; min-width: 48px; max-width: 48px;">
{{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }} {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
</div>
<div class="lt-lg:!hidden"
[style.width]="(cellActionDescriptors.length * 48) + 'px'"
[style.min-width]="(cellActionDescriptors.length * 48) + 'px'"
[style.max-width]="(cellActionDescriptors.length * 48) + 'px'">
{{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
</div>
</ng-container>
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 48) + 'px', <mat-cell *matCellDef="let entity">
maxWidth: (cellActionDescriptors.length * 48) + 'px', <ng-container *ngIf="cellActionDescriptors.length">
width: (cellActionDescriptors.length * 48) + 'px' }"> <div [class.lt-lg:!hidden]="cellActionDescriptors.length !== 1" class="flex flex-row justify-end items-stretch"
<div [fxHide]="cellActionDescriptors.length !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> [style.width]="(cellActionDescriptors.length * 48) + 'px'"
<button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)" [style.min-width]="(cellActionDescriptors.length * 48) + 'px'"
*ngFor="let actionDescriptor of cellActionDescriptors" [style.max-width]="(cellActionDescriptors.length * 48) + 'px'">
matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}" <button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
matTooltipPosition="above" *ngFor="let actionDescriptor of cellActionDescriptors"
(click)="actionDescriptor.onAction($event, entity)"> matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
<tb-icon [ngStyle]="actionDescriptor.style"> matTooltipPosition="above"
{{actionDescriptor.iconFunction ? actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
</tb-icon>
</button>
</div>
<div fxHide [fxShow.lt-lg]="cellActionDescriptors.length !== 1" *ngIf="cellActionDescriptors.length">
<button mat-icon-button
(click)="$event.stopPropagation()"
[matMenuTriggerFor]="cellActionsMenu">
<mat-icon class="material-icons">more_vert</mat-icon>
</button>
<mat-menu #cellActionsMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor="let actionDescriptor of cellActionDescriptors"
[disabled]="isLoading$ | async"
[fxShow]="actionDescriptor.isEnabled(entity)"
(click)="actionDescriptor.onAction($event, entity)"> (click)="actionDescriptor.onAction($event, entity)">
<tb-icon matMenuItemIcon [ngStyle]="actionDescriptor.style"> <tb-icon [style]="actionDescriptor.style">
{{actionDescriptor.iconFunction ? actionDescriptor.iconFunction(entity) : actionDescriptor.icon}} {{actionDescriptor.iconFunction ? actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
</tb-icon> </tb-icon>
<span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
</button> </button>
</mat-menu> </div>
</div> <div [class.!hidden]="cellActionDescriptors.length === 1" class="gt-md:!hidden">
<button mat-icon-button
(click)="$event.stopPropagation()"
[matMenuTriggerFor]="cellActionsMenu">
<mat-icon class="material-icons">more_vert</mat-icon>
</button>
<mat-menu #cellActionsMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor="let actionDescriptor of cellActionDescriptors"
[disabled]="isLoading$ | async"
[class.!hidden]="!actionDescriptor.isEnabled(entity)"
(click)="actionDescriptor.onAction($event, entity)">
<tb-icon matMenuItemIcon [style]="actionDescriptor.style">
{{actionDescriptor.iconFunction ? actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
</tb-icon>
<span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
</button>
</mat-menu>
</div>
</ng-container>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<mat-header-row [ngClass]="{'mat-row-select': selectionEnabled}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row> <mat-header-row [class.mat-row-select]="selectionEnabled" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row [fxShow]="!dataSource.dataLoading" <mat-row [class.!hidden]="dataSource.dataLoading"
[ngClass]="{'mat-row-select': selectionEnabled, [class.mat-row-select]="selectionEnabled"
'mat-selected': dataSource.selection.isSelected(entity), [class.mat-selected]="dataSource.selection.isSelected(entity)"
'tb-current-entity': dataSource.isCurrentEntity(entity), [class.tb-current-entity]="dataSource.isCurrentEntity(entity)"
'tb-pointer': entitiesTableConfig.rowPointer}" [class.tb-pointer]="entitiesTableConfig.rowPointer"
*matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row> *matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row>
</table> </table>
<span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async) && !dataSource.dataLoading" <span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
fxLayoutAlign="center center" class="no-data-found flex justify-center items-center">{{ translations.noEntities | translate }}</span>
class="no-data-found">{{ translations.noEntities | translate }}</span> <span [class.!hidden]="!dataSource.dataLoading"
<span [fxShow]="dataSource.dataLoading" class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
fxLayoutAlign="center center"
class="no-data-found">{{ 'common.loading' | translate }}</span>
</div> </div>
<mat-divider *ngIf="displayPagination"></mat-divider> <mat-divider *ngIf="displayPagination"></mat-divider>
<mat-paginator *ngIf="displayPagination" <mat-paginator *ngIf="displayPagination"