@xiriframework/xiri-ng 0.2.40 → 0.2.41

package/fesm2022/xiriframework-xiri-ng.mjs

@@ -6038,6 +6038,8 @@ class XiriEchartsHostComponent {
         this.headerIcon = input(undefined, ...(ngDevMode ? [{ debugName: "headerIcon" }] : /* istanbul ignore next */ []));
         this.headerIconColor = input(undefined, ...(ngDevMode ? [{ debugName: "headerIconColor" }] : /* istanbul ignore next */ []));
         this.chartHeight = input('200px', ...(ngDevMode ? [{ debugName: "chartHeight" }] : /* istanbul ignore next */ []));
+        // Emitted when a data item (bar, slice, point, …) is clicked.
+        this.itemClick = output();
         this.chartHostRef = viewChild.required('chartHost');
         this.zone = inject(NgZone);
         this.destroyRef = inject(DestroyRef);
@@ -6065,6 +6067,18 @@ class XiriEchartsHostComponent {
         }
         this.zone.runOutsideAngular(() => {
             this.chart = this.echarts.init(this.chartHostRef().nativeElement);
+            this.chart.on('click', (p) => {
+                if (p.componentType !== 'series')
+                    return;
+                this.zone.run(() => this.itemClick.emit({
+                    componentType: p.componentType,
+                    seriesType: p.seriesType,
+                    seriesIndex: p.seriesIndex,
+                    dataIndex: p.dataIndex,
+                    name: p.name,
+                    value: p.value,
+                }));
+            });
             this.render();
             this.resizeObserver = new ResizeObserver(() => this.chart?.resize());
             this.resizeObserver.observe(this.chartHostRef().nativeElement);
@@ -6089,12 +6103,12 @@ class XiriEchartsHostComponent {
         this.chart.setOption(opt, true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: XiriEchartsHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 } }, outputs: { itemClick: "itemClick" }, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: XiriEchartsHostComponent, decorators: [{
             type: Component,
             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"] }]
-        }], 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 }] }] } });
+        }], 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 }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], chartHostRef: [{ type: i0.ViewChild, args: ['chartHost', { isSignal: true }] }] } });
 
 /**
  * Maps semantic XiriColor names to concrete CSS color values.
@@ -6147,6 +6161,7 @@ class XiriBarChartComponent {
     constructor() {
         this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.router = inject(Router);
         this.compact = computed(() => !!this.settings().compact, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
         this.option = computed(() => {
             const m = this.mode();
@@ -6157,6 +6172,17 @@ class XiriBarChartComponent {
             }
         }, ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
     }
+    onItemClick(e) {
+        const s = this.settings();
+        const coll = this.mode() === 'heatmap' ? s.points : s.bars;
+        const url = coll?.[e.dataIndex]?.url;
+        if (!url)
+            return;
+        if (/^https?:\/\//.test(url))
+            window.open(url, '_blank');
+        else
+            this.router.navigateByUrl(url);
+    }
     baseGrid() {
         // Compact mode: outer card already provides padding — shrink the
         // echarts grid so we don't get a "double margin".
@@ -6197,7 +6223,10 @@ class XiriBarChartComponent {
             },
             series: [{
                     type: 'bar',
-                    data: bars.map(b => b.value ?? 0),
+                    data: bars.map(b => ({
+                        value: b.value ?? 0,
+                        itemStyle: { cursor: b.url ? 'pointer' : 'default' }
+                    })),
                     itemStyle: { color, borderRadius: [3, 3, 0, 0] },
                     barCategoryGap: '40%'
                 }]
@@ -6227,7 +6256,7 @@ class XiriBarChartComponent {
                     return {
                         value: seg.value,
                         name: seg.name ?? seriesNames[i] ?? '',
-                        itemStyle: { color: resolveColor(seg.color, '#9e9e9e') }
+                        itemStyle: { color: resolveColor(seg.color, '#9e9e9e'), cursor: b.url ? 'pointer' : 'default' }
                     };
                 })
             });
@@ -6306,7 +6335,10 @@ class XiriBarChartComponent {
                     type: 'bar',
                     barMinWidth: 1,
                     barMaxWidth: 3,
-                    data: points.map(p => [p.time, p.value]),
+                    data: points.map(p => ({
+                        value: [p.time, p.value],
+                        itemStyle: { cursor: p.url ? 'pointer' : 'default' }
+                    })),
                     itemStyle: { color }
                 }]
         };
@@ -6316,9 +6348,10 @@ class XiriBarChartComponent {
 		<xiri-echarts-host
 			[option]="option()"
 			[compact]="compact()"
-			[title]="settings().title">
+			[title]="settings().title"
+			(itemClick)="onItemClick($event)">
 		</xiri-echarts-host>
-	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: XiriBarChartComponent, decorators: [{
             type: Component,
@@ -6328,7 +6361,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 		<xiri-echarts-host
 			[option]="option()"
 			[compact]="compact()"
-			[title]="settings().title">
+			[title]="settings().title"
+			(itemClick)="onItemClick($event)">
 		</xiri-echarts-host>
 	`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -6410,7 +6444,7 @@ class XiriLineChartComponent {
 			[compact]="compact()"
 			[title]="settings().title">
 		</xiri-echarts-host>
-	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: XiriLineChartComponent, decorators: [{
             type: Component,
@@ -6485,7 +6519,7 @@ class XiriPieChartComponent {
 			[compact]="compact()"
 			[title]="settings().title">
 		</xiri-echarts-host>
-	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: XiriPieChartComponent, decorators: [{
             type: Component,
@@ -6560,7 +6594,7 @@ class XiriGaugeChartComponent {
 			[compact]="compact()"
 			[title]="settings().title">
 		</xiri-echarts-host>
-	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: XiriGaugeChartComponent, decorators: [{
             type: Component,
@@ -6652,7 +6686,7 @@ class XiriHeatmapComponent {
 			[title]="settings().title"
 			[chartHeight]="height()">
 		</xiri-echarts-host>
-	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: XiriHeatmapComponent, decorators: [{
             type: Component,
@@ -6739,7 +6773,7 @@ class XiriCalendarComponent {
 			[title]="settings().title"
 			[chartHeight]="height()">
 		</xiri-echarts-host>
-	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: XiriCalendarComponent, decorators: [{
             type: Component,
@@ -6829,7 +6863,7 @@ class XiriTreeComponent {
 			[title]="settings().title"
 			[chartHeight]="height()">
 		</xiri-echarts-host>
-	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: XiriTreeComponent, decorators: [{
             type: Component,
@@ -6901,7 +6935,7 @@ class XiriSankeyComponent {
 			[title]="settings().title"
 			[chartHeight]="height()">
 		</xiri-echarts-host>
-	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: XiriSankeyComponent, decorators: [{
             type: Component,
@@ -7007,7 +7041,7 @@ class XiriGanttComponent {
 			[title]="settings().title"
 			[chartHeight]="height()">
 		</xiri-echarts-host>
-	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: XiriGanttComponent, decorators: [{
             type: Component,