@shival99/z-ui 1.6.2 → 1.6.4

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

@@ -2,7 +2,7 @@ import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, computed, ChangeDetectionStrategy, Component, inject, DestroyRef, Injector, signal, ElementRef, Renderer2, Directive, NgZone, Pipe, TemplateRef, viewChild, viewChildren, untracked, effect, afterNextRender } from '@angular/core';
+import { input, output, computed, ChangeDetectionStrategy, Component, inject, DestroyRef, Injector, signal, effect, ElementRef, Renderer2, Directive, NgZone, Pipe, TemplateRef, viewChild, viewChildren, untracked, afterNextRender } from '@angular/core';
 import { TranslatePipe } from '@ngx-translate/core';
 import { injectVirtualizer } from '@shival99/angular-virtual';
 import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
@@ -255,10 +255,15 @@ class ZTableEditCellComponent {
     zChange = output();
     _currentValue = signal(undefined, ...(ngDevMode ? [{ debugName: "_currentValue" }] : []));
     _valueChange$ = new Subject();
-    _initialized = false;
     _pendingBlurValue = undefined;
     _hasPendingBlur = false;
     _inputControl = null;
+    constructor() {
+        effect(() => {
+            const externalValue = this.zValue();
+            this._currentValue.set(externalValue);
+        });
+    }
     editConfig = computed(() => {
         const config = this.zEditConfig();
         if (!config || typeof config === 'boolean') {
@@ -302,28 +307,22 @@ class ZTableEditCellComponent {
         if (!optionsConfig) {
             return [];
         }
-        let rawOptions;
-        if (typeof optionsConfig === 'function') {
-            rawOptions = optionsConfig(this.zRow());
-        }
-        else {
-            rawOptions = optionsConfig;
-        }
+        const rawOptions = typeof optionsConfig === 'function' ? optionsConfig(this.zRow()) : optionsConfig;
         const labelKey = config?.optionLabelKey;
         const valueKey = config?.optionValueKey;
-        if (labelKey || valueKey) {
-            return rawOptions.map((opt) => {
-                if (typeof opt !== 'object' || opt === null) {
-                    return { label: String(opt), value: opt };
-                }
-                const obj = opt;
-                return {
-                    label: String(obj[labelKey ?? 'label'] ?? ''),
-                    value: obj[valueKey ?? 'value'],
-                };
-            });
+        if (!labelKey && !valueKey) {
+            return rawOptions;
         }
-        return rawOptions;
+        return rawOptions.map((opt) => {
+            if (typeof opt !== 'object' || opt === null) {
+                return { label: String(opt), value: opt };
+            }
+            const obj = opt;
+            return {
+                label: String(obj[labelKey ?? 'label'] ?? ''),
+                value: obj[valueKey ?? 'value'],
+            };
+        });
     }, ...(ngDevMode ? [{ debugName: "selectOptions" }] : []));
     isDisabled = computed(() => {
         const config = this.editConfig();
@@ -345,12 +344,7 @@ class ZTableEditCellComponent {
         }
         return config.readonly;
     }, ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
-    value = computed(() => {
-        if (this._initialized) {
-            return this._currentValue();
-        }
-        return this.zValue();
-    }, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = computed(() => this._currentValue(), ...(ngDevMode ? [{ debugName: "value" }] : []));
     stringValue = computed(() => {
         const val = this.value();
         if (val === null || val === undefined) {
@@ -384,7 +378,6 @@ class ZTableEditCellComponent {
     onValueChange(newValue) {
         const oldValue = this.zValue();
         this._currentValue.set(newValue);
-        this._initialized = true;
         const config = this.editConfig();
         if (config?.blurEdit) {
             this._pendingBlurValue = newValue;
@@ -406,32 +399,27 @@ class ZTableEditCellComponent {
         this._emitChange(oldValue, this._pendingBlurValue);
     }
     onToggleChange(checked) {
-        const oldValue = this.zValue();
-        this._currentValue.set(checked);
-        this._initialized = true;
-        this._emitChange(oldValue, checked);
+        this._handleImmediateChange(checked);
     }
     onSelectChange(newValue) {
-        const oldValue = this.zValue();
-        let finalValue = newValue;
-        if (typeof newValue === 'object' && newValue !== null && 'value' in newValue) {
-            finalValue = newValue.value;
-        }
-        this._currentValue.set(finalValue);
-        this._initialized = true;
-        this._emitChange(oldValue, finalValue);
+        const isWrappedObject = typeof newValue === 'object' && newValue !== null && 'value' in newValue;
+        const finalValue = isWrappedObject ? newValue.value : newValue;
+        this._handleImmediateChange(finalValue);
     }
     onDateChange(newValue) {
-        const oldValue = this.zValue();
-        this._currentValue.set(newValue);
-        this._initialized = true;
-        this._emitChange(oldValue, newValue);
+        this._handleImmediateChange(newValue);
     }
     onCheckboxChange(checked) {
+        this._handleImmediateChange(checked);
+    }
+    /**
+     * Handles immediate value changes (non-debounced).
+     * Used by checkbox, toggle, select, and date controls.
+     */
+    _handleImmediateChange(newValue) {
         const oldValue = this.zValue();
-        this._currentValue.set(checked);
-        this._initialized = true;
-        this._emitChange(oldValue, checked);
+        this._currentValue.set(newValue);
+        this._emitChange(oldValue, newValue);
     }
     _emitChange(oldValue, newValue) {
         this.zChange.emit({
@@ -663,7 +651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'z-table-edit-cell block',
                     }, styles: [":host{display:block;width:100%}\n"] }]
-        }], propDecorators: { zRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRow", required: true }] }], zRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRowId", required: true }] }], zRowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRowIndex", required: true }] }], zColumnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColumnId", required: true }] }], zValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValue", required: false }] }], zEditConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEditConfig", required: false }] }], zChange: [{ type: i0.Output, args: ["zChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { zRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRow", required: true }] }], zRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRowId", required: true }] }], zRowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRowIndex", required: true }] }], zColumnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColumnId", required: true }] }], zValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValue", required: false }] }], zEditConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEditConfig", required: false }] }], zChange: [{ type: i0.Output, args: ["zChange"] }] } });
 
 class ZTableFilterComponent {
     zColumn = input.required(...(ngDevMode ? [{ debugName: "zColumn" }] : []));