@kris701/ez-ui 1.1.3 → 1.1.5

package/fesm2022/kris701-ez-ui.mjs

@@ -3300,6 +3300,7 @@ class EzUITable {
     showRefresh = false;
     showClearFilters = false;
     expandable = false;
+    clickable = false;
     values = [];
     internalValues = [];
     displayValues = signal([], /* @ts-ignore */
@@ -3322,6 +3323,7 @@ class EzUITable {
     onAddItem = new EventEmitter();
     onLoadItems = new EventEmitter();
     onRowExpanded = new EventEmitter();
+    onRowClick = new EventEmitter();
     onPresetChange = new EventEmitter();
     pageSize = signal(25, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
@@ -3400,10 +3402,20 @@ class EzUITable {
         this.applyFilter();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITable, deps: [{ token: EzUITableFilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUITable, isStandalone: true, selector: "ezui-table", inputs: { disabled: "disabled", isLoading: "isLoading", showAdd: "showAdd", showRefresh: "showRefresh", showClearFilters: "showClearFilters", expandable: "expandable", values: "values", storageKey: "storageKey", allowPresets: "allowPresets", pageSize: "pageSize" }, outputs: { onAddItem: "onAddItem", onLoadItems: "onLoadItems", onRowExpanded: "onRowExpanded", onPresetChange: "onPresetChange" }, host: { classAttribute: "w-full h-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 }], viewQueries: [{ propertyName: "presetHeader", first: true, predicate: ["presetHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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", pageSize: "pageSize" }, outputs: { onAddItem: "onAddItem", onLoadItems: "onLoadItems", onRowExpanded: "onRowExpanded", onRowClick: "onRowClick", onPresetChange: "onPresetChange" }, host: { classAttribute: "w-full h-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 }], viewQueries: [{ propertyName: "presetHeader", first: true, predicate: ["presetHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
 		<div class="ezui-table">
 			<tui-loader [inheritColor]="true" [overlay]="true" size="xxl" [loading]="isLoading()">
 				@if(values.length == 0){
+					@if(showAdd || showRefresh){
+						<div class="ezui-table-header">
+							@if(showRefresh){
+								<button tuiButton iconStart="rotate-cw" size="s" appearance="info" (click)="onLoadItems.emit()" tuiHint="Refresh the table"></button>
+							}
+							@if(showAdd){
+								<button tuiButton iconStart="plus" size="s" appearance="info" (click)="onAddItem.emit()" tuiHint="Add new item"></button>
+							}
+						</div>
+					}
 					<tui-block-status>
 						<tui-icon tuiSlot="top" icon="grid-2x2-x" />
 
@@ -3445,7 +3457,7 @@ class EzUITable {
 							@for (item of displayValues(); track page() * pageSize() + i; let i = $index){
 								@let fullIndex = page() * pageSize() + i;
 								<tbody tuiTbody>
-									<tr>
+									<tr [class]="{'rowrlickable':clickable}" (click)="onRowClick.emit(item)">
 										@if(expandable){
 											<td tuiTd class="ezui-table-expander">
 												<button
@@ -3466,7 +3478,7 @@ class EzUITable {
 
 								<tbody tuiTableExpand [expanded]="state[fullIndex] ?? false">
 									@if(state[fullIndex] ?? false){
-										<tr>
+										<tr [class]="{'rowrlickable':clickable}" (click)="onRowClick.emit(item)">
 											<ng-container [ngTemplateOutlet]="tableExpandedrow" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
 										</tr>
 									}
@@ -3489,7 +3501,7 @@ class EzUITable {
 				}
 			</tui-loader>
 		</div>
-    `, 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 .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 th[tuiTh]{align-items:center}.ezui-table .forcefullsize{width:100%!important}.ezui-table tui-block-status{padding-top:20px;padding-bottom:20px}\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],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { 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: i4$2.TuiBlockStatusComponent, selector: "tui-block-status", inputs: ["card", "size"] }, { kind: "directive", type: i4$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"] }] });
+    `, 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 .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 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}\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],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { 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: i4$2.TuiBlockStatusComponent, selector: "tui-block-status", inputs: ["card", "size"] }, { kind: "directive", type: i4$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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITable, decorators: [{
             type: Component,
@@ -3497,6 +3509,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 		<div class="ezui-table">
 			<tui-loader [inheritColor]="true" [overlay]="true" size="xxl" [loading]="isLoading()">
 				@if(values.length == 0){
+					@if(showAdd || showRefresh){
+						<div class="ezui-table-header">
+							@if(showRefresh){
+								<button tuiButton iconStart="rotate-cw" size="s" appearance="info" (click)="onLoadItems.emit()" tuiHint="Refresh the table"></button>
+							}
+							@if(showAdd){
+								<button tuiButton iconStart="plus" size="s" appearance="info" (click)="onAddItem.emit()" tuiHint="Add new item"></button>
+							}
+						</div>
+					}
 					<tui-block-status>
 						<tui-icon tuiSlot="top" icon="grid-2x2-x" />
 
@@ -3538,7 +3560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 							@for (item of displayValues(); track page() * pageSize() + i; let i = $index){
 								@let fullIndex = page() * pageSize() + i;
 								<tbody tuiTbody>
-									<tr>
+									<tr [class]="{'rowrlickable':clickable}" (click)="onRowClick.emit(item)">
 										@if(expandable){
 											<td tuiTd class="ezui-table-expander">
 												<button
@@ -3559,7 +3581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 								<tbody tuiTableExpand [expanded]="state[fullIndex] ?? false">
 									@if(state[fullIndex] ?? false){
-										<tr>
+										<tr [class]="{'rowrlickable':clickable}" (click)="onRowClick.emit(item)">
 											<ng-container [ngTemplateOutlet]="tableExpandedrow" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
 										</tr>
 									}
@@ -3584,7 +3606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 		</div>
     `, host: {
                         class: 'w-full h-full'
-                    }, 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 .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 th[tuiTh]{align-items:center}.ezui-table .forcefullsize{width:100%!important}.ezui-table tui-block-status{padding-top:20px;padding-bottom:20px}\n"] }]
+                    }, 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 .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 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}\n"] }]
         }], ctorParameters: () => [{ type: EzUITableFilterService }], propDecorators: { tableHeader: [{
                 type: ContentChild,
                 args: ['tableHeader', { static: false }]
@@ -3609,6 +3631,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 type: Input
             }], expandable: [{
                 type: Input
+            }], clickable: [{
+                type: Input
             }], values: [{
                 type: Input
             }], storageKey: [{
@@ -3621,6 +3645,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 type: Output
             }], onRowExpanded: [{
                 type: Output
+            }], onRowClick: [{
+                type: Output
             }], onPresetChange: [{
                 type: Output
             }], pageSize: [{