@foxeltech/angular-ui 0.3.0 → 0.4.0

package/fesm2022/foxeltech-angular-ui-chart.mjs

@@ -0,0 +1,392 @@
+import * as i0 from '@angular/core';
+import { input, output, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FxUtils, InputComponent } from '@foxeltech/angular-ui';
+import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
+
+class ChartComponent {
+    ref;
+    cdr;
+    /* ================= INPUTS ================= */
+    type = input('auto', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : /* istanbul ignore next */ []));
+    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
+    palette = input(...(ngDevMode ? [undefined, { debugName: "palette" }] : /* istanbul ignore next */ []));
+    height = input('400px', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    // pie controls
+    pieLegendAlign = input('10%', ...(ngDevMode ? [{ debugName: "pieLegendAlign" }] : /* istanbul ignore next */ []));
+    pieLegendPosition = input('middle', ...(ngDevMode ? [{ debugName: "pieLegendPosition" }] : /* istanbul ignore next */ []));
+    showPieLabel = input(true, ...(ngDevMode ? [{ debugName: "showPieLabel" }] : /* istanbul ignore next */ []));
+    mobileWidth = input(350, ...(ngDevMode ? [{ debugName: "mobileWidth" }] : /* istanbul ignore next */ []));
+    labelFontFamily = input('Roboto', ...(ngDevMode ? [{ debugName: "labelFontFamily" }] : /* istanbul ignore next */ []));
+    emptyText = input('No data available', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    /* ================= OUTPUTS ================= */
+    chartClick = output();
+    chartInit = output();
+    /* ================= INTERNAL ================= */
+    chartOptions = {};
+    isEmpty = false;
+    labelFontSize = 12;
+    chartInstance;
+    resizeObserver;
+    intersectionObserver;
+    canInit = false;
+    isMobile = false;
+    containerWidth = 0;
+    constructor(ref, cdr) {
+        this.ref = ref;
+        this.cdr = cdr;
+    }
+    /* ================= LIFECYCLE ================= */
+    ngAfterViewInit() {
+        // Only initialize when visible (tab-safe)
+        this.intersectionObserver = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting && !this.canInit) {
+                this.canInit = true;
+                this.updateResponsiveState();
+                this.rebuildChart();
+                this.cdr.detectChanges();
+            }
+        }, { threshold: 0.1 });
+        this.intersectionObserver.observe(this.ref.nativeElement);
+        // Resize-safe (tabs, flex, async layout)
+        this.resizeObserver = new ResizeObserver(() => {
+            if (!this.canInit)
+                return;
+            this.updateResponsiveState();
+            this.forceMediaRecalc();
+        });
+        this.resizeObserver.observe(this.ref.nativeElement);
+    }
+    ngOnChanges() {
+        if (this.canInit) {
+            this.updateResponsiveState();
+            this.rebuildChart();
+        }
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.intersectionObserver?.disconnect();
+    }
+    onThemeChange() {
+        if (!this.canInit)
+            return;
+        requestAnimationFrame(() => this.rebuildChart());
+    }
+    /* ================= EVENTS ================= */
+    onChartClick(event) {
+        this.chartClick.emit(event);
+    }
+    onChartInit(chart) {
+        this.chartInstance = chart;
+        this.chartInit.emit(chart);
+        requestAnimationFrame(() => this.forceMediaRecalc());
+    }
+    /* ================= CORE FIX ================= */
+    updateResponsiveState() {
+        const { width } = this.ref.nativeElement.getBoundingClientRect();
+        if (width > 0) {
+            this.containerWidth = width;
+            this.isMobile = width < this.mobileWidth();
+        }
+    }
+    forceMediaRecalc(retry = 0) {
+        if (!this.chartInstance)
+            return;
+        const { width, height } = this.ref.nativeElement.getBoundingClientRect();
+        if ((width === 0 || height === 0) && retry < 10) {
+            requestAnimationFrame(() => this.forceMediaRecalc(retry + 1));
+            return;
+        }
+        this.rebuildChart();
+        this.chartInstance.resize();
+    }
+    rebuildChart() {
+        this.isEmpty = this.checkEmpty();
+        if (this.isEmpty) {
+            if (this.chartInstance) {
+                this.chartInstance.clear();
+            }
+            return;
+        }
+        this.chartOptions = this.buildOptions();
+        if (this.chartInstance) {
+            this.chartInstance.clear();
+            this.chartInstance.setOption(this.chartOptions, true);
+        }
+    }
+    checkEmpty() {
+        const type = this.detectType();
+        if (type === 'bar') {
+            const data = this.data();
+            const categories = data?.categories;
+            const values = data?.values;
+            return !categories?.length || !values?.length;
+        }
+        if (type === 'pie') {
+            const data = this.data();
+            if (!Array.isArray(data) || data.length === 0)
+                return true;
+            const total = data.reduce((sum, d) => sum + (d.value || 0), 0);
+            return total === 0;
+        }
+        return false;
+    }
+    /* ================= REGISTRY ================= */
+    registry = {
+        bar: (data, colors) => ({
+            color: colors,
+            tooltip: { trigger: 'axis' },
+            grid: { left: '5%', right: '5%', bottom: '10%', containLabel: true },
+            xAxis: {
+                type: 'category',
+                data: data?.categories || [],
+                axisLabel: {
+                    interval: 0,
+                    width: 80,
+                    overflow: 'truncate',
+                    ellipsis: '…',
+                    fontFamily: this.labelFontFamily(),
+                    fontSize: this.labelFontSize,
+                    color: FxUtils.convertColorFromVariable('--text-secondary'),
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: FxUtils.convertColorFromVariable('--border-strong'),
+                    },
+                },
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    fontFamily: this.labelFontFamily(),
+                    fontSize: this.labelFontSize,
+                    color: FxUtils.convertColorFromVariable('--text-secondary'),
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: FxUtils.convertColorFromVariable('--border-strong'),
+                    },
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: FxUtils.convertColorFromVariable('--border-default'),
+                    },
+                },
+            },
+            series: [
+                {
+                    type: 'bar',
+                    data: data?.values || [],
+                    barMaxWidth: 70,
+                    itemStyle: {
+                        color: (p) => colors[p.dataIndex % colors.length],
+                    },
+                    label: {
+                        show: true,
+                        position: 'top',
+                        fontFamily: this.labelFontFamily(),
+                        fontSize: this.labelFontSize,
+                        color: FxUtils.convertColorFromVariable('--text-primary'),
+                    },
+                },
+            ],
+        }),
+        pie: (data, colors) => {
+            const total = data.reduce((sum, d) => sum + d.value, 0);
+            const layout = this.calcPieLayout(data);
+            return {
+                color: colors,
+                tooltip: { trigger: 'item' },
+                legend: {
+                    type: 'scroll',
+                    orient: layout.legendOrient,
+                    icon: 'circle',
+                    itemGap: 12,
+                    right: layout.legendRight,
+                    top: layout.legendTop,
+                    left: layout.legendLeft,
+                    bottom: layout.legendBottom,
+                    width: layout.legendWidth,
+                    formatter: (name) => {
+                        const item = data.find((d) => d.name === name);
+                        return item ? `${name}: ${item.value}` : name;
+                    },
+                    textStyle: {
+                        fontFamily: this.labelFontFamily(),
+                        fontSize: 13,
+                        fontWeight: 500,
+                        color: FxUtils.convertColorFromVariable('--text-primary'),
+                        overflow: 'truncate',
+                    },
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['40%', '70%'],
+                        center: layout.pieCenter,
+                        data,
+                        label: {
+                            show: this.showPieLabel(),
+                            position: 'outside',
+                            formatter: '{d}%',
+                            fontSize: this.labelFontSize,
+                            fontFamily: this.labelFontFamily(),
+                            color: FxUtils.convertColorFromVariable('--text-primary'),
+                            textBorderWidth: 0,
+                            textBorderColor: 'transparent',
+                        },
+                        labelLine: {
+                            show: this.showPieLabel(),
+                            length: 7,
+                            length2: 7,
+                        },
+                    },
+                ],
+                graphic: {
+                    type: 'group',
+                    left: layout.graphicLeft,
+                    top: layout.graphicTop,
+                    bounding: 'raw',
+                    children: [
+                        {
+                            type: 'text',
+                            style: {
+                                text: total.toString(),
+                                fontSize: 24,
+                                fontWeight: 600,
+                                fontFamily: this.labelFontFamily(),
+                                fill: FxUtils.convertColorFromVariable('--text-primary'),
+                                align: 'center',
+                                verticalAlign: 'middle',
+                            },
+                        },
+                    ],
+                },
+            };
+        },
+        sunburst: (data, colors) => ({
+            color: colors,
+            series: [
+                {
+                    type: 'sunburst',
+                    data,
+                    radius: ['15%', '90%'],
+                    itemStyle: {
+                        borderWidth: 1,
+                        borderColor: FxUtils.convertColorFromVariable('--border-default'),
+                    },
+                    label: {
+                        rotate: 'tangential',
+                        fontSize: this.labelFontSize,
+                        fontFamily: this.labelFontFamily(),
+                        color: FxUtils.convertColorFromVariable('--text-primary'),
+                        textBorderWidth: 0,
+                        textBorderColor: 'transparent',
+                    },
+                },
+            ],
+        }),
+    };
+    /* ================= PIE LAYOUT ================= */
+    calcPieLayout(data) {
+        const cw = this.containerWidth || 400;
+        if (this.isMobile) {
+            return {
+                legendOrient: 'horizontal',
+                legendLeft: 'center',
+                legendRight: undefined,
+                legendTop: undefined,
+                legendBottom: 0,
+                legendWidth: undefined,
+                pieCenter: ['50%', '40%'],
+                graphicLeft: '50%',
+                graphicTop: '40%',
+            };
+        }
+        // Estimate legend pixel width from longest formatted label
+        const CHAR_WIDTH = 7.5; // approx px per char at fontSize 13
+        const ICON_GAP = 30; // legend icon + padding
+        const longestLabel = data.reduce((max, d) => {
+            return Math.max(max, `${d.name}: ${d.value}`.length);
+        }, 0);
+        const rawLegendPx = longestLabel * CHAR_WIDTH + ICON_GAP;
+        // Clamp: min 100px, max 45% of container
+        const legendPx = Math.max(100, Math.min(rawLegendPx, cw * 0.45));
+        const legendPct = (legendPx / cw) * 100;
+        // Pie center: middle of the remaining space after legend
+        const pieCenterX = Math.round((100 - legendPct) / 2);
+        return {
+            legendOrient: 'vertical',
+            legendLeft: undefined,
+            legendRight: '2%',
+            legendTop: 'middle',
+            legendBottom: undefined,
+            legendWidth: Math.round(legendPx),
+            pieCenter: [`${pieCenterX}%`, '50%'],
+            graphicLeft: `${pieCenterX}%`,
+            graphicTop: '50%',
+        };
+    }
+    /* ================= BUILD ================= */
+    detectType() {
+        const type = this.type();
+        if (type !== 'auto')
+            return type;
+        const data = this.data();
+        if (data?.children)
+            return 'sunburst';
+        if (data?.categories && data?.values)
+            return 'bar';
+        if (Array.isArray(data))
+            return 'pie';
+        return 'bar';
+    }
+    buildOptions() {
+        const type = this.detectType();
+        const palette = this.resolvePalette();
+        const base = this.registry[type]?.(this.data(), palette) || {};
+        return {
+            ...base,
+            ...this.options(),
+        };
+    }
+    resolvePalette() {
+        const defaults = [
+            'rgba(var(--success) / 1)',
+            'rgba(var(--information) / 1)',
+            'rgba(var(--critical) / 1)',
+            'rgba(var(--danger) / 1)',
+            'rgba(var(--warning) / 1)',
+            'rgba(var(--discovery) / 1)',
+        ];
+        const paletteValue = this.palette();
+        const palette = paletteValue?.length ? paletteValue : defaults;
+        return palette.map((raw) => {
+            if (!raw.includes('var('))
+                return raw;
+            const cssVar = raw.match(/var\((.*?)\)/)?.[1];
+            const rgb = getComputedStyle(document.body)
+                .getPropertyValue(cssVar || '')
+                .trim()
+                .replace(/\s+/g, ',');
+            return `rgba(${rgb},1)`;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ChartComponent, isStandalone: true, selector: "fx-ui-chart", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, pieLegendAlign: { classPropertyName: "pieLegendAlign", publicName: "pieLegendAlign", isSignal: true, isRequired: false, transformFunction: null }, pieLegendPosition: { classPropertyName: "pieLegendPosition", publicName: "pieLegendPosition", isSignal: true, isRequired: false, transformFunction: null }, showPieLabel: { classPropertyName: "showPieLabel", publicName: "showPieLabel", isSignal: true, isRequired: false, transformFunction: null }, mobileWidth: { classPropertyName: "mobileWidth", publicName: "mobileWidth", isSignal: true, isRequired: false, transformFunction: null }, labelFontFamily: { classPropertyName: "labelFontFamily", publicName: "labelFontFamily", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartClick: "chartClick", chartInit: "chartInit" }, host: { listeners: { "window:theme-changed": "onThemeChange()" } }, providers: [provideEchartsCore({ echarts: () => import('echarts') })], usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-wrapper\" [style.height]=\"height()\">\n  @if (isEmpty) {\n    <div class=\"chart-empty\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"chart-empty-icon\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z\" />\n      </svg>\n      <span class=\"chart-empty-text\">{{ emptyText() }}</span>\n    </div>\n  } @else {\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      [loading]=\"loading()\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height()\"\n    ></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:rgba(var(--text-secondary)/1)}.chart-empty-icon{width:48px;height:48px;opacity:.4}.chart-empty-text{font-size:14px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxEchartsDirective, InputComponent], providers: [provideEchartsCore({ echarts: () => import('echarts') })], template: "<div class=\"chart-wrapper\" [style.height]=\"height()\">\n  @if (isEmpty) {\n    <div class=\"chart-empty\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"chart-empty-icon\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z\" />\n      </svg>\n      <span class=\"chart-empty-text\">{{ emptyText() }}</span>\n    </div>\n  } @else {\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      [loading]=\"loading()\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height()\"\n    ></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:rgba(var(--text-secondary)/1)}.chart-empty-icon{width:48px;height:48px;opacity:.4}.chart-empty-text{font-size:14px;font-weight:500}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], pieLegendAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieLegendAlign", required: false }] }], pieLegendPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieLegendPosition", required: false }] }], showPieLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPieLabel", required: false }] }], mobileWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileWidth", required: false }] }], labelFontFamily: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFontFamily", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }], chartInit: [{ type: i0.Output, args: ["chartInit"] }], onThemeChange: [{
+                type: HostListener,
+                args: ['window:theme-changed']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChartComponent };
+//# sourceMappingURL=foxeltech-angular-ui-chart.mjs.map

package/fesm2022/foxeltech-angular-ui-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"foxeltech-angular-ui-chart.mjs","sources":["../../../projects/ui/chart/src/chart/chart.component.ts","../../../projects/ui/chart/src/chart/chart.component.html","../../../projects/ui/chart/src/foxeltech-angular-ui-chart.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  HostListener,\n  OnChanges,\n  OnDestroy,\n  ChangeDetectionStrategy,\n  input,\n  output\n} from '@angular/core';\nimport { ECharts, EChartsOption } from 'echarts';\nimport { FxUtils, InputComponent } from '@foxeltech/angular-ui';\nimport { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';\n\n\n// 'line' and 'radar' were advertised here but have no builder in the\n// registry — they silently rendered an empty chart. Re-add when implemented.\nexport type IChartType = 'bar' | 'pie' | 'sunburst' | 'auto';\n\n@Component({\n    selector: 'fx-ui-chart',\n    templateUrl: './chart.component.html',\n    styleUrl: './chart.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [NgxEchartsDirective, InputComponent],\n    // Self-contained: echarts is provided (and lazy-loaded) right here, so\n    // consumers just import ChartComponent — no forRoot wiring in the app.\n    providers: [provideEchartsCore({ echarts: () => import('echarts') })],\n})\nexport class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {\n  /* ================= INPUTS ================= */\n\n  readonly type = input<IChartType>('auto');\n  readonly data = input<any>();\n  readonly options = input<EChartsOption>();\n  readonly palette = input<string[]>();\n  readonly height = input('400px');\n  readonly loading = input(false);\n\n  // pie controls\n  readonly pieLegendAlign = input<string | number>('10%');\n  readonly pieLegendPosition = input<string | number>('middle');\n  readonly showPieLabel = input(true);\n  readonly mobileWidth = input(350);\n  readonly labelFontFamily = input('Roboto');\n  readonly emptyText = input('No data available');\n\n  /* ================= OUTPUTS ================= */\n\n  readonly chartClick = output<any>();\n  readonly chartInit = output<ECharts>();\n\n  /* ================= INTERNAL ================= */\n\n  chartOptions: EChartsOption = {};\n  isEmpty = false;\n  labelFontSize = 12;\n\n  private chartInstance?: ECharts;\n  private resizeObserver?: ResizeObserver;\n  private intersectionObserver?: IntersectionObserver;\n\n  private canInit = false;\n  private isMobile = false;\n  private containerWidth = 0;\n\n  constructor(\n    private ref: ElementRef<HTMLElement>,\n    private cdr: ChangeDetectorRef,\n  ) {}\n\n  /* ================= LIFECYCLE ================= */\n\n  ngAfterViewInit(): void {\n    // Only initialize when visible (tab-safe)\n    this.intersectionObserver = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting && !this.canInit) {\n          this.canInit = true;\n          this.updateResponsiveState();\n          this.rebuildChart();\n          this.cdr.detectChanges();\n        }\n      },\n      { threshold: 0.1 },\n    );\n\n    this.intersectionObserver.observe(this.ref.nativeElement);\n\n    // Resize-safe (tabs, flex, async layout)\n    this.resizeObserver = new ResizeObserver(() => {\n      if (!this.canInit) return;\n      this.updateResponsiveState();\n      this.forceMediaRecalc();\n    });\n\n    this.resizeObserver.observe(this.ref.nativeElement);\n  }\n\n  ngOnChanges(): void {\n    if (this.canInit) {\n      this.updateResponsiveState();\n      this.rebuildChart();\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.resizeObserver?.disconnect();\n    this.intersectionObserver?.disconnect();\n  }\n\n  @HostListener('window:theme-changed')\n  onThemeChange(): void {\n    if (!this.canInit) return;\n    requestAnimationFrame(() => this.rebuildChart());\n  }\n\n  /* ================= EVENTS ================= */\n\n  onChartClick(event: any) {\n    this.chartClick.emit(event);\n  }\n\n  onChartInit(chart: any) {\n    this.chartInstance = chart;\n    this.chartInit.emit(chart);\n\n    requestAnimationFrame(() => this.forceMediaRecalc());\n  }\n\n  /* ================= CORE FIX ================= */\n\n  private updateResponsiveState() {\n    const { width } = this.ref.nativeElement.getBoundingClientRect();\n    if (width > 0) {\n      this.containerWidth = width;\n      this.isMobile = width < this.mobileWidth();\n    }\n  }\n\n  private forceMediaRecalc(retry = 0) {\n    if (!this.chartInstance) return;\n\n    const { width, height } = this.ref.nativeElement.getBoundingClientRect();\n\n    if ((width === 0 || height === 0) && retry < 10) {\n      requestAnimationFrame(() => this.forceMediaRecalc(retry + 1));\n      return;\n    }\n\n    this.rebuildChart();\n    this.chartInstance.resize();\n  }\n\n  private rebuildChart(): void {\n    this.isEmpty = this.checkEmpty();\n\n    if (this.isEmpty) {\n      if (this.chartInstance) {\n        this.chartInstance.clear();\n      }\n      return;\n    }\n\n    this.chartOptions = this.buildOptions();\n\n    if (this.chartInstance) {\n      this.chartInstance.clear();\n      this.chartInstance.setOption(this.chartOptions, true);\n    }\n  }\n\n  private checkEmpty(): boolean {\n    const type = this.detectType();\n\n    if (type === 'bar') {\n      const data = this.data();\n      const categories = data?.categories;\n      const values = data?.values;\n      return !categories?.length || !values?.length;\n    }\n\n    if (type === 'pie') {\n      const data = this.data();\n      if (!Array.isArray(data) || data.length === 0) return true;\n      const total = data.reduce((sum: number, d: any) => sum + (d.value || 0), 0);\n      return total === 0;\n    }\n\n    return false;\n  }\n\n  /* ================= REGISTRY ================= */\n\n  private registry: Record<string, (data: any, palette: string[]) => EChartsOption> = {\n    bar: (data, colors) => ({\n      color: colors,\n      tooltip: { trigger: 'axis' },\n      grid: { left: '5%', right: '5%', bottom: '10%', containLabel: true },\n      xAxis: {\n        type: 'category',\n        data: data?.categories || [],\n        axisLabel: {\n          interval: 0,\n          width: 80,\n          overflow: 'truncate',\n          ellipsis: '…',\n          fontFamily: this.labelFontFamily(),\n          fontSize: this.labelFontSize,\n          color: FxUtils.convertColorFromVariable('--text-secondary'),\n        },\n        axisLine: {\n          lineStyle: {\n            color: FxUtils.convertColorFromVariable('--border-strong'),\n          },\n        },\n      },\n      yAxis: {\n        type: 'value',\n        axisLabel: {\n          fontFamily: this.labelFontFamily(),\n          fontSize: this.labelFontSize,\n          color: FxUtils.convertColorFromVariable('--text-secondary'),\n        },\n        axisLine: {\n          lineStyle: {\n            color: FxUtils.convertColorFromVariable('--border-strong'),\n          },\n        },\n        splitLine: {\n          lineStyle: {\n            color: FxUtils.convertColorFromVariable('--border-default'),\n          },\n        },\n      },\n      series: [\n        {\n          type: 'bar',\n          data: data?.values || [],\n          barMaxWidth: 70,\n          itemStyle: {\n            color: (p: any) => colors[p.dataIndex % colors.length],\n          },\n          label: {\n            show: true,\n            position: 'top',\n            fontFamily: this.labelFontFamily(),\n            fontSize: this.labelFontSize,\n            color: FxUtils.convertColorFromVariable('--text-primary'),\n          },\n        },\n      ],\n    }),\n\n    pie: (data, colors) => {\n      const total = data.reduce((sum: number, d: any) => sum + d.value, 0);\n      const layout = this.calcPieLayout(data);\n\n      return {\n        color: colors,\n        tooltip: { trigger: 'item' },\n\n        legend: {\n          type: 'scroll' as const,\n          orient: layout.legendOrient,\n          icon: 'circle',\n          itemGap: 12,\n\n          right: layout.legendRight,\n          top: layout.legendTop,\n          left: layout.legendLeft,\n          bottom: layout.legendBottom,\n          width: layout.legendWidth,\n\n          formatter: (name: string) => {\n            const item = data.find((d: any) => d.name === name);\n            return item ? `${name}: ${item.value}` : name;\n          },\n\n          textStyle: {\n            fontFamily: this.labelFontFamily(),\n            fontSize: 13,\n            fontWeight: 500,\n            color: FxUtils.convertColorFromVariable('--text-primary'),\n            overflow: 'truncate',\n          },\n        },\n\n        series: [\n          {\n            type: 'pie',\n            radius: ['40%', '70%'],\n            center: layout.pieCenter,\n            data,\n\n            label: {\n              show: this.showPieLabel(),\n              position: 'outside',\n              formatter: '{d}%',\n              fontSize: this.labelFontSize,\n              fontFamily: this.labelFontFamily(),\n              color: FxUtils.convertColorFromVariable('--text-primary'),\n              textBorderWidth: 0,\n              textBorderColor: 'transparent',\n            },\n\n            labelLine: {\n              show: this.showPieLabel(),\n              length: 7,\n              length2: 7,\n            },\n          },\n        ],\n\n        graphic: {\n          type: 'group',\n          left: layout.graphicLeft,\n          top: layout.graphicTop,\n          bounding: 'raw',\n          children: [\n            {\n              type: 'text',\n              style: {\n                text: total.toString(),\n                fontSize: 24,\n                fontWeight: 600,\n                fontFamily: this.labelFontFamily(),\n                fill: FxUtils.convertColorFromVariable('--text-primary'),\n                align: 'center',\n                verticalAlign: 'middle',\n              },\n            },\n          ],\n        },\n      };\n    },\n    sunburst: (data, colors) => ({\n      color: colors,\n      series: [\n        {\n          type: 'sunburst',\n          data,\n          radius: ['15%', '90%'],\n          itemStyle: {\n            borderWidth: 1,\n            borderColor: FxUtils.convertColorFromVariable('--border-default'),\n          },\n          label: {\n            rotate: 'tangential',\n            fontSize: this.labelFontSize,\n            fontFamily: this.labelFontFamily(),\n            color: FxUtils.convertColorFromVariable('--text-primary'),\n            textBorderWidth: 0,\n            textBorderColor: 'transparent',\n          },\n        },\n      ],\n    }),\n  };\n\n  /* ================= PIE LAYOUT ================= */\n\n  private calcPieLayout(data: any[]) {\n    const cw = this.containerWidth || 400;\n\n    if (this.isMobile) {\n      return {\n        legendOrient: 'horizontal' as const,\n        legendLeft: 'center' as string | undefined,\n        legendRight: undefined as string | undefined,\n        legendTop: undefined as string | undefined,\n        legendBottom: 0 as number | undefined,\n        legendWidth: undefined as number | undefined,\n        pieCenter: ['50%', '40%'],\n        graphicLeft: '50%',\n        graphicTop: '40%',\n      };\n    }\n\n    // Estimate legend pixel width from longest formatted label\n    const CHAR_WIDTH = 7.5; // approx px per char at fontSize 13\n    const ICON_GAP = 30; // legend icon + padding\n    const longestLabel = data.reduce((max: number, d: any) => {\n      return Math.max(max, `${d.name}: ${d.value}`.length);\n    }, 0);\n    const rawLegendPx = longestLabel * CHAR_WIDTH + ICON_GAP;\n\n    // Clamp: min 100px, max 45% of container\n    const legendPx = Math.max(100, Math.min(rawLegendPx, cw * 0.45));\n    const legendPct = (legendPx / cw) * 100;\n\n    // Pie center: middle of the remaining space after legend\n    const pieCenterX = Math.round((100 - legendPct) / 2);\n\n    return {\n      legendOrient: 'vertical' as const,\n      legendLeft: undefined,\n      legendRight: '2%',\n      legendTop: 'middle' as string | undefined,\n      legendBottom: undefined,\n      legendWidth: Math.round(legendPx),\n      pieCenter: [`${pieCenterX}%`, '50%'],\n      graphicLeft: `${pieCenterX}%`,\n      graphicTop: '50%',\n    };\n  }\n\n  /* ================= BUILD ================= */\n\n  private detectType(): string {\n    const type = this.type();\n    if (type !== 'auto') return type;\n    const data = this.data();\n    if (data?.children) return 'sunburst';\n    if (data?.categories && data?.values) return 'bar';\n    if (Array.isArray(data)) return 'pie';\n    return 'bar';\n  }\n\n  private buildOptions(): EChartsOption {\n    const type = this.detectType();\n    const palette = this.resolvePalette();\n    const base = this.registry[type]?.(this.data(), palette) || {};\n\n    return {\n      ...base,\n      ...this.options(),\n    };\n  }\n\n  private resolvePalette(): string[] {\n    const defaults = [\n      'rgba(var(--success) / 1)',\n      'rgba(var(--information) / 1)',\n      'rgba(var(--critical) / 1)',\n      'rgba(var(--danger) / 1)',\n      'rgba(var(--warning) / 1)',\n      'rgba(var(--discovery) / 1)',\n    ];\n\n    const paletteValue = this.palette();\n    const palette = paletteValue?.length ? paletteValue : defaults;\n\n    return palette.map((raw) => {\n      if (!raw.includes('var(')) return raw;\n\n      const cssVar = raw.match(/var\\((.*?)\\)/)?.[1];\n      const rgb = getComputedStyle(document.body)\n        .getPropertyValue(cssVar || '')\n        .trim()\n        .replace(/\\s+/g, ',');\n      return `rgba(${rgb},1)`;\n    });\n  }\n}\n","<div class=\"chart-wrapper\" [style.height]=\"height()\">\n  @if (isEmpty) {\n    <div class=\"chart-empty\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"chart-empty-icon\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z\" />\n      </svg>\n      <span class=\"chart-empty-text\">{{ emptyText() }}</span>\n    </div>\n  } @else {\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      [loading]=\"loading()\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height()\"\n    ></div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/foxeltech-angular-ui-flow.mjs

@@ -0,0 +1,38 @@
+import * as i0 from '@angular/core';
+import { input, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { VflowComponent, ConnectionControllerDirective, ChangesControllerDirective } from 'ngx-vflow';
+
+class FlowConnection {
+    nodes = input([], ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    edges = [];
+    backgroundColor = input('--bg-hover-primary', ...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
+    view = input(['100%', '400px'], ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    handleConnection(connection) {
+        this.edges = [
+            ...this.edges,
+            {
+                id: `${connection.source} -> ${connection.target}`,
+                ...connection,
+            },
+        ];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FlowConnection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.20", type: FlowConnection, isStandalone: true, selector: "fx-ui-flow-connection", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: false, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<vflow\n  [background]=\"{\n  type: 'solid',\n  color: `rgba(var(${backgroundColor()})`\n}\"\n  [nodes]=\"nodes()\"\n  [edges]=\"edges\"\n  (onConnect)=\"handleConnection($event)\"\n  [view]=\"view()\"\n/>\n", styles: [""], dependencies: [{ kind: "component", type: VflowComponent, selector: "vflow", inputs: ["view", "minZoom", "maxZoom", "background", "optimization", "entitiesSelectable", "keyboardShortcuts", "connection", "snapGrid", "elevateNodesOnSelect", "elevateEdgesOnSelect", "nodes", "alignmentHelper", "edges"], outputs: ["onComponentNodeEvent"] }, { kind: "directive", type: ConnectionControllerDirective, selector: "[onConnect], [onReconnect], [connect], [reconnect]", outputs: ["onConnect", "connect", "onReconnect", "reconnect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FlowConnection, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-flow-connection', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ChangesControllerDirective,
+                        VflowComponent,
+                        ConnectionControllerDirective,
+                    ], template: "<vflow\n  [background]=\"{\n  type: 'solid',\n  color: `rgba(var(${backgroundColor()})`\n}\"\n  [nodes]=\"nodes()\"\n  [edges]=\"edges\"\n  (onConnect)=\"handleConnection($event)\"\n  [view]=\"view()\"\n/>\n" }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], edges: [{
+                type: Input
+            }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FlowConnection };
+//# sourceMappingURL=foxeltech-angular-ui-flow.mjs.map

package/fesm2022/foxeltech-angular-ui-flow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"foxeltech-angular-ui-flow.mjs","sources":["../../../projects/ui/flow/src/flow-connection/flow-connection.component.ts","../../../projects/ui/flow/src/flow-connection/flow-connection.component.html","../../../projects/ui/flow/src/foxeltech-angular-ui-flow.ts"],"sourcesContent":["import { Component, Input, ChangeDetectionStrategy, input } from '@angular/core';\nimport { Node, Edge, Vflow, Connection, ChangesControllerDirective, VflowComponent, ConnectionControllerDirective } from 'ngx-vflow';\n\n@Component({\n    selector: 'fx-ui-flow-connection',\n    templateUrl: './flow-connection.component.html',\n    styleUrl: './flow-connection.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        ChangesControllerDirective,\n        VflowComponent,\n        ConnectionControllerDirective,\n    ],\n})\nexport class FlowConnection {\n  readonly nodes = input<Node[]>([]);\n  @Input() edges: Edge[] = [];\n  readonly backgroundColor = input<any>('--bg-hover-primary');\n  readonly view = input<any>(['100%', '400px']);\n\n  handleConnection(connection: Connection) {\n    this.edges = [\n      ...this.edges,\n      {\n        id: `${connection.source} -> ${connection.target}`,\n        ...connection,\n      },\n    ];\n  }\n}\n","<vflow\n  [background]=\"{\n  type: 'solid',\n  color: `rgba(var(${backgroundColor()})`\n}\"\n  [nodes]=\"nodes()\"\n  [edges]=\"edges\"\n  (onConnect)=\"handleConnection($event)\"\n  [view]=\"view()\"\n/>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAca,cAAc,CAAA;AAChB,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;IACzB,KAAK,GAAW,EAAE;AAClB,IAAA,eAAe,GAAG,KAAK,CAAM,oBAAoB,sFAAC;IAClD,IAAI,GAAG,KAAK,CAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;AAE7C,IAAA,gBAAgB,CAAC,UAAsB,EAAA;QACrC,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;AACb,YAAA;gBACE,EAAE,EAAE,GAAG,UAAU,CAAC,MAAM,CAAA,IAAA,EAAO,UAAU,CAAC,MAAM,CAAA,CAAE;AAClD,gBAAA,GAAG,UAAU;AACd,aAAA;SACF;IACH;wGAdW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECd3B,iNAUA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDAQ,cAAc,qTACd,6BAA6B,EAAA,QAAA,EAAA,oDAAA,EAAA,OAAA,EAAA,CAAA,WAAA,EAAA,SAAA,EAAA,aAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAGxB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAX1B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,uBAAuB,EAAA,eAAA,EAGhB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;wBACL,0BAA0B;wBAC1B,cAAc;wBACd,6BAA6B;AAChC,qBAAA,EAAA,QAAA,EAAA,iNAAA,EAAA;;sBAIF;;;AEhBH;;AAEG;;;;"}