ng-fusion-ui 0.5.2 → 0.5.5
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 +995 -113
- package/fesm2022/ng-fusion-ui.mjs.map +1 -1
- package/lib/button/button.module.d.ts +4 -4
- package/lib/button/directives/{btn-flat.directive.d.ts → btn-filled.directive.d.ts} +7 -2
- package/lib/button/directives/btn-outline.directive.d.ts +7 -2
- package/lib/button/directives/btn-text.directive.d.ts +9 -2
- package/lib/button/directives/button.directive.d.ts +18 -0
- package/lib/button/index.d.ts +2 -2
- package/lib/data-table/data-table.module.d.ts +14 -0
- package/lib/data-table/directives/body-template.directive.d.ts +14 -0
- package/lib/data-table/directives/expand-template.directive.d.ts +12 -0
- package/lib/data-table/directives/header-template.directive.d.ts +12 -0
- package/lib/data-table/directives/popup-template.directive.d.ts +12 -0
- package/lib/data-table/index.d.ts +13 -0
- package/lib/data-table/models/body-cell-value.model.d.ts +1 -0
- package/lib/data-table/models/css-unit.model.d.ts +1 -0
- package/lib/data-table/models/index.d.ts +5 -0
- package/lib/data-table/models/sort-direction.model.d.ts +1 -0
- package/lib/data-table/models/table-actions.model.d.ts +7 -0
- package/lib/data-table/models/table-layout.model.d.ts +1 -0
- package/lib/data-table/pipes/key-mapping.pipe.d.ts +7 -0
- package/lib/data-table/services/table-edit.service.d.ts +13 -0
- package/lib/data-table/services/table-intl.service.d.ts +9 -0
- package/lib/data-table/services/table-sort.service.d.ts +9 -0
- package/lib/data-table/services/table-storage.service.d.ts +21 -0
- package/lib/data-table/services/table-utility.service.d.ts +16 -0
- package/lib/data-table/table/table.component.d.ts +80 -0
- package/lib/data-table/table-filter/table-filter.component.d.ts +12 -0
- package/lib/data-table/table-paginator/table-paginator.component.d.ts +24 -0
- package/lib/data-table/tbody-actions/tbody-actions.component.d.ts +22 -0
- package/lib/data-table/tbody-cell/tbody-cell.component.d.ts +27 -0
- package/lib/data-table/thead-cell/thead-cell.component.d.ts +22 -0
- package/lib/icons/icon-names.d.ts +1 -1
- package/lib/icons/icons.d.ts +4 -0
- package/package.json +12 -13
- package/public-api.d.ts +1 -0
- package/styles/_overrides.scss +17 -0
- package/styles/_theme.scss +100 -0
- package/styles/_variables.scss +0 -0
- package/styles/styles.scss +3 -362
- package/esm2022/lib/button/button.module.mjs +0 -37
- package/esm2022/lib/button/directives/btn-flat.directive.mjs +0 -42
- package/esm2022/lib/button/directives/btn-outline.directive.mjs +0 -42
- package/esm2022/lib/button/directives/btn-raised.directive.mjs +0 -42
- package/esm2022/lib/button/directives/btn-text.directive.mjs +0 -42
- package/esm2022/lib/button/index.mjs +0 -6
- package/esm2022/lib/data-grid/components/body-row-cell/body-row-cell.component.mjs +0 -78
- package/esm2022/lib/data-grid/components/head-row-cell/head-row-cell.component.mjs +0 -44
- package/esm2022/lib/data-grid/components/row-actions/row-actions.component.mjs +0 -70
- package/esm2022/lib/data-grid/data-grid/data-grid.component.mjs +0 -344
- package/esm2022/lib/data-grid/data-grid.module.mjs +0 -67
- package/esm2022/lib/data-grid/directives/grid-body-template.directive.mjs +0 -22
- package/esm2022/lib/data-grid/directives/grid-columns.directive.mjs +0 -44
- package/esm2022/lib/data-grid/directives/grid-expand-template.directive.mjs +0 -19
- package/esm2022/lib/data-grid/directives/grid-header-template.directive.mjs +0 -19
- package/esm2022/lib/data-grid/directives/sort-column.directive.mjs +0 -25
- package/esm2022/lib/data-grid/index.mjs +0 -10
- package/esm2022/lib/data-grid/pipes/key-mapping.pipe.mjs +0 -23
- package/esm2022/lib/data-grid/services/data-grid-paginator.mjs +0 -3
- package/esm2022/lib/data-grid/services/data-sorting.service.mjs +0 -57
- package/esm2022/lib/data-grid/services/edit-row.service.mjs +0 -33
- package/esm2022/lib/data-grid/services/paginator.service.mjs +0 -33
- package/esm2022/lib/icons/icon-names.mjs +0 -2
- package/esm2022/lib/icons/icon-registry.service.mjs +0 -57
- package/esm2022/lib/icons/icon.component.mjs +0 -58
- package/esm2022/lib/icons/icon.module.mjs +0 -20
- package/esm2022/lib/icons/icons.mjs +0 -32
- package/esm2022/lib/icons/index.mjs +0 -3
- package/esm2022/ng-fusion-ui.mjs +0 -5
- package/esm2022/public-api.mjs +0 -7
- package/lib/button/directives/btn-raised.directive.d.ts +0 -16
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, computed, effect, Injectable, input, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, model, Directive, Input, booleanAttribute, EventEmitter, Output, HostListener, Pipe, TemplateRef, ContentChild, NgModule } from '@angular/core';
|
|
2
|
+
import { signal, computed, effect, Injectable, input, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, model, Directive, Input, booleanAttribute, EventEmitter, Output, HostListener, Pipe, TemplateRef, ContentChild, NgModule, inject, ElementRef, Renderer2, contentChild, DestroyRef, output, untracked } from '@angular/core';
|
|
3
3
|
import { BehaviorSubject, filter, take, Subject } from 'rxjs';
|
|
4
4
|
import * as i4 from '@angular/forms';
|
|
5
5
|
import { FormsModule } from '@angular/forms';
|
|
6
6
|
import * as i1 from '@angular/platform-browser';
|
|
7
7
|
import * as i3 from '@angular/common';
|
|
8
8
|
import { CommonModule } from '@angular/common';
|
|
9
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
9
10
|
|
|
10
11
|
class DataSortingService {
|
|
11
12
|
constructor() {
|
|
@@ -28,7 +29,7 @@ class DataSortingService {
|
|
|
28
29
|
this.sortKeyValue.set(parsedData.sortKey);
|
|
29
30
|
this.sortDirectionValue.set(parsedData.sortDirection);
|
|
30
31
|
}
|
|
31
|
-
}
|
|
32
|
+
});
|
|
32
33
|
}
|
|
33
34
|
getLocalStorageKey(key) {
|
|
34
35
|
this.localStorageKey.set(`fu-${key}-sort`);
|
|
@@ -55,10 +56,10 @@ class DataSortingService {
|
|
|
55
56
|
getCellKeys(data) {
|
|
56
57
|
this.cellKeys.set(Object.keys(data));
|
|
57
58
|
}
|
|
58
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
59
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
59
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataSortingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
60
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataSortingService }); }
|
|
60
61
|
}
|
|
61
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
62
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataSortingService, decorators: [{
|
|
62
63
|
type: Injectable
|
|
63
64
|
}], ctorParameters: () => [] });
|
|
64
65
|
|
|
@@ -82,10 +83,10 @@ class EditRowService {
|
|
|
82
83
|
resetEditValues() {
|
|
83
84
|
this.editValuesSubject.next({});
|
|
84
85
|
}
|
|
85
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
86
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
86
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: EditRowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
87
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: EditRowService, providedIn: 'root' }); }
|
|
87
88
|
}
|
|
88
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
89
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: EditRowService, decorators: [{
|
|
89
90
|
type: Injectable,
|
|
90
91
|
args: [{
|
|
91
92
|
providedIn: 'root',
|
|
@@ -108,6 +109,7 @@ const filterPlus = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
|
108
109
|
const filterEdit = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M10.97 20.344L9 21v-8.5L4.52 7.572A2 2 0 0 1 4 6.227V4h16v2.172a2 2 0 0 1-.586 1.414L15 12v1.5m3.42 2.11a2.1 2.1 0 0 1 2.97 2.97L18 22h-3v-3z"/></svg>`;
|
|
109
110
|
const check = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="m5 12l5 5L20 7"/></svg>`;
|
|
110
111
|
const save = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M21 7v12q0 .825-.587 1.413T19 21H5q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h12zm-2 .85L16.15 5H5v14h14zM12 18q1.25 0 2.125-.875T15 15t-.875-2.125T12 12t-2.125.875T9 15t.875 2.125T12 18m-6-8h9V6H6zM5 7.85V19V5z"/></svg>`;
|
|
112
|
+
const search = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14" /></svg>`;
|
|
111
113
|
const building = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M4 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"/><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm11 0H3v14h3v-2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V15h3z"/></g></svg>`;
|
|
112
114
|
const buildingHand = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="m2 1c0-0.55228 0.44772-1 1-1h10c0.55228 0 1 0.44772 1 1v6.5c0 0.66667-1 0.66667-1 0v-6.5h-10v14h3s2.2783-0.07879 2 1h-5c-0.55228 0-1-0.44772-1-1z"/><path d="M4.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm-6 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm-6 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"/><path d="m4.0496 13.493v0.43773l4.5597 1.0943 3.9897-0.83169v0.61283h3.4198v-4.8151h-4.5597l-3.5338 1.0068c-0.56996 0.17509-1.0259 0.6566-1.0259 1.1819h-1.1399c-0.96894 0-1.7099 0.56905-1.7099 1.3132m9.6894 0.43773v-3.0641h1.1399v3.0641zm-8.4925-0.61282q0.17099-0.26264 0.51297-0.26264h3.0778c0.28498 0 0.62696-0.04377 0.91194-0.08756l1.3109-0.35018-0.34198-0.83169-1.3679 0.35018c-0.17099 0-1.3109 0.04377-1.3109 0.04377 0-0.17509 0.11399-0.30641 0.34198-0.35018l3.3058-0.963h0.91194v2.4075l-3.9897 0.83169z" fill="currentColor" stroke-width=".49949"/></g></svg>`;
|
|
113
115
|
const buildingUser = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><path d="m-12.888 20.361a4.25 4.25 0 0 0-2.1938 0.56919 4.25 4.25 0 0 0-2.1226 3.5432l-0.0024 0.13755 0.0024 0.13755a4.25 4.25 0 1 0 4.3164-4.3875zm0.60951 2.7036h0.62611v2.6657l-2.3076 0.5929-2.6396-0.88936c0-0.1482 0.06709-0.29647 0.16601-0.41503 0.13191-0.11856 0.29543-0.17787 0.4933-0.17787h2.31l0.69252-0.23716-0.09961-0.26562-0.59291 0.20633h-0.92493c-0.09894 0-0.23051-0.05931-0.29646-0.11859-0.06595-0.05928-0.09724-0.14824-0.09724-0.23716 0-0.1482 0.09835-0.26563 0.26325-0.32491zm1.2854 0h1.3186v3.2586h-1.3186z" stroke-width=".425"/><g fill="currentColor"></g><path d="m2.0619 18.318a4.9999 4.9999 0 0 0-2.5808 0.66962 4.9999 4.9999 0 0 0-2.4971 4.1684l-0.0028 0.16182 0.0028 0.16183a4.9999 4.9999 0 1 0 5.078-5.1617zm0.71705 3.1807h0.73658v3.1361l-2.7148 0.69752-3.1054-1.0463c0-0.17435 0.07893-0.34878 0.19531-0.48826 0.15518-0.13948 0.34756-0.20926 0.58034-0.20926h2.7175l0.81471-0.27901-0.11719-0.31249-0.69753 0.24274h-1.0881c-0.1164 0-0.27118-0.06977-0.34876-0.13951-0.07759-0.06974-0.1144-0.1744-0.1144-0.27901 0-0.17435 0.1157-0.3125 0.3097-0.38224zm1.5122 0h1.5513v3.8336h-1.5513z" stroke-width=".49999"/><g transform="matrix(.86364 0 0 .86364 26.355 .79387)"><path d="m16 10.5c0-3.025-2.475-5.5-5.5-5.5-3.025 0-5.5 2.475-5.5 5.5 0 3.025 2.475 5.5 5.5 5.5 3.025 0 5.5-2.475 5.5-5.5m-3.85-3.025 1.925 1.925-1.925 1.925v-1.375h-2.2v-1.1h2.2zm-3.3 6.05-1.925-1.925 1.925-1.925v1.375h2.2v1.1h-2.2z" fill="currentColor" stroke-width=".55"/></g><path d="m38.863 0.91746c0 1.4444-0.6447 2.7386-1.6625 3.61a4.7327 4.7327 0 0 1-3.0875 1.14c-1.1789 0-2.2571-0.42923-3.0875-1.14a4.7414 4.7414 0 0 1-1.6625-3.61c0-2.6233 2.1267-4.75 4.75-4.75s4.75 2.1267 4.75 4.75m-3.0227-1.5114a1.7273 1.7273 0 1 0-3.4545 0 1.7273 1.7273 0 0 0 3.4545 0m1.0795 4.1994v-0.09716a1.7273 1.7273 0 0 0-1.7273-1.7273h-2.1591a1.7273 1.7273 0 0 0-1.7273 1.7273v0.09716q0.13386 0.13948 0.28068 0.26557a3.8691 3.8691 0 0 0 2.5261 0.93273 3.8691 3.8691 0 0 0 2.8068-1.1983" fill="currentColor" stroke-width=".43182"/><g fill="currentColor"><g fill="currentColor"><path d="m3 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h5v-0.62695a5.25 5.25 0 0 1-1.9102-3.1582 0.5 0.5 0 0 0-0.089844 0.28516v2.5h-3v-14h10v5.3008a5.25 5.25 0 0 1 1 0.47852v-5.7793a1 1 0 0 0-1-1z"/><path d="m4.5 2a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm-6 3a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h0.66797a5.25 5.25 0 0 1 0.83203-0.49219 0.5 0.5 0 0 0 0-0.0078125v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v0.65234a5.25 5.25 0 0 1 1.248-0.15234 5.25 5.25 0 0 1 0.75195 0.054688v-0.55469a0.5 0.5 0 0 0-0.5-0.5zm-6 3a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5z"/></g><path d="m11.25 7.3636a3.8864 3.8864 0 0 0-3.8864 3.8864 3.8691 3.8691 0 0 0 0.76561 2.3167 2.1591 2.1591 0 0 1 2.0412-1.4531h2.1591a2.1591 2.1591 0 0 1 2.0412 1.4531 3.8691 3.8691 0 0 0 0.76561-2.3167 3.8864 3.8864 0 0 0-3.8864-3.8864m2.375 6.9631v-0.05398a1.2955 1.2955 0 0 0-1.2955-1.2955h-2.1591a1.2955 1.2955 0 0 0-1.2955 1.2955v0.05398a3.8691 3.8691 0 0 0 2.375 0.80966c0.89473 0 1.7182-0.30227 2.375-0.80966m-7.125-3.0767c0-2.6233 2.1267-4.75 4.75-4.75 2.6233 0 4.75 2.1267 4.75 4.75a4.7414 4.7414 0 0 1-1.6625 3.61 4.7327 4.7327 0 0 1-3.0875 1.14 4.7327 4.7327 0 0 1-3.0875-1.14 4.7414 4.7414 0 0 1-1.6625-3.61m4.75-2.5909a1.0795 1.0795 0 1 0 0 2.1591 1.0795 1.0795 0 0 0 0-2.1591m-1.9432 1.0795a1.9432 1.9432 0 1 1 3.8864 0 1.9432 1.9432 0 0 1-3.8864 0" stroke-width=".43182"/></g></svg>`;
|
|
@@ -123,6 +125,9 @@ const cancel = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><pat
|
|
|
123
125
|
const cancelCircle = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="m8.4 17l3.6-3.6l3.6 3.6l1.4-1.4l-3.6-3.6L17 8.4L15.6 7L12 10.6L8.4 7L7 8.4l3.6 3.6L7 15.6zm3.6 5q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/></svg>`;
|
|
124
126
|
const plus = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" style="stroke-width:var(--fu-icon-stroke-width, 2)" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/></svg>`;
|
|
125
127
|
const plusCircle = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" style="stroke-width:var(--fu-icon-stroke-width, 2)" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m6 0h6m-3-3v6"/></svg>`;
|
|
128
|
+
const eye = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)"><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0" /><path d="M21 12q-3.6 6-9 6t-9-6q3.6-6 9-6t9 6" /></g></svg>`;
|
|
129
|
+
const chevronRight = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M12 8L5.68 1.68L4 3.35L8.65 8L4 12.65l1.68 1.67z"/></svg>`;
|
|
130
|
+
const link = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M17 7h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c1.65 0 3 1.35 3 3s-1.35 3-3 3h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c2.76 0 5-2.24 5-5s-2.24-5-5-5m-9 5c0 .55.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1H9c-.55 0-1 .45-1 1m2 3H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h3c.55 0 1-.45 1-1s-.45-1-1-1H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h3c.55 0 1-.45 1-1s-.45-1-1-1" /></svg>`;
|
|
126
131
|
|
|
127
132
|
class IconRegistryService {
|
|
128
133
|
constructor(sanitizer) {
|
|
@@ -159,6 +164,10 @@ class IconRegistryService {
|
|
|
159
164
|
this.registerIcon('cancelCircle', cancelCircle);
|
|
160
165
|
this.registerIcon('plus', plus);
|
|
161
166
|
this.registerIcon('plusCircle', plusCircle);
|
|
167
|
+
this.registerIcon('search', search);
|
|
168
|
+
this.registerIcon('eye', eye);
|
|
169
|
+
this.registerIcon('chevronRight', chevronRight);
|
|
170
|
+
this.registerIcon('link', link);
|
|
162
171
|
}
|
|
163
172
|
registerIcon(name, svg) {
|
|
164
173
|
const safeSvg = this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
@@ -167,10 +176,10 @@ class IconRegistryService {
|
|
|
167
176
|
getIcon(name) {
|
|
168
177
|
return this.icons.get(name);
|
|
169
178
|
}
|
|
170
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
171
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
179
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconRegistryService, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
180
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconRegistryService, providedIn: 'root' }); }
|
|
172
181
|
}
|
|
173
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconRegistryService, decorators: [{
|
|
174
183
|
type: Injectable,
|
|
175
184
|
args: [{
|
|
176
185
|
providedIn: 'root',
|
|
@@ -221,12 +230,12 @@ class IconComponent {
|
|
|
221
230
|
this.elementRef.nativeElement.style.setProperty('--fu-icon-stroke-width', this.strokeWidth().toString());
|
|
222
231
|
}
|
|
223
232
|
}
|
|
224
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
225
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
233
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconComponent, deps: [{ token: IconRegistryService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
234
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: IconComponent, isStandalone: false, selector: "fu-icon", inputs: { iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.classList" } }, usesOnChanges: true, ngImport: i0, template: "<span [innerHTML]=\"iconSvg\" class=\"fu-icon-container\"></span>\r\n", styles: ["fu-icon{display:inline-block;width:var(--fu-icon-size, 1.2rem);height:var(--fu-icon-size, 1.2rem)}.fu-icon-container{display:inline-block;width:var(--fu-icon-size, 1.2rem);height:var(--fu-icon-size, 1.2rem);line-height:initial;vertical-align:initial;overflow:hidden}.fu-icon-container svg{width:inherit;height:inherit;vertical-align:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
226
235
|
}
|
|
227
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconComponent, decorators: [{
|
|
228
237
|
type: Component,
|
|
229
|
-
args: [{ selector: 'fu-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span [innerHTML]=\"iconSvg\" class=\"fu-icon-container\"></span>\r\n", styles: ["
|
|
238
|
+
args: [{ selector: 'fu-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<span [innerHTML]=\"iconSvg\" class=\"fu-icon-container\"></span>\r\n", styles: ["fu-icon{display:inline-block;width:var(--fu-icon-size, 1.2rem);height:var(--fu-icon-size, 1.2rem)}.fu-icon-container{display:inline-block;width:var(--fu-icon-size, 1.2rem);height:var(--fu-icon-size, 1.2rem);line-height:initial;vertical-align:initial;overflow:hidden}.fu-icon-container svg{width:inherit;height:inherit;vertical-align:inherit}\n"] }]
|
|
230
239
|
}], ctorParameters: () => [{ type: IconRegistryService }, { type: i0.ElementRef }], propDecorators: { classList: [{
|
|
231
240
|
type: HostBinding,
|
|
232
241
|
args: ['class']
|
|
@@ -295,12 +304,12 @@ class BodyRowCellComponent {
|
|
|
295
304
|
this.subscription.unsubscribe();
|
|
296
305
|
}
|
|
297
306
|
}
|
|
298
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
299
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
307
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BodyRowCellComponent, deps: [{ token: DataSortingService }, { token: EditRowService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
308
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: BodyRowCellComponent, isStandalone: false, selector: "fu-body-row-cell", inputs: { cellValue: { classPropertyName: "cellValue", publicName: "cellValue", isSignal: true, isRequired: false, transformFunction: null }, editKey: { classPropertyName: "editKey", publicName: "editKey", isSignal: true, isRequired: false, transformFunction: null }, editCellValue: { classPropertyName: "editCellValue", publicName: "editCellValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editCellValue: "editCellValueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fu-body-row-cell\" [attr.data-edit]=\"isEditing()\">\r\n <span>{{ cellDef() }}</span>\r\n\r\n @if (hasCellValue()) {\r\n @if (isEditing()) {\r\n @if (isCellBoolean()) {\r\n <div class=\"fu-checkbox-input\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"cellValue()\"\r\n [(ngModel)]=\"editCellValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (click)=\"checkboxClick($event)\"\r\n />\r\n </div>\r\n } @else {\r\n <input\r\n class=\"fu-edit-input\"\r\n [(ngModel)]=\"editCellValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n } @else {\r\n @if (isCellBoolean()) {\r\n @if (cellValue()) {\r\n <div style=\"margin-left: 6px\">\r\n <fu-icon iconName=\"check\" size=\"16px\" strokeWidth=\"3\" />\r\n </div>\r\n }\r\n } @else {\r\n <span>{{ cellValue() }}</span>\r\n }\r\n }\r\n }\r\n\r\n @if (!hasCellValue()) {\r\n <span>\r\n <ng-content />\r\n </span>\r\n }\r\n</div>\r\n", styles: [".fu-body-row-cell{padding:12px 16px}.fu-body-row-cell[data-edit=true]{padding:5px 16px;align-items:center}.fu-body-row-cell>span:nth-child(1){display:none}@media (max-width: 900px){.fu-body-row-cell>span:nth-child(1){display:inline;font-weight:700}}.fu-body-row-cell>span:nth-child(2){color:var(--fu-grid-cell-color);word-break:break-all}@media (max-width: 900px){.fu-body-row-cell{display:grid;grid-template-columns:repeat(2,1fr);padding:8px 16px}}@media (max-width: 600px){.fu-body-row-cell{grid-template-columns:35% 1fr;padding:6px 16px}}.fu-edit-input{background-color:transparent;color:var(--fu-grid-cell-edit-input);width:100%;padding:4px;border:none;outline:1px solid gray;border-radius:4px}.fu-checkbox-input{--borderColor: var(--fu-grid-cell-edit-input);--borderWidth: 2px}.fu-checkbox-input label{display:block;max-width:100%;margin:0 auto}.fu-checkbox-input input[type=checkbox]{-webkit-appearance:none;appearance:none;vertical-align:middle;font-size:1.75em;border-radius:.125em;display:inline-block;border:var(--borderWidth) solid var(--borderColor);width:1em;height:1em;position:relative;cursor:pointer}.fu-checkbox-input input[type=checkbox]:before,.fu-checkbox-input input[type=checkbox]:after{content:\"\";position:absolute;background:var(--borderColor);width:calc(var(--borderWidth) * 3);height:var(--borderWidth);top:55%;left:15%;transform-origin:left center}.fu-checkbox-input input[type=checkbox]:before{transform:rotate(45deg) translate(calc(var(--borderWidth) / -3),calc(var(--borderWidth) / -3)) scaleX(0)}.fu-checkbox-input input[type=checkbox]:after{width:calc(var(--borderWidth) * 6);transform:rotate(-45deg) translateY(calc(var(--borderWidth) * 3)) scaleX(0);transform-origin:left center}.fu-checkbox-input input[type=checkbox]:checked:before{transform:rotate(45deg) translate(calc(var(--borderWidth) / -2),calc(var(--borderWidth) / -2)) scaleX(1)}.fu-checkbox-input input[type=checkbox]:checked:after{width:calc(var(--borderWidth) * 7);transform:rotate(-45deg) translateY(calc(var(--borderWidth) * 3)) scaleX(1)}.fu-checkbox-input input[type=checkbox]:focus{outline:calc(var(--borderWidth) / 2) dotted rgba(0,0,0,.25)}\n"], dependencies: [{ kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
300
309
|
}
|
|
301
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BodyRowCellComponent, decorators: [{
|
|
302
311
|
type: Component,
|
|
303
|
-
args: [{ selector: 'fu-body-row-cell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fu-body-row-cell\" [attr.data-edit]=\"isEditing()\">\r\n <span>{{ cellDef() }}</span>\r\n\r\n @if (hasCellValue()) {\r\n @if (isEditing()) {\r\n @if (isCellBoolean()) {\r\n <div class=\"fu-checkbox-input\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"cellValue()\"\r\n [(ngModel)]=\"editCellValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (click)=\"checkboxClick($event)\"\r\n />\r\n </div>\r\n } @else {\r\n <input\r\n class=\"fu-edit-input\"\r\n [(ngModel)]=\"editCellValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n } @else {\r\n @if (isCellBoolean()) {\r\n @if (cellValue()) {\r\n <div style=\"margin-left: 6px\">\r\n <fu-icon iconName=\"check\" size=\"16px\" strokeWidth=\"3\" />\r\n </div>\r\n }\r\n } @else {\r\n <span>{{ cellValue() }}</span>\r\n }\r\n }\r\n }\r\n\r\n @if (!hasCellValue()) {\r\n <span>\r\n <ng-content />\r\n </span>\r\n }\r\n</div>\r\n", styles: [".fu-body-row-cell{padding:12px 16px}.fu-body-row-cell[data-edit=true]{padding:5px 16px;align-items:center}.fu-body-row-cell>span:nth-child(1){display:none}@media (max-width: 900px){.fu-body-row-cell>span:nth-child(1){display:inline;font-weight:700}}.fu-body-row-cell>span:nth-child(2){color:var(--fu-grid-cell-color);word-break:break-all}@media (max-width: 900px){.fu-body-row-cell{display:grid;grid-template-columns:repeat(2,1fr);padding:8px 16px}}@media (max-width: 600px){.fu-body-row-cell{grid-template-columns:35% 1fr;padding:6px 16px}}.fu-edit-input{background-color:transparent;color:var(--fu-grid-cell-edit-input);width:100%;padding:4px;border:none;outline:1px solid gray;border-radius:4px}.fu-checkbox-input{--borderColor: var(--fu-grid-cell-edit-input);--borderWidth: 2px}.fu-checkbox-input label{display:block;max-width:100%;margin:0 auto}.fu-checkbox-input input[type=checkbox]{-webkit-appearance:none;appearance:none;vertical-align:middle;font-size:1.75em;border-radius:.125em;display:inline-block;border:var(--borderWidth) solid var(--borderColor);width:1em;height:1em;position:relative;cursor:pointer}.fu-checkbox-input input[type=checkbox]:before,.fu-checkbox-input input[type=checkbox]:after{content:\"\";position:absolute;background:var(--borderColor);width:calc(var(--borderWidth) * 3);height:var(--borderWidth);top:55%;left:15%;transform-origin:left center}.fu-checkbox-input input[type=checkbox]:before{transform:rotate(45deg) translate(calc(var(--borderWidth) / -3),calc(var(--borderWidth) / -3)) scaleX(0)}.fu-checkbox-input input[type=checkbox]:after{width:calc(var(--borderWidth) * 6);transform:rotate(-45deg) translateY(calc(var(--borderWidth) * 3)) scaleX(0);transform-origin:left center}.fu-checkbox-input input[type=checkbox]:checked:before{transform:rotate(45deg) translate(calc(var(--borderWidth) / -2),calc(var(--borderWidth) / -2)) scaleX(1)}.fu-checkbox-input input[type=checkbox]:checked:after{width:calc(var(--borderWidth) * 7);transform:rotate(-45deg) translateY(calc(var(--borderWidth) * 3)) scaleX(1)}.fu-checkbox-input input[type=checkbox]:focus{outline:calc(var(--borderWidth) / 2) dotted rgba(0,0,0,.25)}\n"] }]
|
|
312
|
+
args: [{ selector: 'fu-body-row-cell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"fu-body-row-cell\" [attr.data-edit]=\"isEditing()\">\r\n <span>{{ cellDef() }}</span>\r\n\r\n @if (hasCellValue()) {\r\n @if (isEditing()) {\r\n @if (isCellBoolean()) {\r\n <div class=\"fu-checkbox-input\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"cellValue()\"\r\n [(ngModel)]=\"editCellValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (click)=\"checkboxClick($event)\"\r\n />\r\n </div>\r\n } @else {\r\n <input\r\n class=\"fu-edit-input\"\r\n [(ngModel)]=\"editCellValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n } @else {\r\n @if (isCellBoolean()) {\r\n @if (cellValue()) {\r\n <div style=\"margin-left: 6px\">\r\n <fu-icon iconName=\"check\" size=\"16px\" strokeWidth=\"3\" />\r\n </div>\r\n }\r\n } @else {\r\n <span>{{ cellValue() }}</span>\r\n }\r\n }\r\n }\r\n\r\n @if (!hasCellValue()) {\r\n <span>\r\n <ng-content />\r\n </span>\r\n }\r\n</div>\r\n", styles: [".fu-body-row-cell{padding:12px 16px}.fu-body-row-cell[data-edit=true]{padding:5px 16px;align-items:center}.fu-body-row-cell>span:nth-child(1){display:none}@media (max-width: 900px){.fu-body-row-cell>span:nth-child(1){display:inline;font-weight:700}}.fu-body-row-cell>span:nth-child(2){color:var(--fu-grid-cell-color);word-break:break-all}@media (max-width: 900px){.fu-body-row-cell{display:grid;grid-template-columns:repeat(2,1fr);padding:8px 16px}}@media (max-width: 600px){.fu-body-row-cell{grid-template-columns:35% 1fr;padding:6px 16px}}.fu-edit-input{background-color:transparent;color:var(--fu-grid-cell-edit-input);width:100%;padding:4px;border:none;outline:1px solid gray;border-radius:4px}.fu-checkbox-input{--borderColor: var(--fu-grid-cell-edit-input);--borderWidth: 2px}.fu-checkbox-input label{display:block;max-width:100%;margin:0 auto}.fu-checkbox-input input[type=checkbox]{-webkit-appearance:none;appearance:none;vertical-align:middle;font-size:1.75em;border-radius:.125em;display:inline-block;border:var(--borderWidth) solid var(--borderColor);width:1em;height:1em;position:relative;cursor:pointer}.fu-checkbox-input input[type=checkbox]:before,.fu-checkbox-input input[type=checkbox]:after{content:\"\";position:absolute;background:var(--borderColor);width:calc(var(--borderWidth) * 3);height:var(--borderWidth);top:55%;left:15%;transform-origin:left center}.fu-checkbox-input input[type=checkbox]:before{transform:rotate(45deg) translate(calc(var(--borderWidth) / -3),calc(var(--borderWidth) / -3)) scaleX(0)}.fu-checkbox-input input[type=checkbox]:after{width:calc(var(--borderWidth) * 6);transform:rotate(-45deg) translateY(calc(var(--borderWidth) * 3)) scaleX(0);transform-origin:left center}.fu-checkbox-input input[type=checkbox]:checked:before{transform:rotate(45deg) translate(calc(var(--borderWidth) / -2),calc(var(--borderWidth) / -2)) scaleX(1)}.fu-checkbox-input input[type=checkbox]:checked:after{width:calc(var(--borderWidth) * 7);transform:rotate(-45deg) translateY(calc(var(--borderWidth) * 3)) scaleX(1)}.fu-checkbox-input input[type=checkbox]:focus{outline:calc(var(--borderWidth) / 2) dotted rgba(0,0,0,.25)}\n"] }]
|
|
304
313
|
}], ctorParameters: () => [{ type: DataSortingService }, { type: EditRowService }, { type: i0.ElementRef }] });
|
|
305
314
|
|
|
306
315
|
class SortColumnDirective {
|
|
@@ -313,13 +322,14 @@ class SortColumnDirective {
|
|
|
313
322
|
this.renderer.setAttribute(this.el.nativeElement, 'data-sorted', this.column);
|
|
314
323
|
}
|
|
315
324
|
}
|
|
316
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
317
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
325
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SortColumnDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
326
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SortColumnDirective, isStandalone: false, selector: "[sortColumn]", inputs: { column: ["sortColumn", "column"] }, ngImport: i0 }); }
|
|
318
327
|
}
|
|
319
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
328
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SortColumnDirective, decorators: [{
|
|
320
329
|
type: Directive,
|
|
321
330
|
args: [{
|
|
322
331
|
selector: '[sortColumn]',
|
|
332
|
+
standalone: false
|
|
323
333
|
}]
|
|
324
334
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { column: [{
|
|
325
335
|
type: Input,
|
|
@@ -356,14 +366,17 @@ class HeadRowCellComponent {
|
|
|
356
366
|
const parent = this.elementRef.nativeElement.parentElement;
|
|
357
367
|
return Array.from(parent.children).indexOf(this.elementRef.nativeElement);
|
|
358
368
|
}
|
|
359
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
360
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
369
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: HeadRowCellComponent, deps: [{ token: DataSortingService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
370
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: HeadRowCellComponent, isStandalone: false, selector: "fu-head-row-cell", inputs: { cellDef: { classPropertyName: "cellDef", publicName: "cellDef", isSignal: true, isRequired: true, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n class=\"fu-head-row-cell\"\r\n [ngClass]=\"{ disabled: !sortKey() }\"\r\n [sortColumn]=\"sortKey()\"\r\n (click)=\"onSorting()\"\r\n>\r\n <span>{{ cellDef() }}</span>\r\n @if (sortKey()) {\r\n @if (sortKey() == sorting()) {\r\n <button>\r\n @if (direction() === 'asc') {\r\n <fu-icon strokeWidth=\"2.5\" iconName=\"sortAsc\" />\r\n }\r\n @if (direction() === 'desc') {\r\n <fu-icon strokeWidth=\"2.5\" iconName=\"sortDesc\" />\r\n }\r\n </button>\r\n } @else {\r\n <button><fu-icon color=\"gray\" iconName=\"sort\" /></button>\r\n }\r\n }\r\n</div>\r\n", styles: [".fu-head-row-cell{padding:16px;font-weight:700;display:flex}.fu-head-row-cell>span{margin-right:4px}.fu-head-row-cell>button{cursor:pointer;background-color:transparent;color:var(--fu-grid-text-color);font-weight:700;border:none}@media (max-width: 900px){.fu-head-row-cell{display:none}.fu-head-row-cell[data-sorted]{display:flex}}.fu-head-row-cell[data-sorted]:hover{cursor:pointer;background-color:var(--fu-grid-hover-color)}.fu-head-row-cell.sort-asc,.fu-head-row-cell.sort-desc{background-color:var(--fu-grid-fg-color)}@media (max-width: 600px){.fu-head-row-cell{padding:8px}}.disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "directive", type: SortColumnDirective, selector: "[sortColumn]", inputs: ["sortColumn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
361
371
|
}
|
|
362
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
372
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: HeadRowCellComponent, decorators: [{
|
|
363
373
|
type: Component,
|
|
364
|
-
args: [{ selector: 'fu-head-row-cell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\r\n class=\"fu-head-row-cell\"\r\n [ngClass]=\"{ disabled: !sortKey() }\"\r\n [sortColumn]=\"sortKey()\"\r\n (click)=\"onSorting()\"\r\n>\r\n <span>{{ cellDef() }}</span>\r\n @if (sortKey()) {\r\n @if (sortKey() == sorting()) {\r\n <button>\r\n @if (direction() === 'asc') {\r\n <fu-icon strokeWidth=\"2.5\" iconName=\"sortAsc\" />\r\n }\r\n @if (direction() === 'desc') {\r\n <fu-icon strokeWidth=\"2.5\" iconName=\"sortDesc\" />\r\n }\r\n </button>\r\n } @else {\r\n <button><fu-icon color=\"gray\" iconName=\"sort\" /></button>\r\n }\r\n }\r\n</div>\r\n", styles: [".fu-head-row-cell{padding:16px;font-weight:700;display:flex}.fu-head-row-cell>span{margin-right:4px}.fu-head-row-cell>button{cursor:pointer;background-color:transparent;color:var(--fu-grid-text-color);font-weight:700;border:none}@media (max-width: 900px){.fu-head-row-cell{display:none}.fu-head-row-cell[data-sorted]{display:flex}}.fu-head-row-cell[data-sorted]:hover{cursor:pointer;background-color:var(--fu-grid-hover-color)}.fu-head-row-cell.sort-asc,.fu-head-row-cell.sort-desc{background-color:var(--fu-grid-fg-color)}@media (max-width: 600px){.fu-head-row-cell{padding:8px}}.disabled{pointer-events:none}\n"] }]
|
|
374
|
+
args: [{ selector: 'fu-head-row-cell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\r\n class=\"fu-head-row-cell\"\r\n [ngClass]=\"{ disabled: !sortKey() }\"\r\n [sortColumn]=\"sortKey()\"\r\n (click)=\"onSorting()\"\r\n>\r\n <span>{{ cellDef() }}</span>\r\n @if (sortKey()) {\r\n @if (sortKey() == sorting()) {\r\n <button>\r\n @if (direction() === 'asc') {\r\n <fu-icon strokeWidth=\"2.5\" iconName=\"sortAsc\" />\r\n }\r\n @if (direction() === 'desc') {\r\n <fu-icon strokeWidth=\"2.5\" iconName=\"sortDesc\" />\r\n }\r\n </button>\r\n } @else {\r\n <button><fu-icon color=\"gray\" iconName=\"sort\" /></button>\r\n }\r\n }\r\n</div>\r\n", styles: [".fu-head-row-cell{padding:16px;font-weight:700;display:flex}.fu-head-row-cell>span{margin-right:4px}.fu-head-row-cell>button{cursor:pointer;background-color:transparent;color:var(--fu-grid-text-color);font-weight:700;border:none}@media (max-width: 900px){.fu-head-row-cell{display:none}.fu-head-row-cell[data-sorted]{display:flex}}.fu-head-row-cell[data-sorted]:hover{cursor:pointer;background-color:var(--fu-grid-hover-color)}.fu-head-row-cell.sort-asc,.fu-head-row-cell.sort-desc{background-color:var(--fu-grid-fg-color)}@media (max-width: 600px){.fu-head-row-cell{padding:8px}}.disabled{pointer-events:none}\n"] }]
|
|
365
375
|
}], ctorParameters: () => [{ type: DataSortingService }, { type: i0.ElementRef }] });
|
|
366
376
|
|
|
377
|
+
/**
|
|
378
|
+
* @deprecated fu-btn-outline will be removed in next versions. Use `fuButton` instead.
|
|
379
|
+
*/
|
|
367
380
|
class OutlinedButtonDirective {
|
|
368
381
|
constructor(el, renderer) {
|
|
369
382
|
this.el = el;
|
|
@@ -371,6 +384,7 @@ class OutlinedButtonDirective {
|
|
|
371
384
|
this.variant = 'regular';
|
|
372
385
|
this.iconButton = false;
|
|
373
386
|
this.rounded = false;
|
|
387
|
+
this.compact = false;
|
|
374
388
|
}
|
|
375
389
|
ngOnInit() {
|
|
376
390
|
this.setInitialStyles();
|
|
@@ -385,11 +399,14 @@ class OutlinedButtonDirective {
|
|
|
385
399
|
if (this.rounded) {
|
|
386
400
|
this.renderer.setAttribute(this.el.nativeElement, 'rounded', 'true');
|
|
387
401
|
}
|
|
402
|
+
if (this.compact) {
|
|
403
|
+
this.renderer.setAttribute(this.el.nativeElement, 'compact', 'true');
|
|
404
|
+
}
|
|
388
405
|
}
|
|
389
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
390
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "
|
|
406
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OutlinedButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
407
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.6", type: OutlinedButtonDirective, isStandalone: true, selector: "[fu-btn-outline]", inputs: { variant: "variant", iconButton: ["iconButton", "iconButton", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], compact: ["compact", "compact", booleanAttribute] }, ngImport: i0 }); }
|
|
391
408
|
}
|
|
392
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
409
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OutlinedButtonDirective, decorators: [{
|
|
393
410
|
type: Directive,
|
|
394
411
|
args: [{
|
|
395
412
|
selector: '[fu-btn-outline]',
|
|
@@ -402,6 +419,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
|
|
|
402
419
|
}], rounded: [{
|
|
403
420
|
type: Input,
|
|
404
421
|
args: [{ transform: booleanAttribute }]
|
|
422
|
+
}], compact: [{
|
|
423
|
+
type: Input,
|
|
424
|
+
args: [{ transform: booleanAttribute }]
|
|
405
425
|
}] } });
|
|
406
426
|
|
|
407
427
|
class RowActionsComponent {
|
|
@@ -456,12 +476,12 @@ class RowActionsComponent {
|
|
|
456
476
|
}, 100);
|
|
457
477
|
}
|
|
458
478
|
}
|
|
459
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
460
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
479
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: RowActionsComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: EditRowService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
480
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: RowActionsComponent, isStandalone: false, selector: "fu-row-actions", inputs: { editRow: { classPropertyName: "editRow", publicName: "editRow", isSignal: true, isRequired: false, transformFunction: null }, editIndex: { classPropertyName: "editIndex", publicName: "editIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editSave: "editSave", delete: "delete" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fu-row-actions\">\r\n @if (editRow() && editIndex() !== null) {\r\n @if (isEditing()) {\r\n <button fu-btn-outline iconButton (click)=\"cancelEdit($event)\">\r\n <fu-icon iconName=\"editOff\" />\r\n </button>\r\n <button\r\n fu-btn-outline\r\n iconButton\r\n variant=\"success\"\r\n (click)=\"saveEdit($event)\"\r\n >\r\n <fu-icon iconName=\"save\" />\r\n </button>\r\n } @else {\r\n <button fu-btn-outline iconButton (click)=\"setEdit($event)\">\r\n <fu-icon iconName=\"edit\" />\r\n </button>\r\n }\r\n }\r\n @if (!isEditing() && showDelete()) {\r\n <button\r\n fu-btn-outline\r\n iconButton\r\n variant=\"danger\"\r\n (click)=\"emitDelete($event)\"\r\n >\r\n <fu-icon iconName=\"trash\" />\r\n </button>\r\n }\r\n <ng-content />\r\n</div>\r\n", styles: [".fu-row-actions{display:flex;justify-content:flex-end;align-items:center;height:100%;gap:12px;margin-right:16px}@media (max-width: 900px){.fu-row-actions{justify-content:center}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "directive", type: OutlinedButtonDirective, selector: "[fu-btn-outline]", inputs: ["variant", "iconButton", "rounded", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
461
481
|
}
|
|
462
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
482
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: RowActionsComponent, decorators: [{
|
|
463
483
|
type: Component,
|
|
464
|
-
args: [{ selector: 'fu-row-actions', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fu-row-actions\">\r\n @if (editRow() && editIndex() !== null) {\r\n @if (isEditing()) {\r\n <button fu-btn-outline iconButton (click)=\"cancelEdit($event)\">\r\n <fu-icon iconName=\"editOff\" />\r\n </button>\r\n <button\r\n fu-btn-outline\r\n iconButton\r\n variant=\"success\"\r\n (click)=\"saveEdit($event)\"\r\n >\r\n <fu-icon iconName=\"save\" />\r\n </button>\r\n } @else {\r\n <button fu-btn-outline iconButton (click)=\"setEdit($event)\">\r\n <fu-icon iconName=\"edit\" />\r\n </button>\r\n }\r\n }\r\n @if (!isEditing() && showDelete()) {\r\n <button\r\n fu-btn-outline\r\n iconButton\r\n variant=\"danger\"\r\n (click)=\"emitDelete($event)\"\r\n >\r\n <fu-icon iconName=\"trash\" />\r\n </button>\r\n }\r\n <ng-content />\r\n</div>\r\n", styles: [".fu-row-actions{display:flex;justify-content:flex-end;align-items:center;height:100%;gap:12px;margin-right:16px}@media (max-width: 900px){.fu-row-actions{justify-content:center}}\n"] }]
|
|
484
|
+
args: [{ selector: 'fu-row-actions', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"fu-row-actions\">\r\n @if (editRow() && editIndex() !== null) {\r\n @if (isEditing()) {\r\n <button fu-btn-outline iconButton (click)=\"cancelEdit($event)\">\r\n <fu-icon iconName=\"editOff\" />\r\n </button>\r\n <button\r\n fu-btn-outline\r\n iconButton\r\n variant=\"success\"\r\n (click)=\"saveEdit($event)\"\r\n >\r\n <fu-icon iconName=\"save\" />\r\n </button>\r\n } @else {\r\n <button fu-btn-outline iconButton (click)=\"setEdit($event)\">\r\n <fu-icon iconName=\"edit\" />\r\n </button>\r\n }\r\n }\r\n @if (!isEditing() && showDelete()) {\r\n <button\r\n fu-btn-outline\r\n iconButton\r\n variant=\"danger\"\r\n (click)=\"emitDelete($event)\"\r\n >\r\n <fu-icon iconName=\"trash\" />\r\n </button>\r\n }\r\n <ng-content />\r\n</div>\r\n", styles: [".fu-row-actions{display:flex;justify-content:flex-end;align-items:center;height:100%;gap:12px;margin-right:16px}@media (max-width: 900px){.fu-row-actions{justify-content:center}}\n"] }]
|
|
465
485
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: EditRowService }], propDecorators: { editSave: [{
|
|
466
486
|
type: Output
|
|
467
487
|
}], delete: [{
|
|
@@ -472,13 +492,14 @@ class GridHeaderTemplateDirective {
|
|
|
472
492
|
static ngTemplateContextGuard(dir, ctx) {
|
|
473
493
|
return true;
|
|
474
494
|
}
|
|
475
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
476
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
495
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
496
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: GridHeaderTemplateDirective, isStandalone: false, selector: "[fuHeaderTemplate]", inputs: { dataSource: ["fuHeaderTemplate", "dataSource"] }, ngImport: i0 }); }
|
|
477
497
|
}
|
|
478
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
498
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridHeaderTemplateDirective, decorators: [{
|
|
479
499
|
type: Directive,
|
|
480
500
|
args: [{
|
|
481
501
|
selector: '[fuHeaderTemplate]',
|
|
502
|
+
standalone: false
|
|
482
503
|
}]
|
|
483
504
|
}], propDecorators: { dataSource: [{
|
|
484
505
|
type: Input,
|
|
@@ -492,13 +513,14 @@ class GridBodyTemplateDirective {
|
|
|
492
513
|
static ngTemplateContextGuard(dir, ctx) {
|
|
493
514
|
return true;
|
|
494
515
|
}
|
|
495
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
496
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
516
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridBodyTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
517
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: GridBodyTemplateDirective, isStandalone: false, selector: "[fuBodyTemplate]", inputs: { dataSource: ["fuBodyTemplate", "dataSource"] }, ngImport: i0 }); }
|
|
497
518
|
}
|
|
498
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
519
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridBodyTemplateDirective, decorators: [{
|
|
499
520
|
type: Directive,
|
|
500
521
|
args: [{
|
|
501
522
|
selector: '[fuBodyTemplate]',
|
|
523
|
+
standalone: false
|
|
502
524
|
}]
|
|
503
525
|
}], propDecorators: { dataSource: [{
|
|
504
526
|
type: Input,
|
|
@@ -509,13 +531,14 @@ class GridExpandTemplateDirective {
|
|
|
509
531
|
static ngTemplateContextGuard(dir, ctx) {
|
|
510
532
|
return true;
|
|
511
533
|
}
|
|
512
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
513
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
534
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridExpandTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
535
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: GridExpandTemplateDirective, isStandalone: false, selector: "[fuExpandTemplate]", inputs: { dataSource: ["fuExpandTemplate", "dataSource"] }, ngImport: i0 }); }
|
|
514
536
|
}
|
|
515
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
537
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridExpandTemplateDirective, decorators: [{
|
|
516
538
|
type: Directive,
|
|
517
539
|
args: [{
|
|
518
540
|
selector: '[fuExpandTemplate]',
|
|
541
|
+
standalone: false
|
|
519
542
|
}]
|
|
520
543
|
}], propDecorators: { dataSource: [{
|
|
521
544
|
type: Input,
|
|
@@ -542,16 +565,19 @@ class PaginationService {
|
|
|
542
565
|
firstPage() {
|
|
543
566
|
this.firstPageSubject.next(true);
|
|
544
567
|
}
|
|
545
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
546
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
568
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
569
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PaginationService, providedIn: 'any' }); }
|
|
547
570
|
}
|
|
548
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
571
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PaginationService, decorators: [{
|
|
549
572
|
type: Injectable,
|
|
550
573
|
args: [{
|
|
551
574
|
providedIn: 'any',
|
|
552
575
|
}]
|
|
553
576
|
}] });
|
|
554
577
|
|
|
578
|
+
/**
|
|
579
|
+
* @deprecated fu-btn-text will be removed in next versions. Use `fuButton` instead.
|
|
580
|
+
*/
|
|
555
581
|
class TextButtonDirective {
|
|
556
582
|
constructor(el, renderer) {
|
|
557
583
|
this.el = el;
|
|
@@ -559,6 +585,8 @@ class TextButtonDirective {
|
|
|
559
585
|
this.variant = 'regular';
|
|
560
586
|
this.iconButton = false;
|
|
561
587
|
this.rounded = false;
|
|
588
|
+
this.raised = false;
|
|
589
|
+
this.compact = false;
|
|
562
590
|
}
|
|
563
591
|
ngOnInit() {
|
|
564
592
|
this.setInitialStyles();
|
|
@@ -573,11 +601,17 @@ class TextButtonDirective {
|
|
|
573
601
|
if (this.rounded) {
|
|
574
602
|
this.renderer.setAttribute(this.el.nativeElement, 'rounded', 'true');
|
|
575
603
|
}
|
|
604
|
+
if (this.raised) {
|
|
605
|
+
this.renderer.setAttribute(this.el.nativeElement, 'raised', 'true');
|
|
606
|
+
}
|
|
607
|
+
if (this.compact) {
|
|
608
|
+
this.renderer.setAttribute(this.el.nativeElement, 'compact', 'true');
|
|
609
|
+
}
|
|
576
610
|
}
|
|
577
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
578
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "
|
|
611
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TextButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
612
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.6", type: TextButtonDirective, isStandalone: true, selector: "[fu-btn-text]", inputs: { variant: "variant", iconButton: ["iconButton", "iconButton", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], raised: ["raised", "raised", booleanAttribute], compact: ["compact", "compact", booleanAttribute] }, ngImport: i0 }); }
|
|
579
613
|
}
|
|
580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
614
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TextButtonDirective, decorators: [{
|
|
581
615
|
type: Directive,
|
|
582
616
|
args: [{
|
|
583
617
|
selector: '[fu-btn-text]',
|
|
@@ -590,6 +624,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
|
|
|
590
624
|
}], rounded: [{
|
|
591
625
|
type: Input,
|
|
592
626
|
args: [{ transform: booleanAttribute }]
|
|
627
|
+
}], raised: [{
|
|
628
|
+
type: Input,
|
|
629
|
+
args: [{ transform: booleanAttribute }]
|
|
630
|
+
}], compact: [{
|
|
631
|
+
type: Input,
|
|
632
|
+
args: [{ transform: booleanAttribute }]
|
|
593
633
|
}] } });
|
|
594
634
|
|
|
595
635
|
class GridColumnsDirective {
|
|
@@ -621,20 +661,21 @@ class GridColumnsDirective {
|
|
|
621
661
|
dataGrid.style.setProperty('--grid-columns', columns);
|
|
622
662
|
}
|
|
623
663
|
}
|
|
624
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
625
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
664
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridColumnsDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
665
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: GridColumnsDirective, isStandalone: false, selector: "[gridColumns]", inputs: { columnSizes: { classPropertyName: "columnSizes", publicName: "columnSizes", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0 }); }
|
|
626
666
|
}
|
|
627
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
667
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridColumnsDirective, decorators: [{
|
|
628
668
|
type: Directive,
|
|
629
669
|
args: [{
|
|
630
670
|
selector: '[gridColumns]',
|
|
671
|
+
standalone: false
|
|
631
672
|
}]
|
|
632
673
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onResize: [{
|
|
633
674
|
type: HostListener,
|
|
634
675
|
args: ['window:resize']
|
|
635
676
|
}] } });
|
|
636
677
|
|
|
637
|
-
class KeyMappingPipe {
|
|
678
|
+
let KeyMappingPipe$1 = class KeyMappingPipe {
|
|
638
679
|
transform(value) {
|
|
639
680
|
if (!value || typeof value !== 'object') {
|
|
640
681
|
return value;
|
|
@@ -645,13 +686,14 @@ class KeyMappingPipe {
|
|
|
645
686
|
});
|
|
646
687
|
return mappedObject;
|
|
647
688
|
}
|
|
648
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
649
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
650
|
-
}
|
|
651
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
689
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: KeyMappingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
690
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: KeyMappingPipe, isStandalone: false, name: "keyMapping" }); }
|
|
691
|
+
};
|
|
692
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: KeyMappingPipe$1, decorators: [{
|
|
652
693
|
type: Pipe,
|
|
653
694
|
args: [{
|
|
654
695
|
name: 'keyMapping',
|
|
696
|
+
standalone: false
|
|
655
697
|
}]
|
|
656
698
|
}] });
|
|
657
699
|
|
|
@@ -916,12 +958,12 @@ class DataGridComponent {
|
|
|
916
958
|
this.subscription.unsubscribe();
|
|
917
959
|
}
|
|
918
960
|
}
|
|
919
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
920
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: DataGridComponent, selector: "fu-data-grid", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: true, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: false, isRequired: true, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: false, isRequired: false, transformFunction: null }, columnSizes: { classPropertyName: "columnSizes", publicName: "columnSizes", isSignal: false, isRequired: false, transformFunction: null }, dataLoading: { classPropertyName: "dataLoading", publicName: "dataLoading", isSignal: false, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, firstPageOnInit: { classPropertyName: "firstPageOnInit", publicName: "firstPageOnInit", isSignal: false, isRequired: false, transformFunction: null }, renderNewAddRow: { classPropertyName: "renderNewAddRow", publicName: "renderNewAddRow", isSignal: false, isRequired: false, transformFunction: null }, expandIndex: { classPropertyName: "expandIndex", publicName: "expandIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowSelect: "rowSelect", onSort: "onSort", expandIndex: "expandIndexChange" }, providers: [DataSortingService], queries: [{ propertyName: "captionTemplate", first: true, predicate: ["caption"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: GridHeaderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "bodyTemplate", first: true, predicate: GridBodyTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "expandTemplate", first: true, predicate: GridExpandTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: ["noDataRow"], descendants: true }, { propertyName: "addButtonTemplate", first: true, predicate: ["addButton"], descendants: true }, { propertyName: "addNewRowTemplate", first: true, predicate: ["addNewRow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"fusion-datagrid\" class=\"fu-data-grid-wrapper\">\r\n @if (filter) {\r\n <div class=\"fu-data-grid-filter\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"filterText\"\r\n (input)=\"filterData(true)\"\r\n placeholder=\"Search...\"\r\n />\r\n @if (!!filterText) {\r\n <div (click)=\"resetFilter()\">\r\n <fu-icon size=\"20px\" iconName=\"cancel\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"fu-data-grid-container\">\r\n <div class=\"fu-data-grid-header\">\r\n <div class=\"fu-head-row\" gridColumns [columnSizes]=\"columnSizes\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate || defaultHeaderTemplate;\r\n context: { $implicit: dataSource, keys: dataSource[0] | keyMapping }\r\n \"\r\n />\r\n </div>\r\n </div>\r\n <div class=\"fu-data-grid-body\">\r\n <div *ngIf=\"dataLoading\" class=\"fu-data-grid-spinner-overlay\">\r\n <div class=\"fu-spinner\"></div>\r\n </div>\r\n\r\n @for (row of paginatedData; track $index) {\r\n <div\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{ hoverable, striped }\"\r\n [style.cursor]=\"\r\n expandable || rowSelect.observed ? 'pointer' : 'default'\r\n \"\r\n (click)=\"rowClick(row, $index)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate || defaultBodyTemplate;\r\n context: { $implicit: row, index: $index, keys: row | keyMapping }\r\n \"\r\n />\r\n\r\n @if (\r\n (expandable && expandedRowIndex === $index) ||\r\n expandIndex() === $index\r\n ) {\r\n <div class=\"fu-expanded-row\" (click)=\"$event.stopPropagation()\">\r\n <div>\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <ng-container\r\n *ngTemplateOutlet=\"footerTemplate; context: { $implicit: paginatedData }\"\r\n />\r\n\r\n @if (paginatedData.length <= 0 && !dataLoading) {\r\n <ng-container *ngTemplateOutlet=\"noDataTemplate\" />\r\n }\r\n\r\n @if (renderNewAddRow) {\r\n <ng-container *ngTemplateOutlet=\"addNewRowTemplate\" />\r\n }\r\n\r\n @if (paginator) {\r\n <ng-container\r\n *ngTemplateOutlet=\"defaultPaginator; context: { $implicit: sortData }\"\r\n />\r\n }\r\n</div>\r\n\r\n<ng-template #defaultHeaderTemplate let-data>\r\n @for (header of data[0] | keyvalue: originalOrder; track $index) {\r\n <fu-head-row-cell\r\n [cellDef]=\"$any(header.key)\"\r\n [sortKey]=\"$any(header.key)\"\r\n />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultBodyTemplate let-rows>\r\n @for (row of rows | keyvalue: originalOrder; track $index) {\r\n <fu-body-row-cell [cellValue]=\"$any(row.value)\" />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultPaginator let-data>\r\n <div class=\"fu-data-grid-paginator\">\r\n <div class=\"fu-grid-add-button\">\r\n <ng-container *ngTemplateOutlet=\"addButtonTemplate\" />\r\n </div>\r\n\r\n <div class=\"fu-paginator-page-select\">\r\n <span>Page size:</span>\r\n <select class=\"fu-page-size-select\" (change)=\"changePageSize($event)\">\r\n <option\r\n *ngFor=\"let size of pageSizeOptions\"\r\n [value]=\"size\"\r\n [selected]=\"size === pageSize\"\r\n >\r\n {{ size }}\r\n </option>\r\n </select>\r\n </div>\r\n <div class=\"fu-paginator-controls\">\r\n <div>\r\n {{ getPageStart() }} - {{ getPageEnd() }} of {{ totalItemCount() }}\r\n </div>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(1)\"\r\n [disabled]=\"currentPage === 1\"\r\n >\r\n <fu-icon iconName=\"doubleArrowLeft\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(currentPage - 1)\"\r\n [disabled]=\"currentPage === 1\"\r\n >\r\n <fu-icon iconName=\"arrowLeft\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(currentPage + 1)\"\r\n [disabled]=\"currentPage >= totalPages()\"\r\n >\r\n <fu-icon iconName=\"arrowRight\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(totalPages())\"\r\n [disabled]=\"currentPage >= totalPages()\"\r\n >\r\n <fu-icon iconName=\"doubleArrowRight\" />\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: ["html{--fu-grid-fg-color: #232534;--fu-grid-bg-color: #1e1f2b;--fu-grid-hover-color: #12121240;--fu-grid-striped-color: #22232e;--fu-grid-border-color: #4b444d;--fu-grid-text-color: #ffffff;--fu-grid-cell-color: #bab9b9;--fu-filter-input-color: #ccc;--fu-grid-cell-edit-input: #fff;--fu-grid-shape: 4px}.fu-data-grid-wrapper{border-radius:var(--fu-grid-shape);box-shadow:0 2px 4px #00000080;background-color:var(--fu-grid-bg-color);color:var(--fu-grid-text-color);font-family:Roboto,sans-serif;font-size:14px}.fu-data-grid-container{width:100%}.fu-data-grid-container .fu-data-grid-header .fu-head-row{display:grid;grid-template-columns:var(--grid-columns);border-bottom:1px solid var(--fu-grid-border-color)}@media (max-width: 900px){.fu-data-grid-container .fu-data-grid-header .fu-head-row{display:flex;justify-content:space-between;flex-wrap:wrap}.fu-data-grid-container .fu-data-grid-header .fu-head-row>*{flex:1 1 auto}}.fu-data-grid-container .fu-data-grid-body{position:relative}.fu-data-grid-container .fu-data-grid-body .fu-body-row{display:grid;grid-template-columns:var(--grid-columns);border-bottom:1px solid var(--fu-grid-border-color);align-items:center}.fu-data-grid-container .fu-data-grid-body .fu-body-row.striped:nth-child(2n){background-color:var(--fu-grid-striped-color)}.fu-data-grid-container .fu-data-grid-body .fu-body-row.hoverable:hover{background-color:var(--fu-grid-hover-color)}@media (max-width: 900px){.fu-data-grid-container .fu-data-grid-body .fu-body-row{grid-template-columns:repeat(2,1fr)}.fu-data-grid-container .fu-data-grid-body .fu-body-row :nth-child(odd):last-child{grid-column:span 2}.fu-data-grid-container .fu-data-grid-body .fu-body-row [data-actions]{grid-column:1/-1;margin:8px 0}}@media (max-width: 600px){.fu-data-grid-container .fu-data-grid-body .fu-body-row{grid-template-columns:1fr;border-bottom:1px solid var(--fu-grid-border-color)}.fu-data-grid-container .fu-data-grid-body .fu-body-row>:nth-child(odd):last-child{grid-column:span 1}}.fu-data-grid-container .fu-data-grid-body .fu-body-row .fu-expanded-row{grid-column:1/-1;border-top:1px solid rgba(128,128,128,.1);padding:12px 16px}.fu-data-grid-container .fu-data-grid-body .fu-body-row .fu-expanded-row>div{cursor:default}.fu-data-grid-paginator{display:flex;justify-content:flex-end;padding:16px;position:relative}.fu-data-grid-paginator .fu-page-size-select{background-color:var(--fu-grid-fg-color);color:var(--fu-grid-cell-edit-input);padding:4px;border:1px solid var(--fu-grid-border-color)}@media (max-width: 600px){.fu-data-grid-paginator{gap:12px;flex-direction:column;padding:12px 16px}}.fu-data-grid-paginator .fu-paginator-page-select{display:flex;justify-content:flex-end;align-items:center;margin-right:12px;font-size:14px}@media (max-width: 600px){.fu-data-grid-paginator .fu-paginator-page-select{margin-right:0}}.fu-data-grid-paginator .fu-paginator-page-select span{margin-right:8px}.fu-data-grid-paginator .fu-paginator-controls{display:flex;justify-content:flex-end;align-items:center;gap:8px}.fu-grid-add-button{position:absolute;left:10px;top:10px}.fu-data-grid-filter{position:relative}.fu-data-grid-filter input{box-sizing:border-box;background-color:var(--fu-grid-fg-color);color:var(--fu-filter-input-color);width:calc(100% - 32px);padding:10px 42px 10px 8px;margin:16px;outline:none;border:none}.fu-data-grid-filter div{position:absolute;display:flex;justify-content:center;align-items:center;width:24px;height:24px;background-color:var(--fu-grid-fg-color);top:22px;right:24px;cursor:pointer;transition:.1s ease-in-out}.fu-data-grid-filter div:hover{background-color:var(--fu-grid-hover-color)}.fu-data-grid-spinner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#78787880;display:flex;justify-content:center;align-items:center;z-index:1000}.fu-data-grid-spinner-overlay .fu-spinner{border:10px solid var(--fu-grid-bg-color);border-top:10px solid #3498db;border-radius:50%;width:30px;height:30px;animation:spin 2s linear infinite;margin:5px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "directive", type: TextButtonDirective, selector: "[fu-btn-text]", inputs: ["variant", "iconButton", "rounded"] }, { kind: "directive", type: GridColumnsDirective, selector: "[gridColumns]", inputs: ["columnSizes"] }, { kind: "component", type: BodyRowCellComponent, selector: "fu-body-row-cell", inputs: ["cellValue", "editKey", "editCellValue"], outputs: ["editCellValueChange"] }, { kind: "component", type: HeadRowCellComponent, selector: "fu-head-row-cell", inputs: ["cellDef", "sortKey"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: KeyMappingPipe, name: "keyMapping" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
961
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataGridComponent, deps: [{ token: DataSortingService }, { token: PaginationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
962
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: DataGridComponent, isStandalone: false, selector: "fu-data-grid", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: true, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: false, isRequired: true, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: false, isRequired: false, transformFunction: null }, columnSizes: { classPropertyName: "columnSizes", publicName: "columnSizes", isSignal: false, isRequired: false, transformFunction: null }, dataLoading: { classPropertyName: "dataLoading", publicName: "dataLoading", isSignal: false, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, firstPageOnInit: { classPropertyName: "firstPageOnInit", publicName: "firstPageOnInit", isSignal: false, isRequired: false, transformFunction: null }, renderNewAddRow: { classPropertyName: "renderNewAddRow", publicName: "renderNewAddRow", isSignal: false, isRequired: false, transformFunction: null }, expandIndex: { classPropertyName: "expandIndex", publicName: "expandIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowSelect: "rowSelect", onSort: "onSort", expandIndex: "expandIndexChange" }, providers: [DataSortingService], queries: [{ propertyName: "captionTemplate", first: true, predicate: ["caption"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: GridHeaderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "bodyTemplate", first: true, predicate: GridBodyTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "expandTemplate", first: true, predicate: GridExpandTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: ["noDataRow"], descendants: true }, { propertyName: "addButtonTemplate", first: true, predicate: ["addButton"], descendants: true }, { propertyName: "addNewRowTemplate", first: true, predicate: ["addNewRow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"fusion-datagrid\" class=\"fu-data-grid-wrapper\">\r\n @if (filter) {\r\n <div class=\"fu-data-grid-filter\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"filterText\"\r\n (input)=\"filterData(true)\"\r\n placeholder=\"Search...\"\r\n />\r\n @if (!!filterText) {\r\n <div (click)=\"resetFilter()\">\r\n <fu-icon size=\"20px\" iconName=\"cancel\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"fu-data-grid-container\">\r\n <div class=\"fu-data-grid-header\">\r\n <div class=\"fu-head-row\" gridColumns [columnSizes]=\"columnSizes\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate || defaultHeaderTemplate;\r\n context: { $implicit: dataSource, keys: dataSource[0] | keyMapping }\r\n \"\r\n />\r\n </div>\r\n </div>\r\n <div class=\"fu-data-grid-body\">\r\n <div *ngIf=\"dataLoading\" class=\"fu-data-grid-spinner-overlay\">\r\n <div class=\"fu-spinner\"></div>\r\n </div>\r\n\r\n @for (row of paginatedData; track $index) {\r\n <div\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{ hoverable, striped }\"\r\n [style.cursor]=\"\r\n expandable || rowSelect.observed ? 'pointer' : 'default'\r\n \"\r\n (click)=\"rowClick(row, $index)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate || defaultBodyTemplate;\r\n context: { $implicit: row, index: $index, keys: row | keyMapping }\r\n \"\r\n />\r\n\r\n @if (\r\n (expandable && expandedRowIndex === $index) ||\r\n expandIndex() === $index\r\n ) {\r\n <div class=\"fu-expanded-row\" (click)=\"$event.stopPropagation()\">\r\n <div>\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <ng-container\r\n *ngTemplateOutlet=\"footerTemplate; context: { $implicit: paginatedData }\"\r\n />\r\n\r\n @if (paginatedData.length <= 0 && !dataLoading) {\r\n <ng-container *ngTemplateOutlet=\"noDataTemplate\" />\r\n }\r\n\r\n @if (renderNewAddRow) {\r\n <ng-container *ngTemplateOutlet=\"addNewRowTemplate\" />\r\n }\r\n\r\n @if (paginator) {\r\n <ng-container\r\n *ngTemplateOutlet=\"defaultPaginator; context: { $implicit: sortData }\"\r\n />\r\n }\r\n</div>\r\n\r\n<ng-template #defaultHeaderTemplate let-data>\r\n @for (header of data[0] | keyvalue: originalOrder; track $index) {\r\n <fu-head-row-cell\r\n [cellDef]=\"$any(header.key)\"\r\n [sortKey]=\"$any(header.key)\"\r\n />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultBodyTemplate let-rows>\r\n @for (row of rows | keyvalue: originalOrder; track $index) {\r\n <fu-body-row-cell [cellValue]=\"$any(row.value)\" />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultPaginator let-data>\r\n <div class=\"fu-data-grid-paginator\">\r\n <div class=\"fu-grid-add-button\">\r\n <ng-container *ngTemplateOutlet=\"addButtonTemplate\" />\r\n </div>\r\n\r\n <div class=\"fu-paginator-page-select\">\r\n <span>Page size:</span>\r\n <select class=\"fu-page-size-select\" (change)=\"changePageSize($event)\">\r\n <option\r\n *ngFor=\"let size of pageSizeOptions\"\r\n [value]=\"size\"\r\n [selected]=\"size === pageSize\"\r\n >\r\n {{ size }}\r\n </option>\r\n </select>\r\n </div>\r\n <div class=\"fu-paginator-controls\">\r\n <div>\r\n {{ getPageStart() }} - {{ getPageEnd() }} of {{ totalItemCount() }}\r\n </div>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(1)\"\r\n [disabled]=\"currentPage === 1\"\r\n >\r\n <fu-icon iconName=\"doubleArrowLeft\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(currentPage - 1)\"\r\n [disabled]=\"currentPage === 1\"\r\n >\r\n <fu-icon iconName=\"arrowLeft\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(currentPage + 1)\"\r\n [disabled]=\"currentPage >= totalPages()\"\r\n >\r\n <fu-icon iconName=\"arrowRight\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(totalPages())\"\r\n [disabled]=\"currentPage >= totalPages()\"\r\n >\r\n <fu-icon iconName=\"doubleArrowRight\" />\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: ["html{--fu-grid-fg-color: #232534;--fu-grid-bg-color: #1e1f2b;--fu-grid-hover-color: #12121240;--fu-grid-striped-color: #22232e;--fu-grid-border-color: #4b444d;--fu-grid-text-color: #ffffff;--fu-grid-cell-color: #bab9b9;--fu-filter-input-color: #ccc;--fu-grid-cell-edit-input: #fff;--fu-grid-shape: 4px}.fu-data-grid-wrapper{border-radius:var(--fu-grid-shape);box-shadow:0 2px 4px #00000080;background-color:var(--fu-grid-bg-color);color:var(--fu-grid-text-color);font-family:Roboto,sans-serif;font-size:14px}.fu-data-grid-container{width:100%}.fu-data-grid-container .fu-data-grid-header .fu-head-row{display:grid;grid-template-columns:var(--grid-columns);border-bottom:1px solid var(--fu-grid-border-color)}@media (max-width: 900px){.fu-data-grid-container .fu-data-grid-header .fu-head-row{display:flex;justify-content:space-between;flex-wrap:wrap}.fu-data-grid-container .fu-data-grid-header .fu-head-row>*{flex:1 1 auto}}.fu-data-grid-container .fu-data-grid-body{position:relative}.fu-data-grid-container .fu-data-grid-body .fu-body-row{display:grid;grid-template-columns:var(--grid-columns);border-bottom:1px solid var(--fu-grid-border-color);align-items:center}.fu-data-grid-container .fu-data-grid-body .fu-body-row.striped:nth-child(2n){background-color:var(--fu-grid-striped-color)}.fu-data-grid-container .fu-data-grid-body .fu-body-row.hoverable:hover{background-color:var(--fu-grid-hover-color)}@media (max-width: 900px){.fu-data-grid-container .fu-data-grid-body .fu-body-row{grid-template-columns:repeat(2,1fr)}.fu-data-grid-container .fu-data-grid-body .fu-body-row :nth-child(odd):last-child{grid-column:span 2}.fu-data-grid-container .fu-data-grid-body .fu-body-row [data-actions]{grid-column:1/-1;margin:8px 0}}@media (max-width: 600px){.fu-data-grid-container .fu-data-grid-body .fu-body-row{grid-template-columns:1fr;border-bottom:1px solid var(--fu-grid-border-color)}.fu-data-grid-container .fu-data-grid-body .fu-body-row>:nth-child(odd):last-child{grid-column:span 1}}.fu-data-grid-container .fu-data-grid-body .fu-body-row .fu-expanded-row{grid-column:1/-1;border-top:1px solid rgba(128,128,128,.1);padding:12px 16px}.fu-data-grid-container .fu-data-grid-body .fu-body-row .fu-expanded-row>div{cursor:default}.fu-data-grid-paginator{display:flex;justify-content:flex-end;padding:16px;position:relative}.fu-data-grid-paginator .fu-page-size-select{background-color:var(--fu-grid-fg-color);color:var(--fu-grid-cell-edit-input);padding:4px;border:1px solid var(--fu-grid-border-color)}@media (max-width: 600px){.fu-data-grid-paginator{gap:12px;flex-direction:column;padding:12px 16px}}.fu-data-grid-paginator .fu-paginator-page-select{display:flex;justify-content:flex-end;align-items:center;margin-right:12px;font-size:14px}@media (max-width: 600px){.fu-data-grid-paginator .fu-paginator-page-select{margin-right:0}}.fu-data-grid-paginator .fu-paginator-page-select span{margin-right:8px}.fu-data-grid-paginator .fu-paginator-controls{display:flex;justify-content:flex-end;align-items:center;gap:8px}.fu-grid-add-button{position:absolute;left:10px;top:10px}.fu-data-grid-filter{position:relative}.fu-data-grid-filter input{box-sizing:border-box;background-color:var(--fu-grid-fg-color);color:var(--fu-filter-input-color);width:calc(100% - 32px);padding:10px 42px 10px 8px;margin:16px;outline:none;border:none}.fu-data-grid-filter div{position:absolute;display:flex;justify-content:center;align-items:center;width:24px;height:24px;background-color:var(--fu-grid-fg-color);top:22px;right:24px;cursor:pointer;transition:.1s ease-in-out}.fu-data-grid-filter div:hover{background-color:var(--fu-grid-hover-color)}.fu-data-grid-spinner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#78787880;display:flex;justify-content:center;align-items:center;z-index:1000}.fu-data-grid-spinner-overlay .fu-spinner{border:10px solid var(--fu-grid-bg-color);border-top:10px solid #3498db;border-radius:50%;width:30px;height:30px;animation:spin 2s linear infinite;margin:5px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "directive", type: TextButtonDirective, selector: "[fu-btn-text]", inputs: ["variant", "iconButton", "rounded", "raised", "compact"] }, { kind: "directive", type: GridColumnsDirective, selector: "[gridColumns]", inputs: ["columnSizes"] }, { kind: "component", type: BodyRowCellComponent, selector: "fu-body-row-cell", inputs: ["cellValue", "editKey", "editCellValue"], outputs: ["editCellValueChange"] }, { kind: "component", type: HeadRowCellComponent, selector: "fu-head-row-cell", inputs: ["cellDef", "sortKey"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: KeyMappingPipe$1, name: "keyMapping" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
921
963
|
}
|
|
922
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
964
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataGridComponent, decorators: [{
|
|
923
965
|
type: Component,
|
|
924
|
-
args: [{ selector: 'fu-data-grid', providers: [DataSortingService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div id=\"fusion-datagrid\" class=\"fu-data-grid-wrapper\">\r\n @if (filter) {\r\n <div class=\"fu-data-grid-filter\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"filterText\"\r\n (input)=\"filterData(true)\"\r\n placeholder=\"Search...\"\r\n />\r\n @if (!!filterText) {\r\n <div (click)=\"resetFilter()\">\r\n <fu-icon size=\"20px\" iconName=\"cancel\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"fu-data-grid-container\">\r\n <div class=\"fu-data-grid-header\">\r\n <div class=\"fu-head-row\" gridColumns [columnSizes]=\"columnSizes\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate || defaultHeaderTemplate;\r\n context: { $implicit: dataSource, keys: dataSource[0] | keyMapping }\r\n \"\r\n />\r\n </div>\r\n </div>\r\n <div class=\"fu-data-grid-body\">\r\n <div *ngIf=\"dataLoading\" class=\"fu-data-grid-spinner-overlay\">\r\n <div class=\"fu-spinner\"></div>\r\n </div>\r\n\r\n @for (row of paginatedData; track $index) {\r\n <div\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{ hoverable, striped }\"\r\n [style.cursor]=\"\r\n expandable || rowSelect.observed ? 'pointer' : 'default'\r\n \"\r\n (click)=\"rowClick(row, $index)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate || defaultBodyTemplate;\r\n context: { $implicit: row, index: $index, keys: row | keyMapping }\r\n \"\r\n />\r\n\r\n @if (\r\n (expandable && expandedRowIndex === $index) ||\r\n expandIndex() === $index\r\n ) {\r\n <div class=\"fu-expanded-row\" (click)=\"$event.stopPropagation()\">\r\n <div>\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <ng-container\r\n *ngTemplateOutlet=\"footerTemplate; context: { $implicit: paginatedData }\"\r\n />\r\n\r\n @if (paginatedData.length <= 0 && !dataLoading) {\r\n <ng-container *ngTemplateOutlet=\"noDataTemplate\" />\r\n }\r\n\r\n @if (renderNewAddRow) {\r\n <ng-container *ngTemplateOutlet=\"addNewRowTemplate\" />\r\n }\r\n\r\n @if (paginator) {\r\n <ng-container\r\n *ngTemplateOutlet=\"defaultPaginator; context: { $implicit: sortData }\"\r\n />\r\n }\r\n</div>\r\n\r\n<ng-template #defaultHeaderTemplate let-data>\r\n @for (header of data[0] | keyvalue: originalOrder; track $index) {\r\n <fu-head-row-cell\r\n [cellDef]=\"$any(header.key)\"\r\n [sortKey]=\"$any(header.key)\"\r\n />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultBodyTemplate let-rows>\r\n @for (row of rows | keyvalue: originalOrder; track $index) {\r\n <fu-body-row-cell [cellValue]=\"$any(row.value)\" />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultPaginator let-data>\r\n <div class=\"fu-data-grid-paginator\">\r\n <div class=\"fu-grid-add-button\">\r\n <ng-container *ngTemplateOutlet=\"addButtonTemplate\" />\r\n </div>\r\n\r\n <div class=\"fu-paginator-page-select\">\r\n <span>Page size:</span>\r\n <select class=\"fu-page-size-select\" (change)=\"changePageSize($event)\">\r\n <option\r\n *ngFor=\"let size of pageSizeOptions\"\r\n [value]=\"size\"\r\n [selected]=\"size === pageSize\"\r\n >\r\n {{ size }}\r\n </option>\r\n </select>\r\n </div>\r\n <div class=\"fu-paginator-controls\">\r\n <div>\r\n {{ getPageStart() }} - {{ getPageEnd() }} of {{ totalItemCount() }}\r\n </div>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(1)\"\r\n [disabled]=\"currentPage === 1\"\r\n >\r\n <fu-icon iconName=\"doubleArrowLeft\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(currentPage - 1)\"\r\n [disabled]=\"currentPage === 1\"\r\n >\r\n <fu-icon iconName=\"arrowLeft\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(currentPage + 1)\"\r\n [disabled]=\"currentPage >= totalPages()\"\r\n >\r\n <fu-icon iconName=\"arrowRight\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(totalPages())\"\r\n [disabled]=\"currentPage >= totalPages()\"\r\n >\r\n <fu-icon iconName=\"doubleArrowRight\" />\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: ["html{--fu-grid-fg-color: #232534;--fu-grid-bg-color: #1e1f2b;--fu-grid-hover-color: #12121240;--fu-grid-striped-color: #22232e;--fu-grid-border-color: #4b444d;--fu-grid-text-color: #ffffff;--fu-grid-cell-color: #bab9b9;--fu-filter-input-color: #ccc;--fu-grid-cell-edit-input: #fff;--fu-grid-shape: 4px}.fu-data-grid-wrapper{border-radius:var(--fu-grid-shape);box-shadow:0 2px 4px #00000080;background-color:var(--fu-grid-bg-color);color:var(--fu-grid-text-color);font-family:Roboto,sans-serif;font-size:14px}.fu-data-grid-container{width:100%}.fu-data-grid-container .fu-data-grid-header .fu-head-row{display:grid;grid-template-columns:var(--grid-columns);border-bottom:1px solid var(--fu-grid-border-color)}@media (max-width: 900px){.fu-data-grid-container .fu-data-grid-header .fu-head-row{display:flex;justify-content:space-between;flex-wrap:wrap}.fu-data-grid-container .fu-data-grid-header .fu-head-row>*{flex:1 1 auto}}.fu-data-grid-container .fu-data-grid-body{position:relative}.fu-data-grid-container .fu-data-grid-body .fu-body-row{display:grid;grid-template-columns:var(--grid-columns);border-bottom:1px solid var(--fu-grid-border-color);align-items:center}.fu-data-grid-container .fu-data-grid-body .fu-body-row.striped:nth-child(2n){background-color:var(--fu-grid-striped-color)}.fu-data-grid-container .fu-data-grid-body .fu-body-row.hoverable:hover{background-color:var(--fu-grid-hover-color)}@media (max-width: 900px){.fu-data-grid-container .fu-data-grid-body .fu-body-row{grid-template-columns:repeat(2,1fr)}.fu-data-grid-container .fu-data-grid-body .fu-body-row :nth-child(odd):last-child{grid-column:span 2}.fu-data-grid-container .fu-data-grid-body .fu-body-row [data-actions]{grid-column:1/-1;margin:8px 0}}@media (max-width: 600px){.fu-data-grid-container .fu-data-grid-body .fu-body-row{grid-template-columns:1fr;border-bottom:1px solid var(--fu-grid-border-color)}.fu-data-grid-container .fu-data-grid-body .fu-body-row>:nth-child(odd):last-child{grid-column:span 1}}.fu-data-grid-container .fu-data-grid-body .fu-body-row .fu-expanded-row{grid-column:1/-1;border-top:1px solid rgba(128,128,128,.1);padding:12px 16px}.fu-data-grid-container .fu-data-grid-body .fu-body-row .fu-expanded-row>div{cursor:default}.fu-data-grid-paginator{display:flex;justify-content:flex-end;padding:16px;position:relative}.fu-data-grid-paginator .fu-page-size-select{background-color:var(--fu-grid-fg-color);color:var(--fu-grid-cell-edit-input);padding:4px;border:1px solid var(--fu-grid-border-color)}@media (max-width: 600px){.fu-data-grid-paginator{gap:12px;flex-direction:column;padding:12px 16px}}.fu-data-grid-paginator .fu-paginator-page-select{display:flex;justify-content:flex-end;align-items:center;margin-right:12px;font-size:14px}@media (max-width: 600px){.fu-data-grid-paginator .fu-paginator-page-select{margin-right:0}}.fu-data-grid-paginator .fu-paginator-page-select span{margin-right:8px}.fu-data-grid-paginator .fu-paginator-controls{display:flex;justify-content:flex-end;align-items:center;gap:8px}.fu-grid-add-button{position:absolute;left:10px;top:10px}.fu-data-grid-filter{position:relative}.fu-data-grid-filter input{box-sizing:border-box;background-color:var(--fu-grid-fg-color);color:var(--fu-filter-input-color);width:calc(100% - 32px);padding:10px 42px 10px 8px;margin:16px;outline:none;border:none}.fu-data-grid-filter div{position:absolute;display:flex;justify-content:center;align-items:center;width:24px;height:24px;background-color:var(--fu-grid-fg-color);top:22px;right:24px;cursor:pointer;transition:.1s ease-in-out}.fu-data-grid-filter div:hover{background-color:var(--fu-grid-hover-color)}.fu-data-grid-spinner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#78787880;display:flex;justify-content:center;align-items:center;z-index:1000}.fu-data-grid-spinner-overlay .fu-spinner{border:10px solid var(--fu-grid-bg-color);border-top:10px solid #3498db;border-radius:50%;width:30px;height:30px;animation:spin 2s linear infinite;margin:5px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
966
|
+
args: [{ selector: 'fu-data-grid', providers: [DataSortingService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div id=\"fusion-datagrid\" class=\"fu-data-grid-wrapper\">\r\n @if (filter) {\r\n <div class=\"fu-data-grid-filter\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"filterText\"\r\n (input)=\"filterData(true)\"\r\n placeholder=\"Search...\"\r\n />\r\n @if (!!filterText) {\r\n <div (click)=\"resetFilter()\">\r\n <fu-icon size=\"20px\" iconName=\"cancel\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"fu-data-grid-container\">\r\n <div class=\"fu-data-grid-header\">\r\n <div class=\"fu-head-row\" gridColumns [columnSizes]=\"columnSizes\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate || defaultHeaderTemplate;\r\n context: { $implicit: dataSource, keys: dataSource[0] | keyMapping }\r\n \"\r\n />\r\n </div>\r\n </div>\r\n <div class=\"fu-data-grid-body\">\r\n <div *ngIf=\"dataLoading\" class=\"fu-data-grid-spinner-overlay\">\r\n <div class=\"fu-spinner\"></div>\r\n </div>\r\n\r\n @for (row of paginatedData; track $index) {\r\n <div\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{ hoverable, striped }\"\r\n [style.cursor]=\"\r\n expandable || rowSelect.observed ? 'pointer' : 'default'\r\n \"\r\n (click)=\"rowClick(row, $index)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate || defaultBodyTemplate;\r\n context: { $implicit: row, index: $index, keys: row | keyMapping }\r\n \"\r\n />\r\n\r\n @if (\r\n (expandable && expandedRowIndex === $index) ||\r\n expandIndex() === $index\r\n ) {\r\n <div class=\"fu-expanded-row\" (click)=\"$event.stopPropagation()\">\r\n <div>\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <ng-container\r\n *ngTemplateOutlet=\"footerTemplate; context: { $implicit: paginatedData }\"\r\n />\r\n\r\n @if (paginatedData.length <= 0 && !dataLoading) {\r\n <ng-container *ngTemplateOutlet=\"noDataTemplate\" />\r\n }\r\n\r\n @if (renderNewAddRow) {\r\n <ng-container *ngTemplateOutlet=\"addNewRowTemplate\" />\r\n }\r\n\r\n @if (paginator) {\r\n <ng-container\r\n *ngTemplateOutlet=\"defaultPaginator; context: { $implicit: sortData }\"\r\n />\r\n }\r\n</div>\r\n\r\n<ng-template #defaultHeaderTemplate let-data>\r\n @for (header of data[0] | keyvalue: originalOrder; track $index) {\r\n <fu-head-row-cell\r\n [cellDef]=\"$any(header.key)\"\r\n [sortKey]=\"$any(header.key)\"\r\n />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultBodyTemplate let-rows>\r\n @for (row of rows | keyvalue: originalOrder; track $index) {\r\n <fu-body-row-cell [cellValue]=\"$any(row.value)\" />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultPaginator let-data>\r\n <div class=\"fu-data-grid-paginator\">\r\n <div class=\"fu-grid-add-button\">\r\n <ng-container *ngTemplateOutlet=\"addButtonTemplate\" />\r\n </div>\r\n\r\n <div class=\"fu-paginator-page-select\">\r\n <span>Page size:</span>\r\n <select class=\"fu-page-size-select\" (change)=\"changePageSize($event)\">\r\n <option\r\n *ngFor=\"let size of pageSizeOptions\"\r\n [value]=\"size\"\r\n [selected]=\"size === pageSize\"\r\n >\r\n {{ size }}\r\n </option>\r\n </select>\r\n </div>\r\n <div class=\"fu-paginator-controls\">\r\n <div>\r\n {{ getPageStart() }} - {{ getPageEnd() }} of {{ totalItemCount() }}\r\n </div>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(1)\"\r\n [disabled]=\"currentPage === 1\"\r\n >\r\n <fu-icon iconName=\"doubleArrowLeft\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(currentPage - 1)\"\r\n [disabled]=\"currentPage === 1\"\r\n >\r\n <fu-icon iconName=\"arrowLeft\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(currentPage + 1)\"\r\n [disabled]=\"currentPage >= totalPages()\"\r\n >\r\n <fu-icon iconName=\"arrowRight\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(totalPages())\"\r\n [disabled]=\"currentPage >= totalPages()\"\r\n >\r\n <fu-icon iconName=\"doubleArrowRight\" />\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: ["html{--fu-grid-fg-color: #232534;--fu-grid-bg-color: #1e1f2b;--fu-grid-hover-color: #12121240;--fu-grid-striped-color: #22232e;--fu-grid-border-color: #4b444d;--fu-grid-text-color: #ffffff;--fu-grid-cell-color: #bab9b9;--fu-filter-input-color: #ccc;--fu-grid-cell-edit-input: #fff;--fu-grid-shape: 4px}.fu-data-grid-wrapper{border-radius:var(--fu-grid-shape);box-shadow:0 2px 4px #00000080;background-color:var(--fu-grid-bg-color);color:var(--fu-grid-text-color);font-family:Roboto,sans-serif;font-size:14px}.fu-data-grid-container{width:100%}.fu-data-grid-container .fu-data-grid-header .fu-head-row{display:grid;grid-template-columns:var(--grid-columns);border-bottom:1px solid var(--fu-grid-border-color)}@media (max-width: 900px){.fu-data-grid-container .fu-data-grid-header .fu-head-row{display:flex;justify-content:space-between;flex-wrap:wrap}.fu-data-grid-container .fu-data-grid-header .fu-head-row>*{flex:1 1 auto}}.fu-data-grid-container .fu-data-grid-body{position:relative}.fu-data-grid-container .fu-data-grid-body .fu-body-row{display:grid;grid-template-columns:var(--grid-columns);border-bottom:1px solid var(--fu-grid-border-color);align-items:center}.fu-data-grid-container .fu-data-grid-body .fu-body-row.striped:nth-child(2n){background-color:var(--fu-grid-striped-color)}.fu-data-grid-container .fu-data-grid-body .fu-body-row.hoverable:hover{background-color:var(--fu-grid-hover-color)}@media (max-width: 900px){.fu-data-grid-container .fu-data-grid-body .fu-body-row{grid-template-columns:repeat(2,1fr)}.fu-data-grid-container .fu-data-grid-body .fu-body-row :nth-child(odd):last-child{grid-column:span 2}.fu-data-grid-container .fu-data-grid-body .fu-body-row [data-actions]{grid-column:1/-1;margin:8px 0}}@media (max-width: 600px){.fu-data-grid-container .fu-data-grid-body .fu-body-row{grid-template-columns:1fr;border-bottom:1px solid var(--fu-grid-border-color)}.fu-data-grid-container .fu-data-grid-body .fu-body-row>:nth-child(odd):last-child{grid-column:span 1}}.fu-data-grid-container .fu-data-grid-body .fu-body-row .fu-expanded-row{grid-column:1/-1;border-top:1px solid rgba(128,128,128,.1);padding:12px 16px}.fu-data-grid-container .fu-data-grid-body .fu-body-row .fu-expanded-row>div{cursor:default}.fu-data-grid-paginator{display:flex;justify-content:flex-end;padding:16px;position:relative}.fu-data-grid-paginator .fu-page-size-select{background-color:var(--fu-grid-fg-color);color:var(--fu-grid-cell-edit-input);padding:4px;border:1px solid var(--fu-grid-border-color)}@media (max-width: 600px){.fu-data-grid-paginator{gap:12px;flex-direction:column;padding:12px 16px}}.fu-data-grid-paginator .fu-paginator-page-select{display:flex;justify-content:flex-end;align-items:center;margin-right:12px;font-size:14px}@media (max-width: 600px){.fu-data-grid-paginator .fu-paginator-page-select{margin-right:0}}.fu-data-grid-paginator .fu-paginator-page-select span{margin-right:8px}.fu-data-grid-paginator .fu-paginator-controls{display:flex;justify-content:flex-end;align-items:center;gap:8px}.fu-grid-add-button{position:absolute;left:10px;top:10px}.fu-data-grid-filter{position:relative}.fu-data-grid-filter input{box-sizing:border-box;background-color:var(--fu-grid-fg-color);color:var(--fu-filter-input-color);width:calc(100% - 32px);padding:10px 42px 10px 8px;margin:16px;outline:none;border:none}.fu-data-grid-filter div{position:absolute;display:flex;justify-content:center;align-items:center;width:24px;height:24px;background-color:var(--fu-grid-fg-color);top:22px;right:24px;cursor:pointer;transition:.1s ease-in-out}.fu-data-grid-filter div:hover{background-color:var(--fu-grid-hover-color)}.fu-data-grid-spinner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#78787880;display:flex;justify-content:center;align-items:center;z-index:1000}.fu-data-grid-spinner-overlay .fu-spinner{border:10px solid var(--fu-grid-bg-color);border-top:10px solid #3498db;border-radius:50%;width:30px;height:30px;animation:spin 2s linear infinite;margin:5px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
925
967
|
}], ctorParameters: () => [{ type: DataSortingService }, { type: PaginationService }], propDecorators: { dataSource: [{
|
|
926
968
|
type: Input,
|
|
927
969
|
args: [{ required: true }]
|
|
@@ -986,11 +1028,11 @@ class DataGridPaginator {
|
|
|
986
1028
|
}
|
|
987
1029
|
|
|
988
1030
|
class IconModule {
|
|
989
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
990
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
991
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1031
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1032
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: IconModule, declarations: [IconComponent], imports: [CommonModule], exports: [IconComponent] }); }
|
|
1033
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconModule, providers: [IconRegistryService], imports: [CommonModule] }); }
|
|
992
1034
|
}
|
|
993
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1035
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconModule, decorators: [{
|
|
994
1036
|
type: NgModule,
|
|
995
1037
|
args: [{
|
|
996
1038
|
declarations: [IconComponent],
|
|
@@ -1000,20 +1042,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
|
|
|
1000
1042
|
}]
|
|
1001
1043
|
}] });
|
|
1002
1044
|
|
|
1003
|
-
|
|
1045
|
+
/**
|
|
1046
|
+
* @deprecated fu-btn-filled will be removed in next versions. Use `fuButton` instead.
|
|
1047
|
+
*/
|
|
1048
|
+
class FilledButtonDirective {
|
|
1004
1049
|
constructor(el, renderer) {
|
|
1005
1050
|
this.el = el;
|
|
1006
1051
|
this.renderer = renderer;
|
|
1007
1052
|
this.variant = 'regular';
|
|
1008
1053
|
this.iconButton = false;
|
|
1009
1054
|
this.rounded = false;
|
|
1055
|
+
this.compact = false;
|
|
1010
1056
|
}
|
|
1011
1057
|
ngOnInit() {
|
|
1012
1058
|
this.setInitialStyles();
|
|
1013
1059
|
}
|
|
1014
1060
|
setInitialStyles() {
|
|
1015
1061
|
this.renderer.addClass(this.el.nativeElement, 'fu-btn');
|
|
1016
|
-
this.renderer.addClass(this.el.nativeElement, 'fu-btn-
|
|
1062
|
+
this.renderer.addClass(this.el.nativeElement, 'fu-btn-filled');
|
|
1017
1063
|
this.renderer.addClass(this.el.nativeElement, `fu-btn-${this.variant}`);
|
|
1018
1064
|
if (this.iconButton) {
|
|
1019
1065
|
this.renderer.setAttribute(this.el.nativeElement, 'icon', 'true');
|
|
@@ -1021,14 +1067,17 @@ class RaisedButtonDirective {
|
|
|
1021
1067
|
if (this.rounded) {
|
|
1022
1068
|
this.renderer.setAttribute(this.el.nativeElement, 'rounded', 'true');
|
|
1023
1069
|
}
|
|
1070
|
+
if (this.compact) {
|
|
1071
|
+
this.renderer.setAttribute(this.el.nativeElement, 'compact', 'true');
|
|
1072
|
+
}
|
|
1024
1073
|
}
|
|
1025
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1026
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "
|
|
1074
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FilledButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1075
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.6", type: FilledButtonDirective, isStandalone: true, selector: "[fu-btn-filled]", inputs: { variant: "variant", iconButton: ["iconButton", "iconButton", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], compact: ["compact", "compact", booleanAttribute] }, ngImport: i0 }); }
|
|
1027
1076
|
}
|
|
1028
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1077
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FilledButtonDirective, decorators: [{
|
|
1029
1078
|
type: Directive,
|
|
1030
1079
|
args: [{
|
|
1031
|
-
selector: '[fu-btn-
|
|
1080
|
+
selector: '[fu-btn-filled]',
|
|
1032
1081
|
}]
|
|
1033
1082
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { variant: [{
|
|
1034
1083
|
type: Input
|
|
@@ -1038,81 +1087,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
|
|
|
1038
1087
|
}], rounded: [{
|
|
1039
1088
|
type: Input,
|
|
1040
1089
|
args: [{ transform: booleanAttribute }]
|
|
1090
|
+
}], compact: [{
|
|
1091
|
+
type: Input,
|
|
1092
|
+
args: [{ transform: booleanAttribute }]
|
|
1041
1093
|
}] } });
|
|
1042
1094
|
|
|
1043
|
-
class
|
|
1044
|
-
constructor(
|
|
1045
|
-
this.
|
|
1046
|
-
this.
|
|
1047
|
-
this.
|
|
1048
|
-
|
|
1049
|
-
|
|
1095
|
+
class ButtonDirective {
|
|
1096
|
+
constructor() {
|
|
1097
|
+
this.variant = input('filled');
|
|
1098
|
+
this.severity = input('primary');
|
|
1099
|
+
this.iconButton = input(false, {
|
|
1100
|
+
transform: booleanAttribute,
|
|
1101
|
+
});
|
|
1102
|
+
this.rounded = input(false, {
|
|
1103
|
+
transform: booleanAttribute,
|
|
1104
|
+
});
|
|
1105
|
+
this.compact = input(false, {
|
|
1106
|
+
transform: booleanAttribute,
|
|
1107
|
+
});
|
|
1108
|
+
this.raised = input(false, {
|
|
1109
|
+
transform: booleanAttribute,
|
|
1110
|
+
});
|
|
1111
|
+
this.el = inject(ElementRef);
|
|
1112
|
+
this.renderer = inject(Renderer2);
|
|
1050
1113
|
}
|
|
1051
1114
|
ngOnInit() {
|
|
1052
1115
|
this.setInitialStyles();
|
|
1053
1116
|
}
|
|
1054
1117
|
setInitialStyles() {
|
|
1055
1118
|
this.renderer.addClass(this.el.nativeElement, 'fu-btn');
|
|
1056
|
-
this.renderer.addClass(this.el.nativeElement,
|
|
1057
|
-
this.renderer.addClass(this.el.nativeElement, `fu-btn-${this.
|
|
1058
|
-
if (this.iconButton) {
|
|
1119
|
+
this.renderer.addClass(this.el.nativeElement, `fu-btn-${this.variant()}`);
|
|
1120
|
+
this.renderer.addClass(this.el.nativeElement, `fu-btn-${this.severity()}`);
|
|
1121
|
+
if (this.iconButton()) {
|
|
1059
1122
|
this.renderer.setAttribute(this.el.nativeElement, 'icon', 'true');
|
|
1060
1123
|
}
|
|
1061
|
-
if (this.rounded) {
|
|
1124
|
+
if (this.rounded()) {
|
|
1062
1125
|
this.renderer.setAttribute(this.el.nativeElement, 'rounded', 'true');
|
|
1063
1126
|
}
|
|
1127
|
+
if (this.compact()) {
|
|
1128
|
+
this.renderer.setAttribute(this.el.nativeElement, 'compact', 'true');
|
|
1129
|
+
}
|
|
1130
|
+
if (this.raised()) {
|
|
1131
|
+
this.renderer.setAttribute(this.el.nativeElement, 'raised', 'true');
|
|
1132
|
+
}
|
|
1064
1133
|
}
|
|
1065
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1066
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
1134
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1135
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: ButtonDirective, isStandalone: true, selector: "[fuButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, iconButton: { classPropertyName: "iconButton", publicName: "iconButton", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1067
1136
|
}
|
|
1068
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1137
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ButtonDirective, decorators: [{
|
|
1069
1138
|
type: Directive,
|
|
1070
1139
|
args: [{
|
|
1071
|
-
selector: '[
|
|
1140
|
+
selector: '[fuButton]',
|
|
1072
1141
|
}]
|
|
1073
|
-
}]
|
|
1074
|
-
type: Input
|
|
1075
|
-
}], iconButton: [{
|
|
1076
|
-
type: Input,
|
|
1077
|
-
args: [{ transform: booleanAttribute }]
|
|
1078
|
-
}], rounded: [{
|
|
1079
|
-
type: Input,
|
|
1080
|
-
args: [{ transform: booleanAttribute }]
|
|
1081
|
-
}] } });
|
|
1142
|
+
}] });
|
|
1082
1143
|
|
|
1083
1144
|
class ButtonModule {
|
|
1084
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1085
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1145
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1146
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: ButtonModule, imports: [OutlinedButtonDirective,
|
|
1086
1147
|
FilledButtonDirective,
|
|
1087
|
-
|
|
1088
|
-
|
|
1148
|
+
TextButtonDirective,
|
|
1149
|
+
ButtonDirective,
|
|
1150
|
+
CommonModule], exports: [OutlinedButtonDirective,
|
|
1089
1151
|
FilledButtonDirective,
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1152
|
+
TextButtonDirective,
|
|
1153
|
+
ButtonDirective] }); }
|
|
1154
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ButtonModule, imports: [CommonModule] }); }
|
|
1093
1155
|
}
|
|
1094
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ButtonModule, decorators: [{
|
|
1095
1157
|
type: NgModule,
|
|
1096
1158
|
args: [{
|
|
1097
|
-
|
|
1159
|
+
imports: [
|
|
1098
1160
|
OutlinedButtonDirective,
|
|
1099
1161
|
FilledButtonDirective,
|
|
1100
|
-
RaisedButtonDirective,
|
|
1101
1162
|
TextButtonDirective,
|
|
1163
|
+
ButtonDirective,
|
|
1164
|
+
CommonModule,
|
|
1102
1165
|
],
|
|
1103
|
-
imports: [CommonModule],
|
|
1104
1166
|
exports: [
|
|
1105
1167
|
OutlinedButtonDirective,
|
|
1106
1168
|
FilledButtonDirective,
|
|
1107
|
-
RaisedButtonDirective,
|
|
1108
1169
|
TextButtonDirective,
|
|
1170
|
+
ButtonDirective,
|
|
1109
1171
|
],
|
|
1110
1172
|
}]
|
|
1111
1173
|
}] });
|
|
1112
1174
|
|
|
1175
|
+
/**
|
|
1176
|
+
* @deprecated This module will be removed in version X. Use `DataTableModule` instead.
|
|
1177
|
+
*/
|
|
1178
|
+
console.warn('DataGridModule is deprecated and will be removed in the next version. Please use DataTableModule instead.');
|
|
1113
1179
|
class DataGridModule {
|
|
1114
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1115
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1180
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1181
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: DataGridModule, declarations: [SortColumnDirective,
|
|
1116
1182
|
GridColumnsDirective,
|
|
1117
1183
|
DataGridComponent,
|
|
1118
1184
|
BodyRowCellComponent,
|
|
@@ -1121,16 +1187,16 @@ class DataGridModule {
|
|
|
1121
1187
|
GridExpandTemplateDirective,
|
|
1122
1188
|
GridBodyTemplateDirective,
|
|
1123
1189
|
RowActionsComponent,
|
|
1124
|
-
KeyMappingPipe], imports: [CommonModule, FormsModule, IconModule, ButtonModule], exports: [DataGridComponent,
|
|
1190
|
+
KeyMappingPipe$1], imports: [CommonModule, FormsModule, IconModule, ButtonModule], exports: [DataGridComponent,
|
|
1125
1191
|
HeadRowCellComponent,
|
|
1126
1192
|
BodyRowCellComponent,
|
|
1127
1193
|
RowActionsComponent,
|
|
1128
1194
|
GridHeaderTemplateDirective,
|
|
1129
1195
|
GridExpandTemplateDirective,
|
|
1130
1196
|
GridBodyTemplateDirective] }); }
|
|
1131
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1197
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataGridModule, providers: [{ provide: DataGridPaginator, useExisting: PaginationService }], imports: [CommonModule, FormsModule, IconModule, ButtonModule] }); }
|
|
1132
1198
|
}
|
|
1133
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1199
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataGridModule, decorators: [{
|
|
1134
1200
|
type: NgModule,
|
|
1135
1201
|
args: [{
|
|
1136
1202
|
declarations: [
|
|
@@ -1143,7 +1209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
|
|
|
1143
1209
|
GridExpandTemplateDirective,
|
|
1144
1210
|
GridBodyTemplateDirective,
|
|
1145
1211
|
RowActionsComponent,
|
|
1146
|
-
KeyMappingPipe,
|
|
1212
|
+
KeyMappingPipe$1,
|
|
1147
1213
|
],
|
|
1148
1214
|
imports: [CommonModule, FormsModule, IconModule, ButtonModule],
|
|
1149
1215
|
exports: [
|
|
@@ -1159,6 +1225,822 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
|
|
|
1159
1225
|
}]
|
|
1160
1226
|
}] });
|
|
1161
1227
|
|
|
1228
|
+
class TableUtilityService {
|
|
1229
|
+
constructor() {
|
|
1230
|
+
this.headerTexts = [];
|
|
1231
|
+
this.headerCount = signal(0);
|
|
1232
|
+
this.isLoading = signal(false);
|
|
1233
|
+
this.sortCellIndex = signal(-1);
|
|
1234
|
+
}
|
|
1235
|
+
setSortCellIndex(index) {
|
|
1236
|
+
this.sortCellIndex.set(index);
|
|
1237
|
+
}
|
|
1238
|
+
setHeaderText(index, text) {
|
|
1239
|
+
this.headerTexts[index] = text;
|
|
1240
|
+
}
|
|
1241
|
+
getHeaderText(index) {
|
|
1242
|
+
return this.headerTexts[index];
|
|
1243
|
+
}
|
|
1244
|
+
clearHeaderText() {
|
|
1245
|
+
this.headerTexts = [];
|
|
1246
|
+
}
|
|
1247
|
+
setColumnCount() {
|
|
1248
|
+
this.headerCount.update(count => count + 1);
|
|
1249
|
+
}
|
|
1250
|
+
resetColumnCount() {
|
|
1251
|
+
this.headerCount.set(0);
|
|
1252
|
+
}
|
|
1253
|
+
setIsLoading(loading) {
|
|
1254
|
+
this.isLoading.set(loading);
|
|
1255
|
+
}
|
|
1256
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableUtilityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1257
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableUtilityService, providedIn: 'root' }); }
|
|
1258
|
+
}
|
|
1259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableUtilityService, decorators: [{
|
|
1260
|
+
type: Injectable,
|
|
1261
|
+
args: [{
|
|
1262
|
+
providedIn: 'root',
|
|
1263
|
+
}]
|
|
1264
|
+
}] });
|
|
1265
|
+
|
|
1266
|
+
class TableStorageService {
|
|
1267
|
+
constructor() {
|
|
1268
|
+
this.storageState = signal({
|
|
1269
|
+
currentPage: 0,
|
|
1270
|
+
pageSize: 5,
|
|
1271
|
+
sortKey: '',
|
|
1272
|
+
sortDirection: '',
|
|
1273
|
+
searchText: '',
|
|
1274
|
+
});
|
|
1275
|
+
this.localStorageKey = signal('');
|
|
1276
|
+
this.currentPage = computed(() => this.storageState().currentPage);
|
|
1277
|
+
this.pageSize = computed(() => this.storageState().pageSize);
|
|
1278
|
+
this.sortKey = computed(() => this.storageState().sortKey);
|
|
1279
|
+
this.sortDirection = computed(() => this.storageState().sortDirection);
|
|
1280
|
+
this.searchText = computed(() => this.storageState().searchText);
|
|
1281
|
+
this.storageStateEffect = effect(() => {
|
|
1282
|
+
if (this.localStorageKey()) {
|
|
1283
|
+
const state = this.storageState();
|
|
1284
|
+
this.updateLocalStorage(state);
|
|
1285
|
+
}
|
|
1286
|
+
});
|
|
1287
|
+
}
|
|
1288
|
+
setCurrentPage(currentPage) {
|
|
1289
|
+
this.storageState.update(state => ({
|
|
1290
|
+
...state,
|
|
1291
|
+
currentPage,
|
|
1292
|
+
}));
|
|
1293
|
+
}
|
|
1294
|
+
setPageSize(pageSize) {
|
|
1295
|
+
this.storageState.update(state => ({
|
|
1296
|
+
...state,
|
|
1297
|
+
pageSize,
|
|
1298
|
+
}));
|
|
1299
|
+
}
|
|
1300
|
+
setSortKey(sortKey) {
|
|
1301
|
+
this.storageState.update(state => ({
|
|
1302
|
+
...state,
|
|
1303
|
+
sortKey,
|
|
1304
|
+
}));
|
|
1305
|
+
}
|
|
1306
|
+
setSortDirection(sortDirection) {
|
|
1307
|
+
this.storageState.update(state => ({
|
|
1308
|
+
...state,
|
|
1309
|
+
sortDirection,
|
|
1310
|
+
}));
|
|
1311
|
+
}
|
|
1312
|
+
setSearchText(searchText) {
|
|
1313
|
+
this.storageState.update(state => ({
|
|
1314
|
+
...state,
|
|
1315
|
+
searchText,
|
|
1316
|
+
}));
|
|
1317
|
+
}
|
|
1318
|
+
setLocalStorageKey(key) {
|
|
1319
|
+
const storedValues = window.localStorage.getItem(key);
|
|
1320
|
+
if (storedValues && key) {
|
|
1321
|
+
this.storageState.set(JSON.parse(storedValues));
|
|
1322
|
+
}
|
|
1323
|
+
this.localStorageKey.set(key);
|
|
1324
|
+
}
|
|
1325
|
+
updateLocalStorage(state) {
|
|
1326
|
+
window.localStorage.setItem(this.localStorageKey(), JSON.stringify(state));
|
|
1327
|
+
}
|
|
1328
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1329
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableStorageService, providedIn: 'root' }); }
|
|
1330
|
+
}
|
|
1331
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableStorageService, decorators: [{
|
|
1332
|
+
type: Injectable,
|
|
1333
|
+
args: [{
|
|
1334
|
+
providedIn: 'root',
|
|
1335
|
+
}]
|
|
1336
|
+
}] });
|
|
1337
|
+
|
|
1338
|
+
class TableIntlService {
|
|
1339
|
+
constructor() {
|
|
1340
|
+
this.searchPlaceholder = signal('Search...');
|
|
1341
|
+
this.pageSizeLabel = signal('Page size');
|
|
1342
|
+
this.noRecordsText = signal('No records found.');
|
|
1343
|
+
this.entriesLabel = (first, last, total) => `${first} to ${last} of ${total} entries`;
|
|
1344
|
+
}
|
|
1345
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableIntlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1346
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableIntlService, providedIn: 'root' }); }
|
|
1347
|
+
}
|
|
1348
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableIntlService, decorators: [{
|
|
1349
|
+
type: Injectable,
|
|
1350
|
+
args: [{
|
|
1351
|
+
providedIn: 'root',
|
|
1352
|
+
}]
|
|
1353
|
+
}] });
|
|
1354
|
+
|
|
1355
|
+
class TableEditService {
|
|
1356
|
+
constructor() {
|
|
1357
|
+
this.editIndex = signal(null);
|
|
1358
|
+
this.editValues = signal({});
|
|
1359
|
+
}
|
|
1360
|
+
startEditing(rowIndex) {
|
|
1361
|
+
this.editValues.set({});
|
|
1362
|
+
this.editIndex.set(rowIndex);
|
|
1363
|
+
}
|
|
1364
|
+
stopEditing() {
|
|
1365
|
+
this.editIndex.set(null);
|
|
1366
|
+
}
|
|
1367
|
+
updateEditValues(key, value) {
|
|
1368
|
+
this.editValues.update(values => ({
|
|
1369
|
+
...values,
|
|
1370
|
+
[key]: value,
|
|
1371
|
+
}));
|
|
1372
|
+
}
|
|
1373
|
+
resetEditValues() {
|
|
1374
|
+
this.editValues.set({});
|
|
1375
|
+
}
|
|
1376
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableEditService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1377
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableEditService, providedIn: 'root' }); }
|
|
1378
|
+
}
|
|
1379
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableEditService, decorators: [{
|
|
1380
|
+
type: Injectable,
|
|
1381
|
+
args: [{
|
|
1382
|
+
providedIn: 'root',
|
|
1383
|
+
}]
|
|
1384
|
+
}] });
|
|
1385
|
+
|
|
1386
|
+
class TablePaginatorComponent {
|
|
1387
|
+
constructor() {
|
|
1388
|
+
this.pageSizeOptions = input([]);
|
|
1389
|
+
this.quickPageJump = input(false);
|
|
1390
|
+
this.dataLenght = input(0);
|
|
1391
|
+
this.tableEditService = inject(TableEditService);
|
|
1392
|
+
this.tableStorageService = inject(TableStorageService);
|
|
1393
|
+
this.tableIntl = inject(TableIntlService);
|
|
1394
|
+
this.pageSizeLabel = this.tableIntl.pageSizeLabel;
|
|
1395
|
+
this.pageSize = this.tableStorageService.pageSize;
|
|
1396
|
+
this.currentPage = this.tableStorageService.currentPage;
|
|
1397
|
+
this.searchText = this.tableStorageService.searchText;
|
|
1398
|
+
this.first = computed(() => this.currentPage() * this.pageSize() + 1);
|
|
1399
|
+
this.last = computed(() => Math.min((this.currentPage() + 1) * this.pageSize(), this.dataLenght()));
|
|
1400
|
+
this.totalPages = computed(() => Math.ceil(this.dataLenght() / this.pageSize()));
|
|
1401
|
+
this.totalItems = computed(() => this.dataLenght());
|
|
1402
|
+
this.entriesLabel = computed(() => this.tableIntl.entriesLabel(this.first(), this.last(), this.totalItems()));
|
|
1403
|
+
}
|
|
1404
|
+
goToPage(page) {
|
|
1405
|
+
if (page < 0 || page > this.totalPages()) {
|
|
1406
|
+
return;
|
|
1407
|
+
}
|
|
1408
|
+
this.stopEditing();
|
|
1409
|
+
this.tableStorageService.setCurrentPage(page);
|
|
1410
|
+
}
|
|
1411
|
+
changePageSize(event) {
|
|
1412
|
+
const pageSize = Number(event.target.value);
|
|
1413
|
+
this.tableStorageService.setCurrentPage(0);
|
|
1414
|
+
this.tableStorageService.setPageSize(pageSize);
|
|
1415
|
+
this.stopEditing();
|
|
1416
|
+
}
|
|
1417
|
+
jumpToPage(input) {
|
|
1418
|
+
const value = parseInt(input.value, 10);
|
|
1419
|
+
const min = parseInt(input.min, 10);
|
|
1420
|
+
const max = parseInt(input.max, 10);
|
|
1421
|
+
if (value < min) {
|
|
1422
|
+
input.value = min.toString();
|
|
1423
|
+
}
|
|
1424
|
+
else if (value > max) {
|
|
1425
|
+
input.value = max.toString();
|
|
1426
|
+
}
|
|
1427
|
+
this.stopEditing();
|
|
1428
|
+
this.tableStorageService.setCurrentPage(parseInt(input.value, 10) - 1);
|
|
1429
|
+
}
|
|
1430
|
+
stopEditing() {
|
|
1431
|
+
if (this.tableEditService.editIndex()) {
|
|
1432
|
+
this.tableEditService.stopEditing();
|
|
1433
|
+
}
|
|
1434
|
+
}
|
|
1435
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TablePaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1436
|
+
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 (change)=\"jumpToPage(pageInput)\"\r\n [disabled]=\"totalPages() === 0\"\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;width:22px;text-align:center;background-color:inherit;color:inherit;border:1px solid var(--fu-primary-color);border-radius:4px}.fu-jump-to-page input:focus{outline:1px solid var(--fu-primary-color)}.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 }); }
|
|
1437
|
+
}
|
|
1438
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TablePaginatorComponent, decorators: [{
|
|
1439
|
+
type: Component,
|
|
1440
|
+
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 (change)=\"jumpToPage(pageInput)\"\r\n [disabled]=\"totalPages() === 0\"\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;width:22px;text-align:center;background-color:inherit;color:inherit;border:1px solid var(--fu-primary-color);border-radius:4px}.fu-jump-to-page input:focus{outline:1px solid var(--fu-primary-color)}.dark option{background-color:var(--fu-table-bg-color);color:#fff}\n"] }]
|
|
1441
|
+
}] });
|
|
1442
|
+
|
|
1443
|
+
class BodyTemplateDirective {
|
|
1444
|
+
constructor() {
|
|
1445
|
+
this.dataSource = input([], { alias: 'fuBodyTemplate' });
|
|
1446
|
+
}
|
|
1447
|
+
static ngTemplateContextGuard(dir, ctx) {
|
|
1448
|
+
return true;
|
|
1449
|
+
}
|
|
1450
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BodyTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1451
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: BodyTemplateDirective, isStandalone: true, selector: "[fuBodyTemplate]", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "fuBodyTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1452
|
+
}
|
|
1453
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BodyTemplateDirective, decorators: [{
|
|
1454
|
+
type: Directive,
|
|
1455
|
+
args: [{
|
|
1456
|
+
selector: '[fuBodyTemplate]',
|
|
1457
|
+
}]
|
|
1458
|
+
}] });
|
|
1459
|
+
|
|
1460
|
+
class ExpandTemplateDirective {
|
|
1461
|
+
constructor() {
|
|
1462
|
+
this.dataSource = input([], { alias: 'fuExpandTemplate' });
|
|
1463
|
+
}
|
|
1464
|
+
static ngTemplateContextGuard(dir, ctx) {
|
|
1465
|
+
return true;
|
|
1466
|
+
}
|
|
1467
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ExpandTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1468
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: ExpandTemplateDirective, isStandalone: true, selector: "[fuExpandTemplate]", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "fuExpandTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1469
|
+
}
|
|
1470
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ExpandTemplateDirective, decorators: [{
|
|
1471
|
+
type: Directive,
|
|
1472
|
+
args: [{
|
|
1473
|
+
selector: '[fuExpandTemplate]',
|
|
1474
|
+
}]
|
|
1475
|
+
}] });
|
|
1476
|
+
|
|
1477
|
+
class HeaderTemplateDirective {
|
|
1478
|
+
constructor() {
|
|
1479
|
+
this.dataSource = input([], { alias: 'fuHeaderTemplate' });
|
|
1480
|
+
}
|
|
1481
|
+
static ngTemplateContextGuard(dir, ctx) {
|
|
1482
|
+
return true;
|
|
1483
|
+
}
|
|
1484
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: HeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1485
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: HeaderTemplateDirective, isStandalone: true, selector: "[fuHeaderTemplate]", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "fuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1486
|
+
}
|
|
1487
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
|
|
1488
|
+
type: Directive,
|
|
1489
|
+
args: [{
|
|
1490
|
+
selector: '[fuHeaderTemplate]',
|
|
1491
|
+
}]
|
|
1492
|
+
}] });
|
|
1493
|
+
|
|
1494
|
+
class KeyMappingPipe {
|
|
1495
|
+
transform(value) {
|
|
1496
|
+
if (!value || typeof value !== 'object') {
|
|
1497
|
+
return value;
|
|
1498
|
+
}
|
|
1499
|
+
const mappedObject = {};
|
|
1500
|
+
Object.keys(value).forEach(key => {
|
|
1501
|
+
mappedObject[key] = key;
|
|
1502
|
+
});
|
|
1503
|
+
return mappedObject;
|
|
1504
|
+
}
|
|
1505
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: KeyMappingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1506
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: KeyMappingPipe, isStandalone: true, name: "keyMapping" }); }
|
|
1507
|
+
}
|
|
1508
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: KeyMappingPipe, decorators: [{
|
|
1509
|
+
type: Pipe,
|
|
1510
|
+
args: [{
|
|
1511
|
+
name: 'keyMapping',
|
|
1512
|
+
}]
|
|
1513
|
+
}] });
|
|
1514
|
+
|
|
1515
|
+
class TbodyCellComponent {
|
|
1516
|
+
constructor() {
|
|
1517
|
+
this.cellValue = input(undefined);
|
|
1518
|
+
this.editKey = input('');
|
|
1519
|
+
this.headerText = signal('');
|
|
1520
|
+
this.rowIndex = signal(-1);
|
|
1521
|
+
this.cellValueType = computed(() => typeof this.cellValue());
|
|
1522
|
+
this.isEditing = computed(() => this.rowIndex() === this.tableEditService.editIndex() && !!this.editKey());
|
|
1523
|
+
this.tableStorageService = inject(TableStorageService);
|
|
1524
|
+
this.tableUtilityService = inject(TableUtilityService);
|
|
1525
|
+
this.tableEditService = inject(TableEditService);
|
|
1526
|
+
this.elementRef = inject(ElementRef);
|
|
1527
|
+
this.isLoading = this.tableUtilityService.isLoading;
|
|
1528
|
+
this.searchText = this.tableStorageService.searchText;
|
|
1529
|
+
this.highLightedText = computed(() => this.highlightText());
|
|
1530
|
+
this.sortCell = computed(() => this.tableUtilityService.sortCellIndex() === this.cellIndex());
|
|
1531
|
+
this.cellIndex = signal(-1);
|
|
1532
|
+
}
|
|
1533
|
+
ngOnInit() {
|
|
1534
|
+
const rowIndex = this.getRowIndex();
|
|
1535
|
+
this.rowIndex.set(rowIndex);
|
|
1536
|
+
const cellIndex = this.getCellIndex();
|
|
1537
|
+
this.cellIndex.set(cellIndex);
|
|
1538
|
+
this.headerText.set(this.tableUtilityService.getHeaderText(cellIndex) || '');
|
|
1539
|
+
}
|
|
1540
|
+
highlightText() {
|
|
1541
|
+
const cellValue = this.cellValue();
|
|
1542
|
+
const searchText = this.searchText();
|
|
1543
|
+
if (!searchText || (!cellValue && cellValue !== 0)) {
|
|
1544
|
+
return cellValue;
|
|
1545
|
+
}
|
|
1546
|
+
const cellValueStr = cellValue.toString();
|
|
1547
|
+
const searchTerm = searchText.toString().toLowerCase();
|
|
1548
|
+
const regex = new RegExp(`(${searchTerm})`, 'gi');
|
|
1549
|
+
return cellValueStr.replace(regex, '<span class="fu-highlight">$1</span>');
|
|
1550
|
+
}
|
|
1551
|
+
onInputChange(value) {
|
|
1552
|
+
this.tableEditService.updateEditValues(this.editKey(), value);
|
|
1553
|
+
}
|
|
1554
|
+
getCellIndex() {
|
|
1555
|
+
const parent = this.elementRef.nativeElement.parentElement;
|
|
1556
|
+
return Array.from(parent.children).indexOf(this.elementRef.nativeElement);
|
|
1557
|
+
}
|
|
1558
|
+
getRowIndex() {
|
|
1559
|
+
const element = this.elementRef.nativeElement.parentElement;
|
|
1560
|
+
const parent = element.parentElement;
|
|
1561
|
+
if (!parent)
|
|
1562
|
+
return -1;
|
|
1563
|
+
const children = Array.from(parent.children);
|
|
1564
|
+
return children.indexOf(element);
|
|
1565
|
+
}
|
|
1566
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TbodyCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1567
|
+
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 [class.editing]=\"isEditing()\">\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 #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 #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-input\">\r\n <input\r\n #editInput\r\n type=\"checkbox\"\r\n [checked]=\"cellValue()\"\r\n (change)=\"onInputChange(editInput.checked)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @switch (this.cellValueType()) {\r\n @case ('boolean') {\r\n <span class=\"fu-cell-text\" [style.display]=\"'flex'\">\r\n @if (cellValue()) {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\"\r\n height=\"18\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n stroke=\"currentColor\"\r\n d=\"M9 16.17L5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41z\"\r\n />\r\n </svg>\r\n }\r\n </span>\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>div.editing{padding:0 4px}@media (max-width: 900px){fu-tbody-cell>div.editing{padding:0 8px}}fu-tbody-cell input{width:100%;padding:4px 3px;background-color:inherit;color:inherit;border:1px solid var(--fu-table-border-color);border-radius:2px;background-color:var(--fu-table-edit-input-bg-color)}fu-tbody-cell input:focus{outline:1px solid var(--fu-table-border-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: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-input{--borderColor: var(--fu-table-text-color);--borderWidth: 2px;margin-left:4px}@media (max-width: 900px){.fu-checkbox-input{margin-left:0}}.fu-checkbox-input label{display:block;max-width:100%;margin:0 auto}.fu-checkbox-input input[type=checkbox]{-webkit-appearance:none;appearance:none;vertical-align:middle;font-size:1.5em;border-radius:.125em;display:inline-block;border:var(--borderWidth) solid var(--borderColor);width:1em;height:1em;position:relative;cursor:pointer}.fu-checkbox-input input[type=checkbox]:before,.fu-checkbox-input input[type=checkbox]:after{content:\"\";position:absolute;background:var(--borderColor);width:calc(var(--borderWidth) * 3);height:var(--borderWidth);top:48%;left:13%;transform-origin:left center}.fu-checkbox-input input[type=checkbox]:before{transform:rotate(45deg) translate(calc(var(--borderWidth) / -3),calc(var(--borderWidth) / -3)) scaleX(0)}.fu-checkbox-input input[type=checkbox]:after{width:calc(var(--borderWidth) * 7);transform:rotate(-45deg) translateY(calc(var(--borderWidth) * 3)) scaleX(0);transform-origin:left center}.fu-checkbox-input input[type=checkbox]:checked:before{transform:rotate(45deg) translate(calc(var(--borderWidth) / 3),calc(var(--borderWidth) / -3)) scaleX(1);border-radius:1px}.fu-checkbox-input input[type=checkbox]:checked:after{width:calc(var(--borderWidth) * 6);transform:rotate(-45deg) translateY(calc(var(--borderWidth) * 3)) scaleX(1);border-radius:1px}.fu-checkbox-input input[type=checkbox]:focus{outline:calc(var(--borderWidth) / 2) dotted rgba(0,0,0,.25)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1568
|
+
}
|
|
1569
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TbodyCellComponent, decorators: [{
|
|
1570
|
+
type: Component,
|
|
1571
|
+
args: [{ selector: 'fu-tbody-cell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1572
|
+
'[attr.role]': '"cell"',
|
|
1573
|
+
'[class.sorting]': 'sortCell()',
|
|
1574
|
+
'[class.loading]': 'isLoading()',
|
|
1575
|
+
}, template: "<div [class.editing]=\"isEditing()\">\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 #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 #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-input\">\r\n <input\r\n #editInput\r\n type=\"checkbox\"\r\n [checked]=\"cellValue()\"\r\n (change)=\"onInputChange(editInput.checked)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @switch (this.cellValueType()) {\r\n @case ('boolean') {\r\n <span class=\"fu-cell-text\" [style.display]=\"'flex'\">\r\n @if (cellValue()) {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\"\r\n height=\"18\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n stroke=\"currentColor\"\r\n d=\"M9 16.17L5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41z\"\r\n />\r\n </svg>\r\n }\r\n </span>\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>div.editing{padding:0 4px}@media (max-width: 900px){fu-tbody-cell>div.editing{padding:0 8px}}fu-tbody-cell input{width:100%;padding:4px 3px;background-color:inherit;color:inherit;border:1px solid var(--fu-table-border-color);border-radius:2px;background-color:var(--fu-table-edit-input-bg-color)}fu-tbody-cell input:focus{outline:1px solid var(--fu-table-border-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: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-input{--borderColor: var(--fu-table-text-color);--borderWidth: 2px;margin-left:4px}@media (max-width: 900px){.fu-checkbox-input{margin-left:0}}.fu-checkbox-input label{display:block;max-width:100%;margin:0 auto}.fu-checkbox-input input[type=checkbox]{-webkit-appearance:none;appearance:none;vertical-align:middle;font-size:1.5em;border-radius:.125em;display:inline-block;border:var(--borderWidth) solid var(--borderColor);width:1em;height:1em;position:relative;cursor:pointer}.fu-checkbox-input input[type=checkbox]:before,.fu-checkbox-input input[type=checkbox]:after{content:\"\";position:absolute;background:var(--borderColor);width:calc(var(--borderWidth) * 3);height:var(--borderWidth);top:48%;left:13%;transform-origin:left center}.fu-checkbox-input input[type=checkbox]:before{transform:rotate(45deg) translate(calc(var(--borderWidth) / -3),calc(var(--borderWidth) / -3)) scaleX(0)}.fu-checkbox-input input[type=checkbox]:after{width:calc(var(--borderWidth) * 7);transform:rotate(-45deg) translateY(calc(var(--borderWidth) * 3)) scaleX(0);transform-origin:left center}.fu-checkbox-input input[type=checkbox]:checked:before{transform:rotate(45deg) translate(calc(var(--borderWidth) / 3),calc(var(--borderWidth) / -3)) scaleX(1);border-radius:1px}.fu-checkbox-input input[type=checkbox]:checked:after{width:calc(var(--borderWidth) * 6);transform:rotate(-45deg) translateY(calc(var(--borderWidth) * 3)) scaleX(1);border-radius:1px}.fu-checkbox-input input[type=checkbox]:focus{outline:calc(var(--borderWidth) / 2) dotted rgba(0,0,0,.25)}\n"] }]
|
|
1576
|
+
}] });
|
|
1577
|
+
|
|
1578
|
+
class PopupTemplateDirective {
|
|
1579
|
+
constructor() {
|
|
1580
|
+
this.dataSource = input([], { alias: 'fuPopupTemplate' });
|
|
1581
|
+
}
|
|
1582
|
+
static ngTemplateContextGuard(dir, ctx) {
|
|
1583
|
+
return true;
|
|
1584
|
+
}
|
|
1585
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PopupTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1586
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: PopupTemplateDirective, isStandalone: true, selector: "[fuPopupTemplate]", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "fuPopupTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1587
|
+
}
|
|
1588
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PopupTemplateDirective, decorators: [{
|
|
1589
|
+
type: Directive,
|
|
1590
|
+
args: [{
|
|
1591
|
+
selector: '[fuPopupTemplate]',
|
|
1592
|
+
}]
|
|
1593
|
+
}] });
|
|
1594
|
+
|
|
1595
|
+
class TableFilterComponent {
|
|
1596
|
+
constructor() {
|
|
1597
|
+
this.title = input();
|
|
1598
|
+
this.tableStorageService = inject(TableStorageService);
|
|
1599
|
+
this.tableIntl = inject(TableIntlService);
|
|
1600
|
+
this.placeholder = this.tableIntl.searchPlaceholder;
|
|
1601
|
+
this.searchText = this.tableStorageService.searchText;
|
|
1602
|
+
}
|
|
1603
|
+
resetSearch() {
|
|
1604
|
+
this.tableStorageService.setSearchText('');
|
|
1605
|
+
this.tableStorageService.setCurrentPage(0);
|
|
1606
|
+
}
|
|
1607
|
+
searchFilter(text) {
|
|
1608
|
+
this.tableStorageService.setSearchText(text);
|
|
1609
|
+
this.tableStorageService.setCurrentPage(0);
|
|
1610
|
+
}
|
|
1611
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1612
|
+
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 severity=\"danger\"\r\n variant=\"text\"\r\n class=\"fu-table-clear-button\"\r\n (click)=\"resetSearch()\"\r\n >\r\n <fu-icon color=\"gray\" size=\"20px\" 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 }); }
|
|
1613
|
+
}
|
|
1614
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableFilterComponent, decorators: [{
|
|
1615
|
+
type: Component,
|
|
1616
|
+
args: [{ selector: 'fu-table-filter', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [IconModule, ButtonModule], 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 severity=\"danger\"\r\n variant=\"text\"\r\n class=\"fu-table-clear-button\"\r\n (click)=\"resetSearch()\"\r\n >\r\n <fu-icon color=\"gray\" size=\"20px\" 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"] }]
|
|
1617
|
+
}] });
|
|
1618
|
+
|
|
1619
|
+
class TableComponent {
|
|
1620
|
+
constructor() {
|
|
1621
|
+
this.dataSource = [];
|
|
1622
|
+
this.localStorageKey = '';
|
|
1623
|
+
this.tableLayout = input('auto');
|
|
1624
|
+
this.firstPageOnInit = input(false);
|
|
1625
|
+
this.pageSizeOptions = input([5, 10, 15]);
|
|
1626
|
+
this.isLoading = input(false);
|
|
1627
|
+
this.totalCount = input();
|
|
1628
|
+
this.serverPagination = input(false);
|
|
1629
|
+
this.stripedRows = input(true);
|
|
1630
|
+
this.expandable = input(false);
|
|
1631
|
+
this.showFilter = input(false);
|
|
1632
|
+
this.showPaginator = input(true);
|
|
1633
|
+
this.quickPageJump = input(true);
|
|
1634
|
+
this.popupOffset = input(0);
|
|
1635
|
+
this.tableTitle = input();
|
|
1636
|
+
this.setsPageZero$ = input();
|
|
1637
|
+
this.expandIndex = model(null);
|
|
1638
|
+
this.noRecordsTemplate = contentChild('noRecordsTemplate');
|
|
1639
|
+
this.footerTemplate = contentChild('footerTemplate');
|
|
1640
|
+
this.popupTemplate = contentChild(PopupTemplateDirective, {
|
|
1641
|
+
read: TemplateRef,
|
|
1642
|
+
});
|
|
1643
|
+
this.expandTemplate = contentChild(ExpandTemplateDirective, {
|
|
1644
|
+
read: TemplateRef,
|
|
1645
|
+
});
|
|
1646
|
+
this.bodyTemplate = contentChild.required(BodyTemplateDirective, {
|
|
1647
|
+
read: TemplateRef,
|
|
1648
|
+
});
|
|
1649
|
+
this.headerTemplate = contentChild.required(HeaderTemplateDirective, {
|
|
1650
|
+
read: TemplateRef,
|
|
1651
|
+
});
|
|
1652
|
+
this.isInitLoad = signal(true);
|
|
1653
|
+
this.filteredData = signal([]);
|
|
1654
|
+
this.sortedData = [];
|
|
1655
|
+
this.destroyRef = inject(DestroyRef);
|
|
1656
|
+
this.tableIntl = inject(TableIntlService);
|
|
1657
|
+
this.tableUtilityService = inject(TableUtilityService);
|
|
1658
|
+
this.tableStorageService = inject(TableStorageService);
|
|
1659
|
+
this.noRecordsText = this.tableIntl.noRecordsText;
|
|
1660
|
+
this.columnCount = this.tableUtilityService.headerCount;
|
|
1661
|
+
this.pageSize = this.tableStorageService.pageSize;
|
|
1662
|
+
this.currentPage = this.tableStorageService.currentPage;
|
|
1663
|
+
this.searchText = this.tableStorageService.searchText;
|
|
1664
|
+
this.sortColumn = this.tableStorageService.sortKey;
|
|
1665
|
+
this.sortDirection = this.tableStorageService.sortDirection;
|
|
1666
|
+
this.totalItems = computed(() => this.totalCount() || this.filteredData().length);
|
|
1667
|
+
this.expandedRowIndex = null;
|
|
1668
|
+
this.arrayFromSize = computed(() => Array.from({ length: this.pageSize() }));
|
|
1669
|
+
this.arrayFromCols = computed(() => Array.from({ length: this.expandColumnSpan() }));
|
|
1670
|
+
this.expandColumnSpan = computed(() => {
|
|
1671
|
+
if (this.expandable()) {
|
|
1672
|
+
return this.columnCount() + 1;
|
|
1673
|
+
}
|
|
1674
|
+
else {
|
|
1675
|
+
return this.columnCount();
|
|
1676
|
+
}
|
|
1677
|
+
});
|
|
1678
|
+
this.hoveredRow = signal(null);
|
|
1679
|
+
this.popupPosition = signal({ top: 0, right: 0 });
|
|
1680
|
+
this.isMobile = signal(false);
|
|
1681
|
+
this.hidePopupTimeout = undefined;
|
|
1682
|
+
this.isPopupReady = computed(() => this.popupTemplate() && !this.isMobile() && !this.isLoading());
|
|
1683
|
+
this.tableActions = output();
|
|
1684
|
+
this.selectRowAction = new EventEmitter();
|
|
1685
|
+
this.tableActionsEffect = effect(() => {
|
|
1686
|
+
if (this.serverPagination()) {
|
|
1687
|
+
this.emitTableActions();
|
|
1688
|
+
}
|
|
1689
|
+
else {
|
|
1690
|
+
this.toggleSort();
|
|
1691
|
+
}
|
|
1692
|
+
});
|
|
1693
|
+
this.loadingEffect = effect(() => {
|
|
1694
|
+
this.tableUtilityService.setIsLoading(this.isLoading());
|
|
1695
|
+
this.watchInitLoad();
|
|
1696
|
+
untracked(() => {
|
|
1697
|
+
this.expandedRowIndex = null;
|
|
1698
|
+
this.expandIndex.set(null);
|
|
1699
|
+
});
|
|
1700
|
+
});
|
|
1701
|
+
}
|
|
1702
|
+
ngOnChanges(changes) {
|
|
1703
|
+
if (changes['localStorageKey']) {
|
|
1704
|
+
this.tableStorageService.setLocalStorageKey(this.localStorageKey);
|
|
1705
|
+
}
|
|
1706
|
+
if (changes['dataSource']) {
|
|
1707
|
+
if (this.serverPagination()) {
|
|
1708
|
+
this.loadServerData();
|
|
1709
|
+
}
|
|
1710
|
+
else {
|
|
1711
|
+
this.filteredData.set([...this.dataSource]);
|
|
1712
|
+
}
|
|
1713
|
+
}
|
|
1714
|
+
if (this.firstPageOnInit()) {
|
|
1715
|
+
this.tableStorageService.setCurrentPage(0);
|
|
1716
|
+
}
|
|
1717
|
+
}
|
|
1718
|
+
ngOnInit() {
|
|
1719
|
+
this.isMobile.set(window.innerWidth < 900);
|
|
1720
|
+
this.setsPageZero$()
|
|
1721
|
+
?.pipe(takeUntilDestroyed(this.destroyRef))
|
|
1722
|
+
.subscribe(() => {
|
|
1723
|
+
this.tableStorageService.setCurrentPage(0);
|
|
1724
|
+
});
|
|
1725
|
+
}
|
|
1726
|
+
onResize() {
|
|
1727
|
+
const mobile = window.innerWidth < 900;
|
|
1728
|
+
this.isMobile.set(mobile);
|
|
1729
|
+
}
|
|
1730
|
+
toggleRow(row, index = 0) {
|
|
1731
|
+
if (this.isLoading())
|
|
1732
|
+
return;
|
|
1733
|
+
if (this.expandable()) {
|
|
1734
|
+
if (this.expandedRowIndex === index) {
|
|
1735
|
+
this.expandedRowIndex = null;
|
|
1736
|
+
}
|
|
1737
|
+
else {
|
|
1738
|
+
this.expandedRowIndex = index;
|
|
1739
|
+
}
|
|
1740
|
+
return;
|
|
1741
|
+
}
|
|
1742
|
+
this.selectRowAction.emit(row);
|
|
1743
|
+
}
|
|
1744
|
+
filterData() {
|
|
1745
|
+
const filteredData = this.dataSource.filter(item => Object.values(item).some((value) => {
|
|
1746
|
+
if (typeof value !== 'string' && typeof value !== 'number') {
|
|
1747
|
+
return;
|
|
1748
|
+
}
|
|
1749
|
+
return value
|
|
1750
|
+
.toString()
|
|
1751
|
+
.toLowerCase()
|
|
1752
|
+
.includes(this.searchText().toLowerCase());
|
|
1753
|
+
}));
|
|
1754
|
+
this.filteredData.set(filteredData);
|
|
1755
|
+
}
|
|
1756
|
+
sortData() {
|
|
1757
|
+
if (!this.sortDirection()) {
|
|
1758
|
+
this.filterData();
|
|
1759
|
+
return;
|
|
1760
|
+
}
|
|
1761
|
+
this.filterData();
|
|
1762
|
+
this.filteredData().sort((a, b) => {
|
|
1763
|
+
const valueA = a[this.sortColumn()];
|
|
1764
|
+
const valueB = b[this.sortColumn()];
|
|
1765
|
+
if (valueA < valueB)
|
|
1766
|
+
return this.sortDirection() === 'asc' ? -1 : 1;
|
|
1767
|
+
if (valueA > valueB)
|
|
1768
|
+
return this.sortDirection() === 'asc' ? 1 : -1;
|
|
1769
|
+
return 0;
|
|
1770
|
+
});
|
|
1771
|
+
}
|
|
1772
|
+
paginateData() {
|
|
1773
|
+
this.expandedRowIndex = null;
|
|
1774
|
+
this.expandIndex.set(null);
|
|
1775
|
+
const startIndex = this.currentPage() * this.pageSize();
|
|
1776
|
+
const endIndex = startIndex + this.pageSize();
|
|
1777
|
+
this.sortedData = this.filteredData().slice(startIndex, endIndex);
|
|
1778
|
+
}
|
|
1779
|
+
loadServerData() {
|
|
1780
|
+
this.sortedData = [...this.dataSource];
|
|
1781
|
+
}
|
|
1782
|
+
watchInitLoad() {
|
|
1783
|
+
if (this.isInitLoad()) {
|
|
1784
|
+
this.isInitLoad.set(this.isLoading());
|
|
1785
|
+
}
|
|
1786
|
+
}
|
|
1787
|
+
emitTableActions() {
|
|
1788
|
+
this.tableActions.emit({
|
|
1789
|
+
sortDirection: this.sortDirection(),
|
|
1790
|
+
sortKey: this.sortColumn(),
|
|
1791
|
+
pageSize: this.pageSize(),
|
|
1792
|
+
page: this.currentPage(),
|
|
1793
|
+
});
|
|
1794
|
+
}
|
|
1795
|
+
toggleSort() {
|
|
1796
|
+
this.sortData();
|
|
1797
|
+
this.paginateData();
|
|
1798
|
+
}
|
|
1799
|
+
onRowHover(event, row) {
|
|
1800
|
+
if (!this.isPopupReady())
|
|
1801
|
+
return;
|
|
1802
|
+
clearTimeout(this.hidePopupTimeout);
|
|
1803
|
+
this.hoveredRow.set(row);
|
|
1804
|
+
const rowElement = event.target.closest('tr');
|
|
1805
|
+
if (rowElement) {
|
|
1806
|
+
const rect = rowElement.getBoundingClientRect();
|
|
1807
|
+
this.popupPosition.set({
|
|
1808
|
+
top: rect.top + window.scrollY,
|
|
1809
|
+
right: rect.left + this.popupOffset(),
|
|
1810
|
+
});
|
|
1811
|
+
}
|
|
1812
|
+
}
|
|
1813
|
+
onRowLeave() {
|
|
1814
|
+
if (!this.isPopupReady())
|
|
1815
|
+
return;
|
|
1816
|
+
this.hidePopupTimeout = setTimeout(() => {
|
|
1817
|
+
this.hoveredRow.set(null);
|
|
1818
|
+
}, 100);
|
|
1819
|
+
}
|
|
1820
|
+
onPopupHover() {
|
|
1821
|
+
clearTimeout(this.hidePopupTimeout);
|
|
1822
|
+
}
|
|
1823
|
+
onPopupLeave() {
|
|
1824
|
+
this.hidePopupTimeout = setTimeout(() => {
|
|
1825
|
+
this.hoveredRow.set(null);
|
|
1826
|
+
}, 100);
|
|
1827
|
+
}
|
|
1828
|
+
onExpandHover() {
|
|
1829
|
+
if (!this.isPopupReady())
|
|
1830
|
+
return;
|
|
1831
|
+
this.hoveredRow.set(null);
|
|
1832
|
+
}
|
|
1833
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1834
|
+
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: false, isRequired: true, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: false, isRequired: false, transformFunction: (val) => `fu-table-${val}` }, 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 }, setsPageZero$: { classPropertyName: "setsPageZero$", publicName: "setsPageZero$", 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)" } }, 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() || selectRowAction.observed) {\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.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 } @else if (selectRowAction.observed) {\r\n <td\r\n class=\"fu-expand-cell\"\r\n [attr.data-expand]=\"expandedRowIndex === $index\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"link\" />\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;box-shadow:0 1px 4px #0000005e;font-family:Roboto,sans-serif;font-size:14px;background-color:var(--fu-table-bg-color);color:var(--fu-table-text-color);border-radius:4px}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:last-child{margin-bottom:0}tr{display:block;margin-bottom:8px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}tr.fu-expand-row{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:grid;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}.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 }); }
|
|
1835
|
+
}
|
|
1836
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableComponent, decorators: [{
|
|
1837
|
+
type: Component,
|
|
1838
|
+
args: [{ selector: 'fu-table', imports: [
|
|
1839
|
+
CommonModule,
|
|
1840
|
+
ButtonModule,
|
|
1841
|
+
IconModule,
|
|
1842
|
+
TablePaginatorComponent,
|
|
1843
|
+
TableFilterComponent,
|
|
1844
|
+
TbodyCellComponent,
|
|
1845
|
+
KeyMappingPipe,
|
|
1846
|
+
], 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() || selectRowAction.observed) {\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.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 } @else if (selectRowAction.observed) {\r\n <td\r\n class=\"fu-expand-cell\"\r\n [attr.data-expand]=\"expandedRowIndex === $index\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"link\" />\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;box-shadow:0 1px 4px #0000005e;font-family:Roboto,sans-serif;font-size:14px;background-color:var(--fu-table-bg-color);color:var(--fu-table-text-color);border-radius:4px}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:last-child{margin-bottom:0}tr{display:block;margin-bottom:8px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}tr.fu-expand-row{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:grid;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}.fu-no-records{display:flex;flex-direction:column;justify-content:center;align-items:center;height:180px}.fu-no-records>p{color:#aeadad}\n"] }]
|
|
1847
|
+
}], ctorParameters: () => [], propDecorators: { dataSource: [{
|
|
1848
|
+
type: Input,
|
|
1849
|
+
args: [{ required: true }]
|
|
1850
|
+
}], localStorageKey: [{
|
|
1851
|
+
type: Input,
|
|
1852
|
+
args: [{ transform: (val) => `fu-table-${val}` }]
|
|
1853
|
+
}], selectRowAction: [{
|
|
1854
|
+
type: Output
|
|
1855
|
+
}], onResize: [{
|
|
1856
|
+
type: HostListener,
|
|
1857
|
+
args: ['window:resize', ['$event']]
|
|
1858
|
+
}] } });
|
|
1859
|
+
|
|
1860
|
+
class TableSortService {
|
|
1861
|
+
constructor() {
|
|
1862
|
+
this.tableStorageService = inject(TableStorageService);
|
|
1863
|
+
this.sortKey = this.tableStorageService.sortKey;
|
|
1864
|
+
this.sortDirection = this.tableStorageService.sortDirection;
|
|
1865
|
+
}
|
|
1866
|
+
updateSort(column) {
|
|
1867
|
+
const newDirection = this.sortKey() === column && this.sortDirection() === 'asc'
|
|
1868
|
+
? 'desc'
|
|
1869
|
+
: 'asc';
|
|
1870
|
+
this.tableStorageService.setCurrentPage(0);
|
|
1871
|
+
this.tableStorageService.setSortKey(column);
|
|
1872
|
+
this.tableStorageService.setSortDirection(newDirection);
|
|
1873
|
+
}
|
|
1874
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableSortService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1875
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableSortService, providedIn: 'root' }); }
|
|
1876
|
+
}
|
|
1877
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableSortService, decorators: [{
|
|
1878
|
+
type: Injectable,
|
|
1879
|
+
args: [{
|
|
1880
|
+
providedIn: 'root',
|
|
1881
|
+
}]
|
|
1882
|
+
}] });
|
|
1883
|
+
|
|
1884
|
+
class TheadCellComponent {
|
|
1885
|
+
constructor() {
|
|
1886
|
+
this.headerText = input('');
|
|
1887
|
+
this.sortKey = input('');
|
|
1888
|
+
this.width = input('auto');
|
|
1889
|
+
this.tableStorageService = inject(TableStorageService);
|
|
1890
|
+
this.tableSortService = inject(TableSortService);
|
|
1891
|
+
this.tableUtilityService = inject(TableUtilityService);
|
|
1892
|
+
this.elementRef = inject(ElementRef);
|
|
1893
|
+
this.sortColumn = this.tableStorageService.sortKey;
|
|
1894
|
+
this.sortDirection = this.tableStorageService.sortDirection;
|
|
1895
|
+
this.cellIndex = signal(-1);
|
|
1896
|
+
}
|
|
1897
|
+
ngOnInit() {
|
|
1898
|
+
const index = this.getIndex();
|
|
1899
|
+
this.cellIndex.set(index);
|
|
1900
|
+
this.initSortCell();
|
|
1901
|
+
this.tableUtilityService.setHeaderText(index, this.headerText());
|
|
1902
|
+
this.tableUtilityService.setColumnCount();
|
|
1903
|
+
}
|
|
1904
|
+
toogleSort() {
|
|
1905
|
+
this.tableUtilityService.setSortCellIndex(this.cellIndex());
|
|
1906
|
+
this.tableSortService.updateSort(this.sortKey());
|
|
1907
|
+
}
|
|
1908
|
+
initSortCell() {
|
|
1909
|
+
if (this.sortColumn() === this.sortKey()) {
|
|
1910
|
+
this.tableUtilityService.setSortCellIndex(this.cellIndex());
|
|
1911
|
+
}
|
|
1912
|
+
}
|
|
1913
|
+
getIndex() {
|
|
1914
|
+
const parent = this.elementRef.nativeElement.parentElement;
|
|
1915
|
+
return Array.from(parent.children).indexOf(this.elementRef.nativeElement);
|
|
1916
|
+
}
|
|
1917
|
+
ngOnDestroy() {
|
|
1918
|
+
this.tableUtilityService.resetColumnCount();
|
|
1919
|
+
}
|
|
1920
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TheadCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1921
|
+
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()" } }, 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 }); }
|
|
1922
|
+
}
|
|
1923
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TheadCellComponent, decorators: [{
|
|
1924
|
+
type: Component,
|
|
1925
|
+
args: [{ selector: 'fu-thead-cell', imports: [CommonModule, IconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1926
|
+
'[attr.role]': '"columnheader"',
|
|
1927
|
+
'[style.width]': 'width()',
|
|
1928
|
+
'[class.sorting]': '!!sortKey()',
|
|
1929
|
+
}, 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"] }]
|
|
1930
|
+
}] });
|
|
1931
|
+
|
|
1932
|
+
class TbodyActionsComponent {
|
|
1933
|
+
constructor() {
|
|
1934
|
+
this.editRowData = input();
|
|
1935
|
+
this.tableUtilityService = inject(TableUtilityService);
|
|
1936
|
+
this.tableEditService = inject(TableEditService);
|
|
1937
|
+
this.elementRef = inject(ElementRef);
|
|
1938
|
+
this.isLoading = this.tableUtilityService.isLoading;
|
|
1939
|
+
this.editIndex = this.tableEditService.editIndex;
|
|
1940
|
+
this.rowIndex = signal(-1);
|
|
1941
|
+
this.editSaveAction = new EventEmitter();
|
|
1942
|
+
this.deleteAction = new EventEmitter();
|
|
1943
|
+
this.cancelEditEffect = effect(() => {
|
|
1944
|
+
if (this.isLoading() && this.editIndex() !== null) {
|
|
1945
|
+
this.tableEditService.stopEditing();
|
|
1946
|
+
}
|
|
1947
|
+
});
|
|
1948
|
+
}
|
|
1949
|
+
startEditing(event) {
|
|
1950
|
+
const rowIndex = this.getRowIndex();
|
|
1951
|
+
this.rowIndex.set(rowIndex);
|
|
1952
|
+
this.tableEditService.startEditing(rowIndex);
|
|
1953
|
+
event.stopPropagation();
|
|
1954
|
+
}
|
|
1955
|
+
cancelEditing(event) {
|
|
1956
|
+
this.tableEditService.stopEditing();
|
|
1957
|
+
event.stopPropagation();
|
|
1958
|
+
}
|
|
1959
|
+
saveEditing(event) {
|
|
1960
|
+
this.tableEditService.stopEditing();
|
|
1961
|
+
const editedValues = this.tableEditService.editValues();
|
|
1962
|
+
const updatedRow = { ...this.editRowData(), ...editedValues };
|
|
1963
|
+
this.editSaveAction.emit(updatedRow);
|
|
1964
|
+
this.tableEditService.resetEditValues();
|
|
1965
|
+
event.stopPropagation();
|
|
1966
|
+
}
|
|
1967
|
+
deleteRow(event) {
|
|
1968
|
+
this.deleteAction.emit();
|
|
1969
|
+
event.stopPropagation();
|
|
1970
|
+
}
|
|
1971
|
+
getRowIndex() {
|
|
1972
|
+
const element = this.elementRef.nativeElement.parentElement;
|
|
1973
|
+
const parent = element.parentElement;
|
|
1974
|
+
if (!parent)
|
|
1975
|
+
return -1;
|
|
1976
|
+
const children = Array.from(parent.children);
|
|
1977
|
+
return children.indexOf(element);
|
|
1978
|
+
}
|
|
1979
|
+
ngOnDestroy() {
|
|
1980
|
+
this.tableEditService.stopEditing();
|
|
1981
|
+
}
|
|
1982
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TbodyActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1983
|
+
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\">\r\n @if (editIndex() === rowIndex()) {\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 <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 } @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 }); }
|
|
1984
|
+
}
|
|
1985
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TbodyActionsComponent, decorators: [{
|
|
1986
|
+
type: Component,
|
|
1987
|
+
args: [{ selector: 'fu-tbody-actions', imports: [IconModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1988
|
+
'[attr.role]': '"cell"',
|
|
1989
|
+
}, template: "<div class=\"fu-row-actions\">\r\n @if (editIndex() === rowIndex()) {\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 <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 } @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"] }]
|
|
1990
|
+
}], propDecorators: { editSaveAction: [{
|
|
1991
|
+
type: Output
|
|
1992
|
+
}], deleteAction: [{
|
|
1993
|
+
type: Output
|
|
1994
|
+
}] } });
|
|
1995
|
+
|
|
1996
|
+
class DataTableModule {
|
|
1997
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1998
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: DataTableModule, imports: [TableComponent,
|
|
1999
|
+
TbodyCellComponent,
|
|
2000
|
+
TheadCellComponent,
|
|
2001
|
+
TbodyActionsComponent,
|
|
2002
|
+
BodyTemplateDirective,
|
|
2003
|
+
HeaderTemplateDirective,
|
|
2004
|
+
ExpandTemplateDirective,
|
|
2005
|
+
PopupTemplateDirective], exports: [TableComponent,
|
|
2006
|
+
TbodyCellComponent,
|
|
2007
|
+
TheadCellComponent,
|
|
2008
|
+
TbodyActionsComponent,
|
|
2009
|
+
BodyTemplateDirective,
|
|
2010
|
+
HeaderTemplateDirective,
|
|
2011
|
+
ExpandTemplateDirective,
|
|
2012
|
+
PopupTemplateDirective] }); }
|
|
2013
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataTableModule, imports: [TableComponent,
|
|
2014
|
+
TheadCellComponent,
|
|
2015
|
+
TbodyActionsComponent] }); }
|
|
2016
|
+
}
|
|
2017
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataTableModule, decorators: [{
|
|
2018
|
+
type: NgModule,
|
|
2019
|
+
args: [{
|
|
2020
|
+
declarations: [],
|
|
2021
|
+
imports: [
|
|
2022
|
+
TableComponent,
|
|
2023
|
+
TbodyCellComponent,
|
|
2024
|
+
TheadCellComponent,
|
|
2025
|
+
TbodyActionsComponent,
|
|
2026
|
+
BodyTemplateDirective,
|
|
2027
|
+
HeaderTemplateDirective,
|
|
2028
|
+
ExpandTemplateDirective,
|
|
2029
|
+
PopupTemplateDirective,
|
|
2030
|
+
],
|
|
2031
|
+
exports: [
|
|
2032
|
+
TableComponent,
|
|
2033
|
+
TbodyCellComponent,
|
|
2034
|
+
TheadCellComponent,
|
|
2035
|
+
TbodyActionsComponent,
|
|
2036
|
+
BodyTemplateDirective,
|
|
2037
|
+
HeaderTemplateDirective,
|
|
2038
|
+
ExpandTemplateDirective,
|
|
2039
|
+
PopupTemplateDirective,
|
|
2040
|
+
],
|
|
2041
|
+
}]
|
|
2042
|
+
}] });
|
|
2043
|
+
|
|
1162
2044
|
/*
|
|
1163
2045
|
* Public API Surface of ng-fusion-ui
|
|
1164
2046
|
*/
|
|
@@ -1167,5 +2049,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
|
|
|
1167
2049
|
* Generated bundle index. Do not edit.
|
|
1168
2050
|
*/
|
|
1169
2051
|
|
|
1170
|
-
export { BodyRowCellComponent, ButtonModule, DataGridComponent, DataGridModule, DataGridPaginator, FilledButtonDirective, GridBodyTemplateDirective, GridExpandTemplateDirective, GridHeaderTemplateDirective, HeadRowCellComponent, IconComponent, IconModule, OutlinedButtonDirective,
|
|
2052
|
+
export { BodyRowCellComponent, BodyTemplateDirective, ButtonDirective, ButtonModule, DataGridComponent, DataGridModule, DataGridPaginator, DataTableModule, ExpandTemplateDirective, FilledButtonDirective, GridBodyTemplateDirective, GridExpandTemplateDirective, GridHeaderTemplateDirective, HeadRowCellComponent, HeaderTemplateDirective, IconComponent, IconModule, OutlinedButtonDirective, PopupTemplateDirective, RowActionsComponent, TableComponent, TableFilterComponent, TableIntlService, TablePaginatorComponent, TbodyActionsComponent, TbodyCellComponent, TextButtonDirective, TheadCellComponent };
|
|
1171
2053
|
//# sourceMappingURL=ng-fusion-ui.mjs.map
|