ng-fusion-ui 0.6.1 → 0.6.2
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/ng-fusion-ui.mjs +46 -23
- package/fesm2022/ng-fusion-ui.mjs.map +1 -1
- package/lib/data-table/models/table-actions.model.d.ts +1 -1
- package/lib/data-table/services/table-edit.service.d.ts +1 -0
- package/lib/data-table/services/table-intl.service.d.ts +1 -0
- package/lib/data-table/services/table-sort.service.d.ts +1 -1
- package/lib/data-table/services/table-storage.service.d.ts +2 -2
- package/lib/data-table/table/table.component.d.ts +4 -2
- package/lib/data-table/table-filter/table-filter.component.d.ts +2 -0
- package/lib/data-table/table-paginator/table-paginator.component.d.ts +2 -1
- package/lib/data-table/tbody-cell/tbody-cell.component.d.ts +4 -1
- package/lib/data-table/thead-cell/thead-cell.component.d.ts +2 -2
- package/package.json +1 -1
- package/styles/_button-styles.scss +12 -12
- package/styles/_theme.scss +27 -12
- package/styles/styles.scss +1 -1
|
@@ -1265,7 +1265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
1265
1265
|
|
|
1266
1266
|
const initialState = {
|
|
1267
1267
|
currentPage: 0,
|
|
1268
|
-
pageSize:
|
|
1268
|
+
pageSize: 10,
|
|
1269
1269
|
sortKey: '',
|
|
1270
1270
|
sortDirection: '',
|
|
1271
1271
|
searchText: '',
|
|
@@ -1343,7 +1343,8 @@ class TableIntlService {
|
|
|
1343
1343
|
constructor() {
|
|
1344
1344
|
this.searchPlaceholder = signal('Search...');
|
|
1345
1345
|
this.pageSizeLabel = signal('Page size');
|
|
1346
|
-
this.noRecordsText = signal('No records found
|
|
1346
|
+
this.noRecordsText = signal('No records found');
|
|
1347
|
+
this.noEntriesLabel = signal('No entries');
|
|
1347
1348
|
this.entriesLabel = (first, last, total) => `${first} to ${last} of ${total} entries`;
|
|
1348
1349
|
}
|
|
1349
1350
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableIntlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
@@ -1360,6 +1361,7 @@ class TableEditService {
|
|
|
1360
1361
|
constructor() {
|
|
1361
1362
|
this.editIndex = signal(null);
|
|
1362
1363
|
this.editValues = signal({});
|
|
1364
|
+
this.savingIndex = signal(-1);
|
|
1363
1365
|
}
|
|
1364
1366
|
startEditing(rowIndex) {
|
|
1365
1367
|
this.editValues.set({});
|
|
@@ -1400,6 +1402,7 @@ class TablePaginatorComponent {
|
|
|
1400
1402
|
this.last = computed(() => Math.min((this.currentPage() + 1) * this.pageSize(), this.dataLenght()));
|
|
1401
1403
|
this.totalPages = computed(() => Math.ceil(this.dataLenght() / this.pageSize()));
|
|
1402
1404
|
this.totalItems = computed(() => this.dataLenght());
|
|
1405
|
+
this.noEntriesLabel = this.tableIntl.noEntriesLabel;
|
|
1403
1406
|
this.entriesLabel = computed(() => this.tableIntl.entriesLabel(this.first(), this.last(), this.totalItems()));
|
|
1404
1407
|
}
|
|
1405
1408
|
goToPage(page) {
|
|
@@ -1454,11 +1457,11 @@ class TablePaginatorComponent {
|
|
|
1454
1457
|
}
|
|
1455
1458
|
}
|
|
1456
1459
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TablePaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1457
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TablePaginatorComponent, isStandalone: true, selector: "fu-table-paginator", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, quickPageJump: { classPropertyName: "quickPageJump", publicName: "quickPageJump", isSignal: true, isRequired: false, transformFunction: null }, dataLenght: { classPropertyName: "dataLenght", publicName: "dataLenght", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"fu-table-paginator\">\r\n <div class=\"fu-paginator-page-select\">\r\n <div class=\"fu-item-count\">\r\n {{ entriesLabel() }}\r\n </div>\r\n\r\n <div>\r\n <span>{{ pageSizeLabel() }}:</span>\r\n <select class=\"fu-page-size-select\" (change)=\"changePageSize($event)\">\r\n @for (size of pageSizeOptions(); track $index) {\r\n <option [value]=\"size\" [selected]=\"size === pageSize()\">\r\n {{ size }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"fu-paginator-controls\">\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(0)\"\r\n [disabled]=\"currentPage() === 0\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"doubleArrowLeft\" />\r\n </button>\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(currentPage() - 1)\"\r\n [disabled]=\"currentPage() === 0\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"arrowLeft\" />\r\n </button>\r\n\r\n @if (quickPageJump()) {\r\n <div class=\"fu-jump-to-page\">\r\n <input\r\n #pageInput\r\n [min]=\"1\"\r\n [max]=\"totalPages()\"\r\n [value]=\"currentPage() + 1\"\r\n (input)=\"adjustWidth(pageInput)\"\r\n (change)=\"jumpToPage(pageInput)\"\r\n [disabled]=\"totalPages() === 0\"\r\n [style.width.px]=\"calculateWidth(pageInput.value)\"\r\n />\r\n <span>/</span>\r\n <span>{{ totalPages() }}</span>\r\n </div
|
|
1460
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TablePaginatorComponent, isStandalone: true, selector: "fu-table-paginator", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, quickPageJump: { classPropertyName: "quickPageJump", publicName: "quickPageJump", isSignal: true, isRequired: false, transformFunction: null }, dataLenght: { classPropertyName: "dataLenght", publicName: "dataLenght", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"fu-table-paginator\">\r\n <div class=\"fu-paginator-page-select\">\r\n <div class=\"fu-item-count\">\r\n @if (totalItems() !== 0) {\r\n {{ entriesLabel() }}\r\n } @else {\r\n {{ noEntriesLabel() }}\r\n }\r\n </div>\r\n\r\n <div>\r\n <span>{{ pageSizeLabel() }}:</span>\r\n <select class=\"fu-page-size-select\" (change)=\"changePageSize($event)\">\r\n @for (size of pageSizeOptions(); track $index) {\r\n <option [value]=\"size\" [selected]=\"size === pageSize()\">\r\n {{ size }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"fu-paginator-controls\">\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(0)\"\r\n [disabled]=\"currentPage() === 0\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"doubleArrowLeft\" />\r\n </button>\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(currentPage() - 1)\"\r\n [disabled]=\"currentPage() === 0\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"arrowLeft\" />\r\n </button>\r\n\r\n @if (quickPageJump()) {\r\n @if (totalPages() === 0) {\r\n <div class=\"fu-no-pages\">\r\n <span>-</span><span>/</span><span>-</span>\r\n </div>\r\n } @else {\r\n <div class=\"fu-jump-to-page\">\r\n <input\r\n #pageInput\r\n [min]=\"1\"\r\n [max]=\"totalPages()\"\r\n [value]=\"currentPage() + 1\"\r\n (input)=\"adjustWidth(pageInput)\"\r\n (change)=\"jumpToPage(pageInput)\"\r\n [disabled]=\"totalPages() === 0\"\r\n [style.width.px]=\"calculateWidth(pageInput.value)\"\r\n />\r\n <span>/</span>\r\n <span>{{ totalPages() }}</span>\r\n </div>\r\n }\r\n <!-- <div class=\"fu-jump-to-page\">\r\n <input\r\n #pageInput\r\n [min]=\"1\"\r\n [max]=\"totalPages()\"\r\n [value]=\"currentPage() + 1\"\r\n (input)=\"adjustWidth(pageInput)\"\r\n (change)=\"jumpToPage(pageInput)\"\r\n [disabled]=\"totalPages() === 0\"\r\n [style.width.px]=\"calculateWidth(pageInput.value)\"\r\n />\r\n <span>/</span>\r\n <span>{{ totalPages() }}</span>\r\n </div> -->\r\n }\r\n\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(currentPage() + 1)\"\r\n [disabled]=\"currentPage() + 1 >= totalPages()\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"arrowRight\" />\r\n </button>\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(totalPages() - 1)\"\r\n [disabled]=\"currentPage() + 1 >= totalPages()\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"doubleArrowRight\" />\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".fu-table-paginator{position:relative;display:grid;grid-template-columns:1fr max-content}@media (max-width: 900px){.fu-table-paginator{grid-template-columns:1fr}}.fu-table-paginator .fu-page-size-select{background-color:inherit;color:inherit;padding:4px;border:1px solid var(--fu-table-border-color)}.fu-table-paginator .fu-paginator-page-select{display:flex;justify-content:flex-end;align-items:center;margin-right:12px;font-size:14px}@media (max-width: 900px){.fu-table-paginator .fu-paginator-page-select{margin-right:0;margin-bottom:8px}}.fu-table-paginator .fu-paginator-page-select .fu-item-count{margin-right:auto}.fu-table-paginator .fu-paginator-page-select span{margin-right:8px}.fu-table-paginator .fu-paginator-controls{display:flex;justify-content:flex-end;align-items:center;gap:4px}.fu-jump-to-page{display:flex;justify-content:center;align-items:center;gap:4px;margin:0 8px}.fu-jump-to-page input{height:22px;text-align:center;background-color:inherit;color:inherit;border:1px solid var(--fu-quick-jump-border-color, var(--fu-primary-500));border-radius:4px}.fu-jump-to-page input:focus{outline:1px solid var(--fu-quick-jump-border-color, var(--fu-primary-500))}.fu-no-pages{display:flex;gap:10px;color:#4e4e4e;font-weight:700}.dark option{background-color:var(--fu-table-bg-color);color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: ButtonDirective, selector: "[fuButton]", inputs: ["variant", "severity", "iconButton", "rounded", "compact", "raised"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1458
1461
|
}
|
|
1459
1462
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TablePaginatorComponent, decorators: [{
|
|
1460
1463
|
type: Component,
|
|
1461
|
-
args: [{ selector: 'fu-table-paginator', imports: [ButtonModule, IconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fu-table-paginator\">\r\n <div class=\"fu-paginator-page-select\">\r\n <div class=\"fu-item-count\">\r\n {{ entriesLabel() }}\r\n </div>\r\n\r\n <div>\r\n <span>{{ pageSizeLabel() }}:</span>\r\n <select class=\"fu-page-size-select\" (change)=\"changePageSize($event)\">\r\n @for (size of pageSizeOptions(); track $index) {\r\n <option [value]=\"size\" [selected]=\"size === pageSize()\">\r\n {{ size }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"fu-paginator-controls\">\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(0)\"\r\n [disabled]=\"currentPage() === 0\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"doubleArrowLeft\" />\r\n </button>\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(currentPage() - 1)\"\r\n [disabled]=\"currentPage() === 0\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"arrowLeft\" />\r\n </button>\r\n\r\n @if (quickPageJump()) {\r\n <div class=\"fu-jump-to-page\">\r\n <input\r\n #pageInput\r\n [min]=\"1\"\r\n [max]=\"totalPages()\"\r\n [value]=\"currentPage() + 1\"\r\n (input)=\"adjustWidth(pageInput)\"\r\n (change)=\"jumpToPage(pageInput)\"\r\n [disabled]=\"totalPages() === 0\"\r\n [style.width.px]=\"calculateWidth(pageInput.value)\"\r\n />\r\n <span>/</span>\r\n <span>{{ totalPages() }}</span>\r\n </div
|
|
1464
|
+
args: [{ selector: 'fu-table-paginator', imports: [ButtonModule, IconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fu-table-paginator\">\r\n <div class=\"fu-paginator-page-select\">\r\n <div class=\"fu-item-count\">\r\n @if (totalItems() !== 0) {\r\n {{ entriesLabel() }}\r\n } @else {\r\n {{ noEntriesLabel() }}\r\n }\r\n </div>\r\n\r\n <div>\r\n <span>{{ pageSizeLabel() }}:</span>\r\n <select class=\"fu-page-size-select\" (change)=\"changePageSize($event)\">\r\n @for (size of pageSizeOptions(); track $index) {\r\n <option [value]=\"size\" [selected]=\"size === pageSize()\">\r\n {{ size }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"fu-paginator-controls\">\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(0)\"\r\n [disabled]=\"currentPage() === 0\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"doubleArrowLeft\" />\r\n </button>\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(currentPage() - 1)\"\r\n [disabled]=\"currentPage() === 0\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"arrowLeft\" />\r\n </button>\r\n\r\n @if (quickPageJump()) {\r\n @if (totalPages() === 0) {\r\n <div class=\"fu-no-pages\">\r\n <span>-</span><span>/</span><span>-</span>\r\n </div>\r\n } @else {\r\n <div class=\"fu-jump-to-page\">\r\n <input\r\n #pageInput\r\n [min]=\"1\"\r\n [max]=\"totalPages()\"\r\n [value]=\"currentPage() + 1\"\r\n (input)=\"adjustWidth(pageInput)\"\r\n (change)=\"jumpToPage(pageInput)\"\r\n [disabled]=\"totalPages() === 0\"\r\n [style.width.px]=\"calculateWidth(pageInput.value)\"\r\n />\r\n <span>/</span>\r\n <span>{{ totalPages() }}</span>\r\n </div>\r\n }\r\n <!-- <div class=\"fu-jump-to-page\">\r\n <input\r\n #pageInput\r\n [min]=\"1\"\r\n [max]=\"totalPages()\"\r\n [value]=\"currentPage() + 1\"\r\n (input)=\"adjustWidth(pageInput)\"\r\n (change)=\"jumpToPage(pageInput)\"\r\n [disabled]=\"totalPages() === 0\"\r\n [style.width.px]=\"calculateWidth(pageInput.value)\"\r\n />\r\n <span>/</span>\r\n <span>{{ totalPages() }}</span>\r\n </div> -->\r\n }\r\n\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(currentPage() + 1)\"\r\n [disabled]=\"currentPage() + 1 >= totalPages()\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"arrowRight\" />\r\n </button>\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(totalPages() - 1)\"\r\n [disabled]=\"currentPage() + 1 >= totalPages()\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"doubleArrowRight\" />\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".fu-table-paginator{position:relative;display:grid;grid-template-columns:1fr max-content}@media (max-width: 900px){.fu-table-paginator{grid-template-columns:1fr}}.fu-table-paginator .fu-page-size-select{background-color:inherit;color:inherit;padding:4px;border:1px solid var(--fu-table-border-color)}.fu-table-paginator .fu-paginator-page-select{display:flex;justify-content:flex-end;align-items:center;margin-right:12px;font-size:14px}@media (max-width: 900px){.fu-table-paginator .fu-paginator-page-select{margin-right:0;margin-bottom:8px}}.fu-table-paginator .fu-paginator-page-select .fu-item-count{margin-right:auto}.fu-table-paginator .fu-paginator-page-select span{margin-right:8px}.fu-table-paginator .fu-paginator-controls{display:flex;justify-content:flex-end;align-items:center;gap:4px}.fu-jump-to-page{display:flex;justify-content:center;align-items:center;gap:4px;margin:0 8px}.fu-jump-to-page input{height:22px;text-align:center;background-color:inherit;color:inherit;border:1px solid var(--fu-quick-jump-border-color, var(--fu-primary-500));border-radius:4px}.fu-jump-to-page input:focus{outline:1px solid var(--fu-quick-jump-border-color, var(--fu-primary-500))}.fu-no-pages{display:flex;gap:10px;color:#4e4e4e;font-weight:700}.dark option{background-color:var(--fu-table-bg-color);color:#fff}\n"] }]
|
|
1462
1465
|
}] });
|
|
1463
1466
|
|
|
1464
1467
|
class BodyTemplateDirective {
|
|
@@ -1547,9 +1550,17 @@ class TbodyCellComponent {
|
|
|
1547
1550
|
this.elementRef = inject(ElementRef);
|
|
1548
1551
|
this.isLoading = this.tableUtilityService.isLoading;
|
|
1549
1552
|
this.searchText = this.tableStorageService.searchText;
|
|
1553
|
+
this.editIndex = this.tableEditService.editIndex;
|
|
1554
|
+
this.savingIndex = this.tableEditService.savingIndex;
|
|
1550
1555
|
this.highLightedText = computed(() => this.highlightText());
|
|
1551
1556
|
this.sortCell = computed(() => this.tableUtilityService.sortCellIndex() === this.cellIndex());
|
|
1552
|
-
this.cellIndex = signal(-
|
|
1557
|
+
this.cellIndex = signal(-2);
|
|
1558
|
+
this.editSavingEffect = effect(() => {
|
|
1559
|
+
if (this.savingIndex() > -1 && !this.isLoading() && this.isEditing()) {
|
|
1560
|
+
this.tableEditService.savingIndex.set(-1);
|
|
1561
|
+
this.tableEditService.stopEditing();
|
|
1562
|
+
}
|
|
1563
|
+
});
|
|
1553
1564
|
}
|
|
1554
1565
|
ngOnInit() {
|
|
1555
1566
|
const rowIndex = this.getRowIndex();
|
|
@@ -1585,7 +1596,7 @@ class TbodyCellComponent {
|
|
|
1585
1596
|
return children.indexOf(element);
|
|
1586
1597
|
}
|
|
1587
1598
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TbodyCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1588
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TbodyCellComponent, isStandalone: true, selector: "fu-tbody-cell", inputs: { cellValue: { classPropertyName: "cellValue", publicName: "cellValue", isSignal: true, isRequired: false, transformFunction: null }, editKey: { classPropertyName: "editKey", publicName: "editKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "\"cell\"", "class.sorting": "sortCell()", "class.loading": "isLoading()" } }, ngImport: i0, template: "<div>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if (isLoading()) {\r\n <span class=\"fu-skeleton-loader\"></span>\r\n } @else {\r\n @if (cellValue() !== undefined) {\r\n @if (isEditing()) {\r\n @switch (this.cellValueType()) {\r\n @case ('string') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('number') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n type=\"number\"\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper\" [class.editing]=\"isEditing()\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n #editInput\r\n [id]=\"cellIndex()\"\r\n [checked]=\"cellValue()\"\r\n (change)=\"onInputChange(editInput.checked)\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label [for]=\"cellIndex()\"></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @switch (this.cellValueType()) {\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper fu-checkbox-disabled\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n disabled\r\n [checked]=\"cellValue()\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n @default {\r\n <span class=\"fu-cell-text\" [innerHTML]=\"highLightedText()\"></span>\r\n }\r\n }\r\n }\r\n } @else {\r\n <span class=\"fu-cell-text\" [style.display]=\"'flex'\"> <ng-content /></span>\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-tbody-cell{display:table-cell;text-align:left;vertical-align:middle;height:40px;border-bottom:1px solid var(--fu-table-border-color)}fu-tbody-cell.loading{pointer-events:none}fu-tbody-cell.sorting{background-color:var(--fu-table-sort-bg-color)}fu-tbody-cell>div{padding:0 8px}fu-tbody-cell input{width:100%;padding:4px 3px;background-color:inherit;color:inherit;border:1px solid var(--fu-table-text-color);border-radius:2px;background-color:var(--fu-table-edit-input-bg-color)}fu-tbody-cell .fu-edit{margin-left:-4px}@media (max-width: 900px){fu-tbody-cell .fu-edit{margin-left:0}}fu-tbody-cell input:focus{outline:1px solid var(--fu-table-text-color)}fu-tbody-cell .fu-cell-text{display:block;overflow:hidden;text-overflow:ellipsis}@media (max-width: 900px){fu-tbody-cell .fu-cell-text{margin-left:4px}fu-tbody-cell .fu-cell-text .fu-edit{margin-left:0}}fu-tbody-cell .fu-cell-text:has(svg){margin-left:2px}fu-tbody-cell .fu-header-text{display:none}@media (max-width: 900px){fu-tbody-cell{display:block;min-height:40px;height:auto;align-content:center}fu-tbody-cell div{display:grid;grid-template-columns:40% 1fr}fu-tbody-cell .fu-header-text{font-weight:700;text-transform:capitalize;display:flex;align-items:center;margin-right:12px}}.fu-skeleton-loader{display:block;height:16px;background:var(--fu-table-skeleton-color);position:relative;overflow:hidden;border-radius:4px;animation:fade 1.5s infinite ease-in-out}@media (max-width: 900px){.fu-skeleton-loader{height:20px;margin:3.6px 0}}@keyframes fade{0%,to{opacity:.5}50%{opacity:1}}.fu-highlight{background-color:var(--fu-table-highlight-bg-color);color:var(--fu-table-highlight-color);font-weight:700}.fu-checkbox-wrapper{--size: 24px;position:relative}.fu-checkbox-wrapper *,.fu-checkbox-wrapper *:before,.fu-checkbox-wrapper *:after{box-sizing:border-box}.fu-checkbox-wrapper .fu-input-checkbox{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.fu-checkbox-wrapper input:checked~svg{height:calc(var(--size) * .6)}.fu-checkbox-wrapper label:active:after{background-color:var(--fu-table-edit-input-bg-color)}.fu-checkbox-wrapper label{color:var(--fu-table-text-color);line-height:var(--size);cursor:pointer;position:relative}.fu-checkbox-wrapper label:after{content:\"\";height:var(--size);width:var(--size);margin-right:8px;float:left;border:1.5px solid var(--fu-table-border-color);border-radius:3px;transition:.15s all ease-out}.fu-checkbox-wrapper.editing label:after{border-color:var(--fu-table-text-color)}.fu-checkbox-wrapper svg{stroke:var(--fu-table-text-color);stroke-width:3px;height:0;width:calc(var(--size) * .6);position:absolute;left:calc(var(--size) * .21);top:calc(var(--size) * .2);stroke-dasharray:33}.fu-checkbox-disabled{pointer-events:none}@-webkit-keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}@keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1599
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TbodyCellComponent, isStandalone: true, selector: "fu-tbody-cell", inputs: { cellValue: { classPropertyName: "cellValue", publicName: "cellValue", isSignal: true, isRequired: false, transformFunction: null }, editKey: { classPropertyName: "editKey", publicName: "editKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "\"cell\"", "class.sorting": "sortCell()", "class.loading": "isLoading()" } }, ngImport: i0, template: "<div>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if ((isLoading() && savingIndex() < 0) || savingIndex() === rowIndex()) {\r\n <span class=\"fu-skeleton-loader\"></span>\r\n } @else {\r\n @if (cellValue() !== undefined) {\r\n @if (isEditing()) {\r\n @switch (this.cellValueType()) {\r\n @case ('string') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('number') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n type=\"number\"\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper\" [class.editing]=\"isEditing()\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n #editInput\r\n [id]=\"cellIndex()\"\r\n [checked]=\"cellValue()\"\r\n (change)=\"onInputChange(editInput.checked)\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label [for]=\"cellIndex()\"></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @switch (this.cellValueType()) {\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper fu-checkbox-disabled\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n disabled\r\n [checked]=\"cellValue()\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n @default {\r\n <span class=\"fu-cell-text\" [innerHTML]=\"highLightedText()\"></span>\r\n }\r\n }\r\n }\r\n } @else {\r\n <span class=\"fu-cell-text\" [style.display]=\"'flex'\"> <ng-content /></span>\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-tbody-cell{display:table-cell;text-align:left;vertical-align:middle;height:40px;border-bottom:1px solid var(--fu-table-border-color)}fu-tbody-cell.loading{pointer-events:none}fu-tbody-cell.sorting{background-color:var(--fu-table-sort-bg-color)}fu-tbody-cell>div{padding:0 8px}fu-tbody-cell input{width:100%;padding:4px 3px;background-color:inherit;color:inherit;border:1px solid var(--fu-table-text-color);border-radius:2px;background-color:var(--fu-table-edit-input-bg-color)}fu-tbody-cell .fu-edit{margin-left:-4px}@media (max-width: 900px){fu-tbody-cell .fu-edit{margin-left:0}}fu-tbody-cell input:focus{outline:1px solid var(--fu-table-text-color)}fu-tbody-cell .fu-cell-text{display:block;overflow:hidden;text-overflow:ellipsis}@media (max-width: 900px){fu-tbody-cell .fu-cell-text{margin-left:4px}fu-tbody-cell .fu-cell-text .fu-edit{margin-left:0}}fu-tbody-cell .fu-cell-text:has(svg){margin-left:2px}fu-tbody-cell .fu-header-text{display:none}@media (max-width: 900px){fu-tbody-cell{display:block;min-height:40px;height:auto;align-content:center}fu-tbody-cell div{display:grid;grid-template-columns:40% 1fr}fu-tbody-cell .fu-header-text{font-weight:700;text-transform:capitalize;display:flex;align-items:center;margin-right:12px}}.fu-skeleton-loader{display:block;height:16px;background:var(--fu-table-skeleton-color);position:relative;overflow:hidden;border-radius:4px;animation:fade 1.5s infinite ease-in-out}@media (max-width: 900px){.fu-skeleton-loader{height:20px;margin:3.6px 0}}@keyframes fade{0%,to{opacity:.5}50%{opacity:1}}.fu-highlight{background-color:var(--fu-table-highlight-bg-color);color:var(--fu-table-highlight-color);font-weight:700}.fu-checkbox-wrapper{--size: 24px;position:relative}.fu-checkbox-wrapper *,.fu-checkbox-wrapper *:before,.fu-checkbox-wrapper *:after{box-sizing:border-box}.fu-checkbox-wrapper .fu-input-checkbox{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.fu-checkbox-wrapper input:checked~svg{height:calc(var(--size) * .6)}.fu-checkbox-wrapper label:active:after{background-color:var(--fu-table-edit-input-bg-color)}.fu-checkbox-wrapper label{color:var(--fu-table-text-color);line-height:var(--size);cursor:pointer;position:relative}.fu-checkbox-wrapper label:after{content:\"\";height:var(--size);width:var(--size);margin-right:8px;float:left;border:1.5px solid var(--fu-table-border-color);border-radius:3px;transition:.15s all ease-out}.fu-checkbox-wrapper.editing label:after{border-color:var(--fu-table-text-color)}.fu-checkbox-wrapper svg{stroke:var(--fu-table-text-color);stroke-width:3px;height:0;width:calc(var(--size) * .6);position:absolute;left:calc(var(--size) * .21);top:calc(var(--size) * .2);stroke-dasharray:33}.fu-checkbox-disabled{pointer-events:none}@-webkit-keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}@keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1589
1600
|
}
|
|
1590
1601
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TbodyCellComponent, decorators: [{
|
|
1591
1602
|
type: Component,
|
|
@@ -1593,7 +1604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
1593
1604
|
'[attr.role]': '"cell"',
|
|
1594
1605
|
'[class.sorting]': 'sortCell()',
|
|
1595
1606
|
'[class.loading]': 'isLoading()',
|
|
1596
|
-
}, template: "<div>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if (isLoading()) {\r\n <span class=\"fu-skeleton-loader\"></span>\r\n } @else {\r\n @if (cellValue() !== undefined) {\r\n @if (isEditing()) {\r\n @switch (this.cellValueType()) {\r\n @case ('string') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('number') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n type=\"number\"\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper\" [class.editing]=\"isEditing()\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n #editInput\r\n [id]=\"cellIndex()\"\r\n [checked]=\"cellValue()\"\r\n (change)=\"onInputChange(editInput.checked)\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label [for]=\"cellIndex()\"></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @switch (this.cellValueType()) {\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper fu-checkbox-disabled\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n disabled\r\n [checked]=\"cellValue()\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n @default {\r\n <span class=\"fu-cell-text\" [innerHTML]=\"highLightedText()\"></span>\r\n }\r\n }\r\n }\r\n } @else {\r\n <span class=\"fu-cell-text\" [style.display]=\"'flex'\"> <ng-content /></span>\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-tbody-cell{display:table-cell;text-align:left;vertical-align:middle;height:40px;border-bottom:1px solid var(--fu-table-border-color)}fu-tbody-cell.loading{pointer-events:none}fu-tbody-cell.sorting{background-color:var(--fu-table-sort-bg-color)}fu-tbody-cell>div{padding:0 8px}fu-tbody-cell input{width:100%;padding:4px 3px;background-color:inherit;color:inherit;border:1px solid var(--fu-table-text-color);border-radius:2px;background-color:var(--fu-table-edit-input-bg-color)}fu-tbody-cell .fu-edit{margin-left:-4px}@media (max-width: 900px){fu-tbody-cell .fu-edit{margin-left:0}}fu-tbody-cell input:focus{outline:1px solid var(--fu-table-text-color)}fu-tbody-cell .fu-cell-text{display:block;overflow:hidden;text-overflow:ellipsis}@media (max-width: 900px){fu-tbody-cell .fu-cell-text{margin-left:4px}fu-tbody-cell .fu-cell-text .fu-edit{margin-left:0}}fu-tbody-cell .fu-cell-text:has(svg){margin-left:2px}fu-tbody-cell .fu-header-text{display:none}@media (max-width: 900px){fu-tbody-cell{display:block;min-height:40px;height:auto;align-content:center}fu-tbody-cell div{display:grid;grid-template-columns:40% 1fr}fu-tbody-cell .fu-header-text{font-weight:700;text-transform:capitalize;display:flex;align-items:center;margin-right:12px}}.fu-skeleton-loader{display:block;height:16px;background:var(--fu-table-skeleton-color);position:relative;overflow:hidden;border-radius:4px;animation:fade 1.5s infinite ease-in-out}@media (max-width: 900px){.fu-skeleton-loader{height:20px;margin:3.6px 0}}@keyframes fade{0%,to{opacity:.5}50%{opacity:1}}.fu-highlight{background-color:var(--fu-table-highlight-bg-color);color:var(--fu-table-highlight-color);font-weight:700}.fu-checkbox-wrapper{--size: 24px;position:relative}.fu-checkbox-wrapper *,.fu-checkbox-wrapper *:before,.fu-checkbox-wrapper *:after{box-sizing:border-box}.fu-checkbox-wrapper .fu-input-checkbox{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.fu-checkbox-wrapper input:checked~svg{height:calc(var(--size) * .6)}.fu-checkbox-wrapper label:active:after{background-color:var(--fu-table-edit-input-bg-color)}.fu-checkbox-wrapper label{color:var(--fu-table-text-color);line-height:var(--size);cursor:pointer;position:relative}.fu-checkbox-wrapper label:after{content:\"\";height:var(--size);width:var(--size);margin-right:8px;float:left;border:1.5px solid var(--fu-table-border-color);border-radius:3px;transition:.15s all ease-out}.fu-checkbox-wrapper.editing label:after{border-color:var(--fu-table-text-color)}.fu-checkbox-wrapper svg{stroke:var(--fu-table-text-color);stroke-width:3px;height:0;width:calc(var(--size) * .6);position:absolute;left:calc(var(--size) * .21);top:calc(var(--size) * .2);stroke-dasharray:33}.fu-checkbox-disabled{pointer-events:none}@-webkit-keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}@keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}\n"] }]
|
|
1607
|
+
}, template: "<div>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if ((isLoading() && savingIndex() < 0) || savingIndex() === rowIndex()) {\r\n <span class=\"fu-skeleton-loader\"></span>\r\n } @else {\r\n @if (cellValue() !== undefined) {\r\n @if (isEditing()) {\r\n @switch (this.cellValueType()) {\r\n @case ('string') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('number') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n type=\"number\"\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper\" [class.editing]=\"isEditing()\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n #editInput\r\n [id]=\"cellIndex()\"\r\n [checked]=\"cellValue()\"\r\n (change)=\"onInputChange(editInput.checked)\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label [for]=\"cellIndex()\"></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @switch (this.cellValueType()) {\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper fu-checkbox-disabled\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n disabled\r\n [checked]=\"cellValue()\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n @default {\r\n <span class=\"fu-cell-text\" [innerHTML]=\"highLightedText()\"></span>\r\n }\r\n }\r\n }\r\n } @else {\r\n <span class=\"fu-cell-text\" [style.display]=\"'flex'\"> <ng-content /></span>\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-tbody-cell{display:table-cell;text-align:left;vertical-align:middle;height:40px;border-bottom:1px solid var(--fu-table-border-color)}fu-tbody-cell.loading{pointer-events:none}fu-tbody-cell.sorting{background-color:var(--fu-table-sort-bg-color)}fu-tbody-cell>div{padding:0 8px}fu-tbody-cell input{width:100%;padding:4px 3px;background-color:inherit;color:inherit;border:1px solid var(--fu-table-text-color);border-radius:2px;background-color:var(--fu-table-edit-input-bg-color)}fu-tbody-cell .fu-edit{margin-left:-4px}@media (max-width: 900px){fu-tbody-cell .fu-edit{margin-left:0}}fu-tbody-cell input:focus{outline:1px solid var(--fu-table-text-color)}fu-tbody-cell .fu-cell-text{display:block;overflow:hidden;text-overflow:ellipsis}@media (max-width: 900px){fu-tbody-cell .fu-cell-text{margin-left:4px}fu-tbody-cell .fu-cell-text .fu-edit{margin-left:0}}fu-tbody-cell .fu-cell-text:has(svg){margin-left:2px}fu-tbody-cell .fu-header-text{display:none}@media (max-width: 900px){fu-tbody-cell{display:block;min-height:40px;height:auto;align-content:center}fu-tbody-cell div{display:grid;grid-template-columns:40% 1fr}fu-tbody-cell .fu-header-text{font-weight:700;text-transform:capitalize;display:flex;align-items:center;margin-right:12px}}.fu-skeleton-loader{display:block;height:16px;background:var(--fu-table-skeleton-color);position:relative;overflow:hidden;border-radius:4px;animation:fade 1.5s infinite ease-in-out}@media (max-width: 900px){.fu-skeleton-loader{height:20px;margin:3.6px 0}}@keyframes fade{0%,to{opacity:.5}50%{opacity:1}}.fu-highlight{background-color:var(--fu-table-highlight-bg-color);color:var(--fu-table-highlight-color);font-weight:700}.fu-checkbox-wrapper{--size: 24px;position:relative}.fu-checkbox-wrapper *,.fu-checkbox-wrapper *:before,.fu-checkbox-wrapper *:after{box-sizing:border-box}.fu-checkbox-wrapper .fu-input-checkbox{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.fu-checkbox-wrapper input:checked~svg{height:calc(var(--size) * .6)}.fu-checkbox-wrapper label:active:after{background-color:var(--fu-table-edit-input-bg-color)}.fu-checkbox-wrapper label{color:var(--fu-table-text-color);line-height:var(--size);cursor:pointer;position:relative}.fu-checkbox-wrapper label:after{content:\"\";height:var(--size);width:var(--size);margin-right:8px;float:left;border:1.5px solid var(--fu-table-border-color);border-radius:3px;transition:.15s all ease-out}.fu-checkbox-wrapper.editing label:after{border-color:var(--fu-table-text-color)}.fu-checkbox-wrapper svg{stroke:var(--fu-table-text-color);stroke-width:3px;height:0;width:calc(var(--size) * .6);position:absolute;left:calc(var(--size) * .21);top:calc(var(--size) * .2);stroke-dasharray:33}.fu-checkbox-disabled{pointer-events:none}@-webkit-keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}@keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}\n"] }]
|
|
1597
1608
|
}] });
|
|
1598
1609
|
|
|
1599
1610
|
class PopupTemplateDirective {
|
|
@@ -1617,18 +1628,26 @@ class TableFilterComponent {
|
|
|
1617
1628
|
constructor() {
|
|
1618
1629
|
this.title = input();
|
|
1619
1630
|
this.tableStorageService = inject(TableStorageService);
|
|
1631
|
+
this.tableEditService = inject(TableEditService);
|
|
1620
1632
|
this.tableIntl = inject(TableIntlService);
|
|
1621
1633
|
this.placeholder = this.tableIntl.searchPlaceholder;
|
|
1622
1634
|
this.searchText = this.tableStorageService.searchText;
|
|
1623
1635
|
}
|
|
1624
1636
|
resetSearch() {
|
|
1637
|
+
this.resetEdit();
|
|
1625
1638
|
this.tableStorageService.setSearchText('');
|
|
1626
1639
|
this.tableStorageService.setCurrentPage(0);
|
|
1627
1640
|
}
|
|
1628
1641
|
searchFilter(text) {
|
|
1642
|
+
this.resetEdit();
|
|
1629
1643
|
this.tableStorageService.setSearchText(text);
|
|
1630
1644
|
this.tableStorageService.setCurrentPage(0);
|
|
1631
1645
|
}
|
|
1646
|
+
resetEdit() {
|
|
1647
|
+
if (this.tableEditService.editIndex() !== null) {
|
|
1648
|
+
this.tableEditService.stopEditing();
|
|
1649
|
+
}
|
|
1650
|
+
}
|
|
1632
1651
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1633
1652
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TableFilterComponent, isStandalone: true, selector: "fu-table-filter", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"fu-table-search\" [class.title]=\"title()\">\r\n @if (title()) {\r\n <div class=\"fu-table-title\">\r\n <h3>{{ title() }}</h3>\r\n </div>\r\n }\r\n\r\n <input\r\n #searchInput\r\n type=\"text\"\r\n [placeholder]=\"placeholder()\"\r\n [value]=\"searchText()\"\r\n (input)=\"searchFilter(searchInput.value)\"\r\n />\r\n\r\n @if (searchText()) {\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n class=\"fu-table-clear-button\"\r\n (click)=\"resetSearch()\"\r\n >\r\n <fu-icon color=\"gray\" iconName=\"cancel\" />\r\n </button>\r\n }\r\n</div>\r\n", styles: [".fu-table-search{position:relative;margin-bottom:12px;display:grid}.fu-table-search.title{grid-template-columns:max-content 1fr}.fu-table-search .fu-table-title{display:flex;align-items:center;margin-right:12px}.fu-table-search input{padding:8px 40px 8px 8px;width:100%;box-sizing:border-box;background-color:inherit;color:inherit;border:1px solid var(--fu-table-border-color);outline:none;border-radius:4px}.fu-table-search .fu-table-clear-button{position:absolute;top:50%;right:0;transform:translateY(-50%)}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: ButtonDirective, selector: "[fuButton]", inputs: ["variant", "severity", "iconButton", "rounded", "compact", "raised"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1634
1653
|
}
|
|
@@ -1666,7 +1685,7 @@ class TableComponent {
|
|
|
1666
1685
|
});
|
|
1667
1686
|
this.tableLayout = input('auto');
|
|
1668
1687
|
this.firstPageOnInit = input(false);
|
|
1669
|
-
this.pageSizeOptions = input([
|
|
1688
|
+
this.pageSizeOptions = input([10, 15, 20]);
|
|
1670
1689
|
this.isLoading = input(false);
|
|
1671
1690
|
this.totalCount = input();
|
|
1672
1691
|
this.serverPagination = input(false);
|
|
@@ -1677,6 +1696,7 @@ class TableComponent {
|
|
|
1677
1696
|
this.quickPageJump = input(true);
|
|
1678
1697
|
this.popupOffset = input(0);
|
|
1679
1698
|
this.tableTitle = input();
|
|
1699
|
+
this.variant = input('raised');
|
|
1680
1700
|
this.setsFirstPage$ = input();
|
|
1681
1701
|
this.expandIndex = model(null);
|
|
1682
1702
|
this.noRecordsTemplate = contentChild('noRecordsTemplate');
|
|
@@ -1720,7 +1740,7 @@ class TableComponent {
|
|
|
1720
1740
|
}
|
|
1721
1741
|
});
|
|
1722
1742
|
this.hoveredRow = signal(null);
|
|
1723
|
-
this.popupPosition = signal({ top: 0, right: 0 });
|
|
1743
|
+
this.popupPosition = signal({ top: 0, left: 0, right: 0 });
|
|
1724
1744
|
this.isMobile = signal(false);
|
|
1725
1745
|
this.hidePopupTimeout = undefined;
|
|
1726
1746
|
this.isPopupReady = computed(() => this.popupTemplate() && !this.isMobile() && !this.isLoading());
|
|
@@ -1755,9 +1775,6 @@ class TableComponent {
|
|
|
1755
1775
|
this.filteredData.set([...this.dataSource()]);
|
|
1756
1776
|
}
|
|
1757
1777
|
}
|
|
1758
|
-
if (this.firstPageOnInit()) {
|
|
1759
|
-
this.tableStorageService.setCurrentPage(0);
|
|
1760
|
-
}
|
|
1761
1778
|
}
|
|
1762
1779
|
ngOnInit() {
|
|
1763
1780
|
this.isMobile.set(window.innerWidth < 900);
|
|
@@ -1766,6 +1783,9 @@ class TableComponent {
|
|
|
1766
1783
|
.subscribe(() => {
|
|
1767
1784
|
this.tableStorageService.setCurrentPage(0);
|
|
1768
1785
|
});
|
|
1786
|
+
if (this.firstPageOnInit()) {
|
|
1787
|
+
this.tableStorageService.setCurrentPage(0);
|
|
1788
|
+
}
|
|
1769
1789
|
}
|
|
1770
1790
|
onResize() {
|
|
1771
1791
|
const mobile = window.innerWidth < 900;
|
|
@@ -1851,7 +1871,8 @@ class TableComponent {
|
|
|
1851
1871
|
const rect = rowElement.getBoundingClientRect();
|
|
1852
1872
|
this.popupPosition.set({
|
|
1853
1873
|
top: rect.top + window.scrollY,
|
|
1854
|
-
|
|
1874
|
+
left: rect.right + window.scrollX,
|
|
1875
|
+
right: window.innerWidth - rect.right + this.popupOffset(),
|
|
1855
1876
|
});
|
|
1856
1877
|
}
|
|
1857
1878
|
}
|
|
@@ -1876,12 +1897,12 @@ class TableComponent {
|
|
|
1876
1897
|
this.hoveredRow.set(null);
|
|
1877
1898
|
}
|
|
1878
1899
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1879
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TableComponent, isStandalone: true, selector: "fu-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, tableLayout: { classPropertyName: "tableLayout", publicName: "tableLayout", isSignal: true, isRequired: false, transformFunction: null }, firstPageOnInit: { classPropertyName: "firstPageOnInit", publicName: "firstPageOnInit", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: false, transformFunction: null }, serverPagination: { classPropertyName: "serverPagination", publicName: "serverPagination", isSignal: true, isRequired: false, transformFunction: null }, stripedRows: { classPropertyName: "stripedRows", publicName: "stripedRows", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, quickPageJump: { classPropertyName: "quickPageJump", publicName: "quickPageJump", isSignal: true, isRequired: false, transformFunction: null }, popupOffset: { classPropertyName: "popupOffset", publicName: "popupOffset", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, setsFirstPage$: { classPropertyName: "setsFirstPage$", publicName: "setsFirstPage$", isSignal: true, isRequired: false, transformFunction: null }, expandIndex: { classPropertyName: "expandIndex", publicName: "expandIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandIndex: "expandIndexChange", tableActions: "tableActions", selectRowAction: "selectRowAction" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [
|
|
1900
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TableComponent, isStandalone: true, selector: "fu-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, tableLayout: { classPropertyName: "tableLayout", publicName: "tableLayout", isSignal: true, isRequired: false, transformFunction: null }, firstPageOnInit: { classPropertyName: "firstPageOnInit", publicName: "firstPageOnInit", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: false, transformFunction: null }, serverPagination: { classPropertyName: "serverPagination", publicName: "serverPagination", isSignal: true, isRequired: false, transformFunction: null }, stripedRows: { classPropertyName: "stripedRows", publicName: "stripedRows", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, quickPageJump: { classPropertyName: "quickPageJump", publicName: "quickPageJump", isSignal: true, isRequired: false, transformFunction: null }, popupOffset: { classPropertyName: "popupOffset", publicName: "popupOffset", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, setsFirstPage$: { classPropertyName: "setsFirstPage$", publicName: "setsFirstPage$", isSignal: true, isRequired: false, transformFunction: null }, expandIndex: { classPropertyName: "expandIndex", publicName: "expandIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandIndex: "expandIndexChange", tableActions: "tableActions", selectRowAction: "selectRowAction" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [
|
|
1880
1901
|
TableUtilityService,
|
|
1881
1902
|
TableStorageService,
|
|
1882
1903
|
TableSortService,
|
|
1883
1904
|
TableEditService,
|
|
1884
|
-
], queries: [{ propertyName: "noRecordsTemplate", first: true, predicate: ["noRecordsTemplate"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true, isSignal: true }, { propertyName: "popupTemplate", first: true, predicate: PopupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "expandTemplate", first: true, predicate: ExpandTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: BodyTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fu-table-wrapper\">\r\n <!-- Search Filter -->\r\n @if (showFilter()) {\r\n <fu-table-filter [title]=\"tableTitle()\" />\r\n } @else if (tableTitle()) {\r\n <div style=\"margin-bottom: 12px\">\r\n <h3>{{ tableTitle() }}</h3>\r\n </div>\r\n }\r\n\r\n <!-- Table -->\r\n <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n <thead [attr.role]=\"'rowgroup'\">\r\n <tr [attr.role]=\"'row'\">\r\n @if (expandable()
|
|
1905
|
+
], queries: [{ propertyName: "noRecordsTemplate", first: true, predicate: ["noRecordsTemplate"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true, isSignal: true }, { propertyName: "popupTemplate", first: true, predicate: PopupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "expandTemplate", first: true, predicate: ExpandTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: BodyTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fu-table-wrapper\" [attr.outlined]=\"variant() === 'outlined'\">\r\n <!-- Search Filter -->\r\n @if (showFilter()) {\r\n <fu-table-filter [title]=\"tableTitle()\" />\r\n } @else if (tableTitle()) {\r\n <div style=\"margin-bottom: 12px\">\r\n <h3>{{ tableTitle() }}</h3>\r\n </div>\r\n }\r\n\r\n <!-- Table -->\r\n <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n <thead [attr.role]=\"'rowgroup'\">\r\n <tr [attr.role]=\"'row'\">\r\n @if (expandable()) {\r\n <th class=\"fu-expand-head\"></th>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate();\r\n context: { $implicit: dataSource()[0] | keyMapping }\r\n \"\r\n />\r\n </tr>\r\n </thead>\r\n\r\n <tbody [attr.role]=\"'rowgroup'\">\r\n @if (isInitLoad()) {\r\n <ng-container *ngTemplateOutlet=\"initLoadTemplate\" />\r\n } @else {\r\n @for (row of sortedData(); track $index; let odd = $odd) {\r\n <tr\r\n [attr.outlined]=\"variant() === 'outlined'\"\r\n [attr.role]=\"'row'\"\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{\r\n striped: stripedRows() && odd,\r\n hoverable: expandable() || selectRowAction.observed,\r\n }\"\r\n (mouseenter)=\"onRowHover($event, row)\"\r\n (mouseleave)=\"onRowLeave()\"\r\n (click)=\"toggleRow(row, $index)\"\r\n >\r\n @if (expandable()) {\r\n <td\r\n class=\"fu-expand-cell\"\r\n [attr.data-expand]=\"expandedRowIndex === $index\"\r\n >\r\n <fu-icon size=\"16px\" iconName=\"chevronRight\" />\r\n </td>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate();\r\n context: {\r\n $implicit: row,\r\n index: $index,\r\n keys: row | keyMapping,\r\n }\r\n \"\r\n />\r\n </tr>\r\n\r\n @if (\r\n (expandable() && expandedRowIndex === $index) ||\r\n expandIndex() === $index\r\n ) {\r\n <tr class=\"fu-expand-row\" (mouseenter)=\"onExpandHover()\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate() || null;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n } @empty {\r\n <tr class=\"fu-empty-row\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n noRecordsTemplate() || defaultNoRecordsTemplate\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n\r\n @if (footerTemplate()) {\r\n <div class=\"fu-table-footer\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n footerTemplate() || null;\r\n context: { $implicit: sortedData() }\r\n \"\r\n />\r\n </div>\r\n }\r\n\r\n @if (showPaginator()) {\r\n <fu-table-paginator\r\n [dataLenght]=\"totalItems()\"\r\n [quickPageJump]=\"quickPageJump()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n />\r\n }\r\n</div>\r\n\r\n@if (hoveredRow()) {\r\n <div\r\n class=\"fu-action-popup\"\r\n [style.top.px]=\"popupPosition().top\"\r\n [style.right.px]=\"popupPosition().right\"\r\n (mouseenter)=\"onPopupHover()\"\r\n (mouseleave)=\"onPopupLeave()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n popupTemplate() || null;\r\n context: { $implicit: hoveredRow() }\r\n \"\r\n />\r\n </div>\r\n}\r\n\r\n<ng-template #defaultNoRecordsTemplate>\r\n <div class=\"fu-no-records\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M12 8v4m0 4.01l.01-.011M9 3H4v3m0 5v2m16-2v2M15 3h5v3M9 21H4v-3m11 3h5v-3\"\r\n />\r\n </svg>\r\n <p>{{ noRecordsText() }}</p>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #initLoadTemplate>\r\n @for (item of arrayFromSize(); track $index) {\r\n <tr class=\"fu-empty-row\">\r\n @for (item of arrayFromCols(); track $index) {\r\n <fu-tbody-cell />\r\n }\r\n </tr>\r\n }\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{width:100%;overflow-x:auto;padding:12px;font-family:Roboto,sans-serif;font-size:14px;background-color:var(--fu-table-bg-color);color:var(--fu-table-text-color);border-radius:4px}.fu-table-wrapper[outlined=true]{border:1px solid var(--fu-table-border-color)}.fu-table-wrapper[outlined=false]{box-shadow:0 1px 4px #0000005e}table{border-collapse:collapse;width:100%;margin-bottom:12px}thead tr{background-color:var(--fu-table-header-bg-color)}thead tr .fu-expand-head{width:40px;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){thead tr .fu-expand-head{display:none}}tbody tr .fu-expand-cell{border-bottom:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle}tbody tr .fu-expand-cell fu-icon{margin-top:3px}@media (max-width: 900px){tbody tr .fu-expand-cell{display:none}}tbody tr .fu-expand-cell[data-expand=true] fu-icon{transition:.1s ease-in-out;transform:rotate(90deg)}.fu-body-row{transition:.2s ease-in-out}.fu-body-row.striped{background-color:var(--fu-table-striped-row-bg-color)}.fu-body-row.hoverable:hover{background-color:var(--fu-table-bg-hover-color);cursor:pointer}tr.fu-expand-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px}tr.fu-empty-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px;text-align:center}tr.fu-empty-row>td svg{width:100px;height:100px;color:var(--fu-table-border-color)}@media (max-width: 900px){table{border:none;box-shadow:none;min-width:100%}thead{border-bottom:1px solid var(--fu-table-border-color)}tbody tr[outlined=true]{border-right:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}tbody tr:first-child{border-top:none}tbody tr:last-child{margin-bottom:0}tr{display:block;margin-bottom:12px}tr[outlined=false]{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}tr.fu-expand-row{margin-top:-8px;display:block;width:100%}tr.fu-expand-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}tr.fu-empty-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}}.fu-table-footer{position:relative;min-height:40px;margin-bottom:8px;background-color:var(--fu-table-header-bg-color);border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}.fu-action-popup{position:absolute;display:flex;align-items:center;gap:8px;background:var(--fu-table-bg-color);box-shadow:0 4px 6px #0000001a;border:1px solid var(--fu-table-border-color);border-radius:4px;min-height:40px;z-index:10;padding:0 8px}.fu-no-records{display:flex;flex-direction:column;justify-content:center;align-items:center;height:180px}.fu-no-records>p{color:#aeadad}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "component", type: TablePaginatorComponent, selector: "fu-table-paginator", inputs: ["pageSizeOptions", "quickPageJump", "dataLenght"] }, { kind: "component", type: TableFilterComponent, selector: "fu-table-filter", inputs: ["title"] }, { kind: "component", type: TbodyCellComponent, selector: "fu-tbody-cell", inputs: ["cellValue", "editKey"] }, { kind: "pipe", type: KeyMappingPipe, name: "keyMapping" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1885
1906
|
}
|
|
1886
1907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableComponent, decorators: [{
|
|
1887
1908
|
type: Component,
|
|
@@ -1898,7 +1919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
1898
1919
|
TableStorageService,
|
|
1899
1920
|
TableSortService,
|
|
1900
1921
|
TableEditService,
|
|
1901
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fu-table-wrapper\">\r\n <!-- Search Filter -->\r\n @if (showFilter()) {\r\n <fu-table-filter [title]=\"tableTitle()\" />\r\n } @else if (tableTitle()) {\r\n <div style=\"margin-bottom: 12px\">\r\n <h3>{{ tableTitle() }}</h3>\r\n </div>\r\n }\r\n\r\n <!-- Table -->\r\n <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n <thead [attr.role]=\"'rowgroup'\">\r\n <tr [attr.role]=\"'row'\">\r\n @if (expandable()
|
|
1922
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fu-table-wrapper\" [attr.outlined]=\"variant() === 'outlined'\">\r\n <!-- Search Filter -->\r\n @if (showFilter()) {\r\n <fu-table-filter [title]=\"tableTitle()\" />\r\n } @else if (tableTitle()) {\r\n <div style=\"margin-bottom: 12px\">\r\n <h3>{{ tableTitle() }}</h3>\r\n </div>\r\n }\r\n\r\n <!-- Table -->\r\n <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n <thead [attr.role]=\"'rowgroup'\">\r\n <tr [attr.role]=\"'row'\">\r\n @if (expandable()) {\r\n <th class=\"fu-expand-head\"></th>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate();\r\n context: { $implicit: dataSource()[0] | keyMapping }\r\n \"\r\n />\r\n </tr>\r\n </thead>\r\n\r\n <tbody [attr.role]=\"'rowgroup'\">\r\n @if (isInitLoad()) {\r\n <ng-container *ngTemplateOutlet=\"initLoadTemplate\" />\r\n } @else {\r\n @for (row of sortedData(); track $index; let odd = $odd) {\r\n <tr\r\n [attr.outlined]=\"variant() === 'outlined'\"\r\n [attr.role]=\"'row'\"\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{\r\n striped: stripedRows() && odd,\r\n hoverable: expandable() || selectRowAction.observed,\r\n }\"\r\n (mouseenter)=\"onRowHover($event, row)\"\r\n (mouseleave)=\"onRowLeave()\"\r\n (click)=\"toggleRow(row, $index)\"\r\n >\r\n @if (expandable()) {\r\n <td\r\n class=\"fu-expand-cell\"\r\n [attr.data-expand]=\"expandedRowIndex === $index\"\r\n >\r\n <fu-icon size=\"16px\" iconName=\"chevronRight\" />\r\n </td>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate();\r\n context: {\r\n $implicit: row,\r\n index: $index,\r\n keys: row | keyMapping,\r\n }\r\n \"\r\n />\r\n </tr>\r\n\r\n @if (\r\n (expandable() && expandedRowIndex === $index) ||\r\n expandIndex() === $index\r\n ) {\r\n <tr class=\"fu-expand-row\" (mouseenter)=\"onExpandHover()\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate() || null;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n } @empty {\r\n <tr class=\"fu-empty-row\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n noRecordsTemplate() || defaultNoRecordsTemplate\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n\r\n @if (footerTemplate()) {\r\n <div class=\"fu-table-footer\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n footerTemplate() || null;\r\n context: { $implicit: sortedData() }\r\n \"\r\n />\r\n </div>\r\n }\r\n\r\n @if (showPaginator()) {\r\n <fu-table-paginator\r\n [dataLenght]=\"totalItems()\"\r\n [quickPageJump]=\"quickPageJump()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n />\r\n }\r\n</div>\r\n\r\n@if (hoveredRow()) {\r\n <div\r\n class=\"fu-action-popup\"\r\n [style.top.px]=\"popupPosition().top\"\r\n [style.right.px]=\"popupPosition().right\"\r\n (mouseenter)=\"onPopupHover()\"\r\n (mouseleave)=\"onPopupLeave()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n popupTemplate() || null;\r\n context: { $implicit: hoveredRow() }\r\n \"\r\n />\r\n </div>\r\n}\r\n\r\n<ng-template #defaultNoRecordsTemplate>\r\n <div class=\"fu-no-records\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M12 8v4m0 4.01l.01-.011M9 3H4v3m0 5v2m16-2v2M15 3h5v3M9 21H4v-3m11 3h5v-3\"\r\n />\r\n </svg>\r\n <p>{{ noRecordsText() }}</p>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #initLoadTemplate>\r\n @for (item of arrayFromSize(); track $index) {\r\n <tr class=\"fu-empty-row\">\r\n @for (item of arrayFromCols(); track $index) {\r\n <fu-tbody-cell />\r\n }\r\n </tr>\r\n }\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{width:100%;overflow-x:auto;padding:12px;font-family:Roboto,sans-serif;font-size:14px;background-color:var(--fu-table-bg-color);color:var(--fu-table-text-color);border-radius:4px}.fu-table-wrapper[outlined=true]{border:1px solid var(--fu-table-border-color)}.fu-table-wrapper[outlined=false]{box-shadow:0 1px 4px #0000005e}table{border-collapse:collapse;width:100%;margin-bottom:12px}thead tr{background-color:var(--fu-table-header-bg-color)}thead tr .fu-expand-head{width:40px;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){thead tr .fu-expand-head{display:none}}tbody tr .fu-expand-cell{border-bottom:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle}tbody tr .fu-expand-cell fu-icon{margin-top:3px}@media (max-width: 900px){tbody tr .fu-expand-cell{display:none}}tbody tr .fu-expand-cell[data-expand=true] fu-icon{transition:.1s ease-in-out;transform:rotate(90deg)}.fu-body-row{transition:.2s ease-in-out}.fu-body-row.striped{background-color:var(--fu-table-striped-row-bg-color)}.fu-body-row.hoverable:hover{background-color:var(--fu-table-bg-hover-color);cursor:pointer}tr.fu-expand-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px}tr.fu-empty-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px;text-align:center}tr.fu-empty-row>td svg{width:100px;height:100px;color:var(--fu-table-border-color)}@media (max-width: 900px){table{border:none;box-shadow:none;min-width:100%}thead{border-bottom:1px solid var(--fu-table-border-color)}tbody tr[outlined=true]{border-right:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}tbody tr:first-child{border-top:none}tbody tr:last-child{margin-bottom:0}tr{display:block;margin-bottom:12px}tr[outlined=false]{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}tr.fu-expand-row{margin-top:-8px;display:block;width:100%}tr.fu-expand-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}tr.fu-empty-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}}.fu-table-footer{position:relative;min-height:40px;margin-bottom:8px;background-color:var(--fu-table-header-bg-color);border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}.fu-action-popup{position:absolute;display:flex;align-items:center;gap:8px;background:var(--fu-table-bg-color);box-shadow:0 4px 6px #0000001a;border:1px solid var(--fu-table-border-color);border-radius:4px;min-height:40px;z-index:10;padding:0 8px}.fu-no-records{display:flex;flex-direction:column;justify-content:center;align-items:center;height:180px}.fu-no-records>p{color:#aeadad}\n"] }]
|
|
1902
1923
|
}], propDecorators: { selectRowAction: [{
|
|
1903
1924
|
type: Output
|
|
1904
1925
|
}], onResize: [{
|
|
@@ -1909,7 +1930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
1909
1930
|
class TheadCellComponent {
|
|
1910
1931
|
constructor() {
|
|
1911
1932
|
this.headerText = input('');
|
|
1912
|
-
this.sortKey = input(
|
|
1933
|
+
this.sortKey = input(undefined);
|
|
1913
1934
|
this.width = input('auto');
|
|
1914
1935
|
this.tableStorageService = inject(TableStorageService);
|
|
1915
1936
|
this.tableSortService = inject(TableSortService);
|
|
@@ -1942,14 +1963,14 @@ class TheadCellComponent {
|
|
|
1942
1963
|
return Array.from(parent.children).indexOf(this.elementRef.nativeElement);
|
|
1943
1964
|
}
|
|
1944
1965
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TheadCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1945
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TheadCellComponent, isStandalone: true, selector: "fu-thead-cell", inputs: { headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "\"columnheader\"", "style.width": "width()", "class.sorting": "
|
|
1966
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TheadCellComponent, isStandalone: true, selector: "fu-thead-cell", inputs: { headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "\"columnheader\"", "style.width": "width()", "class.sorting": "sortKey() !== undefined" } }, ngImport: i0, template: "<div\r\n class=\"fu-header-cell\"\r\n (click)=\"toogleSort()\"\r\n [ngClass]=\"{ disabled: !sortKey() }\"\r\n>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if (sortKey()) {\r\n @if (sortColumn() === sortKey()) {\r\n @switch (sortDirection()) {\r\n @case ('asc') {\r\n <fu-icon size=\"1rem\" strokeWidth=\"2.5\" iconName=\"sortAsc\" />\r\n }\r\n @case ('desc') {\r\n <fu-icon size=\"1rem\" strokeWidth=\"2.5\" iconName=\"sortDesc\" />\r\n }\r\n @default {\r\n <fu-icon size=\"1rem\" color=\"gray\" iconName=\"sort\" />\r\n }\r\n }\r\n } @else {\r\n <fu-icon size=\"1rem\" color=\"gray\" iconName=\"sort\" />\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-thead-cell{display:table-cell;text-align:left;font-weight:700;text-transform:capitalize;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){fu-thead-cell{width:auto!important}}fu-thead-cell .fu-header-cell{display:flex;align-items:center;padding:12px 8px;cursor:pointer}fu-thead-cell .fu-header-cell:hover{background-color:var(--fu-table-bg-hover-color);transition:background-color .3s}fu-thead-cell .fu-header-cell .fu-header-text{margin-right:4px}fu-thead-cell .disabled{pointer-events:none}@media (max-width: 900px){fu-thead-cell{display:none}}@media (max-width: 900px){fu-thead-cell.sorting{display:inline-block;border-bottom:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1946
1967
|
}
|
|
1947
1968
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TheadCellComponent, decorators: [{
|
|
1948
1969
|
type: Component,
|
|
1949
1970
|
args: [{ selector: 'fu-thead-cell', imports: [CommonModule, IconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1950
1971
|
'[attr.role]': '"columnheader"',
|
|
1951
1972
|
'[style.width]': 'width()',
|
|
1952
|
-
'[class.sorting]': '
|
|
1973
|
+
'[class.sorting]': 'sortKey() !== undefined',
|
|
1953
1974
|
}, template: "<div\r\n class=\"fu-header-cell\"\r\n (click)=\"toogleSort()\"\r\n [ngClass]=\"{ disabled: !sortKey() }\"\r\n>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if (sortKey()) {\r\n @if (sortColumn() === sortKey()) {\r\n @switch (sortDirection()) {\r\n @case ('asc') {\r\n <fu-icon size=\"1rem\" strokeWidth=\"2.5\" iconName=\"sortAsc\" />\r\n }\r\n @case ('desc') {\r\n <fu-icon size=\"1rem\" strokeWidth=\"2.5\" iconName=\"sortDesc\" />\r\n }\r\n @default {\r\n <fu-icon size=\"1rem\" color=\"gray\" iconName=\"sort\" />\r\n }\r\n }\r\n } @else {\r\n <fu-icon size=\"1rem\" color=\"gray\" iconName=\"sort\" />\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-thead-cell{display:table-cell;text-align:left;font-weight:700;text-transform:capitalize;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){fu-thead-cell{width:auto!important}}fu-thead-cell .fu-header-cell{display:flex;align-items:center;padding:12px 8px;cursor:pointer}fu-thead-cell .fu-header-cell:hover{background-color:var(--fu-table-bg-hover-color);transition:background-color .3s}fu-thead-cell .fu-header-cell .fu-header-text{margin-right:4px}fu-thead-cell .disabled{pointer-events:none}@media (max-width: 900px){fu-thead-cell{display:none}}@media (max-width: 900px){fu-thead-cell.sorting{display:inline-block;border-bottom:none}}\n"] }]
|
|
1954
1975
|
}] });
|
|
1955
1976
|
|
|
@@ -1965,7 +1986,9 @@ class TbodyActionsComponent {
|
|
|
1965
1986
|
this.editSaveAction = new EventEmitter();
|
|
1966
1987
|
this.deleteAction = new EventEmitter();
|
|
1967
1988
|
this.cancelEditEffect = effect(() => {
|
|
1968
|
-
if (this.isLoading() &&
|
|
1989
|
+
if (this.isLoading() &&
|
|
1990
|
+
this.editIndex() !== null &&
|
|
1991
|
+
this.tableEditService.savingIndex() < 0) {
|
|
1969
1992
|
this.tableEditService.stopEditing();
|
|
1970
1993
|
}
|
|
1971
1994
|
});
|
|
@@ -1981,7 +2004,7 @@ class TbodyActionsComponent {
|
|
|
1981
2004
|
event.stopPropagation();
|
|
1982
2005
|
}
|
|
1983
2006
|
saveEditing(event) {
|
|
1984
|
-
this.tableEditService.
|
|
2007
|
+
this.tableEditService.savingIndex.set(this.rowIndex());
|
|
1985
2008
|
const editedValues = this.tableEditService.editValues();
|
|
1986
2009
|
const updatedRow = { ...this.editRowData(), ...editedValues };
|
|
1987
2010
|
this.editSaveAction.emit(updatedRow);
|
|
@@ -2004,13 +2027,13 @@ class TbodyActionsComponent {
|
|
|
2004
2027
|
this.tableEditService.stopEditing();
|
|
2005
2028
|
}
|
|
2006
2029
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TbodyActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2007
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TbodyActionsComponent, isStandalone: true, selector: "fu-tbody-actions", inputs: { editRowData: { classPropertyName: "editRowData", publicName: "editRowData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editSaveAction: "editSaveAction", deleteAction: "deleteAction" }, host: { properties: { "attr.role": "\"cell\"" } }, ngImport: i0, template: "<div class=\"fu-row-actions\" (click)=\"$event.stopPropagation()\">\r\n @if (editIndex() === rowIndex()) {\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n severity=\"
|
|
2030
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TbodyActionsComponent, isStandalone: true, selector: "fu-tbody-actions", inputs: { editRowData: { classPropertyName: "editRowData", publicName: "editRowData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editSaveAction: "editSaveAction", deleteAction: "deleteAction" }, host: { properties: { "attr.role": "\"cell\"" } }, ngImport: i0, template: "<div class=\"fu-row-actions\" (click)=\"$event.stopPropagation()\">\r\n @if (editIndex() === rowIndex()) {\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n severity=\"warning\"\r\n [disabled]=\"isLoading()\"\r\n (click)=\"cancelEditing($event)\"\r\n >\r\n <fu-icon iconName=\"cancel\" />\r\n </button>\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n severity=\"success\"\r\n [disabled]=\"isLoading()\"\r\n (click)=\"saveEditing($event)\"\r\n >\r\n <fu-icon iconName=\"save\" />\r\n </button>\r\n } @else if (editSaveAction.observed) {\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n [disabled]=\"isLoading()\"\r\n (click)=\"startEditing($event)\"\r\n >\r\n <fu-icon iconName=\"edit\" />\r\n </button>\r\n }\r\n @if (editIndex() !== rowIndex() && deleteAction.observed) {\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n severity=\"danger\"\r\n [disabled]=\"isLoading()\"\r\n (click)=\"deleteRow($event)\"\r\n >\r\n <fu-icon iconName=\"trash\" />\r\n </button>\r\n }\r\n\r\n <ng-content />\r\n</div>\r\n", styles: ["fu-tbody-actions{display:table-cell;border-bottom:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle;height:40px}fu-tbody-actions .fu-row-actions button{margin:0 4px}@media (max-width: 900px){fu-tbody-actions{display:flex;justify-content:center;padding:4px 0;border-left:none}}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: ButtonDirective, selector: "[fuButton]", inputs: ["variant", "severity", "iconButton", "rounded", "compact", "raised"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2008
2031
|
}
|
|
2009
2032
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TbodyActionsComponent, decorators: [{
|
|
2010
2033
|
type: Component,
|
|
2011
2034
|
args: [{ selector: 'fu-tbody-actions', imports: [IconModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
2012
2035
|
'[attr.role]': '"cell"',
|
|
2013
|
-
}, template: "<div class=\"fu-row-actions\" (click)=\"$event.stopPropagation()\">\r\n @if (editIndex() === rowIndex()) {\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n severity=\"
|
|
2036
|
+
}, template: "<div class=\"fu-row-actions\" (click)=\"$event.stopPropagation()\">\r\n @if (editIndex() === rowIndex()) {\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n severity=\"warning\"\r\n [disabled]=\"isLoading()\"\r\n (click)=\"cancelEditing($event)\"\r\n >\r\n <fu-icon iconName=\"cancel\" />\r\n </button>\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n severity=\"success\"\r\n [disabled]=\"isLoading()\"\r\n (click)=\"saveEditing($event)\"\r\n >\r\n <fu-icon iconName=\"save\" />\r\n </button>\r\n } @else if (editSaveAction.observed) {\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n [disabled]=\"isLoading()\"\r\n (click)=\"startEditing($event)\"\r\n >\r\n <fu-icon iconName=\"edit\" />\r\n </button>\r\n }\r\n @if (editIndex() !== rowIndex() && deleteAction.observed) {\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n severity=\"danger\"\r\n [disabled]=\"isLoading()\"\r\n (click)=\"deleteRow($event)\"\r\n >\r\n <fu-icon iconName=\"trash\" />\r\n </button>\r\n }\r\n\r\n <ng-content />\r\n</div>\r\n", styles: ["fu-tbody-actions{display:table-cell;border-bottom:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle;height:40px}fu-tbody-actions .fu-row-actions button{margin:0 4px}@media (max-width: 900px){fu-tbody-actions{display:flex;justify-content:center;padding:4px 0;border-left:none}}\n"] }]
|
|
2014
2037
|
}], propDecorators: { editSaveAction: [{
|
|
2015
2038
|
type: Output
|
|
2016
2039
|
}], deleteAction: [{
|