@den4ik92/ng2-smart-table 19.4.4 → 19.4.6
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,9 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, Component, ChangeDetectionStrategy,
|
|
2
|
+
import { input, computed, Component, ChangeDetectionStrategy, signal, effect, inject, ElementRef, Directive, ViewContainerRef, ViewChild, output } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
5
|
import { distinctUntilChanged, debounceTime, takeUntil, switchMap, take } from 'rxjs/operators';
|
|
6
|
-
import
|
|
6
|
+
import * as i1$1 from '@angular/cdk/overlay';
|
|
7
|
+
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
7
8
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
8
9
|
import { Subject } from 'rxjs';
|
|
9
10
|
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
|
|
@@ -29,7 +30,7 @@ class BaseFilterComponent {
|
|
|
29
30
|
this.inputClass = input('');
|
|
30
31
|
this.source = input.required();
|
|
31
32
|
this.column = input.required();
|
|
32
|
-
this.
|
|
33
|
+
this.filterEmitter = input.required();
|
|
33
34
|
this.inputControl = new UntypedFormControl();
|
|
34
35
|
}
|
|
35
36
|
ngOnDestroy() {
|
|
@@ -50,10 +51,10 @@ class BaseFilterComponent {
|
|
|
50
51
|
}
|
|
51
52
|
}
|
|
52
53
|
setFilter(query) {
|
|
53
|
-
this.
|
|
54
|
+
this.filterEmitter().emit(query);
|
|
54
55
|
}
|
|
55
56
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
56
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: BaseFilterComponent, isStandalone: true, selector: "ng2-base-filter-component", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }
|
|
57
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: BaseFilterComponent, isStandalone: true, selector: "ng2-base-filter-component", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, filterEmitter: { classPropertyName: "filterEmitter", publicName: "filterEmitter", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
57
58
|
}
|
|
58
59
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseFilterComponent, decorators: [{
|
|
59
60
|
type: Component,
|
|
@@ -228,11 +229,11 @@ class TableColumnsEditorComponent {
|
|
|
228
229
|
this.stateHasChanged.set(JSON.stringify(this.grid()?.currentColumnsSortState) !== JSON.stringify(this.currentState));
|
|
229
230
|
}
|
|
230
231
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TableColumnsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
231
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TableColumnsEditorComponent, isStandalone: true, selector: "ng2-table-columns-editor", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sort-card\">\n <div class=\"sort-card-header\">\n <h6>Table columns setup</h6>\n </div>\n <div class=\"sort-card-body\">\n <div\n class=\"list\"\n cdkDropList\n [cdkDropListData]=\"currentState\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n @for (column of currentState; track column.key + i; let i = $index) {\n\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'y'\"\n [cdkDragStartDelay]=\"300\"\n [cdkDragDisabled]=\"column.moveDisabled\"\n class=\"drag-row\"\n #dragRow\n [style.--drag-row-height]=\"50\"\n >\n <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n <div class=\"index-cell\">\n {{ i + 1 }}\n </div>\n <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n <span></span>\n <input\n [disabled]=\"column.moveDisabled\"\n [id]=\"'sort-column-checkbox-' + i\"\n title=\"Active state. If checked the column will be displayed\"\n type=\"checkbox\"\n class=\"sort-column-checkbox-input\"\n [checked]=\"!column.hide\"\n (change)=\"setVisibility(i)\"\n />\n <span></span>\n </label>\n {{ column.title }}\n </div>\n }\n </div>\n </div>\n @if (stateHasChanged()) {\n <div class=\"sort-card-footer\">\n <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n </div>\n }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--
|
|
232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TableColumnsEditorComponent, isStandalone: true, selector: "ng2-table-columns-editor", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sort-card\">\n <div class=\"sort-card-header\">\n <h6>Table columns setup</h6>\n </div>\n <div class=\"sort-card-body\">\n <div\n class=\"list\"\n cdkDropList\n [cdkDropListData]=\"currentState\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n @for (column of currentState; track column.key + i; let i = $index) {\n\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'y'\"\n [cdkDragStartDelay]=\"300\"\n [cdkDragDisabled]=\"column.moveDisabled\"\n class=\"drag-row\"\n #dragRow\n [style.--drag-row-height]=\"50\"\n >\n <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n <div class=\"index-cell\">\n {{ i + 1 }}\n </div>\n <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n <span></span>\n <input\n [disabled]=\"column.moveDisabled\"\n [id]=\"'sort-column-checkbox-' + i\"\n title=\"Active state. If checked the column will be displayed\"\n type=\"checkbox\"\n class=\"sort-column-checkbox-input\"\n [checked]=\"!column.hide\"\n (change)=\"setVisibility(i)\"\n />\n <span></span>\n </label>\n {{ column.title }}\n </div>\n }\n </div>\n </div>\n @if (stateHasChanged()) {\n <div class=\"sort-card-footer\">\n <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n </div>\n }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--smart-table-bg-even, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--smart-table-bg, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
232
233
|
}
|
|
233
234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TableColumnsEditorComponent, decorators: [{
|
|
234
235
|
type: Component,
|
|
235
|
-
args: [{ selector: 'ng2-table-columns-editor', imports: [CdkDropList, CdkDrag, CdkDragPlaceholder], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sort-card\">\n <div class=\"sort-card-header\">\n <h6>Table columns setup</h6>\n </div>\n <div class=\"sort-card-body\">\n <div\n class=\"list\"\n cdkDropList\n [cdkDropListData]=\"currentState\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n @for (column of currentState; track column.key + i; let i = $index) {\n\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'y'\"\n [cdkDragStartDelay]=\"300\"\n [cdkDragDisabled]=\"column.moveDisabled\"\n class=\"drag-row\"\n #dragRow\n [style.--drag-row-height]=\"50\"\n >\n <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n <div class=\"index-cell\">\n {{ i + 1 }}\n </div>\n <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n <span></span>\n <input\n [disabled]=\"column.moveDisabled\"\n [id]=\"'sort-column-checkbox-' + i\"\n title=\"Active state. If checked the column will be displayed\"\n type=\"checkbox\"\n class=\"sort-column-checkbox-input\"\n [checked]=\"!column.hide\"\n (change)=\"setVisibility(i)\"\n />\n <span></span>\n </label>\n {{ column.title }}\n </div>\n }\n </div>\n </div>\n @if (stateHasChanged()) {\n <div class=\"sort-card-footer\">\n <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n </div>\n }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--
|
|
236
|
+
args: [{ selector: 'ng2-table-columns-editor', imports: [CdkDropList, CdkDrag, CdkDragPlaceholder], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sort-card\">\n <div class=\"sort-card-header\">\n <h6>Table columns setup</h6>\n </div>\n <div class=\"sort-card-body\">\n <div\n class=\"list\"\n cdkDropList\n [cdkDropListData]=\"currentState\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n @for (column of currentState; track column.key + i; let i = $index) {\n\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'y'\"\n [cdkDragStartDelay]=\"300\"\n [cdkDragDisabled]=\"column.moveDisabled\"\n class=\"drag-row\"\n #dragRow\n [style.--drag-row-height]=\"50\"\n >\n <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n <div class=\"index-cell\">\n {{ i + 1 }}\n </div>\n <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n <span></span>\n <input\n [disabled]=\"column.moveDisabled\"\n [id]=\"'sort-column-checkbox-' + i\"\n title=\"Active state. If checked the column will be displayed\"\n type=\"checkbox\"\n class=\"sort-column-checkbox-input\"\n [checked]=\"!column.hide\"\n (change)=\"setVisibility(i)\"\n />\n <span></span>\n </label>\n {{ column.title }}\n </div>\n }\n </div>\n </div>\n @if (stateHasChanged()) {\n <div class=\"sort-card-footer\">\n <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n </div>\n }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--smart-table-bg-even, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--smart-table-bg, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"] }]
|
|
236
237
|
}], ctorParameters: () => [] });
|
|
237
238
|
|
|
238
239
|
class SmartTableColumnEditorDirective {
|
|
@@ -1255,11 +1256,11 @@ class RowActionsComponent {
|
|
|
1255
1256
|
this.deleteEmitter.emit();
|
|
1256
1257
|
}
|
|
1257
1258
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: RowActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1258
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: RowActionsComponent, isStandalone: true, selector: "ng2-row-actions", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { editEmitter: "editEmitter", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter" }, ngImport: i0, template: "@if (!row().pending()) {\n @if (isActionEditActive()) {\n <a\n href=\"#\"\n [id]=\"'row-' + row().index + '_action-edit-button'\"\n class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n [innerHTML]=\"editRowButtonContent()\"\n (click)=\"onEdit($event)\"></a>\n }\n @if (isActionDeleteActive()) {\n <a\n href=\"#\"\n [id]=\"'row-' + row().index + '_action-delete-button'\"\n class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n [innerHTML]=\"deleteRowButtonContent()\"\n (click)=\"onDelete($event)\"></a>\n }\n @for (action of customActions(); track action.name) {\n <a\n [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n href=\"#\"\n class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n [innerHTML]=\"action.title\"\n (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n }\n} @else {\n @for (item of allActionsCountArray(); track $index) {\n <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n }\n}\n\n<ng-template #spinner>\n <svg\n role=\"none\"\n (click)=\"$event.stopPropagation()\"\n style=\"height: 2rem; width: 2rem\"\n version=\"1.1\"\n id=\"L9\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 100 100\"\n enable-background=\"new 0 0 0 0\"\n xml:space=\"preserve\">\n <path\n fill=\"#e9e9e9\"\n d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n <animateTransform\n attributeName=\"transform\"\n attributeType=\"XML\"\n type=\"rotate\"\n dur=\"1s\"\n from=\"0 50 50\"\n to=\"360 50 50\"\n repeatCount=\"indefinite\" />\n </path>\n </svg>\n</ng-template>\n", styles: ["a~a{margin-left:.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1259
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: RowActionsComponent, isStandalone: true, selector: "ng2-row-actions", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { editEmitter: "editEmitter", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter" }, ngImport: i0, template: "@if (!row().pending()) {\n @if (isActionEditActive()) {\n <a\n href=\"#\"\n [id]=\"'row-' + row().index + '_action-edit-button'\"\n class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n [innerHTML]=\"editRowButtonContent()\"\n (click)=\"$event.stopPropagation(); $event.preventDefault();onEdit($event)\"></a>\n }\n @if (isActionDeleteActive()) {\n <a\n href=\"#\"\n [id]=\"'row-' + row().index + '_action-delete-button'\"\n class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n [innerHTML]=\"deleteRowButtonContent()\"\n (click)=\"$event.stopPropagation(); $event.preventDefault();onDelete($event)\"></a>\n }\n @for (action of customActions(); track action.name) {\n <a\n [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n href=\"#\"\n class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n [innerHTML]=\"action.title\"\n (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n }\n} @else {\n @for (item of allActionsCountArray(); track $index) {\n <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n }\n}\n\n<ng-template #spinner>\n <svg\n role=\"none\"\n (click)=\"$event.stopPropagation()\"\n style=\"height: 2rem; width: 2rem\"\n version=\"1.1\"\n id=\"L9\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 100 100\"\n enable-background=\"new 0 0 0 0\"\n xml:space=\"preserve\">\n <path\n fill=\"#e9e9e9\"\n d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n <animateTransform\n attributeName=\"transform\"\n attributeType=\"XML\"\n type=\"rotate\"\n dur=\"1s\"\n from=\"0 50 50\"\n to=\"360 50 50\"\n repeatCount=\"indefinite\" />\n </path>\n </svg>\n</ng-template>\n", styles: ["a~a{margin-left:.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1259
1260
|
}
|
|
1260
1261
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: RowActionsComponent, decorators: [{
|
|
1261
1262
|
type: Component,
|
|
1262
|
-
args: [{ selector: 'ng2-row-actions', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!row().pending()) {\n @if (isActionEditActive()) {\n <a\n href=\"#\"\n [id]=\"'row-' + row().index + '_action-edit-button'\"\n class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n [innerHTML]=\"editRowButtonContent()\"\n (click)=\"onEdit($event)\"></a>\n }\n @if (isActionDeleteActive()) {\n <a\n href=\"#\"\n [id]=\"'row-' + row().index + '_action-delete-button'\"\n class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n [innerHTML]=\"deleteRowButtonContent()\"\n (click)=\"onDelete($event)\"></a>\n }\n @for (action of customActions(); track action.name) {\n <a\n [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n href=\"#\"\n class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n [innerHTML]=\"action.title\"\n (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n }\n} @else {\n @for (item of allActionsCountArray(); track $index) {\n <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n }\n}\n\n<ng-template #spinner>\n <svg\n role=\"none\"\n (click)=\"$event.stopPropagation()\"\n style=\"height: 2rem; width: 2rem\"\n version=\"1.1\"\n id=\"L9\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 100 100\"\n enable-background=\"new 0 0 0 0\"\n xml:space=\"preserve\">\n <path\n fill=\"#e9e9e9\"\n d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n <animateTransform\n attributeName=\"transform\"\n attributeType=\"XML\"\n type=\"rotate\"\n dur=\"1s\"\n from=\"0 50 50\"\n to=\"360 50 50\"\n repeatCount=\"indefinite\" />\n </path>\n </svg>\n</ng-template>\n", styles: ["a~a{margin-left:.5rem}\n"] }]
|
|
1263
|
+
args: [{ selector: 'ng2-row-actions', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!row().pending()) {\n @if (isActionEditActive()) {\n <a\n href=\"#\"\n [id]=\"'row-' + row().index + '_action-edit-button'\"\n class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n [innerHTML]=\"editRowButtonContent()\"\n (click)=\"$event.stopPropagation(); $event.preventDefault();onEdit($event)\"></a>\n }\n @if (isActionDeleteActive()) {\n <a\n href=\"#\"\n [id]=\"'row-' + row().index + '_action-delete-button'\"\n class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n [innerHTML]=\"deleteRowButtonContent()\"\n (click)=\"$event.stopPropagation(); $event.preventDefault();onDelete($event)\"></a>\n }\n @for (action of customActions(); track action.name) {\n <a\n [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n href=\"#\"\n class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n [innerHTML]=\"action.title\"\n (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n }\n} @else {\n @for (item of allActionsCountArray(); track $index) {\n <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n }\n}\n\n<ng-template #spinner>\n <svg\n role=\"none\"\n (click)=\"$event.stopPropagation()\"\n style=\"height: 2rem; width: 2rem\"\n version=\"1.1\"\n id=\"L9\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 100 100\"\n enable-background=\"new 0 0 0 0\"\n xml:space=\"preserve\">\n <path\n fill=\"#e9e9e9\"\n d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n <animateTransform\n attributeName=\"transform\"\n attributeType=\"XML\"\n type=\"rotate\"\n dur=\"1s\"\n from=\"0 50 50\"\n to=\"360 50 50\"\n repeatCount=\"indefinite\" />\n </path>\n </svg>\n</ng-template>\n", styles: ["a~a{margin-left:.5rem}\n"] }]
|
|
1263
1264
|
}] });
|
|
1264
1265
|
|
|
1265
1266
|
class TrowComponent {
|
|
@@ -1386,7 +1387,9 @@ class CheckboxFilterComponent extends BaseFilterComponent {
|
|
|
1386
1387
|
[class]="inputClass()"
|
|
1387
1388
|
class="form-control" />
|
|
1388
1389
|
@if (filterIsActive()) {
|
|
1389
|
-
<a href="#" (click)="resetFilter($event)">{{
|
|
1390
|
+
<a href="#" (click)="$event.preventDefault(); resetFilter($event)">{{
|
|
1391
|
+
column().getFilterConfig()?.resetText || 'reset'
|
|
1392
|
+
}}</a>
|
|
1390
1393
|
}
|
|
1391
1394
|
</div>
|
|
1392
1395
|
`, isInline: true, styles: [".checkbox-filter-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.checkbox-filter-wrapper input{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
@@ -1403,7 +1406,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1403
1406
|
[class]="inputClass()"
|
|
1404
1407
|
class="form-control" />
|
|
1405
1408
|
@if (filterIsActive()) {
|
|
1406
|
-
<a href="#" (click)="resetFilter($event)">{{
|
|
1409
|
+
<a href="#" (click)="$event.preventDefault(); resetFilter($event)">{{
|
|
1410
|
+
column().getFilterConfig()?.resetText || 'reset'
|
|
1411
|
+
}}</a>
|
|
1407
1412
|
}
|
|
1408
1413
|
</div>
|
|
1409
1414
|
`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule], styles: [".checkbox-filter-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.checkbox-filter-wrapper input{width:auto}\n"] }]
|
|
@@ -1486,7 +1491,7 @@ class BuildInFilterComponent {
|
|
|
1486
1491
|
[class]="inputClass()"
|
|
1487
1492
|
[source]="source()"
|
|
1488
1493
|
[column]="column()"
|
|
1489
|
-
|
|
1494
|
+
[filterEmitter]="filter">
|
|
1490
1495
|
</ng2-select-filter>
|
|
1491
1496
|
}
|
|
1492
1497
|
@case ('checkbox') {
|
|
@@ -1495,7 +1500,7 @@ class BuildInFilterComponent {
|
|
|
1495
1500
|
[source]="source()"
|
|
1496
1501
|
[class]="inputClass()"
|
|
1497
1502
|
[column]="column()"
|
|
1498
|
-
|
|
1503
|
+
[filterEmitter]="filter">
|
|
1499
1504
|
</ng2-checkbox-filter>
|
|
1500
1505
|
}
|
|
1501
1506
|
@default {
|
|
@@ -1504,7 +1509,7 @@ class BuildInFilterComponent {
|
|
|
1504
1509
|
[source]="source()"
|
|
1505
1510
|
[class]="inputClass()"
|
|
1506
1511
|
[column]="column()"
|
|
1507
|
-
|
|
1512
|
+
[filterEmitter]="filter">
|
|
1508
1513
|
</ng2-input-filter>
|
|
1509
1514
|
}
|
|
1510
1515
|
}
|
|
@@ -1522,7 +1527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1522
1527
|
[class]="inputClass()"
|
|
1523
1528
|
[source]="source()"
|
|
1524
1529
|
[column]="column()"
|
|
1525
|
-
|
|
1530
|
+
[filterEmitter]="filter">
|
|
1526
1531
|
</ng2-select-filter>
|
|
1527
1532
|
}
|
|
1528
1533
|
@case ('checkbox') {
|
|
@@ -1531,7 +1536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1531
1536
|
[source]="source()"
|
|
1532
1537
|
[class]="inputClass()"
|
|
1533
1538
|
[column]="column()"
|
|
1534
|
-
|
|
1539
|
+
[filterEmitter]="filter">
|
|
1535
1540
|
</ng2-checkbox-filter>
|
|
1536
1541
|
}
|
|
1537
1542
|
@default {
|
|
@@ -1540,7 +1545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1540
1545
|
[source]="source()"
|
|
1541
1546
|
[class]="inputClass()"
|
|
1542
1547
|
[column]="column()"
|
|
1543
|
-
|
|
1548
|
+
[filterEmitter]="filter">
|
|
1544
1549
|
</ng2-input-filter>
|
|
1545
1550
|
}
|
|
1546
1551
|
}
|
|
@@ -1552,58 +1557,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1552
1557
|
|
|
1553
1558
|
class CustomFilterComponent {
|
|
1554
1559
|
constructor() {
|
|
1560
|
+
this.customFilterComponent = computed(() => {
|
|
1561
|
+
const columnFilter = this.column().filter;
|
|
1562
|
+
if (!columnFilter || columnFilter.type !== 'custom') {
|
|
1563
|
+
return null;
|
|
1564
|
+
}
|
|
1565
|
+
return columnFilter.component;
|
|
1566
|
+
});
|
|
1555
1567
|
this.query = input('');
|
|
1556
1568
|
this.inputClass = input('');
|
|
1557
1569
|
this.source = input.required();
|
|
1558
1570
|
this.column = input.required();
|
|
1559
1571
|
this.filter = output();
|
|
1560
1572
|
}
|
|
1561
|
-
ngOnChanges(changes) {
|
|
1562
|
-
if (this.customComponent) {
|
|
1563
|
-
if (this.customComponent?.instance && 'ngOnChanges' in this.customComponent.instance) {
|
|
1564
|
-
try {
|
|
1565
|
-
const onChanges = this.customComponent.instance.ngOnChanges;
|
|
1566
|
-
onChanges(changes);
|
|
1567
|
-
}
|
|
1568
|
-
catch {
|
|
1569
|
-
// do nothing
|
|
1570
|
-
}
|
|
1571
|
-
}
|
|
1572
|
-
return;
|
|
1573
|
-
}
|
|
1574
|
-
const columnFilter = this.column().filter;
|
|
1575
|
-
if (columnFilter && columnFilter.type === 'custom') {
|
|
1576
|
-
this.customComponent = this.dynamicTarget?.createComponent(columnFilter?.component);
|
|
1577
|
-
// set @Inputs and @Outputs of custom component
|
|
1578
|
-
this.customComponent?.setInput('query', this.query());
|
|
1579
|
-
this.customComponent?.setInput('column', this.column());
|
|
1580
|
-
this.customComponent?.setInput('source', this.source());
|
|
1581
|
-
this.customComponent?.setInput('inputClass', this.inputClass());
|
|
1582
|
-
this.filterSubscription = this.customComponent?.instance.filter.subscribe((event) => this.filter.emit(event));
|
|
1583
|
-
}
|
|
1584
|
-
}
|
|
1585
|
-
ngOnDestroy() {
|
|
1586
|
-
if (this.customComponent) {
|
|
1587
|
-
this.customComponent.destroy();
|
|
1588
|
-
}
|
|
1589
|
-
if (this.filterSubscription) {
|
|
1590
|
-
this.filterSubscription.unsubscribe();
|
|
1591
|
-
}
|
|
1592
|
-
}
|
|
1593
1573
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1594
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
1574
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: CustomFilterComponent, isStandalone: true, selector: "ng2-custom-table-filter", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, ngImport: i0, template: `
|
|
1575
|
+
@if (customFilterComponent(); as component) {
|
|
1576
|
+
<ng-template
|
|
1577
|
+
*ngComponentOutlet="
|
|
1578
|
+
component;
|
|
1579
|
+
inputs: {
|
|
1580
|
+
query: query(),
|
|
1581
|
+
inputClass: inputClass(),
|
|
1582
|
+
source: source(),
|
|
1583
|
+
column: column(),
|
|
1584
|
+
filterEmitter: filter,
|
|
1585
|
+
}
|
|
1586
|
+
"></ng-template>
|
|
1587
|
+
}
|
|
1588
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1595
1589
|
}
|
|
1596
1590
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomFilterComponent, decorators: [{
|
|
1597
1591
|
type: Component,
|
|
1598
1592
|
args: [{
|
|
1599
1593
|
selector: 'ng2-custom-table-filter',
|
|
1600
|
-
|
|
1594
|
+
imports: [NgComponentOutlet],
|
|
1595
|
+
template: `
|
|
1596
|
+
@if (customFilterComponent(); as component) {
|
|
1597
|
+
<ng-template
|
|
1598
|
+
*ngComponentOutlet="
|
|
1599
|
+
component;
|
|
1600
|
+
inputs: {
|
|
1601
|
+
query: query(),
|
|
1602
|
+
inputClass: inputClass(),
|
|
1603
|
+
source: source(),
|
|
1604
|
+
column: column(),
|
|
1605
|
+
filterEmitter: filter,
|
|
1606
|
+
}
|
|
1607
|
+
"></ng-template>
|
|
1608
|
+
}
|
|
1609
|
+
`,
|
|
1601
1610
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1602
1611
|
}]
|
|
1603
|
-
}]
|
|
1604
|
-
type: ViewChild,
|
|
1605
|
-
args: ['dynamicTarget', { read: ViewContainerRef, static: true }]
|
|
1606
|
-
}] } });
|
|
1612
|
+
}] });
|
|
1607
1613
|
|
|
1608
1614
|
class FilterComponent {
|
|
1609
1615
|
constructor() {
|
|
@@ -1713,7 +1719,7 @@ class AddButtonComponent {
|
|
|
1713
1719
|
href="#"
|
|
1714
1720
|
class="ng2-smart-action ng2-smart-action-add-add"
|
|
1715
1721
|
[innerHTML]="addNewButtonContent()"
|
|
1716
|
-
(click)="onAdd($event)"></a>
|
|
1722
|
+
(click)="$event.preventDefault(); onAdd($event)"></a>
|
|
1717
1723
|
}
|
|
1718
1724
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1719
1725
|
}
|
|
@@ -1727,7 +1733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1727
1733
|
href="#"
|
|
1728
1734
|
class="ng2-smart-action ng2-smart-action-add-add"
|
|
1729
1735
|
[innerHTML]="addNewButtonContent()"
|
|
1730
|
-
(click)="onAdd($event)"></a>
|
|
1736
|
+
(click)="$event.preventDefault(); onAdd($event)"></a>
|
|
1731
1737
|
}
|
|
1732
1738
|
`,
|
|
1733
1739
|
host: {
|
|
@@ -1983,7 +1989,7 @@ class Ng2SmartTableTheadComponent {
|
|
|
1983
1989
|
this.dropdown.set(null);
|
|
1984
1990
|
}
|
|
1985
1991
|
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\" 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 }); }
|
|
1992
|
+
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 #sortTrigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\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 <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"sortTrigger\"\n [cdkConnectedOverlayOpen]=\"dropdown() === 'sort'\"\n [cdkConnectedOverlayWidth]=\"300\"\n (overlayOutsideClick)=\"toggleDropdown(null)\">\n <div class=\"dropdown\">\n <div class=\"dropdown-header\">\n <p></p>\n <button\n type=\"button\"\n class=\"close-dialog-button\"\n (click)=\"toggleDropdown(null)\"\n aria-label=\"Close filters\">\n <span></span>\n </button>\n </div>\n <div class=\"dropdown-content\">\n @for (column of columnsWithSort(); track $index) {\n <th class=\"titles\">\n <ng2-st-column-title\n class=\"sort-option\"\n [column]=\"column\"\n [source]=\"source()\"></ng2-st-column-title>\n </th>\n }\n </div>\n </div>\n </ng-template>\n }\n </div>\n }\n\n <div class=\"header-actions\">\n @if (columnsWithFiltersLength()) {\n <button\n #filterTrigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n class=\"filter-toggle\"\n (click)=\"toggleDropdown('filters')\"\n 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 <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"filterTrigger\"\n [cdkConnectedOverlayOpen]=\"dropdown() === 'filters'\"\n [cdkConnectedOverlayWidth]=\"300\"\n (overlayOutsideClick)=\"toggleDropdown(null)\">\n <div class=\"dropdown\">\n <div class=\"dropdown-header\">\n <button\n type=\"button\"\n class=\"clear-filters-button\"\n (click)=\"clearAllFilters()\"\n aria-label=\"Close filters\">\n reset all\n </button>\n <button\n type=\"button\"\n class=\"close-dialog-button\"\n (click)=\"toggleDropdown(null)\"\n aria-label=\"Close dropdown\">\n <span></span>\n </button>\n </div>\n <div class=\"dropdown-content\">\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\n [source]=\"source()\"\n [column]=\"column\"\n [inputClass]=\"filterInputClass()\">\n </ng2-smart-table-filter>\n </div>\n }\n }\n </div>\n </div>\n </div>\n </ng-template>\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 <p></p>\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 @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 </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", 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}.dropdown{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%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}.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"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1987
1993
|
}
|
|
1988
1994
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
|
|
1989
1995
|
type: Component,
|
|
@@ -1994,7 +2000,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1994
2000
|
ColumnTitleComponent,
|
|
1995
2001
|
TheadFiltersRowComponent,
|
|
1996
2002
|
NgTemplateOutlet,
|
|
1997
|
-
|
|
2003
|
+
OverlayModule,
|
|
2004
|
+
], 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 #sortTrigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\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 <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"sortTrigger\"\n [cdkConnectedOverlayOpen]=\"dropdown() === 'sort'\"\n [cdkConnectedOverlayWidth]=\"300\"\n (overlayOutsideClick)=\"toggleDropdown(null)\">\n <div class=\"dropdown\">\n <div class=\"dropdown-header\">\n <p></p>\n <button\n type=\"button\"\n class=\"close-dialog-button\"\n (click)=\"toggleDropdown(null)\"\n aria-label=\"Close filters\">\n <span></span>\n </button>\n </div>\n <div class=\"dropdown-content\">\n @for (column of columnsWithSort(); track $index) {\n <th class=\"titles\">\n <ng2-st-column-title\n class=\"sort-option\"\n [column]=\"column\"\n [source]=\"source()\"></ng2-st-column-title>\n </th>\n }\n </div>\n </div>\n </ng-template>\n }\n </div>\n }\n\n <div class=\"header-actions\">\n @if (columnsWithFiltersLength()) {\n <button\n #filterTrigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n class=\"filter-toggle\"\n (click)=\"toggleDropdown('filters')\"\n 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 <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"filterTrigger\"\n [cdkConnectedOverlayOpen]=\"dropdown() === 'filters'\"\n [cdkConnectedOverlayWidth]=\"300\"\n (overlayOutsideClick)=\"toggleDropdown(null)\">\n <div class=\"dropdown\">\n <div class=\"dropdown-header\">\n <button\n type=\"button\"\n class=\"clear-filters-button\"\n (click)=\"clearAllFilters()\"\n aria-label=\"Close filters\">\n reset all\n </button>\n <button\n type=\"button\"\n class=\"close-dialog-button\"\n (click)=\"toggleDropdown(null)\"\n aria-label=\"Close dropdown\">\n <span></span>\n </button>\n </div>\n <div class=\"dropdown-content\">\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\n [source]=\"source()\"\n [column]=\"column\"\n [inputClass]=\"filterInputClass()\">\n </ng2-smart-table-filter>\n </div>\n }\n }\n </div>\n </div>\n </div>\n </ng-template>\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 <p></p>\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 @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 </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", 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}.dropdown{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%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}.dropdown{z-index:1}\n"] }]
|
|
1998
2005
|
}] });
|
|
1999
2006
|
|
|
2000
2007
|
class DataSet {
|