s4y-ui 5.8.2 → 5.9.2

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, ViewEncapsulation, effect, 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, effect, ViewEncapsulation, 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';
@@ -1062,6 +1062,7 @@ class TableComponent {
     data = input([]);
     customSort = input(false);
     multipleSort = input(false);
+    initialSorts = input([]);
     sortFunction = output();
     multiSortFunction = output();
     sortField = input(null);
@@ -1069,31 +1070,33 @@ class TableComponent {
     sorts = signal([]);
     sortedData = computed(() => {
         let originalData = [...this.data()];
-        const sortBy = this.sortBy();
-        const direction = this.sortDirection();
         if (this.customSort())
             return originalData;
-        if (!originalData.length || !sortBy)
+        if (this.multipleSort()) {
+            const sorts = this.sorts();
+            if (!sorts.length)
+                return originalData;
+            return originalData
+                .map((item, idx) => ({ item, idx }))
+                .sort((x, y) => {
+                for (const s of sorts) {
+                    const key = String(s.key);
+                    const res = this.compareValues(x.item[key], y.item[key], s.value);
+                    if (res !== 0)
+                        return res;
+                }
+                return x.idx - y.idx;
+            })
+                .map((x) => x.item);
+        }
+        const sortBy = this.sortBy();
+        const direction = this.sortDirection();
+        if (!originalData.length || !sortBy || direction === 'none')
             return originalData;
         const header = this.headers().find((h) => h.key === sortBy);
         if (!header || header.sortable === false)
             return originalData;
-        if (direction === 'none')
-            return originalData;
-        let copiedData = [...this.data()];
-        return copiedData.sort((a, b) => {
-            const valueA = a[sortBy];
-            const valueB = b[sortBy];
-            if (typeof valueA === 'string' && typeof valueB === 'string') {
-                return direction === 'asc'
-                    ? valueA.localeCompare(valueB)
-                    : valueB.localeCompare(valueA);
-            }
-            if (typeof valueA === 'number' && typeof valueB === 'number') {
-                return direction === 'asc' ? valueA - valueB : valueB - valueA;
-            }
-            return 0;
-        });
+        return [...originalData].sort((a, b) => this.compareValues(a[sortBy], b[sortBy], direction));
     });
     sortDirection = signal('asc');
     isLoading = input(false);
@@ -1109,10 +1112,68 @@ class TableComponent {
     errorMessageDefault = input('Não foi possível carregar os dados.');
     emptyMessageDefault = input(' Não encontramos dados para exibir.');
     sortBy = signal(undefined);
-    constructor() { }
+    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 }));
+            console.log(normalized);
+            this.sorts.set(normalized);
+            this.multiSortFunction.emit(normalized);
+        });
+        // 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');
+        });
+    }
     ngAfterViewInit() { }
+    compareValues(a, b, dir) {
+        if (a == null && b == null)
+            return 0;
+        if (a == null)
+            return dir === 'asc' ? -1 : 1;
+        if (b == null)
+            return dir === 'asc' ? 1 : -1;
+        if (typeof a === 'number' && typeof b === 'number') {
+            return dir === 'asc' ? a - b : b - a;
+        }
+        const sa = String(a);
+        const sb = String(b);
+        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 }, 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 }], 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,
@@ -1141,6 +1202,7 @@ class TableSortDirective {
     el;
     renderer;
     table;
+    injector;
     s4ySortableColumnName = input();
     s4ySortable = input(false);
     oldSortableColumnName;
@@ -1148,16 +1210,17 @@ class TableSortDirective {
     spanElement;
     oldDirection = signal('none');
     newDirection = signal('none');
-    constructor(el, renderer, table) {
+    constructor(el, renderer, table, injector) {
         this.el = el;
         this.renderer = renderer;
         this.table = table;
+        this.injector = injector;
     }
     ngAfterContentInit() {
         if (!this.s4ySortable())
             return;
         this.insertSortIcon();
-        this.selectedInitialSort();
+        this.setupReactivePaint();
     }
     emitSortableColumnName() {
         if (!this.s4ySortable())
@@ -1166,6 +1229,17 @@ class TableSortDirective {
         const sortByColumnName = this.s4ySortableColumnName();
         if (!sortByColumnName)
             return;
+        if (this.isMultipleSort) {
+            const current = this.table
+                .sorts()
+                .find((s) => String(s.key) === String(sortByColumnName))?.value ??
+                'none';
+            this.newDirection.set(current);
+        }
+        else {
+            const isThis = String(this.table.sortBy() ?? '') === String(sortByColumnName);
+            this.newDirection.set(isThis ? this.table.sortDirection() : 'none');
+        }
         this.oldDirection.set(this.newDirection());
         this.newDirection.update((direction) => {
             switch (direction) {
@@ -1284,12 +1358,6 @@ class TableSortDirective {
     autoSortable(columnName) {
         this.table.sortBy.set(columnName);
     }
-    customSortable() {
-        this.table.sortFunction.emit({
-            key: this.s4ySortableColumnName(),
-            value: this.newDirection(),
-        });
-    }
     multipleSortable() {
         const key = this.s4ySortableColumnName();
         if (!key)
@@ -1371,9 +1439,6 @@ class TableSortDirective {
             return [];
         return Array.from(table.querySelectorAll('th'));
     }
-    getThByColumnName(columnName) {
-        return this.getAllThElements().find((th) => th.getAttribute('ng-reflect-s4y-sortable-column-name') === columnName);
-    }
     customSortableSingleLast() {
         const key = this.s4ySortableColumnName();
         if (!key)
@@ -1384,15 +1449,50 @@ class TableSortDirective {
         this.table.sortFunction.emit({ key, value });
         this.table.multiSortFunction.emit(updatedList);
     }
-    clearAllActiveStyles() {
-        const tableEl = this.el.nativeElement.closest('table');
-        if (!tableEl)
-            return;
-        const ths = Array.from(tableEl.querySelectorAll('th'));
-        for (const th of ths) {
-            this.removeActiveStyle(th);
-            this.renderer.removeClass(th, 's4y-th-hover');
-        }
+    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') {
+                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;
+            }
+        }, {
+            injector: this.injector,
+        });
     }
     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>';
@@ -1400,7 +1500,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 }], 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.Injector }], 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: [{
@@ -1409,7 +1509,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 }], propDecorators: { emitSortableColumnName: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: TableComponent }, { type: i0.Injector }], propDecorators: { emitSortableColumnName: [{
                 type: HostListener,
                 args: ['click']
             }], mouseOver: [{