@den4ik92/ng2-smart-table 19.4.6 → 19.4.8
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.
- package/fesm2022/den4ik92-ng2-smart-table.mjs +163 -114
- package/fesm2022/den4ik92-ng2-smart-table.mjs.map +1 -1
- package/lib/components/pager/pager.component.d.ts +0 -1
- package/lib/components/thead/mobile-filters/mobile-filters.component.d.ts +21 -0
- package/lib/components/thead/thead.component.d.ts +2 -5
- package/lib/lib/helpers.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, Component, ChangeDetectionStrategy, signal, effect, inject, ElementRef, Directive, ViewContainerRef, ViewChild, output } from '@angular/core';
|
|
2
|
+
import { input, computed, Component, ChangeDetectionStrategy, signal, effect, inject, ElementRef, Directive, ViewContainerRef, ViewChild, output, viewChild } 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 * as i1$
|
|
6
|
+
import * as i1$2 from '@angular/cdk/overlay';
|
|
7
7
|
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
8
|
-
import
|
|
8
|
+
import * as i1$1 from '@angular/cdk/portal';
|
|
9
|
+
import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
|
|
9
10
|
import { Subject } from 'rxjs';
|
|
10
11
|
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
|
|
11
12
|
import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
|
|
@@ -196,6 +197,15 @@ function isObjectsIdentical(a, b) {
|
|
|
196
197
|
return compareObjectsAsJSON(a, b);
|
|
197
198
|
}
|
|
198
199
|
}
|
|
200
|
+
function CheckParentElementClassRecursive(element, className) {
|
|
201
|
+
if (!element)
|
|
202
|
+
return false;
|
|
203
|
+
console.log(element, element.classList.contains(className));
|
|
204
|
+
if (element.classList.contains(className)) {
|
|
205
|
+
return true;
|
|
206
|
+
}
|
|
207
|
+
return CheckParentElementClassRecursive(element.parentElement, className);
|
|
208
|
+
}
|
|
199
209
|
|
|
200
210
|
class TableColumnsEditorComponent {
|
|
201
211
|
constructor() {
|
|
@@ -774,7 +784,6 @@ class PagerComponent {
|
|
|
774
784
|
this.currentPerPage = computed(() => this.pagingConf().perPage);
|
|
775
785
|
this.currentPage = computed(() => this.pagingConf().page);
|
|
776
786
|
this.count = computed(() => this.source().count());
|
|
777
|
-
this.shouldShow = computed(() => this.pagingConf().display && this.count() > this.currentPerPage());
|
|
778
787
|
this.lastPage = computed(() => Math.ceil(this.count() / this.currentPerPage()));
|
|
779
788
|
this.pages = computed(() => this.getPages(this.currentPage(), this.lastPage()));
|
|
780
789
|
}
|
|
@@ -819,11 +828,11 @@ class PagerComponent {
|
|
|
819
828
|
this.source().setPaging(1, +target.value);
|
|
820
829
|
}
|
|
821
830
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
822
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: PagerComponent, isStandalone: true, selector: "ng2-smart-table-pager", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "
|
|
831
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: PagerComponent, isStandalone: true, selector: "ng2-smart-table-pager", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"ng2-smart-pagination-wrap\">\n @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n <div></div>\n }\n <nav class=\"ng2-smart-pagination-nav\">\n <ul class=\"ng2-smart-pagination pagination\">\n <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n <a\n class=\"ng2-smart-page-link page-link\"\n href=\"#\"\n (click)=\"$event.preventDefault(); currentPage() === 1 ? false : paginate(1)\"\n aria-label=\"First\">\n <span aria-hidden=\"true\">«</span>\n </a>\n </li>\n <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n <a\n class=\"ng2-smart-page-link page-link page-link-prev\"\n href=\"#\"\n (click)=\"$event.preventDefault(); currentPage() === 1 ? false : prev()\"\n aria-label=\"Prev\">\n <span aria-hidden=\"true\"><</span>\n </a>\n </li>\n @for (page of pages(); track $index) {\n <li class=\"ng2-smart-page-item page-item\" [class.active]=\"currentPage() === page\">\n @if (currentPage() === page || isString(page)) {\n <span class=\"ng2-smart-page-link page-link\">{{ page }}</span>\n } @else {\n <a class=\"ng2-smart-page-link page-link\" href=\"#\" (click)=\"$event.preventDefault(); paginate(page)\">{{\n page\n }}</a>\n }\n </li>\n }\n <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n <a\n class=\"ng2-smart-page-link page-link page-link-next\"\n href=\"#\"\n (click)=\"$event.preventDefault(); currentPage() === lastPage() ? false : next()\"\n aria-label=\"Next\">\n <span aria-hidden=\"true\">></span>\n </a>\n </li>\n <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n <a\n class=\"ng2-smart-page-link page-link\"\n href=\"#\"\n (click)=\"$event.preventDefault(); currentPage() === lastPage() ? false : paginate(lastPage())\"\n aria-label=\"Last\">\n <span aria-hidden=\"true\">»</span>\n </a>\n </li>\n </ul>\n </nav>\n @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n <nav class=\"ng2-smart-pagination-per-page\">\n <label for=\"per-page\"> Per Page: </label>\n <select (change)=\"onChangePerPage($any($event.target))\" [ngModel]=\"currentPerPage()\" id=\"per-page\">\n @for (item of pagingConf().perPageSelect; track $index) {\n <option [value]=\"item\">{{ item }}</option>\n }\n </select>\n </nav>\n }\n</div>\n", styles: [".ng2-smart-pagination{display:inline-flex;align-items:center;font-size:.875em;padding:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline;padding:.2rem}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}.ng2-smart-pagination-nav{margin:0 auto}.ng2-smart-pagination-wrap{display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
823
832
|
}
|
|
824
833
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: PagerComponent, decorators: [{
|
|
825
834
|
type: Component,
|
|
826
|
-
args: [{ selector: 'ng2-smart-table-pager', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: "
|
|
835
|
+
args: [{ selector: 'ng2-smart-table-pager', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: "<div class=\"ng2-smart-pagination-wrap\">\n @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n <div></div>\n }\n <nav class=\"ng2-smart-pagination-nav\">\n <ul class=\"ng2-smart-pagination pagination\">\n <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n <a\n class=\"ng2-smart-page-link page-link\"\n href=\"#\"\n (click)=\"$event.preventDefault(); currentPage() === 1 ? false : paginate(1)\"\n aria-label=\"First\">\n <span aria-hidden=\"true\">«</span>\n </a>\n </li>\n <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n <a\n class=\"ng2-smart-page-link page-link page-link-prev\"\n href=\"#\"\n (click)=\"$event.preventDefault(); currentPage() === 1 ? false : prev()\"\n aria-label=\"Prev\">\n <span aria-hidden=\"true\"><</span>\n </a>\n </li>\n @for (page of pages(); track $index) {\n <li class=\"ng2-smart-page-item page-item\" [class.active]=\"currentPage() === page\">\n @if (currentPage() === page || isString(page)) {\n <span class=\"ng2-smart-page-link page-link\">{{ page }}</span>\n } @else {\n <a class=\"ng2-smart-page-link page-link\" href=\"#\" (click)=\"$event.preventDefault(); paginate(page)\">{{\n page\n }}</a>\n }\n </li>\n }\n <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n <a\n class=\"ng2-smart-page-link page-link page-link-next\"\n href=\"#\"\n (click)=\"$event.preventDefault(); currentPage() === lastPage() ? false : next()\"\n aria-label=\"Next\">\n <span aria-hidden=\"true\">></span>\n </a>\n </li>\n <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n <a\n class=\"ng2-smart-page-link page-link\"\n href=\"#\"\n (click)=\"$event.preventDefault(); currentPage() === lastPage() ? false : paginate(lastPage())\"\n aria-label=\"Last\">\n <span aria-hidden=\"true\">»</span>\n </a>\n </li>\n </ul>\n </nav>\n @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n <nav class=\"ng2-smart-pagination-per-page\">\n <label for=\"per-page\"> Per Page: </label>\n <select (change)=\"onChangePerPage($any($event.target))\" [ngModel]=\"currentPerPage()\" id=\"per-page\">\n @for (item of pagingConf().perPageSelect; track $index) {\n <option [value]=\"item\">{{ item }}</option>\n }\n </select>\n </nav>\n }\n</div>\n", styles: [".ng2-smart-pagination{display:inline-flex;align-items:center;font-size:.875em;padding:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline;padding:.2rem}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}.ng2-smart-pagination-nav{margin:0 auto}.ng2-smart-pagination-wrap{display:flex;align-items:center;justify-content:space-between}\n"] }]
|
|
827
836
|
}] });
|
|
828
837
|
|
|
829
838
|
class CheckboxEditorComponent extends BaseEditorComponent {
|
|
@@ -1348,6 +1357,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1348
1357
|
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" }]
|
|
1349
1358
|
}] });
|
|
1350
1359
|
|
|
1360
|
+
class AddButtonComponent {
|
|
1361
|
+
constructor() {
|
|
1362
|
+
this.grid = input.required();
|
|
1363
|
+
this.create = output();
|
|
1364
|
+
this.isActionAdd = computed(() => {
|
|
1365
|
+
const actions = this.grid().settings().actions;
|
|
1366
|
+
if (!actions) {
|
|
1367
|
+
return false;
|
|
1368
|
+
}
|
|
1369
|
+
return !!actions.add;
|
|
1370
|
+
});
|
|
1371
|
+
this.addNewButtonContent = computed(() => {
|
|
1372
|
+
const addParams = this.grid().settings()?.add;
|
|
1373
|
+
if (!addParams) {
|
|
1374
|
+
return 'Add New';
|
|
1375
|
+
}
|
|
1376
|
+
return addParams?.addButtonContent || 'Add New';
|
|
1377
|
+
});
|
|
1378
|
+
}
|
|
1379
|
+
onAdd(event) {
|
|
1380
|
+
event.preventDefault();
|
|
1381
|
+
event.stopPropagation();
|
|
1382
|
+
this.create.emit();
|
|
1383
|
+
}
|
|
1384
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1385
|
+
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: `
|
|
1386
|
+
@if (isActionAdd()) {
|
|
1387
|
+
<a
|
|
1388
|
+
href="#"
|
|
1389
|
+
class="ng2-smart-action ng2-smart-action-add-add"
|
|
1390
|
+
[innerHTML]="addNewButtonContent()"
|
|
1391
|
+
(click)="$event.preventDefault(); onAdd($event)"></a>
|
|
1392
|
+
}
|
|
1393
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1394
|
+
}
|
|
1395
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, decorators: [{
|
|
1396
|
+
type: Component,
|
|
1397
|
+
args: [{
|
|
1398
|
+
selector: '[ng2-st-add-button]',
|
|
1399
|
+
template: `
|
|
1400
|
+
@if (isActionAdd()) {
|
|
1401
|
+
<a
|
|
1402
|
+
href="#"
|
|
1403
|
+
class="ng2-smart-action ng2-smart-action-add-add"
|
|
1404
|
+
[innerHTML]="addNewButtonContent()"
|
|
1405
|
+
(click)="$event.preventDefault(); onAdd($event)"></a>
|
|
1406
|
+
}
|
|
1407
|
+
`,
|
|
1408
|
+
host: {
|
|
1409
|
+
class: 'ng2-smart-actions-title ng2-smart-actions-title-add',
|
|
1410
|
+
},
|
|
1411
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1412
|
+
}]
|
|
1413
|
+
}] });
|
|
1414
|
+
|
|
1415
|
+
class ColumnTitleComponent {
|
|
1416
|
+
constructor() {
|
|
1417
|
+
this.source = input.required();
|
|
1418
|
+
this.column = input.required();
|
|
1419
|
+
this.currentSortDirection = computed(() => {
|
|
1420
|
+
const { field, direction } = this.source().getSort();
|
|
1421
|
+
return this.column().id === field ? direction : null;
|
|
1422
|
+
});
|
|
1423
|
+
this.currentSortDirectionSymbol = computed(() => {
|
|
1424
|
+
return !this.currentSortDirection() ? '' : this.currentSortDirection() === 'asc' ? '↑' : '↓';
|
|
1425
|
+
});
|
|
1426
|
+
}
|
|
1427
|
+
_sort(event) {
|
|
1428
|
+
event.preventDefault();
|
|
1429
|
+
const { id: field, title } = this.column();
|
|
1430
|
+
this.source().setSort({
|
|
1431
|
+
field,
|
|
1432
|
+
title,
|
|
1433
|
+
direction: this.currentSortDirection() === 'desc' ? 'asc' : 'desc',
|
|
1434
|
+
compare: this.column().compareFunction,
|
|
1435
|
+
});
|
|
1436
|
+
}
|
|
1437
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1438
|
+
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: `
|
|
1439
|
+
@if (column().isSortable) {
|
|
1440
|
+
<a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
|
|
1441
|
+
{{ column().title }}
|
|
1442
|
+
<span class="sort-direction">{{ currentSortDirectionSymbol() }}</span>
|
|
1443
|
+
</a>
|
|
1444
|
+
} @else {
|
|
1445
|
+
<span class="ng2-smart-sort">{{ column().title }}</span>
|
|
1446
|
+
}
|
|
1447
|
+
`, isInline: true, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1448
|
+
}
|
|
1449
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, decorators: [{
|
|
1450
|
+
type: Component,
|
|
1451
|
+
args: [{ selector: 'ng2-st-column-title', template: `
|
|
1452
|
+
@if (column().isSortable) {
|
|
1453
|
+
<a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
|
|
1454
|
+
{{ column().title }}
|
|
1455
|
+
<span class="sort-direction">{{ currentSortDirectionSymbol() }}</span>
|
|
1456
|
+
</a>
|
|
1457
|
+
} @else {
|
|
1458
|
+
<span class="ng2-smart-sort">{{ column().title }}</span>
|
|
1459
|
+
}
|
|
1460
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"] }]
|
|
1461
|
+
}] });
|
|
1462
|
+
|
|
1351
1463
|
class CheckboxFilterComponent extends BaseFilterComponent {
|
|
1352
1464
|
constructor() {
|
|
1353
1465
|
super();
|
|
@@ -1688,107 +1800,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1688
1800
|
`, 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"] }]
|
|
1689
1801
|
}] });
|
|
1690
1802
|
|
|
1691
|
-
class
|
|
1803
|
+
class MobileFiltersComponent {
|
|
1692
1804
|
constructor() {
|
|
1805
|
+
this.overlay = inject(Overlay);
|
|
1806
|
+
this.contentTemplate = viewChild.required(CdkPortal);
|
|
1807
|
+
this.reference = viewChild.required('reference');
|
|
1693
1808
|
this.grid = input.required();
|
|
1694
|
-
this.
|
|
1695
|
-
this.
|
|
1696
|
-
const actions = this.grid().settings().actions;
|
|
1697
|
-
if (!actions) {
|
|
1698
|
-
return false;
|
|
1699
|
-
}
|
|
1700
|
-
return !!actions.add;
|
|
1701
|
-
});
|
|
1702
|
-
this.addNewButtonContent = computed(() => {
|
|
1703
|
-
const addParams = this.grid().settings()?.add;
|
|
1704
|
-
if (!addParams) {
|
|
1705
|
-
return 'Add New';
|
|
1706
|
-
}
|
|
1707
|
-
return addParams?.addButtonContent || 'Add New';
|
|
1708
|
-
});
|
|
1709
|
-
}
|
|
1710
|
-
onAdd(event) {
|
|
1711
|
-
event.preventDefault();
|
|
1712
|
-
event.stopPropagation();
|
|
1713
|
-
this.create.emit();
|
|
1809
|
+
this.source = input.required();
|
|
1810
|
+
this.filterInputClass = input.required();
|
|
1714
1811
|
}
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
@if (isActionAdd()) {
|
|
1718
|
-
<a
|
|
1719
|
-
href="#"
|
|
1720
|
-
class="ng2-smart-action ng2-smart-action-add-add"
|
|
1721
|
-
[innerHTML]="addNewButtonContent()"
|
|
1722
|
-
(click)="$event.preventDefault(); onAdd($event)"></a>
|
|
1812
|
+
clearAllFilters() {
|
|
1813
|
+
this.source().setFilters([]);
|
|
1723
1814
|
}
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
type: Component,
|
|
1728
|
-
args: [{
|
|
1729
|
-
selector: '[ng2-st-add-button]',
|
|
1730
|
-
template: `
|
|
1731
|
-
@if (isActionAdd()) {
|
|
1732
|
-
<a
|
|
1733
|
-
href="#"
|
|
1734
|
-
class="ng2-smart-action ng2-smart-action-add-add"
|
|
1735
|
-
[innerHTML]="addNewButtonContent()"
|
|
1736
|
-
(click)="$event.preventDefault(); onAdd($event)"></a>
|
|
1815
|
+
hide() {
|
|
1816
|
+
this.overlayRef?.detach();
|
|
1817
|
+
this.overlayRef?.dispose();
|
|
1737
1818
|
}
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1743
|
-
}]
|
|
1744
|
-
}] });
|
|
1745
|
-
|
|
1746
|
-
class ColumnTitleComponent {
|
|
1747
|
-
constructor() {
|
|
1748
|
-
this.source = input.required();
|
|
1749
|
-
this.column = input.required();
|
|
1750
|
-
this.currentSortDirection = computed(() => {
|
|
1751
|
-
const { field, direction } = this.source().getSort();
|
|
1752
|
-
return this.column().id === field ? direction : null;
|
|
1753
|
-
});
|
|
1754
|
-
this.currentSortDirectionSymbol = computed(() => {
|
|
1755
|
-
return !this.currentSortDirection() ? '' : this.currentSortDirection() === 'asc' ? '↑' : '↓';
|
|
1756
|
-
});
|
|
1819
|
+
show() {
|
|
1820
|
+
this.overlayRef = this.overlay.create(this.getOverlayConfig());
|
|
1821
|
+
this.overlayRef.attach(this.contentTemplate());
|
|
1822
|
+
this.overlayRef.backdropClick().subscribe(() => this.hide());
|
|
1757
1823
|
}
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1824
|
+
getOverlayConfig() {
|
|
1825
|
+
const positionStrategy = this.overlay
|
|
1826
|
+
.position()
|
|
1827
|
+
.flexibleConnectedTo(this.reference())
|
|
1828
|
+
.withPush(false)
|
|
1829
|
+
.withPositions([
|
|
1830
|
+
{
|
|
1831
|
+
originX: 'start',
|
|
1832
|
+
originY: 'bottom',
|
|
1833
|
+
overlayX: 'end',
|
|
1834
|
+
overlayY: 'top',
|
|
1835
|
+
},
|
|
1836
|
+
]);
|
|
1837
|
+
return new OverlayConfig({
|
|
1838
|
+
positionStrategy: positionStrategy,
|
|
1839
|
+
hasBackdrop: true,
|
|
1840
|
+
backdropClass: 'cdk-overlay-transparent-backdrop',
|
|
1766
1841
|
});
|
|
1767
1842
|
}
|
|
1768
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type:
|
|
1769
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type:
|
|
1770
|
-
@if (column().isSortable) {
|
|
1771
|
-
<a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
|
|
1772
|
-
{{ column().title }}
|
|
1773
|
-
<span class="sort-direction">{{ currentSortDirectionSymbol() }}</span>
|
|
1774
|
-
</a>
|
|
1775
|
-
} @else {
|
|
1776
|
-
<span class="ng2-smart-sort">{{ column().title }}</span>
|
|
1777
|
-
}
|
|
1778
|
-
`, isInline: true, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1843
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MobileFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1844
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: MobileFiltersComponent, isStandalone: true, selector: "ng2-mobile-filters", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, filterInputClass: { classPropertyName: "filterInputClass", publicName: "filterInputClass", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: CdkPortal, descendants: true, isSignal: true }, { propertyName: "reference", first: true, predicate: ["reference"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #reference class=\"filter-toggle\" (click)=\"show()\" 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 stroke=\"#000000\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n </g>\n </svg>\n</button>\n\n<ng-template cdk-portal>\n <div class=\"dropdown table-filter-dropdown\">\n <div class=\"dropdown-header\">\n <button type=\"button\" class=\"clear-filters-button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">\n reset all\n </button>\n <button type=\"button\" class=\"close-dialog-button\" (click)=\"hide()\" 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 [source]=\"source()\" [column]=\"column\" [inputClass]=\"filterInputClass()\">\n </ng2-smart-table-filter>\n </div>\n }\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".dropdown{z-index:1;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}.filter-toggle svg{height:1rem;width:1rem}.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}\n"], dependencies: [{ kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter", inputs: ["column", "source", "inputClass"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.TemplatePortalDirective, selector: "[cdk-portal], [portal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1779
1845
|
}
|
|
1780
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type:
|
|
1846
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MobileFiltersComponent, decorators: [{
|
|
1781
1847
|
type: Component,
|
|
1782
|
-
args: [{ selector: 'ng2-
|
|
1783
|
-
@if (column().isSortable) {
|
|
1784
|
-
<a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
|
|
1785
|
-
{{ column().title }}
|
|
1786
|
-
<span class="sort-direction">{{ currentSortDirectionSymbol() }}</span>
|
|
1787
|
-
</a>
|
|
1788
|
-
} @else {
|
|
1789
|
-
<span class="ng2-smart-sort">{{ column().title }}</span>
|
|
1790
|
-
}
|
|
1791
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"] }]
|
|
1848
|
+
args: [{ selector: 'ng2-mobile-filters', imports: [FilterComponent, PortalModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #reference class=\"filter-toggle\" (click)=\"show()\" 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 stroke=\"#000000\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n </g>\n </svg>\n</button>\n\n<ng-template cdk-portal>\n <div class=\"dropdown table-filter-dropdown\">\n <div class=\"dropdown-header\">\n <button type=\"button\" class=\"clear-filters-button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">\n reset all\n </button>\n <button type=\"button\" class=\"close-dialog-button\" (click)=\"hide()\" 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 [source]=\"source()\" [column]=\"column\" [inputClass]=\"filterInputClass()\">\n </ng2-smart-table-filter>\n </div>\n }\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".dropdown{z-index:1;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}.filter-toggle svg{height:1rem;width:1rem}.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}\n"] }]
|
|
1792
1849
|
}] });
|
|
1793
1850
|
|
|
1794
1851
|
class TheadFiltersRowComponent {
|
|
@@ -1957,7 +2014,7 @@ class Ng2SmartTableTheadComponent {
|
|
|
1957
2014
|
.dataSet.getColumns()
|
|
1958
2015
|
.filter((column) => column.isFilterable).length);
|
|
1959
2016
|
this.currentSortConfig = computed(() => this.source().getSort());
|
|
1960
|
-
this.
|
|
2017
|
+
this.filterDropdownIsOpen = signal(false);
|
|
1961
2018
|
this.filterInputClass = computed(() => {
|
|
1962
2019
|
const filterOptions = this.grid().settings()?.filter;
|
|
1963
2020
|
if (!filterOptions) {
|
|
@@ -1966,16 +2023,8 @@ class Ng2SmartTableTheadComponent {
|
|
|
1966
2023
|
return filterOptions.inputClass || '';
|
|
1967
2024
|
});
|
|
1968
2025
|
}
|
|
1969
|
-
toggleDropdown(
|
|
1970
|
-
this.
|
|
1971
|
-
if (value === type) {
|
|
1972
|
-
return null;
|
|
1973
|
-
}
|
|
1974
|
-
return type;
|
|
1975
|
-
});
|
|
1976
|
-
}
|
|
1977
|
-
clearAllFilters() {
|
|
1978
|
-
this.source().setFilters([]);
|
|
2026
|
+
toggleDropdown(state) {
|
|
2027
|
+
this.filterDropdownIsOpen.update((value) => state ?? !value);
|
|
1979
2028
|
}
|
|
1980
2029
|
sortByColumn(column) {
|
|
1981
2030
|
const sort = this.currentSortConfig();
|
|
@@ -1986,22 +2035,22 @@ class Ng2SmartTableTheadComponent {
|
|
|
1986
2035
|
title,
|
|
1987
2036
|
direction: direction,
|
|
1988
2037
|
});
|
|
1989
|
-
this.
|
|
2038
|
+
this.filterDropdownIsOpen.set(false);
|
|
1990
2039
|
}
|
|
1991
2040
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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 }); }
|
|
2041
|
+
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(true)\"\n [class.active]=\"filterDropdownIsOpen()\"\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]=\"filterDropdownIsOpen()\"\n [cdkConnectedOverlayWidth]=\"300\"\n (overlayOutsideClick)=\"toggleDropdown(false)\">\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(false)\"\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 <ng2-mobile-filters [grid]=\"grid()\" [source]=\"source()\" [filterInputClass]=\"filterInputClass()\">\n </ng2-mobile-filters>\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)}.dropdown{z-index:1;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}\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: MobileFiltersComponent, selector: "ng2-mobile-filters", inputs: ["grid", "source", "filterInputClass"] }, { 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$2.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$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1993
2042
|
}
|
|
1994
2043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
|
|
1995
2044
|
type: Component,
|
|
1996
2045
|
args: [{ selector: '[ng2-st-thead]', imports: [
|
|
1997
2046
|
TheadTitlesRowComponent,
|
|
1998
2047
|
AddButtonComponent,
|
|
1999
|
-
|
|
2048
|
+
MobileFiltersComponent,
|
|
2000
2049
|
ColumnTitleComponent,
|
|
2001
2050
|
TheadFiltersRowComponent,
|
|
2002
2051
|
NgTemplateOutlet,
|
|
2003
2052
|
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(
|
|
2053
|
+
], 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(true)\"\n [class.active]=\"filterDropdownIsOpen()\"\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]=\"filterDropdownIsOpen()\"\n [cdkConnectedOverlayWidth]=\"300\"\n (overlayOutsideClick)=\"toggleDropdown(false)\">\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(false)\"\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 <ng2-mobile-filters [grid]=\"grid()\" [source]=\"source()\" [filterInputClass]=\"filterInputClass()\">\n </ng2-mobile-filters>\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)}.dropdown{z-index:1;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}\n"] }]
|
|
2005
2054
|
}] });
|
|
2006
2055
|
|
|
2007
2056
|
class DataSet {
|
|
@@ -2552,11 +2601,11 @@ class Ng2SmartTableComponent {
|
|
|
2552
2601
|
}
|
|
2553
2602
|
}
|
|
2554
2603
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2555
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableComponent, isStandalone: true, selector: "ng2-smart-table", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", columnsSorted: "columnsSorted", deleteEmitter: "deleteEmitter", deleteConfirm: "deleteConfirm", edit: "edit", editConfirm: "editConfirm", editCancel: "editCancel", create: "create", createConfirm: "createConfirm", custom: "custom" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\" [class.mobile-view]=\"isMobileView()\">\n <thead\n ng2-st-thead\n [grid]=\"grid\"\n [source]=\"source()\"\n [isMobileView]=\"isMobileView()\"\n (create)=\"createEmitted()\"\n (selectAllRows)=\"onSelectAllRows()\"></thead>\n\n <tbody\n ng2-st-tbody\n [grid]=\"grid\"\n [source]=\"source()\"\n [rowClassFunction]=\"rowClassFunction()\"\n [isMobileView]=\"isMobileView()\"\n (deleteEmitter)=\"deleEmitted($event)\"\n (edit)=\"editEmitted($event)\"\n (editConfirmed)=\"editConfirmed($event)\"\n (editCancel)=\"editCanceled($event)\"\n (createConfirmed)=\"createConfirmed()\"\n (customActionEmitter)=\"customActionEmitted($event)\"\n (userClickedRow)=\"emitUserRowClicked($event)\"\n (multipleSelectRow)=\"multipleSelectRow($event)\"></tbody>\n</table>\n\n@if (isPagerDisplay()) {\n <ng2-smart-table-pager [source]=\"source()\"> </ng2-smart-table-pager>\n}\n", styles: [":host{max-width:100%;display:block}:host table{width:100%}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "isMobileView"], outputs: ["selectAllRows", "create"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "rowClassFunction", "isMobileView"], outputs: ["edit", "editConfirmed", "editCancel", "createConfirmed", "deleteEmitter", "customActionEmitter", "userClickedRow", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2604
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableComponent, isStandalone: true, selector: "ng2-smart-table", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", columnsSorted: "columnsSorted", deleteEmitter: "deleteEmitter", deleteConfirm: "deleteConfirm", edit: "edit", editConfirm: "editConfirm", editCancel: "editCancel", create: "create", createConfirm: "createConfirm", custom: "custom" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\" [class.mobile-view]=\"isMobileView()\">\n <thead\n ng2-st-thead\n [grid]=\"grid\"\n [source]=\"source()\"\n [isMobileView]=\"isMobileView()\"\n (create)=\"createEmitted()\"\n (selectAllRows)=\"onSelectAllRows()\"></thead>\n\n <tbody\n ng2-st-tbody\n [grid]=\"grid\"\n [source]=\"source()\"\n [rowClassFunction]=\"rowClassFunction()\"\n [isMobileView]=\"isMobileView()\"\n (deleteEmitter)=\"deleEmitted($event)\"\n (edit)=\"editEmitted($event)\"\n (editConfirmed)=\"editConfirmed($event)\"\n (editCancel)=\"editCanceled($event)\"\n (createConfirmed)=\"createConfirmed()\"\n (customActionEmitter)=\"customActionEmitted($event)\"\n (userClickedRow)=\"emitUserRowClicked($event)\"\n (multipleSelectRow)=\"multipleSelectRow($event)\"></tbody>\n</table>\n\n@if (isPagerDisplay()) {\n <ng2-smart-table-pager [source]=\"source()\"> </ng2-smart-table-pager>\n}\n", styles: [":host{max-width:100%;display:block}:host table{width:100%}:host .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}:host .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}:host .close-dialog-button:after,:host .close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}:host .close-dialog-button:before{rotate:45deg}:host .close-dialog-button:after{position:absolute;rotate:-45deg}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "isMobileView"], outputs: ["selectAllRows", "create"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "rowClassFunction", "isMobileView"], outputs: ["edit", "editConfirmed", "editCancel", "createConfirmed", "deleteEmitter", "customActionEmitter", "userClickedRow", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2556
2605
|
}
|
|
2557
2606
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableComponent, decorators: [{
|
|
2558
2607
|
type: Component,
|
|
2559
|
-
args: [{ selector: 'ng2-smart-table', imports: [Ng2SmartTableTheadComponent, Ng2SmartTableTbodyComponent, PagerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\" [class.mobile-view]=\"isMobileView()\">\n <thead\n ng2-st-thead\n [grid]=\"grid\"\n [source]=\"source()\"\n [isMobileView]=\"isMobileView()\"\n (create)=\"createEmitted()\"\n (selectAllRows)=\"onSelectAllRows()\"></thead>\n\n <tbody\n ng2-st-tbody\n [grid]=\"grid\"\n [source]=\"source()\"\n [rowClassFunction]=\"rowClassFunction()\"\n [isMobileView]=\"isMobileView()\"\n (deleteEmitter)=\"deleEmitted($event)\"\n (edit)=\"editEmitted($event)\"\n (editConfirmed)=\"editConfirmed($event)\"\n (editCancel)=\"editCanceled($event)\"\n (createConfirmed)=\"createConfirmed()\"\n (customActionEmitter)=\"customActionEmitted($event)\"\n (userClickedRow)=\"emitUserRowClicked($event)\"\n (multipleSelectRow)=\"multipleSelectRow($event)\"></tbody>\n</table>\n\n@if (isPagerDisplay()) {\n <ng2-smart-table-pager [source]=\"source()\"> </ng2-smart-table-pager>\n}\n", styles: [":host{max-width:100%;display:block}:host table{width:100%}\n"] }]
|
|
2608
|
+
args: [{ selector: 'ng2-smart-table', imports: [Ng2SmartTableTheadComponent, Ng2SmartTableTbodyComponent, PagerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\" [class.mobile-view]=\"isMobileView()\">\n <thead\n ng2-st-thead\n [grid]=\"grid\"\n [source]=\"source()\"\n [isMobileView]=\"isMobileView()\"\n (create)=\"createEmitted()\"\n (selectAllRows)=\"onSelectAllRows()\"></thead>\n\n <tbody\n ng2-st-tbody\n [grid]=\"grid\"\n [source]=\"source()\"\n [rowClassFunction]=\"rowClassFunction()\"\n [isMobileView]=\"isMobileView()\"\n (deleteEmitter)=\"deleEmitted($event)\"\n (edit)=\"editEmitted($event)\"\n (editConfirmed)=\"editConfirmed($event)\"\n (editCancel)=\"editCanceled($event)\"\n (createConfirmed)=\"createConfirmed()\"\n (customActionEmitter)=\"customActionEmitted($event)\"\n (userClickedRow)=\"emitUserRowClicked($event)\"\n (multipleSelectRow)=\"multipleSelectRow($event)\"></tbody>\n</table>\n\n@if (isPagerDisplay()) {\n <ng2-smart-table-pager [source]=\"source()\"> </ng2-smart-table-pager>\n}\n", styles: [":host{max-width:100%;display:block}:host table{width:100%}:host .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}:host .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}:host .close-dialog-button:after,:host .close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}:host .close-dialog-button:before{rotate:45deg}:host .close-dialog-button:after{position:absolute;rotate:-45deg}\n"] }]
|
|
2560
2609
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }] });
|
|
2561
2610
|
|
|
2562
2611
|
/**
|