s4y-ui 6.3.0 → 6.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- 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';
2
+ 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';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule, AsyncPipe, JsonPipe, NgClass, NgTemplateOutlet, DOCUMENT, NgIf, NgStyle } from '@angular/common';
5
5
  import * as i1$1 from '@angular/platform-browser';
@@ -7,15 +7,15 @@ import { DomSanitizer } from '@angular/platform-browser';
7
7
  import * as i1$2 from '@angular/router';
8
8
  import { Router, RouterModule, GuardsCheckEnd } from '@angular/router';
9
9
  import { catchError, map, filter } from 'rxjs/operators';
10
- 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';
10
+ 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';
11
11
  import * as i1$3 from '@angular/cdk/scrolling';
12
12
  import { CdkScrollableModule, CdkScrollable } from '@angular/cdk/scrolling';
13
13
  import * as i2 from '@angular/forms';
14
14
  import { NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
15
15
  import { trigger, transition, animate, style, group, query, state } from '@angular/animations';
16
+ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
16
17
  import { Overlay } from '@angular/cdk/overlay';
17
18
  import { TemplatePortal, ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
18
- import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
19
19
 
20
20
  class DashboardLayoutComponent {
21
21
  asideTemplate;
@@ -432,11 +432,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
432
432
 
433
433
  class FormFieldComponent {
434
434
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
435
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FormFieldComponent, isStandalone: false, selector: "s4y-form-field", ngImport: i0, template: "<label class=\"s4y-form-field\">\r\n <ng-content select=\"s4y-label\"></ng-content>\r\n <div class=\"s4y-input-wrapper\">\r\n <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n <ng-content select=\"input, textarea\"></ng-content>\r\n <ng-content select=\"s4y-input-sufix\"></ng-content>\r\n </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n", styles: ["@charset \"UTF-8\";.s4y-form-field{display:flex;flex-direction:column;gap:.8rem}.s4y-form-field .s4y-input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease}.s4y-form-field:has(input[size=extra-small]) .s4y-input-wrapper,.s4y-form-field:has(textarea[size=extra-small]) .s4y-input-wrapper{height:2.8rem;padding:.4rem .8rem}.s4y-form-field:has(input[size=small]) .s4y-input-wrapper,.s4y-form-field:has(textarea[size=small]) .s4y-input-wrapper{height:3.6rem;padding:.6rem 1.2rem}.s4y-form-field:has(input[size=medium]) .s4y-input-wrapper,.s4y-form-field:has(textarea[size=medium]) .s4y-input-wrapper,.s4y-form-field:not(:has(input[size])):not(:has(textarea[size])) .s4y-input-wrapper{height:4.6rem;padding:.8rem 1.6rem}.s4y-form-field:has(input[size=large]) .s4y-input-wrapper,.s4y-form-field:has(textarea[size=large]) .s4y-input-wrapper{height:5.6rem;padding:1rem 2rem}.s4y-form-field:has(input:disabled) .s4y-input-wrapper,.s4y-form-field:has(textarea:disabled) .s4y-input-wrapper{background-color:var(--gray-200)}.s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) .s4y-input-wrapper,.s4y-form-field:has(textarea.ng-invalid.ng-touched.ng-dirty) .s4y-input-wrapper{border:1px solid var(--danger-color);transition:.5s ease;background-color:#fff6f5}::ng-deep .s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) s4y-label,::ng-deep .s4y-form-field:has(textarea.ng-invalid.ng-touched.ng-dirty) s4y-label{color:var(--danger-color);transition:.5s ease}.s4y-form-field:has(input:focus) .s4y-input-wrapper,.s4y-form-field:has(textarea:focus) .s4y-input-wrapper{border:1px solid var(--primary-color)}\n"] });
435
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FormFieldComponent, isStandalone: false, selector: "s4y-form-field", ngImport: i0, template: "<label class=\"s4y-form-field\">\r\n <ng-content select=\"s4y-label\"></ng-content>\r\n <div class=\"s4y-input-wrapper\">\r\n <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n <ng-content select=\"input, textarea\"></ng-content>\r\n <ng-content select=\"s4y-input-sufix\"></ng-content>\r\n </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n", styles: ["@charset \"UTF-8\";.s4y-form-field{display:flex;flex-direction:column;gap:.8rem}.s4y-form-field .s4y-input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease}.s4y-form-field:has(input[size=extra-small]) .s4y-input-wrapper{height:2.8rem;padding:.4rem .8rem}.s4y-form-field:has(input[size=small]) .s4y-input-wrapper{height:3.6rem;padding:.6rem 1.2rem}.s4y-form-field:has(input[size=medium]) .s4y-input-wrapper,.s4y-form-field:has(input):not(:has(input[size])) .s4y-input-wrapper{height:4.6rem;padding:.8rem 1.6rem}.s4y-form-field:has(input[size=large]) .s4y-input-wrapper{height:5.6rem;padding:1rem 2rem}:host ::ng-deep .s4y-form-field textarea{width:100%;display:block;border:0;outline:0;background:transparent;line-height:1.5;resize:none!important;min-height:100%;height:auto}.s4y-form-field:has(input:disabled) .s4y-input-wrapper,.s4y-form-field:has(textarea:disabled) .s4y-input-wrapper{background-color:var(--gray-200)}.s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) .s4y-input-wrapper,.s4y-form-field:has(textarea.ng-invalid.ng-touched.ng-dirty) .s4y-input-wrapper{border:1px solid var(--danger-color);transition:.5s ease;background-color:#fff6f5}.s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) s4y-label,.s4y-form-field:has(textarea.ng-invalid.ng-touched.ng-dirty) s4y-label{color:var(--danger-color);transition:.5s ease}.s4y-form-field:has(input:focus) .s4y-input-wrapper,.s4y-form-field:has(textarea:focus) .s4y-input-wrapper{border:1px solid var(--primary-color)}\n"] });
436
436
  }
437
437
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FormFieldComponent, decorators: [{
438
438
  type: Component,
439
- args: [{ selector: 's4y-form-field', standalone: false, template: "<label class=\"s4y-form-field\">\r\n <ng-content select=\"s4y-label\"></ng-content>\r\n <div class=\"s4y-input-wrapper\">\r\n <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n <ng-content select=\"input, textarea\"></ng-content>\r\n <ng-content select=\"s4y-input-sufix\"></ng-content>\r\n </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n", styles: ["@charset \"UTF-8\";.s4y-form-field{display:flex;flex-direction:column;gap:.8rem}.s4y-form-field .s4y-input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease}.s4y-form-field:has(input[size=extra-small]) .s4y-input-wrapper,.s4y-form-field:has(textarea[size=extra-small]) .s4y-input-wrapper{height:2.8rem;padding:.4rem .8rem}.s4y-form-field:has(input[size=small]) .s4y-input-wrapper,.s4y-form-field:has(textarea[size=small]) .s4y-input-wrapper{height:3.6rem;padding:.6rem 1.2rem}.s4y-form-field:has(input[size=medium]) .s4y-input-wrapper,.s4y-form-field:has(textarea[size=medium]) .s4y-input-wrapper,.s4y-form-field:not(:has(input[size])):not(:has(textarea[size])) .s4y-input-wrapper{height:4.6rem;padding:.8rem 1.6rem}.s4y-form-field:has(input[size=large]) .s4y-input-wrapper,.s4y-form-field:has(textarea[size=large]) .s4y-input-wrapper{height:5.6rem;padding:1rem 2rem}.s4y-form-field:has(input:disabled) .s4y-input-wrapper,.s4y-form-field:has(textarea:disabled) .s4y-input-wrapper{background-color:var(--gray-200)}.s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) .s4y-input-wrapper,.s4y-form-field:has(textarea.ng-invalid.ng-touched.ng-dirty) .s4y-input-wrapper{border:1px solid var(--danger-color);transition:.5s ease;background-color:#fff6f5}::ng-deep .s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) s4y-label,::ng-deep .s4y-form-field:has(textarea.ng-invalid.ng-touched.ng-dirty) s4y-label{color:var(--danger-color);transition:.5s ease}.s4y-form-field:has(input:focus) .s4y-input-wrapper,.s4y-form-field:has(textarea:focus) .s4y-input-wrapper{border:1px solid var(--primary-color)}\n"] }]
439
+ args: [{ selector: 's4y-form-field', standalone: false, template: "<label class=\"s4y-form-field\">\r\n <ng-content select=\"s4y-label\"></ng-content>\r\n <div class=\"s4y-input-wrapper\">\r\n <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n <ng-content select=\"input, textarea\"></ng-content>\r\n <ng-content select=\"s4y-input-sufix\"></ng-content>\r\n </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n", styles: ["@charset \"UTF-8\";.s4y-form-field{display:flex;flex-direction:column;gap:.8rem}.s4y-form-field .s4y-input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease}.s4y-form-field:has(input[size=extra-small]) .s4y-input-wrapper{height:2.8rem;padding:.4rem .8rem}.s4y-form-field:has(input[size=small]) .s4y-input-wrapper{height:3.6rem;padding:.6rem 1.2rem}.s4y-form-field:has(input[size=medium]) .s4y-input-wrapper,.s4y-form-field:has(input):not(:has(input[size])) .s4y-input-wrapper{height:4.6rem;padding:.8rem 1.6rem}.s4y-form-field:has(input[size=large]) .s4y-input-wrapper{height:5.6rem;padding:1rem 2rem}:host ::ng-deep .s4y-form-field textarea{width:100%;display:block;border:0;outline:0;background:transparent;line-height:1.5;resize:none!important;min-height:100%;height:auto}.s4y-form-field:has(input:disabled) .s4y-input-wrapper,.s4y-form-field:has(textarea:disabled) .s4y-input-wrapper{background-color:var(--gray-200)}.s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) .s4y-input-wrapper,.s4y-form-field:has(textarea.ng-invalid.ng-touched.ng-dirty) .s4y-input-wrapper{border:1px solid var(--danger-color);transition:.5s ease;background-color:#fff6f5}.s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) s4y-label,.s4y-form-field:has(textarea.ng-invalid.ng-touched.ng-dirty) s4y-label{color:var(--danger-color);transition:.5s ease}.s4y-form-field:has(input:focus) .s4y-input-wrapper,.s4y-form-field:has(textarea:focus) .s4y-input-wrapper{border:1px solid var(--primary-color)}\n"] }]
440
440
  }] });
441
441
 
442
442
  class InputComponent {
@@ -1058,6 +1058,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
1058
1058
  }], ctorParameters: () => [] });
1059
1059
 
1060
1060
  class TableComponent {
1061
+ sortStateChanged$ = new Subject();
1061
1062
  headers = input([]);
1062
1063
  data = input([]);
1063
1064
  customSort = input(false);
@@ -1114,10 +1115,14 @@ class TableComponent {
1114
1115
  sortBy = signal(undefined);
1115
1116
  lastPresetSignature = '';
1116
1117
  ngOnChanges(changes) {
1117
- if (!this.multipleSort())
1118
+ if (this.multipleSort()) {
1119
+ if (changes['initialSorts'] || changes['headers']) {
1120
+ this.applyInitialSortsOnce();
1121
+ }
1118
1122
  return;
1119
- if (changes['initialSorts'] || changes['headers']) {
1120
- this.applyInitialSortsOnce();
1123
+ }
1124
+ if (changes['sortField'] || changes['sortOrder'] || changes['headers']) {
1125
+ this.applySingleSortPreset();
1121
1126
  }
1122
1127
  }
1123
1128
  applyInitialSortsOnce() {
@@ -1136,6 +1141,25 @@ class TableComponent {
1136
1141
  return;
1137
1142
  this.lastPresetSignature = signature;
1138
1143
  this.sorts.set(normalized);
1144
+ this.sortStateChanged$.next();
1145
+ }
1146
+ applySingleSortPreset() {
1147
+ const field = this.sortField();
1148
+ const order = this.sortOrder();
1149
+ if (!field || order === 'none') {
1150
+ this.sortBy.set(undefined);
1151
+ this.sortDirection.set('none');
1152
+ return;
1153
+ }
1154
+ const header = this.headers().find((h) => String(h.key) === String(field));
1155
+ if (!header || header.sortable === false) {
1156
+ this.sortBy.set(undefined);
1157
+ this.sortDirection.set('none');
1158
+ return;
1159
+ }
1160
+ this.sortBy.set(String(field));
1161
+ this.sortDirection.set(order ?? 'none');
1162
+ this.sortStateChanged$.next();
1139
1163
  }
1140
1164
  constructor() {
1141
1165
  // MULTI: initialSorts -> sorts (já tem)
@@ -1167,25 +1191,26 @@ class TableComponent {
1167
1191
  // },
1168
1192
  // );
1169
1193
  // SINGLE: sortField/sortOrder -> sortBy/sortDirection (faltava isso)
1170
- effect(() => {
1171
- if (this.multipleSort())
1172
- return; // se virou multi, não aplica single preset
1173
- const field = this.sortField();
1174
- const order = this.sortOrder();
1175
- if (!field) {
1176
- this.sortBy.set(undefined);
1177
- this.sortDirection.set('none');
1178
- return;
1179
- }
1180
- const header = this.headers().find((h) => String(h.key) === String(field));
1181
- if (!header || header.sortable === false) {
1182
- this.sortBy.set(undefined);
1183
- this.sortDirection.set('none');
1184
- return;
1185
- }
1186
- this.sortBy.set(String(field));
1187
- this.sortDirection.set(order ?? 'none');
1188
- });
1194
+ // effect(() => {
1195
+ // if (this.multipleSort()) return; // se virou multi, não aplica single preset
1196
+ // const field = this.sortField();
1197
+ // const order = this.sortOrder();
1198
+ // if (!field) {
1199
+ // this.sortBy.set(undefined);
1200
+ // this.sortDirection.set('none');
1201
+ // return;
1202
+ // }
1203
+ // const header = this.headers().find(
1204
+ // (h) => String(h.key) === String(field),
1205
+ // );
1206
+ // if (!header || header.sortable === false) {
1207
+ // this.sortBy.set(undefined);
1208
+ // this.sortDirection.set('none');
1209
+ // return;
1210
+ // }
1211
+ // this.sortBy.set(String(field));
1212
+ // this.sortDirection.set(order ?? 'none');
1213
+ // });
1189
1214
  }
1190
1215
  ngAfterViewInit() { }
1191
1216
  compareValues(a, b, dir) {
@@ -1232,7 +1257,7 @@ class TableSortDirective {
1232
1257
  el;
1233
1258
  renderer;
1234
1259
  table;
1235
- injector;
1260
+ destroyRef;
1236
1261
  s4ySortableColumnName = input();
1237
1262
  s4ySortable = input(false);
1238
1263
  oldSortableColumnName;
@@ -1240,17 +1265,20 @@ class TableSortDirective {
1240
1265
  spanElement;
1241
1266
  oldDirection = signal('none');
1242
1267
  newDirection = signal('none');
1243
- constructor(el, renderer, table, injector) {
1268
+ constructor(el, renderer, table, destroyRef) {
1244
1269
  this.el = el;
1245
1270
  this.renderer = renderer;
1246
1271
  this.table = table;
1247
- this.injector = injector;
1272
+ this.destroyRef = destroyRef;
1248
1273
  }
1249
1274
  ngAfterContentInit() {
1250
1275
  if (!this.s4ySortable())
1251
1276
  return;
1252
1277
  this.insertSortIcon();
1253
- this.setupReactivePaint();
1278
+ this.repaint();
1279
+ this.table.sortStateChanged$
1280
+ .pipe(takeUntilDestroyed(this.destroyRef))
1281
+ .subscribe(() => this.repaint());
1254
1282
  }
1255
1283
  emitSortableColumnName() {
1256
1284
  if (!this.s4ySortable())
@@ -1298,6 +1326,7 @@ class TableSortDirective {
1298
1326
  this.clearHoverStyleTH();
1299
1327
  this.handleStyleTH();
1300
1328
  this.handleDirectionIcon();
1329
+ this.table.sortStateChanged$.next();
1301
1330
  }
1302
1331
  mouseOver() {
1303
1332
  if (!this.hostThElement)
@@ -1479,37 +1508,19 @@ class TableSortDirective {
1479
1508
  this.table.sortFunction.emit({ key, value });
1480
1509
  this.table.multiSortFunction.emit(updatedList);
1481
1510
  }
1482
- setupReactivePaint() {
1483
- effect(() => {
1484
- if (!this.s4ySortable())
1485
- return;
1486
- const key = this.s4ySortableColumnName();
1487
- if (!key)
1488
- return;
1489
- if (this.isMultipleSort) {
1490
- const found = this.table
1491
- .sorts()
1492
- .find((s) => String(s.key) === String(key));
1493
- const dir = found?.value ?? 'none';
1494
- this.newDirection.set(dir);
1495
- if (dir === 'none') {
1496
- this.removeActiveStyle(this.hostThElement);
1497
- if (this.spanElement)
1498
- this.spanElement.innerHTML = this.ascIcon;
1499
- return;
1500
- }
1501
- this.setActiveStyle(this.hostThElement);
1502
- if (this.spanElement) {
1503
- this.spanElement.innerHTML =
1504
- dir === 'desc' ? this.descIcon : this.ascIcon;
1505
- }
1506
- return;
1507
- }
1508
- const sortBy = this.table.sortBy();
1509
- const dir = this.table.sortDirection();
1510
- const isThis = String(sortBy ?? '') === String(key);
1511
- this.newDirection.set(isThis ? dir : 'none');
1512
- if (!isThis || dir === 'none') {
1511
+ repaint() {
1512
+ if (!this.s4ySortable())
1513
+ return;
1514
+ const key = this.s4ySortableColumnName();
1515
+ if (!key)
1516
+ return;
1517
+ if (this.isMultipleSort) {
1518
+ const found = this.table
1519
+ .sorts()
1520
+ .find((s) => String(s.key) === String(key));
1521
+ const dir = found?.value ?? 'none';
1522
+ this.newDirection.set(dir);
1523
+ if (dir === 'none') {
1513
1524
  this.removeActiveStyle(this.hostThElement);
1514
1525
  if (this.spanElement)
1515
1526
  this.spanElement.innerHTML = this.ascIcon;
@@ -1520,9 +1531,24 @@ class TableSortDirective {
1520
1531
  this.spanElement.innerHTML =
1521
1532
  dir === 'desc' ? this.descIcon : this.ascIcon;
1522
1533
  }
1523
- }, {
1524
- injector: this.injector,
1525
- });
1534
+ return;
1535
+ }
1536
+ // single
1537
+ const sortBy = this.table.sortBy();
1538
+ const dir = this.table.sortDirection();
1539
+ const isThis = String(sortBy ?? '') === String(key);
1540
+ this.newDirection.set(isThis ? dir : 'none');
1541
+ if (!isThis || dir === 'none') {
1542
+ this.removeActiveStyle(this.hostThElement);
1543
+ if (this.spanElement)
1544
+ this.spanElement.innerHTML = this.ascIcon;
1545
+ return;
1546
+ }
1547
+ this.setActiveStyle(this.hostThElement);
1548
+ if (this.spanElement) {
1549
+ this.spanElement.innerHTML =
1550
+ dir === 'desc' ? this.descIcon : this.ascIcon;
1551
+ }
1526
1552
  }
1527
1553
  get ascIcon() {
1528
1554
  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>';
@@ -1530,7 +1556,7 @@ class TableSortDirective {
1530
1556
  get descIcon() {
1531
1557
  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>';
1532
1558
  }
1533
- 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 });
1559
+ 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 });
1534
1560
  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 });
1535
1561
  }
1536
1562
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableSortDirective, decorators: [{
@@ -1539,7 +1565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
1539
1565
  selector: '[s4ySortableColumnName]',
1540
1566
  standalone: true,
1541
1567
  }]
1542
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: TableComponent }, { type: i0.Injector }], propDecorators: { emitSortableColumnName: [{
1568
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: TableComponent }, { type: i0.DestroyRef }], propDecorators: { emitSortableColumnName: [{
1543
1569
  type: HostListener,
1544
1570
  args: ['click']
1545
1571
  }], mouseOver: [{