@shival99/z-ui 1.3.26 → 1.3.28

package/fesm2022/shival99-z-ui-components-z-table.mjs

@@ -28,13 +28,21 @@ import { FormsModule } from '@angular/forms';
 import { ZCalendarComponent } from '@shival99/z-ui/components/z-calendar';
 import { ZSelectComponent } from '@shival99/z-ui/components/z-select';
 
-const DEFAULT_MAX_VISIBLE = 3;
-const DEFAULT_DROPDOWN_BUTTON_SIZE = 'sm';
+const Z_DEFAULT_ROW_HEIGHT = 40;
+const Z_DEFAULT_VIRTUAL_OVERSCAN = 5;
+const Z_DEFAULT_GROUP_SIZE = 1;
+const Z_DEFAULT_COLUMN_MIN_SIZE = 100;
+const Z_DEFAULT_DEBOUNCE_TIME = 150;
+const Z_SKELETON_ROW_HEIGHT = 60;
+const Z_TABLE_DEFAULT_ACTION_BUTTON_WIDTH = 32;
+const Z_TABLE_DEFAULT_MAX_VISIBLE_ACTIONS = 3;
+const Z_TABLE_DEFAULT_DROPDOWN_BUTTON_SIZE = 'sm';
+
 class ZTableActionsComponent {
     zConfig = input.required(...(ngDevMode ? [{ debugName: "zConfig" }] : []));
     zRow = input.required(...(ngDevMode ? [{ debugName: "zRow" }] : []));
     zRowId = input.required(...(ngDevMode ? [{ debugName: "zRowId" }] : []));
-    zDropdownButtonSize = input(DEFAULT_DROPDOWN_BUTTON_SIZE, ...(ngDevMode ? [{ debugName: "zDropdownButtonSize" }] : []));
+    zDropdownButtonSize = input(Z_TABLE_DEFAULT_DROPDOWN_BUTTON_SIZE, ...(ngDevMode ? [{ debugName: "zDropdownButtonSize" }] : []));
     zActionClick = output();
     allActions = computed(() => {
         const config = this.zConfig();
@@ -48,7 +56,7 @@ class ZTableActionsComponent {
     }, ...(ngDevMode ? [{ debugName: "allActions" }] : []));
     shouldShowAsButtons = computed(() => {
         const actions = this.allActions();
-        const maxVisible = this.zConfig().maxVisible ?? DEFAULT_MAX_VISIBLE;
+        const maxVisible = this.zConfig().maxVisible ?? Z_TABLE_DEFAULT_MAX_VISIBLE_ACTIONS;
         return actions.length <= maxVisible;
     }, ...(ngDevMode ? [{ debugName: "shouldShowAsButtons" }] : []));
     actionStates = computed(() => {
@@ -61,7 +69,7 @@ class ZTableActionsComponent {
             states[action.key] = {
                 visible: !isHidden,
                 disabled: isDisabled,
-                tooltip: action.tooltip ?? '',
+                tooltipState: this._getTooltipState(action.tooltip),
             };
         }
         return states;
@@ -81,6 +89,22 @@ class ZTableActionsComponent {
             };
         });
     }, ...(ngDevMode ? [{ debugName: "dropdownItems" }] : []));
+    _getTooltipState(tooltip) {
+        if (!tooltip) {
+            return { content: '', alwaysShow: false };
+        }
+        if (typeof tooltip === 'string') {
+            return { content: tooltip, alwaysShow: true };
+        }
+        return {
+            content: tooltip.content ?? '',
+            alwaysShow: tooltip.alwaysShow ?? true,
+            position: tooltip.position,
+            arrow: tooltip.arrow,
+            offset: tooltip.offset,
+            maxWidth: tooltip.maxWidth,
+        };
+    }
     _onActionClick(action, event) {
         event.stopPropagation();
         const states = this.actionStates();
@@ -117,7 +141,11 @@ class ZTableActionsComponent {
               [zSize]="action.size ?? 'sm'"
               [zDisabled]="actionStates()[action.key]?.disabled ?? false"
               [class]="action.class ?? ''"
-              [zContent]="actionStates()[action.key]?.tooltip ?? ''"
+              [zContent]="actionStates()[action.key]?.tooltipState?.content ?? ''"
+              [zAlwaysShow]="actionStates()[action.key]?.tooltipState?.alwaysShow ?? false"
+              [zArrow]="actionStates()[action.key]?.tooltipState?.arrow ?? true"
+              [zOffset]="actionStates()[action.key]?.tooltipState?.offset ?? 8"
+              [zMaxWidth]="actionStates()[action.key]?.tooltipState?.maxWidth ?? '250px'"
               (click)="_onActionClick(action, $event)"
             >
               @if (action.icon && action.label) {
@@ -169,7 +197,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
               [zSize]="action.size ?? 'sm'"
               [zDisabled]="actionStates()[action.key]?.disabled ?? false"
               [class]="action.class ?? ''"
-              [zContent]="actionStates()[action.key]?.tooltip ?? ''"
+              [zContent]="actionStates()[action.key]?.tooltipState?.content ?? ''"
+              [zAlwaysShow]="actionStates()[action.key]?.tooltipState?.alwaysShow ?? false"
+              [zArrow]="actionStates()[action.key]?.tooltipState?.arrow ?? true"
+              [zOffset]="actionStates()[action.key]?.tooltipState?.offset ?? 8"
+              [zMaxWidth]="actionStates()[action.key]?.tooltipState?.maxWidth ?? '250px'"
               (click)="_onActionClick(action, $event)"
             >
               @if (action.icon && action.label) {
@@ -581,14 +613,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     }, styles: [":host{color:var(--foreground);font-weight:450;font-style:normal;text-decoration:none;text-transform:none;letter-spacing:normal}\n"] }]
         }], propDecorators: { zColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColumn", required: true }] }], zTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTable", required: true }] }] } });
 
-const Z_DEFAULT_ROW_HEIGHT = 40;
-const Z_DEFAULT_VIRTUAL_OVERSCAN = 5;
-const Z_DEFAULT_GROUP_SIZE = 1;
-const Z_DEFAULT_COLUMN_MIN_SIZE = 100;
-const Z_DEFAULT_DEBOUNCE_TIME = 150;
-const Z_SKELETON_ROW_HEIGHT = 60;
-const Z_TABLE_DEFAULT_ACTION_BUTTON_WIDTH = 32;
-
 const filterVisibleColumns = (columns) => columns
     .filter(col => {
     const { visible } = col;