@kris701/ez-ui 1.5.4 → 1.5.6

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.
@@ -5,7 +5,7 @@ import { EventEmitter, Output, Input, Component, signal, ContentChild, ViewChild
5
5
  import * as i1 from '@angular/forms';
6
6
  import { FormsModule } from '@angular/forms';
7
7
  import * as i3$1 from '@taiga-ui/core';
8
- import { TuiIcon, TuiInput, TuiButton, TuiTitle, TuiLoader, TuiDialog, TuiDropdown, TuiOption, TuiGroup, TuiScrollbar, TuiSelectLike, TuiDataList, TuiTextfield, TuiCheckbox, TuiLabel, TuiLink, TuiHint, TUI_DARK_MODE, TuiRoot } from '@taiga-ui/core';
8
+ import { TuiIcon, TuiInput, TuiButton, TuiTitle, TuiLoader, TuiDialog, TuiScrollbar, TuiDropdown, TuiOption, TuiGroup, TuiSelectLike, TuiDataList, TuiTextfield, TuiCheckbox, TuiLabel, TuiLink, TuiHint, TUI_DARK_MODE, TuiRoot } from '@taiga-ui/core';
9
9
  import * as i4$1 from '@taiga-ui/kit';
10
10
  import { TuiBlock, TuiSwitch, TuiInputDate, TuiInputDateTime, TuiFiles, TuiChevron, TuiTextarea, TuiChip, TuiMultiSelect, TuiInputChip, TuiTree, TuiInputNumber, TuiPassword, TuiSelect, TuiBadge, TuiStatus, TuiDataListWrapper, TuiBadgeNotification, TuiBadgedContent, tuiCreateDefaultDayRangePeriods, TuiButtonSelect, TuiInputDateDirective, TuiCalendarRange, TuiStringifyContentPipe, TUI_CONFIRM } from '@taiga-ui/kit';
11
11
  import * as i3$3 from '@taiga-ui/addon-mobile';
@@ -410,7 +410,9 @@ class EzUIDialog {
410
410
 
411
411
  @if(showDialog()){
412
412
  <tui-loader [overlay]="true" [loading]="isLoading()">
413
- <ng-container [ngTemplateOutlet]="content"></ng-container>
413
+ <tui-scrollbar>
414
+ <ng-container [ngTemplateOutlet]="content"></ng-container>
415
+ </tui-scrollbar>
414
416
  </tui-loader>
415
417
  }
416
418
 
@@ -428,7 +430,7 @@ class EzUIDialog {
428
430
  </footer>
429
431
  }
430
432
  </ng-template>
431
- `, isInline: true, styles: [".dialog-footer{display:flex!important;flex-direction:row!important;gap:5px!important;margin-top:auto!important;margin-block-start:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiHeader, selector: "[tuiHeader]", inputs: ["tuiHeader"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "directive", type: TuiDialog, selector: "ng-template[tuiDialog]", inputs: ["tuiDialogOptions"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }] });
433
+ `, isInline: true, styles: [".dialog-footer{display:flex!important;flex-direction:row!important;gap:5px!important;margin-top:auto!important;margin-block-start:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiHeader, selector: "[tuiHeader]", inputs: ["tuiHeader"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "directive", type: TuiDialog, selector: "ng-template[tuiDialog]", inputs: ["tuiDialogOptions"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }] });
432
434
  }
433
435
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIDialog, decorators: [{
434
436
  type: Component,
@@ -439,7 +441,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
439
441
  TuiTitle,
440
442
  TuiLoader,
441
443
  TuiDialog,
442
- TuiButton
444
+ TuiButton,
445
+ TuiScrollbar
443
446
  ], template: `
444
447
  <ng-template let-id="id" [tuiDialogOptions]="{size: size, appearance: layoutService.isDesktop() ? 'taiga compact' : 'fullscreen'}" [(tuiDialog)]="showDialog">
445
448
  <header tuiHeader>
@@ -455,7 +458,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
455
458
 
456
459
  @if(showDialog()){
457
460
  <tui-loader [overlay]="true" [loading]="isLoading()">
458
- <ng-container [ngTemplateOutlet]="content"></ng-container>
461
+ <tui-scrollbar>
462
+ <ng-container [ngTemplateOutlet]="content"></ng-container>
463
+ </tui-scrollbar>
459
464
  </tui-loader>
460
465
  }
461
466
 
@@ -5051,57 +5056,57 @@ class EzUITable {
5051
5056
  this.applyFilter();
5052
5057
  }
5053
5058
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITable, deps: [{ token: EzUITableFilterService }], target: i0.ɵɵFactoryTarget.Component });
5054
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITable, isStandalone: true, selector: "ezui-table", inputs: { disabled: "disabled", isLoading: "isLoading", showAdd: "showAdd", showRefresh: "showRefresh", showClearFilters: "showClearFilters", expandable: "expandable", clickable: "clickable", values: "values", storageKey: "storageKey", allowPresets: "allowPresets", showContextMenu: "showContextMenu", contextMenuItems: "contextMenuItems", pageSize: "pageSize" }, outputs: { onAddItem: "onAddItem", onLoadItems: "onLoadItems", onRowExpanded: "onRowExpanded", onRowClick: "onRowClick", onPresetChange: "onPresetChange" }, host: { classAttribute: "w-full" }, queries: [{ propertyName: "tableHeader", first: true, predicate: ["tableHeader"], descendants: true }, { propertyName: "tableRows", first: true, predicate: ["tableRows"], descendants: true }, { propertyName: "tableExpandedrow", first: true, predicate: ["tableExpandedrow"], descendants: true }, { propertyName: "actionsHeader", first: true, predicate: ["actionsHeader"], descendants: true }], viewQueries: [{ propertyName: "presetHeader", first: true, predicate: ["presetHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
5059
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITable, isStandalone: true, selector: "ezui-table", inputs: { disabled: "disabled", isLoading: "isLoading", showAdd: "showAdd", showRefresh: "showRefresh", showClearFilters: "showClearFilters", expandable: "expandable", clickable: "clickable", values: "values", storageKey: "storageKey", allowPresets: "allowPresets", showContextMenu: "showContextMenu", contextMenuItems: "contextMenuItems", pageSize: "pageSize" }, outputs: { onAddItem: "onAddItem", onLoadItems: "onLoadItems", onRowExpanded: "onRowExpanded", onRowClick: "onRowClick", onPresetChange: "onPresetChange" }, host: { styleAttribute: "height:100%;overflow:auto;border: 2px solid var(--tui-border-normal);border-radius: var(--tui-radius-l);" }, queries: [{ propertyName: "tableHeader", first: true, predicate: ["tableHeader"], descendants: true }, { propertyName: "tableRows", first: true, predicate: ["tableRows"], descendants: true }, { propertyName: "tableExpandedrow", first: true, predicate: ["tableExpandedrow"], descendants: true }, { propertyName: "actionsHeader", first: true, predicate: ["actionsHeader"], descendants: true }], viewQueries: [{ propertyName: "presetHeader", first: true, predicate: ["presetHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
5055
5060
  <div class="ezui-table">
5056
- <tui-loader [inheritColor]="true" [overlay]="true" size="xxl" [loading]="isLoading()">
5057
- @if(values === null || values.length == 0){
5058
- @if(showAdd || showRefresh || actionsHeader){
5059
- <div class="ezui-table-header">
5060
- @if(showRefresh){
5061
- <button tuiButton iconStart="rotate-cw" size="s" appearance="info" (click)="onLoadItems.emit()" tuiHint="Refresh the table"></button>
5062
- }
5063
- @if(showAdd){
5064
- <button tuiButton iconStart="plus" size="s" appearance="info" (click)="onAddItem.emit()" tuiHint="Add new item"></button>
5065
- }
5066
- @if(actionsHeader){
5067
- <ng-container [ngTemplateOutlet]="actionsHeader"></ng-container>
5068
- }
5069
- </div>
5070
- }
5071
- @if(!isLoading()){
5072
- <tui-block-status>
5073
- <tui-icon tuiSlot="top" icon="grid-2x2-x" />
5061
+ <tui-scrollbar class="full-height-loader">
5062
+ <tui-loader class="full-height-loader" [inheritColor]="true" [overlay]="true" size="xxl" [loading]="isLoading()">
5063
+ @if(values === null || values.length == 0){
5064
+ @if(showAdd || showRefresh || actionsHeader){
5065
+ <div class="ezui-table-header">
5066
+ @if(showRefresh){
5067
+ <button tuiButton iconStart="rotate-cw" size="s" appearance="info" (click)="onLoadItems.emit()" tuiHint="Refresh the table"></button>
5068
+ }
5069
+ @if(showAdd){
5070
+ <button tuiButton iconStart="plus" size="s" appearance="info" (click)="onAddItem.emit()" tuiHint="Add new item"></button>
5071
+ }
5072
+ @if(actionsHeader){
5073
+ <ng-container [ngTemplateOutlet]="actionsHeader"></ng-container>
5074
+ }
5075
+ </div>
5076
+ }
5077
+ @if(!isLoading()){
5078
+ <tui-block-status>
5079
+ <tui-icon tuiSlot="top" icon="grid-2x2-x" />
5074
5080
 
5075
- <h3>No Data</h3>
5081
+ <h3>No Data</h3>
5076
5082
 
5077
- No data to display.
5078
- </tui-block-status>
5083
+ No data to display.
5084
+ </tui-block-status>
5085
+ }
5079
5086
  }
5080
- }
5081
- @else {
5082
- @if(showAdd || showRefresh || showClearFilters || actionsHeader || allowPresets){
5083
- <div class="ezui-table-header">
5084
- @if(showRefresh){
5085
- <button tuiButton iconStart="rotate-cw" size="s" appearance="info" (click)="onLoadItems.emit()" tuiHint="Refresh the table"></button>
5086
- }
5087
- @if(showAdd){
5088
- <button tuiButton iconStart="plus" size="s" appearance="info" (click)="onAddItem.emit()" tuiHint="Add new item"></button>
5089
- }
5090
- @if(showClearFilters){
5091
- <button tuiButton iconStart="funnel-x" size="s" appearance="info" (click)="clearFilters()" tuiHint="Clear filters"></button>
5092
- }
5093
- @if(actionsHeader){
5094
- <ng-container [ngTemplateOutlet]="actionsHeader"></ng-container>
5095
- }
5087
+ @else {
5088
+ @if(showAdd || showRefresh || showClearFilters || actionsHeader || allowPresets){
5089
+ <div class="ezui-table-header">
5090
+ @if(showRefresh){
5091
+ <button tuiButton iconStart="rotate-cw" size="s" appearance="info" (click)="onLoadItems.emit()" tuiHint="Refresh the table"></button>
5092
+ }
5093
+ @if(showAdd){
5094
+ <button tuiButton iconStart="plus" size="s" appearance="info" (click)="onAddItem.emit()" tuiHint="Add new item"></button>
5095
+ }
5096
+ @if(showClearFilters){
5097
+ <button tuiButton iconStart="funnel-x" size="s" appearance="info" (click)="clearFilters()" tuiHint="Clear filters"></button>
5098
+ }
5099
+ @if(actionsHeader){
5100
+ <ng-container [ngTemplateOutlet]="actionsHeader"></ng-container>
5101
+ }
5096
5102
 
5097
- @if(allowPresets){
5098
- <div class="seperator"></div>
5099
- <ezui-table-presets #presetHeader [storageKey]="storageKey" (onPresetChange)="onPresetChange.emit($event)">
5100
- </ezui-table-presets>
5101
- }
5102
- </div>
5103
- }
5104
- <tui-scrollbar class="forcefullsize">
5103
+ @if(allowPresets){
5104
+ <div class="seperator"></div>
5105
+ <ezui-table-presets #presetHeader [storageKey]="storageKey" (onPresetChange)="onPresetChange.emit($event)">
5106
+ </ezui-table-presets>
5107
+ }
5108
+ </div>
5109
+ }
5105
5110
  <table tuiTable class="forcefullsize">
5106
5111
  <thead>
5107
5112
  <tr>
@@ -5194,77 +5199,78 @@ class EzUITable {
5194
5199
  </tbody>
5195
5200
  }
5196
5201
  </table>
5197
- </tui-scrollbar>
5198
- @if(internalValues.length > pageSize() || pageSize() != 25){
5199
- <div class="ezui-table-footer">
5200
- <tui-table-pagination
5201
- [(size)]="pageSize"
5202
- [(page)]="page"
5203
- [total]="internalValues.length"
5204
- [items]="pageSizes"
5205
- (pageChange)="processPage()"
5206
- (sizeChange)="processPage()"
5207
- />
5208
- </div>
5202
+ <div style="flex-grow:1"></div>
5203
+ @if(internalValues.length > pageSize() || pageSize() != 25){
5204
+ <div class="ezui-table-footer">
5205
+ <tui-table-pagination
5206
+ [(size)]="pageSize"
5207
+ [(page)]="page"
5208
+ [total]="internalValues.length"
5209
+ [items]="pageSizes"
5210
+ (pageChange)="processPage()"
5211
+ (sizeChange)="processPage()"
5212
+ />
5213
+ </div>
5214
+ }
5209
5215
  }
5210
- }
5211
- </tui-loader>
5216
+ </tui-loader>
5217
+ </tui-scrollbar>
5212
5218
  </div>
5213
- `, isInline: true, styles: [".ezui-table{border:2px solid var(--tui-border-normal);border-radius:var(--tui-radius-l);display:flex;height:100%;width:100%;overflow:hidden}.ezui-table ::ng-deep tui-loader{height:100%;width:100%}.ezui-table ::ng-deep tui-loader>.t-content{display:flex;flex-direction:column}.ezui-table ::ng-deep tui-scrollbar{flex-grow:1}.ezui-table ::ng-deep tui-scrollbar>.t-content{display:flex;gap:10px;width:0px}.ezui-table .ezui-table-header{background-color:var(--tui-background-base-alt);display:flex;flex-direction:row;gap:10px;padding:5px}.ezui-table .ezui-table-header .seperator{width:2px;background-color:var(--tui-border-normal)}.ezui-table .ezui-table-footer{display:flex;margin-top:.5rem;margin-bottom:.5rem;padding-left:2rem;padding-right:2rem}.ezui-table .ezui-table-footer tui-table-pagination{flex:1}.ezui-table ::ng-deep table{border-radius:var(--tui-radius-l)}.ezui-table ::ng-deep th{background-color:var(--tui-background-base-alt)!important}.ezui-table ::ng-deep .ezui-table-expander{padding:0}.ezui-table ::ng-deep .ezui-table-expander-button{width:100%!important;height:100%;border-radius:0}.ezui-table th[tuiTh]{align-items:center}.ezui-table .forcefullsize{width:100%!important}.ezui-table tui-block-status{padding-top:20px;padding-bottom:20px}.ezui-table .rowrlickable{cursor:pointer;background-color:var(--tui-background-base)}.ezui-table .rowrlickable ::ng-deep td[tuitd]{background-color:transparent!important}.ezui-table .rowrlickable:hover{background-color:var(--tui-background-neutral-1-hover)!important}.popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$2.TuiTableDirective, selector: "table[tuiTable]", inputs: ["columns", "size", "direction", "sorter"], outputs: ["directionChange", "sorterChange", "sortChange"] }, { kind: "component", type: i3$2.TuiTableTbody, selector: "tbody[tuiTbody]", inputs: ["heading", "open"], outputs: ["openChange"] }, { kind: "component", type: i3$2.TuiTableTh, selector: "th[tuiTh]", inputs: ["minWidth", "maxWidth", "sorter", "resizable", "sticky", "requiredSort"], outputs: ["sorterChange"] }, { kind: "component", type: i3$2.TuiTableTd, selector: "th[tuiTd], td[tuiTd]" }, { kind: "component", type: i3$2.TuiTableExpand, selector: "tui-table-expand, tbody[tuiTableExpand]", inputs: ["expanded"], outputs: ["expandedChange"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownContext, selector: "[tuiDropdownContext]" }, { kind: "component", type: TuiTablePagination, selector: "tui-table-pagination", inputs: ["items", "total", "page", "size"], outputs: ["pageChange", "sizeChange", "paginationChange"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "component", type: i2$2.TuiBlockStatusComponent, selector: "tui-block-status", inputs: ["card", "size"] }, { kind: "directive", type: i2$2.TuiBlockStatusDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: EzUITablePresets, selector: "ezui-table-presets", inputs: ["storageKey"], outputs: ["onPresetChange"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"], outputs: ["tuiHintVisible"] }, { kind: "component", type: EzUIPopoutMenuSubDataList, selector: "tui-data-list[popsubdatalist]", inputs: ["itemTemplate", "popsubdatalist", "sender"], outputs: ["onItemClick"] }] });
5219
+ `, isInline: true, styles: [".full-height-loader{height:100%;width:100%}.full-height-loader ::ng-deep>.t-content{height:100%;display:flex;flex-direction:column}.ezui-table{display:flex;height:100%}.ezui-table .ezui-table-header{border-top-left-radius:var(--tui-radius-l);border-top-right-radius:var(--tui-radius-l);background-color:var(--tui-background-base-alt);display:flex;flex-direction:row;gap:10px;padding:5px}.ezui-table .ezui-table-header .seperator{width:2px;background-color:var(--tui-border-normal)}.ezui-table .ezui-table-footer{border-bottom-left-radius:var(--tui-radius-l);border-bottom-right-radius:var(--tui-radius-l);background-color:var(--tui-background-base-alt);display:flex;padding:.5rem 2rem}.ezui-table .ezui-table-footer tui-table-pagination{flex:1}.ezui-table ::ng-deep th{background-color:var(--tui-background-base-alt)!important}.ezui-table ::ng-deep .ezui-table-expander{padding:0}.ezui-table ::ng-deep .ezui-table-expander-button{width:100%!important;height:100%;border-radius:0}.ezui-table th[tuiTh]{align-items:center}.ezui-table .forcefullsize{width:100%!important}.ezui-table tui-block-status{padding-top:20px;padding-bottom:20px}.ezui-table .rowrlickable{cursor:pointer;background-color:var(--tui-background-base)}.ezui-table .rowrlickable ::ng-deep td[tuitd]{background-color:transparent!important}.ezui-table .rowrlickable:hover{background-color:var(--tui-background-neutral-1-hover)!important}.popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$2.TuiTableDirective, selector: "table[tuiTable]", inputs: ["columns", "size", "direction", "sorter"], outputs: ["directionChange", "sorterChange", "sortChange"] }, { kind: "component", type: i3$2.TuiTableTbody, selector: "tbody[tuiTbody]", inputs: ["heading", "open"], outputs: ["openChange"] }, { kind: "component", type: i3$2.TuiTableTh, selector: "th[tuiTh]", inputs: ["minWidth", "maxWidth", "sorter", "resizable", "sticky", "requiredSort"], outputs: ["sorterChange"] }, { kind: "component", type: i3$2.TuiTableTd, selector: "th[tuiTd], td[tuiTd]" }, { kind: "component", type: i3$2.TuiTableExpand, selector: "tui-table-expand, tbody[tuiTableExpand]", inputs: ["expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownContext, selector: "[tuiDropdownContext]" }, { kind: "component", type: TuiTablePagination, selector: "tui-table-pagination", inputs: ["items", "total", "page", "size"], outputs: ["pageChange", "sizeChange", "paginationChange"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "component", type: i2$2.TuiBlockStatusComponent, selector: "tui-block-status", inputs: ["card", "size"] }, { kind: "directive", type: i2$2.TuiBlockStatusDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: EzUITablePresets, selector: "ezui-table-presets", inputs: ["storageKey"], outputs: ["onPresetChange"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"], outputs: ["tuiHintVisible"] }, { kind: "component", type: EzUIPopoutMenuSubDataList, selector: "tui-data-list[popsubdatalist]", inputs: ["itemTemplate", "popsubdatalist", "sender"], outputs: ["onItemClick"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }] });
5214
5220
  }
5215
5221
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITable, decorators: [{
5216
5222
  type: Component,
5217
- args: [{ selector: 'ezui-table', imports: [FormsModule, CommonModule, TuiTable, TuiScrollbar, TuiButton, TuiChevron, TuiDropdown, TuiDataListWrapper, TuiTablePagination, TuiLoader, TuiBlockStatus, TuiIcon, TuiInput, EzUITablePresets, TuiHint, EzUIPopoutMenuSubDataList], template: `
5223
+ args: [{ selector: 'ezui-table', imports: [FormsModule, CommonModule, TuiTable, TuiButton, TuiChevron, TuiDropdown, TuiDataListWrapper, TuiTablePagination, TuiLoader, TuiBlockStatus, TuiIcon, TuiInput, EzUITablePresets, TuiHint, EzUIPopoutMenuSubDataList, TuiScrollbar], template: `
5218
5224
  <div class="ezui-table">
5219
- <tui-loader [inheritColor]="true" [overlay]="true" size="xxl" [loading]="isLoading()">
5220
- @if(values === null || values.length == 0){
5221
- @if(showAdd || showRefresh || actionsHeader){
5222
- <div class="ezui-table-header">
5223
- @if(showRefresh){
5224
- <button tuiButton iconStart="rotate-cw" size="s" appearance="info" (click)="onLoadItems.emit()" tuiHint="Refresh the table"></button>
5225
- }
5226
- @if(showAdd){
5227
- <button tuiButton iconStart="plus" size="s" appearance="info" (click)="onAddItem.emit()" tuiHint="Add new item"></button>
5228
- }
5229
- @if(actionsHeader){
5230
- <ng-container [ngTemplateOutlet]="actionsHeader"></ng-container>
5231
- }
5232
- </div>
5233
- }
5234
- @if(!isLoading()){
5235
- <tui-block-status>
5236
- <tui-icon tuiSlot="top" icon="grid-2x2-x" />
5225
+ <tui-scrollbar class="full-height-loader">
5226
+ <tui-loader class="full-height-loader" [inheritColor]="true" [overlay]="true" size="xxl" [loading]="isLoading()">
5227
+ @if(values === null || values.length == 0){
5228
+ @if(showAdd || showRefresh || actionsHeader){
5229
+ <div class="ezui-table-header">
5230
+ @if(showRefresh){
5231
+ <button tuiButton iconStart="rotate-cw" size="s" appearance="info" (click)="onLoadItems.emit()" tuiHint="Refresh the table"></button>
5232
+ }
5233
+ @if(showAdd){
5234
+ <button tuiButton iconStart="plus" size="s" appearance="info" (click)="onAddItem.emit()" tuiHint="Add new item"></button>
5235
+ }
5236
+ @if(actionsHeader){
5237
+ <ng-container [ngTemplateOutlet]="actionsHeader"></ng-container>
5238
+ }
5239
+ </div>
5240
+ }
5241
+ @if(!isLoading()){
5242
+ <tui-block-status>
5243
+ <tui-icon tuiSlot="top" icon="grid-2x2-x" />
5237
5244
 
5238
- <h3>No Data</h3>
5245
+ <h3>No Data</h3>
5239
5246
 
5240
- No data to display.
5241
- </tui-block-status>
5247
+ No data to display.
5248
+ </tui-block-status>
5249
+ }
5242
5250
  }
5243
- }
5244
- @else {
5245
- @if(showAdd || showRefresh || showClearFilters || actionsHeader || allowPresets){
5246
- <div class="ezui-table-header">
5247
- @if(showRefresh){
5248
- <button tuiButton iconStart="rotate-cw" size="s" appearance="info" (click)="onLoadItems.emit()" tuiHint="Refresh the table"></button>
5249
- }
5250
- @if(showAdd){
5251
- <button tuiButton iconStart="plus" size="s" appearance="info" (click)="onAddItem.emit()" tuiHint="Add new item"></button>
5252
- }
5253
- @if(showClearFilters){
5254
- <button tuiButton iconStart="funnel-x" size="s" appearance="info" (click)="clearFilters()" tuiHint="Clear filters"></button>
5255
- }
5256
- @if(actionsHeader){
5257
- <ng-container [ngTemplateOutlet]="actionsHeader"></ng-container>
5258
- }
5251
+ @else {
5252
+ @if(showAdd || showRefresh || showClearFilters || actionsHeader || allowPresets){
5253
+ <div class="ezui-table-header">
5254
+ @if(showRefresh){
5255
+ <button tuiButton iconStart="rotate-cw" size="s" appearance="info" (click)="onLoadItems.emit()" tuiHint="Refresh the table"></button>
5256
+ }
5257
+ @if(showAdd){
5258
+ <button tuiButton iconStart="plus" size="s" appearance="info" (click)="onAddItem.emit()" tuiHint="Add new item"></button>
5259
+ }
5260
+ @if(showClearFilters){
5261
+ <button tuiButton iconStart="funnel-x" size="s" appearance="info" (click)="clearFilters()" tuiHint="Clear filters"></button>
5262
+ }
5263
+ @if(actionsHeader){
5264
+ <ng-container [ngTemplateOutlet]="actionsHeader"></ng-container>
5265
+ }
5259
5266
 
5260
- @if(allowPresets){
5261
- <div class="seperator"></div>
5262
- <ezui-table-presets #presetHeader [storageKey]="storageKey" (onPresetChange)="onPresetChange.emit($event)">
5263
- </ezui-table-presets>
5264
- }
5265
- </div>
5266
- }
5267
- <tui-scrollbar class="forcefullsize">
5267
+ @if(allowPresets){
5268
+ <div class="seperator"></div>
5269
+ <ezui-table-presets #presetHeader [storageKey]="storageKey" (onPresetChange)="onPresetChange.emit($event)">
5270
+ </ezui-table-presets>
5271
+ }
5272
+ </div>
5273
+ }
5268
5274
  <table tuiTable class="forcefullsize">
5269
5275
  <thead>
5270
5276
  <tr>
@@ -5357,25 +5363,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
5357
5363
  </tbody>
5358
5364
  }
5359
5365
  </table>
5360
- </tui-scrollbar>
5361
- @if(internalValues.length > pageSize() || pageSize() != 25){
5362
- <div class="ezui-table-footer">
5363
- <tui-table-pagination
5364
- [(size)]="pageSize"
5365
- [(page)]="page"
5366
- [total]="internalValues.length"
5367
- [items]="pageSizes"
5368
- (pageChange)="processPage()"
5369
- (sizeChange)="processPage()"
5370
- />
5371
- </div>
5366
+ <div style="flex-grow:1"></div>
5367
+ @if(internalValues.length > pageSize() || pageSize() != 25){
5368
+ <div class="ezui-table-footer">
5369
+ <tui-table-pagination
5370
+ [(size)]="pageSize"
5371
+ [(page)]="page"
5372
+ [total]="internalValues.length"
5373
+ [items]="pageSizes"
5374
+ (pageChange)="processPage()"
5375
+ (sizeChange)="processPage()"
5376
+ />
5377
+ </div>
5378
+ }
5372
5379
  }
5373
- }
5374
- </tui-loader>
5380
+ </tui-loader>
5381
+ </tui-scrollbar>
5375
5382
  </div>
5376
5383
  `, host: {
5377
- class: 'w-full'
5378
- }, styles: [".ezui-table{border:2px solid var(--tui-border-normal);border-radius:var(--tui-radius-l);display:flex;height:100%;width:100%;overflow:hidden}.ezui-table ::ng-deep tui-loader{height:100%;width:100%}.ezui-table ::ng-deep tui-loader>.t-content{display:flex;flex-direction:column}.ezui-table ::ng-deep tui-scrollbar{flex-grow:1}.ezui-table ::ng-deep tui-scrollbar>.t-content{display:flex;gap:10px;width:0px}.ezui-table .ezui-table-header{background-color:var(--tui-background-base-alt);display:flex;flex-direction:row;gap:10px;padding:5px}.ezui-table .ezui-table-header .seperator{width:2px;background-color:var(--tui-border-normal)}.ezui-table .ezui-table-footer{display:flex;margin-top:.5rem;margin-bottom:.5rem;padding-left:2rem;padding-right:2rem}.ezui-table .ezui-table-footer tui-table-pagination{flex:1}.ezui-table ::ng-deep table{border-radius:var(--tui-radius-l)}.ezui-table ::ng-deep th{background-color:var(--tui-background-base-alt)!important}.ezui-table ::ng-deep .ezui-table-expander{padding:0}.ezui-table ::ng-deep .ezui-table-expander-button{width:100%!important;height:100%;border-radius:0}.ezui-table th[tuiTh]{align-items:center}.ezui-table .forcefullsize{width:100%!important}.ezui-table tui-block-status{padding-top:20px;padding-bottom:20px}.ezui-table .rowrlickable{cursor:pointer;background-color:var(--tui-background-base)}.ezui-table .rowrlickable ::ng-deep td[tuitd]{background-color:transparent!important}.ezui-table .rowrlickable:hover{background-color:var(--tui-background-neutral-1-hover)!important}.popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}\n"] }]
5384
+ style: 'height:100%;overflow:auto;border: 2px solid var(--tui-border-normal);border-radius: var(--tui-radius-l);'
5385
+ }, styles: [".full-height-loader{height:100%;width:100%}.full-height-loader ::ng-deep>.t-content{height:100%;display:flex;flex-direction:column}.ezui-table{display:flex;height:100%}.ezui-table .ezui-table-header{border-top-left-radius:var(--tui-radius-l);border-top-right-radius:var(--tui-radius-l);background-color:var(--tui-background-base-alt);display:flex;flex-direction:row;gap:10px;padding:5px}.ezui-table .ezui-table-header .seperator{width:2px;background-color:var(--tui-border-normal)}.ezui-table .ezui-table-footer{border-bottom-left-radius:var(--tui-radius-l);border-bottom-right-radius:var(--tui-radius-l);background-color:var(--tui-background-base-alt);display:flex;padding:.5rem 2rem}.ezui-table .ezui-table-footer tui-table-pagination{flex:1}.ezui-table ::ng-deep th{background-color:var(--tui-background-base-alt)!important}.ezui-table ::ng-deep .ezui-table-expander{padding:0}.ezui-table ::ng-deep .ezui-table-expander-button{width:100%!important;height:100%;border-radius:0}.ezui-table th[tuiTh]{align-items:center}.ezui-table .forcefullsize{width:100%!important}.ezui-table tui-block-status{padding-top:20px;padding-bottom:20px}.ezui-table .rowrlickable{cursor:pointer;background-color:var(--tui-background-base)}.ezui-table .rowrlickable ::ng-deep td[tuitd]{background-color:transparent!important}.ezui-table .rowrlickable:hover{background-color:var(--tui-background-neutral-1-hover)!important}.popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}\n"] }]
5379
5386
  }], ctorParameters: () => [{ type: EzUITableFilterService }], propDecorators: { tableHeader: [{
5380
5387
  type: ContentChild,
5381
5388
  args: ['tableHeader', { static: false }]
@@ -7069,11 +7076,14 @@ class BaseListInterface {
7069
7076
  this.http = http;
7070
7077
  }
7071
7078
  async Init() {
7072
- if (!this.isLoaded && !this.isLoading && this.canGetAll) {
7079
+ if (!this.isLoaded)
7073
7080
  await this.Load();
7074
- }
7075
7081
  }
7076
7082
  async Load() {
7083
+ if (this.isLoading) {
7084
+ await this.waitForValue(() => this.isLoaded === true);
7085
+ return;
7086
+ }
7077
7087
  if (!this.isLoading && this.canGetAll) {
7078
7088
  this.isLoaded = false;
7079
7089
  this.isLoading = true;