Fx flex replacements. Switch to tailwind.css.
This commit is contained in:
Igor Kulikov
parent
899820cd27
commit
b48e276f44
@ -19,7 +19,7 @@
|
||||
ngxClipboard
|
||||
[cbContent]="credential"
|
||||
(cbOnSuccess)="onCopyCredential()"
|
||||
[fxHide]="hideButton"
|
||||
[class.!hidden]="hideButton"
|
||||
[disabled]="disabled || loading">
|
||||
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
|
||||
<span>{{ buttonLabel }}</span>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<section [formGroup]="serverFormGroup" fxLayout="column">
|
||||
<section [formGroup]="serverFormGroup" class="flex flex-col">
|
||||
<mat-form-field class="mat-block">
|
||||
<mat-label translate>device.lwm2m-security-config.mode</mat-label>
|
||||
<mat-select formControlName="securityMode">
|
||||
@ -24,7 +24,7 @@
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</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-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;"
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
-->
|
||||
<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>
|
||||
<tb-toggle-select formControlName="credentialsType" appearance="fill">
|
||||
<tb-toggle-option *ngFor="let credentialsType of credentialsTypes" [value]="credentialsType">
|
||||
|
||||
@ -30,9 +30,9 @@
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
<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>
|
||||
<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"
|
||||
mat-button
|
||||
(click)="cancel()">
|
||||
@ -48,7 +48,7 @@
|
||||
</form>
|
||||
</ng-template>
|
||||
<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
|
||||
subscriptSizing="dynamic"
|
||||
formControlName="deviceProfileId"
|
||||
|
||||
@ -15,10 +15,10 @@
|
||||
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">
|
||||
<h2 translate>{{ translations.add }}</h2>
|
||||
<span fxFlex></span>
|
||||
<span class="flex-1"></span>
|
||||
<div [tb-help]="helpLinkId()"></div>
|
||||
<button mat-icon-button
|
||||
(click)="cancel()"
|
||||
@ -32,7 +32,7 @@
|
||||
<div mat-dialog-content>
|
||||
<tb-anchor #entityDetailsForm></tb-anchor>
|
||||
</div>
|
||||
<div mat-dialog-actions fxLayoutAlign="end center">
|
||||
<div mat-dialog-actions class="flex justify-end items-center">
|
||||
<button mat-button color="primary"
|
||||
type="button"
|
||||
cdkFocusInitial
|
||||
|
||||
@ -34,18 +34,18 @@
|
||||
</mat-drawer>
|
||||
<mat-drawer-content>
|
||||
<div class="mat-padding tb-entity-table tb-absolute-fill">
|
||||
<div fxLayout="column" class="tb-entity-table-content tb-outlined-border">
|
||||
<mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
|
||||
<div class="tb-entity-table-content tb-outlined-border flex flex-col">
|
||||
<mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode || !dataSource.selection.isEmpty()">
|
||||
<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>
|
||||
<tb-anchor #entityTableHeader></tb-anchor>
|
||||
<tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
|
||||
(ngModelChange)="onTimewindowChange()"
|
||||
asButton strokedButton historyOnly [forAllTimeEnabled]="entitiesTableConfig.forAllTimeEnabled"></tb-timewindow>
|
||||
</div>
|
||||
<span fxFlex></span>
|
||||
<div [fxShow]="addEnabled()">
|
||||
<span class="flex-1"></span>
|
||||
<div [class.!hidden]="!addEnabled()">
|
||||
<button mat-icon-button [disabled]="isLoading$ | async"
|
||||
*ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions"
|
||||
(click)="addEntity($event)"
|
||||
@ -56,7 +56,7 @@
|
||||
<ng-template #addActions>
|
||||
<button mat-icon-button [disabled]="isLoading$ | async"
|
||||
*ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu"
|
||||
[fxShow]="entitiesTableConfig.addActionDescriptors[0].isEnabled()"
|
||||
[class.!hidden]="!entitiesTableConfig.addActionDescriptors[0].isEnabled()"
|
||||
(click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
|
||||
matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}"
|
||||
matTooltipPosition="above">
|
||||
@ -72,7 +72,7 @@
|
||||
<mat-menu #addActionsMenu="matMenu" xPosition="before">
|
||||
<button mat-menu-item *ngFor="let actionDescriptor of entitiesTableConfig.addActionDescriptors"
|
||||
[disabled]="isLoading$ | async"
|
||||
[fxShow]="actionDescriptor.isEnabled()"
|
||||
[class.!hidden]="!actionDescriptor.isEnabled()"
|
||||
(click)="actionDescriptor.onAction($event)">
|
||||
<tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
|
||||
<span>{{ actionDescriptor.name }}</span>
|
||||
@ -82,7 +82,7 @@
|
||||
</ng-template>
|
||||
</div>
|
||||
<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 }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="actionDescriptor.onAction($event)">
|
||||
@ -101,14 +101,14 @@
|
||||
</button>
|
||||
</div>
|
||||
</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">
|
||||
<button mat-icon-button
|
||||
matTooltip="{{ translations.search | translate }}"
|
||||
matTooltipPosition="above">
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
<mat-form-field fxFlex>
|
||||
<mat-form-field class="flex-1">
|
||||
<mat-label> </mat-label>
|
||||
<input #searchInput matInput
|
||||
[formControl]="textSearch"
|
||||
@ -121,14 +121,14 @@
|
||||
</button>
|
||||
</div>
|
||||
</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">
|
||||
<span class="tb-entity-table-info">
|
||||
{{ translations.selectedEntities | translate:{count: dataSource.selection.selected.length} }}
|
||||
</span>
|
||||
<span fxFlex></span>
|
||||
<span class="flex-1"></span>
|
||||
<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 }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="actionDescriptor.onAction($event, dataSource.selection.selected)">
|
||||
@ -136,7 +136,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
<div fxFlex class="table-container">
|
||||
<div class="table-container flex-1">
|
||||
<table mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId"
|
||||
matSort [matSortActive]="pageLink.sortOrder?.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
|
||||
<ng-container matColumnDef="select" sticky>
|
||||
@ -148,23 +148,23 @@
|
||||
</mat-header-cell>
|
||||
<mat-cell *matCellDef="let entity">
|
||||
<mat-checkbox (click)="$event.stopPropagation()"
|
||||
[fxShow]="entitiesTableConfig.entitySelectionEnabled(entity)"
|
||||
[class.!hidden]="!entitiesTableConfig.entitySelectionEnabled(entity)"
|
||||
(change)="$event ? dataSource.selection.toggle(entity) : null"
|
||||
[checked]="dataSource.selection.isSelected(entity)">
|
||||
</mat-checkbox>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container [matColumnDef]="column.key" *ngFor="let column of entityColumns; trackBy: trackByColumnKey;">
|
||||
<mat-header-cell [ngClass]="{'mat-number-cell': column.isNumberColumn}"
|
||||
[fxHide.lt-lg]="column.mobileHide"
|
||||
*matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
|
||||
<mat-header-cell [class.mat-number-cell]="column.isNumberColumn"
|
||||
[class.lt-lg:!hidden]="column.mobileHide"
|
||||
*matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
|
||||
{{ column.ignoreTranslate ? column.title : (column.title | translate) }} </mat-header-cell>
|
||||
<mat-cell [ngClass]="{'mat-number-cell': column.isNumberColumn}"
|
||||
[fxHide.lt-lg]="column.mobileHide"
|
||||
<mat-cell [class.mat-number-cell]="column.isNumberColumn"
|
||||
[class.lt-lg:!hidden]="column.mobileHide"
|
||||
*matCellDef="let entity; let row = index"
|
||||
[matTooltip]="cellTooltip(entity, column, row)"
|
||||
matTooltipPosition="above"
|
||||
[ngStyle]="cellStyle(entity, column, row)">
|
||||
[style]="cellStyle(entity, column, row)">
|
||||
<ng-container [ngSwitch]="column.type">
|
||||
<ng-template [ngSwitchCase]="'link'">
|
||||
<a *ngIf="column.entityURL(entity) as detailsPageURL; else defaultContent"
|
||||
@ -183,7 +183,7 @@
|
||||
<ng-template [ngSwitchCase]="cellActionType.COPY_BUTTON">
|
||||
<tb-copy-button
|
||||
[disabled]="isLoading$ | async"
|
||||
[fxShow]="column.actionCell.isEnabled(entity)"
|
||||
[class.!hidden]="!column.actionCell.isEnabled(entity)"
|
||||
[copyText]="column.actionCell.onAction(null, entity)"
|
||||
tooltipText="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
|
||||
tooltipPosition="above"
|
||||
@ -193,11 +193,11 @@
|
||||
</ng-template>
|
||||
<ng-template ngSwitchDefault>
|
||||
<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 }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="column.actionCell.onAction($event, entity)">
|
||||
<tb-icon [ngStyle]="column.actionCell.style">
|
||||
<tb-icon [style]="column.actionCell.style">
|
||||
{{column.actionCell.icon}}
|
||||
</tb-icon>
|
||||
</button>
|
||||
@ -207,74 +207,83 @@
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<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"
|
||||
[ngStyle]="cellStyle(entity, column, row)">
|
||||
[style]="cellStyle(entity, column, row)">
|
||||
<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 }}"
|
||||
matTooltipPosition="above"
|
||||
(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}}
|
||||
</tb-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions" stickyEnd>
|
||||
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 48) + 'px',
|
||||
maxWidth: (cellActionDescriptors.length * 48) + 'px',
|
||||
width: (cellActionDescriptors.length * 48) + 'px' }">
|
||||
{{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
|
||||
<mat-header-cell *matHeaderCellDef>
|
||||
<ng-container *ngIf="cellActionDescriptors.length">
|
||||
<div class="gt-md:!hidden" style="width: 48px; min-width: 48px; max-width: 48px;">
|
||||
{{ 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-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 48) + 'px',
|
||||
maxWidth: (cellActionDescriptors.length * 48) + 'px',
|
||||
width: (cellActionDescriptors.length * 48) + 'px' }">
|
||||
<div [fxHide]="cellActionDescriptors.length !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
|
||||
<button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
|
||||
*ngFor="let actionDescriptor of cellActionDescriptors"
|
||||
matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="actionDescriptor.onAction($event, entity)">
|
||||
<tb-icon [ngStyle]="actionDescriptor.style">
|
||||
{{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)"
|
||||
<mat-cell *matCellDef="let entity">
|
||||
<ng-container *ngIf="cellActionDescriptors.length">
|
||||
<div [class.lt-lg:!hidden]="cellActionDescriptors.length !== 1" class="flex flex-row justify-end items-stretch"
|
||||
[style.width]="(cellActionDescriptors.length * 48) + 'px'"
|
||||
[style.min-width]="(cellActionDescriptors.length * 48) + 'px'"
|
||||
[style.max-width]="(cellActionDescriptors.length * 48) + 'px'">
|
||||
<button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
|
||||
*ngFor="let actionDescriptor of cellActionDescriptors"
|
||||
matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="actionDescriptor.onAction($event, entity)">
|
||||
<tb-icon matMenuItemIcon [ngStyle]="actionDescriptor.style">
|
||||
<tb-icon [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>
|
||||
</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>
|
||||
</ng-container>
|
||||
<mat-header-row [ngClass]="{'mat-row-select': selectionEnabled}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
|
||||
<mat-row [fxShow]="!dataSource.dataLoading"
|
||||
[ngClass]="{'mat-row-select': selectionEnabled,
|
||||
'mat-selected': dataSource.selection.isSelected(entity),
|
||||
'tb-current-entity': dataSource.isCurrentEntity(entity),
|
||||
'tb-pointer': entitiesTableConfig.rowPointer}"
|
||||
<mat-header-row [class.mat-row-select]="selectionEnabled" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
|
||||
<mat-row [class.!hidden]="dataSource.dataLoading"
|
||||
[class.mat-row-select]="selectionEnabled"
|
||||
[class.mat-selected]="dataSource.selection.isSelected(entity)"
|
||||
[class.tb-current-entity]="dataSource.isCurrentEntity(entity)"
|
||||
[class.tb-pointer]="entitiesTableConfig.rowPointer"
|
||||
*matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row>
|
||||
</table>
|
||||
<span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async) && !dataSource.dataLoading"
|
||||
fxLayoutAlign="center center"
|
||||
class="no-data-found">{{ translations.noEntities | translate }}</span>
|
||||
<span [fxShow]="dataSource.dataLoading"
|
||||
fxLayoutAlign="center center"
|
||||
class="no-data-found">{{ 'common.loading' | translate }}</span>
|
||||
<span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
|
||||
class="no-data-found flex justify-center items-center">{{ translations.noEntities | translate }}</span>
|
||||
<span [class.!hidden]="!dataSource.dataLoading"
|
||||
class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
|
||||
</div>
|
||||
<mat-divider *ngIf="displayPagination"></mat-divider>
|
||||
<mat-paginator *ngIf="displayPagination"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user