@haloduck/ui 2.0.23 → 2.0.25

package/fesm2022/haloduck-ui.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, inject, ChangeDetectorRef, forwardRef, ViewChild, signal, EventEmitter, Output, ViewContainerRef, NgZone, isDevMode, DestroyRef, ChangeDetectionStrategy, HostBinding, Directive } from '@angular/core';
+import { Injectable, Input, Component, inject, ChangeDetectorRef, forwardRef, ViewChild, signal, EventEmitter, Output, ViewContainerRef, NgZone, isDevMode, DestroyRef, ElementRef, ViewChildren, ChangeDetectionStrategy, HostBinding, Directive } from '@angular/core';
 import { signIn, confirmSignIn, resetPassword, confirmResetPassword } from 'aws-amplify/auth';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BehaviorSubject, zip, Subject, takeUntil, tap, combineLatest, switchMap, of, Observable, distinctUntilChanged, map, take } from 'rxjs';
+import { BehaviorSubject, zip, Subject, takeUntil, tap, combineLatest, switchMap, of, Observable, distinctUntilChanged, map, take, firstValueFrom } from 'rxjs';
 import { ulid } from 'ulid';
 import * as i1 from '@angular/common';
 import { CommonModule, DecimalPipe, DatePipe } from '@angular/common';
@@ -2908,8 +2908,11 @@ class TableComponent {
     onRowClick = new EventEmitter();
     onRowDblClick = new EventEmitter();
     loadMoreRow;
+    dataRows;
     scrollContainer;
     intersectionObserver;
+    scrollListenerTarget;
+    didScrollSinceLastLoad = false;
     getColumnValue(row, column) {
         const value = this.getColumnValueRaw(row, column);
         if (column.customRenderFn) {
@@ -3003,31 +3006,39 @@ class TableComponent {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
             this.setupIntersectionObserver();
-            this.checkAndAutoLoadIfNoScroll();
         });
+        const container = this.scrollContainer?.nativeElement;
+        this.scrollListenerTarget = container || (typeof window !== 'undefined' ? window : undefined);
+        if (this.scrollListenerTarget) {
+            this.scrollListenerTarget.addEventListener('scroll', this.onScroll, { passive: true });
+        }
     }
     ngOnDestroy() {
         this.cleanupIntersectionObserver();
+        if (this.scrollListenerTarget) {
+            this.scrollListenerTarget.removeEventListener('scroll', this.onScroll);
+            this.scrollListenerTarget = undefined;
+        }
     }
     setupIntersectionObserver() {
         if (!this.useLoadMore)
             return;
         this.cleanupIntersectionObserver();
         const rootElement = this.scrollContainer?.nativeElement || null;
-        const target = this.loadMoreRow?.nativeElement;
-        if (!rootElement || !target)
+        // 우선순위: 마지막 데이터 행 -> 로드모어 행
+        const lastRowEl = this.dataRows?.last?.nativeElement;
+        const target = lastRowEl || this.loadMoreRow?.nativeElement;
+        if (!target)
             return;
+        // 새로운 옵저버 생성 시 초기 교차 무시 플래그 초기화
+        this.hasObservedOnce = false;
+        // 스크롤 발생 전에는 자동 로드를 막음
+        this.didScrollSinceLastLoad = false;
         this.ngZone.runOutsideAngular(() => {
-            this.intersectionObserver = new IntersectionObserver((entries) => {
-                for (const entry of entries) {
-                    if (entry.isIntersecting) {
-                        this.ngZone.run(() => this.onLoadMoreClicked());
-                    }
-                }
-            }, {
-                root: rootElement,
+            this.intersectionObserver = new IntersectionObserver(this.onIntersection, {
+                root: rootElement || undefined,
                 rootMargin: '0px 0px 200px 0px',
-                threshold: 0.1,
+                threshold: 0.5,
             });
             this.intersectionObserver.observe(target);
         });
@@ -3038,33 +3049,42 @@ class TableComponent {
             this.intersectionObserver = undefined;
         }
     }
-    checkAndAutoLoadIfNoScroll() {
-        if (!this.useLoadMore)
-            return;
-        const container = this.scrollContainer?.nativeElement;
-        if (!container)
-            return;
-        this.ngZone.runOutsideAngular(() => {
-            requestAnimationFrame(() => {
-                const hasNoScroll = container.scrollHeight <= container.clientHeight;
-                if (!hasNoScroll)
+    hasObservedOnce = false;
+    onIntersection = (entries) => {
+        for (const entry of entries) {
+            if (!entry.isIntersecting)
+                continue;
+            if (!this.hasObservedOnce) {
+                // 첫 교차는 무시: 새 옵저버가 생성될 때 현재 화면에 이미 보이는 경우를 방지
+                this.hasObservedOnce = true;
+                continue;
+            }
+            // 마지막 키가 존재, 로딩 아님, 그리고 실제 스크롤이 있었을 때만 로드
+            Promise.all([
+                firstValueFrom(this.lastEvaluatedKey.pipe(take(1))),
+                firstValueFrom(this.isLoading.pipe(take(1))),
+            ]).then(([lastKey, isLoading]) => {
+                if (!(lastKey && !isLoading && this.didScrollSinceLastLoad)) {
                     return;
-                combineLatest([this.lastEvaluatedKey.pipe(take(1)), this.isLoading.pipe(take(1))])
-                    .subscribe(([lastKey, isLoading]) => {
-                    if (lastKey && !isLoading) {
-                        this.ngZone.run(() => this.onLoadMoreClicked());
-                    }
-                });
+                }
+                // 중복 호출 방지: 즉시 관찰 해제 후 로드 트리거
+                this.cleanupIntersectionObserver();
+                this.didScrollSinceLastLoad = false;
+                this.ngZone.run(() => this.onLoadMoreClicked());
             });
-        });
-    }
+        }
+    };
+    onScroll = () => {
+        this.didScrollSinceLastLoad = true;
+    };
+    // Note: 무스크롤 자동 로드는 연속 로딩을 유발할 수 있어 제거
     constructor() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TableComponent, isStandalone: true, selector: "haloduck-table", inputs: { tableLayout: "tableLayout", showHeader: "showHeader", useLoadMore: "useLoadMore", columns: "columns", rows: "rows", isLoading: "isLoading", isPaging: "isPaging", sort: "sort", expandedTemplate: "expandedTemplate", customTemplates: "customTemplates", lastEvaluatedKey: "lastEvaluatedKey" }, outputs: { onSortChange: "onSortChange", onLoadMore: "onLoadMore", onRowClick: "onRowClick", onRowDblClick: "onRowDblClick" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "loadMoreRow", first: true, predicate: ["loadMoreRow"], descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }], ngImport: i0, template: "<div #scrollContainer class=\"w-full h-full shadow border border-light-inactive dark:border-dark-inactive rounded-lg overflow-auto\">\n  <table class=\"w-full h-full\"\n         [ngClass]=\"{\n      'table-fixed': tableLayout === 'fixed',\n      'table-auto': tableLayout === 'auto',\n    }\">\n    <colgroup>\n      @for (column of columns; track column.key) {\n      @if (!column.hidden || !(column.hidden | async)) {\n      <col class=\"{{ column.width || '' }}\" />\n      }\n      }\n    </colgroup>\n    @if (showHeader) {\n    <thead class=\"bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-tl-lg rounded-tr-lg\">\n      <tr>\n        @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n        <th scope=\"col\"\n            class=\"{{ column.align || '' }} py-3.5 pl-4 pr-3 text-sm font-semibold text-light-on-background dark:text-dark-on-background whitespace-nowrap\">\n          <span class=\"group inline-flex\">\n            {{ column.label }}\n            @if (column.sortable) {\n            @switch (getSortDirection(column.sort?.field || column.key) | async)\n            {\n            @case('desc') {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                  class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            @case('asc') {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'desc')\"\n                  class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            @default {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                  class=\"invisible ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive group-hover:visible group-focus:visible\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            }\n            }\n          </span>\n        </th>\n        }\n        }\n      </tr>\n    </thead>\n    }\n    <tbody class=\"overflow-scroll\">\n      @for (row of rows | async; track row['id']; let lastRow = $last) {\n      <tr class=\"border-t border-light-inactive dark:border-dark-inactive {{ row.bgColor || '' }}\"\n          (click)=\"onRowClicked(row)\"\n          (dblclick)=\"onRowDblClicked(row)\"\n          [ngClass]=\"{'rounded-b-lg': lastRow && (lastEvaluatedKey | async) === null, 'even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background': !row.bgColor }\"\n          [ngStyle]=\"{ 'background-color': row.bgColor || '' }\">\n        @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n        <td class=\"relative overflow-visible {{ column.align || '' }} whitespace-nowrap px-3 text-sm text-light-on-background dark:text-dark-on-background\"\n            [ngClass]=\"{\n                                    'first:rounded-bl-lg last:rounded-br-lg': lastRow && (lastEvaluatedKey | async) === null,\n                                    'text-wrap': row.isExpanded && column.type !== 'custom',\n                                    'overflow-x-hidden text-ellipsis' : !row.isExpanded && column.type !== 'custom',\n                                    'py-2': column.type === 'custom',\n                                    'py-4': column.type !== 'custom'\n                                    }\">\n          @if (column.type === 'custom') {\n          @if (column.customRenderTemplate) {\n          <ng-container [ngTemplateOutlet]=\"customTemplates[column.customRenderTemplate]\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"></ng-container>\n          }\n          }\n          @else {\n          {{ getColumnValue(row, column) | async }}\n          }\n        </td>\n        }\n        }\n      </tr>\n\n      @if (row.isExpanded && expandedTemplate) {\n      <tr>\n        <td [attr.colspan]=\"columns.length\">\n        </td>\n      </tr>\n      <tr class=\"even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background\">\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 pb-4 text-sm text-center\">\n          <ng-container [ngTemplateOutlet]=\"expandedTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n        </td>\n      </tr>\n      }\n\n      @if (lastRow && (lastEvaluatedKey | async) && !(isLoading | async) && useLoadMore) {\n      <tr #loadMoreRow class=\"border-t border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\">\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n          <div (click)=\"onLoadMoreClicked()\"\n               class=\"cursor-pointer\">\n            {{ 'haloduck.ui.table.Load More...' | transloco }}\n          </div>\n        </td>\n      </tr>\n      }\n\n      } @empty {\n      @if(!(isLoading | async)) {\n      <tr>\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n          {{ 'haloduck.ui.table.No data available.' | transloco }}\n        </td>\n      </tr>\n      }\n      }\n\n      @if(isLoading | async) {\n      @for ( i of [0,1,2,3,4]; track i; let lastRow = $last)\n      {\n      <tr class=\"bg-light-background dark:bg-dark-background border-t border-light-inactive/50 dark:border-dark-inactive/50\">\n        @for (column of columns; track column.key) {\n        <td class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm\"\n            [ngClass]=\"{'first:rounded-bl-lg last:rounded-br-lg': lastRow}\">\n          <div class=\"h-4 bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-md animate-pulse\"></div>\n        </td>\n        }\n      </tr>\n      }\n      }\n    </tbody>\n  </table>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TableComponent, isStandalone: true, selector: "haloduck-table", inputs: { tableLayout: "tableLayout", showHeader: "showHeader", useLoadMore: "useLoadMore", columns: "columns", rows: "rows", isLoading: "isLoading", isPaging: "isPaging", sort: "sort", expandedTemplate: "expandedTemplate", customTemplates: "customTemplates", lastEvaluatedKey: "lastEvaluatedKey" }, outputs: { onSortChange: "onSortChange", onLoadMore: "onLoadMore", onRowClick: "onRowClick", onRowDblClick: "onRowDblClick" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "loadMoreRow", first: true, predicate: ["loadMoreRow"], descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "dataRows", predicate: ["dataRow"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div #scrollContainer class=\"w-full h-full shadow border border-light-inactive dark:border-dark-inactive rounded-lg overflow-auto\">\n  <table class=\"w-full h-full\"\n         [ngClass]=\"{\n      'table-fixed': tableLayout === 'fixed',\n      'table-auto': tableLayout === 'auto',\n    }\">\n    <colgroup>\n      @for (column of columns; track column.key) {\n      @if (!column.hidden || !(column.hidden | async)) {\n      <col class=\"{{ column.width || '' }}\" />\n      }\n      }\n    </colgroup>\n    @if (showHeader) {\n    <thead class=\"bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-tl-lg rounded-tr-lg\">\n      <tr>\n        @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n        <th scope=\"col\"\n            class=\"{{ column.align || '' }} py-3.5 pl-4 pr-3 text-sm font-semibold text-light-on-background dark:text-dark-on-background whitespace-nowrap\">\n          <span class=\"group inline-flex\">\n            {{ column.label }}\n            @if (column.sortable) {\n            @switch (getSortDirection(column.sort?.field || column.key) | async)\n            {\n            @case('desc') {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                  class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            @case('asc') {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'desc')\"\n                  class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            @default {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                  class=\"invisible ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive group-hover:visible group-focus:visible\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            }\n            }\n          </span>\n        </th>\n        }\n        }\n      </tr>\n    </thead>\n    }\n    <tbody class=\"overflow-scroll\">\n      @for (row of rows | async; track row['id']; let lastRow = $last) {\n      <tr #dataRow class=\"border-t border-light-inactive dark:border-dark-inactive {{ row.bgColor || '' }}\"\n          (click)=\"onRowClicked(row)\"\n          (dblclick)=\"onRowDblClicked(row)\"\n          [ngClass]=\"{'rounded-b-lg': lastRow && (lastEvaluatedKey | async) === null, 'even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background': !row.bgColor }\"\n          [ngStyle]=\"{ 'background-color': row.bgColor || '' }\">\n        @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n        <td class=\"relative overflow-visible {{ column.align || '' }} whitespace-nowrap px-3 text-sm text-light-on-background dark:text-dark-on-background\"\n            [ngClass]=\"{\n                                    'first:rounded-bl-lg last:rounded-br-lg': lastRow && (lastEvaluatedKey | async) === null,\n                                    'text-wrap': row.isExpanded && column.type !== 'custom',\n                                    'overflow-x-hidden text-ellipsis' : !row.isExpanded && column.type !== 'custom',\n                                    'py-2': column.type === 'custom',\n                                    'py-4': column.type !== 'custom'\n                                    }\">\n          @if (column.type === 'custom') {\n          @if (column.customRenderTemplate) {\n          <ng-container [ngTemplateOutlet]=\"customTemplates[column.customRenderTemplate]\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"></ng-container>\n          }\n          }\n          @else {\n          {{ getColumnValue(row, column) | async }}\n          }\n        </td>\n        }\n        }\n      </tr>\n\n      @if (row.isExpanded && expandedTemplate) {\n      <tr>\n        <td [attr.colspan]=\"columns.length\">\n        </td>\n      </tr>\n      <tr class=\"even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background\">\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 pb-4 text-sm text-center\">\n          <ng-container [ngTemplateOutlet]=\"expandedTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n        </td>\n      </tr>\n      }\n\n      @if (lastRow && (lastEvaluatedKey | async) && !(isLoading | async) && useLoadMore) {\n      <tr #loadMoreRow class=\"border-t border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\">\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n          <div (click)=\"onLoadMoreClicked()\"\n               class=\"cursor-pointer\">\n            {{ 'haloduck.ui.table.Load More...' | transloco }}\n          </div>\n        </td>\n      </tr>\n      }\n\n      } @empty {\n      @if(!(isLoading | async)) {\n      <tr>\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n          {{ 'haloduck.ui.table.No data available.' | transloco }}\n        </td>\n      </tr>\n      }\n      }\n\n      @if(isLoading | async) {\n      @for ( i of [0,1,2,3,4]; track i; let lastRow = $last)\n      {\n      <tr class=\"bg-light-background dark:bg-dark-background border-t border-light-inactive/50 dark:border-dark-inactive/50\">\n        @for (column of columns; track column.key) {\n        <td class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm\"\n            [ngClass]=\"{'first:rounded-bl-lg last:rounded-br-lg': lastRow}\">\n          <div class=\"h-4 bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-md animate-pulse\"></div>\n        </td>\n        }\n      </tr>\n      }\n      }\n    </tbody>\n  </table>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-table', imports: [CommonModule, TranslocoModule], providers: [provideTranslocoScope('haloduck')], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #scrollContainer class=\"w-full h-full shadow border border-light-inactive dark:border-dark-inactive rounded-lg overflow-auto\">\n  <table class=\"w-full h-full\"\n         [ngClass]=\"{\n      'table-fixed': tableLayout === 'fixed',\n      'table-auto': tableLayout === 'auto',\n    }\">\n    <colgroup>\n      @for (column of columns; track column.key) {\n      @if (!column.hidden || !(column.hidden | async)) {\n      <col class=\"{{ column.width || '' }}\" />\n      }\n      }\n    </colgroup>\n    @if (showHeader) {\n    <thead class=\"bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-tl-lg rounded-tr-lg\">\n      <tr>\n        @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n        <th scope=\"col\"\n            class=\"{{ column.align || '' }} py-3.5 pl-4 pr-3 text-sm font-semibold text-light-on-background dark:text-dark-on-background whitespace-nowrap\">\n          <span class=\"group inline-flex\">\n            {{ column.label }}\n            @if (column.sortable) {\n            @switch (getSortDirection(column.sort?.field || column.key) | async)\n            {\n            @case('desc') {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                  class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            @case('asc') {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'desc')\"\n                  class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            @default {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                  class=\"invisible ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive group-hover:visible group-focus:visible\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            }\n            }\n          </span>\n        </th>\n        }\n        }\n      </tr>\n    </thead>\n    }\n    <tbody class=\"overflow-scroll\">\n      @for (row of rows | async; track row['id']; let lastRow = $last) {\n      <tr class=\"border-t border-light-inactive dark:border-dark-inactive {{ row.bgColor || '' }}\"\n          (click)=\"onRowClicked(row)\"\n          (dblclick)=\"onRowDblClicked(row)\"\n          [ngClass]=\"{'rounded-b-lg': lastRow && (lastEvaluatedKey | async) === null, 'even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background': !row.bgColor }\"\n          [ngStyle]=\"{ 'background-color': row.bgColor || '' }\">\n        @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n        <td class=\"relative overflow-visible {{ column.align || '' }} whitespace-nowrap px-3 text-sm text-light-on-background dark:text-dark-on-background\"\n            [ngClass]=\"{\n                                    'first:rounded-bl-lg last:rounded-br-lg': lastRow && (lastEvaluatedKey | async) === null,\n                                    'text-wrap': row.isExpanded && column.type !== 'custom',\n                                    'overflow-x-hidden text-ellipsis' : !row.isExpanded && column.type !== 'custom',\n                                    'py-2': column.type === 'custom',\n                                    'py-4': column.type !== 'custom'\n                                    }\">\n          @if (column.type === 'custom') {\n          @if (column.customRenderTemplate) {\n          <ng-container [ngTemplateOutlet]=\"customTemplates[column.customRenderTemplate]\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"></ng-container>\n          }\n          }\n          @else {\n          {{ getColumnValue(row, column) | async }}\n          }\n        </td>\n        }\n        }\n      </tr>\n\n      @if (row.isExpanded && expandedTemplate) {\n      <tr>\n        <td [attr.colspan]=\"columns.length\">\n        </td>\n      </tr>\n      <tr class=\"even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background\">\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 pb-4 text-sm text-center\">\n          <ng-container [ngTemplateOutlet]=\"expandedTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n        </td>\n      </tr>\n      }\n\n      @if (lastRow && (lastEvaluatedKey | async) && !(isLoading | async) && useLoadMore) {\n      <tr #loadMoreRow class=\"border-t border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\">\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n          <div (click)=\"onLoadMoreClicked()\"\n               class=\"cursor-pointer\">\n            {{ 'haloduck.ui.table.Load More...' | transloco }}\n          </div>\n        </td>\n      </tr>\n      }\n\n      } @empty {\n      @if(!(isLoading | async)) {\n      <tr>\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n          {{ 'haloduck.ui.table.No data available.' | transloco }}\n        </td>\n      </tr>\n      }\n      }\n\n      @if(isLoading | async) {\n      @for ( i of [0,1,2,3,4]; track i; let lastRow = $last)\n      {\n      <tr class=\"bg-light-background dark:bg-dark-background border-t border-light-inactive/50 dark:border-dark-inactive/50\">\n        @for (column of columns; track column.key) {\n        <td class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm\"\n            [ngClass]=\"{'first:rounded-bl-lg last:rounded-br-lg': lastRow}\">\n          <div class=\"h-4 bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-md animate-pulse\"></div>\n        </td>\n        }\n      </tr>\n      }\n      }\n    </tbody>\n  </table>\n</div>\n" }]
+            args: [{ selector: 'haloduck-table', imports: [CommonModule, TranslocoModule], providers: [provideTranslocoScope('haloduck')], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #scrollContainer class=\"w-full h-full shadow border border-light-inactive dark:border-dark-inactive rounded-lg overflow-auto\">\n  <table class=\"w-full h-full\"\n         [ngClass]=\"{\n      'table-fixed': tableLayout === 'fixed',\n      'table-auto': tableLayout === 'auto',\n    }\">\n    <colgroup>\n      @for (column of columns; track column.key) {\n      @if (!column.hidden || !(column.hidden | async)) {\n      <col class=\"{{ column.width || '' }}\" />\n      }\n      }\n    </colgroup>\n    @if (showHeader) {\n    <thead class=\"bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-tl-lg rounded-tr-lg\">\n      <tr>\n        @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n        <th scope=\"col\"\n            class=\"{{ column.align || '' }} py-3.5 pl-4 pr-3 text-sm font-semibold text-light-on-background dark:text-dark-on-background whitespace-nowrap\">\n          <span class=\"group inline-flex\">\n            {{ column.label }}\n            @if (column.sortable) {\n            @switch (getSortDirection(column.sort?.field || column.key) | async)\n            {\n            @case('desc') {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                  class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            @case('asc') {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'desc')\"\n                  class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            @default {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                  class=\"invisible ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive group-hover:visible group-focus:visible\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            }\n            }\n          </span>\n        </th>\n        }\n        }\n      </tr>\n    </thead>\n    }\n    <tbody class=\"overflow-scroll\">\n      @for (row of rows | async; track row['id']; let lastRow = $last) {\n      <tr #dataRow class=\"border-t border-light-inactive dark:border-dark-inactive {{ row.bgColor || '' }}\"\n          (click)=\"onRowClicked(row)\"\n          (dblclick)=\"onRowDblClicked(row)\"\n          [ngClass]=\"{'rounded-b-lg': lastRow && (lastEvaluatedKey | async) === null, 'even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background': !row.bgColor }\"\n          [ngStyle]=\"{ 'background-color': row.bgColor || '' }\">\n        @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n        <td class=\"relative overflow-visible {{ column.align || '' }} whitespace-nowrap px-3 text-sm text-light-on-background dark:text-dark-on-background\"\n            [ngClass]=\"{\n                                    'first:rounded-bl-lg last:rounded-br-lg': lastRow && (lastEvaluatedKey | async) === null,\n                                    'text-wrap': row.isExpanded && column.type !== 'custom',\n                                    'overflow-x-hidden text-ellipsis' : !row.isExpanded && column.type !== 'custom',\n                                    'py-2': column.type === 'custom',\n                                    'py-4': column.type !== 'custom'\n                                    }\">\n          @if (column.type === 'custom') {\n          @if (column.customRenderTemplate) {\n          <ng-container [ngTemplateOutlet]=\"customTemplates[column.customRenderTemplate]\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"></ng-container>\n          }\n          }\n          @else {\n          {{ getColumnValue(row, column) | async }}\n          }\n        </td>\n        }\n        }\n      </tr>\n\n      @if (row.isExpanded && expandedTemplate) {\n      <tr>\n        <td [attr.colspan]=\"columns.length\">\n        </td>\n      </tr>\n      <tr class=\"even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background\">\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 pb-4 text-sm text-center\">\n          <ng-container [ngTemplateOutlet]=\"expandedTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n        </td>\n      </tr>\n      }\n\n      @if (lastRow && (lastEvaluatedKey | async) && !(isLoading | async) && useLoadMore) {\n      <tr #loadMoreRow class=\"border-t border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\">\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n          <div (click)=\"onLoadMoreClicked()\"\n               class=\"cursor-pointer\">\n            {{ 'haloduck.ui.table.Load More...' | transloco }}\n          </div>\n        </td>\n      </tr>\n      }\n\n      } @empty {\n      @if(!(isLoading | async)) {\n      <tr>\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n          {{ 'haloduck.ui.table.No data available.' | transloco }}\n        </td>\n      </tr>\n      }\n      }\n\n      @if(isLoading | async) {\n      @for ( i of [0,1,2,3,4]; track i; let lastRow = $last)\n      {\n      <tr class=\"bg-light-background dark:bg-dark-background border-t border-light-inactive/50 dark:border-dark-inactive/50\">\n        @for (column of columns; track column.key) {\n        <td class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm\"\n            [ngClass]=\"{'first:rounded-bl-lg last:rounded-br-lg': lastRow}\">\n          <div class=\"h-4 bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-md animate-pulse\"></div>\n        </td>\n        }\n      </tr>\n      }\n      }\n    </tbody>\n  </table>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { tableLayout: [{
                 type: Input
             }], showHeader: [{
@@ -3098,6 +3118,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
             }], loadMoreRow: [{
                 type: ViewChild,
                 args: ['loadMoreRow']
+            }], dataRows: [{
+                type: ViewChildren,
+                args: ['dataRow', { read: ElementRef }]
             }], scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer', { static: true }]