@den4ik92/ng2-smart-table 19.4.1 → 19.4.3

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.
@@ -539,13 +539,13 @@ class DataSource {
539
539
  }
540
540
  const foundIndex = this.filters().findIndex((filter) => filter.field === newFilter.field);
541
541
  if (foundIndex === -1) {
542
- if (newFilter.search) {
542
+ if (newFilter.search || typeof newFilter.search === 'boolean') {
543
543
  this.filters.set([...this.filters(), newFilter]);
544
544
  }
545
545
  }
546
546
  else {
547
547
  const filtersTemp = this.filters();
548
- if (newFilter.search) {
548
+ if (newFilter.search || typeof newFilter.search === 'boolean') {
549
549
  filtersTemp[foundIndex].search = newFilter.search;
550
550
  }
551
551
  else {
@@ -1347,109 +1347,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
1347
1347
  args: [{ selector: '[ng2-st-tbody]', imports: [FormsModule, TrowComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (grid().createFormShown()) {\n <tr\n ng2-st-trow\n class=\"ng2-smart-row\"\n [grid]=\"grid()\"\n [row]=\"grid().getNewRow()\"\n [isCreateRow]=\"true\"\n [source]=\"source()\"\n [isMobileView]=\"isMobileView()\"\n (createConfirmed)=\"createConfirmed.emit()\"\n ></tr>\n}\n@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n <tr\n ng2-st-trow\n class=\"ng2-smart-row\"\n [grid]=\"grid()\"\n [source]=\"source()\"\n [row]=\"row\"\n [class]=\"rowClassFunction()(row.rowData)\"\n [isMobileView]=\"isMobileView()\"\n [class.selected]=\"row.isSelected()\"\n (click)=\"userClickedRow.emit(row)\"\n (edit)=\"edit.emit(row)\"\n (editConfirmed)=\"editConfirmed.emit(row)\"\n (editCancel)=\"editCancel.emit(row)\"\n (deleteEmitter)=\"deleteEmitter.emit(row)\"\n (customActionEmitter)=\"customActionEmitted($event, row)\"\n (multipleSelectRow)=\"multipleSelectRow.emit($event)\"></tr>\n} @empty {\n <tr>\n <td colspan=\"50\">\n {{ noDataMessage() }}\n </td>\n </tr>\n}\n" }]
1348
1348
  }] });
1349
1349
 
1350
- class AddButtonComponent {
1351
- constructor() {
1352
- this.grid = input.required();
1353
- this.create = output();
1354
- this.isActionAdd = computed(() => {
1355
- const actions = this.grid().settings().actions;
1356
- if (!actions) {
1357
- return false;
1358
- }
1359
- return !!actions.add;
1360
- });
1361
- this.addNewButtonContent = computed(() => {
1362
- const addParams = this.grid().settings()?.add;
1363
- if (!addParams) {
1364
- return 'Add New';
1365
- }
1366
- return addParams?.addButtonContent || 'Add New';
1367
- });
1368
- }
1369
- onAdd(event) {
1370
- event.preventDefault();
1371
- event.stopPropagation();
1372
- this.create.emit();
1373
- }
1374
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1375
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AddButtonComponent, isStandalone: true, selector: "[ng2-st-add-button]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create" }, host: { classAttribute: "ng2-smart-actions-title ng2-smart-actions-title-add" }, ngImport: i0, template: `
1376
- @if (isActionAdd()) {
1377
- <a
1378
- href="#"
1379
- class="ng2-smart-action ng2-smart-action-add-add"
1380
- [innerHTML]="addNewButtonContent()"
1381
- (click)="onAdd($event)"></a>
1382
- }
1383
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1384
- }
1385
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, decorators: [{
1386
- type: Component,
1387
- args: [{
1388
- selector: '[ng2-st-add-button]',
1389
- template: `
1390
- @if (isActionAdd()) {
1391
- <a
1392
- href="#"
1393
- class="ng2-smart-action ng2-smart-action-add-add"
1394
- [innerHTML]="addNewButtonContent()"
1395
- (click)="onAdd($event)"></a>
1396
- }
1397
- `,
1398
- host: {
1399
- class: 'ng2-smart-actions-title ng2-smart-actions-title-add',
1400
- },
1401
- changeDetection: ChangeDetectionStrategy.OnPush,
1402
- }]
1403
- }] });
1404
-
1405
- class ColumnTitleComponent {
1406
- constructor() {
1407
- this.source = input.required();
1408
- this.column = input.required();
1409
- this.currentSortDirection = computed(() => {
1410
- const { field, direction } = this.source().getSort();
1411
- return this.column().id === field ? direction : null;
1412
- });
1413
- this.currentSortDirectionSymbol = computed(() => {
1414
- return !this.currentSortDirection() ? '' : this.currentSortDirection() === 'asc' ? '↑' : '↓';
1415
- });
1416
- }
1417
- _sort(event) {
1418
- event.preventDefault();
1419
- const { id: field, title } = this.column();
1420
- this.source().setSort({
1421
- field,
1422
- title,
1423
- direction: this.currentSortDirection() === 'desc' ? 'asc' : 'desc',
1424
- compare: this.column().compareFunction,
1425
- });
1426
- }
1427
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1428
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
1429
- @if (column().isSortable) {
1430
- <a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
1431
- {{ column().title }}
1432
- <span class="sort-direction">{{ currentSortDirectionSymbol() }}</span>
1433
- </a>
1434
- } @else {
1435
- <span class="ng2-smart-sort">{{ column().title }}</span>
1436
- }
1437
- `, isInline: true, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1438
- }
1439
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, decorators: [{
1440
- type: Component,
1441
- args: [{ selector: 'ng2-st-column-title', template: `
1442
- @if (column().isSortable) {
1443
- <a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
1444
- {{ column().title }}
1445
- <span class="sort-direction">{{ currentSortDirectionSymbol() }}</span>
1446
- </a>
1447
- } @else {
1448
- <span class="ng2-smart-sort">{{ column().title }}</span>
1449
- }
1450
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"] }]
1451
- }] });
1452
-
1453
1350
  class CheckboxFilterComponent extends BaseFilterComponent {
1454
1351
  constructor() {
1455
1352
  super();
@@ -1488,7 +1385,6 @@ class CheckboxFilterComponent extends BaseFilterComponent {
1488
1385
  (ngModelChange)="setCheckFilter($event)"
1489
1386
  [class]="inputClass()"
1490
1387
  class="form-control" />
1491
- <label [for]="column().id">{{ column().title }}</label>
1492
1388
  @if (filterIsActive()) {
1493
1389
  <a href="#" (click)="resetFilter($event)">{{ column().getFilterConfig()?.resetText || 'reset' }}</a>
1494
1390
  }
@@ -1506,7 +1402,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
1506
1402
  (ngModelChange)="setCheckFilter($event)"
1507
1403
  [class]="inputClass()"
1508
1404
  class="form-control" />
1509
- <label [for]="column().id">{{ column().title }}</label>
1510
1405
  @if (filterIsActive()) {
1511
1406
  <a href="#" (click)="resetFilter($event)">{{ column().getFilterConfig()?.resetText || 'reset' }}</a>
1512
1407
  }
@@ -1546,7 +1441,7 @@ class SelectFilterComponent extends BaseFilterComponent {
1546
1441
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1547
1442
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SelectFilterComponent, isStandalone: true, selector: "ng2-select-filter", usesInheritance: true, ngImport: i0, template: `
1548
1443
  <select [class]="inputClass()" class="form-control" [formControl]="inputControl">
1549
- <option value="">{{ column().getFilterConfig().selectText }}</option>
1444
+ <option value="null">{{ column().getFilterConfig().selectText || 'all' }}</option>
1550
1445
  @for (option of column().getFilterConfig().list; track $index) {
1551
1446
  <option [value]="option.value">
1552
1447
  {{ option.title }}
@@ -1561,7 +1456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
1561
1456
  selector: 'ng2-select-filter',
1562
1457
  template: `
1563
1458
  <select [class]="inputClass()" class="form-control" [formControl]="inputControl">
1564
- <option value="">{{ column().getFilterConfig().selectText }}</option>
1459
+ <option value="null">{{ column().getFilterConfig().selectText || 'all' }}</option>
1565
1460
  @for (option of column().getFilterConfig().list; track $index) {
1566
1461
  <option [value]="option.value">
1567
1462
  {{ option.title }}
@@ -1787,22 +1682,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
1787
1682
  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CustomFilterComponent, BuildInFilterComponent], styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder{font-weight:400}:host .ng2-smart-filter ::ng-deep a{font-weight:400}\n"] }]
1788
1683
  }] });
1789
1684
 
1685
+ class AddButtonComponent {
1686
+ constructor() {
1687
+ this.grid = input.required();
1688
+ this.create = output();
1689
+ this.isActionAdd = computed(() => {
1690
+ const actions = this.grid().settings().actions;
1691
+ if (!actions) {
1692
+ return false;
1693
+ }
1694
+ return !!actions.add;
1695
+ });
1696
+ this.addNewButtonContent = computed(() => {
1697
+ const addParams = this.grid().settings()?.add;
1698
+ if (!addParams) {
1699
+ return 'Add New';
1700
+ }
1701
+ return addParams?.addButtonContent || 'Add New';
1702
+ });
1703
+ }
1704
+ onAdd(event) {
1705
+ event.preventDefault();
1706
+ event.stopPropagation();
1707
+ this.create.emit();
1708
+ }
1709
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1710
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AddButtonComponent, isStandalone: true, selector: "[ng2-st-add-button]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create" }, host: { classAttribute: "ng2-smart-actions-title ng2-smart-actions-title-add" }, ngImport: i0, template: `
1711
+ @if (isActionAdd()) {
1712
+ <a
1713
+ href="#"
1714
+ class="ng2-smart-action ng2-smart-action-add-add"
1715
+ [innerHTML]="addNewButtonContent()"
1716
+ (click)="onAdd($event)"></a>
1717
+ }
1718
+ `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1719
+ }
1720
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, decorators: [{
1721
+ type: Component,
1722
+ args: [{
1723
+ selector: '[ng2-st-add-button]',
1724
+ template: `
1725
+ @if (isActionAdd()) {
1726
+ <a
1727
+ href="#"
1728
+ class="ng2-smart-action ng2-smart-action-add-add"
1729
+ [innerHTML]="addNewButtonContent()"
1730
+ (click)="onAdd($event)"></a>
1731
+ }
1732
+ `,
1733
+ host: {
1734
+ class: 'ng2-smart-actions-title ng2-smart-actions-title-add',
1735
+ },
1736
+ changeDetection: ChangeDetectionStrategy.OnPush,
1737
+ }]
1738
+ }] });
1739
+
1740
+ class ColumnTitleComponent {
1741
+ constructor() {
1742
+ this.source = input.required();
1743
+ this.column = input.required();
1744
+ this.currentSortDirection = computed(() => {
1745
+ const { field, direction } = this.source().getSort();
1746
+ return this.column().id === field ? direction : null;
1747
+ });
1748
+ this.currentSortDirectionSymbol = computed(() => {
1749
+ return !this.currentSortDirection() ? '' : this.currentSortDirection() === 'asc' ? '↑' : '↓';
1750
+ });
1751
+ }
1752
+ _sort(event) {
1753
+ event.preventDefault();
1754
+ const { id: field, title } = this.column();
1755
+ this.source().setSort({
1756
+ field,
1757
+ title,
1758
+ direction: this.currentSortDirection() === 'desc' ? 'asc' : 'desc',
1759
+ compare: this.column().compareFunction,
1760
+ });
1761
+ }
1762
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1763
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
1764
+ @if (column().isSortable) {
1765
+ <a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
1766
+ {{ column().title }}
1767
+ <span class="sort-direction">{{ currentSortDirectionSymbol() }}</span>
1768
+ </a>
1769
+ } @else {
1770
+ <span class="ng2-smart-sort">{{ column().title }}</span>
1771
+ }
1772
+ `, isInline: true, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1773
+ }
1774
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, decorators: [{
1775
+ type: Component,
1776
+ args: [{ selector: 'ng2-st-column-title', template: `
1777
+ @if (column().isSortable) {
1778
+ <a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
1779
+ {{ column().title }}
1780
+ <span class="sort-direction">{{ currentSortDirectionSymbol() }}</span>
1781
+ </a>
1782
+ } @else {
1783
+ <span class="ng2-smart-sort">{{ column().title }}</span>
1784
+ }
1785
+ `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"] }]
1786
+ }] });
1787
+
1790
1788
  class TheadFiltersRowComponent {
1791
1789
  constructor() {
1792
1790
  this.grid = input.required();
1793
1791
  this.source = input.required();
1794
1792
  this.withoutCreateButton = input(false);
1793
+ this.inputClass = input('');
1795
1794
  this.create = output();
1796
- this.filterInputClass = computed(() => {
1797
- const filterOptions = this.grid().settings()?.filter;
1798
- if (!filterOptions) {
1799
- return '';
1800
- }
1801
- return filterOptions.inputClass || '';
1802
- });
1803
1795
  }
1804
1796
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFiltersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1805
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadFiltersRowComponent, isStandalone: true, selector: "[ng2-st-thead-filters-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, withoutCreateButton: { classPropertyName: "withoutCreateButton", publicName: "withoutCreateButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { create: "create" }, ngImport: i0, template: `
1797
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadFiltersRowComponent, isStandalone: true, selector: "[ng2-st-thead-filters-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, withoutCreateButton: { classPropertyName: "withoutCreateButton", publicName: "withoutCreateButton", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { create: "create" }, ngImport: i0, template: `
1806
1798
  @if (grid().isMultiSelectVisible()) {
1807
1799
  <th></th>
1808
1800
  }
@@ -1811,7 +1803,7 @@ class TheadFiltersRowComponent {
1811
1803
  }
1812
1804
  @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
1813
1805
  <th class="ng2-smart-th {{ column.id }}">
1814
- <ng2-smart-table-filter [source]="source()" [column]="column" [inputClass]="filterInputClass()">
1806
+ <ng2-smart-table-filter [source]="source()" [column]="column" [inputClass]="inputClass()">
1815
1807
  </ng2-smart-table-filter>
1816
1808
  </th>
1817
1809
  }
@@ -1833,7 +1825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
1833
1825
  }
1834
1826
  @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
1835
1827
  <th class="ng2-smart-th {{ column.id }}">
1836
- <ng2-smart-table-filter [source]="source()" [column]="column" [inputClass]="filterInputClass()">
1828
+ <ng2-smart-table-filter [source]="source()" [column]="column" [inputClass]="inputClass()">
1837
1829
  </ng2-smart-table-filter>
1838
1830
  </th>
1839
1831
  }
@@ -1960,6 +1952,13 @@ class Ng2SmartTableTheadComponent {
1960
1952
  .filter((column) => column.isFilterable).length);
1961
1953
  this.currentSortConfig = computed(() => this.source().getSort());
1962
1954
  this.dropdown = signal(null);
1955
+ this.filterInputClass = computed(() => {
1956
+ const filterOptions = this.grid().settings()?.filter;
1957
+ if (!filterOptions) {
1958
+ return '';
1959
+ }
1960
+ return filterOptions.inputClass || '';
1961
+ });
1963
1962
  }
1964
1963
  toggleDropdown(type) {
1965
1964
  this.dropdown.update((value) => {
@@ -1984,17 +1983,18 @@ class Ng2SmartTableTheadComponent {
1984
1983
  this.dropdown.set(null);
1985
1984
  }
1986
1985
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1987
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTheadComponent, isStandalone: true, selector: "[ng2-st-thead]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectAllRows: "selectAllRows", create: "create" }, ngImport: i0, template: "@if (isMobileView()) {\n <tr class=\"ng2-smart-titles mobile-header mobile-header-top-row\">\n <th colspan=\"50\">\n <div class=\"mobile-header-content\">\n <div ng2-st-add-button [grid]=\"grid()\" (create)=\"create.emit($event)\"></div>\n @if (columnsWithSortLength()) {\n <div class=\"current-column-title\">\n <a href=\"#\" (click)=\"$event.preventDefault(); sortByColumn()\" class=\"ng2-smart-sort-link sort\">\n {{ currentSortConfig().title }}\n <span class=\"sort-direction\">{{ currentSortConfig().direction === 'asc' ? '\u2191' : '\u2193' }}</span>\n </a>\n @if (columnsWithSortLength() > 1) {\n <button\n class=\"sort-dropdown-toggle-button\"\n (click)=\"toggleDropdown('sort')\"\n [class.active]=\"dropdown() === 'sort'\"\n aria-label=\"Toggle sort options\">\n <span class=\"sort-icon\">\u25BC</span>\n </button>\n }\n </div>\n }\n\n <div class=\"header-actions\">\n @if (columnsWithFiltersLength()) {\n <button class=\"filter-toggle\" (click)=\"toggleDropdown('filters')\" aria-label=\"Toggle filters\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\">\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path\n stroke=\"#000000\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n </g>\n </svg>\n </button>\n }\n\n </div>\n </div>\n </th>\n </tr>\n <tr class=\"mobile-header-bottom-row\">\n <th colspan=\"50\" [class.dialog-active]=\"dropdown()\">\n <div class=\"overlay\" (click)=\"toggleDropdown(null)\"></div>\n <div class=\"dropdown\">\n <div class=\"dropdown-header\">\n @if (dropdown() === 'filters') {\n <button type=\"button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">reset all</button>\n } @else {\n <p></p>\n }\n <button type=\"button\" class=\"close-dialog-button\" (click)=\"toggleDropdown(null)\" aria-label=\"Close filters\">\n <span></span>\n </button>\n </div>\n <div class=\"dropdown-content\">\n @if (dropdown() === 'sort') {\n @for (column of columnsWithSort(); track $index) {\n <th class=\"titles\">\n <ng2-st-column-title class=\"sort-option\" [column]=\"column\" [source]=\"source()\"></ng2-st-column-title>\n </th>\n }\n }\n @if (dropdown() === 'filters') {\n <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\n }\n </div>\n </div>\n </th>\n </tr>\n} @else {\n <!-- Desktop view header -->\n @if (!isHideHeader()) {\n <tr\n ng2-st-thead-titles-row\n class=\"ng2-smart-titles\"\n [grid]=\"grid()\"\n [source]=\"source()\"\n (selectAllRows)=\"selectAllRows.emit()\"></tr>\n }\n\n @if (!isHideSubHeader()) {\n <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\n }\n}\n\n<!-- Template for filters row to be used in mobile dialog -->\n<ng-template #filtersRow>\n <tr\n ng2-st-thead-filters-row\n class=\"ng2-smart-filters\"\n [grid]=\"grid()\"\n [withoutCreateButton]=\"isMobileView()\"\n [source]=\"source()\"\n (create)=\"create.emit()\"></tr>\n</ng-template>\n", styles: ["tr.mobile-header-top-row .mobile-header-content{display:flex;align-items:center;justify-content:space-between}tr.mobile-header-top-row .mobile-header-content .current-column-title{font-weight:700;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button{transition:transform .2s ease}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button.active{transform:rotate(180deg)}tr.mobile-header-top-row .mobile-header-content .filter-toggle svg{height:1rem;width:1rem}tr.mobile-header-bottom-row{position:relative}tr.mobile-header-bottom-row .dropdown{position:absolute;opacity:0;pointer-events:none;top:1rem;left:50%;translate:-50%;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));z-index:10;max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto;transition:opacity .3s ease}tr.mobile-header-bottom-row .dialog-active .dropdown{opacity:1;pointer-events:all}tr.mobile-header-bottom-row .dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}tr.mobile-header-bottom-row .dropdown-content{display:flex;flex-direction:column}tr.mobile-header-bottom-row .dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}tr.mobile-header-bottom-row .dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}tr.mobile-header-bottom-row .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}tr.mobile-header-bottom-row .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}tr.mobile-header-bottom-row .close-dialog-button:after,tr.mobile-header-bottom-row .close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}tr.mobile-header-bottom-row .close-dialog-button:before{rotate:45deg}tr.mobile-header-bottom-row .close-dialog-button:after{position:absolute;rotate:-45deg}.overlay{position:fixed;background:var(--table-header-dropdown-overlay-background, color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));inset:0;z-index:-20}.dialog-active .overlay{z-index:2}.dropdown{z-index:1}\n"], dependencies: [{ kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["selectAllRows"] }, { kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid"], outputs: ["create"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["source", "column"] }, { kind: "component", type: TheadFiltersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source", "withoutCreateButton"], outputs: ["create"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1986
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTheadComponent, isStandalone: true, selector: "[ng2-st-thead]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectAllRows: "selectAllRows", create: "create" }, ngImport: i0, template: "@if (isMobileView()) {\n <tr class=\"ng2-smart-titles mobile-header mobile-header-top-row\">\n <th colspan=\"50\">\n <div class=\"mobile-header-content\">\n <div ng2-st-add-button [grid]=\"grid()\" (create)=\"create.emit($event)\"></div>\n @if (columnsWithSortLength()) {\n <div class=\"current-column-title\">\n <a href=\"#\" (click)=\"$event.preventDefault(); sortByColumn()\" class=\"ng2-smart-sort-link sort\">\n {{ currentSortConfig().title }}\n <span class=\"sort-direction\">{{ currentSortConfig().direction === 'asc' ? '\u2191' : '\u2193' }}</span>\n </a>\n @if (columnsWithSortLength() > 1) {\n <button\n class=\"sort-dropdown-toggle-button\"\n (click)=\"toggleDropdown('sort')\"\n [class.active]=\"dropdown() === 'sort'\"\n aria-label=\"Toggle sort options\">\n <span class=\"sort-icon\">\u25BC</span>\n </button>\n }\n </div>\n }\n\n <div class=\"header-actions\">\n @if (columnsWithFiltersLength()) {\n <button class=\"filter-toggle\" (click)=\"toggleDropdown('filters')\" aria-label=\"Toggle filters\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\">\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path\n stroke=\"#000000\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n </g>\n </svg>\n </button>\n }\n </div>\n </div>\n </th>\n </tr>\n <tr class=\"mobile-header-bottom-row\">\n <th colspan=\"50\" [class.dialog-active]=\"dropdown()\">\n <div class=\"overlay\" (click)=\"toggleDropdown(null)\"></div>\n <div class=\"dropdown\">\n <div class=\"dropdown-header\">\n @if (dropdown() === 'filters') {\n <button type=\"button\" class=\"clear-filters-button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">reset all</button>\n } @else {\n <p></p>\n }\n <button type=\"button\" class=\"close-dialog-button\" (click)=\"toggleDropdown(null)\" aria-label=\"Close filters\">\n <span></span>\n </button>\n </div>\n <div class=\"dropdown-content\">\n @if (dropdown() === 'sort') {\n @for (column of columnsWithSort(); track $index) {\n <th class=\"titles\">\n <ng2-st-column-title class=\"sort-option\" [column]=\"column\" [source]=\"source()\"></ng2-st-column-title>\n </th>\n }\n }\n @if (dropdown() === 'filters') {\n <ng-container [ngTemplateOutlet]=\"mobileFilters\"></ng-container>\n }\n </div>\n </div>\n </th>\n </tr>\n} @else {\n <!-- Desktop view header -->\n @if (!isHideHeader()) {\n <tr\n ng2-st-thead-titles-row\n class=\"ng2-smart-titles\"\n [grid]=\"grid()\"\n [source]=\"source()\"\n (selectAllRows)=\"selectAllRows.emit()\"></tr>\n }\n\n @if (!isHideSubHeader()) {\n <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\n }\n}\n\n<ng-template #filtersRow>\n <tr\n ng2-st-thead-filters-row\n class=\"ng2-smart-filters\"\n [grid]=\"grid()\"\n [inputClass]=\"filterInputClass()\"\n [withoutCreateButton]=\"isMobileView()\"\n [source]=\"source()\"\n (create)=\"create.emit()\"></tr>\n</ng-template>\n\n<ng-template #mobileFilters>\n <div class=\"ng2-smart-mobil-filters\">\n @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {\n @if (column.isFilterable) {\n <div class=\"ng2-smart-filter\">\n <label for=\"\" class=\"ng2-smart-filter-label\">{{ column.title }}</label>\n <ng2-smart-table-filter [source]=\"source()\" [column]=\"column\" [inputClass]=\"filterInputClass()\">\n </ng2-smart-table-filter>\n </div>\n }\n }\n </div>\n</ng-template>\n", styles: ["tr.mobile-header-top-row .mobile-header-content{display:flex;align-items:center;justify-content:space-between}tr.mobile-header-top-row .mobile-header-content .current-column-title{font-weight:700;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button{transition:transform .2s ease}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button.active{transform:rotate(180deg)}tr.mobile-header-top-row .mobile-header-content .filter-toggle svg{height:1rem;width:1rem}tr.mobile-header-bottom-row{position:relative}tr.mobile-header-bottom-row .dropdown{position:absolute;opacity:0;pointer-events:none;top:1rem;left:50%;translate:-50%;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));z-index:10;max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto;transition:opacity .3s ease}tr.mobile-header-bottom-row .dialog-active .dropdown{opacity:1;pointer-events:all}tr.mobile-header-bottom-row .dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}tr.mobile-header-bottom-row .dropdown-content{display:flex;flex-direction:column}tr.mobile-header-bottom-row .dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}tr.mobile-header-bottom-row .dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}tr.mobile-header-bottom-row .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}tr.mobile-header-bottom-row .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}tr.mobile-header-bottom-row .close-dialog-button:after,tr.mobile-header-bottom-row .close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}tr.mobile-header-bottom-row .close-dialog-button:before{rotate:45deg}tr.mobile-header-bottom-row .close-dialog-button:after{position:absolute;rotate:-45deg}.overlay{position:fixed;background:var(--table-header-dropdown-overlay-background, color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 100%, transparent 20%));inset:0;z-index:-20}.dialog-active .overlay{z-index:5}.dropdown{z-index:1}\n"], dependencies: [{ kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["selectAllRows"] }, { kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid"], outputs: ["create"] }, { kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter", inputs: ["column", "source", "inputClass"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["source", "column"] }, { kind: "component", type: TheadFiltersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source", "withoutCreateButton", "inputClass"], outputs: ["create"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1988
1987
  }
1989
1988
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
1990
1989
  type: Component,
1991
1990
  args: [{ selector: '[ng2-st-thead]', imports: [
1992
1991
  TheadTitlesRowComponent,
1993
1992
  AddButtonComponent,
1993
+ FilterComponent,
1994
1994
  ColumnTitleComponent,
1995
1995
  TheadFiltersRowComponent,
1996
1996
  NgTemplateOutlet,
1997
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isMobileView()) {\n <tr class=\"ng2-smart-titles mobile-header mobile-header-top-row\">\n <th colspan=\"50\">\n <div class=\"mobile-header-content\">\n <div ng2-st-add-button [grid]=\"grid()\" (create)=\"create.emit($event)\"></div>\n @if (columnsWithSortLength()) {\n <div class=\"current-column-title\">\n <a href=\"#\" (click)=\"$event.preventDefault(); sortByColumn()\" class=\"ng2-smart-sort-link sort\">\n {{ currentSortConfig().title }}\n <span class=\"sort-direction\">{{ currentSortConfig().direction === 'asc' ? '\u2191' : '\u2193' }}</span>\n </a>\n @if (columnsWithSortLength() > 1) {\n <button\n class=\"sort-dropdown-toggle-button\"\n (click)=\"toggleDropdown('sort')\"\n [class.active]=\"dropdown() === 'sort'\"\n aria-label=\"Toggle sort options\">\n <span class=\"sort-icon\">\u25BC</span>\n </button>\n }\n </div>\n }\n\n <div class=\"header-actions\">\n @if (columnsWithFiltersLength()) {\n <button class=\"filter-toggle\" (click)=\"toggleDropdown('filters')\" aria-label=\"Toggle filters\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\">\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path\n stroke=\"#000000\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n </g>\n </svg>\n </button>\n }\n\n </div>\n </div>\n </th>\n </tr>\n <tr class=\"mobile-header-bottom-row\">\n <th colspan=\"50\" [class.dialog-active]=\"dropdown()\">\n <div class=\"overlay\" (click)=\"toggleDropdown(null)\"></div>\n <div class=\"dropdown\">\n <div class=\"dropdown-header\">\n @if (dropdown() === 'filters') {\n <button type=\"button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">reset all</button>\n } @else {\n <p></p>\n }\n <button type=\"button\" class=\"close-dialog-button\" (click)=\"toggleDropdown(null)\" aria-label=\"Close filters\">\n <span></span>\n </button>\n </div>\n <div class=\"dropdown-content\">\n @if (dropdown() === 'sort') {\n @for (column of columnsWithSort(); track $index) {\n <th class=\"titles\">\n <ng2-st-column-title class=\"sort-option\" [column]=\"column\" [source]=\"source()\"></ng2-st-column-title>\n </th>\n }\n }\n @if (dropdown() === 'filters') {\n <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\n }\n </div>\n </div>\n </th>\n </tr>\n} @else {\n <!-- Desktop view header -->\n @if (!isHideHeader()) {\n <tr\n ng2-st-thead-titles-row\n class=\"ng2-smart-titles\"\n [grid]=\"grid()\"\n [source]=\"source()\"\n (selectAllRows)=\"selectAllRows.emit()\"></tr>\n }\n\n @if (!isHideSubHeader()) {\n <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\n }\n}\n\n<!-- Template for filters row to be used in mobile dialog -->\n<ng-template #filtersRow>\n <tr\n ng2-st-thead-filters-row\n class=\"ng2-smart-filters\"\n [grid]=\"grid()\"\n [withoutCreateButton]=\"isMobileView()\"\n [source]=\"source()\"\n (create)=\"create.emit()\"></tr>\n</ng-template>\n", styles: ["tr.mobile-header-top-row .mobile-header-content{display:flex;align-items:center;justify-content:space-between}tr.mobile-header-top-row .mobile-header-content .current-column-title{font-weight:700;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button{transition:transform .2s ease}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button.active{transform:rotate(180deg)}tr.mobile-header-top-row .mobile-header-content .filter-toggle svg{height:1rem;width:1rem}tr.mobile-header-bottom-row{position:relative}tr.mobile-header-bottom-row .dropdown{position:absolute;opacity:0;pointer-events:none;top:1rem;left:50%;translate:-50%;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));z-index:10;max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto;transition:opacity .3s ease}tr.mobile-header-bottom-row .dialog-active .dropdown{opacity:1;pointer-events:all}tr.mobile-header-bottom-row .dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}tr.mobile-header-bottom-row .dropdown-content{display:flex;flex-direction:column}tr.mobile-header-bottom-row .dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}tr.mobile-header-bottom-row .dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}tr.mobile-header-bottom-row .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}tr.mobile-header-bottom-row .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}tr.mobile-header-bottom-row .close-dialog-button:after,tr.mobile-header-bottom-row .close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}tr.mobile-header-bottom-row .close-dialog-button:before{rotate:45deg}tr.mobile-header-bottom-row .close-dialog-button:after{position:absolute;rotate:-45deg}.overlay{position:fixed;background:var(--table-header-dropdown-overlay-background, color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));inset:0;z-index:-20}.dialog-active .overlay{z-index:2}.dropdown{z-index:1}\n"] }]
1997
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isMobileView()) {\n <tr class=\"ng2-smart-titles mobile-header mobile-header-top-row\">\n <th colspan=\"50\">\n <div class=\"mobile-header-content\">\n <div ng2-st-add-button [grid]=\"grid()\" (create)=\"create.emit($event)\"></div>\n @if (columnsWithSortLength()) {\n <div class=\"current-column-title\">\n <a href=\"#\" (click)=\"$event.preventDefault(); sortByColumn()\" class=\"ng2-smart-sort-link sort\">\n {{ currentSortConfig().title }}\n <span class=\"sort-direction\">{{ currentSortConfig().direction === 'asc' ? '\u2191' : '\u2193' }}</span>\n </a>\n @if (columnsWithSortLength() > 1) {\n <button\n class=\"sort-dropdown-toggle-button\"\n (click)=\"toggleDropdown('sort')\"\n [class.active]=\"dropdown() === 'sort'\"\n aria-label=\"Toggle sort options\">\n <span class=\"sort-icon\">\u25BC</span>\n </button>\n }\n </div>\n }\n\n <div class=\"header-actions\">\n @if (columnsWithFiltersLength()) {\n <button class=\"filter-toggle\" (click)=\"toggleDropdown('filters')\" aria-label=\"Toggle filters\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\">\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path\n stroke=\"#000000\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n </g>\n </svg>\n </button>\n }\n </div>\n </div>\n </th>\n </tr>\n <tr class=\"mobile-header-bottom-row\">\n <th colspan=\"50\" [class.dialog-active]=\"dropdown()\">\n <div class=\"overlay\" (click)=\"toggleDropdown(null)\"></div>\n <div class=\"dropdown\">\n <div class=\"dropdown-header\">\n @if (dropdown() === 'filters') {\n <button type=\"button\" class=\"clear-filters-button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">reset all</button>\n } @else {\n <p></p>\n }\n <button type=\"button\" class=\"close-dialog-button\" (click)=\"toggleDropdown(null)\" aria-label=\"Close filters\">\n <span></span>\n </button>\n </div>\n <div class=\"dropdown-content\">\n @if (dropdown() === 'sort') {\n @for (column of columnsWithSort(); track $index) {\n <th class=\"titles\">\n <ng2-st-column-title class=\"sort-option\" [column]=\"column\" [source]=\"source()\"></ng2-st-column-title>\n </th>\n }\n }\n @if (dropdown() === 'filters') {\n <ng-container [ngTemplateOutlet]=\"mobileFilters\"></ng-container>\n }\n </div>\n </div>\n </th>\n </tr>\n} @else {\n <!-- Desktop view header -->\n @if (!isHideHeader()) {\n <tr\n ng2-st-thead-titles-row\n class=\"ng2-smart-titles\"\n [grid]=\"grid()\"\n [source]=\"source()\"\n (selectAllRows)=\"selectAllRows.emit()\"></tr>\n }\n\n @if (!isHideSubHeader()) {\n <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\n }\n}\n\n<ng-template #filtersRow>\n <tr\n ng2-st-thead-filters-row\n class=\"ng2-smart-filters\"\n [grid]=\"grid()\"\n [inputClass]=\"filterInputClass()\"\n [withoutCreateButton]=\"isMobileView()\"\n [source]=\"source()\"\n (create)=\"create.emit()\"></tr>\n</ng-template>\n\n<ng-template #mobileFilters>\n <div class=\"ng2-smart-mobil-filters\">\n @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {\n @if (column.isFilterable) {\n <div class=\"ng2-smart-filter\">\n <label for=\"\" class=\"ng2-smart-filter-label\">{{ column.title }}</label>\n <ng2-smart-table-filter [source]=\"source()\" [column]=\"column\" [inputClass]=\"filterInputClass()\">\n </ng2-smart-table-filter>\n </div>\n }\n }\n </div>\n</ng-template>\n", styles: ["tr.mobile-header-top-row .mobile-header-content{display:flex;align-items:center;justify-content:space-between}tr.mobile-header-top-row .mobile-header-content .current-column-title{font-weight:700;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button{transition:transform .2s ease}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button.active{transform:rotate(180deg)}tr.mobile-header-top-row .mobile-header-content .filter-toggle svg{height:1rem;width:1rem}tr.mobile-header-bottom-row{position:relative}tr.mobile-header-bottom-row .dropdown{position:absolute;opacity:0;pointer-events:none;top:1rem;left:50%;translate:-50%;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));z-index:10;max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto;transition:opacity .3s ease}tr.mobile-header-bottom-row .dialog-active .dropdown{opacity:1;pointer-events:all}tr.mobile-header-bottom-row .dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}tr.mobile-header-bottom-row .dropdown-content{display:flex;flex-direction:column}tr.mobile-header-bottom-row .dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}tr.mobile-header-bottom-row .dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}tr.mobile-header-bottom-row .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}tr.mobile-header-bottom-row .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}tr.mobile-header-bottom-row .close-dialog-button:after,tr.mobile-header-bottom-row .close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}tr.mobile-header-bottom-row .close-dialog-button:before{rotate:45deg}tr.mobile-header-bottom-row .close-dialog-button:after{position:absolute;rotate:-45deg}.overlay{position:fixed;background:var(--table-header-dropdown-overlay-background, color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 100%, transparent 20%));inset:0;z-index:-20}.dialog-active .overlay{z-index:5}.dropdown{z-index:1}\n"] }]
1998
1998
  }] });
1999
1999
 
2000
2000
  class DataSet {