@shival99/z-ui 1.6.1 → 1.6.3

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

@@ -255,7 +255,7 @@ class ZTableEditCellComponent {
     zChange = output();
     _currentValue = signal(undefined, ...(ngDevMode ? [{ debugName: "_currentValue" }] : []));
     _valueChange$ = new Subject();
-    _initialized = false;
+    _lastExternalValue = undefined;
     _pendingBlurValue = undefined;
     _hasPendingBlur = false;
     _inputControl = null;
@@ -283,18 +283,41 @@ class ZTableEditCellComponent {
     }, ...(ngDevMode ? [{ debugName: "size" }] : []));
     placeholder = computed(() => {
         const config = this.editConfig();
-        return config?.placeholder ?? '';
+        const placeholderConfig = config?.placeholder;
+        if (!placeholderConfig) {
+            return '';
+        }
+        if (typeof placeholderConfig === 'function') {
+            return placeholderConfig(this.zRow());
+        }
+        return placeholderConfig;
     }, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    allowClear = computed(() => {
+        const config = this.editConfig();
+        return config?.allowClear ?? false;
+    }, ...(ngDevMode ? [{ debugName: "allowClear" }] : []));
     selectOptions = computed(() => {
         const config = this.editConfig();
         const optionsConfig = config?.options;
         if (!optionsConfig) {
             return [];
         }
-        if (typeof optionsConfig === 'function') {
-            return optionsConfig(this.zRow());
+        const rawOptions = typeof optionsConfig === 'function' ? optionsConfig(this.zRow()) : optionsConfig;
+        const labelKey = config?.optionLabelKey;
+        const valueKey = config?.optionValueKey;
+        if (!labelKey && !valueKey) {
+            return rawOptions;
         }
-        return optionsConfig;
+        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();
@@ -317,10 +340,13 @@ class ZTableEditCellComponent {
         return config.readonly;
     }, ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
     value = computed(() => {
-        if (this._initialized) {
-            return this._currentValue();
+        const externalValue = this.zValue();
+        if (externalValue !== this._lastExternalValue) {
+            this._lastExternalValue = externalValue;
+            this._currentValue.set(externalValue);
+            return externalValue;
         }
-        return this.zValue();
+        return this._currentValue();
     }, ...(ngDevMode ? [{ debugName: "value" }] : []));
     stringValue = computed(() => {
         const val = this.value();
@@ -355,7 +381,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;
@@ -377,32 +402,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({
@@ -482,6 +502,7 @@ class ZTableEditCellComponent {
           [zWrap]="false"
           [zScrollClose]="true"
           [zOptions]="selectOptions()"
+          [zAllowClear]="allowClear()"
           [zDisabled]="isDisabled() || isReadonly()"
           [ngModel]="value()"
           [zPlaceholder]="placeholder()"
@@ -580,6 +601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
           [zWrap]="false"
           [zScrollClose]="true"
           [zOptions]="selectOptions()"
+          [zAllowClear]="allowClear()"
           [zDisabled]="isDisabled() || isReadonly()"
           [ngModel]="value()"
           [zPlaceholder]="placeholder()"