@xiriframework/xiri-ng 0.2.24 → 0.2.26
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.
|
@@ -29,7 +29,7 @@ import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
|
|
|
29
29
|
import { ENTER, COMMA } from '@angular/cdk/keycodes';
|
|
30
30
|
import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
|
|
31
31
|
import { MatChipGrid, MatChipRow, MatChipRemove, MatChipInput } from '@angular/material/chips';
|
|
32
|
-
import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell,
|
|
32
|
+
import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRow, MatFooterRowDef, MatFooterCell, MatFooterCellDef } from '@angular/material/table';
|
|
33
33
|
import { RouterLink, Router, NavigationEnd } from '@angular/router';
|
|
34
34
|
import { MatTooltip } from '@angular/material/tooltip';
|
|
35
35
|
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialog } from '@angular/material/dialog';
|
|
@@ -38,7 +38,7 @@ import { MatSort, MatSortHeader } from '@angular/material/sort';
|
|
|
38
38
|
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
39
39
|
import { MatDivider } from '@angular/material/divider';
|
|
40
40
|
import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
|
|
41
|
-
import { MatCard, MatCardHeader, MatCardAvatar,
|
|
41
|
+
import { MatCard, MatCardContent, MatCardHeader, MatCardAvatar, MatCardSubtitle, MatCardTitle, MatCardActions } from '@angular/material/card';
|
|
42
42
|
import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatAccordion, MatExpansionPanelDescription } from '@angular/material/expansion';
|
|
43
43
|
import { MatListSubheaderCssMatStyler, MatNavList, MatListItem, MatListItemIcon, MatListItemTitle, MatListItemLine, MatListItemMeta } from '@angular/material/list';
|
|
44
44
|
import { MatStepper, MatStep } from '@angular/material/stepper';
|
|
@@ -2490,6 +2490,7 @@ function validatorArrayMax(max) {
|
|
|
2490
2490
|
class XiriRawTableComponent {
|
|
2491
2491
|
constructor() {
|
|
2492
2492
|
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
2493
|
+
this.showHeader = computed(() => this.settings().showHeader === true, ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
|
|
2493
2494
|
this.displayedColumns = [];
|
|
2494
2495
|
this.columnsToDisplay = [];
|
|
2495
2496
|
this.dataSource = new MatTableDataSource();
|
|
@@ -2519,7 +2520,7 @@ class XiriRawTableComponent {
|
|
|
2519
2520
|
}
|
|
2520
2521
|
}
|
|
2521
2522
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriRawTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2522
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriRawTableComponent, isStandalone: true, selector: "xiri-raw-table", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"table-out\" [class]=\"tableClass\">\n\t<table mat-table [dataSource]=\"dataSource\">\n\t\t@for (column of displayedColumns; track column) {\n\t\t\t<ng-container [matColumnDef]=\"column.name\">\n\t\t\t\t
|
|
2523
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriRawTableComponent, isStandalone: true, selector: "xiri-raw-table", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"table-out\" [class]=\"tableClass\">\n\t<table mat-table [dataSource]=\"dataSource\">\n\t\t@for (column of displayedColumns; track column) {\n\t\t\t<ng-container [matColumnDef]=\"column.name\">\n\t\t\t\t<th mat-header-cell *matHeaderCellDef [class]=\"column.display\"> {{ column.header }}</th>\n\t\t\t\t@switch (column.format) {\n\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if (column.icons[ row[ column.id ] ]) {\n\t\t\t\t\t\t\t\t<mat-icon [class]=\"column.icons[ row[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t [matTooltip]=\"column.icons[ row[ column.id ] ][ 'hint' ]\"\n\t\t\t\t\t\t\t\t [matTooltipDisabled]=\"!column.icons[ row[ column.id ] ][ 'hint' ]\">{{ column.icons[row[column.id]]['icon'] }}\n\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"row[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t<a [routerLink]=\"row[column.id + 'Link']\" class=\"tablelink\">{{ row[column.id] }}</a>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span>{{ row[column.id] }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t<div>{{ row[column.id][0] }}</div>\n\t\t\t\t\t\t\t<div>{{ row[column.id][1] }}</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('textn') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@for (line of row[column.id]; track $index) {\n\t\t\t\t\t\t\t\t<div>{{ line }}</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('linkrow') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t<a [routerLink]=\"row[column.id + 'Link']\">\n\t\t\t\t\t\t\t\t\t<div class=\"linkrow\">\n\t\t\t\t\t\t\t\t\t\t@if (row['icon']) {\n\t\t\t\t\t\t\t\t\t\t\t@if (row['iconSet']) {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"row['iconColor'] || 'primary'\" [fontSet]=\"row['iconSet']\">{{ row['icon'] }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"row['iconColor'] || 'primary'\">{{ row['icon'] }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t<span class=\"text\" [class.hasIcon]=\"row['icon']\">{{ row[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('number') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id][0] }}{{ column.textSuffix }}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@default {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">{{ row[column.id] }}</td>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</ng-container>\n\t\t}\n\n\t\t@if (showHeader()) {\n\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n\t\t}\n\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n\t</table>\n</div>", styles: [".table-out.dense-1{--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px}.table-out.dense-2{--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px}.table-out.dense-3{--mat-table-header-container-height: 44px;--mat-table-footer-container-height: 40px;--mat-table-row-item-container-height: 40px}.table-out.dense-4,.table-out.dense-6{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.table-out.dense-6 table tr.mat-mdc-row{height:32px}.table-out.dense-8{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.table-out.dense-8 table tr.mat-mdc-row{height:30px}.table-out.force-min-width td{min-width:150px}table{width:100%}table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}table .tablelink{text-decoration:underline}table .linkrow{display:table-row}table .linkrow mat-icon{display:table-cell;width:30px;text-align:center;padding-right:1rem;line-height:31px;color:var(--xiri-linkrow-icon-color)}table .linkrow .text{display:table-cell;text-decoration:underline}table .linkrow .text.hasIcon{vertical-align:middle;line-height:33px}table td.mat-mdc-cell mat-icon{vertical-align:middle}table td.mat-mdc-cell.info{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #42474E)}table td.mat-mdc-cell.right,table td.mat-mdc-cell.align-right{text-align:right;padding-left:1rem;word-wrap:anywhere}table td.mat-mdc-cell.center,table td.mat-mdc-cell.align-center{text-align:center;padding-left:1rem}table td.mat-mdc-cell.left,table td.mat-mdc-cell.align-left{text-align:left}table td.mat-mdc-cell.middle{padding-left:1rem}table th.mat-mdc-header-cell.align-right{text-align:right}table th.mat-mdc-header-cell.align-center{text-align:center}table th.mat-mdc-header-cell.align-left{text-align:left}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2523
2524
|
}
|
|
2524
2525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriRawTableComponent, decorators: [{
|
|
2525
2526
|
type: Component,
|
|
@@ -2532,9 +2533,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
2532
2533
|
MatIcon,
|
|
2533
2534
|
MatTooltip,
|
|
2534
2535
|
RouterLink,
|
|
2536
|
+
MatHeaderRowDef,
|
|
2537
|
+
MatHeaderRow,
|
|
2535
2538
|
MatRowDef,
|
|
2536
2539
|
MatRow,
|
|
2537
|
-
SafehtmlPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-out\" [class]=\"tableClass\">\n\t<table mat-table [dataSource]=\"dataSource\">\n\t\t@for (column of displayedColumns; track column) {\n\t\t\t<ng-container [matColumnDef]=\"column.name\">\n\t\t\t\t
|
|
2540
|
+
SafehtmlPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-out\" [class]=\"tableClass\">\n\t<table mat-table [dataSource]=\"dataSource\">\n\t\t@for (column of displayedColumns; track column) {\n\t\t\t<ng-container [matColumnDef]=\"column.name\">\n\t\t\t\t<th mat-header-cell *matHeaderCellDef [class]=\"column.display\"> {{ column.header }}</th>\n\t\t\t\t@switch (column.format) {\n\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if (column.icons[ row[ column.id ] ]) {\n\t\t\t\t\t\t\t\t<mat-icon [class]=\"column.icons[ row[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t [matTooltip]=\"column.icons[ row[ column.id ] ][ 'hint' ]\"\n\t\t\t\t\t\t\t\t [matTooltipDisabled]=\"!column.icons[ row[ column.id ] ][ 'hint' ]\">{{ column.icons[row[column.id]]['icon'] }}\n\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"row[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t<a [routerLink]=\"row[column.id + 'Link']\" class=\"tablelink\">{{ row[column.id] }}</a>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span>{{ row[column.id] }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t<div>{{ row[column.id][0] }}</div>\n\t\t\t\t\t\t\t<div>{{ row[column.id][1] }}</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('textn') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@for (line of row[column.id]; track $index) {\n\t\t\t\t\t\t\t\t<div>{{ line }}</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('linkrow') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t<a [routerLink]=\"row[column.id + 'Link']\">\n\t\t\t\t\t\t\t\t\t<div class=\"linkrow\">\n\t\t\t\t\t\t\t\t\t\t@if (row['icon']) {\n\t\t\t\t\t\t\t\t\t\t\t@if (row['iconSet']) {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"row['iconColor'] || 'primary'\" [fontSet]=\"row['iconSet']\">{{ row['icon'] }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"row['iconColor'] || 'primary'\">{{ row['icon'] }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t<span class=\"text\" [class.hasIcon]=\"row['icon']\">{{ row[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('number') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id][0] }}{{ column.textSuffix }}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@default {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">{{ row[column.id] }}</td>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</ng-container>\n\t\t}\n\n\t\t@if (showHeader()) {\n\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n\t\t}\n\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n\t</table>\n</div>", styles: [".table-out.dense-1{--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px}.table-out.dense-2{--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px}.table-out.dense-3{--mat-table-header-container-height: 44px;--mat-table-footer-container-height: 40px;--mat-table-row-item-container-height: 40px}.table-out.dense-4,.table-out.dense-6{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.table-out.dense-6 table tr.mat-mdc-row{height:32px}.table-out.dense-8{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.table-out.dense-8 table tr.mat-mdc-row{height:30px}.table-out.force-min-width td{min-width:150px}table{width:100%}table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}table .tablelink{text-decoration:underline}table .linkrow{display:table-row}table .linkrow mat-icon{display:table-cell;width:30px;text-align:center;padding-right:1rem;line-height:31px;color:var(--xiri-linkrow-icon-color)}table .linkrow .text{display:table-cell;text-decoration:underline}table .linkrow .text.hasIcon{vertical-align:middle;line-height:33px}table td.mat-mdc-cell mat-icon{vertical-align:middle}table td.mat-mdc-cell.info{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #42474E)}table td.mat-mdc-cell.right,table td.mat-mdc-cell.align-right{text-align:right;padding-left:1rem;word-wrap:anywhere}table td.mat-mdc-cell.center,table td.mat-mdc-cell.align-center{text-align:center;padding-left:1rem}table td.mat-mdc-cell.left,table td.mat-mdc-cell.align-left{text-align:left}table td.mat-mdc-cell.middle{padding-left:1rem}table th.mat-mdc-header-cell.align-right{text-align:right}table th.mat-mdc-header-cell.align-center{text-align:center}table th.mat-mdc-header-cell.align-left{text-align:left}\n"] }]
|
|
2538
2541
|
}], ctorParameters: () => [], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
2539
2542
|
|
|
2540
2543
|
class XiriButtonstyleComponent {
|
|
@@ -4471,140 +4474,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
4471
4474
|
args: [{ selector: 'xiri-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, host: { 'role': 'status', 'aria-label': 'Laden...', '[class.fill]': 'fill()' }, template: "@switch (type()) {\n\t@case ('text') {\n\t\t<div class=\"skeleton-text\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"\n\t\t\t\t [style.width]=\"$last ? '60%' : width()\"\n\t\t\t\t [style.height]=\"height()\"></div>\n\t\t\t}\n\t\t</div>\n\t}\n\t@case ('circle') {\n\t\t<div class=\"skeleton-circle\" [class.animate]=\"animate()\"\n\t\t [style.width]=\"width()\"\n\t\t [style.height]=\"width()\"></div>\n\t}\n\t@case ('rect') {\n\t\t<div class=\"skeleton-rect\" [class.animate]=\"animate()\"\n\t\t [style.width]=\"width()\"\n\t\t [style.height]=\"height()\"></div>\n\t}\n\t@case ('table-row') {\n\t\t<div class=\"skeleton-table\" [class.fill-height]=\"fill()\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-table-row\">\n\t\t\t\t\t@for (_ of columnsArray(); track $index) {\n\t\t\t\t\t\t<div class=\"skeleton-table-cell\">\n\t\t\t\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n}\n", styles: [":host{display:block}:host.fill{height:100%}.skeleton-line,.skeleton-circle,.skeleton-rect{background-color:var(--color-gray-200, #E9ECEF);border-radius:var(--xiri-radius-xs)}.skeleton-line.animate,.skeleton-circle.animate,.skeleton-rect.animate{background-image:linear-gradient(90deg,var(--color-gray-200, #E9ECEF) 0px,var(--color-gray-100, #F8F9FA) 40px,var(--color-gray-200, #E9ECEF) 80px);background-size:200px 100%;animation:shimmer 1.5s var(--xiri-easing-standard) infinite}.skeleton-text{display:flex;flex-direction:column;gap:8px}.skeleton-text .skeleton-line{height:1em}.skeleton-circle{border-radius:50%}.skeleton-rect{border-radius:var(--xiri-radius-md)}.skeleton-table{display:flex;flex-direction:column;gap:12px}.skeleton-table.fill-height{height:100%;overflow:hidden}.skeleton-table.fill-height .skeleton-table-row{flex:1;min-height:0}.skeleton-table-row{display:flex;gap:16px}.skeleton-table-cell{flex:1}.skeleton-table-cell .skeleton-line{height:1em;width:100%}@media(prefers-reduced-motion:reduce){.skeleton-line.animate,.skeleton-circle.animate,.skeleton-rect.animate{animation:none}}\n"] }]
|
|
4472
4475
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }] } });
|
|
4473
4476
|
|
|
4474
|
-
class XiriCardComponent {
|
|
4475
|
-
constructor() {
|
|
4476
|
-
this.dataService = inject(XiriDataService);
|
|
4477
|
-
this.destroyRef = inject(DestroyRef);
|
|
4478
|
-
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
4479
|
-
this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
4480
|
-
this.errorMsg = signal('', ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
|
|
4481
|
-
this.isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
|
|
4482
|
-
this._data = signal(null, ...(ngDevMode ? [{ debugName: "_data" }] : /* istanbul ignore next */ []));
|
|
4483
|
-
this.cardData = computed(() => this._data() ?? this.settings().data, ...(ngDevMode ? [{ debugName: "cardData" }] : /* istanbul ignore next */ []));
|
|
4484
|
-
this.rawTable = computed(() => {
|
|
4485
|
-
const data = this.cardData();
|
|
4486
|
-
if (data == null)
|
|
4487
|
-
return null;
|
|
4488
|
-
let rt = {
|
|
4489
|
-
data: data,
|
|
4490
|
-
fields: this.settings().fields,
|
|
4491
|
-
dense: this.settings().dense,
|
|
4492
|
-
forceMinWidth: this.settings().forceMinWidth,
|
|
4493
|
-
};
|
|
4494
|
-
if (!this.settings().fields && data.length !== 0) {
|
|
4495
|
-
let fields = [];
|
|
4496
|
-
if (Array.isArray(data)) {
|
|
4497
|
-
fields.push({
|
|
4498
|
-
id: '0',
|
|
4499
|
-
name: '0',
|
|
4500
|
-
format: 'text',
|
|
4501
|
-
display: 'info',
|
|
4502
|
-
minWidth: '30px',
|
|
4503
|
-
});
|
|
4504
|
-
fields.push({
|
|
4505
|
-
id: '1',
|
|
4506
|
-
name: '1',
|
|
4507
|
-
format: 'html',
|
|
4508
|
-
display: 'right',
|
|
4509
|
-
minWidth: '30px',
|
|
4510
|
-
});
|
|
4511
|
-
}
|
|
4512
|
-
else {
|
|
4513
|
-
fields.push({
|
|
4514
|
-
id: 'f0',
|
|
4515
|
-
name: 'f0',
|
|
4516
|
-
format: 'text',
|
|
4517
|
-
display: 'info',
|
|
4518
|
-
minWidth: '30px',
|
|
4519
|
-
});
|
|
4520
|
-
fields.push({
|
|
4521
|
-
id: 'f1',
|
|
4522
|
-
name: 'f1',
|
|
4523
|
-
format: 'html',
|
|
4524
|
-
display: 'right',
|
|
4525
|
-
minWidth: '30px',
|
|
4526
|
-
});
|
|
4527
|
-
let transformedData = [];
|
|
4528
|
-
for (let key in data) {
|
|
4529
|
-
if (data.hasOwnProperty(key)) {
|
|
4530
|
-
transformedData.push({
|
|
4531
|
-
'f0': key,
|
|
4532
|
-
'f1': data[key],
|
|
4533
|
-
});
|
|
4534
|
-
}
|
|
4535
|
-
}
|
|
4536
|
-
rt.data = transformedData;
|
|
4537
|
-
}
|
|
4538
|
-
rt.fields = fields;
|
|
4539
|
-
}
|
|
4540
|
-
return rt;
|
|
4541
|
-
}, ...(ngDevMode ? [{ debugName: "rawTable" }] : /* istanbul ignore next */ []));
|
|
4542
|
-
effect(() => {
|
|
4543
|
-
const s = this.settings();
|
|
4544
|
-
if (s.collapsed !== undefined) {
|
|
4545
|
-
this.isCollapsed.set(s.collapsed);
|
|
4546
|
-
}
|
|
4547
|
-
});
|
|
4548
|
-
effect(() => {
|
|
4549
|
-
const url = this.settings().url;
|
|
4550
|
-
if (url) {
|
|
4551
|
-
this.loadData();
|
|
4552
|
-
}
|
|
4553
|
-
});
|
|
4554
|
-
}
|
|
4555
|
-
toggleCollapse() {
|
|
4556
|
-
this.isCollapsed.update(v => !v);
|
|
4557
|
-
}
|
|
4558
|
-
loadData() {
|
|
4559
|
-
this.loading.set(true);
|
|
4560
|
-
this.errorMsg.set('');
|
|
4561
|
-
this.dataService.post(this.settings().url, null)
|
|
4562
|
-
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
4563
|
-
.subscribe({
|
|
4564
|
-
next: (res) => {
|
|
4565
|
-
this._data.set(res.data ?? res);
|
|
4566
|
-
this.loading.set(false);
|
|
4567
|
-
},
|
|
4568
|
-
error: (err) => {
|
|
4569
|
-
this.errorMsg.set(err.error?.error || 'Fehler beim Laden');
|
|
4570
|
-
this.loading.set(false);
|
|
4571
|
-
}
|
|
4572
|
-
});
|
|
4573
|
-
}
|
|
4574
|
-
reload() {
|
|
4575
|
-
if (this.loading())
|
|
4576
|
-
return;
|
|
4577
|
-
this.loadData();
|
|
4578
|
-
}
|
|
4579
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4580
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriCardComponent, isStandalone: true, selector: "xiri-card", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-header>\n\t\t@if (settings().headerIcon) {\n\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t@if (settings().header) {\n\t\t\t<mat-card-title [class]=\"{hasHeaderSub: settings().headerSub}\">{{ settings().header }}</mat-card-title>\n\t\t}\n\t\t@if (settings().headerSub) {\n\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t}\n\t\t@if (settings().buttonsTop) {\n\t\t\t<xiri-buttonline [settings]=\"settings().buttonsTop\"></xiri-buttonline>\n\t\t}\n\t\t@if (settings().collapsible) {\n\t\t\t<button mat-icon-button (click)=\"toggleCollapse()\" class=\"collapse-btn\" aria-label=\"Auf-/Zuklappen\">\n\t\t\t\t<mat-icon>{{ isCollapsed() ? 'expand_more' : 'expand_less' }}</mat-icon>\n\t\t\t</button>\n\t\t}\n\t\t@if (settings().reload && settings().url) {\n\t\t\t<button mat-icon-button (click)=\"reload()\" [disabled]=\"loading()\" class=\"reload-btn\" aria-label=\"Neu laden\">\n\t\t\t\t<mat-icon [class.spinning]=\"loading()\">autorenew</mat-icon>\n\t\t\t</button>\n\t\t}\n\t</mat-card-header>\n\t<div class=\"collapse-wrapper\" [class.collapsed]=\"isCollapsed()\">\n\t\t<div class=\"collapse-inner\">\n\t\t\t@if (loading() && !cardData()) {\n\t\t\t\t<mat-card-content>\n\t\t\t\t\t<xiri-skeleton type=\"table-row\" [columns]=\"2\" [lines]=\"3\"></xiri-skeleton>\n\t\t\t\t</mat-card-content>\n\t\t\t} @else if (errorMsg()) {\n\t\t\t\t<mat-card-content>\n\t\t\t\t\t<div class=\"load-error\">{{ errorMsg() }}</div>\n\t\t\t\t</mat-card-content>\n\t\t\t} @else {\n\t\t\t\t<mat-card-content class=\"hasTable\" [style.max-height]=\"settings().maxHeight || '50vh'\">\n\t\t\t\t\t@if (rawTable()) {\n\t\t\t\t\t\t<xiri-raw-table [settings]=\"rawTable()!\"></xiri-raw-table>\n\t\t\t\t\t}\n\t\t\t\t</mat-card-content>\n\t\t\t}\n\t\t\t@if (settings().buttonsBottom) {\n\t\t\t\t<mat-card-actions align=\"end\">\n\t\t\t\t\t<xiri-buttonline [settings]=\"settings().buttonsBottom\"></xiri-buttonline>\n\t\t\t\t</mat-card-actions>\n\t\t\t}\n\t\t</div>\n\t</div>\n</mat-card>\n", styles: [":host{animation:fadeIn var(--xiri-duration-fast) var(--xiri-easing-standard)}.collapse-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--xiri-duration-normal) var(--xiri-easing-standard)}.collapse-wrapper.collapsed{grid-template-rows:0fr}.collapse-inner{overflow:hidden;min-height:0}.spinning{animation:spin 1s linear infinite}.card{overflow:hidden}.card mat-card-header{margin:0 0 2px;box-shadow:var(--xiri-shadow-xs);padding:4px 8px 4px 16px;align-items:center;min-height:32px}.card mat-card-header .header-image{margin-bottom:0;width:var(--xiri-icon-size-lg);height:var(--xiri-icon-size-lg);align-items:center;display:flex}.card mat-card-header .header-image mat-icon{font-size:var(--xiri-icon-size-lg);height:var(--xiri-icon-size-lg);width:var(--xiri-icon-size-lg);color:var(--primary)}.card mat-card-header mat-card-title.hasHeaderSub{padding-top:2px}.card mat-card-header mat-card-subtitle{padding-bottom:2px}.card mat-card-header xiri-buttonline{display:flex;justify-content:flex-end;flex:1}.card mat-card-header xiri-buttonline ::ng-deep button{width:32px;height:32px;padding:4px}.card mat-card-header xiri-buttonline ::ng-deep button mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card .collapse-btn{margin-left:auto;width:32px;height:32px;padding:4px}.card .collapse-btn mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card .reload-btn{width:32px;height:32px;padding:4px}.card .reload-btn mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card mat-card-content{padding:0}.card mat-card-content.hasTable{overflow-x:auto}.card mat-card-content xiri-skeleton{padding:16px}.card mat-card-content .load-error{padding:16px;color:var(--error, #B3261E)}.card mat-card-actions{padding:4px 8px;min-height:32px;border-top:1px solid var(--outline-variant, rgba(0, 0, 0, .12))}.card mat-card-actions xiri-buttonline ::ng-deep button{width:32px;height:32px;padding:4px}.card mat-card-actions xiri-buttonline ::ng-deep button mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: XiriRawTableComponent, selector: "xiri-raw-table", inputs: ["settings"] }, { kind: "component", type: XiriSkeletonComponent, selector: "xiri-skeleton", inputs: ["type", "width", "height", "lines", "columns", "animate", "fill"] }, { kind: "directive", type: MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4581
|
-
}
|
|
4582
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriCardComponent, decorators: [{
|
|
4583
|
-
type: Component,
|
|
4584
|
-
args: [{ selector: 'xiri-card', imports: [MatCard,
|
|
4585
|
-
MatCardHeader,
|
|
4586
|
-
MatCardAvatar,
|
|
4587
|
-
MatIcon,
|
|
4588
|
-
MatIconButton,
|
|
4589
|
-
MatCardTitle,
|
|
4590
|
-
MatCardSubtitle,
|
|
4591
|
-
XiriButtonlineComponent,
|
|
4592
|
-
MatCardContent,
|
|
4593
|
-
XiriRawTableComponent,
|
|
4594
|
-
XiriSkeletonComponent,
|
|
4595
|
-
MatCardActions], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-header>\n\t\t@if (settings().headerIcon) {\n\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t@if (settings().header) {\n\t\t\t<mat-card-title [class]=\"{hasHeaderSub: settings().headerSub}\">{{ settings().header }}</mat-card-title>\n\t\t}\n\t\t@if (settings().headerSub) {\n\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t}\n\t\t@if (settings().buttonsTop) {\n\t\t\t<xiri-buttonline [settings]=\"settings().buttonsTop\"></xiri-buttonline>\n\t\t}\n\t\t@if (settings().collapsible) {\n\t\t\t<button mat-icon-button (click)=\"toggleCollapse()\" class=\"collapse-btn\" aria-label=\"Auf-/Zuklappen\">\n\t\t\t\t<mat-icon>{{ isCollapsed() ? 'expand_more' : 'expand_less' }}</mat-icon>\n\t\t\t</button>\n\t\t}\n\t\t@if (settings().reload && settings().url) {\n\t\t\t<button mat-icon-button (click)=\"reload()\" [disabled]=\"loading()\" class=\"reload-btn\" aria-label=\"Neu laden\">\n\t\t\t\t<mat-icon [class.spinning]=\"loading()\">autorenew</mat-icon>\n\t\t\t</button>\n\t\t}\n\t</mat-card-header>\n\t<div class=\"collapse-wrapper\" [class.collapsed]=\"isCollapsed()\">\n\t\t<div class=\"collapse-inner\">\n\t\t\t@if (loading() && !cardData()) {\n\t\t\t\t<mat-card-content>\n\t\t\t\t\t<xiri-skeleton type=\"table-row\" [columns]=\"2\" [lines]=\"3\"></xiri-skeleton>\n\t\t\t\t</mat-card-content>\n\t\t\t} @else if (errorMsg()) {\n\t\t\t\t<mat-card-content>\n\t\t\t\t\t<div class=\"load-error\">{{ errorMsg() }}</div>\n\t\t\t\t</mat-card-content>\n\t\t\t} @else {\n\t\t\t\t<mat-card-content class=\"hasTable\" [style.max-height]=\"settings().maxHeight || '50vh'\">\n\t\t\t\t\t@if (rawTable()) {\n\t\t\t\t\t\t<xiri-raw-table [settings]=\"rawTable()!\"></xiri-raw-table>\n\t\t\t\t\t}\n\t\t\t\t</mat-card-content>\n\t\t\t}\n\t\t\t@if (settings().buttonsBottom) {\n\t\t\t\t<mat-card-actions align=\"end\">\n\t\t\t\t\t<xiri-buttonline [settings]=\"settings().buttonsBottom\"></xiri-buttonline>\n\t\t\t\t</mat-card-actions>\n\t\t\t}\n\t\t</div>\n\t</div>\n</mat-card>\n", styles: [":host{animation:fadeIn var(--xiri-duration-fast) var(--xiri-easing-standard)}.collapse-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--xiri-duration-normal) var(--xiri-easing-standard)}.collapse-wrapper.collapsed{grid-template-rows:0fr}.collapse-inner{overflow:hidden;min-height:0}.spinning{animation:spin 1s linear infinite}.card{overflow:hidden}.card mat-card-header{margin:0 0 2px;box-shadow:var(--xiri-shadow-xs);padding:4px 8px 4px 16px;align-items:center;min-height:32px}.card mat-card-header .header-image{margin-bottom:0;width:var(--xiri-icon-size-lg);height:var(--xiri-icon-size-lg);align-items:center;display:flex}.card mat-card-header .header-image mat-icon{font-size:var(--xiri-icon-size-lg);height:var(--xiri-icon-size-lg);width:var(--xiri-icon-size-lg);color:var(--primary)}.card mat-card-header mat-card-title.hasHeaderSub{padding-top:2px}.card mat-card-header mat-card-subtitle{padding-bottom:2px}.card mat-card-header xiri-buttonline{display:flex;justify-content:flex-end;flex:1}.card mat-card-header xiri-buttonline ::ng-deep button{width:32px;height:32px;padding:4px}.card mat-card-header xiri-buttonline ::ng-deep button mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card .collapse-btn{margin-left:auto;width:32px;height:32px;padding:4px}.card .collapse-btn mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card .reload-btn{width:32px;height:32px;padding:4px}.card .reload-btn mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card mat-card-content{padding:0}.card mat-card-content.hasTable{overflow-x:auto}.card mat-card-content xiri-skeleton{padding:16px}.card mat-card-content .load-error{padding:16px;color:var(--error, #B3261E)}.card mat-card-actions{padding:4px 8px;min-height:32px;border-top:1px solid var(--outline-variant, rgba(0, 0, 0, .12))}.card mat-card-actions xiri-buttonline ::ng-deep button{width:32px;height:32px;padding:4px}.card mat-card-actions xiri-buttonline ::ng-deep button mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}\n"] }]
|
|
4596
|
-
}], ctorParameters: () => [], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
4597
|
-
|
|
4598
4477
|
class XiriInfopointComponent {
|
|
4599
4478
|
constructor() {
|
|
4600
4479
|
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
4480
|
+
this.compact = computed(() => !!this.settings().compact, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
4601
4481
|
}
|
|
4602
4482
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriInfopointComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4603
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriInfopointComponent, isStandalone: true, selector: "xiri-infopoint", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"point\" [class.isLink]=\"settings().url\" [routerLink]=\"settings().url\" [queryParams]=\"settings().urlParams\">\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content [class.dense]=\"settings().dense\">\n\t\t\t<div class=\"icon\" [class]=\"settings().iconColor\">\n\t\t\t\t@if (settings().iconSet) {\n\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"right\">\n\t\t\t\t@if (settings().text) {\n\t\t\t\t\t<div class=\"text\">{{ settings().text }}</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"info\">{{ settings().info }}</div>\n\t\t\t</div>\n\t\t</mat-card-content>\n\t</mat-card>\n</div
|
|
4483
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriInfopointComponent, isStandalone: true, selector: "xiri-infopoint", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "<div class=\"point\" [class.isLink]=\"settings().url\" [routerLink]=\"settings().url\" [queryParams]=\"settings().urlParams\">\n\t@if (compact()) {\n\t\t<div class=\"card xiri-infopoint-flat\" [class.dense]=\"settings().dense\">\n\t\t\t<div class=\"icon\" [class]=\"settings().iconColor\">\n\t\t\t\t@if (settings().iconSet) {\n\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"right\">\n\t\t\t\t@if (settings().text) {\n\t\t\t\t\t<div class=\"text\">{{ settings().text }}</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"info\">{{ settings().info }}</div>\n\t\t\t</div>\n\t\t</div>\n\t} @else {\n\t\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t\t<mat-card-content [class.dense]=\"settings().dense\">\n\t\t\t\t<div class=\"icon\" [class]=\"settings().iconColor\">\n\t\t\t\t\t@if (settings().iconSet) {\n\t\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"right\">\n\t\t\t\t\t@if (settings().text) {\n\t\t\t\t\t\t<div class=\"text\">{{ settings().text }}</div>\n\t\t\t\t\t}\n\t\t\t\t\t<div class=\"info\">{{ settings().info }}</div>\n\t\t\t\t</div>\n\t\t\t</mat-card-content>\n\t\t</mat-card>\n\t}\n</div>\n", styles: [".point mat-card{background-color:var(--surface, #FFFFFF)}.point mat-card-content{display:flex;flex-direction:row;align-items:center;overflow:hidden}.point mat-card-content.dense{padding:6px 16px}:host(.compact) .point .xiri-infopoint-flat{display:flex;flex-direction:row;align-items:center;overflow:hidden;background:transparent;box-shadow:none;padding:var(--xiri-spacing-sm, 8px)}:host(.compact) .point .xiri-infopoint-flat.dense{padding:4px 8px}.point.isLink{cursor:pointer}.point.isLink mat-card{transition:background-color var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}.point.isLink:hover mat-card{background-color:var(--surface-variant, #DEE3EB)}.right{text-align:right;flex-grow:1;display:flex;flex-direction:column;justify-content:center;padding-left:7px}.right .text{color:var(--on-surface-variant, rgba(0, 0, 0, .54));font-size:var(--xiri-font-size-label)}.right .info{font-size:var(--xiri-font-size-display);font-weight:500}.icon{width:64px;min-width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center}.icon mat-icon{transform:scale(1.5)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4604
4484
|
}
|
|
4605
4485
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriInfopointComponent, decorators: [{
|
|
4606
4486
|
type: Component,
|
|
4607
|
-
args: [{ selector: 'xiri-infopoint', imports: [RouterLink, MatCard, MatCardContent, MatIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"point\" [class.isLink]=\"settings().url\" [routerLink]=\"settings().url\" [queryParams]=\"settings().urlParams\">\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content [class.dense]=\"settings().dense\">\n\t\t\t<div class=\"icon\" [class]=\"settings().iconColor\">\n\t\t\t\t@if (settings().iconSet) {\n\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"right\">\n\t\t\t\t@if (settings().text) {\n\t\t\t\t\t<div class=\"text\">{{ settings().text }}</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"info\">{{ settings().info }}</div>\n\t\t\t</div>\n\t\t</mat-card-content>\n\t</mat-card>\n</div
|
|
4487
|
+
args: [{ selector: 'xiri-infopoint', imports: [RouterLink, MatCard, MatCardContent, MatIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.compact]': 'compact()' }, template: "<div class=\"point\" [class.isLink]=\"settings().url\" [routerLink]=\"settings().url\" [queryParams]=\"settings().urlParams\">\n\t@if (compact()) {\n\t\t<div class=\"card xiri-infopoint-flat\" [class.dense]=\"settings().dense\">\n\t\t\t<div class=\"icon\" [class]=\"settings().iconColor\">\n\t\t\t\t@if (settings().iconSet) {\n\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"right\">\n\t\t\t\t@if (settings().text) {\n\t\t\t\t\t<div class=\"text\">{{ settings().text }}</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"info\">{{ settings().info }}</div>\n\t\t\t</div>\n\t\t</div>\n\t} @else {\n\t\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t\t<mat-card-content [class.dense]=\"settings().dense\">\n\t\t\t\t<div class=\"icon\" [class]=\"settings().iconColor\">\n\t\t\t\t\t@if (settings().iconSet) {\n\t\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"right\">\n\t\t\t\t\t@if (settings().text) {\n\t\t\t\t\t\t<div class=\"text\">{{ settings().text }}</div>\n\t\t\t\t\t}\n\t\t\t\t\t<div class=\"info\">{{ settings().info }}</div>\n\t\t\t\t</div>\n\t\t\t</mat-card-content>\n\t\t</mat-card>\n\t}\n</div>\n", styles: [".point mat-card{background-color:var(--surface, #FFFFFF)}.point mat-card-content{display:flex;flex-direction:row;align-items:center;overflow:hidden}.point mat-card-content.dense{padding:6px 16px}:host(.compact) .point .xiri-infopoint-flat{display:flex;flex-direction:row;align-items:center;overflow:hidden;background:transparent;box-shadow:none;padding:var(--xiri-spacing-sm, 8px)}:host(.compact) .point .xiri-infopoint-flat.dense{padding:4px 8px}.point.isLink{cursor:pointer}.point.isLink mat-card{transition:background-color var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}.point.isLink:hover mat-card{background-color:var(--surface-variant, #DEE3EB)}.right{text-align:right;flex-grow:1;display:flex;flex-direction:column;justify-content:center;padding-left:7px}.right .text{color:var(--on-surface-variant, rgba(0, 0, 0, .54));font-size:var(--xiri-font-size-label)}.right .info{font-size:var(--xiri-font-size-display);font-weight:500}.icon{width:64px;min-width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center}.icon mat-icon{transform:scale(1.5)}\n"] }]
|
|
4608
4488
|
}], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
4609
4489
|
|
|
4610
4490
|
class XiriListComponent {
|
|
@@ -4841,6 +4721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
4841
4721
|
class XiriLinksComponent {
|
|
4842
4722
|
constructor() {
|
|
4843
4723
|
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
4724
|
+
this.compact = computed(() => !!this.settings().compact, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
4844
4725
|
this.dialog = inject(MatDialog);
|
|
4845
4726
|
this.router = inject(Router);
|
|
4846
4727
|
}
|
|
@@ -4865,7 +4746,7 @@ class XiriLinksComponent {
|
|
|
4865
4746
|
return true;
|
|
4866
4747
|
}
|
|
4867
4748
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4868
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriLinksComponent, isStandalone: true, selector: "xiri-links", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-header>\n\t\t@if (settings().headerIcon) {\n\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t@if (settings().headerSub) {\n\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t}\n\t\t@if (settings().header) {\n\t\t\t<mat-card-title>{{ settings().header }}</mat-card-title>\n\t\t}\n\t</mat-card-header>\n\t<mat-card-content>\n\t\t<mat-nav-list>\n\t\t
|
|
4749
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriLinksComponent, isStandalone: true, selector: "xiri-links", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "@if (compact()) {\n\t<div class=\"card xiri-links-flat\">\n\t\t@if (settings().header || settings().headerIcon) {\n\t\t\t<div class=\"xiri-links-header\">\n\t\t\t\t@if (settings().headerIcon) {\n\t\t\t\t\t<div class=\"header-image\">\n\t\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"header-text\">\n\t\t\t\t\t@if (settings().header) {\n\t\t\t\t\t\t<div class=\"header-title\">{{ settings().header }}</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (settings().headerSub) {\n\t\t\t\t\t\t<div class=\"header-sub\">{{ settings().headerSub }}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\t\t<ng-container *ngTemplateOutlet=\"linkList\"></ng-container>\n\t</div>\n} @else {\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-header>\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (settings().headerSub) {\n\t\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t\t}\n\t\t\t@if (settings().header) {\n\t\t\t\t<mat-card-title>{{ settings().header }}</mat-card-title>\n\t\t\t}\n\t\t</mat-card-header>\n\t\t<mat-card-content>\n\t\t\t<ng-container *ngTemplateOutlet=\"linkList\"></ng-container>\n\t\t</mat-card-content>\n\t</mat-card>\n}\n\n<ng-template #linkList>\n\t<mat-nav-list>\n\t\t@for (item of settings().data; track item) {\n\t\t\t@if (!item.action || item.action == 'link') {\n\t\t\t\t<a mat-list-item [routerLink]=\"item.url\">\n\t\t\t\t\t<div matLine>{{ item.text }}</div>\n\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t<button mat-icon-button [attr.aria-label]=\"item.text\">\n\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</a>\n\t\t\t} @else if (item.action == 'dialog') {\n\t\t\t\t<mat-list-item (click)=\"openDialog( item ) && $event.stopPropagation()\" (keydown.enter)=\"openDialog( item )\" (keydown.space)=\"openDialog( item ); $event.preventDefault()\">\n\t\t\t\t\t<div matLine>{{ item.text }}</div>\n\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t<button mat-icon-button [attr.aria-label]=\"item.text\">\n\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</mat-list-item>\n\t\t\t}\n\t\t}\n\t</mat-nav-list>\n</ng-template>\n", styles: ["mat-card{margin-bottom:2rem}mat-card mat-card-content{margin:0 -1rem}mat-card mat-nav-list .mat-mdc-list-item{border-bottom:1px solid var(--outline-variant, #E7EBEE);text-decoration:underline}:host(.compact) .xiri-links-flat{background:transparent;box-shadow:none;padding:0;margin-bottom:0}:host(.compact) .xiri-links-header{display:flex;gap:var(--xiri-spacing-sm, 8px);align-items:center;margin-bottom:var(--xiri-spacing-sm, 8px)}:host(.compact) .xiri-links-header .header-title{font-size:var(--xiri-font-size-body);font-weight:500}:host(.compact) .xiri-links-header .header-sub{font-size:var(--xiri-font-size-label);color:var(--mat-sys-on-surface-variant, #555)}:host(.compact) mat-nav-list .mat-mdc-list-item{border-bottom:1px solid var(--outline-variant, #E7EBEE);text-decoration:underline}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4869
4750
|
}
|
|
4870
4751
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriLinksComponent, decorators: [{
|
|
4871
4752
|
type: Component,
|
|
@@ -4880,15 +4761,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
4880
4761
|
MatListItem,
|
|
4881
4762
|
RouterLink,
|
|
4882
4763
|
MatLine,
|
|
4883
|
-
MatIconButton
|
|
4764
|
+
MatIconButton,
|
|
4765
|
+
NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.compact]': 'compact()' }, template: "@if (compact()) {\n\t<div class=\"card xiri-links-flat\">\n\t\t@if (settings().header || settings().headerIcon) {\n\t\t\t<div class=\"xiri-links-header\">\n\t\t\t\t@if (settings().headerIcon) {\n\t\t\t\t\t<div class=\"header-image\">\n\t\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"header-text\">\n\t\t\t\t\t@if (settings().header) {\n\t\t\t\t\t\t<div class=\"header-title\">{{ settings().header }}</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (settings().headerSub) {\n\t\t\t\t\t\t<div class=\"header-sub\">{{ settings().headerSub }}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\t\t<ng-container *ngTemplateOutlet=\"linkList\"></ng-container>\n\t</div>\n} @else {\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-header>\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (settings().headerSub) {\n\t\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t\t}\n\t\t\t@if (settings().header) {\n\t\t\t\t<mat-card-title>{{ settings().header }}</mat-card-title>\n\t\t\t}\n\t\t</mat-card-header>\n\t\t<mat-card-content>\n\t\t\t<ng-container *ngTemplateOutlet=\"linkList\"></ng-container>\n\t\t</mat-card-content>\n\t</mat-card>\n}\n\n<ng-template #linkList>\n\t<mat-nav-list>\n\t\t@for (item of settings().data; track item) {\n\t\t\t@if (!item.action || item.action == 'link') {\n\t\t\t\t<a mat-list-item [routerLink]=\"item.url\">\n\t\t\t\t\t<div matLine>{{ item.text }}</div>\n\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t<button mat-icon-button [attr.aria-label]=\"item.text\">\n\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</a>\n\t\t\t} @else if (item.action == 'dialog') {\n\t\t\t\t<mat-list-item (click)=\"openDialog( item ) && $event.stopPropagation()\" (keydown.enter)=\"openDialog( item )\" (keydown.space)=\"openDialog( item ); $event.preventDefault()\">\n\t\t\t\t\t<div matLine>{{ item.text }}</div>\n\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t<button mat-icon-button [attr.aria-label]=\"item.text\">\n\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</mat-list-item>\n\t\t\t}\n\t\t}\n\t</mat-nav-list>\n</ng-template>\n", styles: ["mat-card{margin-bottom:2rem}mat-card mat-card-content{margin:0 -1rem}mat-card mat-nav-list .mat-mdc-list-item{border-bottom:1px solid var(--outline-variant, #E7EBEE);text-decoration:underline}:host(.compact) .xiri-links-flat{background:transparent;box-shadow:none;padding:0;margin-bottom:0}:host(.compact) .xiri-links-header{display:flex;gap:var(--xiri-spacing-sm, 8px);align-items:center;margin-bottom:var(--xiri-spacing-sm, 8px)}:host(.compact) .xiri-links-header .header-title{font-size:var(--xiri-font-size-body);font-weight:500}:host(.compact) .xiri-links-header .header-sub{font-size:var(--xiri-font-size-label);color:var(--mat-sys-on-surface-variant, #555)}:host(.compact) mat-nav-list .mat-mdc-list-item{border-bottom:1px solid var(--outline-variant, #E7EBEE);text-decoration:underline}\n"] }]
|
|
4884
4766
|
}], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
4885
4767
|
|
|
4886
4768
|
class XiriCardlinkComponent {
|
|
4887
4769
|
constructor() {
|
|
4888
4770
|
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
4771
|
+
this.compact = computed(() => !!this.settings().compact, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
4889
4772
|
}
|
|
4890
4773
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriCardlinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4891
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriCardlinkComponent, isStandalone: true, selector: "xiri-cardlink", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<a [routerLink]=\"settings().link\">\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\" matRipple>\n\t\t<mat-card-header>\n\t\t\t@if (settings().icon) {\n\t\t\t\t<div mat-card-avatar>\n\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (settings().text) {\n\t\t\t\t<mat-card-title>{{ settings().text }}</mat-card-title>\n\t\t\t}\n\t\t\t@if (settings().sub) {\n\t\t\t\t<mat-card-subtitle>{{ settings().sub }}</mat-card-subtitle>\n\t\t\t}\n\t\t</mat-card-header>\n\t</mat-card>\n</a>\n", styles: [":host{margin-bottom:2rem}mat-card{transition:background-color var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}mat-card:hover{background-color:var(--surface-variant, #DEE3EB)}.mat-mdc-card-avatar{background-color:var(--primary, #2892D9);border-radius:50%;color:var(--on-primary, white);text-align:center;width:4rem;height:4rem}.mat-mdc-card-avatar mat-icon{font-size:2rem;line-height:4rem;width:2rem;height:4rem}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4774
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriCardlinkComponent, isStandalone: true, selector: "xiri-cardlink", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "<a [routerLink]=\"settings().link\">\n\t@if (compact()) {\n\t\t<div class=\"card xiri-cardlink-flat\" matRipple>\n\t\t\t<mat-card-header>\n\t\t\t\t@if (settings().icon) {\n\t\t\t\t\t<div mat-card-avatar>\n\t\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (settings().text) {\n\t\t\t\t\t<mat-card-title>{{ settings().text }}</mat-card-title>\n\t\t\t\t}\n\t\t\t\t@if (settings().sub) {\n\t\t\t\t\t<mat-card-subtitle>{{ settings().sub }}</mat-card-subtitle>\n\t\t\t\t}\n\t\t\t</mat-card-header>\n\t\t</div>\n\t} @else {\n\t\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\" matRipple>\n\t\t\t<mat-card-header>\n\t\t\t\t@if (settings().icon) {\n\t\t\t\t\t<div mat-card-avatar>\n\t\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (settings().text) {\n\t\t\t\t\t<mat-card-title>{{ settings().text }}</mat-card-title>\n\t\t\t\t}\n\t\t\t\t@if (settings().sub) {\n\t\t\t\t\t<mat-card-subtitle>{{ settings().sub }}</mat-card-subtitle>\n\t\t\t\t}\n\t\t\t</mat-card-header>\n\t\t</mat-card>\n\t}\n</a>\n", styles: [":host{margin-bottom:2rem}mat-card{transition:background-color var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}mat-card:hover{background-color:var(--surface-variant, #DEE3EB)}:host(.compact){margin-bottom:0}:host(.compact) .xiri-cardlink-flat{background:transparent;box-shadow:none;padding:0;display:block;transition:background-color var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}:host(.compact) .xiri-cardlink-flat:hover{background-color:var(--surface-variant, #DEE3EB)}.mat-mdc-card-avatar{background-color:var(--primary, #2892D9);border-radius:50%;color:var(--on-primary, white);text-align:center;width:4rem;height:4rem}.mat-mdc-card-avatar mat-icon{font-size:2rem;line-height:4rem;width:2rem;height:4rem}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4892
4775
|
}
|
|
4893
4776
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriCardlinkComponent, decorators: [{
|
|
4894
4777
|
type: Component,
|
|
@@ -4899,7 +4782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
4899
4782
|
MatCardAvatar,
|
|
4900
4783
|
MatIcon,
|
|
4901
4784
|
MatCardTitle,
|
|
4902
|
-
MatCardSubtitle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a [routerLink]=\"settings().link\">\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\" matRipple>\n\t\t<mat-card-header>\n\t\t\t@if (settings().icon) {\n\t\t\t\t<div mat-card-avatar>\n\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (settings().text) {\n\t\t\t\t<mat-card-title>{{ settings().text }}</mat-card-title>\n\t\t\t}\n\t\t\t@if (settings().sub) {\n\t\t\t\t<mat-card-subtitle>{{ settings().sub }}</mat-card-subtitle>\n\t\t\t}\n\t\t</mat-card-header>\n\t</mat-card>\n</a>\n", styles: [":host{margin-bottom:2rem}mat-card{transition:background-color var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}mat-card:hover{background-color:var(--surface-variant, #DEE3EB)}.mat-mdc-card-avatar{background-color:var(--primary, #2892D9);border-radius:50%;color:var(--on-primary, white);text-align:center;width:4rem;height:4rem}.mat-mdc-card-avatar mat-icon{font-size:2rem;line-height:4rem;width:2rem;height:4rem}\n"] }]
|
|
4785
|
+
MatCardSubtitle], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.compact]': 'compact()' }, template: "<a [routerLink]=\"settings().link\">\n\t@if (compact()) {\n\t\t<div class=\"card xiri-cardlink-flat\" matRipple>\n\t\t\t<mat-card-header>\n\t\t\t\t@if (settings().icon) {\n\t\t\t\t\t<div mat-card-avatar>\n\t\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (settings().text) {\n\t\t\t\t\t<mat-card-title>{{ settings().text }}</mat-card-title>\n\t\t\t\t}\n\t\t\t\t@if (settings().sub) {\n\t\t\t\t\t<mat-card-subtitle>{{ settings().sub }}</mat-card-subtitle>\n\t\t\t\t}\n\t\t\t</mat-card-header>\n\t\t</div>\n\t} @else {\n\t\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\" matRipple>\n\t\t\t<mat-card-header>\n\t\t\t\t@if (settings().icon) {\n\t\t\t\t\t<div mat-card-avatar>\n\t\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (settings().text) {\n\t\t\t\t\t<mat-card-title>{{ settings().text }}</mat-card-title>\n\t\t\t\t}\n\t\t\t\t@if (settings().sub) {\n\t\t\t\t\t<mat-card-subtitle>{{ settings().sub }}</mat-card-subtitle>\n\t\t\t\t}\n\t\t\t</mat-card-header>\n\t\t</mat-card>\n\t}\n</a>\n", styles: [":host{margin-bottom:2rem}mat-card{transition:background-color var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}mat-card:hover{background-color:var(--surface-variant, #DEE3EB)}:host(.compact){margin-bottom:0}:host(.compact) .xiri-cardlink-flat{background:transparent;box-shadow:none;padding:0;display:block;transition:background-color var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}:host(.compact) .xiri-cardlink-flat:hover{background-color:var(--surface-variant, #DEE3EB)}.mat-mdc-card-avatar{background-color:var(--primary, #2892D9);border-radius:50%;color:var(--on-primary, white);text-align:center;width:4rem;height:4rem}.mat-mdc-card-avatar mat-icon{font-size:2rem;line-height:4rem;width:2rem;height:4rem}\n"] }]
|
|
4903
4786
|
}], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
4904
4787
|
|
|
4905
4788
|
class XiriTabsComponent {
|
|
@@ -5009,13 +4892,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
5009
4892
|
class XiriStatComponent {
|
|
5010
4893
|
constructor() {
|
|
5011
4894
|
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
4895
|
+
this.compact = computed(() => !!this.settings().compact, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
5012
4896
|
}
|
|
5013
4897
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriStatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5014
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriStatComponent, isStandalone: true, selector: "xiri-stat", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"stat-card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-content>\n\t\t<div class=\"stat-content\">\n\t\t
|
|
4898
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriStatComponent, isStandalone: true, selector: "xiri-stat", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "@if (compact()) {\n\t<div class=\"stat-flat\">\n\t\t<ng-container *ngTemplateOutlet=\"statBody\"></ng-container>\n\t</div>\n} @else {\n\t<mat-card class=\"stat-card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content>\n\t\t\t<ng-container *ngTemplateOutlet=\"statBody\"></ng-container>\n\t\t</mat-card-content>\n\t</mat-card>\n}\n\n<ng-template #statBody>\n\t<div class=\"stat-content\">\n\t\t@if (settings().icon) {\n\t\t\t<div class=\"stat-icon\">\n\t\t\t\t<mat-icon [class]=\"settings().iconColor || 'primary'\">{{ settings().icon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"stat-data\">\n\t\t\t<div class=\"stat-value\" [class]=\"settings().color || ''\">\n\t\t\t\t@if (settings().prefix) {\n\t\t\t\t\t<span class=\"prefix\">{{ settings().prefix }}</span>\n\t\t\t\t}\n\t\t\t\t{{ settings().value }}\n\t\t\t\t@if (settings().suffix) {\n\t\t\t\t\t<span class=\"suffix\">{{ settings().suffix }}</span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"stat-label\">{{ settings().label }}</div>\n\t\t</div>\n\t\t@if (settings().trend) {\n\t\t\t<div class=\"stat-trend\" [class]=\"settings().trend.direction\">\n\t\t\t\t<mat-icon>\n\t\t\t\t\t@switch (settings().trend.direction) {\n\t\t\t\t\t\t@case ('up') { trending_up }\n\t\t\t\t\t\t@case ('down') { trending_down }\n\t\t\t\t\t\t@default { trending_flat }\n\t\t\t\t\t}\n\t\t\t\t</mat-icon>\n\t\t\t\t<span>{{ settings().trend.value > 0 ? '+' : '' }}{{ settings().trend.value }}%</span>\n\t\t\t</div>\n\t\t}\n\t</div>\n</ng-template>\n", styles: [":host{display:block;animation:scaleIn var(--xiri-duration-normal) var(--xiri-easing-decelerate) both}:host-context(.xiri-stat-grid):nth-child(1){animation-delay:0ms}:host-context(.xiri-stat-grid):nth-child(2){animation-delay:50ms}:host-context(.xiri-stat-grid):nth-child(3){animation-delay:.1s}:host-context(.xiri-stat-grid):nth-child(4){animation-delay:.15s}:host-context(.xiri-stat-grid):nth-child(5){animation-delay:.2s}:host-context(.xiri-stat-grid):nth-child(6){animation-delay:.25s}:host-context(.xiri-stat-grid):nth-child(7){animation-delay:.3s}:host-context(.xiri-stat-grid):nth-child(8){animation-delay:.35s}:host-context(.xiri-stat-grid):nth-child(9){animation-delay:.4s}:host-context(.xiri-stat-grid):nth-child(10){animation-delay:.45s}:host-context(.xiri-stat-grid):nth-child(11){animation-delay:.5s}:host-context(.xiri-stat-grid):nth-child(12){animation-delay:.55s}.stat-card{padding:0}.stat-card mat-card-content{padding:var(--xiri-spacing-md) var(--xiri-spacing-md)}:host(.compact){animation:none}:host(.compact) .stat-flat{padding:var(--xiri-spacing-sm) var(--xiri-spacing-sm);background:transparent;box-shadow:none}:host(.compact) .stat-icon mat-icon{font-size:24px;width:24px;height:24px}:host(.compact) .stat-value{font-size:1.25rem;font-weight:600}:host(.compact) .stat-value .prefix,:host(.compact) .stat-value .suffix{font-size:var(--xiri-font-size-label)}:host(.compact) .stat-label{font-size:var(--xiri-font-size-label)}.stat-content{display:flex;align-items:center;gap:var(--xiri-spacing-md);min-width:0}.stat-icon{flex-shrink:0}.stat-icon mat-icon{font-size:36px;width:36px;height:36px;opacity:.8}.stat-data{flex:1;min-width:0}.stat-value{font-size:1.75rem;font-weight:600;line-height:1.2;color:var(--on-surface, #1B1B1F);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat-value .prefix,.stat-value .suffix{font-size:var(--xiri-font-size-body);font-weight:400;opacity:.7}.stat-label{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #44474F);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat-trend{display:flex;align-items:center;flex-shrink:0;gap:2px;font-size:var(--xiri-font-size-label);font-weight:500;padding:var(--xiri-spacing-xs) var(--xiri-spacing-sm);border-radius:var(--xiri-radius-xs)}.stat-trend mat-icon{font-size:18px;width:18px;height:18px}.stat-trend.up{color:var(--color-success, #2ECC71);background-color:color-mix(in srgb,var(--color-success, #2ECC71) 10%,transparent)}.stat-trend.down{color:var(--error, #E74C3C);background-color:color-mix(in srgb,var(--error, #E74C3C) 10%,transparent)}.stat-trend.neutral{color:var(--on-surface-variant, #44474F);background-color:var(--surface-variant, #DEE3EB)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5015
4899
|
}
|
|
5016
4900
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriStatComponent, decorators: [{
|
|
5017
4901
|
type: Component,
|
|
5018
|
-
args: [{ selector: 'xiri-stat', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, MatCard, MatCardContent], template: "<mat-card class=\"stat-card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-content>\n\t\t<div class=\"stat-content\">\n\t\t
|
|
4902
|
+
args: [{ selector: 'xiri-stat', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, MatCard, MatCardContent, NgTemplateOutlet], host: { '[class.compact]': 'compact()' }, template: "@if (compact()) {\n\t<div class=\"stat-flat\">\n\t\t<ng-container *ngTemplateOutlet=\"statBody\"></ng-container>\n\t</div>\n} @else {\n\t<mat-card class=\"stat-card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content>\n\t\t\t<ng-container *ngTemplateOutlet=\"statBody\"></ng-container>\n\t\t</mat-card-content>\n\t</mat-card>\n}\n\n<ng-template #statBody>\n\t<div class=\"stat-content\">\n\t\t@if (settings().icon) {\n\t\t\t<div class=\"stat-icon\">\n\t\t\t\t<mat-icon [class]=\"settings().iconColor || 'primary'\">{{ settings().icon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"stat-data\">\n\t\t\t<div class=\"stat-value\" [class]=\"settings().color || ''\">\n\t\t\t\t@if (settings().prefix) {\n\t\t\t\t\t<span class=\"prefix\">{{ settings().prefix }}</span>\n\t\t\t\t}\n\t\t\t\t{{ settings().value }}\n\t\t\t\t@if (settings().suffix) {\n\t\t\t\t\t<span class=\"suffix\">{{ settings().suffix }}</span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"stat-label\">{{ settings().label }}</div>\n\t\t</div>\n\t\t@if (settings().trend) {\n\t\t\t<div class=\"stat-trend\" [class]=\"settings().trend.direction\">\n\t\t\t\t<mat-icon>\n\t\t\t\t\t@switch (settings().trend.direction) {\n\t\t\t\t\t\t@case ('up') { trending_up }\n\t\t\t\t\t\t@case ('down') { trending_down }\n\t\t\t\t\t\t@default { trending_flat }\n\t\t\t\t\t}\n\t\t\t\t</mat-icon>\n\t\t\t\t<span>{{ settings().trend.value > 0 ? '+' : '' }}{{ settings().trend.value }}%</span>\n\t\t\t</div>\n\t\t}\n\t</div>\n</ng-template>\n", styles: [":host{display:block;animation:scaleIn var(--xiri-duration-normal) var(--xiri-easing-decelerate) both}:host-context(.xiri-stat-grid):nth-child(1){animation-delay:0ms}:host-context(.xiri-stat-grid):nth-child(2){animation-delay:50ms}:host-context(.xiri-stat-grid):nth-child(3){animation-delay:.1s}:host-context(.xiri-stat-grid):nth-child(4){animation-delay:.15s}:host-context(.xiri-stat-grid):nth-child(5){animation-delay:.2s}:host-context(.xiri-stat-grid):nth-child(6){animation-delay:.25s}:host-context(.xiri-stat-grid):nth-child(7){animation-delay:.3s}:host-context(.xiri-stat-grid):nth-child(8){animation-delay:.35s}:host-context(.xiri-stat-grid):nth-child(9){animation-delay:.4s}:host-context(.xiri-stat-grid):nth-child(10){animation-delay:.45s}:host-context(.xiri-stat-grid):nth-child(11){animation-delay:.5s}:host-context(.xiri-stat-grid):nth-child(12){animation-delay:.55s}.stat-card{padding:0}.stat-card mat-card-content{padding:var(--xiri-spacing-md) var(--xiri-spacing-md)}:host(.compact){animation:none}:host(.compact) .stat-flat{padding:var(--xiri-spacing-sm) var(--xiri-spacing-sm);background:transparent;box-shadow:none}:host(.compact) .stat-icon mat-icon{font-size:24px;width:24px;height:24px}:host(.compact) .stat-value{font-size:1.25rem;font-weight:600}:host(.compact) .stat-value .prefix,:host(.compact) .stat-value .suffix{font-size:var(--xiri-font-size-label)}:host(.compact) .stat-label{font-size:var(--xiri-font-size-label)}.stat-content{display:flex;align-items:center;gap:var(--xiri-spacing-md);min-width:0}.stat-icon{flex-shrink:0}.stat-icon mat-icon{font-size:36px;width:36px;height:36px;opacity:.8}.stat-data{flex:1;min-width:0}.stat-value{font-size:1.75rem;font-weight:600;line-height:1.2;color:var(--on-surface, #1B1B1F);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat-value .prefix,.stat-value .suffix{font-size:var(--xiri-font-size-body);font-weight:400;opacity:.7}.stat-label{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #44474F);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat-trend{display:flex;align-items:center;flex-shrink:0;gap:2px;font-size:var(--xiri-font-size-label);font-weight:500;padding:var(--xiri-spacing-xs) var(--xiri-spacing-sm);border-radius:var(--xiri-radius-xs)}.stat-trend mat-icon{font-size:18px;width:18px;height:18px}.stat-trend.up{color:var(--color-success, #2ECC71);background-color:color-mix(in srgb,var(--color-success, #2ECC71) 10%,transparent)}.stat-trend.down{color:var(--error, #E74C3C);background-color:color-mix(in srgb,var(--error, #E74C3C) 10%,transparent)}.stat-trend.neutral{color:var(--on-surface-variant, #44474F);background-color:var(--surface-variant, #DEE3EB)}\n"] }]
|
|
5019
4903
|
}], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
5020
4904
|
|
|
5021
4905
|
class XiriSectionComponent {
|
|
@@ -5059,11 +4943,11 @@ class XiriDynComponentComponent {
|
|
|
5059
4943
|
}, ...(ngDevMode ? [{ debugName: "dataInt" }] : /* istanbul ignore next */ []));
|
|
5060
4944
|
}
|
|
5061
4945
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDynComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5062
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriDynComponentComponent, isStandalone: true, selector: "xiri-dyncomponent", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (obj of dataInt(); track obj.id) {\n\n\t@switch (obj.type) {\n\t\t@case ('card') {\n\t\t\t<div class=\"xcol xcol-md-6 xcol-xl-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-card [settings]=\"obj.data\"></xiri-card>\n\t\t\t</div>\n\t\t}\n\t\t@case ('buttonline') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-buttonline [settings]=\"obj.data\" [filterData]=\"filterData()\"></xiri-buttonline>\n\t\t\t</div>\n\t\t}\n\t\t@case ('table') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-table [settings]=\"obj.data\" [filterData]=\"filterData()\" [dyncomponent]=\"selfdyncomponent\"></xiri-table>\n\t\t\t</div>\n\t\t}\n\t\t@case ('cardlink') {\n\t\t\t<div class=\"xcol xcol-md-4 xcol-lg-3\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-cardlink [settings]=\"obj.data\"></xiri-cardlink>\n\t\t\t</div>\n\t\t}\n\t\t@case ('links') {\n\t\t\t<div class=\"xcol xcol-md-4 xcol-lg-3\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-links [settings]=\"obj.data\"></xiri-links>\n\t\t\t</div>\n\t\t}\n\t\t@case ('form') {\n\t\t\t<div class=\"xcol form\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<mat-card class=\"mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t\t\t\t@if (obj.data.header) {\n\t\t\t\t\t\t<mat-card-header>\n\t\t\t\t\t\t\t<mat-card-title>{{ obj.data.header }}</mat-card-title>\n\t\t\t\t\t\t</mat-card-header>\n\t\t\t\t\t}\n\t\t\t\t\t<mat-card-content>\n\t\t\t\t\t\t<xiri-form [settings]=\"obj.data\"></xiri-form>\n\t\t\t\t\t</mat-card-content>\n\t\t\t\t</mat-card>\n\t\t\t</div>\n\t\t}\n\t\t@case ('query') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-query [settings]=\"obj.data\" [dyncomponent]=\"selfdyncomponent\"></xiri-query>\n\t\t\t</div>\n\t\t}\n\t\t@case ('stepper') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stepper [settings]=\"obj.data\"></xiri-stepper>\n\t\t\t</div>\n\t\t}\n\t\t@case ('header') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-header [settings]=\"obj.data\"></xiri-header>\n\t\t\t</div>\n\t\t}\n\t\t@case ('list') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-list [settings]=\"obj.data\"></xiri-list>\n\t\t\t</div>\n\t\t}\n\t\t@case ('spacer') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"spacer\" [class]=\"obj.display\"> </div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('container') {\n\t\t\t@if (obj.data) {\n\t\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t\t<xiri-dyncomponent [data]=\"obj.data\" [dyncomponent]=\"dyncomponent()\" class=\"row\"></xiri-dyncomponent>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t\t@case ('infopoint') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-infopoint [settings]=\"obj.data\"></xiri-infopoint>\n\t\t\t</div>\n\t\t}\n\t\t@case ('multiprogress') {\n\t\t\t<div class=\"xcol xcol-md-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-multiprogress [settings]=\"obj.data\"></xiri-multiprogress> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('imagetext') {\n\t\t\t<div class=\"xcol xcol-md-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-imagetext [settings]=\"obj.data\"></xiri-imagetext> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('tabs') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-tabs [settings]=\"obj.data\" [filterData]=\"filterData()\" [dyncomponent]=\"selfdyncomponent\"></xiri-tabs>\n\t\t\t</div>\n\t\t}\n\t\t@case ('expansion') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-expansion [settings]=\"obj.data\" [filterData]=\"filterData()\" [dyncomponent]=\"selfdyncomponent\"></xiri-expansion>\n\t\t\t</div>\n\t\t}\n\t\t@case ('infotext') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"infotext\">{{ obj.data.text }}</div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('html') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"html\" [innerHtml]=\"obj.data.html | safeHtml\"></div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat') {\n\t\t\t<div class=\"xcol xcol-md-6 xcol-xl-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stat [settings]=\"obj.data\"></xiri-stat>\n\t\t\t</div>\n\t\t}\n\t\t@case ('empty-state') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-empty-state [settings]=\"obj.data\"></xiri-empty-state>\n\t\t\t</div>\n\t\t}\n\t\t@case ('timeline') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-timeline [settings]=\"obj.data\"></xiri-timeline> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('page-header') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-page-header [settings]=\"obj.data\"></xiri-page-header> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('section') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-section [settings]=\"obj.data\" [dyncomponent]=\"dyncomponent()\"></xiri-section>\n\t\t\t</div>\n\t\t}\n\t\t@case ('divider') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-divider [settings]=\"obj.data\"></xiri-divider> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat-grid') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-stat-grid [settings]=\"obj.data\"></xiri-stat-grid> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('toolbar') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-toolbar [settings]=\"obj.data\" [filterData]=\"filterData()\"></xiri-toolbar> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('description-list') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-description-list [settings]=\"obj.data\"></xiri-description-list> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('barchart') {\n\t\t\t<div class=\"xcol xcol-md-6 xcol-xl-3\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-barchart [mode]=\"obj.mode\" [settings]=\"obj.data\"></xiri-barchart> }\n\t\t\t</div>\n\t\t}\n\t\t@default {\n\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent() || defaultComponentUnknown; context: { $implicit: obj, filterData: filterData() }\"></ng-container>\n\t\t}\n\t}\n}\n\n<ng-template #selfdyncomponent let-obj>\n\t<xiri-dyncomponent [data]=\"obj.data\" [filterData]=\"obj.filterData\" [dyncomponent]=\"dyncomponent()\" class=\"xrow\"></xiri-dyncomponent>\n</ng-template>\n<ng-template #defaultComponentUnknown let-obj>\n\t<div class=\"xcol\">unknown type: {{ obj.type }}</div>\n</ng-template>\n", styles: [".spacer.double{padding-top:1rem}.form mat-card-header{padding-bottom:1rem}\n"], dependencies: [{ kind: "component", type: XiriDynComponentComponent, selector: "xiri-dyncomponent", inputs: ["data", "filterData", "dyncomponent"] }, { kind: "component", type: XiriCardComponent, selector: "xiri-card", inputs: ["settings"] }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: XiriTableComponent, selector: "xiri-table", inputs: ["dyncomponent", "settings", "filterData"], outputs: ["clickedRow"] }, { kind: "component", type: XiriCardlinkComponent, selector: "xiri-cardlink", inputs: ["settings"] }, { kind: "component", type: XiriLinksComponent, selector: "xiri-links", inputs: ["settings"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: XiriFormComponent, selector: "xiri-form", inputs: ["settings"] }, { kind: "component", type: XiriQueryComponent, selector: "xiri-query", inputs: ["settings", "dyncomponent"], outputs: ["change"] }, { kind: "component", type: XiriStepperComponent, selector: "xiri-stepper", inputs: ["settings"] }, { kind: "component", type: XiriHeaderComponent, selector: "xiri-header", inputs: ["settings"] }, { kind: "component", type: XiriListComponent, selector: "xiri-list", inputs: ["settings"] }, { kind: "component", type: XiriInfopointComponent, selector: "xiri-infopoint", inputs: ["settings"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XiriTabsComponent, selector: "xiri-tabs", inputs: ["settings", "filterData", "dyncomponent"] }, { kind: "component", type: XiriExpansionComponent, selector: "xiri-expansion", inputs: ["settings", "filterData", "dyncomponent"] }, { kind: "component", type: XiriStatComponent, selector: "xiri-stat", inputs: ["settings"] }, { kind: "component", type: XiriEmptyStateComponent, selector: "xiri-empty-state", inputs: ["settings"], outputs: ["buttonResult"] }, { kind: "component", type: XiriSectionComponent, selector: "xiri-section", inputs: ["settings", "dyncomponent"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [Promise.resolve().then(function () { return multiprogress_component; }).then(m => m.XiriMultiprogressComponent)], () => [Promise.resolve().then(function () { return imagetext_component; }).then(m => m.XiriImagetextComponent)], () => [Promise.resolve().then(function () { return timeline_component; }).then(m => m.XiriTimelineComponent)], () => [Promise.resolve().then(function () { return pageHeader_component; }).then(m => m.XiriPageHeaderComponent)], () => [Promise.resolve().then(function () { return divider_component; }).then(m => m.XiriDividerComponent)], () => [Promise.resolve().then(function () { return statGrid_component; }).then(m => m.XiriStatGridComponent)], () => [Promise.resolve().then(function () { return toolbar_component; }).then(m => m.XiriToolbarComponent)], () => [Promise.resolve().then(function () { return descriptionList_component; }).then(m => m.XiriDescriptionListComponent)], () => [Promise.resolve().then(function () { return barchart_component; }).then(m => m.XiriBarChartComponent)]] }); }
|
|
4946
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriDynComponentComponent, isStandalone: true, selector: "xiri-dyncomponent", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (obj of dataInt(); track obj.id) {\n\n\t@switch (obj.type) {\n\t\t@case ('card') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-6 xcol-xl-4'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-card [settings]=\"obj.data\"></xiri-card>\n\t\t\t</div>\n\t\t}\n\t\t@case ('buttonline') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-buttonline [settings]=\"obj.data\" [filterData]=\"filterData()\"></xiri-buttonline>\n\t\t\t</div>\n\t\t}\n\t\t@case ('table') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-table [settings]=\"obj.data\" [filterData]=\"filterData()\" [dyncomponent]=\"selfdyncomponent\"></xiri-table>\n\t\t\t</div>\n\t\t}\n\t\t@case ('cardlink') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-4 xcol-lg-3'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-cardlink [settings]=\"obj.data\"></xiri-cardlink>\n\t\t\t</div>\n\t\t}\n\t\t@case ('links') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-4 xcol-lg-3'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-links [settings]=\"obj.data\"></xiri-links>\n\t\t\t</div>\n\t\t}\n\t\t@case ('form') {\n\t\t\t<div [class]=\"obj.display || 'xcol form'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<mat-card class=\"mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t\t\t\t@if (obj.data.header) {\n\t\t\t\t\t\t<mat-card-header>\n\t\t\t\t\t\t\t<mat-card-title>{{ obj.data.header }}</mat-card-title>\n\t\t\t\t\t\t</mat-card-header>\n\t\t\t\t\t}\n\t\t\t\t\t<mat-card-content>\n\t\t\t\t\t\t<xiri-form [settings]=\"obj.data\"></xiri-form>\n\t\t\t\t\t</mat-card-content>\n\t\t\t\t</mat-card>\n\t\t\t</div>\n\t\t}\n\t\t@case ('query') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-query [settings]=\"obj.data\" [dyncomponent]=\"selfdyncomponent\"></xiri-query>\n\t\t\t</div>\n\t\t}\n\t\t@case ('stepper') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stepper [settings]=\"obj.data\"></xiri-stepper>\n\t\t\t</div>\n\t\t}\n\t\t@case ('header') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-header [settings]=\"obj.data\"></xiri-header>\n\t\t\t</div>\n\t\t}\n\t\t@case ('list') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-list [settings]=\"obj.data\"></xiri-list>\n\t\t\t</div>\n\t\t}\n\t\t@case ('spacer') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"spacer\"> </div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('container') {\n\t\t\t@if (obj.data) {\n\t\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t\t<xiri-dyncomponent [data]=\"obj.data\" [dyncomponent]=\"dyncomponent()\" class=\"row\"></xiri-dyncomponent>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t\t@case ('infopoint') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-infopoint [settings]=\"obj.data\"></xiri-infopoint>\n\t\t\t</div>\n\t\t}\n\t\t@case ('multiprogress') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-4'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-multiprogress [settings]=\"obj.data\"></xiri-multiprogress> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('imagetext') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-4'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-imagetext [settings]=\"obj.data\"></xiri-imagetext> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('tabs') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-tabs [settings]=\"obj.data\" [filterData]=\"filterData()\" [dyncomponent]=\"selfdyncomponent\"></xiri-tabs>\n\t\t\t</div>\n\t\t}\n\t\t@case ('expansion') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-expansion [settings]=\"obj.data\" [filterData]=\"filterData()\" [dyncomponent]=\"selfdyncomponent\"></xiri-expansion>\n\t\t\t</div>\n\t\t}\n\t\t@case ('infotext') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"infotext\">{{ obj.data.text }}</div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('html') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"html\" [innerHtml]=\"obj.data.html | safeHtml\"></div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-6 xcol-xl-4'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stat [settings]=\"obj.data\"></xiri-stat>\n\t\t\t</div>\n\t\t}\n\t\t@case ('empty-state') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-empty-state [settings]=\"obj.data\"></xiri-empty-state>\n\t\t\t</div>\n\t\t}\n\t\t@case ('timeline') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-timeline [settings]=\"obj.data\"></xiri-timeline> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('page-header') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-page-header [settings]=\"obj.data\"></xiri-page-header> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('section') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-section [settings]=\"obj.data\" [dyncomponent]=\"dyncomponent()\"></xiri-section>\n\t\t\t</div>\n\t\t}\n\t\t@case ('divider') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-divider [settings]=\"obj.data\"></xiri-divider> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat-grid') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-stat-grid [settings]=\"obj.data\"></xiri-stat-grid> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('toolbar') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-toolbar [settings]=\"obj.data\" [filterData]=\"filterData()\"></xiri-toolbar> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('description-list') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-description-list [settings]=\"obj.data\"></xiri-description-list> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('barchart') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-6 xcol-xl-3'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-barchart [mode]=\"obj.mode\" [settings]=\"obj.data\"></xiri-barchart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('linechart') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-6 xcol-xl-3'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-linechart [settings]=\"obj.data\"></xiri-linechart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('piechart') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-6 xcol-xl-3'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-piechart [settings]=\"obj.data\"></xiri-piechart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('gaugechart') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-6 xcol-xl-3'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-gaugechart [settings]=\"obj.data\"></xiri-gaugechart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('heatmap') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-heatmap [settings]=\"obj.data\"></xiri-heatmap> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('calendar') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-calendar [settings]=\"obj.data\"></xiri-calendar> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('tree') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-tree [settings]=\"obj.data\"></xiri-tree> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('sankey') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-sankey [settings]=\"obj.data\"></xiri-sankey> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('gantt') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-gantt [settings]=\"obj.data\"></xiri-gantt> }\n\t\t\t</div>\n\t\t}\n\t\t@default {\n\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent() || defaultComponentUnknown; context: { $implicit: obj, filterData: filterData() }\"></ng-container>\n\t\t}\n\t}\n}\n\n<ng-template #selfdyncomponent let-obj>\n\t<xiri-dyncomponent [data]=\"obj.data\" [filterData]=\"obj.filterData\" [dyncomponent]=\"dyncomponent()\" class=\"xrow\"></xiri-dyncomponent>\n</ng-template>\n<ng-template #defaultComponentUnknown let-obj>\n\t<div class=\"xcol\">unknown type: {{ obj.type }}</div>\n</ng-template>\n", styles: [".spacer.double{padding-top:1rem}.form mat-card-header{padding-bottom:1rem}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => XiriDynComponentComponent), selector: "xiri-dyncomponent", inputs: ["data", "filterData", "dyncomponent"] }, { kind: "component", type: i0.forwardRef(() => XiriCardComponent), selector: "xiri-card", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriButtonlineComponent), selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: i0.forwardRef(() => XiriTableComponent), selector: "xiri-table", inputs: ["dyncomponent", "settings", "filterData"], outputs: ["clickedRow"] }, { kind: "component", type: i0.forwardRef(() => XiriCardlinkComponent), selector: "xiri-cardlink", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriLinksComponent), selector: "xiri-links", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => MatCard), selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i0.forwardRef(() => MatCardHeader), selector: "mat-card-header" }, { kind: "directive", type: i0.forwardRef(() => MatCardTitle), selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i0.forwardRef(() => MatCardContent), selector: "mat-card-content" }, { kind: "component", type: i0.forwardRef(() => XiriFormComponent), selector: "xiri-form", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriQueryComponent), selector: "xiri-query", inputs: ["settings", "dyncomponent"], outputs: ["change"] }, { kind: "component", type: i0.forwardRef(() => XiriStepperComponent), selector: "xiri-stepper", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriHeaderComponent), selector: "xiri-header", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriListComponent), selector: "xiri-list", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriInfopointComponent), selector: "xiri-infopoint", inputs: ["settings"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => XiriTabsComponent), selector: "xiri-tabs", inputs: ["settings", "filterData", "dyncomponent"] }, { kind: "component", type: i0.forwardRef(() => XiriExpansionComponent), selector: "xiri-expansion", inputs: ["settings", "filterData", "dyncomponent"] }, { kind: "component", type: i0.forwardRef(() => XiriStatComponent), selector: "xiri-stat", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriEmptyStateComponent), selector: "xiri-empty-state", inputs: ["settings"], outputs: ["buttonResult"] }, { kind: "component", type: i0.forwardRef(() => XiriSectionComponent), selector: "xiri-section", inputs: ["settings", "dyncomponent"] }, { kind: "pipe", type: i0.forwardRef(() => SafehtmlPipe), name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [Promise.resolve().then(function () { return multiprogress_component; }).then(m => m.XiriMultiprogressComponent)], () => [Promise.resolve().then(function () { return imagetext_component; }).then(m => m.XiriImagetextComponent)], () => [Promise.resolve().then(function () { return timeline_component; }).then(m => m.XiriTimelineComponent)], () => [Promise.resolve().then(function () { return pageHeader_component; }).then(m => m.XiriPageHeaderComponent)], () => [Promise.resolve().then(function () { return divider_component; }).then(m => m.XiriDividerComponent)], () => [Promise.resolve().then(function () { return statGrid_component; }).then(m => m.XiriStatGridComponent)], () => [Promise.resolve().then(function () { return toolbar_component; }).then(m => m.XiriToolbarComponent)], () => [Promise.resolve().then(function () { return descriptionList_component; }).then(m => m.XiriDescriptionListComponent)], () => [Promise.resolve().then(function () { return barchart_component; }).then(m => m.XiriBarChartComponent)], () => [Promise.resolve().then(function () { return linechart_component; }).then(m => m.XiriLineChartComponent)], () => [Promise.resolve().then(function () { return piechart_component; }).then(m => m.XiriPieChartComponent)], () => [Promise.resolve().then(function () { return gaugechart_component; }).then(m => m.XiriGaugeChartComponent)], () => [Promise.resolve().then(function () { return heatmap_component; }).then(m => m.XiriHeatmapComponent)], () => [Promise.resolve().then(function () { return calendar_component; }).then(m => m.XiriCalendarComponent)], () => [Promise.resolve().then(function () { return tree_component; }).then(m => m.XiriTreeComponent)], () => [Promise.resolve().then(function () { return sankey_component; }).then(m => m.XiriSankeyComponent)], () => [Promise.resolve().then(function () { return gantt_component; }).then(m => m.XiriGanttComponent)]] }); }
|
|
5063
4947
|
}
|
|
5064
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.2", ngImport: i0, type: XiriDynComponentComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return multiprogress_component; }).then(m => m.XiriMultiprogressComponent), Promise.resolve().then(function () { return imagetext_component; }).then(m => m.XiriImagetextComponent), Promise.resolve().then(function () { return timeline_component; }).then(m => m.XiriTimelineComponent), Promise.resolve().then(function () { return pageHeader_component; }).then(m => m.XiriPageHeaderComponent), Promise.resolve().then(function () { return divider_component; }).then(m => m.XiriDividerComponent), Promise.resolve().then(function () { return statGrid_component; }).then(m => m.XiriStatGridComponent), Promise.resolve().then(function () { return toolbar_component; }).then(m => m.XiriToolbarComponent), Promise.resolve().then(function () { return descriptionList_component; }).then(m => m.XiriDescriptionListComponent), Promise.resolve().then(function () { return barchart_component; }).then(m => m.XiriBarChartComponent)], resolveMetadata: (XiriMultiprogressComponent, XiriImagetextComponent, XiriTimelineComponent, XiriPageHeaderComponent, XiriDividerComponent, XiriStatGridComponent, XiriToolbarComponent, XiriDescriptionListComponent, XiriBarChartComponent) => ({ decorators: [{
|
|
4948
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.2", ngImport: i0, type: XiriDynComponentComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return multiprogress_component; }).then(m => m.XiriMultiprogressComponent), Promise.resolve().then(function () { return imagetext_component; }).then(m => m.XiriImagetextComponent), Promise.resolve().then(function () { return timeline_component; }).then(m => m.XiriTimelineComponent), Promise.resolve().then(function () { return pageHeader_component; }).then(m => m.XiriPageHeaderComponent), Promise.resolve().then(function () { return divider_component; }).then(m => m.XiriDividerComponent), Promise.resolve().then(function () { return statGrid_component; }).then(m => m.XiriStatGridComponent), Promise.resolve().then(function () { return toolbar_component; }).then(m => m.XiriToolbarComponent), Promise.resolve().then(function () { return descriptionList_component; }).then(m => m.XiriDescriptionListComponent), Promise.resolve().then(function () { return barchart_component; }).then(m => m.XiriBarChartComponent), Promise.resolve().then(function () { return linechart_component; }).then(m => m.XiriLineChartComponent), Promise.resolve().then(function () { return piechart_component; }).then(m => m.XiriPieChartComponent), Promise.resolve().then(function () { return gaugechart_component; }).then(m => m.XiriGaugeChartComponent), Promise.resolve().then(function () { return heatmap_component; }).then(m => m.XiriHeatmapComponent), Promise.resolve().then(function () { return calendar_component; }).then(m => m.XiriCalendarComponent), Promise.resolve().then(function () { return tree_component; }).then(m => m.XiriTreeComponent), Promise.resolve().then(function () { return sankey_component; }).then(m => m.XiriSankeyComponent), Promise.resolve().then(function () { return gantt_component; }).then(m => m.XiriGanttComponent)], resolveMetadata: (XiriMultiprogressComponent, XiriImagetextComponent, XiriTimelineComponent, XiriPageHeaderComponent, XiriDividerComponent, XiriStatGridComponent, XiriToolbarComponent, XiriDescriptionListComponent, XiriBarChartComponent, XiriLineChartComponent, XiriPieChartComponent, XiriGaugeChartComponent, XiriHeatmapComponent, XiriCalendarComponent, XiriTreeComponent, XiriSankeyComponent, XiriGanttComponent) => ({ decorators: [{
|
|
5065
4949
|
type: Component,
|
|
5066
|
-
args: [{ selector: 'xiri-dyncomponent', changeDetection: ChangeDetectionStrategy.OnPush, imports: [XiriCardComponent,
|
|
4950
|
+
args: [{ selector: 'xiri-dyncomponent', changeDetection: ChangeDetectionStrategy.OnPush, imports: [forwardRef(() => XiriCardComponent),
|
|
5067
4951
|
XiriButtonlineComponent,
|
|
5068
4952
|
XiriTableComponent,
|
|
5069
4953
|
XiriCardlinkComponent,
|
|
@@ -5093,9 +4977,158 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.2", ng
|
|
|
5093
4977
|
XiriStatGridComponent,
|
|
5094
4978
|
XiriToolbarComponent,
|
|
5095
4979
|
XiriDescriptionListComponent,
|
|
5096
|
-
XiriBarChartComponent
|
|
4980
|
+
XiriBarChartComponent,
|
|
4981
|
+
XiriLineChartComponent,
|
|
4982
|
+
XiriPieChartComponent,
|
|
4983
|
+
XiriGaugeChartComponent,
|
|
4984
|
+
XiriHeatmapComponent,
|
|
4985
|
+
XiriCalendarComponent,
|
|
4986
|
+
XiriTreeComponent,
|
|
4987
|
+
XiriSankeyComponent,
|
|
4988
|
+
XiriGanttComponent], template: "@for (obj of dataInt(); track obj.id) {\n\n\t@switch (obj.type) {\n\t\t@case ('card') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-6 xcol-xl-4'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-card [settings]=\"obj.data\"></xiri-card>\n\t\t\t</div>\n\t\t}\n\t\t@case ('buttonline') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-buttonline [settings]=\"obj.data\" [filterData]=\"filterData()\"></xiri-buttonline>\n\t\t\t</div>\n\t\t}\n\t\t@case ('table') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-table [settings]=\"obj.data\" [filterData]=\"filterData()\" [dyncomponent]=\"selfdyncomponent\"></xiri-table>\n\t\t\t</div>\n\t\t}\n\t\t@case ('cardlink') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-4 xcol-lg-3'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-cardlink [settings]=\"obj.data\"></xiri-cardlink>\n\t\t\t</div>\n\t\t}\n\t\t@case ('links') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-4 xcol-lg-3'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-links [settings]=\"obj.data\"></xiri-links>\n\t\t\t</div>\n\t\t}\n\t\t@case ('form') {\n\t\t\t<div [class]=\"obj.display || 'xcol form'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<mat-card class=\"mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t\t\t\t@if (obj.data.header) {\n\t\t\t\t\t\t<mat-card-header>\n\t\t\t\t\t\t\t<mat-card-title>{{ obj.data.header }}</mat-card-title>\n\t\t\t\t\t\t</mat-card-header>\n\t\t\t\t\t}\n\t\t\t\t\t<mat-card-content>\n\t\t\t\t\t\t<xiri-form [settings]=\"obj.data\"></xiri-form>\n\t\t\t\t\t</mat-card-content>\n\t\t\t\t</mat-card>\n\t\t\t</div>\n\t\t}\n\t\t@case ('query') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-query [settings]=\"obj.data\" [dyncomponent]=\"selfdyncomponent\"></xiri-query>\n\t\t\t</div>\n\t\t}\n\t\t@case ('stepper') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stepper [settings]=\"obj.data\"></xiri-stepper>\n\t\t\t</div>\n\t\t}\n\t\t@case ('header') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-header [settings]=\"obj.data\"></xiri-header>\n\t\t\t</div>\n\t\t}\n\t\t@case ('list') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-list [settings]=\"obj.data\"></xiri-list>\n\t\t\t</div>\n\t\t}\n\t\t@case ('spacer') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"spacer\"> </div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('container') {\n\t\t\t@if (obj.data) {\n\t\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t\t<xiri-dyncomponent [data]=\"obj.data\" [dyncomponent]=\"dyncomponent()\" class=\"row\"></xiri-dyncomponent>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t\t@case ('infopoint') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-infopoint [settings]=\"obj.data\"></xiri-infopoint>\n\t\t\t</div>\n\t\t}\n\t\t@case ('multiprogress') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-4'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-multiprogress [settings]=\"obj.data\"></xiri-multiprogress> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('imagetext') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-4'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-imagetext [settings]=\"obj.data\"></xiri-imagetext> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('tabs') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-tabs [settings]=\"obj.data\" [filterData]=\"filterData()\" [dyncomponent]=\"selfdyncomponent\"></xiri-tabs>\n\t\t\t</div>\n\t\t}\n\t\t@case ('expansion') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-expansion [settings]=\"obj.data\" [filterData]=\"filterData()\" [dyncomponent]=\"selfdyncomponent\"></xiri-expansion>\n\t\t\t</div>\n\t\t}\n\t\t@case ('infotext') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"infotext\">{{ obj.data.text }}</div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('html') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"html\" [innerHtml]=\"obj.data.html | safeHtml\"></div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-6 xcol-xl-4'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stat [settings]=\"obj.data\"></xiri-stat>\n\t\t\t</div>\n\t\t}\n\t\t@case ('empty-state') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-empty-state [settings]=\"obj.data\"></xiri-empty-state>\n\t\t\t</div>\n\t\t}\n\t\t@case ('timeline') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-timeline [settings]=\"obj.data\"></xiri-timeline> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('page-header') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-page-header [settings]=\"obj.data\"></xiri-page-header> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('section') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-section [settings]=\"obj.data\" [dyncomponent]=\"dyncomponent()\"></xiri-section>\n\t\t\t</div>\n\t\t}\n\t\t@case ('divider') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-divider [settings]=\"obj.data\"></xiri-divider> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat-grid') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-stat-grid [settings]=\"obj.data\"></xiri-stat-grid> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('toolbar') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-toolbar [settings]=\"obj.data\" [filterData]=\"filterData()\"></xiri-toolbar> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('description-list') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-description-list [settings]=\"obj.data\"></xiri-description-list> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('barchart') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-6 xcol-xl-3'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-barchart [mode]=\"obj.mode\" [settings]=\"obj.data\"></xiri-barchart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('linechart') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-6 xcol-xl-3'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-linechart [settings]=\"obj.data\"></xiri-linechart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('piechart') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-6 xcol-xl-3'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-piechart [settings]=\"obj.data\"></xiri-piechart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('gaugechart') {\n\t\t\t<div [class]=\"obj.display || 'xcol xcol-md-6 xcol-xl-3'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-gaugechart [settings]=\"obj.data\"></xiri-gaugechart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('heatmap') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-heatmap [settings]=\"obj.data\"></xiri-heatmap> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('calendar') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-calendar [settings]=\"obj.data\"></xiri-calendar> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('tree') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-tree [settings]=\"obj.data\"></xiri-tree> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('sankey') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-sankey [settings]=\"obj.data\"></xiri-sankey> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('gantt') {\n\t\t\t<div [class]=\"obj.display || 'xcol'\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-gantt [settings]=\"obj.data\"></xiri-gantt> }\n\t\t\t</div>\n\t\t}\n\t\t@default {\n\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent() || defaultComponentUnknown; context: { $implicit: obj, filterData: filterData() }\"></ng-container>\n\t\t}\n\t}\n}\n\n<ng-template #selfdyncomponent let-obj>\n\t<xiri-dyncomponent [data]=\"obj.data\" [filterData]=\"obj.filterData\" [dyncomponent]=\"dyncomponent()\" class=\"xrow\"></xiri-dyncomponent>\n</ng-template>\n<ng-template #defaultComponentUnknown let-obj>\n\t<div class=\"xcol\">unknown type: {{ obj.type }}</div>\n</ng-template>\n", styles: [".spacer.double{padding-top:1rem}.form mat-card-header{padding-bottom:1rem}\n"] }]
|
|
5097
4989
|
}], ctorParameters: null, propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], filterData: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterData", required: false }] }], dyncomponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "dyncomponent", required: false }] }] } }) });
|
|
5098
4990
|
|
|
4991
|
+
class XiriCardComponent {
|
|
4992
|
+
constructor() {
|
|
4993
|
+
this.dataService = inject(XiriDataService);
|
|
4994
|
+
this.destroyRef = inject(DestroyRef);
|
|
4995
|
+
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
4996
|
+
this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
4997
|
+
this.errorMsg = signal('', ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
|
|
4998
|
+
this.isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
|
|
4999
|
+
this._data = signal(null, ...(ngDevMode ? [{ debugName: "_data" }] : /* istanbul ignore next */ []));
|
|
5000
|
+
this.cardData = computed(() => this._data() ?? this.settings().data, ...(ngDevMode ? [{ debugName: "cardData" }] : /* istanbul ignore next */ []));
|
|
5001
|
+
this.hasComponents = computed(() => (this.settings().components?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "hasComponents" }] : /* istanbul ignore next */ []));
|
|
5002
|
+
/** Resolves padding setting (token or free CSS value) into a CSS length string. */
|
|
5003
|
+
this.componentsPadding = computed(() => {
|
|
5004
|
+
const v = this.settings().padding;
|
|
5005
|
+
if (!v)
|
|
5006
|
+
return 'var(--xiri-spacing-md, 16px)';
|
|
5007
|
+
switch (v) {
|
|
5008
|
+
case 'xs': return 'var(--xiri-spacing-xs, 4px)';
|
|
5009
|
+
case 'sm': return 'var(--xiri-spacing-sm, 8px)';
|
|
5010
|
+
case 'md': return 'var(--xiri-spacing-md, 16px)';
|
|
5011
|
+
case 'lg': return 'var(--xiri-spacing-lg, 24px)';
|
|
5012
|
+
case 'xl': return 'var(--xiri-spacing-xl, 32px)';
|
|
5013
|
+
default: return v; // freier CSS-Wert
|
|
5014
|
+
}
|
|
5015
|
+
}, ...(ngDevMode ? [{ debugName: "componentsPadding" }] : /* istanbul ignore next */ []));
|
|
5016
|
+
this.rawTable = computed(() => {
|
|
5017
|
+
const data = this.cardData();
|
|
5018
|
+
if (data == null)
|
|
5019
|
+
return null;
|
|
5020
|
+
let rt = {
|
|
5021
|
+
data: data,
|
|
5022
|
+
fields: this.settings().fields,
|
|
5023
|
+
dense: this.settings().dense,
|
|
5024
|
+
forceMinWidth: this.settings().forceMinWidth,
|
|
5025
|
+
showHeader: this.settings().showHeader,
|
|
5026
|
+
};
|
|
5027
|
+
if (!this.settings().fields && data.length !== 0) {
|
|
5028
|
+
let fields = [];
|
|
5029
|
+
if (Array.isArray(data)) {
|
|
5030
|
+
fields.push({
|
|
5031
|
+
id: '0',
|
|
5032
|
+
name: '0',
|
|
5033
|
+
format: 'text',
|
|
5034
|
+
display: 'info',
|
|
5035
|
+
minWidth: '30px',
|
|
5036
|
+
});
|
|
5037
|
+
fields.push({
|
|
5038
|
+
id: '1',
|
|
5039
|
+
name: '1',
|
|
5040
|
+
format: 'html',
|
|
5041
|
+
display: 'right',
|
|
5042
|
+
minWidth: '30px',
|
|
5043
|
+
});
|
|
5044
|
+
}
|
|
5045
|
+
else {
|
|
5046
|
+
fields.push({
|
|
5047
|
+
id: 'f0',
|
|
5048
|
+
name: 'f0',
|
|
5049
|
+
format: 'text',
|
|
5050
|
+
display: 'info',
|
|
5051
|
+
minWidth: '30px',
|
|
5052
|
+
});
|
|
5053
|
+
fields.push({
|
|
5054
|
+
id: 'f1',
|
|
5055
|
+
name: 'f1',
|
|
5056
|
+
format: 'html',
|
|
5057
|
+
display: 'right',
|
|
5058
|
+
minWidth: '30px',
|
|
5059
|
+
});
|
|
5060
|
+
let transformedData = [];
|
|
5061
|
+
for (let key in data) {
|
|
5062
|
+
if (data.hasOwnProperty(key)) {
|
|
5063
|
+
transformedData.push({
|
|
5064
|
+
'f0': key,
|
|
5065
|
+
'f1': data[key],
|
|
5066
|
+
});
|
|
5067
|
+
}
|
|
5068
|
+
}
|
|
5069
|
+
rt.data = transformedData;
|
|
5070
|
+
}
|
|
5071
|
+
rt.fields = fields;
|
|
5072
|
+
}
|
|
5073
|
+
return rt;
|
|
5074
|
+
}, ...(ngDevMode ? [{ debugName: "rawTable" }] : /* istanbul ignore next */ []));
|
|
5075
|
+
effect(() => {
|
|
5076
|
+
const s = this.settings();
|
|
5077
|
+
if (s.collapsed !== undefined) {
|
|
5078
|
+
this.isCollapsed.set(s.collapsed);
|
|
5079
|
+
}
|
|
5080
|
+
});
|
|
5081
|
+
effect(() => {
|
|
5082
|
+
const url = this.settings().url;
|
|
5083
|
+
if (url) {
|
|
5084
|
+
this.loadData();
|
|
5085
|
+
}
|
|
5086
|
+
});
|
|
5087
|
+
}
|
|
5088
|
+
toggleCollapse() {
|
|
5089
|
+
this.isCollapsed.update(v => !v);
|
|
5090
|
+
}
|
|
5091
|
+
loadData() {
|
|
5092
|
+
this.loading.set(true);
|
|
5093
|
+
this.errorMsg.set('');
|
|
5094
|
+
this.dataService.post(this.settings().url, null)
|
|
5095
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
5096
|
+
.subscribe({
|
|
5097
|
+
next: (res) => {
|
|
5098
|
+
this._data.set(res.data ?? res);
|
|
5099
|
+
this.loading.set(false);
|
|
5100
|
+
},
|
|
5101
|
+
error: (err) => {
|
|
5102
|
+
this.errorMsg.set(err.error?.error || 'Fehler beim Laden');
|
|
5103
|
+
this.loading.set(false);
|
|
5104
|
+
}
|
|
5105
|
+
});
|
|
5106
|
+
}
|
|
5107
|
+
reload() {
|
|
5108
|
+
if (this.loading())
|
|
5109
|
+
return;
|
|
5110
|
+
this.loadData();
|
|
5111
|
+
}
|
|
5112
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5113
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriCardComponent, isStandalone: true, selector: "xiri-card", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-header>\n\t\t@if (settings().headerIcon) {\n\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t@if (settings().header) {\n\t\t\t<mat-card-title [class]=\"{hasHeaderSub: settings().headerSub}\">{{ settings().header }}</mat-card-title>\n\t\t}\n\t\t@if (settings().headerSub) {\n\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t}\n\t\t@if (settings().buttonsTop) {\n\t\t\t<xiri-buttonline [settings]=\"settings().buttonsTop\"></xiri-buttonline>\n\t\t}\n\t\t@if (settings().collapsible) {\n\t\t\t<button mat-icon-button (click)=\"toggleCollapse()\" class=\"collapse-btn\" aria-label=\"Auf-/Zuklappen\">\n\t\t\t\t<mat-icon>{{ isCollapsed() ? 'expand_more' : 'expand_less' }}</mat-icon>\n\t\t\t</button>\n\t\t}\n\t\t@if (settings().reload && settings().url) {\n\t\t\t<button mat-icon-button (click)=\"reload()\" [disabled]=\"loading()\" class=\"reload-btn\" aria-label=\"Neu laden\">\n\t\t\t\t<mat-icon [class.spinning]=\"loading()\">autorenew</mat-icon>\n\t\t\t</button>\n\t\t}\n\t</mat-card-header>\n\t<div class=\"collapse-wrapper\" [class.collapsed]=\"isCollapsed()\">\n\t\t<div class=\"collapse-inner\">\n\t\t\t@if (loading() && !cardData()) {\n\t\t\t\t<mat-card-content>\n\t\t\t\t\t<xiri-skeleton type=\"table-row\" [columns]=\"2\" [lines]=\"3\"></xiri-skeleton>\n\t\t\t\t</mat-card-content>\n\t\t\t} @else if (errorMsg()) {\n\t\t\t\t<mat-card-content>\n\t\t\t\t\t<div class=\"load-error\">{{ errorMsg() }}</div>\n\t\t\t\t</mat-card-content>\n\t\t\t} @else if (hasComponents()) {\n\t\t\t\t<mat-card-content class=\"hasComponents\" [style.--xiri-card-padding]=\"componentsPadding()\">\n\t\t\t\t\t<xiri-dyncomponent [data]=\"settings().components!\" class=\"xrow\"></xiri-dyncomponent>\n\t\t\t\t</mat-card-content>\n\t\t\t} @else {\n\t\t\t\t<mat-card-content class=\"hasTable\" [style.max-height]=\"settings().maxHeight || '50vh'\">\n\t\t\t\t\t@if (rawTable()) {\n\t\t\t\t\t\t<xiri-raw-table [settings]=\"rawTable()!\"></xiri-raw-table>\n\t\t\t\t\t}\n\t\t\t\t</mat-card-content>\n\t\t\t}\n\t\t\t@if (settings().buttonsBottom) {\n\t\t\t\t<mat-card-actions align=\"end\">\n\t\t\t\t\t<xiri-buttonline [settings]=\"settings().buttonsBottom\"></xiri-buttonline>\n\t\t\t\t</mat-card-actions>\n\t\t\t}\n\t\t</div>\n\t</div>\n</mat-card>\n", styles: [":host{animation:fadeIn var(--xiri-duration-fast) var(--xiri-easing-standard)}.collapse-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--xiri-duration-normal) var(--xiri-easing-standard)}.collapse-wrapper.collapsed{grid-template-rows:0fr}.collapse-inner{overflow:hidden;min-height:0}.spinning{animation:spin 1s linear infinite}.card{overflow:hidden}.card mat-card-header{margin:0 0 2px;box-shadow:var(--xiri-shadow-xs);padding:4px 8px 4px 16px;align-items:center;min-height:32px}.card mat-card-header .header-image{margin-bottom:0;width:var(--xiri-icon-size-lg);height:var(--xiri-icon-size-lg);align-items:center;display:flex}.card mat-card-header .header-image mat-icon{font-size:var(--xiri-icon-size-lg);height:var(--xiri-icon-size-lg);width:var(--xiri-icon-size-lg);color:var(--primary)}.card mat-card-header mat-card-title.hasHeaderSub{padding-top:2px}.card mat-card-header mat-card-subtitle{padding-bottom:2px}.card mat-card-header xiri-buttonline{display:flex;justify-content:flex-end;flex:1}.card mat-card-header xiri-buttonline ::ng-deep button{width:32px;height:32px;padding:4px}.card mat-card-header xiri-buttonline ::ng-deep button mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card .collapse-btn{margin-left:auto;width:32px;height:32px;padding:4px}.card .collapse-btn mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card .reload-btn{width:32px;height:32px;padding:4px}.card .reload-btn mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card mat-card-content{padding:0}.card mat-card-content.hasTable{overflow-x:auto}.card mat-card-content.hasComponents{padding:var(--xiri-card-padding, var(--xiri-spacing-md, 16px))}@media(max-width:575.98px){.card mat-card-content.hasComponents{padding:8px}}.card mat-card-content xiri-skeleton{padding:16px}.card mat-card-content .load-error{padding:16px;color:var(--error, #B3261E)}.card mat-card-actions{padding:4px 8px;min-height:32px;border-top:1px solid var(--outline-variant, rgba(0, 0, 0, .12))}.card mat-card-actions xiri-buttonline ::ng-deep button{width:32px;height:32px;padding:4px}.card mat-card-actions xiri-buttonline ::ng-deep button mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MatCard), selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i0.forwardRef(() => MatCardHeader), selector: "mat-card-header" }, { kind: "directive", type: i0.forwardRef(() => MatCardAvatar), selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: i0.forwardRef(() => MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => MatIconButton), selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i0.forwardRef(() => MatCardTitle), selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i0.forwardRef(() => MatCardSubtitle), selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i0.forwardRef(() => XiriButtonlineComponent), selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "directive", type: i0.forwardRef(() => MatCardContent), selector: "mat-card-content" }, { kind: "component", type: i0.forwardRef(() => XiriRawTableComponent), selector: "xiri-raw-table", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriSkeletonComponent), selector: "xiri-skeleton", inputs: ["type", "width", "height", "lines", "columns", "animate", "fill"] }, { kind: "directive", type: i0.forwardRef(() => MatCardActions), selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: i0.forwardRef(() => XiriDynComponentComponent), selector: "xiri-dyncomponent", inputs: ["data", "filterData", "dyncomponent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5114
|
+
}
|
|
5115
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriCardComponent, decorators: [{
|
|
5116
|
+
type: Component,
|
|
5117
|
+
args: [{ selector: 'xiri-card', imports: [MatCard,
|
|
5118
|
+
MatCardHeader,
|
|
5119
|
+
MatCardAvatar,
|
|
5120
|
+
MatIcon,
|
|
5121
|
+
MatIconButton,
|
|
5122
|
+
MatCardTitle,
|
|
5123
|
+
MatCardSubtitle,
|
|
5124
|
+
XiriButtonlineComponent,
|
|
5125
|
+
MatCardContent,
|
|
5126
|
+
XiriRawTableComponent,
|
|
5127
|
+
XiriSkeletonComponent,
|
|
5128
|
+
MatCardActions,
|
|
5129
|
+
forwardRef(() => XiriDynComponentComponent)], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-header>\n\t\t@if (settings().headerIcon) {\n\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t@if (settings().header) {\n\t\t\t<mat-card-title [class]=\"{hasHeaderSub: settings().headerSub}\">{{ settings().header }}</mat-card-title>\n\t\t}\n\t\t@if (settings().headerSub) {\n\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t}\n\t\t@if (settings().buttonsTop) {\n\t\t\t<xiri-buttonline [settings]=\"settings().buttonsTop\"></xiri-buttonline>\n\t\t}\n\t\t@if (settings().collapsible) {\n\t\t\t<button mat-icon-button (click)=\"toggleCollapse()\" class=\"collapse-btn\" aria-label=\"Auf-/Zuklappen\">\n\t\t\t\t<mat-icon>{{ isCollapsed() ? 'expand_more' : 'expand_less' }}</mat-icon>\n\t\t\t</button>\n\t\t}\n\t\t@if (settings().reload && settings().url) {\n\t\t\t<button mat-icon-button (click)=\"reload()\" [disabled]=\"loading()\" class=\"reload-btn\" aria-label=\"Neu laden\">\n\t\t\t\t<mat-icon [class.spinning]=\"loading()\">autorenew</mat-icon>\n\t\t\t</button>\n\t\t}\n\t</mat-card-header>\n\t<div class=\"collapse-wrapper\" [class.collapsed]=\"isCollapsed()\">\n\t\t<div class=\"collapse-inner\">\n\t\t\t@if (loading() && !cardData()) {\n\t\t\t\t<mat-card-content>\n\t\t\t\t\t<xiri-skeleton type=\"table-row\" [columns]=\"2\" [lines]=\"3\"></xiri-skeleton>\n\t\t\t\t</mat-card-content>\n\t\t\t} @else if (errorMsg()) {\n\t\t\t\t<mat-card-content>\n\t\t\t\t\t<div class=\"load-error\">{{ errorMsg() }}</div>\n\t\t\t\t</mat-card-content>\n\t\t\t} @else if (hasComponents()) {\n\t\t\t\t<mat-card-content class=\"hasComponents\" [style.--xiri-card-padding]=\"componentsPadding()\">\n\t\t\t\t\t<xiri-dyncomponent [data]=\"settings().components!\" class=\"xrow\"></xiri-dyncomponent>\n\t\t\t\t</mat-card-content>\n\t\t\t} @else {\n\t\t\t\t<mat-card-content class=\"hasTable\" [style.max-height]=\"settings().maxHeight || '50vh'\">\n\t\t\t\t\t@if (rawTable()) {\n\t\t\t\t\t\t<xiri-raw-table [settings]=\"rawTable()!\"></xiri-raw-table>\n\t\t\t\t\t}\n\t\t\t\t</mat-card-content>\n\t\t\t}\n\t\t\t@if (settings().buttonsBottom) {\n\t\t\t\t<mat-card-actions align=\"end\">\n\t\t\t\t\t<xiri-buttonline [settings]=\"settings().buttonsBottom\"></xiri-buttonline>\n\t\t\t\t</mat-card-actions>\n\t\t\t}\n\t\t</div>\n\t</div>\n</mat-card>\n", styles: [":host{animation:fadeIn var(--xiri-duration-fast) var(--xiri-easing-standard)}.collapse-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--xiri-duration-normal) var(--xiri-easing-standard)}.collapse-wrapper.collapsed{grid-template-rows:0fr}.collapse-inner{overflow:hidden;min-height:0}.spinning{animation:spin 1s linear infinite}.card{overflow:hidden}.card mat-card-header{margin:0 0 2px;box-shadow:var(--xiri-shadow-xs);padding:4px 8px 4px 16px;align-items:center;min-height:32px}.card mat-card-header .header-image{margin-bottom:0;width:var(--xiri-icon-size-lg);height:var(--xiri-icon-size-lg);align-items:center;display:flex}.card mat-card-header .header-image mat-icon{font-size:var(--xiri-icon-size-lg);height:var(--xiri-icon-size-lg);width:var(--xiri-icon-size-lg);color:var(--primary)}.card mat-card-header mat-card-title.hasHeaderSub{padding-top:2px}.card mat-card-header mat-card-subtitle{padding-bottom:2px}.card mat-card-header xiri-buttonline{display:flex;justify-content:flex-end;flex:1}.card mat-card-header xiri-buttonline ::ng-deep button{width:32px;height:32px;padding:4px}.card mat-card-header xiri-buttonline ::ng-deep button mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card .collapse-btn{margin-left:auto;width:32px;height:32px;padding:4px}.card .collapse-btn mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card .reload-btn{width:32px;height:32px;padding:4px}.card .reload-btn mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card mat-card-content{padding:0}.card mat-card-content.hasTable{overflow-x:auto}.card mat-card-content.hasComponents{padding:var(--xiri-card-padding, var(--xiri-spacing-md, 16px))}@media(max-width:575.98px){.card mat-card-content.hasComponents{padding:8px}}.card mat-card-content xiri-skeleton{padding:16px}.card mat-card-content .load-error{padding:16px;color:var(--error, #B3261E)}.card mat-card-actions{padding:4px 8px;min-height:32px;border-top:1px solid var(--outline-variant, rgba(0, 0, 0, .12))}.card mat-card-actions xiri-buttonline ::ng-deep button{width:32px;height:32px;padding:4px}.card mat-card-actions xiri-buttonline ::ng-deep button mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}\n"] }]
|
|
5130
|
+
}], ctorParameters: () => [], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
5131
|
+
|
|
5099
5132
|
class XiriAlertComponent {
|
|
5100
5133
|
constructor() {
|
|
5101
5134
|
this.dialogRef = inject(MatDialogRef);
|
|
@@ -5155,13 +5188,14 @@ class XiriMultiprogressComponent {
|
|
|
5155
5188
|
constructor() {
|
|
5156
5189
|
this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
5157
5190
|
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
5191
|
+
this.compact = computed(() => !!this.settings().compact, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
5158
5192
|
}
|
|
5159
5193
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriMultiprogressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5160
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriMultiprogressComponent, isStandalone: true, selector: "xiri-multiprogress", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<
|
|
5194
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriMultiprogressComponent, isStandalone: true, selector: "xiri-multiprogress", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "@if (compact()) {\n\t<div class=\"card xiri-multiprogress-flat\">\n\t\t<div class=\"header align-items-center\">\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<span class=\"title\">{{ settings().header }}</span>\n\t\t\t@if (settings().show && settings().data.length > settings().show) {\n\t\t\t\t<span class=\"open\">\n\t\t\t\t\t<button mat-icon-button class=\"d-btn\" (click)=\"isOpen.set(!isOpen())\" [attr.aria-label]=\"isOpen() ? 'Weniger anzeigen' : 'Mehr anzeigen'\" [attr.aria-expanded]=\"isOpen()\">\n\t\t\t\t\t\t@if (isOpen()) { <mat-icon>expand_less</mat-icon> } @else { <mat-icon>expand_more</mat-icon> }\n\t\t\t\t\t</button>\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t\t<div class=\"xiri-multiprogress-content\">\n\t\t\t@for (item of settings().data | slice:0:(isOpen() ? 999 : settings().show); track item) {\n\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<div class=\"line\">\n\t\t\t\t\t\t<span class=\"text\">{{ item.text }}</span>\n\t\t\t\t\t\t<span class=\"value\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<mat-progress-bar mode=\"determinate\" [class]=\"item.color\" [value]=\"item.progress\" class=\"bar\"></mat-progress-bar>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n} @else {\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<div class=\"header align-items-center\">\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<span class=\"title\">{{ settings().header }}</span>\n\t\t\t@if (settings().show && settings().data.length > settings().show) {\n\t\t\t\t<span class=\"open\">\n\t\t\t\t\t<button mat-icon-button class=\"d-btn\" (click)=\"isOpen.set(!isOpen())\" [attr.aria-label]=\"isOpen() ? 'Weniger anzeigen' : 'Mehr anzeigen'\" [attr.aria-expanded]=\"isOpen()\">\n\t\t\t\t\t\t@if (isOpen()) { <mat-icon>expand_less</mat-icon> } @else { <mat-icon>expand_more</mat-icon> }\n\t\t\t\t\t</button>\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t\t<mat-card-content>\n\t\t\t@for (item of settings().data | slice:0:(isOpen() ? 999 : settings().show); track item) {\n\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<div class=\"line\">\n\t\t\t\t\t\t<span class=\"text\">{{ item.text }}</span>\n\t\t\t\t\t\t<span class=\"value\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<mat-progress-bar mode=\"determinate\" [class]=\"item.color\" [value]=\"item.progress\" class=\"bar\"></mat-progress-bar>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</mat-card-content>\n\t</mat-card>\n}\n", styles: ["mat-card.card{padding:20px}mat-card-content{padding:0}:host(.compact) .xiri-multiprogress-flat{background:transparent;box-shadow:none;padding:0}.header{margin-top:0;margin-bottom:12px;display:flex;justify-content:space-between}.header .title{font-size:var(--xiri-font-size-title);font-weight:500}.item .line{display:flex;justify-content:space-between;padding-bottom:.3rem}.item .line .text{font-weight:400;word-break:break-all}.item .line .value{font-size:var(--xiri-font-size-label);padding-left:1rem}.item .bar{transform:scaleY(1.5);transform-origin:bottom}.item+.item{padding-top:.8rem}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5161
5195
|
}
|
|
5162
5196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriMultiprogressComponent, decorators: [{
|
|
5163
5197
|
type: Component,
|
|
5164
|
-
args: [{ selector: 'xiri-multiprogress', imports: [MatCard, MatCardAvatar, MatIcon, MatIconButton, MatCardContent, MatProgressBar, SlicePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<
|
|
5198
|
+
args: [{ selector: 'xiri-multiprogress', imports: [MatCard, MatCardAvatar, MatIcon, MatIconButton, MatCardContent, MatProgressBar, SlicePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.compact]': 'compact()' }, template: "@if (compact()) {\n\t<div class=\"card xiri-multiprogress-flat\">\n\t\t<div class=\"header align-items-center\">\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<span class=\"title\">{{ settings().header }}</span>\n\t\t\t@if (settings().show && settings().data.length > settings().show) {\n\t\t\t\t<span class=\"open\">\n\t\t\t\t\t<button mat-icon-button class=\"d-btn\" (click)=\"isOpen.set(!isOpen())\" [attr.aria-label]=\"isOpen() ? 'Weniger anzeigen' : 'Mehr anzeigen'\" [attr.aria-expanded]=\"isOpen()\">\n\t\t\t\t\t\t@if (isOpen()) { <mat-icon>expand_less</mat-icon> } @else { <mat-icon>expand_more</mat-icon> }\n\t\t\t\t\t</button>\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t\t<div class=\"xiri-multiprogress-content\">\n\t\t\t@for (item of settings().data | slice:0:(isOpen() ? 999 : settings().show); track item) {\n\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<div class=\"line\">\n\t\t\t\t\t\t<span class=\"text\">{{ item.text }}</span>\n\t\t\t\t\t\t<span class=\"value\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<mat-progress-bar mode=\"determinate\" [class]=\"item.color\" [value]=\"item.progress\" class=\"bar\"></mat-progress-bar>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n} @else {\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<div class=\"header align-items-center\">\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<span class=\"title\">{{ settings().header }}</span>\n\t\t\t@if (settings().show && settings().data.length > settings().show) {\n\t\t\t\t<span class=\"open\">\n\t\t\t\t\t<button mat-icon-button class=\"d-btn\" (click)=\"isOpen.set(!isOpen())\" [attr.aria-label]=\"isOpen() ? 'Weniger anzeigen' : 'Mehr anzeigen'\" [attr.aria-expanded]=\"isOpen()\">\n\t\t\t\t\t\t@if (isOpen()) { <mat-icon>expand_less</mat-icon> } @else { <mat-icon>expand_more</mat-icon> }\n\t\t\t\t\t</button>\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t\t<mat-card-content>\n\t\t\t@for (item of settings().data | slice:0:(isOpen() ? 999 : settings().show); track item) {\n\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<div class=\"line\">\n\t\t\t\t\t\t<span class=\"text\">{{ item.text }}</span>\n\t\t\t\t\t\t<span class=\"value\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<mat-progress-bar mode=\"determinate\" [class]=\"item.color\" [value]=\"item.progress\" class=\"bar\"></mat-progress-bar>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</mat-card-content>\n\t</mat-card>\n}\n", styles: ["mat-card.card{padding:20px}mat-card-content{padding:0}:host(.compact) .xiri-multiprogress-flat{background:transparent;box-shadow:none;padding:0}.header{margin-top:0;margin-bottom:12px;display:flex;justify-content:space-between}.header .title{font-size:var(--xiri-font-size-title);font-weight:500}.item .line{display:flex;justify-content:space-between;padding-bottom:.3rem}.item .line .text{font-weight:400;word-break:break-all}.item .line .value{font-size:var(--xiri-font-size-label);padding-left:1rem}.item .bar{transform:scaleY(1.5);transform-origin:bottom}.item+.item{padding-top:.8rem}\n"] }]
|
|
5165
5199
|
}], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
5166
5200
|
|
|
5167
5201
|
var multiprogress_component = /*#__PURE__*/Object.freeze({
|
|
@@ -5173,9 +5207,10 @@ class XiriImagetextComponent {
|
|
|
5173
5207
|
constructor() {
|
|
5174
5208
|
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
5175
5209
|
this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
5210
|
+
this.compact = computed(() => !!this.settings().compact, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
5176
5211
|
}
|
|
5177
5212
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriImagetextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5178
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriImagetextComponent, isStandalone: true, selector: "xiri-imagetext", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-header class=\"align-items-center\">\n\t\t@if (settings().headerIcon) {\n\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t@if (settings().header) {\n\t\t\t<mat-card-title>{{ settings().header }}</mat-card-title>\n\t\t}\n\t\t@if (settings().headerSub) {\n\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t}\n\t</mat-card-header>\n\t<mat-card-content>\n\t\t<mat-spinner [hidden]=\"!loading()\" diameter=\"30\"></mat-spinner>\n\t\t<img [hidden]=\"loading()\" (load)=\"loading.set(false)\" [src]=\"settings().url\" [alt]=\"settings().info\" id=\"ximg\"/>\n\t</mat-card-content>\n</mat-card
|
|
5213
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriImagetextComponent, isStandalone: true, selector: "xiri-imagetext", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "@if (compact()) {\n\t<div class=\"card xiri-imagetext-flat\">\n\t\t@if (settings().header || settings().headerIcon) {\n\t\t\t<div class=\"xiri-imagetext-header align-items-center\">\n\t\t\t\t@if (settings().headerIcon) {\n\t\t\t\t\t<div class=\"header-image\">\n\t\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"header-text\">\n\t\t\t\t\t@if (settings().header) {\n\t\t\t\t\t\t<div class=\"header-title\">{{ settings().header }}</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (settings().headerSub) {\n\t\t\t\t\t\t<div class=\"header-sub\">{{ settings().headerSub }}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"xiri-imagetext-content\">\n\t\t\t<mat-spinner [hidden]=\"!loading()\" diameter=\"30\"></mat-spinner>\n\t\t\t<img [hidden]=\"loading()\" (load)=\"loading.set(false)\" [src]=\"settings().url\" [alt]=\"settings().info\" id=\"ximg\"/>\n\t\t</div>\n\t</div>\n} @else {\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-header class=\"align-items-center\">\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (settings().header) {\n\t\t\t\t<mat-card-title>{{ settings().header }}</mat-card-title>\n\t\t\t}\n\t\t\t@if (settings().headerSub) {\n\t\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t\t}\n\t\t</mat-card-header>\n\t\t<mat-card-content>\n\t\t\t<mat-spinner [hidden]=\"!loading()\" diameter=\"30\"></mat-spinner>\n\t\t\t<img [hidden]=\"loading()\" (load)=\"loading.set(false)\" [src]=\"settings().url\" [alt]=\"settings().info\" id=\"ximg\"/>\n\t\t</mat-card-content>\n\t</mat-card>\n}\n", styles: [".card{margin-bottom:2rem;text-align:center}#ximg{max-width:100%}[hidden]{display:none!important}:host(.compact) .xiri-imagetext-flat{background:transparent;box-shadow:none;padding:0;margin-bottom:0}:host(.compact) .xiri-imagetext-header{display:flex;gap:var(--xiri-spacing-sm, 8px);margin-bottom:var(--xiri-spacing-sm, 8px)}:host(.compact) .header-title{font-size:var(--xiri-font-size-body);font-weight:500}:host(.compact) .header-sub{font-size:var(--xiri-font-size-label);color:var(--mat-sys-on-surface-variant, #555)}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5179
5214
|
}
|
|
5180
5215
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriImagetextComponent, decorators: [{
|
|
5181
5216
|
type: Component,
|
|
@@ -5186,7 +5221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
5186
5221
|
MatCardTitle,
|
|
5187
5222
|
MatCardSubtitle,
|
|
5188
5223
|
MatCardContent,
|
|
5189
|
-
MatProgressSpinner], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-header class=\"align-items-center\">\n\t\t@if (settings().headerIcon) {\n\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t@if (settings().header) {\n\t\t\t<mat-card-title>{{ settings().header }}</mat-card-title>\n\t\t}\n\t\t@if (settings().headerSub) {\n\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t}\n\t</mat-card-header>\n\t<mat-card-content>\n\t\t<mat-spinner [hidden]=\"!loading()\" diameter=\"30\"></mat-spinner>\n\t\t<img [hidden]=\"loading()\" (load)=\"loading.set(false)\" [src]=\"settings().url\" [alt]=\"settings().info\" id=\"ximg\"/>\n\t</mat-card-content>\n</mat-card
|
|
5224
|
+
MatProgressSpinner], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.compact]': 'compact()' }, template: "@if (compact()) {\n\t<div class=\"card xiri-imagetext-flat\">\n\t\t@if (settings().header || settings().headerIcon) {\n\t\t\t<div class=\"xiri-imagetext-header align-items-center\">\n\t\t\t\t@if (settings().headerIcon) {\n\t\t\t\t\t<div class=\"header-image\">\n\t\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"header-text\">\n\t\t\t\t\t@if (settings().header) {\n\t\t\t\t\t\t<div class=\"header-title\">{{ settings().header }}</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (settings().headerSub) {\n\t\t\t\t\t\t<div class=\"header-sub\">{{ settings().headerSub }}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"xiri-imagetext-content\">\n\t\t\t<mat-spinner [hidden]=\"!loading()\" diameter=\"30\"></mat-spinner>\n\t\t\t<img [hidden]=\"loading()\" (load)=\"loading.set(false)\" [src]=\"settings().url\" [alt]=\"settings().info\" id=\"ximg\"/>\n\t\t</div>\n\t</div>\n} @else {\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-header class=\"align-items-center\">\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (settings().header) {\n\t\t\t\t<mat-card-title>{{ settings().header }}</mat-card-title>\n\t\t\t}\n\t\t\t@if (settings().headerSub) {\n\t\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t\t}\n\t\t</mat-card-header>\n\t\t<mat-card-content>\n\t\t\t<mat-spinner [hidden]=\"!loading()\" diameter=\"30\"></mat-spinner>\n\t\t\t<img [hidden]=\"loading()\" (load)=\"loading.set(false)\" [src]=\"settings().url\" [alt]=\"settings().info\" id=\"ximg\"/>\n\t\t</mat-card-content>\n\t</mat-card>\n}\n", styles: [".card{margin-bottom:2rem;text-align:center}#ximg{max-width:100%}[hidden]{display:none!important}:host(.compact) .xiri-imagetext-flat{background:transparent;box-shadow:none;padding:0;margin-bottom:0}:host(.compact) .xiri-imagetext-header{display:flex;gap:var(--xiri-spacing-sm, 8px);margin-bottom:var(--xiri-spacing-sm, 8px)}:host(.compact) .header-title{font-size:var(--xiri-font-size-body);font-weight:500}:host(.compact) .header-sub{font-size:var(--xiri-font-size-label);color:var(--mat-sys-on-surface-variant, #555)}\n"] }]
|
|
5190
5225
|
}], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
5191
5226
|
|
|
5192
5227
|
var imagetext_component = /*#__PURE__*/Object.freeze({
|
|
@@ -5299,38 +5334,29 @@ var timeline_component = /*#__PURE__*/Object.freeze({
|
|
|
5299
5334
|
XiriTimelineComponent: XiriTimelineComponent
|
|
5300
5335
|
});
|
|
5301
5336
|
|
|
5302
|
-
|
|
5303
|
-
|
|
5304
|
-
|
|
5305
|
-
|
|
5306
|
-
|
|
5307
|
-
|
|
5308
|
-
|
|
5309
|
-
|
|
5310
|
-
|
|
5311
|
-
|
|
5312
|
-
|
|
5313
|
-
|
|
5314
|
-
|
|
5315
|
-
|
|
5316
|
-
|
|
5317
|
-
gray: '#9e9e9e',
|
|
5318
|
-
lightgray: '#cfcfcf',
|
|
5319
|
-
darkgray: '#616161',
|
|
5320
|
-
white: '#ffffff',
|
|
5321
|
-
black: '#000000',
|
|
5322
|
-
inherit: 'currentColor'
|
|
5323
|
-
};
|
|
5324
|
-
function resolveColor(color, fallback = '#8b5cf6') {
|
|
5325
|
-
if (!color)
|
|
5326
|
-
return fallback;
|
|
5327
|
-
return COLOR_CSS_VAR[color] ?? fallback;
|
|
5328
|
-
}
|
|
5329
|
-
class XiriBarChartComponent {
|
|
5337
|
+
/**
|
|
5338
|
+
* `xiri-echarts-host` — shared echarts plumbing for all chart components.
|
|
5339
|
+
*
|
|
5340
|
+
* Handles lazy `import('echarts')`, init / setOption / dispose, ResizeObserver,
|
|
5341
|
+
* the optional mat-card surface (with header + compact mode), and a flat
|
|
5342
|
+
* variant when nested inside another card.
|
|
5343
|
+
*
|
|
5344
|
+
* Specialized chart components (`xiri-barchart`, `xiri-linechart`, …) build
|
|
5345
|
+
* a typed echarts option from their settings and feed it via the `option`
|
|
5346
|
+
* input. Each re-emit of `option` re-renders the chart with `setOption(option, true)`.
|
|
5347
|
+
*
|
|
5348
|
+
* Compact-Mode strips the outer mat-card so the chart sits flat inside an
|
|
5349
|
+
* outer xiri-card without card-in-card visuals.
|
|
5350
|
+
*/
|
|
5351
|
+
class XiriEchartsHostComponent {
|
|
5330
5352
|
constructor() {
|
|
5331
|
-
this.
|
|
5332
|
-
this.
|
|
5333
|
-
this.
|
|
5353
|
+
this.option = input.required(...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
|
|
5354
|
+
this.compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
5355
|
+
this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
5356
|
+
this.headerIcon = input(undefined, ...(ngDevMode ? [{ debugName: "headerIcon" }] : /* istanbul ignore next */ []));
|
|
5357
|
+
this.headerIconColor = input(undefined, ...(ngDevMode ? [{ debugName: "headerIconColor" }] : /* istanbul ignore next */ []));
|
|
5358
|
+
this.chartHeight = input('200px', ...(ngDevMode ? [{ debugName: "chartHeight" }] : /* istanbul ignore next */ []));
|
|
5359
|
+
this.chartHostRef = viewChild.required('chartHost');
|
|
5334
5360
|
this.zone = inject(NgZone);
|
|
5335
5361
|
this.destroyRef = inject(DestroyRef);
|
|
5336
5362
|
this.chart = null;
|
|
@@ -5338,10 +5364,10 @@ class XiriBarChartComponent {
|
|
|
5338
5364
|
this.resizeObserver = null;
|
|
5339
5365
|
this.loadError = signal(null, ...(ngDevMode ? [{ debugName: "loadError" }] : /* istanbul ignore next */ []));
|
|
5340
5366
|
this.error = this.loadError.asReadonly();
|
|
5367
|
+
this.hasHeader = computed(() => !!(this.title() || this.headerIcon()), ...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
|
|
5341
5368
|
effect(() => {
|
|
5342
|
-
//
|
|
5343
|
-
this.
|
|
5344
|
-
this.settings();
|
|
5369
|
+
// Re-render whenever the option changes.
|
|
5370
|
+
this.option();
|
|
5345
5371
|
if (this.chart) {
|
|
5346
5372
|
this.render();
|
|
5347
5373
|
}
|
|
@@ -5351,15 +5377,15 @@ class XiriBarChartComponent {
|
|
|
5351
5377
|
try {
|
|
5352
5378
|
this.echarts = await import('echarts');
|
|
5353
5379
|
}
|
|
5354
|
-
catch
|
|
5380
|
+
catch {
|
|
5355
5381
|
this.loadError.set('echarts is not installed. Add `npm install echarts` to your app.');
|
|
5356
5382
|
return;
|
|
5357
5383
|
}
|
|
5358
5384
|
this.zone.runOutsideAngular(() => {
|
|
5359
|
-
this.chart = this.echarts.init(this.
|
|
5385
|
+
this.chart = this.echarts.init(this.chartHostRef().nativeElement);
|
|
5360
5386
|
this.render();
|
|
5361
5387
|
this.resizeObserver = new ResizeObserver(() => this.chart?.resize());
|
|
5362
|
-
this.resizeObserver.observe(this.
|
|
5388
|
+
this.resizeObserver.observe(this.chartHostRef().nativeElement);
|
|
5363
5389
|
});
|
|
5364
5390
|
this.destroyRef.onDestroy(() => this.dispose());
|
|
5365
5391
|
}
|
|
@@ -5375,22 +5401,86 @@ class XiriBarChartComponent {
|
|
|
5375
5401
|
render() {
|
|
5376
5402
|
if (!this.chart)
|
|
5377
5403
|
return;
|
|
5378
|
-
const
|
|
5379
|
-
|
|
5380
|
-
|
|
5381
|
-
|
|
5382
|
-
|
|
5383
|
-
|
|
5384
|
-
|
|
5385
|
-
|
|
5386
|
-
|
|
5387
|
-
|
|
5388
|
-
|
|
5389
|
-
|
|
5390
|
-
|
|
5391
|
-
|
|
5404
|
+
const opt = this.option();
|
|
5405
|
+
if (!opt)
|
|
5406
|
+
return;
|
|
5407
|
+
this.chart.setOption(opt, true);
|
|
5408
|
+
}
|
|
5409
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriEchartsHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5410
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriEchartsHostComponent, isStandalone: true, selector: "xiri-echarts-host", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, headerIconColor: { classPropertyName: "headerIconColor", publicName: "headerIconColor", isSignal: true, isRequired: false, transformFunction: null }, chartHeight: { classPropertyName: "chartHeight", publicName: "chartHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, viewQueries: [{ propertyName: "chartHostRef", first: true, predicate: ["chartHost"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (compact()) {\n\t<div class=\"xiri-echarts xiri-echarts-flat\">\n\t\t@if (hasHeader()) {\n\t\t\t<div class=\"xiri-echarts-header\">\n\t\t\t\t@if (headerIcon()) {\n\t\t\t\t\t<mat-icon [class]=\"headerIconColor() || 'primary'\">{{ headerIcon() }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t@if (title()) {\n\t\t\t\t\t<div class=\"xiri-echarts-title\">{{ title() }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t<div #chartHost class=\"xiri-echarts-host\" [style.height]=\"chartHeight()\"></div>\n\t\t@if (error()) {\n\t\t\t<div class=\"xiri-echarts-error\">{{ error() }}</div>\n\t\t}\n\t</div>\n} @else {\n\t<mat-card class=\"xiri-echarts mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content>\n\t\t\t@if (hasHeader()) {\n\t\t\t\t<div class=\"xiri-echarts-header\">\n\t\t\t\t\t@if (headerIcon()) {\n\t\t\t\t\t\t<mat-icon [class]=\"headerIconColor() || 'primary'\">{{ headerIcon() }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (title()) {\n\t\t\t\t\t\t<div class=\"xiri-echarts-title\">{{ title() }}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div #chartHost class=\"xiri-echarts-host\" [style.height]=\"chartHeight()\"></div>\n\t\t\t@if (error()) {\n\t\t\t\t<div class=\"xiri-echarts-error\">{{ error() }}</div>\n\t\t\t}\n\t\t</mat-card-content>\n\t</mat-card>\n}\n", styles: [".xiri-echarts{height:100%}.xiri-echarts .xiri-echarts-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.xiri-echarts .xiri-echarts-header mat-icon{font-size:var(--xiri-icon-size-md, 24px);width:var(--xiri-icon-size-md, 24px);height:var(--xiri-icon-size-md, 24px)}.xiri-echarts .xiri-echarts-title{font-size:14px;font-weight:500;color:var(--mat-sys-on-surface-variant, #555)}.xiri-echarts .xiri-echarts-host{width:100%;min-height:160px}.xiri-echarts .xiri-echarts-error{font-size:12px;color:var(--mat-sys-error, #b00020);padding:8px 0}.xiri-echarts-flat{background:transparent;box-shadow:none;padding:0}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5411
|
+
}
|
|
5412
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriEchartsHostComponent, decorators: [{
|
|
5413
|
+
type: Component,
|
|
5414
|
+
args: [{ selector: 'xiri-echarts-host', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [MatCard, MatCardContent, MatIcon], host: { '[class.compact]': 'compact()' }, template: "@if (compact()) {\n\t<div class=\"xiri-echarts xiri-echarts-flat\">\n\t\t@if (hasHeader()) {\n\t\t\t<div class=\"xiri-echarts-header\">\n\t\t\t\t@if (headerIcon()) {\n\t\t\t\t\t<mat-icon [class]=\"headerIconColor() || 'primary'\">{{ headerIcon() }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t@if (title()) {\n\t\t\t\t\t<div class=\"xiri-echarts-title\">{{ title() }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t<div #chartHost class=\"xiri-echarts-host\" [style.height]=\"chartHeight()\"></div>\n\t\t@if (error()) {\n\t\t\t<div class=\"xiri-echarts-error\">{{ error() }}</div>\n\t\t}\n\t</div>\n} @else {\n\t<mat-card class=\"xiri-echarts mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content>\n\t\t\t@if (hasHeader()) {\n\t\t\t\t<div class=\"xiri-echarts-header\">\n\t\t\t\t\t@if (headerIcon()) {\n\t\t\t\t\t\t<mat-icon [class]=\"headerIconColor() || 'primary'\">{{ headerIcon() }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (title()) {\n\t\t\t\t\t\t<div class=\"xiri-echarts-title\">{{ title() }}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div #chartHost class=\"xiri-echarts-host\" [style.height]=\"chartHeight()\"></div>\n\t\t\t@if (error()) {\n\t\t\t\t<div class=\"xiri-echarts-error\">{{ error() }}</div>\n\t\t\t}\n\t\t</mat-card-content>\n\t</mat-card>\n}\n", styles: [".xiri-echarts{height:100%}.xiri-echarts .xiri-echarts-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.xiri-echarts .xiri-echarts-header mat-icon{font-size:var(--xiri-icon-size-md, 24px);width:var(--xiri-icon-size-md, 24px);height:var(--xiri-icon-size-md, 24px)}.xiri-echarts .xiri-echarts-title{font-size:14px;font-weight:500;color:var(--mat-sys-on-surface-variant, #555)}.xiri-echarts .xiri-echarts-host{width:100%;min-height:160px}.xiri-echarts .xiri-echarts-error{font-size:12px;color:var(--mat-sys-error, #b00020);padding:8px 0}.xiri-echarts-flat{background:transparent;box-shadow:none;padding:0}\n"] }]
|
|
5415
|
+
}], ctorParameters: () => [], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: true }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], headerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerIcon", required: false }] }], headerIconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerIconColor", required: false }] }], chartHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartHeight", required: false }] }], chartHostRef: [{ type: i0.ViewChild, args: ['chartHost', { isSignal: true }] }] } });
|
|
5416
|
+
|
|
5417
|
+
/**
|
|
5418
|
+
* Maps semantic XiriColor names to concrete CSS color values.
|
|
5419
|
+
*
|
|
5420
|
+
* Theme tokens use Material 3 system variables; extended tokens use
|
|
5421
|
+
* fixed brand colors that work both in light and dark themes.
|
|
5422
|
+
*/
|
|
5423
|
+
const COLOR_CSS_VAR = {
|
|
5424
|
+
primary: 'var(--mat-sys-primary)',
|
|
5425
|
+
secondary: 'var(--mat-sys-secondary)',
|
|
5426
|
+
tertiary: 'var(--mat-sys-tertiary)',
|
|
5427
|
+
accent: 'var(--mat-sys-tertiary)',
|
|
5428
|
+
warn: '#f5a623',
|
|
5429
|
+
error: 'var(--mat-sys-error)',
|
|
5430
|
+
success: '#2e7d32',
|
|
5431
|
+
emerald: '#10b981',
|
|
5432
|
+
red: '#e53935',
|
|
5433
|
+
yellow: '#fbc02d',
|
|
5434
|
+
green: '#43a047',
|
|
5435
|
+
blue: '#1e88e5',
|
|
5436
|
+
purple: '#8b5cf6',
|
|
5437
|
+
orange: '#fb8c00',
|
|
5438
|
+
gray: '#9e9e9e',
|
|
5439
|
+
lightgray: '#cfcfcf',
|
|
5440
|
+
darkgray: '#616161',
|
|
5441
|
+
white: '#ffffff',
|
|
5442
|
+
black: '#000000',
|
|
5443
|
+
inherit: 'currentColor'
|
|
5444
|
+
};
|
|
5445
|
+
/**
|
|
5446
|
+
* Resolves a XiriColor token (or a freeform CSS color) to a CSS-color string
|
|
5447
|
+
* usable in echarts options. Unknown tokens fall back to the given fallback.
|
|
5448
|
+
*/
|
|
5449
|
+
function resolveColor(color, fallback = '#8b5cf6') {
|
|
5450
|
+
if (!color)
|
|
5451
|
+
return fallback;
|
|
5452
|
+
return COLOR_CSS_VAR[color] ?? fallback;
|
|
5453
|
+
}
|
|
5454
|
+
|
|
5455
|
+
/** Escapes characters that would otherwise be interpreted as HTML in echarts tooltip strings. */
|
|
5456
|
+
function escapeHtml(s) {
|
|
5457
|
+
return String(s ?? '')
|
|
5458
|
+
.replace(/&/g, '&')
|
|
5459
|
+
.replace(/</g, '<')
|
|
5460
|
+
.replace(/>/g, '>')
|
|
5461
|
+
.replace(/"/g, '"');
|
|
5462
|
+
}
|
|
5463
|
+
|
|
5464
|
+
class XiriBarChartComponent {
|
|
5465
|
+
constructor() {
|
|
5466
|
+
this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
5467
|
+
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
5468
|
+
this.compact = computed(() => !!this.settings().compact, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
5469
|
+
this.option = computed(() => {
|
|
5470
|
+
const m = this.mode();
|
|
5471
|
+
switch (m) {
|
|
5472
|
+
case 'stacked': return this.stackedOption();
|
|
5473
|
+
case 'heatmap': return this.heatmapOption();
|
|
5474
|
+
default: return this.simpleOption();
|
|
5475
|
+
}
|
|
5476
|
+
}, ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
|
|
5392
5477
|
}
|
|
5393
5478
|
baseGrid() {
|
|
5479
|
+
// Compact mode: outer card already provides padding — shrink the
|
|
5480
|
+
// echarts grid so we don't get a "double margin".
|
|
5481
|
+
if (this.compact()) {
|
|
5482
|
+
return { left: 0, right: 0, top: 4, bottom: 0, containLabel: true };
|
|
5483
|
+
}
|
|
5394
5484
|
return { left: 32, right: 16, top: 24, bottom: 24, containLabel: true };
|
|
5395
5485
|
}
|
|
5396
5486
|
simpleOption() {
|
|
@@ -5435,7 +5525,7 @@ class XiriBarChartComponent {
|
|
|
5435
5525
|
const s = this.settings();
|
|
5436
5526
|
const bars = s.bars ?? [];
|
|
5437
5527
|
const segCount = Math.max(0, ...bars.map(b => b.segments?.length ?? 0));
|
|
5438
|
-
//
|
|
5528
|
+
// Derive a default series name per segment-position from the first bar that has it.
|
|
5439
5529
|
const seriesNames = [];
|
|
5440
5530
|
for (let i = 0; i < segCount; i++) {
|
|
5441
5531
|
const found = bars.find(b => b.segments?.[i]?.name)?.segments?.[i]?.name;
|
|
@@ -5540,25 +5630,725 @@ class XiriBarChartComponent {
|
|
|
5540
5630
|
};
|
|
5541
5631
|
}
|
|
5542
5632
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5543
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
5633
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.2", type: XiriBarChartComponent, isStandalone: true, selector: "xiri-barchart", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
5634
|
+
<xiri-echarts-host
|
|
5635
|
+
[option]="option()"
|
|
5636
|
+
[compact]="compact()"
|
|
5637
|
+
[title]="settings().title">
|
|
5638
|
+
</xiri-echarts-host>
|
|
5639
|
+
`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5544
5640
|
}
|
|
5545
5641
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriBarChartComponent, decorators: [{
|
|
5546
5642
|
type: Component,
|
|
5547
|
-
args: [{
|
|
5548
|
-
|
|
5549
|
-
|
|
5550
|
-
|
|
5551
|
-
|
|
5552
|
-
|
|
5553
|
-
|
|
5554
|
-
|
|
5555
|
-
|
|
5643
|
+
args: [{
|
|
5644
|
+
selector: 'xiri-barchart',
|
|
5645
|
+
template: `
|
|
5646
|
+
<xiri-echarts-host
|
|
5647
|
+
[option]="option()"
|
|
5648
|
+
[compact]="compact()"
|
|
5649
|
+
[title]="settings().title">
|
|
5650
|
+
</xiri-echarts-host>
|
|
5651
|
+
`,
|
|
5652
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5653
|
+
imports: [XiriEchartsHostComponent]
|
|
5654
|
+
}]
|
|
5655
|
+
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
5556
5656
|
|
|
5557
5657
|
var barchart_component = /*#__PURE__*/Object.freeze({
|
|
5558
5658
|
__proto__: null,
|
|
5559
5659
|
XiriBarChartComponent: XiriBarChartComponent
|
|
5560
5660
|
});
|
|
5561
5661
|
|
|
5662
|
+
class XiriLineChartComponent {
|
|
5663
|
+
constructor() {
|
|
5664
|
+
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
5665
|
+
this.compact = computed(() => !!this.settings().compact, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
5666
|
+
this.option = computed(() => {
|
|
5667
|
+
const s = this.settings();
|
|
5668
|
+
const lines = s.lines ?? [];
|
|
5669
|
+
const labels = s.xLabels ?? [];
|
|
5670
|
+
const series = lines.map((line, i) => {
|
|
5671
|
+
const color = resolveColor(line.color, FALLBACK_COLORS$2[i % FALLBACK_COLORS$2.length]);
|
|
5672
|
+
return {
|
|
5673
|
+
type: 'line',
|
|
5674
|
+
name: line.name,
|
|
5675
|
+
smooth: !!s.smooth,
|
|
5676
|
+
symbol: 'circle',
|
|
5677
|
+
symbolSize: 6,
|
|
5678
|
+
lineStyle: {
|
|
5679
|
+
width: 2,
|
|
5680
|
+
type: line.dashed ? 'dashed' : 'solid',
|
|
5681
|
+
color,
|
|
5682
|
+
},
|
|
5683
|
+
itemStyle: { color },
|
|
5684
|
+
areaStyle: line.area ? { color, opacity: 0.15 } : undefined,
|
|
5685
|
+
data: line.values,
|
|
5686
|
+
};
|
|
5687
|
+
});
|
|
5688
|
+
return {
|
|
5689
|
+
grid: this.compact()
|
|
5690
|
+
? { left: 0, right: 0, top: 4, bottom: 0, containLabel: true }
|
|
5691
|
+
: { left: 32, right: 16, top: 24, bottom: 24, containLabel: true },
|
|
5692
|
+
tooltip: {
|
|
5693
|
+
trigger: 'axis',
|
|
5694
|
+
formatter: (params) => {
|
|
5695
|
+
const arr = Array.isArray(params) ? params : [params];
|
|
5696
|
+
if (!arr.length)
|
|
5697
|
+
return '';
|
|
5698
|
+
const header = escapeHtml(String(arr[0].axisValueLabel ?? arr[0].name ?? ''));
|
|
5699
|
+
let body = '';
|
|
5700
|
+
for (const p of arr) {
|
|
5701
|
+
body += `<br/>${p.marker}${escapeHtml(String(p.seriesName ?? ''))}: <b>${p.value}</b>`;
|
|
5702
|
+
}
|
|
5703
|
+
return `<b>${header}</b>${body}`;
|
|
5704
|
+
}
|
|
5705
|
+
},
|
|
5706
|
+
legend: lines.length > 1 ? { top: 0, right: 0, type: 'scroll' } : undefined,
|
|
5707
|
+
xAxis: {
|
|
5708
|
+
type: 'category',
|
|
5709
|
+
data: labels,
|
|
5710
|
+
boundaryGap: false,
|
|
5711
|
+
axisLine: { show: false },
|
|
5712
|
+
axisTick: { show: false }
|
|
5713
|
+
},
|
|
5714
|
+
yAxis: {
|
|
5715
|
+
type: 'value',
|
|
5716
|
+
min: s.yMin,
|
|
5717
|
+
max: s.yMax,
|
|
5718
|
+
splitLine: { lineStyle: { color: '#eee' } }
|
|
5719
|
+
},
|
|
5720
|
+
series,
|
|
5721
|
+
};
|
|
5722
|
+
}, ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
|
|
5723
|
+
}
|
|
5724
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriLineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5725
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.2", type: XiriLineChartComponent, isStandalone: true, selector: "xiri-linechart", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
5726
|
+
<xiri-echarts-host
|
|
5727
|
+
[option]="option()"
|
|
5728
|
+
[compact]="compact()"
|
|
5729
|
+
[title]="settings().title">
|
|
5730
|
+
</xiri-echarts-host>
|
|
5731
|
+
`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5732
|
+
}
|
|
5733
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriLineChartComponent, decorators: [{
|
|
5734
|
+
type: Component,
|
|
5735
|
+
args: [{
|
|
5736
|
+
selector: 'xiri-linechart',
|
|
5737
|
+
template: `
|
|
5738
|
+
<xiri-echarts-host
|
|
5739
|
+
[option]="option()"
|
|
5740
|
+
[compact]="compact()"
|
|
5741
|
+
[title]="settings().title">
|
|
5742
|
+
</xiri-echarts-host>
|
|
5743
|
+
`,
|
|
5744
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5745
|
+
imports: [XiriEchartsHostComponent]
|
|
5746
|
+
}]
|
|
5747
|
+
}], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
5748
|
+
/** Fallback color rotation when a line has no explicit color. */
|
|
5749
|
+
const FALLBACK_COLORS$2 = ['#8b5cf6', '#10b981', '#1e88e5', '#fb8c00', '#e53935', '#fbc02d', '#43a047', '#616161'];
|
|
5750
|
+
|
|
5751
|
+
var linechart_component = /*#__PURE__*/Object.freeze({
|
|
5752
|
+
__proto__: null,
|
|
5753
|
+
XiriLineChartComponent: XiriLineChartComponent
|
|
5754
|
+
});
|
|
5755
|
+
|
|
5756
|
+
class XiriPieChartComponent {
|
|
5757
|
+
constructor() {
|
|
5758
|
+
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
5759
|
+
this.compact = computed(() => !!this.settings().compact, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
5760
|
+
this.option = computed(() => {
|
|
5761
|
+
const s = this.settings();
|
|
5762
|
+
const slices = s.slices ?? [];
|
|
5763
|
+
// nightingale: smaller inner radius even on full pie so the rose has a visible center
|
|
5764
|
+
const radius = s.donut
|
|
5765
|
+
? ['55%', '78%']
|
|
5766
|
+
: (s.nightingale ? ['20%', '78%'] : ['0', '78%']);
|
|
5767
|
+
const series = {
|
|
5768
|
+
type: 'pie',
|
|
5769
|
+
radius,
|
|
5770
|
+
center: ['50%', '45%'],
|
|
5771
|
+
avoidLabelOverlap: true,
|
|
5772
|
+
label: {
|
|
5773
|
+
show: !s.donut && !this.compact(),
|
|
5774
|
+
formatter: '{b}\n{d}%',
|
|
5775
|
+
},
|
|
5776
|
+
labelLine: { show: !s.donut && !this.compact() },
|
|
5777
|
+
data: slices.map((slice, i) => ({
|
|
5778
|
+
name: slice.name,
|
|
5779
|
+
value: slice.value,
|
|
5780
|
+
itemStyle: { color: resolveColor(slice.color, FALLBACK_COLORS$1[i % FALLBACK_COLORS$1.length]) }
|
|
5781
|
+
}))
|
|
5782
|
+
};
|
|
5783
|
+
if (s.nightingale) {
|
|
5784
|
+
series.roseType = s.nightingaleType ?? 'radius';
|
|
5785
|
+
}
|
|
5786
|
+
return {
|
|
5787
|
+
tooltip: {
|
|
5788
|
+
trigger: 'item',
|
|
5789
|
+
formatter: (p) => {
|
|
5790
|
+
const name = escapeHtml(String(p.name ?? ''));
|
|
5791
|
+
return `<b>${name}</b><br/>${p.marker}<b>${p.value}</b> (${p.percent}%)`;
|
|
5792
|
+
}
|
|
5793
|
+
},
|
|
5794
|
+
legend: { bottom: 0, type: 'scroll' },
|
|
5795
|
+
series: [series]
|
|
5796
|
+
};
|
|
5797
|
+
}, ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
|
|
5798
|
+
}
|
|
5799
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriPieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5800
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.2", type: XiriPieChartComponent, isStandalone: true, selector: "xiri-piechart", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
5801
|
+
<xiri-echarts-host
|
|
5802
|
+
[option]="option()"
|
|
5803
|
+
[compact]="compact()"
|
|
5804
|
+
[title]="settings().title">
|
|
5805
|
+
</xiri-echarts-host>
|
|
5806
|
+
`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5807
|
+
}
|
|
5808
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriPieChartComponent, decorators: [{
|
|
5809
|
+
type: Component,
|
|
5810
|
+
args: [{
|
|
5811
|
+
selector: 'xiri-piechart',
|
|
5812
|
+
template: `
|
|
5813
|
+
<xiri-echarts-host
|
|
5814
|
+
[option]="option()"
|
|
5815
|
+
[compact]="compact()"
|
|
5816
|
+
[title]="settings().title">
|
|
5817
|
+
</xiri-echarts-host>
|
|
5818
|
+
`,
|
|
5819
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5820
|
+
imports: [XiriEchartsHostComponent]
|
|
5821
|
+
}]
|
|
5822
|
+
}], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
5823
|
+
const FALLBACK_COLORS$1 = ['#8b5cf6', '#10b981', '#1e88e5', '#fb8c00', '#e53935', '#fbc02d', '#43a047', '#616161'];
|
|
5824
|
+
|
|
5825
|
+
var piechart_component = /*#__PURE__*/Object.freeze({
|
|
5826
|
+
__proto__: null,
|
|
5827
|
+
XiriPieChartComponent: XiriPieChartComponent
|
|
5828
|
+
});
|
|
5829
|
+
|
|
5830
|
+
class XiriGaugeChartComponent {
|
|
5831
|
+
constructor() {
|
|
5832
|
+
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
5833
|
+
this.compact = computed(() => !!this.settings().compact, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
5834
|
+
this.option = computed(() => {
|
|
5835
|
+
const s = this.settings();
|
|
5836
|
+
const min = s.min ?? 0;
|
|
5837
|
+
const max = s.max ?? 100;
|
|
5838
|
+
const color = resolveColor(s.color, '#8b5cf6');
|
|
5839
|
+
return {
|
|
5840
|
+
series: [{
|
|
5841
|
+
type: 'gauge',
|
|
5842
|
+
min,
|
|
5843
|
+
max,
|
|
5844
|
+
center: ['50%', '60%'],
|
|
5845
|
+
radius: this.compact() ? '90%' : '80%',
|
|
5846
|
+
progress: {
|
|
5847
|
+
show: true,
|
|
5848
|
+
width: 12,
|
|
5849
|
+
itemStyle: { color }
|
|
5850
|
+
},
|
|
5851
|
+
axisLine: {
|
|
5852
|
+
lineStyle: { width: 12, color: [[1, '#eee']] }
|
|
5853
|
+
},
|
|
5854
|
+
pointer: { show: false },
|
|
5855
|
+
axisTick: { show: !this.compact() },
|
|
5856
|
+
splitLine: { show: !this.compact() },
|
|
5857
|
+
axisLabel: { show: !this.compact(), distance: 18, fontSize: 11 },
|
|
5858
|
+
anchor: { show: false },
|
|
5859
|
+
title: { show: false },
|
|
5860
|
+
detail: {
|
|
5861
|
+
valueAnimation: true,
|
|
5862
|
+
offsetCenter: [0, '15%'],
|
|
5863
|
+
fontSize: this.compact() ? 18 : 24,
|
|
5864
|
+
fontWeight: 'bold',
|
|
5865
|
+
formatter: s.label ? `{value}\n{label|${s.label}}` : '{value}',
|
|
5866
|
+
rich: { label: { fontSize: 11, fontWeight: 'normal', color: '#888' } },
|
|
5867
|
+
color
|
|
5868
|
+
},
|
|
5869
|
+
data: [{ value: s.value }]
|
|
5870
|
+
}]
|
|
5871
|
+
};
|
|
5872
|
+
}, ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
|
|
5873
|
+
}
|
|
5874
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5875
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.2", type: XiriGaugeChartComponent, isStandalone: true, selector: "xiri-gaugechart", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
5876
|
+
<xiri-echarts-host
|
|
5877
|
+
[option]="option()"
|
|
5878
|
+
[compact]="compact()"
|
|
5879
|
+
[title]="settings().title">
|
|
5880
|
+
</xiri-echarts-host>
|
|
5881
|
+
`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5882
|
+
}
|
|
5883
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriGaugeChartComponent, decorators: [{
|
|
5884
|
+
type: Component,
|
|
5885
|
+
args: [{
|
|
5886
|
+
selector: 'xiri-gaugechart',
|
|
5887
|
+
template: `
|
|
5888
|
+
<xiri-echarts-host
|
|
5889
|
+
[option]="option()"
|
|
5890
|
+
[compact]="compact()"
|
|
5891
|
+
[title]="settings().title">
|
|
5892
|
+
</xiri-echarts-host>
|
|
5893
|
+
`,
|
|
5894
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5895
|
+
imports: [XiriEchartsHostComponent]
|
|
5896
|
+
}]
|
|
5897
|
+
}], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
5898
|
+
|
|
5899
|
+
var gaugechart_component = /*#__PURE__*/Object.freeze({
|
|
5900
|
+
__proto__: null,
|
|
5901
|
+
XiriGaugeChartComponent: XiriGaugeChartComponent
|
|
5902
|
+
});
|
|
5903
|
+
|
|
5904
|
+
class XiriHeatmapComponent {
|
|
5905
|
+
constructor() {
|
|
5906
|
+
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
5907
|
+
this.compact = computed(() => !!this.settings().compact, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
5908
|
+
this.height = computed(() => {
|
|
5909
|
+
const rows = this.settings().yLabels.length || 1;
|
|
5910
|
+
const px = Math.max(200, rows * 32 + 40);
|
|
5911
|
+
return px + 'px';
|
|
5912
|
+
}, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
5913
|
+
this.option = computed(() => {
|
|
5914
|
+
const s = this.settings();
|
|
5915
|
+
const cells = s.cells ?? [];
|
|
5916
|
+
const values = cells.map(c => c.value);
|
|
5917
|
+
const min = s.min ?? Math.min(0, ...values);
|
|
5918
|
+
const max = s.max ?? Math.max(0, ...values);
|
|
5919
|
+
const [lowColor, highColor] = s.colorRange ?? ['#ede9fe', '#7c3aed'];
|
|
5920
|
+
return {
|
|
5921
|
+
grid: this.compact()
|
|
5922
|
+
? { left: 0, right: 0, top: 4, bottom: 0, containLabel: true }
|
|
5923
|
+
: { left: 32, right: 16, top: 24, bottom: 24, containLabel: true },
|
|
5924
|
+
tooltip: {
|
|
5925
|
+
position: 'top',
|
|
5926
|
+
formatter: (p) => {
|
|
5927
|
+
const x = s.xLabels[p.value[0]] ?? '';
|
|
5928
|
+
const y = s.yLabels[p.value[1]] ?? '';
|
|
5929
|
+
return `<b>${escapeHtml(y)}</b> / <b>${escapeHtml(x)}</b><br/>${p.marker}<b>${p.value[2]}</b>`;
|
|
5930
|
+
}
|
|
5931
|
+
},
|
|
5932
|
+
xAxis: {
|
|
5933
|
+
type: 'category',
|
|
5934
|
+
data: s.xLabels,
|
|
5935
|
+
splitArea: { show: true },
|
|
5936
|
+
axisLine: { show: false },
|
|
5937
|
+
axisTick: { show: false }
|
|
5938
|
+
},
|
|
5939
|
+
yAxis: {
|
|
5940
|
+
type: 'category',
|
|
5941
|
+
data: s.yLabels,
|
|
5942
|
+
splitArea: { show: true },
|
|
5943
|
+
axisLine: { show: false },
|
|
5944
|
+
axisTick: { show: false }
|
|
5945
|
+
},
|
|
5946
|
+
visualMap: {
|
|
5947
|
+
min,
|
|
5948
|
+
max,
|
|
5949
|
+
calculable: true,
|
|
5950
|
+
orient: 'horizontal',
|
|
5951
|
+
left: 'center',
|
|
5952
|
+
bottom: 0,
|
|
5953
|
+
inRange: { color: [lowColor, highColor] },
|
|
5954
|
+
show: !this.compact()
|
|
5955
|
+
},
|
|
5956
|
+
series: [{
|
|
5957
|
+
type: 'heatmap',
|
|
5958
|
+
data: cells.map(c => [c.x, c.y, c.value]),
|
|
5959
|
+
label: { show: !!s.showValues, formatter: (p) => String(p.value[2]) },
|
|
5960
|
+
emphasis: { itemStyle: { shadowBlur: 6, shadowColor: 'rgba(0, 0, 0, 0.3)' } }
|
|
5961
|
+
}]
|
|
5962
|
+
};
|
|
5963
|
+
}, ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
|
|
5964
|
+
}
|
|
5965
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriHeatmapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5966
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.2", type: XiriHeatmapComponent, isStandalone: true, selector: "xiri-heatmap", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
5967
|
+
<xiri-echarts-host
|
|
5968
|
+
[option]="option()"
|
|
5969
|
+
[compact]="compact()"
|
|
5970
|
+
[title]="settings().title"
|
|
5971
|
+
[chartHeight]="height()">
|
|
5972
|
+
</xiri-echarts-host>
|
|
5973
|
+
`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5974
|
+
}
|
|
5975
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriHeatmapComponent, decorators: [{
|
|
5976
|
+
type: Component,
|
|
5977
|
+
args: [{
|
|
5978
|
+
selector: 'xiri-heatmap',
|
|
5979
|
+
template: `
|
|
5980
|
+
<xiri-echarts-host
|
|
5981
|
+
[option]="option()"
|
|
5982
|
+
[compact]="compact()"
|
|
5983
|
+
[title]="settings().title"
|
|
5984
|
+
[chartHeight]="height()">
|
|
5985
|
+
</xiri-echarts-host>
|
|
5986
|
+
`,
|
|
5987
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5988
|
+
imports: [XiriEchartsHostComponent]
|
|
5989
|
+
}]
|
|
5990
|
+
}], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
5991
|
+
|
|
5992
|
+
var heatmap_component = /*#__PURE__*/Object.freeze({
|
|
5993
|
+
__proto__: null,
|
|
5994
|
+
XiriHeatmapComponent: XiriHeatmapComponent
|
|
5995
|
+
});
|
|
5996
|
+
|
|
5997
|
+
class XiriCalendarComponent {
|
|
5998
|
+
constructor() {
|
|
5999
|
+
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
6000
|
+
this.compact = computed(() => !!this.settings().compact, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
6001
|
+
this.cellSize = computed(() => this.settings().cellSize ?? (this.compact() ? 12 : 16), ...(ngDevMode ? [{ debugName: "cellSize" }] : /* istanbul ignore next */ []));
|
|
6002
|
+
this.height = computed(() => {
|
|
6003
|
+
// 7 weekday rows + label space
|
|
6004
|
+
const px = this.cellSize() * 7 + 60;
|
|
6005
|
+
return px + 'px';
|
|
6006
|
+
}, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
6007
|
+
this.option = computed(() => {
|
|
6008
|
+
const s = this.settings();
|
|
6009
|
+
const cells = s.cells ?? [];
|
|
6010
|
+
const values = cells.map(c => c.value);
|
|
6011
|
+
const min = s.min ?? Math.min(0, ...values);
|
|
6012
|
+
const max = s.max ?? Math.max(0, ...values);
|
|
6013
|
+
const [lowColor, highColor] = s.colorRange ?? ['#e6f4ea', '#2e7d32'];
|
|
6014
|
+
const sz = this.cellSize();
|
|
6015
|
+
return {
|
|
6016
|
+
tooltip: {
|
|
6017
|
+
formatter: (p) => {
|
|
6018
|
+
const date = String(p.value[0]);
|
|
6019
|
+
const v = p.value[1];
|
|
6020
|
+
return `<b>${escapeHtml(date)}</b><br/>${p.marker}<b>${v}</b>`;
|
|
6021
|
+
}
|
|
6022
|
+
},
|
|
6023
|
+
visualMap: {
|
|
6024
|
+
min,
|
|
6025
|
+
max,
|
|
6026
|
+
orient: 'horizontal',
|
|
6027
|
+
left: 'center',
|
|
6028
|
+
bottom: 0,
|
|
6029
|
+
show: !this.compact(),
|
|
6030
|
+
inRange: { color: [lowColor, highColor] }
|
|
6031
|
+
},
|
|
6032
|
+
calendar: {
|
|
6033
|
+
range: s.range,
|
|
6034
|
+
cellSize: [sz, sz],
|
|
6035
|
+
splitLine: { show: false },
|
|
6036
|
+
itemStyle: { borderColor: '#fff', borderWidth: 2 },
|
|
6037
|
+
yearLabel: { show: false },
|
|
6038
|
+
dayLabel: { fontSize: 10 },
|
|
6039
|
+
monthLabel: { fontSize: 11 },
|
|
6040
|
+
top: 24,
|
|
6041
|
+
left: 32,
|
|
6042
|
+
right: 16,
|
|
6043
|
+
},
|
|
6044
|
+
series: [{
|
|
6045
|
+
type: 'heatmap',
|
|
6046
|
+
coordinateSystem: 'calendar',
|
|
6047
|
+
data: cells.map(c => [c.date, c.value])
|
|
6048
|
+
}]
|
|
6049
|
+
};
|
|
6050
|
+
}, ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
|
|
6051
|
+
}
|
|
6052
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6053
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.2", type: XiriCalendarComponent, isStandalone: true, selector: "xiri-calendar", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
6054
|
+
<xiri-echarts-host
|
|
6055
|
+
[option]="option()"
|
|
6056
|
+
[compact]="compact()"
|
|
6057
|
+
[title]="settings().title"
|
|
6058
|
+
[chartHeight]="height()">
|
|
6059
|
+
</xiri-echarts-host>
|
|
6060
|
+
`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6061
|
+
}
|
|
6062
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriCalendarComponent, decorators: [{
|
|
6063
|
+
type: Component,
|
|
6064
|
+
args: [{
|
|
6065
|
+
selector: 'xiri-calendar',
|
|
6066
|
+
template: `
|
|
6067
|
+
<xiri-echarts-host
|
|
6068
|
+
[option]="option()"
|
|
6069
|
+
[compact]="compact()"
|
|
6070
|
+
[title]="settings().title"
|
|
6071
|
+
[chartHeight]="height()">
|
|
6072
|
+
</xiri-echarts-host>
|
|
6073
|
+
`,
|
|
6074
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
6075
|
+
imports: [XiriEchartsHostComponent]
|
|
6076
|
+
}]
|
|
6077
|
+
}], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
6078
|
+
|
|
6079
|
+
var calendar_component = /*#__PURE__*/Object.freeze({
|
|
6080
|
+
__proto__: null,
|
|
6081
|
+
XiriCalendarComponent: XiriCalendarComponent
|
|
6082
|
+
});
|
|
6083
|
+
|
|
6084
|
+
class XiriTreeComponent {
|
|
6085
|
+
constructor() {
|
|
6086
|
+
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
6087
|
+
this.compact = computed(() => !!this.settings().compact, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
6088
|
+
this.height = computed(() => {
|
|
6089
|
+
// Estimate based on leaf count
|
|
6090
|
+
const leaves = countLeaves(this.settings().root);
|
|
6091
|
+
const px = Math.max(240, leaves * 24 + 80);
|
|
6092
|
+
return px + 'px';
|
|
6093
|
+
}, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
6094
|
+
this.option = computed(() => {
|
|
6095
|
+
const s = this.settings();
|
|
6096
|
+
const orient = s.orient ?? 'LR';
|
|
6097
|
+
const layout = s.layout ?? 'orthogonal';
|
|
6098
|
+
return {
|
|
6099
|
+
tooltip: {
|
|
6100
|
+
trigger: 'item',
|
|
6101
|
+
triggerOn: 'mousemove',
|
|
6102
|
+
formatter: (p) => {
|
|
6103
|
+
const v = p.data?.value;
|
|
6104
|
+
const head = `<b>${escapeText(p.name)}</b>`;
|
|
6105
|
+
return v != null ? `${head}<br/>${p.marker}<b>${v}</b>` : head;
|
|
6106
|
+
}
|
|
6107
|
+
},
|
|
6108
|
+
series: [{
|
|
6109
|
+
type: 'tree',
|
|
6110
|
+
data: [s.root],
|
|
6111
|
+
top: 16,
|
|
6112
|
+
bottom: 16,
|
|
6113
|
+
// Reserve enough space for leaf labels so they don't get truncated by echarts.
|
|
6114
|
+
left: layout === 'radial' ? '5%' : (orient === 'LR' ? 96 : (orient === 'RL' ? 16 : 16)),
|
|
6115
|
+
right: layout === 'radial' ? '5%' : (orient === 'RL' ? 96 : (orient === 'LR' ? 96 : 16)),
|
|
6116
|
+
layout,
|
|
6117
|
+
orient,
|
|
6118
|
+
symbol: 'emptyCircle',
|
|
6119
|
+
symbolSize: 7,
|
|
6120
|
+
initialTreeDepth: 3,
|
|
6121
|
+
label: {
|
|
6122
|
+
position: orient === 'TB' ? 'top' : 'left',
|
|
6123
|
+
align: orient === 'LR' ? 'right' : 'center',
|
|
6124
|
+
verticalAlign: 'middle',
|
|
6125
|
+
fontSize: 12,
|
|
6126
|
+
overflow: 'none'
|
|
6127
|
+
},
|
|
6128
|
+
leaves: {
|
|
6129
|
+
label: {
|
|
6130
|
+
position: orient === 'TB' ? 'bottom' : 'right',
|
|
6131
|
+
align: orient === 'LR' ? 'left' : 'center',
|
|
6132
|
+
overflow: 'none'
|
|
6133
|
+
}
|
|
6134
|
+
},
|
|
6135
|
+
expandAndCollapse: true,
|
|
6136
|
+
animationDuration: 250,
|
|
6137
|
+
animationDurationUpdate: 250
|
|
6138
|
+
}]
|
|
6139
|
+
};
|
|
6140
|
+
}, ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
|
|
6141
|
+
}
|
|
6142
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6143
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.2", type: XiriTreeComponent, isStandalone: true, selector: "xiri-tree", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
6144
|
+
<xiri-echarts-host
|
|
6145
|
+
[option]="option()"
|
|
6146
|
+
[compact]="compact()"
|
|
6147
|
+
[title]="settings().title"
|
|
6148
|
+
[chartHeight]="height()">
|
|
6149
|
+
</xiri-echarts-host>
|
|
6150
|
+
`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6151
|
+
}
|
|
6152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriTreeComponent, decorators: [{
|
|
6153
|
+
type: Component,
|
|
6154
|
+
args: [{
|
|
6155
|
+
selector: 'xiri-tree',
|
|
6156
|
+
template: `
|
|
6157
|
+
<xiri-echarts-host
|
|
6158
|
+
[option]="option()"
|
|
6159
|
+
[compact]="compact()"
|
|
6160
|
+
[title]="settings().title"
|
|
6161
|
+
[chartHeight]="height()">
|
|
6162
|
+
</xiri-echarts-host>
|
|
6163
|
+
`,
|
|
6164
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
6165
|
+
imports: [XiriEchartsHostComponent]
|
|
6166
|
+
}]
|
|
6167
|
+
}], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
6168
|
+
function countLeaves(n) {
|
|
6169
|
+
if (!n.children?.length)
|
|
6170
|
+
return 1;
|
|
6171
|
+
return n.children.reduce((sum, c) => sum + countLeaves(c), 0);
|
|
6172
|
+
}
|
|
6173
|
+
function escapeText(s) {
|
|
6174
|
+
return String(s ?? '').replace(/</g, '<').replace(/>/g, '>');
|
|
6175
|
+
}
|
|
6176
|
+
|
|
6177
|
+
var tree_component = /*#__PURE__*/Object.freeze({
|
|
6178
|
+
__proto__: null,
|
|
6179
|
+
XiriTreeComponent: XiriTreeComponent
|
|
6180
|
+
});
|
|
6181
|
+
|
|
6182
|
+
class XiriSankeyComponent {
|
|
6183
|
+
constructor() {
|
|
6184
|
+
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
6185
|
+
this.compact = computed(() => !!this.settings().compact, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
6186
|
+
this.height = computed(() => {
|
|
6187
|
+
const n = this.settings().nodes.length || 1;
|
|
6188
|
+
const px = Math.max(280, n * 20 + 80);
|
|
6189
|
+
return px + 'px';
|
|
6190
|
+
}, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
6191
|
+
this.option = computed(() => {
|
|
6192
|
+
const s = this.settings();
|
|
6193
|
+
return {
|
|
6194
|
+
tooltip: { trigger: 'item', triggerOn: 'mousemove' },
|
|
6195
|
+
series: [{
|
|
6196
|
+
type: 'sankey',
|
|
6197
|
+
orient: s.orient ?? 'horizontal',
|
|
6198
|
+
top: 16,
|
|
6199
|
+
bottom: 16,
|
|
6200
|
+
left: 16,
|
|
6201
|
+
right: 80,
|
|
6202
|
+
emphasis: { focus: 'adjacency' },
|
|
6203
|
+
lineStyle: { color: 'gradient', curveness: 0.5 },
|
|
6204
|
+
label: { fontSize: 12 },
|
|
6205
|
+
data: s.nodes.map((n, i) => ({
|
|
6206
|
+
name: n.name,
|
|
6207
|
+
itemStyle: { color: resolveColor(n.color, FALLBACK_COLORS[i % FALLBACK_COLORS.length]) }
|
|
6208
|
+
})),
|
|
6209
|
+
links: s.links
|
|
6210
|
+
}]
|
|
6211
|
+
};
|
|
6212
|
+
}, ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
|
|
6213
|
+
}
|
|
6214
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSankeyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6215
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.2", type: XiriSankeyComponent, isStandalone: true, selector: "xiri-sankey", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
6216
|
+
<xiri-echarts-host
|
|
6217
|
+
[option]="option()"
|
|
6218
|
+
[compact]="compact()"
|
|
6219
|
+
[title]="settings().title"
|
|
6220
|
+
[chartHeight]="height()">
|
|
6221
|
+
</xiri-echarts-host>
|
|
6222
|
+
`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6223
|
+
}
|
|
6224
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSankeyComponent, decorators: [{
|
|
6225
|
+
type: Component,
|
|
6226
|
+
args: [{
|
|
6227
|
+
selector: 'xiri-sankey',
|
|
6228
|
+
template: `
|
|
6229
|
+
<xiri-echarts-host
|
|
6230
|
+
[option]="option()"
|
|
6231
|
+
[compact]="compact()"
|
|
6232
|
+
[title]="settings().title"
|
|
6233
|
+
[chartHeight]="height()">
|
|
6234
|
+
</xiri-echarts-host>
|
|
6235
|
+
`,
|
|
6236
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
6237
|
+
imports: [XiriEchartsHostComponent]
|
|
6238
|
+
}]
|
|
6239
|
+
}], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
6240
|
+
const FALLBACK_COLORS = ['#8b5cf6', '#10b981', '#1e88e5', '#fb8c00', '#e53935', '#fbc02d', '#43a047', '#616161'];
|
|
6241
|
+
|
|
6242
|
+
var sankey_component = /*#__PURE__*/Object.freeze({
|
|
6243
|
+
__proto__: null,
|
|
6244
|
+
XiriSankeyComponent: XiriSankeyComponent
|
|
6245
|
+
});
|
|
6246
|
+
|
|
6247
|
+
class XiriGanttComponent {
|
|
6248
|
+
constructor() {
|
|
6249
|
+
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
6250
|
+
this.compact = computed(() => !!this.settings().compact, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
6251
|
+
this.height = computed(() => {
|
|
6252
|
+
const rows = this.settings().rows.length || 1;
|
|
6253
|
+
const px = Math.max(220, rows * 36 + 80);
|
|
6254
|
+
return px + 'px';
|
|
6255
|
+
}, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
6256
|
+
this.option = computed(() => {
|
|
6257
|
+
const s = this.settings();
|
|
6258
|
+
const rows = s.rows ?? [];
|
|
6259
|
+
// Each datum: [rowIndex, start, end, name, color]
|
|
6260
|
+
const data = (s.tasks ?? []).map(t => [
|
|
6261
|
+
t.row,
|
|
6262
|
+
t.start,
|
|
6263
|
+
t.end,
|
|
6264
|
+
t.name,
|
|
6265
|
+
resolveColor(t.color, '#8b5cf6')
|
|
6266
|
+
]);
|
|
6267
|
+
const renderItem = (_params, api) => {
|
|
6268
|
+
const rowIdx = api.value(0);
|
|
6269
|
+
const start = api.coord([api.value(1), rowIdx]);
|
|
6270
|
+
const end = api.coord([api.value(2), rowIdx]);
|
|
6271
|
+
const cellH = api.size([0, 1])[1];
|
|
6272
|
+
const height = Math.max(4, cellH * 0.6);
|
|
6273
|
+
return {
|
|
6274
|
+
type: 'rect',
|
|
6275
|
+
transition: ['shape'],
|
|
6276
|
+
shape: {
|
|
6277
|
+
x: start[0],
|
|
6278
|
+
y: start[1] - height / 2,
|
|
6279
|
+
width: Math.max(1, end[0] - start[0]),
|
|
6280
|
+
height,
|
|
6281
|
+
r: 4
|
|
6282
|
+
},
|
|
6283
|
+
style: { fill: api.value(4) }
|
|
6284
|
+
};
|
|
6285
|
+
};
|
|
6286
|
+
return {
|
|
6287
|
+
tooltip: {
|
|
6288
|
+
formatter: (p) => {
|
|
6289
|
+
const v = p.value;
|
|
6290
|
+
const fmt = (ms) => new Date(ms).toLocaleString();
|
|
6291
|
+
const row = rows[v[0]] ?? '';
|
|
6292
|
+
return `<b>${escapeHtml(v[3])}</b><br/>${escapeHtml(row)}<br/>${escapeHtml(fmt(v[1]))} → ${escapeHtml(fmt(v[2]))}`;
|
|
6293
|
+
}
|
|
6294
|
+
},
|
|
6295
|
+
grid: { left: 8, right: 16, top: 16, bottom: 24, containLabel: true },
|
|
6296
|
+
xAxis: {
|
|
6297
|
+
type: 'time',
|
|
6298
|
+
min: s.rangeStart,
|
|
6299
|
+
max: s.rangeEnd,
|
|
6300
|
+
splitLine: { lineStyle: { color: '#eee' } }
|
|
6301
|
+
},
|
|
6302
|
+
yAxis: {
|
|
6303
|
+
type: 'category',
|
|
6304
|
+
data: rows,
|
|
6305
|
+
inverse: true,
|
|
6306
|
+
splitLine: { show: false },
|
|
6307
|
+
axisLine: { show: false },
|
|
6308
|
+
axisTick: { show: false }
|
|
6309
|
+
},
|
|
6310
|
+
series: [{
|
|
6311
|
+
type: 'custom',
|
|
6312
|
+
encode: { x: [1, 2], y: 0 },
|
|
6313
|
+
clip: true,
|
|
6314
|
+
renderItem,
|
|
6315
|
+
data
|
|
6316
|
+
}]
|
|
6317
|
+
};
|
|
6318
|
+
}, ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
|
|
6319
|
+
}
|
|
6320
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriGanttComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6321
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.2", type: XiriGanttComponent, isStandalone: true, selector: "xiri-gantt", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
6322
|
+
<xiri-echarts-host
|
|
6323
|
+
[option]="option()"
|
|
6324
|
+
[compact]="compact()"
|
|
6325
|
+
[title]="settings().title"
|
|
6326
|
+
[chartHeight]="height()">
|
|
6327
|
+
</xiri-echarts-host>
|
|
6328
|
+
`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6329
|
+
}
|
|
6330
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriGanttComponent, decorators: [{
|
|
6331
|
+
type: Component,
|
|
6332
|
+
args: [{
|
|
6333
|
+
selector: 'xiri-gantt',
|
|
6334
|
+
template: `
|
|
6335
|
+
<xiri-echarts-host
|
|
6336
|
+
[option]="option()"
|
|
6337
|
+
[compact]="compact()"
|
|
6338
|
+
[title]="settings().title"
|
|
6339
|
+
[chartHeight]="height()">
|
|
6340
|
+
</xiri-echarts-host>
|
|
6341
|
+
`,
|
|
6342
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
6343
|
+
imports: [XiriEchartsHostComponent]
|
|
6344
|
+
}]
|
|
6345
|
+
}], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
6346
|
+
|
|
6347
|
+
var gantt_component = /*#__PURE__*/Object.freeze({
|
|
6348
|
+
__proto__: null,
|
|
6349
|
+
XiriGanttComponent: XiriGanttComponent
|
|
6350
|
+
});
|
|
6351
|
+
|
|
5562
6352
|
class XiriPageHeaderComponent {
|
|
5563
6353
|
constructor() {
|
|
5564
6354
|
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
@@ -5843,5 +6633,5 @@ function provideXiriServices(config) {
|
|
|
5843
6633
|
* Generated bundle index. Do not edit.
|
|
5844
6634
|
*/
|
|
5845
6635
|
|
|
5846
|
-
export { DEFAULT_COMPARE, DEFAULT_PREDICATE, SafehtmlPipe, ThemeService, XiriAlertComponent, XiriBarChartComponent, XiriBreadcrumbComponent, XiriButtonComponent, XiriButtonlineComponent, XiriButtonstyleComponent, XiriCardComponent, XiriCardlinkComponent, XiriDataService, XiriDataServiceConfig, XiriDateService, XiriDescriptionListComponent, XiriDialogComponent, XiriDividerComponent, XiriDoneComponent, XiriDownloadService, XiriDynComponentComponent, XiriEmptyStateComponent, XiriErrorComponent, XiriExpansionComponent, XiriFormComponent, XiriFormFieldsComponent, XiriFormService, XiriHeaderComponent, XiriImagetextComponent, XiriInfopointComponent, XiriLinksComponent, XiriListComponent, XiriLocalStorageService, XiriMultiprogressComponent, XiriNumberService, XiriPageHeaderComponent, XiriQueryComponent, XiriRawTableComponent, XiriResponseHandlerService, XiriSearchComponent, XiriSectionComponent, XiriSelectDirective, XiriSessionStorageService, XiriSidenavComponent, XiriSkeletonComponent, XiriSnackbarService, XiriStatComponent, XiriStatGridComponent, XiriStepperComponent, XiriTableComponent, XiriTabsComponent, XiriTimelineComponent, XiriToolbarComponent, defaultXiriDataServiceConfig, provideXiriServices };
|
|
6636
|
+
export { COLOR_CSS_VAR, DEFAULT_COMPARE, DEFAULT_PREDICATE, SafehtmlPipe, ThemeService, XiriAlertComponent, XiriBarChartComponent, XiriBreadcrumbComponent, XiriButtonComponent, XiriButtonlineComponent, XiriButtonstyleComponent, XiriCalendarComponent, XiriCardComponent, XiriCardlinkComponent, XiriDataService, XiriDataServiceConfig, XiriDateService, XiriDescriptionListComponent, XiriDialogComponent, XiriDividerComponent, XiriDoneComponent, XiriDownloadService, XiriDynComponentComponent, XiriEchartsHostComponent, XiriEmptyStateComponent, XiriErrorComponent, XiriExpansionComponent, XiriFormComponent, XiriFormFieldsComponent, XiriFormService, XiriGanttComponent, XiriGaugeChartComponent, XiriHeaderComponent, XiriHeatmapComponent, XiriImagetextComponent, XiriInfopointComponent, XiriLineChartComponent, XiriLinksComponent, XiriListComponent, XiriLocalStorageService, XiriMultiprogressComponent, XiriNumberService, XiriPageHeaderComponent, XiriPieChartComponent, XiriQueryComponent, XiriRawTableComponent, XiriResponseHandlerService, XiriSankeyComponent, XiriSearchComponent, XiriSectionComponent, XiriSelectDirective, XiriSessionStorageService, XiriSidenavComponent, XiriSkeletonComponent, XiriSnackbarService, XiriStatComponent, XiriStatGridComponent, XiriStepperComponent, XiriTableComponent, XiriTabsComponent, XiriTimelineComponent, XiriToolbarComponent, XiriTreeComponent, defaultXiriDataServiceConfig, escapeHtml, provideXiriServices, resolveColor };
|
|
5847
6637
|
//# sourceMappingURL=xiriframework-xiri-ng.mjs.map
|