@kris701/ez-ui 1.5.4 → 1.5.5

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 }]