@den4ik92/ng2-smart-table 19.4.2 → 19.4.4
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 {
|
|
@@ -1441,7 +1441,7 @@ class SelectFilterComponent extends BaseFilterComponent {
|
|
|
1441
1441
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1442
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: `
|
|
1443
1443
|
<select [class]="inputClass()" class="form-control" [formControl]="inputControl">
|
|
1444
|
-
<option value="
|
|
1444
|
+
<option value="">{{ column().getFilterConfig().selectText || 'all' }}</option>
|
|
1445
1445
|
@for (option of column().getFilterConfig().list; track $index) {
|
|
1446
1446
|
<option [value]="option.value">
|
|
1447
1447
|
{{ option.title }}
|
|
@@ -1456,7 +1456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1456
1456
|
selector: 'ng2-select-filter',
|
|
1457
1457
|
template: `
|
|
1458
1458
|
<select [class]="inputClass()" class="form-control" [formControl]="inputControl">
|
|
1459
|
-
<option value="
|
|
1459
|
+
<option value="">{{ column().getFilterConfig().selectText || 'all' }}</option>
|
|
1460
1460
|
@for (option of column().getFilterConfig().list; track $index) {
|
|
1461
1461
|
<option [value]="option.value">
|
|
1462
1462
|
{{ option.title }}
|
|
@@ -1983,7 +1983,7 @@ class Ng2SmartTableTheadComponent {
|
|
|
1983
1983
|
this.dropdown.set(null);
|
|
1984
1984
|
}
|
|
1985
1985
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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\" (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)
|
|
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 }); }
|
|
1987
1987
|
}
|
|
1988
1988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
|
|
1989
1989
|
type: Component,
|
|
@@ -1994,7 +1994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
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 </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]=\"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)
|
|
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 {
|