s4y-ui 6.2.0 → 6.4.0

package/fesm2022/s4y-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, output, effect, ViewEncapsulation, Inject, TemplateRef, ViewChild, ContentChildren, ElementRef, ViewContainerRef, viewChild, Renderer2, DestroyRef, contentChild, InjectionToken, Injector, afterNextRender, SecurityContext, ChangeDetectorRef } from '@angular/core';
+import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, output, ViewEncapsulation, effect, Inject, TemplateRef, ViewChild, ContentChildren, ElementRef, ViewContainerRef, viewChild, Renderer2, DestroyRef, contentChild, InjectionToken, Injector, afterNextRender, SecurityContext, ChangeDetectorRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, AsyncPipe, JsonPipe, NgClass, NgTemplateOutlet, DOCUMENT, NgIf, NgStyle } from '@angular/common';
 import * as i1$1 from '@angular/platform-browser';
@@ -7,15 +7,15 @@ import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$2 from '@angular/router';
 import { Router, RouterModule, GuardsCheckEnd } from '@angular/router';
 import { catchError, map, filter } from 'rxjs/operators';
-import { defer, from, throwError, BehaviorSubject, map as map$1, Subject, takeUntil, Subscription, filter as filter$1, fromEvent, isObservable, firstValueFrom, ReplaySubject, take, finalize, catchError as catchError$1, of } from 'rxjs';
+import { defer, from, throwError, Subject, BehaviorSubject, map as map$1, takeUntil, Subscription, filter as filter$1, fromEvent, isObservable, firstValueFrom, ReplaySubject, take, finalize, catchError as catchError$1, of } from 'rxjs';
 import * as i1$3 from '@angular/cdk/scrolling';
 import { CdkScrollableModule, CdkScrollable } from '@angular/cdk/scrolling';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
 import { trigger, transition, animate, style, group, query, state } from '@angular/animations';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 class DashboardLayoutComponent {
     asideTemplate;
@@ -1058,6 +1058,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }], ctorParameters: () => [] });
 
 class TableComponent {
+    sortStateChanged$ = new Subject();
     headers = input([]);
     data = input([]);
     customSort = input(false);
@@ -1112,54 +1113,104 @@ class TableComponent {
     errorMessageDefault = input('Não foi possível carregar os dados.');
     emptyMessageDefault = input(' Não encontramos dados para exibir.');
     sortBy = signal(undefined);
+    lastPresetSignature = '';
+    ngOnChanges(changes) {
+        if (this.multipleSort()) {
+            if (changes['initialSorts'] || changes['headers']) {
+                this.applyInitialSortsOnce();
+            }
+            return;
+        }
+        if (changes['sortField'] || changes['sortOrder'] || changes['headers']) {
+            this.applySingleSortPreset();
+        }
+    }
+    applyInitialSortsOnce() {
+        const incoming = this.initialSorts() ?? [];
+        const allowedKeys = new Set(this.headers().map((h) => String(h.key)));
+        const normalized = incoming
+            .filter((s) => s.value !== 'none')
+            .filter((s) => allowedKeys.has(String(s.key)))
+            .filter((s) => {
+            const header = this.headers().find((h) => String(h.key) === String(s.key));
+            return !!header && header.sortable !== false;
+        })
+            .map((s) => ({ key: String(s.key), value: s.value }));
+        const signature = JSON.stringify(normalized);
+        if (signature === this.lastPresetSignature)
+            return;
+        this.lastPresetSignature = signature;
+        this.sorts.set(normalized);
+        this.sortStateChanged$.next();
+    }
+    applySingleSortPreset() {
+        const field = this.sortField();
+        const order = this.sortOrder();
+        if (!field || order === 'none') {
+            this.sortBy.set(undefined);
+            this.sortDirection.set('none');
+            return;
+        }
+        const header = this.headers().find((h) => String(h.key) === String(field));
+        if (!header || header.sortable === false) {
+            this.sortBy.set(undefined);
+            this.sortDirection.set('none');
+            return;
+        }
+        this.sortBy.set(String(field));
+        this.sortDirection.set(order ?? 'none');
+        this.sortStateChanged$.next();
+    }
     constructor() {
         // MULTI: initialSorts -> sorts (já tem)
-        effect(() => {
-            if (!this.multipleSort())
-                return;
-            const allowedKeys = new Set(this.headers().map((h) => String(h.key)));
-            const incoming = this.initialSorts() ?? [];
-            const map = new Map();
-            for (const s of incoming) {
-                const key = String(s.key);
-                if (!allowedKeys.has(key))
-                    continue;
-                const header = this.headers().find((h) => String(h.key) === key);
-                if (!header || header.sortable === false)
-                    continue;
-                if (s.value === 'none')
-                    continue;
-                map.set(key, s.value);
-            }
-            const normalized = Array.from(map.entries()).map(([key, value]) => ({ key, value }));
-            this.sorts.set(normalized);
-            this.multiSortFunction.emit(normalized);
-            console.log('[TABLE] headers:', this.headers());
-            console.log('[TABLE] incoming initialSorts:', this.initialSorts());
-            console.log('[TABLE] normalized:', normalized);
-        }, {
-            allowSignalWrites: true,
-        });
+        // effect(
+        //   () => {
+        //     if (!this.multipleSort()) return;
+        //     const allowedKeys = new Set(this.headers().map((h) => String(h.key)));
+        //     const incoming = this.initialSorts() ?? [];
+        //     const map = new Map<string, ISortDirection>();
+        //     for (const s of incoming) {
+        //       const key = String(s.key);
+        //       if (!allowedKeys.has(key)) continue;
+        //       const header = this.headers().find((h) => String(h.key) === key);
+        //       if (!header || header.sortable === false) continue;
+        //       if (s.value === 'none') continue;
+        //       map.set(key, s.value);
+        //     }
+        //     const normalized: ICustomSort[] = Array.from(map.entries()).map(
+        //       ([key, value]) => ({ key, value }),
+        //     );
+        //     this.sorts.set(normalized);
+        //     this.multiSortFunction.emit(normalized);
+        //     console.log('[TABLE] headers:', this.headers());
+        //     console.log('[TABLE] incoming initialSorts:', this.initialSorts());
+        //     console.log('[TABLE] normalized:', normalized);
+        //   },
+        //   {
+        //     allowSignalWrites: true,
+        //   },
+        // );
         // SINGLE: sortField/sortOrder -> sortBy/sortDirection (faltava isso)
-        effect(() => {
-            if (this.multipleSort())
-                return; // se virou multi, não aplica single preset
-            const field = this.sortField();
-            const order = this.sortOrder();
-            if (!field) {
-                this.sortBy.set(undefined);
-                this.sortDirection.set('none');
-                return;
-            }
-            const header = this.headers().find((h) => String(h.key) === String(field));
-            if (!header || header.sortable === false) {
-                this.sortBy.set(undefined);
-                this.sortDirection.set('none');
-                return;
-            }
-            this.sortBy.set(String(field));
-            this.sortDirection.set(order ?? 'none');
-        });
+        // effect(() => {
+        //   if (this.multipleSort()) return; // se virou multi, não aplica single preset
+        //   const field = this.sortField();
+        //   const order = this.sortOrder();
+        //   if (!field) {
+        //     this.sortBy.set(undefined);
+        //     this.sortDirection.set('none');
+        //     return;
+        //   }
+        //   const header = this.headers().find(
+        //     (h) => String(h.key) === String(field),
+        //   );
+        //   if (!header || header.sortable === false) {
+        //     this.sortBy.set(undefined);
+        //     this.sortDirection.set('none');
+        //     return;
+        //   }
+        //   this.sortBy.set(String(field));
+        //   this.sortDirection.set(order ?? 'none');
+        // });
     }
     ngAfterViewInit() { }
     compareValues(a, b, dir) {
@@ -1177,7 +1228,7 @@ class TableComponent {
         return dir === 'asc' ? sa.localeCompare(sb) : sb.localeCompare(sa);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TableComponent, isStandalone: true, selector: "s4y-table", inputs: { headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, customSort: { classPropertyName: "customSort", publicName: "customSort", isSignal: true, isRequired: false, transformFunction: null }, multipleSort: { classPropertyName: "multipleSort", publicName: "multipleSort", isSignal: true, isRequired: false, transformFunction: null }, initialSorts: { classPropertyName: "initialSorts", publicName: "initialSorts", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortFunction: "sortFunction", multiSortFunction: "multiSortFunction" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "headTemplate", first: true, predicate: ["headTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "customEmptyTemplate", first: true, predicate: ["customEmptyTemplate"], descendants: true }, { propertyName: "customErrorTemplate", first: true, predicate: ["customErrorTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-table-container\" [ngStyle]=\"tableStyle()\" cdkScrollable>\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else if (customErrorTemplate) {\r\n          <ng-container [ngTemplateOutlet]=\"customErrorTemplate\"></ng-container>\r\n        } @else {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              {{ errorMessageDefault() }}\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  @for (item of sortedData(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else if (customEmptyTemplate) {\r\n      <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></ng-container>\r\n    } @else {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          {{ emptyMessageDefault() }}\r\n        </td>\r\n      </tr>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem;width:100%;container-type:inline-size}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i1$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TableComponent, isStandalone: true, selector: "s4y-table", inputs: { headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, customSort: { classPropertyName: "customSort", publicName: "customSort", isSignal: true, isRequired: false, transformFunction: null }, multipleSort: { classPropertyName: "multipleSort", publicName: "multipleSort", isSignal: true, isRequired: false, transformFunction: null }, initialSorts: { classPropertyName: "initialSorts", publicName: "initialSorts", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortFunction: "sortFunction", multiSortFunction: "multiSortFunction" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "headTemplate", first: true, predicate: ["headTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "customEmptyTemplate", first: true, predicate: ["customEmptyTemplate"], descendants: true }, { propertyName: "customErrorTemplate", first: true, predicate: ["customErrorTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"s4y-table-container\" [ngStyle]=\"tableStyle()\" cdkScrollable>\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else if (customErrorTemplate) {\r\n          <ng-container [ngTemplateOutlet]=\"customErrorTemplate\"></ng-container>\r\n        } @else {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              {{ errorMessageDefault() }}\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  @for (item of sortedData(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else if (customEmptyTemplate) {\r\n      <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></ng-container>\r\n    } @else {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          {{ emptyMessageDefault() }}\r\n        </td>\r\n      </tr>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem;width:100%;container-type:inline-size}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i1$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -1206,7 +1257,7 @@ class TableSortDirective {
     el;
     renderer;
     table;
-    injector;
+    destroyRef;
     s4ySortableColumnName = input();
     s4ySortable = input(false);
     oldSortableColumnName;
@@ -1214,17 +1265,20 @@ class TableSortDirective {
     spanElement;
     oldDirection = signal('none');
     newDirection = signal('none');
-    constructor(el, renderer, table, injector) {
+    constructor(el, renderer, table, destroyRef) {
         this.el = el;
         this.renderer = renderer;
         this.table = table;
-        this.injector = injector;
+        this.destroyRef = destroyRef;
     }
     ngAfterContentInit() {
         if (!this.s4ySortable())
             return;
         this.insertSortIcon();
-        this.setupReactivePaint();
+        this.repaint();
+        this.table.sortStateChanged$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.repaint());
     }
     emitSortableColumnName() {
         if (!this.s4ySortable())
@@ -1272,6 +1326,7 @@ class TableSortDirective {
         this.clearHoverStyleTH();
         this.handleStyleTH();
         this.handleDirectionIcon();
+        this.table.sortStateChanged$.next();
     }
     mouseOver() {
         if (!this.hostThElement)
@@ -1453,37 +1508,19 @@ class TableSortDirective {
         this.table.sortFunction.emit({ key, value });
         this.table.multiSortFunction.emit(updatedList);
     }
-    setupReactivePaint() {
-        effect(() => {
-            if (!this.s4ySortable())
-                return;
-            const key = this.s4ySortableColumnName();
-            if (!key)
-                return;
-            if (this.isMultipleSort) {
-                const found = this.table
-                    .sorts()
-                    .find((s) => String(s.key) === String(key));
-                const dir = found?.value ?? 'none';
-                this.newDirection.set(dir);
-                if (dir === 'none') {
-                    this.removeActiveStyle(this.hostThElement);
-                    if (this.spanElement)
-                        this.spanElement.innerHTML = this.ascIcon;
-                    return;
-                }
-                this.setActiveStyle(this.hostThElement);
-                if (this.spanElement) {
-                    this.spanElement.innerHTML =
-                        dir === 'desc' ? this.descIcon : this.ascIcon;
-                }
-                return;
-            }
-            const sortBy = this.table.sortBy();
-            const dir = this.table.sortDirection();
-            const isThis = String(sortBy ?? '') === String(key);
-            this.newDirection.set(isThis ? dir : 'none');
-            if (!isThis || dir === 'none') {
+    repaint() {
+        if (!this.s4ySortable())
+            return;
+        const key = this.s4ySortableColumnName();
+        if (!key)
+            return;
+        if (this.isMultipleSort) {
+            const found = this.table
+                .sorts()
+                .find((s) => String(s.key) === String(key));
+            const dir = found?.value ?? 'none';
+            this.newDirection.set(dir);
+            if (dir === 'none') {
                 this.removeActiveStyle(this.hostThElement);
                 if (this.spanElement)
                     this.spanElement.innerHTML = this.ascIcon;
@@ -1494,9 +1531,24 @@ class TableSortDirective {
                 this.spanElement.innerHTML =
                     dir === 'desc' ? this.descIcon : this.ascIcon;
             }
-        }, {
-            injector: this.injector,
-        });
+            return;
+        }
+        // single
+        const sortBy = this.table.sortBy();
+        const dir = this.table.sortDirection();
+        const isThis = String(sortBy ?? '') === String(key);
+        this.newDirection.set(isThis ? dir : 'none');
+        if (!isThis || dir === 'none') {
+            this.removeActiveStyle(this.hostThElement);
+            if (this.spanElement)
+                this.spanElement.innerHTML = this.ascIcon;
+            return;
+        }
+        this.setActiveStyle(this.hostThElement);
+        if (this.spanElement) {
+            this.spanElement.innerHTML =
+                dir === 'desc' ? this.descIcon : this.ascIcon;
+        }
     }
     get ascIcon() {
         return '<svg  style="height: 1.4rem; width: 1.4rem;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM21.9999 8L17.9999 3L13.9999 8H16.9999V21H18.9999V8H21.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z"></path></svg>';
@@ -1504,7 +1556,7 @@ class TableSortDirective {
     get descIcon() {
         return '<svg style="height: 1.4rem; width: 1.4rem;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z"></path></svg>';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableSortDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: TableComponent }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableSortDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: TableComponent }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TableSortDirective, isStandalone: true, selector: "[s4ySortableColumnName]", inputs: { s4ySortableColumnName: { classPropertyName: "s4ySortableColumnName", publicName: "s4ySortableColumnName", isSignal: true, isRequired: false, transformFunction: null }, s4ySortable: { classPropertyName: "s4ySortable", publicName: "s4ySortable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "emitSortableColumnName()", "mouseenter": "mouseOver()", "mouseleave": "mouseLeave()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableSortDirective, decorators: [{
@@ -1513,7 +1565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     selector: '[s4ySortableColumnName]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: TableComponent }, { type: i0.Injector }], propDecorators: { emitSortableColumnName: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: TableComponent }, { type: i0.DestroyRef }], propDecorators: { emitSortableColumnName: [{
                 type: HostListener,
                 args: ['click']
             }], mouseOver: [{