@shival99/z-ui 1.4.21 → 1.4.23

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, signal, inject, ElementRef, Renderer2, Directive, NgZone, Pipe, TemplateRef, viewChild, viewChildren, untracked, effect, afterNextRender } from '@angular/core';
+import { input, output, computed, ChangeDetectionStrategy, Component, inject, DestroyRef, signal, ElementRef, Renderer2, Directive, NgZone, Pipe, TemplateRef, viewChild, viewChildren, untracked, effect, 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';
@@ -23,10 +23,13 @@ import { NgScrollbar } from 'ngx-scrollbar';
 import { explicitEffect } from 'ngxtension/explicit-effect';
 import { injectDestroy } from 'ngxtension/inject-destroy';
 import { ZDropdownMenuComponent } from '@shival99/z-ui/components/z-dropdown-menu';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { ZCalendarComponent } from '@shival99/z-ui/components/z-calendar';
 import { ZSelectComponent } from '@shival99/z-ui/components/z-select';
+import { ZSwitchComponent } from '@shival99/z-ui/components/z-switch';
+import { Subject, debounceTime, distinctUntilChanged, map, pairwise, filter } from 'rxjs';
 
 const Z_DEFAULT_ROW_HEIGHT = 40;
 const Z_DEFAULT_VIRTUAL_OVERSCAN = 5;
@@ -240,6 +243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         }], propDecorators: { zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: true }] }], zRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRow", required: true }] }], zRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRowId", required: true }] }], zDropdownButtonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDropdownButtonSize", required: false }] }], zActionClick: [{ type: i0.Output, args: ["zActionClick"] }] } });
 
 class ZTableEditCellComponent {
+    _destroyRef = inject(DestroyRef);
     zRow = input.required(...(ngDevMode ? [{ debugName: "zRow" }] : []));
     zRowId = input.required(...(ngDevMode ? [{ debugName: "zRowId" }] : []));
     zRowIndex = input.required(...(ngDevMode ? [{ debugName: "zRowIndex" }] : []));
@@ -248,8 +252,11 @@ class ZTableEditCellComponent {
     zEditConfig = input(...(ngDevMode ? [undefined, { debugName: "zEditConfig" }] : []));
     zChange = output();
     _currentValue = signal(undefined, ...(ngDevMode ? [{ debugName: "_currentValue" }] : []));
+    _valueChange$ = new Subject();
     _initialized = false;
-    _debounceTimeout = null;
+    _pendingBlurValue = undefined;
+    _hasPendingBlur = false;
+    _inputControl = null;
     editConfig = computed(() => {
         const config = this.zEditConfig();
         if (!config || typeof config === 'boolean') {
@@ -320,8 +327,33 @@ class ZTableEditCellComponent {
         const oldValue = this.zValue();
         this._currentValue.set(newValue);
         this._initialized = true;
-        // Use debounce for typing controls (text, number, textarea)
-        this._emitChangeWithDebounce(oldValue, newValue);
+        const config = this.editConfig();
+        // If blurEdit is enabled, store pending value and wait for blur
+        if (config?.blurEdit) {
+            this._pendingBlurValue = newValue;
+            this._hasPendingBlur = true;
+            return;
+        }
+        // Use RxJS Subject for debounce
+        this._valueChange$.next({ oldValue, newValue });
+    }
+    onInputControlReady(control) {
+        this._inputControl = control;
+        this._setupBlurWatcher();
+    }
+    _handleInputBlur() {
+        // Only emit if blurEdit is enabled and there's a pending value
+        if (!this._hasPendingBlur)
+            return;
+        const oldValue = this.zValue();
+        this._hasPendingBlur = false;
+        this._emitChange(oldValue, this._pendingBlurValue);
+    }
+    onToggleChange(checked) {
+        const oldValue = this.zValue();
+        this._currentValue.set(checked);
+        this._initialized = true;
+        this._emitChange(oldValue, checked);
     }
     onSelectChange(newValue) {
         const oldValue = this.zValue();
@@ -346,10 +378,6 @@ class ZTableEditCellComponent {
         this._emitChange(oldValue, checked);
     }
     _emitChange(oldValue, newValue) {
-        const config = this.editConfig();
-        if (config?.onChange) {
-            config.onChange(newValue, this.zRow(), this.zColumnId());
-        }
         this.zChange.emit({
             row: this.zRow(),
             rowId: this.zRowId(),
@@ -359,29 +387,33 @@ class ZTableEditCellComponent {
             newValue,
         });
     }
-    _emitChangeWithDebounce(oldValue, newValue) {
+    ngOnInit() {
         const config = this.editConfig();
-        const debounceTime = config?.debounceTime;
-        // If no debounceTime configured, emit immediately
-        if (!debounceTime || debounceTime <= 0) {
+        const debounceMs = config?.debounceTime ?? 0;
+        // Setup debounced value change subscription
+        this._valueChange$
+            .pipe(debounceTime(debounceMs), distinctUntilChanged((a, b) => a.newValue === b.newValue), takeUntilDestroyed(this._destroyRef))
+            .subscribe(({ oldValue, newValue }) => {
             this._emitChange(oldValue, newValue);
-            return;
-        }
-        // Clear previous timeout
-        if (this._debounceTimeout) {
-            clearTimeout(this._debounceTimeout);
-        }
-        // Schedule debounced emit
-        this._debounceTimeout = setTimeout(() => {
-            this._emitChange(oldValue, newValue);
-            this._debounceTimeout = null;
-        }, debounceTime);
+        });
+        // Watch input control state for blur (for blurEdit feature)
+        // This is done via effect-like polling since control is set async
+        this._destroyRef.onDestroy(() => {
+            this._valueChange$.complete();
+        });
     }
-    ngOnDestroy() {
-        if (this._debounceTimeout) {
-            clearTimeout(this._debounceTimeout);
-            this._debounceTimeout = null;
-        }
+    // Called from template when input control is ready
+    // We watch the state signal for blur changes using toObservable
+    _setupBlurWatcher() {
+        if (!this._inputControl || !this.editConfig()?.blurEdit)
+            return;
+        // Convert state signal to observable and watch for blur transitions
+        toObservable(this._inputControl.state)
+            .pipe(map(state => state.blurred), pairwise(), filter(([prev, curr]) => !prev && curr), // Only when transitioning to blurred
+        takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this._handleInputBlur();
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableEditCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZTableEditCellComponent, isStandalone: true, selector: "z-table-edit-cell", inputs: { zRow: { classPropertyName: "zRow", publicName: "zRow", isSignal: true, isRequired: true, transformFunction: null }, zRowId: { classPropertyName: "zRowId", publicName: "zRowId", isSignal: true, isRequired: true, transformFunction: null }, zRowIndex: { classPropertyName: "zRowIndex", publicName: "zRowIndex", isSignal: true, isRequired: true, transformFunction: null }, zColumnId: { classPropertyName: "zColumnId", publicName: "zColumnId", isSignal: true, isRequired: true, transformFunction: null }, zValue: { classPropertyName: "zValue", publicName: "zValue", isSignal: true, isRequired: false, transformFunction: null }, zEditConfig: { classPropertyName: "zEditConfig", publicName: "zEditConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zChange: "zChange" }, host: { classAttribute: "z-table-edit-cell block" }, ngImport: i0, template: `
@@ -396,6 +428,16 @@ class ZTableEditCellComponent {
           />
         </div>
       }
+      @case ('toggle') {
+        <div class="flex items-center justify-center">
+          <z-switch
+            [zSize]="size()"
+            [zChecked]="booleanValue()"
+            [zDisabled]="isDisabled()"
+            (zChange)="onToggleChange($event)"
+          />
+        </div>
+      }
       @case ('number') {
         <z-input
           zType="number"
@@ -408,6 +450,7 @@ class ZTableEditCellComponent {
           [zDisabled]="isDisabled()"
           [ngModel]="numericValue()"
           (ngModelChange)="onValueChange($event)"
+          (zControl)="onInputControlReady($event)"
           class="w-full"
         />
       }
@@ -447,6 +490,7 @@ class ZTableEditCellComponent {
           [zDisabled]="isDisabled()"
           [ngModel]="stringValue()"
           (ngModelChange)="onValueChange($event)"
+          (zControl)="onInputControlReady($event)"
           class="w-full"
         />
       }
@@ -458,15 +502,16 @@ class ZTableEditCellComponent {
           [zDisabled]="isDisabled()"
           [ngModel]="stringValue()"
           (ngModelChange)="onValueChange($event)"
+          (zControl)="onInputControlReady($event)"
           class="w-full"
         />
       }
     }
-  `, isInline: true, styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest"], outputs: ["zOnSearch", "zOnChange", "zControl"], exportAs: ["zInput"] }, { kind: "component", type: ZSelectComponent, selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zControl"], exportAs: ["zSelect"] }, { kind: "component", type: ZCalendarComponent, selector: "z-calendar", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zShowTime", "zTimeFormat", "zShowHour", "zShowMinute", "zShowSecond", "zQuickSelect", "zAllowClear", "zFormat", "zMinDate", "zMaxDate", "zValueType", "zValidators", "zShowOk", "zOkText", "zShowCancel", "zCancelText", "zDisabledDate", "zScrollClose", "zDefaultTime", "zRangeDefaultTime"], outputs: ["zControl", "zChange"], exportAs: ["zCalendar"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zControl", "zCheckedChange", "zGroupValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest"], outputs: ["zOnSearch", "zOnChange", "zControl"], exportAs: ["zInput"] }, { kind: "component", type: ZSelectComponent, selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zControl"], exportAs: ["zSelect"] }, { kind: "component", type: ZCalendarComponent, selector: "z-calendar", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zShowTime", "zTimeFormat", "zShowHour", "zShowMinute", "zShowSecond", "zQuickSelect", "zAllowClear", "zFormat", "zMinDate", "zMaxDate", "zValueType", "zValidators", "zShowOk", "zOkText", "zShowCancel", "zCancelText", "zDisabledDate", "zScrollClose", "zDefaultTime", "zRangeDefaultTime"], outputs: ["zControl", "zChange"], exportAs: ["zCalendar"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zControl", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZSwitchComponent, selector: "z-switch", inputs: ["class", "zSize", "zLabel", "zText", "zDisabled", "zLoading", "zTextPosition", "zChecked"], outputs: ["zChange", "zCheckedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableEditCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'z-table-edit-cell', imports: [FormsModule, ZInputComponent, ZSelectComponent, ZCalendarComponent, ZCheckboxComponent], standalone: true, template: `
+            args: [{ selector: 'z-table-edit-cell', imports: [FormsModule, ZInputComponent, ZSelectComponent, ZCalendarComponent, ZCheckboxComponent, ZSwitchComponent], standalone: true, template: `
     @switch (editType()) {
       @case ('checkbox') {
         <div class="flex items-center justify-center">
@@ -478,6 +523,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
           />
         </div>
       }
+      @case ('toggle') {
+        <div class="flex items-center justify-center">
+          <z-switch
+            [zSize]="size()"
+            [zChecked]="booleanValue()"
+            [zDisabled]="isDisabled()"
+            (zChange)="onToggleChange($event)"
+          />
+        </div>
+      }
       @case ('number') {
         <z-input
           zType="number"
@@ -490,6 +545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
           [zDisabled]="isDisabled()"
           [ngModel]="numericValue()"
           (ngModelChange)="onValueChange($event)"
+          (zControl)="onInputControlReady($event)"
           class="w-full"
         />
       }
@@ -529,6 +585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
           [zDisabled]="isDisabled()"
           [ngModel]="stringValue()"
           (ngModelChange)="onValueChange($event)"
+          (zControl)="onInputControlReady($event)"
           class="w-full"
         />
       }
@@ -540,6 +597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
           [zDisabled]="isDisabled()"
           [ngModel]="stringValue()"
           (ngModelChange)="onValueChange($event)"
+          (zControl)="onInputControlReady($event)"
           class="w-full"
         />
       }