ng-fusion-ui 0.6.21 → 0.6.23
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 +13 -6
- package/fesm2022/ng-fusion-ui.mjs.map +1 -1
- package/lib/icons/icon-names.d.ts +1 -1
- package/lib/icons/icons.d.ts +3 -0
- package/package.json +1 -1
- package/styles/_blue-theme.scss +23 -0
- package/styles/_button-styles.scss +3 -1
- package/styles/_green-theme.scss +35 -0
- package/styles/_table-variables.scss +8 -8
- package/styles/_theme.scss +47 -17
- package/styles/_variables.scss +0 -0
|
@@ -128,6 +128,9 @@ const plusCircle = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
|
128
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
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
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>`;
|
|
131
|
+
const certificate = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M128 136a8 8 0 0 1-8 8H72a8 8 0 0 1 0-16h48a8 8 0 0 1 8 8m-8-40H72a8 8 0 0 0 0 16h48a8 8 0 0 0 0-16m112 65.47V224a8 8 0 0 1-12 7l-24-13.74L172 231a8 8 0 0 1-12-7v-24H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16v30.53a51.88 51.88 0 0 1 0 74.94M160 184v-22.53A52 52 0 0 1 216 76V56H40v128Zm56-12a51.88 51.88 0 0 1-40 0v38.22l16-9.16a8 8 0 0 1 7.94 0l16 9.16Zm16-48a36 36 0 1 0-36 36a36 36 0 0 0 36-36" /></svg>`;
|
|
132
|
+
const elevator = `<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="m7 2l4 4H8v4H6V6H3zm10 8l-4-4h3V2h2v4h3zM7 12h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2m0 2v6h10v-6z" /></svg>`;
|
|
133
|
+
const report = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10 9H6m9.5 2a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5M6 6h3m9 12l-4.5-3l-2.5 2l-5-4" /><path d="M3 20.4V3.6a.6.6 0 0 1 .6-.6h16.8a.6.6 0 0 1 .6.6v16.8a.6.6 0 0 1-.6.6H3.6a.6.6 0 0 1-.6-.6Z" /></g></svg>`;
|
|
131
134
|
|
|
132
135
|
class IconRegistryService {
|
|
133
136
|
constructor(sanitizer) {
|
|
@@ -168,6 +171,9 @@ class IconRegistryService {
|
|
|
168
171
|
this.registerIcon('eye', eye);
|
|
169
172
|
this.registerIcon('chevronRight', chevronRight);
|
|
170
173
|
this.registerIcon('link', link);
|
|
174
|
+
this.registerIcon('certificate', certificate);
|
|
175
|
+
this.registerIcon('report', report);
|
|
176
|
+
this.registerIcon('elevator', elevator);
|
|
171
177
|
}
|
|
172
178
|
registerIcon(name, svg) {
|
|
173
179
|
const safeSvg = this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
@@ -231,11 +237,11 @@ class IconComponent {
|
|
|
231
237
|
}
|
|
232
238
|
}
|
|
233
239
|
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.
|
|
240
|
+
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.1rem);height:var(--fu-icon-size, 1.1rem)}.fu-icon-container{display:inline-block;width:var(--fu-icon-size, 1.1rem);height:var(--fu-icon-size, 1.1rem);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 }); }
|
|
235
241
|
}
|
|
236
242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconComponent, decorators: [{
|
|
237
243
|
type: Component,
|
|
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.
|
|
244
|
+
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.1rem);height:var(--fu-icon-size, 1.1rem)}.fu-icon-container{display:inline-block;width:var(--fu-icon-size, 1.1rem);height:var(--fu-icon-size, 1.1rem);line-height:initial;vertical-align:initial;overflow:hidden}.fu-icon-container svg{width:inherit;height:inherit;vertical-align:inherit}\n"] }]
|
|
239
245
|
}], ctorParameters: () => [{ type: IconRegistryService }, { type: i0.ElementRef }], propDecorators: { classList: [{
|
|
240
246
|
type: HostBinding,
|
|
241
247
|
args: ['class']
|
|
@@ -1902,7 +1908,7 @@ class TableComponent {
|
|
|
1902
1908
|
TableStorageService,
|
|
1903
1909
|
TableSortService,
|
|
1904
1910
|
TableEditService,
|
|
1905
|
-
], queries: [{ propertyName: "noRecordsTemplate", first: true, predicate: ["noRecordsTemplate"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true, isSignal: true }, { propertyName: "popupTemplate", first: true, predicate: PopupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "expandTemplate", first: true, predicate: ExpandTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: BodyTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fu-table-wrapper\" [attr.outlined]=\"variant() === 'outlined'\">\r\n <!-- Search Filter -->\r\n @if (showFilter()) {\r\n <fu-table-filter [title]=\"tableTitle()\" />\r\n } @else if (tableTitle()) {\r\n <div style=\"margin-bottom: 12px\">\r\n <h3>{{ tableTitle() }}</h3>\r\n </div>\r\n }\r\n\r\n <!-- Table -->\r\n <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n <thead [attr.role]=\"'rowgroup'\">\r\n <tr [attr.role]=\"'row'\">\r\n @if (expandable()) {\r\n <th class=\"fu-expand-head\"></th>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate();\r\n context: { $implicit: dataSource()[0] | keyMapping }\r\n \"\r\n />\r\n </tr>\r\n </thead>\r\n\r\n <tbody [attr.role]=\"'rowgroup'\">\r\n @if (isInitLoad()) {\r\n <ng-container *ngTemplateOutlet=\"initLoadTemplate\" />\r\n } @else {\r\n @for (row of sortedData(); track $index; let odd = $odd) {\r\n <tr\r\n [attr.outlined]=\"variant() === 'outlined'\"\r\n [attr.role]=\"'row'\"\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{\r\n striped: stripedRows() && odd,\r\n hoverable: expandable() || selectRowAction.observed,\r\n }\"\r\n (mouseenter)=\"onRowHover($event, row)\"\r\n (mouseleave)=\"onRowLeave()\"\r\n (click)=\"toggleRow(row, $index)\"\r\n >\r\n @if (expandable()) {\r\n <td\r\n class=\"fu-expand-cell\"\r\n [attr.data-expand]=\"expandedRowIndex === $index\"\r\n >\r\n <fu-icon size=\"16px\" iconName=\"chevronRight\" />\r\n </td>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate();\r\n context: {\r\n $implicit: row,\r\n index: $index,\r\n keys: row | keyMapping,\r\n }\r\n \"\r\n />\r\n </tr>\r\n\r\n @if (\r\n (expandable() && expandedRowIndex === $index) ||\r\n expandIndex() === $index\r\n ) {\r\n <tr class=\"fu-expand-row\" (mouseenter)=\"onExpandHover()\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate() || null;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n } @empty {\r\n <tr class=\"fu-empty-row\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n noRecordsTemplate() || defaultNoRecordsTemplate\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n\r\n @if (footerTemplate()) {\r\n <div class=\"fu-table-footer\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n footerTemplate() || null;\r\n context: { $implicit: sortedData() }\r\n \"\r\n />\r\n </div>\r\n }\r\n\r\n @if (showPaginator()) {\r\n <fu-table-paginator\r\n [dataLenght]=\"totalItems()\"\r\n [quickPageJump]=\"quickPageJump()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n />\r\n }\r\n</div>\r\n\r\n@if (hoveredRow()) {\r\n <div\r\n class=\"fu-action-popup\"\r\n [style.top.px]=\"popupPosition().top\"\r\n [style.right.px]=\"popupPosition().right\"\r\n (mouseenter)=\"onPopupHover()\"\r\n (mouseleave)=\"onPopupLeave()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n popupTemplate() || null;\r\n context: { $implicit: hoveredRow() }\r\n \"\r\n />\r\n </div>\r\n}\r\n\r\n<ng-template #defaultNoRecordsTemplate>\r\n <div class=\"fu-no-records\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M12 8v4m0 4.01l.01-.011M9 3H4v3m0 5v2m16-2v2M15 3h5v3M9 21H4v-3m11 3h5v-3\"\r\n />\r\n </svg>\r\n <p>{{ noRecordsText() }}</p>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #initLoadTemplate>\r\n @for (item of arrayFromSize(); track $index) {\r\n <tr class=\"fu-empty-row\">\r\n @for (item of arrayFromCols(); track $index) {\r\n <fu-tbody-cell />\r\n }\r\n </tr>\r\n }\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{
|
|
1911
|
+
], queries: [{ propertyName: "noRecordsTemplate", first: true, predicate: ["noRecordsTemplate"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true, isSignal: true }, { propertyName: "popupTemplate", first: true, predicate: PopupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "expandTemplate", first: true, predicate: ExpandTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: BodyTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fu-table-wrapper\" [attr.outlined]=\"variant() === 'outlined'\">\r\n <!-- Search Filter -->\r\n @if (showFilter()) {\r\n <fu-table-filter [title]=\"tableTitle()\" />\r\n } @else if (tableTitle()) {\r\n <div style=\"margin-bottom: 12px\">\r\n <h3>{{ tableTitle() }}</h3>\r\n </div>\r\n }\r\n\r\n <!-- Table -->\r\n <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n <thead [attr.role]=\"'rowgroup'\">\r\n <tr [attr.role]=\"'row'\">\r\n @if (expandable()) {\r\n <th class=\"fu-expand-head\"></th>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate();\r\n context: { $implicit: dataSource()[0] | keyMapping }\r\n \"\r\n />\r\n </tr>\r\n </thead>\r\n\r\n <tbody [attr.role]=\"'rowgroup'\">\r\n @if (isInitLoad()) {\r\n <ng-container *ngTemplateOutlet=\"initLoadTemplate\" />\r\n } @else {\r\n @for (row of sortedData(); track $index; let odd = $odd) {\r\n <tr\r\n [attr.outlined]=\"variant() === 'outlined'\"\r\n [attr.role]=\"'row'\"\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{\r\n striped: stripedRows() && odd,\r\n hoverable: expandable() || selectRowAction.observed,\r\n }\"\r\n (mouseenter)=\"onRowHover($event, row)\"\r\n (mouseleave)=\"onRowLeave()\"\r\n (click)=\"toggleRow(row, $index)\"\r\n >\r\n @if (expandable()) {\r\n <td\r\n class=\"fu-expand-cell\"\r\n [attr.data-expand]=\"expandedRowIndex === $index\"\r\n >\r\n <fu-icon size=\"16px\" iconName=\"chevronRight\" />\r\n </td>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate();\r\n context: {\r\n $implicit: row,\r\n index: $index,\r\n keys: row | keyMapping,\r\n }\r\n \"\r\n />\r\n </tr>\r\n\r\n @if (\r\n (expandable() && expandedRowIndex === $index) ||\r\n expandIndex() === $index\r\n ) {\r\n <tr class=\"fu-expand-row\" (mouseenter)=\"onExpandHover()\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate() || null;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n } @empty {\r\n <tr class=\"fu-empty-row\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n noRecordsTemplate() || defaultNoRecordsTemplate\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n\r\n @if (footerTemplate()) {\r\n <div class=\"fu-table-footer\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n footerTemplate() || null;\r\n context: { $implicit: sortedData() }\r\n \"\r\n />\r\n </div>\r\n }\r\n\r\n @if (showPaginator()) {\r\n <fu-table-paginator\r\n [dataLenght]=\"totalItems()\"\r\n [quickPageJump]=\"quickPageJump()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n />\r\n }\r\n</div>\r\n\r\n@if (hoveredRow()) {\r\n <div\r\n class=\"fu-action-popup\"\r\n [style.top.px]=\"popupPosition().top\"\r\n [style.right.px]=\"popupPosition().right\"\r\n (mouseenter)=\"onPopupHover()\"\r\n (mouseleave)=\"onPopupLeave()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n popupTemplate() || null;\r\n context: { $implicit: hoveredRow() }\r\n \"\r\n />\r\n </div>\r\n}\r\n\r\n<ng-template #defaultNoRecordsTemplate>\r\n <div class=\"fu-no-records\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M12 8v4m0 4.01l.01-.011M9 3H4v3m0 5v2m16-2v2M15 3h5v3M9 21H4v-3m11 3h5v-3\"\r\n />\r\n </svg>\r\n <p>{{ noRecordsText() }}</p>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #initLoadTemplate>\r\n @for (item of arrayFromSize(); track $index) {\r\n <tr class=\"fu-empty-row\">\r\n @for (item of arrayFromCols(); track $index) {\r\n <fu-tbody-cell />\r\n }\r\n </tr>\r\n }\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{overflow-x:auto;padding:12px;font-family:Roboto,sans-serif;font-size:14px;background-color:var(--fu-table-bg-color);color:var(--fu-table-text-color);border-radius:4px}.fu-table-wrapper[outlined=true]{border:1px solid var(--fu-table-border-color)}.fu-table-wrapper[outlined=false]{box-shadow:0 1px 4px #0000005e}table{border-collapse:collapse;width:100%;margin-bottom:12px}thead tr{background-color:var(--fu-table-header-bg-color)}thead tr .fu-expand-head{width:40px;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){thead tr .fu-expand-head{display:none}}tbody tr .fu-expand-cell{border-bottom:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle}tbody tr .fu-expand-cell fu-icon{margin-top:3px}@media (max-width: 900px){tbody tr .fu-expand-cell{display:none}}tbody tr .fu-expand-cell[data-expand=true] fu-icon{transition:.1s ease-in-out;transform:rotate(90deg)}.fu-body-row{transition:.2s ease-in-out}.fu-body-row.striped{background-color:var(--fu-table-striped-row-bg-color)}.fu-body-row.hoverable:hover{background-color:var(--fu-table-bg-hover-color);cursor:pointer}tr.fu-expand-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px}tr.fu-empty-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px;text-align:center}tr.fu-empty-row>td svg{width:100px;height:100px;color:var(--fu-table-border-color)}@media (max-width: 900px){table{border:none;box-shadow:none;min-width:100%}thead{border-bottom:1px solid var(--fu-table-border-color)}tbody tr[outlined=true]{border-right:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}tbody tr:first-child{border-top:none}tbody tr:last-child{margin-bottom:0}tr{display:block;margin-bottom:12px}tr[outlined=false]{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}tr.fu-expand-row{margin-top:-8px;display:block;width:100%}tr.fu-expand-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}tr.fu-empty-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}}.fu-table-footer{position:relative;min-height:40px;margin-bottom:8px;background-color:var(--fu-table-header-bg-color);border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}.fu-action-popup{position:absolute;display:flex;align-items:center;gap:8px;background:var(--fu-table-bg-color);box-shadow:0 4px 6px #0000001a;border:1px solid var(--fu-table-border-color);border-radius:4px;min-height:40px;z-index:10;padding:0 8px}.fu-no-records{display:flex;flex-direction:column;justify-content:center;align-items:center;height:180px}.fu-no-records>p{color:#aeadad}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "component", type: TablePaginatorComponent, selector: "fu-table-paginator", inputs: ["pageSizeOptions", "quickPageJump", "dataLenght"] }, { kind: "component", type: TableFilterComponent, selector: "fu-table-filter", inputs: ["title"] }, { kind: "component", type: TbodyCellComponent, selector: "fu-tbody-cell", inputs: ["cellValue", "editKey"] }, { kind: "pipe", type: KeyMappingPipe, name: "keyMapping" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1906
1912
|
}
|
|
1907
1913
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableComponent, decorators: [{
|
|
1908
1914
|
type: Component,
|
|
@@ -1919,7 +1925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
1919
1925
|
TableStorageService,
|
|
1920
1926
|
TableSortService,
|
|
1921
1927
|
TableEditService,
|
|
1922
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fu-table-wrapper\" [attr.outlined]=\"variant() === 'outlined'\">\r\n <!-- Search Filter -->\r\n @if (showFilter()) {\r\n <fu-table-filter [title]=\"tableTitle()\" />\r\n } @else if (tableTitle()) {\r\n <div style=\"margin-bottom: 12px\">\r\n <h3>{{ tableTitle() }}</h3>\r\n </div>\r\n }\r\n\r\n <!-- Table -->\r\n <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n <thead [attr.role]=\"'rowgroup'\">\r\n <tr [attr.role]=\"'row'\">\r\n @if (expandable()) {\r\n <th class=\"fu-expand-head\"></th>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate();\r\n context: { $implicit: dataSource()[0] | keyMapping }\r\n \"\r\n />\r\n </tr>\r\n </thead>\r\n\r\n <tbody [attr.role]=\"'rowgroup'\">\r\n @if (isInitLoad()) {\r\n <ng-container *ngTemplateOutlet=\"initLoadTemplate\" />\r\n } @else {\r\n @for (row of sortedData(); track $index; let odd = $odd) {\r\n <tr\r\n [attr.outlined]=\"variant() === 'outlined'\"\r\n [attr.role]=\"'row'\"\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{\r\n striped: stripedRows() && odd,\r\n hoverable: expandable() || selectRowAction.observed,\r\n }\"\r\n (mouseenter)=\"onRowHover($event, row)\"\r\n (mouseleave)=\"onRowLeave()\"\r\n (click)=\"toggleRow(row, $index)\"\r\n >\r\n @if (expandable()) {\r\n <td\r\n class=\"fu-expand-cell\"\r\n [attr.data-expand]=\"expandedRowIndex === $index\"\r\n >\r\n <fu-icon size=\"16px\" iconName=\"chevronRight\" />\r\n </td>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate();\r\n context: {\r\n $implicit: row,\r\n index: $index,\r\n keys: row | keyMapping,\r\n }\r\n \"\r\n />\r\n </tr>\r\n\r\n @if (\r\n (expandable() && expandedRowIndex === $index) ||\r\n expandIndex() === $index\r\n ) {\r\n <tr class=\"fu-expand-row\" (mouseenter)=\"onExpandHover()\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate() || null;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n } @empty {\r\n <tr class=\"fu-empty-row\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n noRecordsTemplate() || defaultNoRecordsTemplate\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n\r\n @if (footerTemplate()) {\r\n <div class=\"fu-table-footer\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n footerTemplate() || null;\r\n context: { $implicit: sortedData() }\r\n \"\r\n />\r\n </div>\r\n }\r\n\r\n @if (showPaginator()) {\r\n <fu-table-paginator\r\n [dataLenght]=\"totalItems()\"\r\n [quickPageJump]=\"quickPageJump()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n />\r\n }\r\n</div>\r\n\r\n@if (hoveredRow()) {\r\n <div\r\n class=\"fu-action-popup\"\r\n [style.top.px]=\"popupPosition().top\"\r\n [style.right.px]=\"popupPosition().right\"\r\n (mouseenter)=\"onPopupHover()\"\r\n (mouseleave)=\"onPopupLeave()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n popupTemplate() || null;\r\n context: { $implicit: hoveredRow() }\r\n \"\r\n />\r\n </div>\r\n}\r\n\r\n<ng-template #defaultNoRecordsTemplate>\r\n <div class=\"fu-no-records\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M12 8v4m0 4.01l.01-.011M9 3H4v3m0 5v2m16-2v2M15 3h5v3M9 21H4v-3m11 3h5v-3\"\r\n />\r\n </svg>\r\n <p>{{ noRecordsText() }}</p>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #initLoadTemplate>\r\n @for (item of arrayFromSize(); track $index) {\r\n <tr class=\"fu-empty-row\">\r\n @for (item of arrayFromCols(); track $index) {\r\n <fu-tbody-cell />\r\n }\r\n </tr>\r\n }\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{
|
|
1928
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fu-table-wrapper\" [attr.outlined]=\"variant() === 'outlined'\">\r\n <!-- Search Filter -->\r\n @if (showFilter()) {\r\n <fu-table-filter [title]=\"tableTitle()\" />\r\n } @else if (tableTitle()) {\r\n <div style=\"margin-bottom: 12px\">\r\n <h3>{{ tableTitle() }}</h3>\r\n </div>\r\n }\r\n\r\n <!-- Table -->\r\n <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n <thead [attr.role]=\"'rowgroup'\">\r\n <tr [attr.role]=\"'row'\">\r\n @if (expandable()) {\r\n <th class=\"fu-expand-head\"></th>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate();\r\n context: { $implicit: dataSource()[0] | keyMapping }\r\n \"\r\n />\r\n </tr>\r\n </thead>\r\n\r\n <tbody [attr.role]=\"'rowgroup'\">\r\n @if (isInitLoad()) {\r\n <ng-container *ngTemplateOutlet=\"initLoadTemplate\" />\r\n } @else {\r\n @for (row of sortedData(); track $index; let odd = $odd) {\r\n <tr\r\n [attr.outlined]=\"variant() === 'outlined'\"\r\n [attr.role]=\"'row'\"\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{\r\n striped: stripedRows() && odd,\r\n hoverable: expandable() || selectRowAction.observed,\r\n }\"\r\n (mouseenter)=\"onRowHover($event, row)\"\r\n (mouseleave)=\"onRowLeave()\"\r\n (click)=\"toggleRow(row, $index)\"\r\n >\r\n @if (expandable()) {\r\n <td\r\n class=\"fu-expand-cell\"\r\n [attr.data-expand]=\"expandedRowIndex === $index\"\r\n >\r\n <fu-icon size=\"16px\" iconName=\"chevronRight\" />\r\n </td>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate();\r\n context: {\r\n $implicit: row,\r\n index: $index,\r\n keys: row | keyMapping,\r\n }\r\n \"\r\n />\r\n </tr>\r\n\r\n @if (\r\n (expandable() && expandedRowIndex === $index) ||\r\n expandIndex() === $index\r\n ) {\r\n <tr class=\"fu-expand-row\" (mouseenter)=\"onExpandHover()\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate() || null;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n } @empty {\r\n <tr class=\"fu-empty-row\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n noRecordsTemplate() || defaultNoRecordsTemplate\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n\r\n @if (footerTemplate()) {\r\n <div class=\"fu-table-footer\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n footerTemplate() || null;\r\n context: { $implicit: sortedData() }\r\n \"\r\n />\r\n </div>\r\n }\r\n\r\n @if (showPaginator()) {\r\n <fu-table-paginator\r\n [dataLenght]=\"totalItems()\"\r\n [quickPageJump]=\"quickPageJump()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n />\r\n }\r\n</div>\r\n\r\n@if (hoveredRow()) {\r\n <div\r\n class=\"fu-action-popup\"\r\n [style.top.px]=\"popupPosition().top\"\r\n [style.right.px]=\"popupPosition().right\"\r\n (mouseenter)=\"onPopupHover()\"\r\n (mouseleave)=\"onPopupLeave()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n popupTemplate() || null;\r\n context: { $implicit: hoveredRow() }\r\n \"\r\n />\r\n </div>\r\n}\r\n\r\n<ng-template #defaultNoRecordsTemplate>\r\n <div class=\"fu-no-records\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M12 8v4m0 4.01l.01-.011M9 3H4v3m0 5v2m16-2v2M15 3h5v3M9 21H4v-3m11 3h5v-3\"\r\n />\r\n </svg>\r\n <p>{{ noRecordsText() }}</p>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #initLoadTemplate>\r\n @for (item of arrayFromSize(); track $index) {\r\n <tr class=\"fu-empty-row\">\r\n @for (item of arrayFromCols(); track $index) {\r\n <fu-tbody-cell />\r\n }\r\n </tr>\r\n }\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{overflow-x:auto;padding:12px;font-family:Roboto,sans-serif;font-size:14px;background-color:var(--fu-table-bg-color);color:var(--fu-table-text-color);border-radius:4px}.fu-table-wrapper[outlined=true]{border:1px solid var(--fu-table-border-color)}.fu-table-wrapper[outlined=false]{box-shadow:0 1px 4px #0000005e}table{border-collapse:collapse;width:100%;margin-bottom:12px}thead tr{background-color:var(--fu-table-header-bg-color)}thead tr .fu-expand-head{width:40px;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){thead tr .fu-expand-head{display:none}}tbody tr .fu-expand-cell{border-bottom:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle}tbody tr .fu-expand-cell fu-icon{margin-top:3px}@media (max-width: 900px){tbody tr .fu-expand-cell{display:none}}tbody tr .fu-expand-cell[data-expand=true] fu-icon{transition:.1s ease-in-out;transform:rotate(90deg)}.fu-body-row{transition:.2s ease-in-out}.fu-body-row.striped{background-color:var(--fu-table-striped-row-bg-color)}.fu-body-row.hoverable:hover{background-color:var(--fu-table-bg-hover-color);cursor:pointer}tr.fu-expand-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px}tr.fu-empty-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px;text-align:center}tr.fu-empty-row>td svg{width:100px;height:100px;color:var(--fu-table-border-color)}@media (max-width: 900px){table{border:none;box-shadow:none;min-width:100%}thead{border-bottom:1px solid var(--fu-table-border-color)}tbody tr[outlined=true]{border-right:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}tbody tr:first-child{border-top:none}tbody tr:last-child{margin-bottom:0}tr{display:block;margin-bottom:12px}tr[outlined=false]{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}tr.fu-expand-row{margin-top:-8px;display:block;width:100%}tr.fu-expand-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}tr.fu-empty-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}}.fu-table-footer{position:relative;min-height:40px;margin-bottom:8px;background-color:var(--fu-table-header-bg-color);border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}.fu-action-popup{position:absolute;display:flex;align-items:center;gap:8px;background:var(--fu-table-bg-color);box-shadow:0 4px 6px #0000001a;border:1px solid var(--fu-table-border-color);border-radius:4px;min-height:40px;z-index:10;padding:0 8px}.fu-no-records{display:flex;flex-direction:column;justify-content:center;align-items:center;height:180px}.fu-no-records>p{color:#aeadad}\n"] }]
|
|
1923
1929
|
}], propDecorators: { selectRowAction: [{
|
|
1924
1930
|
type: Output
|
|
1925
1931
|
}], onResize: [{
|
|
@@ -1963,7 +1969,7 @@ class TheadCellComponent {
|
|
|
1963
1969
|
return Array.from(parent.children).indexOf(this.elementRef.nativeElement);
|
|
1964
1970
|
}
|
|
1965
1971
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TheadCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1966
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TheadCellComponent, isStandalone: true, selector: "fu-thead-cell", inputs: { headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "\"columnheader\"", "style.width": "width()", "class.sorting": "sortKey() !== undefined" } }, ngImport: i0, template: "<div\r\n class=\"fu-header-cell\"\r\n (click)=\"toogleSort()\"\r\n [ngClass]=\"{ disabled: !sortKey() }\"\r\n>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if (sortKey()) {\r\n @if (sortColumn() === sortKey()) {\r\n @switch (sortDirection()) {\r\n @case ('asc') {\r\n <fu-icon size=\"1rem\" strokeWidth=\"2.5\" iconName=\"sortAsc\" />\r\n }\r\n @case ('desc') {\r\n <fu-icon size=\"1rem\" strokeWidth=\"2.5\" iconName=\"sortDesc\" />\r\n }\r\n @default {\r\n <fu-icon size=\"1rem\" color=\"gray\" iconName=\"sort\" />\r\n }\r\n }\r\n } @else {\r\n <fu-icon size=\"1rem\" color=\"gray\" iconName=\"sort\" />\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-thead-cell{display:table-cell;text-align:left;font-weight:700;
|
|
1972
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TheadCellComponent, isStandalone: true, selector: "fu-thead-cell", inputs: { headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "\"columnheader\"", "style.width": "width()", "class.sorting": "sortKey() !== undefined" } }, ngImport: i0, template: "<div\r\n class=\"fu-header-cell\"\r\n (click)=\"toogleSort()\"\r\n [ngClass]=\"{ disabled: !sortKey() }\"\r\n>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if (sortKey()) {\r\n @if (sortColumn() === sortKey()) {\r\n @switch (sortDirection()) {\r\n @case ('asc') {\r\n <fu-icon size=\"1rem\" strokeWidth=\"2.5\" iconName=\"sortAsc\" />\r\n }\r\n @case ('desc') {\r\n <fu-icon size=\"1rem\" strokeWidth=\"2.5\" iconName=\"sortDesc\" />\r\n }\r\n @default {\r\n <fu-icon size=\"1rem\" color=\"gray\" iconName=\"sort\" />\r\n }\r\n }\r\n } @else {\r\n <fu-icon size=\"1rem\" color=\"gray\" iconName=\"sort\" />\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-thead-cell{display:table-cell;text-align:left;font-weight:700;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 }); }
|
|
1967
1973
|
}
|
|
1968
1974
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TheadCellComponent, decorators: [{
|
|
1969
1975
|
type: Component,
|
|
@@ -1971,7 +1977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
1971
1977
|
'[attr.role]': '"columnheader"',
|
|
1972
1978
|
'[style.width]': 'width()',
|
|
1973
1979
|
'[class.sorting]': 'sortKey() !== undefined',
|
|
1974
|
-
}, template: "<div\r\n class=\"fu-header-cell\"\r\n (click)=\"toogleSort()\"\r\n [ngClass]=\"{ disabled: !sortKey() }\"\r\n>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if (sortKey()) {\r\n @if (sortColumn() === sortKey()) {\r\n @switch (sortDirection()) {\r\n @case ('asc') {\r\n <fu-icon size=\"1rem\" strokeWidth=\"2.5\" iconName=\"sortAsc\" />\r\n }\r\n @case ('desc') {\r\n <fu-icon size=\"1rem\" strokeWidth=\"2.5\" iconName=\"sortDesc\" />\r\n }\r\n @default {\r\n <fu-icon size=\"1rem\" color=\"gray\" iconName=\"sort\" />\r\n }\r\n }\r\n } @else {\r\n <fu-icon size=\"1rem\" color=\"gray\" iconName=\"sort\" />\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-thead-cell{display:table-cell;text-align:left;font-weight:700;
|
|
1980
|
+
}, 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;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"] }]
|
|
1975
1981
|
}] });
|
|
1976
1982
|
|
|
1977
1983
|
class TbodyActionsComponent {
|
|
@@ -2124,6 +2130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
2124
2130
|
/*
|
|
2125
2131
|
* Public API Surface of ng-fusion-ui
|
|
2126
2132
|
*/
|
|
2133
|
+
// export * from './lib/tree/index';
|
|
2127
2134
|
|
|
2128
2135
|
/**
|
|
2129
2136
|
* Generated bundle index. Do not edit.
|