@xiriframework/xiri-ng 0.2.22 → 0.2.24
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, Pipe, ElementRef, ChangeDetectorRef, Input, ChangeDetectionStrategy, Component, Injectable, output, signal, afterRenderEffect, booleanAttribute, numberAttribute, ViewChild, input, viewChild, DestroyRef, effect, Directive, forwardRef, computed, untracked, Injector, afterNextRender, ViewEncapsulation, PLATFORM_ID, makeEnvironmentProviders } from '@angular/core';
|
|
3
|
+
import { inject, Pipe, ElementRef, ChangeDetectorRef, Input, ChangeDetectionStrategy, Component, Injectable, output, signal, afterRenderEffect, booleanAttribute, numberAttribute, ViewChild, input, viewChild, DestroyRef, effect, Directive, forwardRef, computed, untracked, Injector, afterNextRender, ViewEncapsulation, NgZone, PLATFORM_ID, makeEnvironmentProviders } from '@angular/core';
|
|
4
4
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { NgControl, FormGroup, FormControl, FormsModule, ReactiveFormsModule, NgForm, FormGroupDirective, Validators, FormBuilder, UntypedFormControl, NG_VALUE_ACCESSOR, UntypedFormBuilder } from '@angular/forms';
|
|
@@ -5059,9 +5059,9 @@ class XiriDynComponentComponent {
|
|
|
5059
5059
|
}, ...(ngDevMode ? [{ debugName: "dataInt" }] : /* istanbul ignore next */ []));
|
|
5060
5060
|
}
|
|
5061
5061
|
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@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)]] }); }
|
|
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)]] }); }
|
|
5063
5063
|
}
|
|
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)], resolveMetadata: (XiriMultiprogressComponent, XiriImagetextComponent, XiriTimelineComponent, XiriPageHeaderComponent, XiriDividerComponent, XiriStatGridComponent, XiriToolbarComponent, XiriDescriptionListComponent) => ({ decorators: [{
|
|
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: [{
|
|
5065
5065
|
type: Component,
|
|
5066
5066
|
args: [{ selector: 'xiri-dyncomponent', changeDetection: ChangeDetectionStrategy.OnPush, imports: [XiriCardComponent,
|
|
5067
5067
|
XiriButtonlineComponent,
|
|
@@ -5092,7 +5092,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.2", ng
|
|
|
5092
5092
|
XiriDividerComponent,
|
|
5093
5093
|
XiriStatGridComponent,
|
|
5094
5094
|
XiriToolbarComponent,
|
|
5095
|
-
XiriDescriptionListComponent
|
|
5095
|
+
XiriDescriptionListComponent,
|
|
5096
|
+
XiriBarChartComponent], 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"] }]
|
|
5096
5097
|
}], 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 }] }] } }) });
|
|
5097
5098
|
|
|
5098
5099
|
class XiriAlertComponent {
|
|
@@ -5298,6 +5299,266 @@ var timeline_component = /*#__PURE__*/Object.freeze({
|
|
|
5298
5299
|
XiriTimelineComponent: XiriTimelineComponent
|
|
5299
5300
|
});
|
|
5300
5301
|
|
|
5302
|
+
const COLOR_CSS_VAR = {
|
|
5303
|
+
primary: 'var(--mat-sys-primary)',
|
|
5304
|
+
secondary: 'var(--mat-sys-secondary)',
|
|
5305
|
+
tertiary: 'var(--mat-sys-tertiary)',
|
|
5306
|
+
accent: 'var(--mat-sys-tertiary)',
|
|
5307
|
+
warn: '#f5a623',
|
|
5308
|
+
error: 'var(--mat-sys-error)',
|
|
5309
|
+
success: '#2e7d32',
|
|
5310
|
+
emerald: '#10b981',
|
|
5311
|
+
red: '#e53935',
|
|
5312
|
+
yellow: '#fbc02d',
|
|
5313
|
+
green: '#43a047',
|
|
5314
|
+
blue: '#1e88e5',
|
|
5315
|
+
purple: '#8b5cf6',
|
|
5316
|
+
orange: '#fb8c00',
|
|
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 {
|
|
5330
|
+
constructor() {
|
|
5331
|
+
this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
5332
|
+
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
5333
|
+
this.chartHost = viewChild.required('chartHost');
|
|
5334
|
+
this.zone = inject(NgZone);
|
|
5335
|
+
this.destroyRef = inject(DestroyRef);
|
|
5336
|
+
this.chart = null;
|
|
5337
|
+
this.echarts = null;
|
|
5338
|
+
this.resizeObserver = null;
|
|
5339
|
+
this.loadError = signal(null, ...(ngDevMode ? [{ debugName: "loadError" }] : /* istanbul ignore next */ []));
|
|
5340
|
+
this.error = this.loadError.asReadonly();
|
|
5341
|
+
effect(() => {
|
|
5342
|
+
// re-render when inputs change
|
|
5343
|
+
this.mode();
|
|
5344
|
+
this.settings();
|
|
5345
|
+
if (this.chart) {
|
|
5346
|
+
this.render();
|
|
5347
|
+
}
|
|
5348
|
+
});
|
|
5349
|
+
}
|
|
5350
|
+
async ngAfterViewInit() {
|
|
5351
|
+
try {
|
|
5352
|
+
this.echarts = await import('echarts');
|
|
5353
|
+
}
|
|
5354
|
+
catch (err) {
|
|
5355
|
+
this.loadError.set('echarts is not installed. Add `npm install echarts` to your app.');
|
|
5356
|
+
return;
|
|
5357
|
+
}
|
|
5358
|
+
this.zone.runOutsideAngular(() => {
|
|
5359
|
+
this.chart = this.echarts.init(this.chartHost().nativeElement);
|
|
5360
|
+
this.render();
|
|
5361
|
+
this.resizeObserver = new ResizeObserver(() => this.chart?.resize());
|
|
5362
|
+
this.resizeObserver.observe(this.chartHost().nativeElement);
|
|
5363
|
+
});
|
|
5364
|
+
this.destroyRef.onDestroy(() => this.dispose());
|
|
5365
|
+
}
|
|
5366
|
+
ngOnDestroy() {
|
|
5367
|
+
this.dispose();
|
|
5368
|
+
}
|
|
5369
|
+
dispose() {
|
|
5370
|
+
this.resizeObserver?.disconnect();
|
|
5371
|
+
this.resizeObserver = null;
|
|
5372
|
+
this.chart?.dispose();
|
|
5373
|
+
this.chart = null;
|
|
5374
|
+
}
|
|
5375
|
+
render() {
|
|
5376
|
+
if (!this.chart)
|
|
5377
|
+
return;
|
|
5378
|
+
const m = this.mode();
|
|
5379
|
+
let option;
|
|
5380
|
+
switch (m) {
|
|
5381
|
+
case 'stacked':
|
|
5382
|
+
option = this.stackedOption();
|
|
5383
|
+
break;
|
|
5384
|
+
case 'heatmap':
|
|
5385
|
+
option = this.heatmapOption();
|
|
5386
|
+
break;
|
|
5387
|
+
default:
|
|
5388
|
+
option = this.simpleOption();
|
|
5389
|
+
break;
|
|
5390
|
+
}
|
|
5391
|
+
this.chart.setOption(option, true);
|
|
5392
|
+
}
|
|
5393
|
+
baseGrid() {
|
|
5394
|
+
return { left: 32, right: 16, top: 24, bottom: 24, containLabel: true };
|
|
5395
|
+
}
|
|
5396
|
+
simpleOption() {
|
|
5397
|
+
const s = this.settings();
|
|
5398
|
+
const bars = s.bars ?? [];
|
|
5399
|
+
const color = resolveColor(s.color, '#8b5cf6');
|
|
5400
|
+
return {
|
|
5401
|
+
grid: this.baseGrid(),
|
|
5402
|
+
tooltip: {
|
|
5403
|
+
trigger: 'axis',
|
|
5404
|
+
formatter: (params) => {
|
|
5405
|
+
const arr = Array.isArray(params) ? params : [params];
|
|
5406
|
+
if (!arr.length)
|
|
5407
|
+
return '';
|
|
5408
|
+
const p = arr[0];
|
|
5409
|
+
const bar = bars[p.dataIndex];
|
|
5410
|
+
const header = bar?.name ?? bar?.label ?? p.axisValueLabel ?? '';
|
|
5411
|
+
return `<b>${escapeHtml(header)}</b><br/>${p.marker}${p.value}`;
|
|
5412
|
+
}
|
|
5413
|
+
},
|
|
5414
|
+
xAxis: {
|
|
5415
|
+
type: 'category',
|
|
5416
|
+
data: bars.map(b => b.label),
|
|
5417
|
+
axisLine: { show: false },
|
|
5418
|
+
axisTick: { show: false }
|
|
5419
|
+
},
|
|
5420
|
+
yAxis: {
|
|
5421
|
+
type: 'value',
|
|
5422
|
+
min: s.yMin,
|
|
5423
|
+
max: s.yMax,
|
|
5424
|
+
splitLine: { lineStyle: { color: '#eee' } }
|
|
5425
|
+
},
|
|
5426
|
+
series: [{
|
|
5427
|
+
type: 'bar',
|
|
5428
|
+
data: bars.map(b => b.value ?? 0),
|
|
5429
|
+
itemStyle: { color, borderRadius: [3, 3, 0, 0] },
|
|
5430
|
+
barCategoryGap: '40%'
|
|
5431
|
+
}]
|
|
5432
|
+
};
|
|
5433
|
+
}
|
|
5434
|
+
stackedOption() {
|
|
5435
|
+
const s = this.settings();
|
|
5436
|
+
const bars = s.bars ?? [];
|
|
5437
|
+
const segCount = Math.max(0, ...bars.map(b => b.segments?.length ?? 0));
|
|
5438
|
+
// derive a default series name per segment-position from the first bar that has it
|
|
5439
|
+
const seriesNames = [];
|
|
5440
|
+
for (let i = 0; i < segCount; i++) {
|
|
5441
|
+
const found = bars.find(b => b.segments?.[i]?.name)?.segments?.[i]?.name;
|
|
5442
|
+
seriesNames.push(found ?? '');
|
|
5443
|
+
}
|
|
5444
|
+
const series = [];
|
|
5445
|
+
for (let i = 0; i < segCount; i++) {
|
|
5446
|
+
series.push({
|
|
5447
|
+
type: 'bar',
|
|
5448
|
+
stack: 'total',
|
|
5449
|
+
name: seriesNames[i] || `Segment ${i + 1}`,
|
|
5450
|
+
barCategoryGap: '40%',
|
|
5451
|
+
data: bars.map(b => {
|
|
5452
|
+
const seg = b.segments?.[i];
|
|
5453
|
+
if (!seg)
|
|
5454
|
+
return { value: 0, itemStyle: { color: 'transparent' } };
|
|
5455
|
+
return {
|
|
5456
|
+
value: seg.value,
|
|
5457
|
+
name: seg.name ?? seriesNames[i] ?? '',
|
|
5458
|
+
itemStyle: { color: resolveColor(seg.color, '#9e9e9e') }
|
|
5459
|
+
};
|
|
5460
|
+
})
|
|
5461
|
+
});
|
|
5462
|
+
}
|
|
5463
|
+
return {
|
|
5464
|
+
grid: this.baseGrid(),
|
|
5465
|
+
tooltip: {
|
|
5466
|
+
trigger: 'axis',
|
|
5467
|
+
formatter: (params) => {
|
|
5468
|
+
const arr = Array.isArray(params) ? params : [params];
|
|
5469
|
+
if (!arr.length)
|
|
5470
|
+
return '';
|
|
5471
|
+
const idx = arr[0].dataIndex;
|
|
5472
|
+
const bar = bars[idx];
|
|
5473
|
+
const header = bar?.name ?? bar?.label ?? '';
|
|
5474
|
+
let body = '';
|
|
5475
|
+
for (const p of arr) {
|
|
5476
|
+
if (!p.value && p.value !== 0)
|
|
5477
|
+
continue;
|
|
5478
|
+
if (p.value === 0)
|
|
5479
|
+
continue;
|
|
5480
|
+
const seg = bar?.segments?.[p.seriesIndex];
|
|
5481
|
+
const label = seg?.name ?? p.seriesName ?? '';
|
|
5482
|
+
body += `<br/>${p.marker}${escapeHtml(label)}: <b>${p.value}</b>`;
|
|
5483
|
+
}
|
|
5484
|
+
return `<b>${escapeHtml(header)}</b>${body}`;
|
|
5485
|
+
}
|
|
5486
|
+
},
|
|
5487
|
+
xAxis: {
|
|
5488
|
+
type: 'category',
|
|
5489
|
+
data: bars.map(b => b.label),
|
|
5490
|
+
axisLine: { show: false },
|
|
5491
|
+
axisTick: { show: false }
|
|
5492
|
+
},
|
|
5493
|
+
yAxis: {
|
|
5494
|
+
type: 'value',
|
|
5495
|
+
min: s.yMin,
|
|
5496
|
+
max: s.yMax,
|
|
5497
|
+
splitLine: { lineStyle: { color: '#eee' } }
|
|
5498
|
+
},
|
|
5499
|
+
series
|
|
5500
|
+
};
|
|
5501
|
+
}
|
|
5502
|
+
heatmapOption() {
|
|
5503
|
+
const s = this.settings();
|
|
5504
|
+
const points = s.points ?? [];
|
|
5505
|
+
const color = resolveColor(s.color, '#8b5cf6');
|
|
5506
|
+
return {
|
|
5507
|
+
grid: { ...this.baseGrid(), left: 8, right: 8 },
|
|
5508
|
+
tooltip: {
|
|
5509
|
+
trigger: 'axis',
|
|
5510
|
+
formatter: (params) => {
|
|
5511
|
+
const arr = Array.isArray(params) ? params : [params];
|
|
5512
|
+
if (!arr.length)
|
|
5513
|
+
return '';
|
|
5514
|
+
const p = arr[0];
|
|
5515
|
+
const point = points[p.dataIndex];
|
|
5516
|
+
const date = new Date(p.value[0]).toLocaleString();
|
|
5517
|
+
const head = point?.name ? `<b>${escapeHtml(point.name)}</b><br/>` : '';
|
|
5518
|
+
return `${head}${escapeHtml(date)}<br/>${p.marker}<b>${p.value[1]}</b>`;
|
|
5519
|
+
}
|
|
5520
|
+
},
|
|
5521
|
+
xAxis: {
|
|
5522
|
+
type: 'time',
|
|
5523
|
+
axisLine: { show: false },
|
|
5524
|
+
axisTick: { show: false },
|
|
5525
|
+
splitLine: { show: false }
|
|
5526
|
+
},
|
|
5527
|
+
yAxis: {
|
|
5528
|
+
type: 'value',
|
|
5529
|
+
min: s.yMin ?? 0,
|
|
5530
|
+
max: s.yMax,
|
|
5531
|
+
show: false
|
|
5532
|
+
},
|
|
5533
|
+
series: [{
|
|
5534
|
+
type: 'bar',
|
|
5535
|
+
barMinWidth: 1,
|
|
5536
|
+
barMaxWidth: 3,
|
|
5537
|
+
data: points.map(p => [p.time, p.value]),
|
|
5538
|
+
itemStyle: { color }
|
|
5539
|
+
}]
|
|
5540
|
+
};
|
|
5541
|
+
}
|
|
5542
|
+
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.0.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 } }, viewQueries: [{ propertyName: "chartHost", first: true, predicate: ["chartHost"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-card class=\"xiri-barchart mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-content>\n\t\t@if (settings().title) {\n\t\t\t<div class=\"xiri-barchart-title\">{{ settings().title }}</div>\n\t\t}\n\t\t<div #chartHost class=\"xiri-barchart-host\"></div>\n\t\t@if (error()) {\n\t\t\t<div class=\"xiri-barchart-error\">{{ error() }}</div>\n\t\t}\n\t</mat-card-content>\n</mat-card>\n", styles: [".xiri-barchart{height:100%}.xiri-barchart .xiri-barchart-title{font-size:14px;font-weight:500;color:var(--mat-sys-on-surface-variant, #555);margin-bottom:8px}.xiri-barchart .xiri-barchart-host{width:100%;min-height:160px;height:200px}.xiri-barchart .xiri-barchart-error{font-size:12px;color:var(--mat-sys-error, #b00020);padding:8px 0}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5544
|
+
}
|
|
5545
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriBarChartComponent, decorators: [{
|
|
5546
|
+
type: Component,
|
|
5547
|
+
args: [{ selector: 'xiri-barchart', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [MatCard, MatCardContent], template: "<mat-card class=\"xiri-barchart mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-content>\n\t\t@if (settings().title) {\n\t\t\t<div class=\"xiri-barchart-title\">{{ settings().title }}</div>\n\t\t}\n\t\t<div #chartHost class=\"xiri-barchart-host\"></div>\n\t\t@if (error()) {\n\t\t\t<div class=\"xiri-barchart-error\">{{ error() }}</div>\n\t\t}\n\t</mat-card-content>\n</mat-card>\n", styles: [".xiri-barchart{height:100%}.xiri-barchart .xiri-barchart-title{font-size:14px;font-weight:500;color:var(--mat-sys-on-surface-variant, #555);margin-bottom:8px}.xiri-barchart .xiri-barchart-host{width:100%;min-height:160px;height:200px}.xiri-barchart .xiri-barchart-error{font-size:12px;color:var(--mat-sys-error, #b00020);padding:8px 0}\n"] }]
|
|
5548
|
+
}], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], chartHost: [{ type: i0.ViewChild, args: ['chartHost', { isSignal: true }] }] } });
|
|
5549
|
+
function escapeHtml(s) {
|
|
5550
|
+
return String(s ?? '')
|
|
5551
|
+
.replace(/&/g, '&')
|
|
5552
|
+
.replace(/</g, '<')
|
|
5553
|
+
.replace(/>/g, '>')
|
|
5554
|
+
.replace(/"/g, '"');
|
|
5555
|
+
}
|
|
5556
|
+
|
|
5557
|
+
var barchart_component = /*#__PURE__*/Object.freeze({
|
|
5558
|
+
__proto__: null,
|
|
5559
|
+
XiriBarChartComponent: XiriBarChartComponent
|
|
5560
|
+
});
|
|
5561
|
+
|
|
5301
5562
|
class XiriPageHeaderComponent {
|
|
5302
5563
|
constructor() {
|
|
5303
5564
|
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
|
|
@@ -5582,5 +5843,5 @@ function provideXiriServices(config) {
|
|
|
5582
5843
|
* Generated bundle index. Do not edit.
|
|
5583
5844
|
*/
|
|
5584
5845
|
|
|
5585
|
-
export { DEFAULT_COMPARE, DEFAULT_PREDICATE, SafehtmlPipe, ThemeService, XiriAlertComponent, 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 };
|
|
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 };
|
|
5586
5847
|
//# sourceMappingURL=xiriframework-xiri-ng.mjs.map
|