@vallift/ngl 22.0.27 → 22.0.29

package/fesm2022/vallift-ngl.mjs

@@ -1302,17 +1302,39 @@ class ShimmerComponent {
     ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     count = input(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    variant = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    widthClass = input('full', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widthClass" }] : /* istanbul ignore next */ []));
     loop = computed(() => {
-        return Array(this.count()).fill(1).map((x, i) => i);
+        return Array(this.count())
+            .fill(1)
+            .map((_, i) => i);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loop" }] : /* istanbul ignore next */ []));
+    tableCellWidthModifier = computed(() => {
+        if (this.variant() === 'actions') {
+            return 'ngl-shimmer-bar--actions';
+        }
+        switch (this.widthClass()) {
+            case 'four-fifths':
+                return 'ngl-shimmer-bar--width-four-fifths';
+            case 'three-fifths':
+                return 'ngl-shimmer-bar--width-three-fifths';
+            case 'two-thirds':
+                return 'ngl-shimmer-bar--width-two-thirds';
+            default:
+                return 'ngl-shimmer-bar--width-full';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableCellWidthModifier" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ShimmerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ShimmerComponent, isStandalone: true, selector: "app-shimmer", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (type()) {\n  @case ('grid') {\n    <div class=\"space-y-5 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"h-24 rounded-lg bg-neutral-400/10\"></div>\n      <div class=\"space-y-3\">\n        <div class=\"h-3 w-3/5 rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-3 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n        <div class=\"h-3 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n  @case ('list') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"w-24 rounded-lg bg-neutral-400/10\"></div>\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n        <div class=\"h-2 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n  @case ('single-line') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n      </div>\n    </div>\n  }\n  @case ('multiline') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n}\n\n\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ShimmerComponent, isStandalone: true, selector: "app-shimmer", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, widthClass: { classPropertyName: "widthClass", publicName: "widthClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (type()) {\n  @case ('grid') {\n    <div class=\"space-y-5 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"h-24 rounded-lg bg-neutral-400/10\"></div>\n      <div class=\"space-y-3\">\n        <div class=\"h-3 w-3/5 rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-3 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n        <div class=\"h-3 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n  @case ('list') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"w-24 rounded-lg bg-neutral-400/10\"></div>\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n        <div class=\"h-2 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n  @case ('single-line') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n      </div>\n    </div>\n  }\n  @case ('multiline') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n  @case ('table-cell') {\n    <div\n      [class]=\"'ngl-shimmer-bar ' + tableCellWidthModifier()\"\n      aria-hidden=\"true\"></div>\n  }\n}\n\n\n", styles: ["@keyframes ngl-shimmer-sweep{0%{background-position:200% 0}to{background-position:-200% 0}}.ngl-shimmer-bar{height:.875rem;border-radius:.375rem;background:linear-gradient(90deg,#e5e5e58c,#d4d4d4d9,#e5e5e58c);background-size:200% 100%;animation:ngl-shimmer-sweep 1.4s ease-in-out infinite}.ngl-shimmer-bar--width-full{width:100%}.ngl-shimmer-bar--width-four-fifths{width:80%}.ngl-shimmer-bar--width-three-fifths{width:60%}.ngl-shimmer-bar--width-two-thirds{width:66.6667%}.ngl-shimmer-bar--actions{width:2rem;height:2rem;margin-inline:auto;border-radius:9999px}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ShimmerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-shimmer', standalone: true, imports: [], template: "@switch (type()) {\n  @case ('grid') {\n    <div class=\"space-y-5 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"h-24 rounded-lg bg-neutral-400/10\"></div>\n      <div class=\"space-y-3\">\n        <div class=\"h-3 w-3/5 rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-3 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n        <div class=\"h-3 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n  @case ('list') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"w-24 rounded-lg bg-neutral-400/10\"></div>\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n        <div class=\"h-2 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n  @case ('single-line') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n      </div>\n    </div>\n  }\n  @case ('multiline') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n}\n\n\n" }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }] } });
+            args: [{ selector: 'app-shimmer', standalone: true, imports: [], template: "@switch (type()) {\n  @case ('grid') {\n    <div class=\"space-y-5 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"h-24 rounded-lg bg-neutral-400/10\"></div>\n      <div class=\"space-y-3\">\n        <div class=\"h-3 w-3/5 rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-3 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n        <div class=\"h-3 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n  @case ('list') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"w-24 rounded-lg bg-neutral-400/10\"></div>\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n        <div class=\"h-2 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n  @case ('single-line') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n      </div>\n    </div>\n  }\n  @case ('multiline') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n  @case ('table-cell') {\n    <div\n      [class]=\"'ngl-shimmer-bar ' + tableCellWidthModifier()\"\n      aria-hidden=\"true\"></div>\n  }\n}\n\n\n", styles: ["@keyframes ngl-shimmer-sweep{0%{background-position:200% 0}to{background-position:-200% 0}}.ngl-shimmer-bar{height:.875rem;border-radius:.375rem;background:linear-gradient(90deg,#e5e5e58c,#d4d4d4d9,#e5e5e58c);background-size:200% 100%;animation:ngl-shimmer-sweep 1.4s ease-in-out infinite}.ngl-shimmer-bar--width-full{width:100%}.ngl-shimmer-bar--width-four-fifths{width:80%}.ngl-shimmer-bar--width-three-fifths{width:60%}.ngl-shimmer-bar--width-two-thirds{width:66.6667%}.ngl-shimmer-bar--actions{width:2rem;height:2rem;margin-inline:auto;border-radius:9999px}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], widthClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthClass", required: false }] }] } });
 
 class PaginationComponent {
     totalItems = input(0, /* @ts-ignore */
@@ -1386,6 +1408,14 @@ class BaseTableComponent {
     ...(ngDevMode ? [{ debugName: "isHorizontallyScrollable" }] : /* istanbul ignore next */ []));
     itemsPerPage = input(10, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : /* istanbul ignore next */ []));
+    skeletonRowCount = input(8, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeletonRowCount" }] : /* istanbul ignore next */ []));
+    skeletonColumnCount = input(5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeletonColumnCount" }] : /* istanbul ignore next */ []));
+    skeletonRows = computed(() => Array.from({ length: this.skeletonRowCount() }, (_, index) => index), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []));
+    skeletonColumns = computed(() => Array.from({ length: this.skeletonColumnCount() }, (_, index) => index), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeletonColumns" }] : /* istanbul ignore next */ []));
     pageChange = output();
     ngAfterViewInit() {
         this.pageChange.emit({ pageNumber: 1, pageSize: this.pageSize() });
@@ -1399,18 +1429,17 @@ class BaseTableComponent {
     getTotalCount() {
         return getListResponseTotalCount(this.state()?.response(), this.listResponse);
     }
+    skeletonWidthForColumn(index) {
+        const widths = ['full', 'four-fifths', 'three-fifths', 'two-thirds'];
+        return widths[index % widths.length];
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, isHorizontallyScrollable: { classPropertyName: "isHorizontallyScrollable", publicName: "isHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"bg-white rounded-lg h-full\">\n  <table class=\"w-full h-full min-w-full bg-white\" [ngClass]=\"isHorizontallyScrollable() ? 'overflow-x-auto' : ''\">\n\n    <!--    Table header-->\n    <thead class=\"sticky top-0 bg-white z-10\">\n    <tr class=\"text-overline text-neutral-500 text-nowrap h-min\">\n      <ng-content select=\"[head]\"></ng-content>\n    </tr>\n    <tr>\n      <th colspan=\"100\">\n        <div class=\"border-b border-neutral-200\"></div>\n      </th>\n    </tr>\n    </thead>\n\n    <!--    List Items-->\n    <tbody class=\"h-min\">\n    <ng-content select=\"[body]\"></ng-content>\n    </tbody>\n\n    <!--    Shimmer-->\n    @if (state()?.loading()) {\n      <tbody class=\"bg-white text-center py-14\">\n      <tr>\n        <td colspan=\"100\" class=\"h-min\">\n          <div class=\"flex flex-col gap-10 px-6 py-8\">\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <!--    No Table Indicator-->\n    @if (state()?.success() && getRows().length <= 0) {\n      <tbody>\n      <tr>\n        <td colspan=\"1000\">\n          <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n            <app-no-data-table></app-no-data-table>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <tbody class=\"h-full\"></tbody>\n\n\n    <!--    Paginator-->\n    <tbody class=\"bottom-0 sticky\">\n    <tr>\n      <td colspan=\"100\">\n        <div class=\"bg-white w-full\">\n          <app-pagination\n            class=\"w-full\"\n            [pageSize]=\"itemsPerPage()\"\n            [totalItems]=\"getTotalCount()\"\n            (pageChange)=\"onPageChange($event)\">\n          </app-pagination>\n        </div>\n      </td>\n    </tr>\n    </tbody>\n\n  </table>\n</div>\n\n\n<!--Example-->\n<!--    <app-base-table appTableResizableColumns sortableTable [state]=\"driverListState\">-->\n<!--      <ng-container head>-->\n<!--        <th class=\"p-4 text-left\">FULL NAME</th>-->\n<!--        <th class=\"p-4 text-center \">CONTACT</th>-->\n<!--        <th class=\"p-4 text-center \">HIRED DATA</th>-->\n<!--        &lt;!&ndash;        <th class=\"p-4 text-center \">LICENSE EXPIRING</th>&ndash;&gt;-->\n<!--        <th class=\"p-4 text-center \">STATUS</th>-->\n<!--        <th class=\"p-4 text-center \"></th>-->\n<!--      </ng-container>-->\n\n<!--      <ng-container body>-->\n<!--        @for (item of driverListState.response()?.data; track item; ) {-->\n<!--          <tr class=\"border-b border-neutral-100 w-full\">-->\n<!--            <td class=\"px-4 py-2 text-left\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-neutral-800\">{{ item.fullName }}</span>-->\n<!--                <span class=\"text-caption text-neutral-500\">{{ item.code }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 py-2 text-center\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-info-500\">{{ item.email }}</span>-->\n<!--                <span class=\"text-body2 text-neutral-500\">{{ item.phoneNumber }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 text-body2 text-center\">{{ item.hiredDate | date:'MMM d, y' }}</td>-->\n<!--            &lt;!&ndash;            <td class=\"px-4 text-body2 text-center\">{{ item.licenseExpiringDate |date:'MMM d, y h:mm a' }}</td>&ndash;&gt;-->\n<!--            <td class=\"px-4\">-->\n<!--              <div class=\"flex justify-center\">-->\n<!--                <app-driver-status-badge [driver]=\"item\"></app-driver-status-badge>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"p-4 cursor-pointer items-center\">-->\n<!--              <div class=\"flex justify-center items-center\">-->\n<!--                <app-button (click)=\"onViewDriverClicked(item)\" appearance=\"textType\" textButtonColor=\"text-info-500\">-->\n<!--                  View-->\n<!--                </app-button>-->\n<!--                <app-context-menu-icon></app-context-menu-icon>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--          </tr>-->\n<!--        }-->\n<!--      </ng-container>-->\n<!--    </app-base-table>-->\n", styles: [""], dependencies: [{ kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, isHorizontallyScrollable: { classPropertyName: "isHorizontallyScrollable", publicName: "isHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, skeletonRowCount: { classPropertyName: "skeletonRowCount", publicName: "skeletonRowCount", isSignal: true, isRequired: false, transformFunction: null }, skeletonColumnCount: { classPropertyName: "skeletonColumnCount", publicName: "skeletonColumnCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"bg-white rounded-lg h-full\">\n  <table class=\"w-full h-full min-w-full bg-white\" [ngClass]=\"isHorizontallyScrollable() ? 'overflow-x-auto' : ''\">\n\n    <!--    Table header-->\n    <thead class=\"sticky top-0 bg-white z-10\">\n    <tr class=\"text-overline text-neutral-500 text-nowrap h-min\">\n      <ng-content select=\"[head]\"></ng-content>\n    </tr>\n    <tr>\n      <th colspan=\"100\">\n        <div class=\"border-b border-neutral-200\"></div>\n      </th>\n    </tr>\n    </thead>\n\n    <!--    List Items-->\n    <tbody class=\"h-min\">\n    <ng-content select=\"[body]\"></ng-content>\n    </tbody>\n\n    <!--    Shimmer-->\n    @if (state()?.loading()) {\n      <tbody aria-busy=\"true\" aria-live=\"polite\">\n        @for (row of skeletonRows(); track row) {\n          <tr class=\"border-b border-neutral-100\">\n            @for (column of skeletonColumns(); track column) {\n              <td class=\"px-4 py-3\">\n                <app-shimmer\n                  type=\"table-cell\"\n                  [widthClass]=\"skeletonWidthForColumn(column + row)\" />\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    }\n\n    <!--    No Table Indicator-->\n    @if (state()?.success() && getRows().length <= 0) {\n      <tbody>\n      <tr>\n        <td colspan=\"1000\">\n          <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n            <app-no-data-table></app-no-data-table>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <tbody class=\"h-full\"></tbody>\n\n\n    <!--    Paginator-->\n    <tbody class=\"bottom-0 sticky\">\n    <tr>\n      <td colspan=\"100\">\n        <div class=\"bg-white w-full\">\n          <app-pagination\n            class=\"w-full\"\n            [pageSize]=\"itemsPerPage()\"\n            [totalItems]=\"getTotalCount()\"\n            (pageChange)=\"onPageChange($event)\">\n          </app-pagination>\n        </div>\n      </td>\n    </tr>\n    </tbody>\n\n  </table>\n</div>\n\n\n<!--Example-->\n<!--    <app-base-table appTableResizableColumns sortableTable [state]=\"driverListState\">-->\n<!--      <ng-container head>-->\n<!--        <th class=\"p-4 text-left\">FULL NAME</th>-->\n<!--        <th class=\"p-4 text-center \">CONTACT</th>-->\n<!--        <th class=\"p-4 text-center \">HIRED DATA</th>-->\n<!--        &lt;!&ndash;        <th class=\"p-4 text-center \">LICENSE EXPIRING</th>&ndash;&gt;-->\n<!--        <th class=\"p-4 text-center \">STATUS</th>-->\n<!--        <th class=\"p-4 text-center \"></th>-->\n<!--      </ng-container>-->\n\n<!--      <ng-container body>-->\n<!--        @for (item of driverListState.response()?.data; track item; ) {-->\n<!--          <tr class=\"border-b border-neutral-100 w-full\">-->\n<!--            <td class=\"px-4 py-2 text-left\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-neutral-800\">{{ item.fullName }}</span>-->\n<!--                <span class=\"text-caption text-neutral-500\">{{ item.code }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 py-2 text-center\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-info-500\">{{ item.email }}</span>-->\n<!--                <span class=\"text-body2 text-neutral-500\">{{ item.phoneNumber }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 text-body2 text-center\">{{ item.hiredDate | date:'MMM d, y' }}</td>-->\n<!--            &lt;!&ndash;            <td class=\"px-4 text-body2 text-center\">{{ item.licenseExpiringDate |date:'MMM d, y h:mm a' }}</td>&ndash;&gt;-->\n<!--            <td class=\"px-4\">-->\n<!--              <div class=\"flex justify-center\">-->\n<!--                <app-driver-status-badge [driver]=\"item\"></app-driver-status-badge>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"p-4 cursor-pointer items-center\">-->\n<!--              <div class=\"flex justify-center items-center\">-->\n<!--                <app-button (click)=\"onViewDriverClicked(item)\" appearance=\"textType\" textButtonColor=\"text-info-500\">-->\n<!--                  View-->\n<!--                </app-button>-->\n<!--                <app-context-menu-icon></app-context-menu-icon>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--          </tr>-->\n<!--        }-->\n<!--      </ng-container>-->\n<!--    </app-base-table>-->\n", styles: [""], dependencies: [{ kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count", "variant", "widthClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-base-table', standalone: true, imports: [
-                        NoDataTableComponent,
-                        ShimmerComponent,
-                        NgClass,
-                        PaginationComponent
-                    ], template: "<div class=\"bg-white rounded-lg h-full\">\n  <table class=\"w-full h-full min-w-full bg-white\" [ngClass]=\"isHorizontallyScrollable() ? 'overflow-x-auto' : ''\">\n\n    <!--    Table header-->\n    <thead class=\"sticky top-0 bg-white z-10\">\n    <tr class=\"text-overline text-neutral-500 text-nowrap h-min\">\n      <ng-content select=\"[head]\"></ng-content>\n    </tr>\n    <tr>\n      <th colspan=\"100\">\n        <div class=\"border-b border-neutral-200\"></div>\n      </th>\n    </tr>\n    </thead>\n\n    <!--    List Items-->\n    <tbody class=\"h-min\">\n    <ng-content select=\"[body]\"></ng-content>\n    </tbody>\n\n    <!--    Shimmer-->\n    @if (state()?.loading()) {\n      <tbody class=\"bg-white text-center py-14\">\n      <tr>\n        <td colspan=\"100\" class=\"h-min\">\n          <div class=\"flex flex-col gap-10 px-6 py-8\">\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <!--    No Table Indicator-->\n    @if (state()?.success() && getRows().length <= 0) {\n      <tbody>\n      <tr>\n        <td colspan=\"1000\">\n          <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n            <app-no-data-table></app-no-data-table>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <tbody class=\"h-full\"></tbody>\n\n\n    <!--    Paginator-->\n    <tbody class=\"bottom-0 sticky\">\n    <tr>\n      <td colspan=\"100\">\n        <div class=\"bg-white w-full\">\n          <app-pagination\n            class=\"w-full\"\n            [pageSize]=\"itemsPerPage()\"\n            [totalItems]=\"getTotalCount()\"\n            (pageChange)=\"onPageChange($event)\">\n          </app-pagination>\n        </div>\n      </td>\n    </tr>\n    </tbody>\n\n  </table>\n</div>\n\n\n<!--Example-->\n<!--    <app-base-table appTableResizableColumns sortableTable [state]=\"driverListState\">-->\n<!--      <ng-container head>-->\n<!--        <th class=\"p-4 text-left\">FULL NAME</th>-->\n<!--        <th class=\"p-4 text-center \">CONTACT</th>-->\n<!--        <th class=\"p-4 text-center \">HIRED DATA</th>-->\n<!--        &lt;!&ndash;        <th class=\"p-4 text-center \">LICENSE EXPIRING</th>&ndash;&gt;-->\n<!--        <th class=\"p-4 text-center \">STATUS</th>-->\n<!--        <th class=\"p-4 text-center \"></th>-->\n<!--      </ng-container>-->\n\n<!--      <ng-container body>-->\n<!--        @for (item of driverListState.response()?.data; track item; ) {-->\n<!--          <tr class=\"border-b border-neutral-100 w-full\">-->\n<!--            <td class=\"px-4 py-2 text-left\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-neutral-800\">{{ item.fullName }}</span>-->\n<!--                <span class=\"text-caption text-neutral-500\">{{ item.code }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 py-2 text-center\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-info-500\">{{ item.email }}</span>-->\n<!--                <span class=\"text-body2 text-neutral-500\">{{ item.phoneNumber }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 text-body2 text-center\">{{ item.hiredDate | date:'MMM d, y' }}</td>-->\n<!--            &lt;!&ndash;            <td class=\"px-4 text-body2 text-center\">{{ item.licenseExpiringDate |date:'MMM d, y h:mm a' }}</td>&ndash;&gt;-->\n<!--            <td class=\"px-4\">-->\n<!--              <div class=\"flex justify-center\">-->\n<!--                <app-driver-status-badge [driver]=\"item\"></app-driver-status-badge>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"p-4 cursor-pointer items-center\">-->\n<!--              <div class=\"flex justify-center items-center\">-->\n<!--                <app-button (click)=\"onViewDriverClicked(item)\" appearance=\"textType\" textButtonColor=\"text-info-500\">-->\n<!--                  View-->\n<!--                </app-button>-->\n<!--                <app-context-menu-icon></app-context-menu-icon>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--          </tr>-->\n<!--        }-->\n<!--      </ng-container>-->\n<!--    </app-base-table>-->\n" }]
-        }], propDecorators: { pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], isHorizontallyScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHorizontallyScrollable", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
+            args: [{ selector: 'app-base-table', standalone: true, imports: [NoDataTableComponent, ShimmerComponent, NgClass, PaginationComponent], template: "<div class=\"bg-white rounded-lg h-full\">\n  <table class=\"w-full h-full min-w-full bg-white\" [ngClass]=\"isHorizontallyScrollable() ? 'overflow-x-auto' : ''\">\n\n    <!--    Table header-->\n    <thead class=\"sticky top-0 bg-white z-10\">\n    <tr class=\"text-overline text-neutral-500 text-nowrap h-min\">\n      <ng-content select=\"[head]\"></ng-content>\n    </tr>\n    <tr>\n      <th colspan=\"100\">\n        <div class=\"border-b border-neutral-200\"></div>\n      </th>\n    </tr>\n    </thead>\n\n    <!--    List Items-->\n    <tbody class=\"h-min\">\n    <ng-content select=\"[body]\"></ng-content>\n    </tbody>\n\n    <!--    Shimmer-->\n    @if (state()?.loading()) {\n      <tbody aria-busy=\"true\" aria-live=\"polite\">\n        @for (row of skeletonRows(); track row) {\n          <tr class=\"border-b border-neutral-100\">\n            @for (column of skeletonColumns(); track column) {\n              <td class=\"px-4 py-3\">\n                <app-shimmer\n                  type=\"table-cell\"\n                  [widthClass]=\"skeletonWidthForColumn(column + row)\" />\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    }\n\n    <!--    No Table Indicator-->\n    @if (state()?.success() && getRows().length <= 0) {\n      <tbody>\n      <tr>\n        <td colspan=\"1000\">\n          <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n            <app-no-data-table></app-no-data-table>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <tbody class=\"h-full\"></tbody>\n\n\n    <!--    Paginator-->\n    <tbody class=\"bottom-0 sticky\">\n    <tr>\n      <td colspan=\"100\">\n        <div class=\"bg-white w-full\">\n          <app-pagination\n            class=\"w-full\"\n            [pageSize]=\"itemsPerPage()\"\n            [totalItems]=\"getTotalCount()\"\n            (pageChange)=\"onPageChange($event)\">\n          </app-pagination>\n        </div>\n      </td>\n    </tr>\n    </tbody>\n\n  </table>\n</div>\n\n\n<!--Example-->\n<!--    <app-base-table appTableResizableColumns sortableTable [state]=\"driverListState\">-->\n<!--      <ng-container head>-->\n<!--        <th class=\"p-4 text-left\">FULL NAME</th>-->\n<!--        <th class=\"p-4 text-center \">CONTACT</th>-->\n<!--        <th class=\"p-4 text-center \">HIRED DATA</th>-->\n<!--        &lt;!&ndash;        <th class=\"p-4 text-center \">LICENSE EXPIRING</th>&ndash;&gt;-->\n<!--        <th class=\"p-4 text-center \">STATUS</th>-->\n<!--        <th class=\"p-4 text-center \"></th>-->\n<!--      </ng-container>-->\n\n<!--      <ng-container body>-->\n<!--        @for (item of driverListState.response()?.data; track item; ) {-->\n<!--          <tr class=\"border-b border-neutral-100 w-full\">-->\n<!--            <td class=\"px-4 py-2 text-left\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-neutral-800\">{{ item.fullName }}</span>-->\n<!--                <span class=\"text-caption text-neutral-500\">{{ item.code }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 py-2 text-center\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-info-500\">{{ item.email }}</span>-->\n<!--                <span class=\"text-body2 text-neutral-500\">{{ item.phoneNumber }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 text-body2 text-center\">{{ item.hiredDate | date:'MMM d, y' }}</td>-->\n<!--            &lt;!&ndash;            <td class=\"px-4 text-body2 text-center\">{{ item.licenseExpiringDate |date:'MMM d, y h:mm a' }}</td>&ndash;&gt;-->\n<!--            <td class=\"px-4\">-->\n<!--              <div class=\"flex justify-center\">-->\n<!--                <app-driver-status-badge [driver]=\"item\"></app-driver-status-badge>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"p-4 cursor-pointer items-center\">-->\n<!--              <div class=\"flex justify-center items-center\">-->\n<!--                <app-button (click)=\"onViewDriverClicked(item)\" appearance=\"textType\" textButtonColor=\"text-info-500\">-->\n<!--                  View-->\n<!--                </app-button>-->\n<!--                <app-context-menu-icon></app-context-menu-icon>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--          </tr>-->\n<!--        }-->\n<!--      </ng-container>-->\n<!--    </app-base-table>-->\n" }]
+        }], propDecorators: { pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], isHorizontallyScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHorizontallyScrollable", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], skeletonRowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRowCount", required: false }] }], skeletonColumnCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonColumnCount", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 class SortableTableDirective {
     el;
@@ -3100,6 +3129,10 @@ class DataTableComponent extends BaseControlValueAccessorV3 {
     ...(ngDevMode ? [{ debugName: "enableSearch" }] : /* istanbul ignore next */ []));
     disableInitialLoad = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disableInitialLoad" }] : /* istanbul ignore next */ []));
+    skeletonRowCount = input(8, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeletonRowCount" }] : /* istanbul ignore next */ []));
+    skeletonRows = computed(() => Array.from({ length: this.skeletonRowCount() }, (_, index) => index), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []));
     pageChange = output();
     sortChanged = output();
     tableStateChanged = output();
@@ -3255,6 +3288,10 @@ class DataTableComponent extends BaseControlValueAccessorV3 {
                 return 'text-left';
         }
     }
+    skeletonWidthForColumn(index) {
+        const widths = ['full', 'four-fifths', 'three-fifths', 'two-thirds'];
+        return widths[index % widths.length];
+    }
     getFlexJustify(column) {
         switch (column.alignment) {
             case 'left':
@@ -3318,7 +3355,7 @@ class DataTableComponent extends BaseControlValueAccessorV3 {
         this.onActionPerformed.emit($event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: DataTableComponent, isStandalone: true, selector: "app-data-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, enableHorizontallyScrollable: { classPropertyName: "enableHorizontallyScrollable", publicName: "enableHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, enableResizableColumns: { classPropertyName: "enableResizableColumns", publicName: "enableResizableColumns", isSignal: true, isRequired: false, transformFunction: null }, enableClickableRows: { classPropertyName: "enableClickableRows", publicName: "enableClickableRows", isSignal: true, isRequired: false, transformFunction: null }, expandableComponent: { classPropertyName: "expandableComponent", publicName: "expandableComponent", isSignal: true, isRequired: false, transformFunction: null }, enableColumnsConfig: { classPropertyName: "enableColumnsConfig", publicName: "enableColumnsConfig", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, disableInitialLoad: { classPropertyName: "disableInitialLoad", publicName: "disableInitialLoad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChanged: "sortChanged", tableStateChanged: "tableStateChanged", onActionPerformed: "onActionPerformed", filterChanged: "filterChanged", onRowClicked: "onRowClicked" }, queries: [{ propertyName: "headerComponents", predicate: ["filter"] }], viewQueries: [{ propertyName: "toolbarContent", first: true, predicate: ["toolbarContent"], descendants: true }, { propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  <div\n    class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n    [class.hidden]=\"!showToolbar()\">\n    @if (enableSearch()) {\n      <app-text-input class=\"shrink-0\"\n                      [iconSrc]=\"'assets/icons/search.svg'\"\n                      placeholder=\"Search...\"\n                      type=\"search\"\n                      [fullWidth]=\"false\"\n                      (changeValue)=\"onSearchTextChanged($event)\">\n      </app-text-input>\n    }\n    <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().initialLoading()) {\n        <tbody class=\"bg-white text-center py-14\">\n        <tr>\n          <td colspan=\"100\" class=\"h-min\">\n            <div class=\"flex flex-col gap-6 px-6 py-4\">\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: StatusBadgeComponent, selector: "app-status-badge", inputs: ["status", "backgroundColorClass", "indicatorColor", "textColorClass", "borderColorClass", "isUpperCase"] }, { kind: "directive", type: SortableTableDirective, selector: "[sortableTable]", outputs: ["sortChange"] }, { kind: "directive", type: TableResizableColumnsDirective, selector: "[appTableResizableColumns]", inputs: ["appTableResizableColumns"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { 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: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "size", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: TextButtonSmall, selector: "app-text-button-small" }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ContextMenuButtonComponent, selector: "app-context-menu-button", inputs: ["actions", "positionPreference"], outputs: ["onActionClicked"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: DataTableComponent, isStandalone: true, selector: "app-data-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, enableHorizontallyScrollable: { classPropertyName: "enableHorizontallyScrollable", publicName: "enableHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, enableResizableColumns: { classPropertyName: "enableResizableColumns", publicName: "enableResizableColumns", isSignal: true, isRequired: false, transformFunction: null }, enableClickableRows: { classPropertyName: "enableClickableRows", publicName: "enableClickableRows", isSignal: true, isRequired: false, transformFunction: null }, expandableComponent: { classPropertyName: "expandableComponent", publicName: "expandableComponent", isSignal: true, isRequired: false, transformFunction: null }, enableColumnsConfig: { classPropertyName: "enableColumnsConfig", publicName: "enableColumnsConfig", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, disableInitialLoad: { classPropertyName: "disableInitialLoad", publicName: "disableInitialLoad", isSignal: true, isRequired: false, transformFunction: null }, skeletonRowCount: { classPropertyName: "skeletonRowCount", publicName: "skeletonRowCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChanged: "sortChanged", tableStateChanged: "tableStateChanged", onActionPerformed: "onActionPerformed", filterChanged: "filterChanged", onRowClicked: "onRowClicked" }, queries: [{ propertyName: "headerComponents", predicate: ["filter"] }], viewQueries: [{ propertyName: "toolbarContent", first: true, predicate: ["toolbarContent"], descendants: true }, { propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  <div\n    class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n    [class.hidden]=\"!showToolbar()\">\n    @if (enableSearch()) {\n      <app-text-input class=\"shrink-0\"\n                      [iconSrc]=\"'assets/icons/search.svg'\"\n                      placeholder=\"Search...\"\n                      type=\"search\"\n                      [fullWidth]=\"false\"\n                      (changeValue)=\"onSearchTextChanged($event)\">\n      </app-text-input>\n    }\n    <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().loading()) {\n        <tbody aria-busy=\"true\" aria-live=\"polite\">\n          @for (row of skeletonRows(); track row) {\n            <tr class=\"border-b border-gray-100\">\n              @if (expandableComponent()) {\n                <td class=\"px-4 py-3\">\n                  <app-shimmer type=\"table-cell\" variant=\"actions\" widthClass=\"full\" />\n                </td>\n              }\n\n              @for (column of columnDefs(); track column; let columnIndex = $index) {\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td class=\"px-4 py-3\" [ngClass]=\"getThTrClass(column)\">\n                    <app-shimmer\n                      type=\"table-cell\"\n                      [variant]=\"column.type === 'actions' ? 'actions' : 'text'\"\n                      [widthClass]=\"skeletonWidthForColumn(columnIndex + row)\" />\n                  </td>\n                }\n              }\n\n              @if (enableColumnsConfig()) {\n                <td class=\"px-1 py-3\"></td>\n              }\n            </tr>\n          }\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (!state().loading() && state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (!state().loading() && getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count", "variant", "widthClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: StatusBadgeComponent, selector: "app-status-badge", inputs: ["status", "backgroundColorClass", "indicatorColor", "textColorClass", "borderColorClass", "isUpperCase"] }, { kind: "directive", type: SortableTableDirective, selector: "[sortableTable]", outputs: ["sortChange"] }, { kind: "directive", type: TableResizableColumnsDirective, selector: "[appTableResizableColumns]", inputs: ["appTableResizableColumns"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { 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: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "size", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: TextButtonSmall, selector: "app-text-button-small" }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ContextMenuButtonComponent, selector: "app-context-menu-button", inputs: ["actions", "positionPreference"], outputs: ["onActionClicked"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -3339,14 +3376,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         TextButtonSmall,
                         DynamicRendererComponent,
                         ContextMenuButtonComponent
-                    ], template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  <div\n    class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n    [class.hidden]=\"!showToolbar()\">\n    @if (enableSearch()) {\n      <app-text-input class=\"shrink-0\"\n                      [iconSrc]=\"'assets/icons/search.svg'\"\n                      placeholder=\"Search...\"\n                      type=\"search\"\n                      [fullWidth]=\"false\"\n                      (changeValue)=\"onSearchTextChanged($event)\">\n      </app-text-input>\n    }\n    <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().initialLoading()) {\n        <tbody class=\"bg-white text-center py-14\">\n        <tr>\n          <td colspan=\"100\" class=\"h-min\">\n            <div class=\"flex flex-col gap-6 px-6 py-4\">\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n" }]
+                    ], template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  <div\n    class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n    [class.hidden]=\"!showToolbar()\">\n    @if (enableSearch()) {\n      <app-text-input class=\"shrink-0\"\n                      [iconSrc]=\"'assets/icons/search.svg'\"\n                      placeholder=\"Search...\"\n                      type=\"search\"\n                      [fullWidth]=\"false\"\n                      (changeValue)=\"onSearchTextChanged($event)\">\n      </app-text-input>\n    }\n    <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().loading()) {\n        <tbody aria-busy=\"true\" aria-live=\"polite\">\n          @for (row of skeletonRows(); track row) {\n            <tr class=\"border-b border-gray-100\">\n              @if (expandableComponent()) {\n                <td class=\"px-4 py-3\">\n                  <app-shimmer type=\"table-cell\" variant=\"actions\" widthClass=\"full\" />\n                </td>\n              }\n\n              @for (column of columnDefs(); track column; let columnIndex = $index) {\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td class=\"px-4 py-3\" [ngClass]=\"getThTrClass(column)\">\n                    <app-shimmer\n                      type=\"table-cell\"\n                      [variant]=\"column.type === 'actions' ? 'actions' : 'text'\"\n                      [widthClass]=\"skeletonWidthForColumn(columnIndex + row)\" />\n                  </td>\n                }\n              }\n\n              @if (enableColumnsConfig()) {\n                <td class=\"px-1 py-3\"></td>\n              }\n            </tr>\n          }\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (!state().loading() && state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (!state().loading() && getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n" }]
         }], propDecorators: { headerComponents: [{
                 type: ContentChildren,
                 args: ['filter']
             }], toolbarContent: [{
                 type: ViewChild,
                 args: ['toolbarContent']
-            }], columnDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefs", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], enableHorizontallyScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableHorizontallyScrollable", required: false }] }], enableResizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableResizableColumns", required: false }] }], enableClickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableClickableRows", required: false }] }], expandableComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandableComponent", required: false }] }], enableColumnsConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnsConfig", required: false }] }], filterComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterComponent", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], disableInitialLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableInitialLoad", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }], tableStateChanged: [{ type: i0.Output, args: ["tableStateChanged"] }], onActionPerformed: [{ type: i0.Output, args: ["onActionPerformed"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], onRowClicked: [{ type: i0.Output, args: ["onRowClicked"] }], portal: [{
+            }], columnDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefs", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], enableHorizontallyScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableHorizontallyScrollable", required: false }] }], enableResizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableResizableColumns", required: false }] }], enableClickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableClickableRows", required: false }] }], expandableComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandableComponent", required: false }] }], enableColumnsConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnsConfig", required: false }] }], filterComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterComponent", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], disableInitialLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableInitialLoad", required: false }] }], skeletonRowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRowCount", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }], tableStateChanged: [{ type: i0.Output, args: ["tableStateChanged"] }], onActionPerformed: [{ type: i0.Output, args: ["onActionPerformed"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], onRowClicked: [{ type: i0.Output, args: ["onRowClicked"] }], portal: [{
                 type: ViewChild,
                 args: [CdkPortal]
             }] } });
@@ -4181,6 +4218,10 @@ class SignalDataTableComponent extends BaseControlValueAccessorV3 {
     ...(ngDevMode ? [{ debugName: "enableSearch" }] : /* istanbul ignore next */ []));
     disableInitialLoad = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disableInitialLoad" }] : /* istanbul ignore next */ []));
+    skeletonRowCount = input(8, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeletonRowCount" }] : /* istanbul ignore next */ []));
+    skeletonRows = computed(() => Array.from({ length: this.skeletonRowCount() }, (_, index) => index), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []));
     pageChange = output();
     sortChanged = output();
     tableStateChanged = output();
@@ -4337,6 +4378,10 @@ class SignalDataTableComponent extends BaseControlValueAccessorV3 {
                 return 'text-left';
         }
     }
+    skeletonWidthForColumn(index) {
+        const widths = ['full', 'four-fifths', 'three-fifths', 'two-thirds'];
+        return widths[index % widths.length];
+    }
     getFlexJustify(column) {
         switch (column.alignment) {
             case 'left':
@@ -4400,7 +4445,7 @@ class SignalDataTableComponent extends BaseControlValueAccessorV3 {
         this.onActionPerformed.emit($event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDataTableComponent, isStandalone: true, selector: "app-signal-data-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, enableHorizontallyScrollable: { classPropertyName: "enableHorizontallyScrollable", publicName: "enableHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, enableResizableColumns: { classPropertyName: "enableResizableColumns", publicName: "enableResizableColumns", isSignal: true, isRequired: false, transformFunction: null }, enableClickableRows: { classPropertyName: "enableClickableRows", publicName: "enableClickableRows", isSignal: true, isRequired: false, transformFunction: null }, expandableComponent: { classPropertyName: "expandableComponent", publicName: "expandableComponent", isSignal: true, isRequired: false, transformFunction: null }, enableColumnsConfig: { classPropertyName: "enableColumnsConfig", publicName: "enableColumnsConfig", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, disableInitialLoad: { classPropertyName: "disableInitialLoad", publicName: "disableInitialLoad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChanged: "sortChanged", tableStateChanged: "tableStateChanged", onActionPerformed: "onActionPerformed", filterChanged: "filterChanged", onRowClicked: "onRowClicked" }, queries: [{ propertyName: "headerComponents", predicate: ["filter"] }], viewQueries: [{ propertyName: "toolbarContent", first: true, predicate: ["toolbarContent"], descendants: true }, { propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  <div\n    class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n    [class.hidden]=\"!showToolbar()\">\n    @if (enableSearch()) {\n      <lib-signal-text-field\n        class=\"shrink-0\"\n        [inputType]=\"'search'\"\n        [placeholder]=\"'Search...'\"\n        [prefixIcon]=\"'assets/icons/search.svg'\"\n        [debounceValueChange]=\"false\"\n        (valueChange)=\"onSearchTextChanged($event)\">\n      </lib-signal-text-field>\n    }\n    <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().initialLoading()) {\n        <tbody class=\"bg-white text-center py-14\">\n        <tr>\n          <td colspan=\"100\" class=\"h-min\">\n            <div class=\"flex flex-col gap-6 px-6 py-4\">\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: StatusBadgeComponent, selector: "app-status-badge", inputs: ["status", "backgroundColorClass", "indicatorColor", "textColorClass", "borderColorClass", "isUpperCase"] }, { kind: "directive", type: SortableTableDirective, selector: "[sortableTable]", outputs: ["sortChange"] }, { kind: "directive", type: TableResizableColumnsDirective, selector: "[appTableResizableColumns]", inputs: ["appTableResizableColumns"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { 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: SignalTextField, selector: "lib-signal-text-field", inputs: ["label", "placeholder", "hint", "inputType", "mask", "prefixText", "prefixIcon", "postfixText", "postfixIcon", "enablePrefixBackground", "enablePostfixBackground", "id", "fieldName", "autocomplete", "minLength", "maxLength", "pattern", "showClearButton", "debounceValueChange", "debounceMs"], outputs: ["valueChange", "enter", "clear", "keyDown", "postfixIconClick"] }, { kind: "component", type: TextButtonSmall, selector: "app-text-button-small" }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ContextMenuButtonComponent, selector: "app-context-menu-button", inputs: ["actions", "positionPreference"], outputs: ["onActionClicked"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDataTableComponent, isStandalone: true, selector: "app-signal-data-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, enableHorizontallyScrollable: { classPropertyName: "enableHorizontallyScrollable", publicName: "enableHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, enableResizableColumns: { classPropertyName: "enableResizableColumns", publicName: "enableResizableColumns", isSignal: true, isRequired: false, transformFunction: null }, enableClickableRows: { classPropertyName: "enableClickableRows", publicName: "enableClickableRows", isSignal: true, isRequired: false, transformFunction: null }, expandableComponent: { classPropertyName: "expandableComponent", publicName: "expandableComponent", isSignal: true, isRequired: false, transformFunction: null }, enableColumnsConfig: { classPropertyName: "enableColumnsConfig", publicName: "enableColumnsConfig", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, disableInitialLoad: { classPropertyName: "disableInitialLoad", publicName: "disableInitialLoad", isSignal: true, isRequired: false, transformFunction: null }, skeletonRowCount: { classPropertyName: "skeletonRowCount", publicName: "skeletonRowCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChanged: "sortChanged", tableStateChanged: "tableStateChanged", onActionPerformed: "onActionPerformed", filterChanged: "filterChanged", onRowClicked: "onRowClicked" }, queries: [{ propertyName: "headerComponents", predicate: ["filter"] }], viewQueries: [{ propertyName: "toolbarContent", first: true, predicate: ["toolbarContent"], descendants: true }, { propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  <div\n    class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n    [class.hidden]=\"!showToolbar()\">\n    @if (enableSearch()) {\n      <lib-signal-text-field\n        class=\"shrink-0\"\n        [inputType]=\"'search'\"\n        [placeholder]=\"'Search...'\"\n        [prefixIcon]=\"'assets/icons/search.svg'\"\n        [debounceValueChange]=\"false\"\n        (valueChange)=\"onSearchTextChanged($event)\">\n      </lib-signal-text-field>\n    }\n    <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().loading()) {\n        <tbody aria-busy=\"true\" aria-live=\"polite\">\n          @for (row of skeletonRows(); track row) {\n            <tr class=\"border-b border-gray-100\">\n              @if (expandableComponent()) {\n                <td class=\"px-4 py-3\">\n                  <app-shimmer type=\"table-cell\" variant=\"actions\" widthClass=\"full\" />\n                </td>\n              }\n\n              @for (column of columnDefs(); track column; let columnIndex = $index) {\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td class=\"px-4 py-3\" [ngClass]=\"getThTrClass(column)\">\n                    <app-shimmer\n                      type=\"table-cell\"\n                      [variant]=\"column.type === 'actions' ? 'actions' : 'text'\"\n                      [widthClass]=\"skeletonWidthForColumn(columnIndex + row)\" />\n                  </td>\n                }\n              }\n\n              @if (enableColumnsConfig()) {\n                <td class=\"px-1 py-3\"></td>\n              }\n            </tr>\n          }\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (!state().loading() && state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (!state().loading() && getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count", "variant", "widthClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: StatusBadgeComponent, selector: "app-status-badge", inputs: ["status", "backgroundColorClass", "indicatorColor", "textColorClass", "borderColorClass", "isUpperCase"] }, { kind: "directive", type: SortableTableDirective, selector: "[sortableTable]", outputs: ["sortChange"] }, { kind: "directive", type: TableResizableColumnsDirective, selector: "[appTableResizableColumns]", inputs: ["appTableResizableColumns"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { 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: SignalTextField, selector: "lib-signal-text-field", inputs: ["label", "placeholder", "hint", "inputType", "mask", "prefixText", "prefixIcon", "postfixText", "postfixIcon", "enablePrefixBackground", "enablePostfixBackground", "id", "fieldName", "autocomplete", "minLength", "maxLength", "pattern", "showClearButton", "debounceValueChange", "debounceMs"], outputs: ["valueChange", "enter", "clear", "keyDown", "postfixIconClick"] }, { kind: "component", type: TextButtonSmall, selector: "app-text-button-small" }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ContextMenuButtonComponent, selector: "app-context-menu-button", inputs: ["actions", "positionPreference"], outputs: ["onActionClicked"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDataTableComponent, decorators: [{
             type: Component,
@@ -4421,14 +4466,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         TextButtonSmall,
                         DynamicRendererComponent,
                         ContextMenuButtonComponent,
-                    ], template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  <div\n    class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n    [class.hidden]=\"!showToolbar()\">\n    @if (enableSearch()) {\n      <lib-signal-text-field\n        class=\"shrink-0\"\n        [inputType]=\"'search'\"\n        [placeholder]=\"'Search...'\"\n        [prefixIcon]=\"'assets/icons/search.svg'\"\n        [debounceValueChange]=\"false\"\n        (valueChange)=\"onSearchTextChanged($event)\">\n      </lib-signal-text-field>\n    }\n    <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().initialLoading()) {\n        <tbody class=\"bg-white text-center py-14\">\n        <tr>\n          <td colspan=\"100\" class=\"h-min\">\n            <div class=\"flex flex-col gap-6 px-6 py-4\">\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n" }]
+                    ], template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  <div\n    class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n    [class.hidden]=\"!showToolbar()\">\n    @if (enableSearch()) {\n      <lib-signal-text-field\n        class=\"shrink-0\"\n        [inputType]=\"'search'\"\n        [placeholder]=\"'Search...'\"\n        [prefixIcon]=\"'assets/icons/search.svg'\"\n        [debounceValueChange]=\"false\"\n        (valueChange)=\"onSearchTextChanged($event)\">\n      </lib-signal-text-field>\n    }\n    <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().loading()) {\n        <tbody aria-busy=\"true\" aria-live=\"polite\">\n          @for (row of skeletonRows(); track row) {\n            <tr class=\"border-b border-gray-100\">\n              @if (expandableComponent()) {\n                <td class=\"px-4 py-3\">\n                  <app-shimmer type=\"table-cell\" variant=\"actions\" widthClass=\"full\" />\n                </td>\n              }\n\n              @for (column of columnDefs(); track column; let columnIndex = $index) {\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td class=\"px-4 py-3\" [ngClass]=\"getThTrClass(column)\">\n                    <app-shimmer\n                      type=\"table-cell\"\n                      [variant]=\"column.type === 'actions' ? 'actions' : 'text'\"\n                      [widthClass]=\"skeletonWidthForColumn(columnIndex + row)\" />\n                  </td>\n                }\n              }\n\n              @if (enableColumnsConfig()) {\n                <td class=\"px-1 py-3\"></td>\n              }\n            </tr>\n          }\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (!state().loading() && state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (!state().loading() && getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n" }]
         }], propDecorators: { headerComponents: [{
                 type: ContentChildren,
                 args: ['filter']
             }], toolbarContent: [{
                 type: ViewChild,
                 args: ['toolbarContent']
-            }], columnDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefs", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], enableHorizontallyScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableHorizontallyScrollable", required: false }] }], enableResizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableResizableColumns", required: false }] }], enableClickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableClickableRows", required: false }] }], expandableComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandableComponent", required: false }] }], enableColumnsConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnsConfig", required: false }] }], filterComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterComponent", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], disableInitialLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableInitialLoad", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }], tableStateChanged: [{ type: i0.Output, args: ["tableStateChanged"] }], onActionPerformed: [{ type: i0.Output, args: ["onActionPerformed"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], onRowClicked: [{ type: i0.Output, args: ["onRowClicked"] }], portal: [{
+            }], columnDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefs", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], enableHorizontallyScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableHorizontallyScrollable", required: false }] }], enableResizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableResizableColumns", required: false }] }], enableClickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableClickableRows", required: false }] }], expandableComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandableComponent", required: false }] }], enableColumnsConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnsConfig", required: false }] }], filterComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterComponent", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], disableInitialLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableInitialLoad", required: false }] }], skeletonRowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRowCount", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }], tableStateChanged: [{ type: i0.Output, args: ["tableStateChanged"] }], onActionPerformed: [{ type: i0.Output, args: ["onActionPerformed"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], onRowClicked: [{ type: i0.Output, args: ["onRowClicked"] }], portal: [{
                 type: ViewChild,
                 args: [CdkPortal]
             }] } });
@@ -4989,7 +5034,7 @@ class ListviewComponent {
         this.onActionPerformed.emit($event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ListviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ListviewComponent, isStandalone: true, selector: "app-listview", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, enableSearchFullWidth: { classPropertyName: "enableSearchFullWidth", publicName: "enableSearchFullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStateChanged: "onStateChanged", onActionPerformed: "onActionPerformed" }, ngImport: i0, template: "<div class=\"h-full flex flex-col gap-4\">\n\n  @if (enableSearch()) {\n    <app-text-input\n      title=\"Search...\"\n      [iconSrc]=\"'assets/icons/search.svg'\"\n      placeholder=\"Search...\"\n      type=\"search\"\n      [fullWidth]=\"enableSearchFullWidth()\"\n      (changeValue)=\"onSearchTextChanged($event)\">\n    </app-text-input>\n  }\n\n  @if (state().success() && state().items().length <= 0) {\n    <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n      <app-no-data-table></app-no-data-table>\n    </div>\n  }\n\n  @if (state().items().length > 0) {\n    <div class=\"flex flex-col overflow-auto\"\n         infiniteScroll\n         [infiniteScrollDistance]=\"2\"\n         [infiniteScrollThrottle]=\"50\"\n         (scrolled)=\"onScroll()\">\n      @for (item of state().items(); track $index) {\n        <app-dynamic-renderer\n          [component]=\"component()\"\n          [rowData]=\"item\"\n          [data]=\"data()\"\n          [rowPosition]=\"$index\"\n          [isLastRow]=\"$last\"\n          (actionPerformed)=\"onRowAction($event)\">\n        </app-dynamic-renderer>\n      }\n    </div>\n  }\n\n  <!--    Shimmer-->\n  @if (state().loading()) {\n    <div class=\"flex flex-col gap-6 py-4\">\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n    </div>\n  }\n\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "size", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ListviewComponent, isStandalone: true, selector: "app-listview", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, enableSearchFullWidth: { classPropertyName: "enableSearchFullWidth", publicName: "enableSearchFullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStateChanged: "onStateChanged", onActionPerformed: "onActionPerformed" }, ngImport: i0, template: "<div class=\"h-full flex flex-col gap-4\">\n\n  @if (enableSearch()) {\n    <app-text-input\n      title=\"Search...\"\n      [iconSrc]=\"'assets/icons/search.svg'\"\n      placeholder=\"Search...\"\n      type=\"search\"\n      [fullWidth]=\"enableSearchFullWidth()\"\n      (changeValue)=\"onSearchTextChanged($event)\">\n    </app-text-input>\n  }\n\n  @if (state().success() && state().items().length <= 0) {\n    <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n      <app-no-data-table></app-no-data-table>\n    </div>\n  }\n\n  @if (state().items().length > 0) {\n    <div class=\"flex flex-col overflow-auto\"\n         infiniteScroll\n         [infiniteScrollDistance]=\"2\"\n         [infiniteScrollThrottle]=\"50\"\n         (scrolled)=\"onScroll()\">\n      @for (item of state().items(); track $index) {\n        <app-dynamic-renderer\n          [component]=\"component()\"\n          [rowData]=\"item\"\n          [data]=\"data()\"\n          [rowPosition]=\"$index\"\n          [isLastRow]=\"$last\"\n          (actionPerformed)=\"onRowAction($event)\">\n        </app-dynamic-renderer>\n      }\n    </div>\n  }\n\n  <!--    Shimmer-->\n  @if (state().loading()) {\n    <div class=\"flex flex-col gap-6 py-4\">\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n    </div>\n  }\n\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "size", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count", "variant", "widthClass"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ListviewComponent, decorators: [{
             type: Component,
@@ -7514,7 +7559,7 @@ class MultiSelectionFieldComponent extends BaseControlValueAccessor {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MultiSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MultiSelectionFieldComponent, isStandalone: true, selector: "app-multi-selection-field", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconPath: { classPropertyName: "dynamicIconPath", publicName: "dynamicIconPath", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, dynamicImageUrlPath: { classPropertyName: "dynamicImageUrlPath", publicName: "dynamicImageUrlPath", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconColor: { classPropertyName: "dynamicIconColor", publicName: "dynamicIconColor", isSignal: true, isRequired: false, transformFunction: null }, customActionText: { classPropertyName: "customActionText", publicName: "customActionText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, isItemCentered: { classPropertyName: "isItemCentered", publicName: "isItemCentered", isSignal: true, isRequired: false, transformFunction: null }, showSelectionTickMark: { classPropertyName: "showSelectionTickMark", publicName: "showSelectionTickMark", isSignal: true, isRequired: false, transformFunction: null }, maximumDisplayItems: { classPropertyName: "maximumDisplayItems", publicName: "maximumDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", onCustomActionClicked: "onCustomActionClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"flex flex-wrap justify-start gap-3\">\n\n    @for (item of getVisibleItems(); track item; let index = $index) {\n      <div class=\"relative flex items-center rounded-lg px-4 py-2 gap-3 cursor-pointer border-2 border-neutral-300\"\n           tabindex=\"0\"\n           (keydown)=\"handleKeydown($event, item)\"\n           [ngStyle]=\"{ 'width': itemWidth() ? itemWidth() + 'px' : null }\"\n           (click)=\"onItemClicked(item)\"\n           [ngClass]=\"{\n                'border-primary-600': isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item),\n                'justify-center': isItemCentered()\n            }\">\n\n\n        @if ((isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item)) && showSelectionTickMark()) {\n          <div class=\"absolute -top-[8px] -right-[8px]\">\n            <svg class=\"h-[18px] w-[18px] text-primary-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path\n                d=\"M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"white\"/>\n              <path\n                d=\"M10 17L5 12L6.41 10.58L10 14.17L17.59 6.58L19 8M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        @if (getDynamicIcon(item)) {\n          @switch (getImageType(item)) {\n            @case ('url') {\n              <img class=\"object-contain\" height=\"20px\" width=\"20px\" [src]=\"getDynamicIcon(item)\" alt=\"\">\n            }\n            @case ('svg') {\n              <app-svg-icon [src]=\"getDynamicIcon(item)!\" [size]=\"18\"\n                            [ngStyle]=\"{'color': getDynamicIconColor(item)}\"></app-svg-icon>\n            }\n          }\n        }\n        <p\n          class=\"text-caption text-center text-black overflow-hidden text-ellipsis whitespace-nowrap\">{{ getDisplayString(item) }}</p>\n      </div>\n    }\n\n    @if (showMoreButton()) {\n      <span\n        (click)=\"showAllItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-info-500\">\n          More\n      </span>\n    }\n\n    @if (showLessButton()) {\n      <span\n        (click)=\"shrinkItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-error-500\">\n          Less\n        </span>\n    }\n\n    @if (customActionText()) {\n      <div (click)=\"customActionClicked()\"\n           class=\"flex items-center rounded-lg px-3 py-3 gap-4 cursor-pointer bg-primary-500\">\n        <p class=\"text-caption text-white\">{{ customActionText() }}</p>\n      </div>\n    }\n\n    @if (state()?.success() && items().length <= 0) {\n      <p class=\"text-caption text-red-700\">{{ noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if ((state()?.failed()) && items().length <= 0) {\n      <p\n        class=\"text-caption text-red-700\">{{ (state()?.error() != null || state()?.error() != '') ? state()?.error() : noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if (state()?.loading()) {\n      <app-shimmer class=\"w-full\" type=\"multiline\"></app-shimmer>\n    }\n  </div>\n\n  <div error>\n    @if (formControl.errors && hasErrors) {\n      <p class=\"text-caption text-red-500\">\n        {{ formControl.errors | humanizeFormMessages: errorMessages() }}\n      </p>\n    }\n  </div>\n</app-base-input>\n", styles: [""], dependencies: [{ kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MultiSelectionFieldComponent, isStandalone: true, selector: "app-multi-selection-field", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconPath: { classPropertyName: "dynamicIconPath", publicName: "dynamicIconPath", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, dynamicImageUrlPath: { classPropertyName: "dynamicImageUrlPath", publicName: "dynamicImageUrlPath", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconColor: { classPropertyName: "dynamicIconColor", publicName: "dynamicIconColor", isSignal: true, isRequired: false, transformFunction: null }, customActionText: { classPropertyName: "customActionText", publicName: "customActionText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, isItemCentered: { classPropertyName: "isItemCentered", publicName: "isItemCentered", isSignal: true, isRequired: false, transformFunction: null }, showSelectionTickMark: { classPropertyName: "showSelectionTickMark", publicName: "showSelectionTickMark", isSignal: true, isRequired: false, transformFunction: null }, maximumDisplayItems: { classPropertyName: "maximumDisplayItems", publicName: "maximumDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", onCustomActionClicked: "onCustomActionClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"flex flex-wrap justify-start gap-3\">\n\n    @for (item of getVisibleItems(); track item; let index = $index) {\n      <div class=\"relative flex items-center rounded-lg px-4 py-2 gap-3 cursor-pointer border-2 border-neutral-300\"\n           tabindex=\"0\"\n           (keydown)=\"handleKeydown($event, item)\"\n           [ngStyle]=\"{ 'width': itemWidth() ? itemWidth() + 'px' : null }\"\n           (click)=\"onItemClicked(item)\"\n           [ngClass]=\"{\n                'border-primary-600': isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item),\n                'justify-center': isItemCentered()\n            }\">\n\n\n        @if ((isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item)) && showSelectionTickMark()) {\n          <div class=\"absolute -top-[8px] -right-[8px]\">\n            <svg class=\"h-[18px] w-[18px] text-primary-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path\n                d=\"M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"white\"/>\n              <path\n                d=\"M10 17L5 12L6.41 10.58L10 14.17L17.59 6.58L19 8M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        @if (getDynamicIcon(item)) {\n          @switch (getImageType(item)) {\n            @case ('url') {\n              <img class=\"object-contain\" height=\"20px\" width=\"20px\" [src]=\"getDynamicIcon(item)\" alt=\"\">\n            }\n            @case ('svg') {\n              <app-svg-icon [src]=\"getDynamicIcon(item)!\" [size]=\"18\"\n                            [ngStyle]=\"{'color': getDynamicIconColor(item)}\"></app-svg-icon>\n            }\n          }\n        }\n        <p\n          class=\"text-caption text-center text-black overflow-hidden text-ellipsis whitespace-nowrap\">{{ getDisplayString(item) }}</p>\n      </div>\n    }\n\n    @if (showMoreButton()) {\n      <span\n        (click)=\"showAllItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-info-500\">\n          More\n      </span>\n    }\n\n    @if (showLessButton()) {\n      <span\n        (click)=\"shrinkItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-error-500\">\n          Less\n        </span>\n    }\n\n    @if (customActionText()) {\n      <div (click)=\"customActionClicked()\"\n           class=\"flex items-center rounded-lg px-3 py-3 gap-4 cursor-pointer bg-primary-500\">\n        <p class=\"text-caption text-white\">{{ customActionText() }}</p>\n      </div>\n    }\n\n    @if (state()?.success() && items().length <= 0) {\n      <p class=\"text-caption text-red-700\">{{ noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if ((state()?.failed()) && items().length <= 0) {\n      <p\n        class=\"text-caption text-red-700\">{{ (state()?.error() != null || state()?.error() != '') ? state()?.error() : noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if (state()?.loading()) {\n      <app-shimmer class=\"w-full\" type=\"multiline\"></app-shimmer>\n    }\n  </div>\n\n  <div error>\n    @if (formControl.errors && hasErrors) {\n      <p class=\"text-caption text-red-500\">\n        {{ formControl.errors | humanizeFormMessages: errorMessages() }}\n      </p>\n    }\n  </div>\n</app-base-input>\n", styles: [""], dependencies: [{ kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count", "variant", "widthClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MultiSelectionFieldComponent, decorators: [{
             type: Component,
@@ -7861,7 +7906,7 @@ class SingleSelectionFieldComponent extends BaseControlValueAccessor {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SingleSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SingleSelectionFieldComponent, isStandalone: true, selector: "app-single-selection-field", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconPath: { classPropertyName: "dynamicIconPath", publicName: "dynamicIconPath", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, dynamicImageUrlPath: { classPropertyName: "dynamicImageUrlPath", publicName: "dynamicImageUrlPath", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconColor: { classPropertyName: "dynamicIconColor", publicName: "dynamicIconColor", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, customActionText: { classPropertyName: "customActionText", publicName: "customActionText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, isItemCentered: { classPropertyName: "isItemCentered", publicName: "isItemCentered", isSignal: true, isRequired: false, transformFunction: null }, showSelectionTickMark: { classPropertyName: "showSelectionTickMark", publicName: "showSelectionTickMark", isSignal: true, isRequired: false, transformFunction: null }, itemPlacement: { classPropertyName: "itemPlacement", publicName: "itemPlacement", isSignal: true, isRequired: false, transformFunction: null }, maximumDisplayItems: { classPropertyName: "maximumDisplayItems", publicName: "maximumDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", onCustomActionClicked: "onCustomActionClicked" }, usesInheritance: true, ngImport: i0, template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"flex flex-wrap gap-3\"\n       [ngClass]=\"[\n       itemPlacement() == 'start' ? 'justify-start' : '',\n       itemPlacement() == 'space-between' ? 'justify-between' : '']\">\n\n    @for (item of getVisibleItems(); track item) {\n      <div\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border-2 border-neutral-300\"\n        tabindex=\"0\"\n        (keydown)=\"handleKeydown($event, item)\"\n        [ngStyle]=\"{ 'width': itemWidth() ? itemWidth() + 'px' : null }\"\n        (click)=\"onItemClicked(item)\"\n        [ngClass]=\"{\n        'border-primary-600': getPropertyId(item) == formControl.value || selectedItem() == item,\n        'justify-center': isItemCentered()\n      }\">\n\n        @if ((getPropertyId(item) == formControl.value || selectedItem() == item) && showSelectionTickMark()) {\n          <div class=\"absolute -top-[8px] -right-[8px]\">\n            <svg class=\"h-[18px] w-[18px] text-primary-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path\n                d=\"M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"white\"/>\n              <path\n                d=\"M10 17L5 12L6.41 10.58L10 14.17L17.59 6.58L19 8M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        @if (getDynamicIcon(item)) {\n          @switch (getImageType(item)) {\n            @case ('url') {\n              <img class=\"object-contain\" height=\"20px\" width=\"20px\" [src]=\"getDynamicIcon(item)\" alt=\"\">\n            }\n            @case ('svg') {\n              <app-svg-icon [src]=\"getDynamicIcon(item)!\" [size]=\"18\"\n                            [ngStyle]=\"{'color': getDynamicIconColor(item)}\"></app-svg-icon>\n            }\n          }\n        }\n        <p\n          class=\"w-full text-caption text-center text-black overflow-hidden text-ellipsis whitespace-nowrap\">{{ getDisplayString(item) }}</p>\n        <ng-content select=\"[post]\"></ng-content>\n      </div>\n    }\n\n    @if (showMoreButton()) {\n      <span\n        (click)=\"showAllItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-info-500\">\n          More\n      </span>\n    }\n\n    @if (showLessButton()) {\n      <span\n        (click)=\"shrinkItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-error-500\">\n          Less\n        </span>\n    }\n\n    @if (customActionText()) {\n      <div (click)=\"customActionClicked()\"\n           class=\"flex items-center rounded-lg px-3 py-3 gap-4 cursor-pointer bg-primary-500\">\n        <p class=\"text-caption text-white\">{{ customActionText() }}</p>\n      </div>\n    }\n\n    @if ((state()?.success()) && items().length <= 0) {\n      <p class=\"text-caption text-red-700\">{{ noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if ((state()?.error()) && items().length <= 0) {\n      <p\n        class=\"text-caption text-red-700\">{{ (state()?.error() != null || state()?.error() != '') ? state()?.error() : noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if (state()?.loading()) {\n      <app-shimmer class=\"w-full\" type=\"multiline\"></app-shimmer>\n    }\n  </div>\n\n  <div error>\n    @if (formControl.errors && hasErrors) {\n      <p class=\"text-caption text-red-500\">\n        {{ formControl.errors | humanizeFormMessages: errorMessages() }}\n      </p>\n    }\n  </div>\n</app-base-input>\n\n", styles: [""], dependencies: [{ kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SingleSelectionFieldComponent, isStandalone: true, selector: "app-single-selection-field", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconPath: { classPropertyName: "dynamicIconPath", publicName: "dynamicIconPath", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, dynamicImageUrlPath: { classPropertyName: "dynamicImageUrlPath", publicName: "dynamicImageUrlPath", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconColor: { classPropertyName: "dynamicIconColor", publicName: "dynamicIconColor", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, customActionText: { classPropertyName: "customActionText", publicName: "customActionText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, isItemCentered: { classPropertyName: "isItemCentered", publicName: "isItemCentered", isSignal: true, isRequired: false, transformFunction: null }, showSelectionTickMark: { classPropertyName: "showSelectionTickMark", publicName: "showSelectionTickMark", isSignal: true, isRequired: false, transformFunction: null }, itemPlacement: { classPropertyName: "itemPlacement", publicName: "itemPlacement", isSignal: true, isRequired: false, transformFunction: null }, maximumDisplayItems: { classPropertyName: "maximumDisplayItems", publicName: "maximumDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", onCustomActionClicked: "onCustomActionClicked" }, usesInheritance: true, ngImport: i0, template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"flex flex-wrap gap-3\"\n       [ngClass]=\"[\n       itemPlacement() == 'start' ? 'justify-start' : '',\n       itemPlacement() == 'space-between' ? 'justify-between' : '']\">\n\n    @for (item of getVisibleItems(); track item) {\n      <div\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border-2 border-neutral-300\"\n        tabindex=\"0\"\n        (keydown)=\"handleKeydown($event, item)\"\n        [ngStyle]=\"{ 'width': itemWidth() ? itemWidth() + 'px' : null }\"\n        (click)=\"onItemClicked(item)\"\n        [ngClass]=\"{\n        'border-primary-600': getPropertyId(item) == formControl.value || selectedItem() == item,\n        'justify-center': isItemCentered()\n      }\">\n\n        @if ((getPropertyId(item) == formControl.value || selectedItem() == item) && showSelectionTickMark()) {\n          <div class=\"absolute -top-[8px] -right-[8px]\">\n            <svg class=\"h-[18px] w-[18px] text-primary-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path\n                d=\"M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"white\"/>\n              <path\n                d=\"M10 17L5 12L6.41 10.58L10 14.17L17.59 6.58L19 8M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        @if (getDynamicIcon(item)) {\n          @switch (getImageType(item)) {\n            @case ('url') {\n              <img class=\"object-contain\" height=\"20px\" width=\"20px\" [src]=\"getDynamicIcon(item)\" alt=\"\">\n            }\n            @case ('svg') {\n              <app-svg-icon [src]=\"getDynamicIcon(item)!\" [size]=\"18\"\n                            [ngStyle]=\"{'color': getDynamicIconColor(item)}\"></app-svg-icon>\n            }\n          }\n        }\n        <p\n          class=\"w-full text-caption text-center text-black overflow-hidden text-ellipsis whitespace-nowrap\">{{ getDisplayString(item) }}</p>\n        <ng-content select=\"[post]\"></ng-content>\n      </div>\n    }\n\n    @if (showMoreButton()) {\n      <span\n        (click)=\"showAllItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-info-500\">\n          More\n      </span>\n    }\n\n    @if (showLessButton()) {\n      <span\n        (click)=\"shrinkItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-error-500\">\n          Less\n        </span>\n    }\n\n    @if (customActionText()) {\n      <div (click)=\"customActionClicked()\"\n           class=\"flex items-center rounded-lg px-3 py-3 gap-4 cursor-pointer bg-primary-500\">\n        <p class=\"text-caption text-white\">{{ customActionText() }}</p>\n      </div>\n    }\n\n    @if ((state()?.success()) && items().length <= 0) {\n      <p class=\"text-caption text-red-700\">{{ noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if ((state()?.error()) && items().length <= 0) {\n      <p\n        class=\"text-caption text-red-700\">{{ (state()?.error() != null || state()?.error() != '') ? state()?.error() : noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if (state()?.loading()) {\n      <app-shimmer class=\"w-full\" type=\"multiline\"></app-shimmer>\n    }\n  </div>\n\n  <div error>\n    @if (formControl.errors && hasErrors) {\n      <p class=\"text-caption text-red-500\">\n        {{ formControl.errors | humanizeFormMessages: errorMessages() }}\n      </p>\n    }\n  </div>\n</app-base-input>\n\n", styles: [""], dependencies: [{ kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count", "variant", "widthClass"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SingleSelectionFieldComponent, decorators: [{
             type: Component,