import * as i0 from '@angular/core';
import { inject, Renderer2, ViewContainerRef, Injector, DOCUMENT, PLATFORM_ID, DestroyRef, ElementRef, input, numberAttribute, booleanAttribute, effect, ChangeDetectionStrategy, Component } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { curveStep, curveBumpX, curveCatmullRom, curveLinear, select, scalePoint, min, max, scaleLinear, area, line, pointer, scaleBand, arc, pie, scaleOrdinal, schemeTableau10, interpolate } from 'd3';
import { fromEvent } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { TemplatePortal } from '@angular/cdk/portal';
import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
import { PositionManager } from '@ngstarter-ui/components/overlay';

class BaseChartTooltip {
    _tooltipOrigin;
    _tooltipPortal;
    _overlayRef;
    _renderer = inject(Renderer2);
    _overlay = inject(Overlay);
    _viewContainerRef = inject(ViewContainerRef);
    _injector = inject(Injector);
    _document = inject(DOCUMENT);
    _createTooltipOrigin() {
        let tooltipOrigin = this._document.querySelector('.ngs-mchart-tooltip-origin');
        if (!tooltipOrigin) {
            tooltipOrigin = this._renderer.createElement('div');
            tooltipOrigin.classList.add('ngs-mchart-tooltip-origin');
            this._renderer.appendChild(this._document.body, tooltipOrigin);
        }
        this._tooltipOrigin = tooltipOrigin;
        this._renderer.setStyle(this._tooltipOrigin, 'width', '0');
        this._renderer.setStyle(this._tooltipOrigin, 'height', '0');
        this._renderer.setStyle(this._tooltipOrigin, 'z-index', '-1');
        this._renderer.setStyle(this._tooltipOrigin, 'position', 'fixed');
        this._renderer.setStyle(this._tooltipOrigin, 'opacity', '0');
    }
    _showTooltip(data) {
        this._overlayRef?.detach();
        this._overlayRef = this._overlay.create(this._getOverlayConfig());
        this._overlayRef.attach(this._getContentPortal(data));
    }
    _hideTooltip() {
        this._overlayRef?.detach();
    }
    _setTooltipPositionByEvent(e) {
        const gap = 10;
        this._renderer.setStyle(this._tooltipOrigin, 'left', (e.clientX - gap) + 'px');
        this._renderer.setStyle(this._tooltipOrigin, 'top', (e.clientY) + 'px');
        this._renderer.setStyle(this._tooltipOrigin, 'width', (gap * 2) + 'px');
    }
    _setTooltipVisible() {
        this._renderer.addClass(this._tooltipOrigin, 'is-visible');
    }
    _setTooltipInVisible() {
        this._renderer.removeClass(this._tooltipOrigin, 'is-visible');
    }
    _getContentPortal(data) {
        this._tooltipPortal = new TemplatePortal(this.getTooltipTemplateRef(), this._viewContainerRef, {
            '$implicit': {
                ...data
            }
        }, this._injector);
        return this._tooltipPortal;
    }
    _getOverlayConfig() {
        return new OverlayConfig({
            panelClass: 'ngs-mchart-tooltip-overlay',
            positionStrategy: this._getOverlayPositionStrategy(),
            scrollStrategy: this._overlay.scrollStrategies.reposition()
        });
    }
    _getOverlayPositionStrategy() {
        return this._overlay
            .position()
            .flexibleConnectedTo(this._tooltipOrigin)
            .withFlexibleDimensions()
            .withGrowAfterOpen()
            .withPositions(this._getOverlayPositions());
    }
    _getOverlayPositions() {
        return (new PositionManager()).build(this.getTooltipPosition());
    }
}

let nextId$1 = 0;
class MchartLine extends BaseChartTooltip {
    _initialized = false;
    _host;
    _svg;
    _dimensions;
    _hostWidth = 0;
    _hostHeight = 0;
    _innerWidth = 0;
    _innerHeight = 0;
    _yScale;
    _xScale;
    _curveMap = {
        'linear': curveLinear,
        'catmullRom': curveCatmullRom,
        'curveBumpX': curveBumpX,
        'curveStep': curveStep
    };
    _resizeObserver;
    _tooltipDot;
    _area;
    _line;
    _platformId = inject(PLATFORM_ID);
    _destroyRef = inject(DestroyRef);
    _elementRef = inject(ElementRef);
    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
    labels = input([], ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
    strokeWidth = input(2, { ...(ngDevMode ? { debugName: "strokeWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    showArea = input(false, { ...(ngDevMode ? { debugName: "showArea" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    showMarkers = input(false, { ...(ngDevMode ? { debugName: "showMarkers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    responsive = input(false, { ...(ngDevMode ? { debugName: "responsive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    fillAreaGradient = input(false, { ...(ngDevMode ? { debugName: "fillAreaGradient" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    curve = input('linear', ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
    xAccessor = input((d, i) => i, ...(ngDevMode ? [{ debugName: "xAccessor" }] : /* istanbul ignore next */ []));
    yAccessor = input((d) => d, ...(ngDevMode ? [{ debugName: "yAccessor" }] : /* istanbul ignore next */ []));
    compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    markerDotSize = input(5, { ...(ngDevMode ? { debugName: "markerDotSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
    tooltipPosition = input('after-center', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
    _currentTooltipPosition = 'after-center';
    get gradientId() {
        return 'areaGradient' + this._gradientId;
    }
    _gradientId = nextId$1++;
    constructor() {
        super();
        effect(() => {
            this._currentTooltipPosition = this.tooltipPosition();
        });
        effect(() => {
            if (!this._initialized) {
                return;
            }
            this._render();
        });
    }
    ngAfterViewChecked() {
        if (isPlatformServer(this._platformId)) {
            return;
        }
        if (!this._initialized) {
            const element = this._elementRef.nativeElement;
            this._dimensions = element.getBoundingClientRect();
            if (this._dimensions.width !== 0 && this._dimensions.height !== 0) {
                this._initialized = true;
                this._render();
                this._setupResizeObserver();
            }
        }
    }
    ngOnDestroy() {
        this._resizeObserver?.disconnect();
    }
    getTooltipPosition() {
        return this._currentTooltipPosition;
    }
    getTooltipTemplateRef() {
        return this.tooltip();
    }
    _render() {
        this._setupContainers();
        this._setupData();
    }
    _setupContainers() {
        this._hostWidth = this._dimensions.width;
        this._hostHeight = this._dimensions.height;
        this._innerWidth = this._dimensions.width;
        this._innerHeight = this._dimensions.height;
        this._host = select(this._elementRef.nativeElement);
        this._svg = this._host
            .select('svg')
            .attr('viewBox', `0 0 ${this._hostWidth} ${this._hostHeight}`);
        if (this.tooltip()) {
            this._tooltipDot = this._renderer.createElement('div');
            this._renderer.setStyle(this._tooltipDot, 'width', '10px');
            this._renderer.setStyle(this._tooltipDot, 'height', '10px');
            this._renderer.setStyle(this._tooltipDot, 'z-index', '-1');
            this._renderer.setStyle(this._tooltipDot, 'position', 'fixed');
            this._renderer.setStyle(this._tooltipDot, 'opacity', '0');
            this._renderer.appendChild(this._document.body, this._tooltipDot);
        }
    }
    _setupData(isUpdate = false) {
        let markerDotSize = this.markerDotSize();
        if (!this.showMarkers()) {
            markerDotSize = this.strokeWidth();
        }
        const xAccessor = this.xAccessor();
        const yAccessor = this.yAccessor();
        const xDomain = this.data().map((d, i) => xAccessor(d, i));
        if (!this._xScale) {
            this._xScale = scalePoint().domain(xDomain);
        }
        this._xScale.range([markerDotSize, this._innerWidth - markerDotSize]);
        const yDomain = [
            this.compact() ? min(this.data().map(d => yAccessor(d))) : 0,
            max(this.data().map(d => yAccessor(d)))
        ];
        if (!this._yScale) {
            this._yScale = scaleLinear()
                .domain(yDomain);
        }
        this._yScale.range([this._innerHeight - markerDotSize, markerDotSize]);
        if (this.showArea()) {
            const areaGenerator = area()
                .x((d, i) => this._xScale(xAccessor(d, i)))
                .y1((d) => this._yScale(yAccessor(d)))
                .y0(this._innerHeight - markerDotSize)
                .curve(this._curveMap[this.curve()]);
            if (!this._area) {
                // add area
                this._area = this._svg
                    .append('path')
                    .datum(this.data())
                    .attr('d', areaGenerator)
                    .attr('class', 'area');
                if (this.fillAreaGradient()) {
                    this._area.attr('fill', `url(#${this.gradientId})`);
                }
            }
            else {
                this._area.attr('d', areaGenerator);
            }
        }
        const lineGenerator = line()
            .x((d, i) => this._xScale(xAccessor(d, i)))
            .y((d) => this._yScale(yAccessor(d)));
        if (!this._line) {
            // add line
            this._line = this._svg
                .append('path')
                .datum(this.data())
                .attr('d', lineGenerator.curve(this._curveMap[this.curve()]))
                .attr('class', 'line')
                .attr('stroke-width', this.strokeWidth());
        }
        else {
            this._line.attr('d', lineGenerator.curve(this._curveMap[this.curve()]));
        }
        if (isUpdate) {
            return;
        }
        if (this.showMarkers() || this.tooltip()) {
            const markerLine = this._svg
                .append('line')
                .attr('x1', 0)
                .attr('x2', 0)
                .attr('y1', 0)
                .attr('y2', this._innerHeight - markerDotSize)
                .attr('opacity', 0)
                .attr('class', 'marker-line');
            const markerDot = this._svg
                .append('circle')
                .attr('cx', 0)
                .attr('cy', 0)
                .attr('r', markerDotSize)
                .attr('opacity', 0)
                .attr('class', 'marker-dot');
            let x = 0;
            let y = 0;
            let label;
            let value;
            if (this.tooltip()) {
                this._createTooltipOrigin();
            }
            fromEvent(this._document, 'mousemove')
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe((e) => {
                const target = e.target;
                const oldXPosition = +markerDot.attr('cx');
                const pointerCoords = pointer(e, this._svg.node());
                const [posX, posY] = pointerCoords;
                let visible = true;
                if (posX < this.markerDotSize() || posY < this.markerDotSize() || posX > this._hostWidth || posY > this._hostHeight) {
                    visible = false;
                    this._overlayRef?.detach();
                    markerLine.attr('opacity', 0);
                    markerDot.attr('opacity', 0);
                }
                else {
                    if (target.closest('.ngs-mchart-line') ||
                        target.classList.contains('ngs-mchart-tooltip-overlay') ||
                        target.closest('.ngs-mchart-tooltip-overlay')) {
                        if (this.showMarkers()) {
                            markerLine.attr('opacity', 1);
                            markerDot.attr('opacity', 1);
                        }
                    }
                    else {
                        visible = false;
                        this._overlayRef?.detach();
                    }
                }
                const eachBand = this._xScale.step();
                const index = Math.round((posX / eachBand));
                const dataValue = this.data()[index];
                label = this.labels()[index] ? this.labels()[index] : xAccessor(index, index);
                value = yAccessor(dataValue);
                x = this._xScale(xAccessor(index, index));
                y = this._yScale(yAccessor(dataValue));
                markerLine
                    .attr('x1', x)
                    .attr('x2', x);
                markerDot
                    .attr('cx', x)
                    .attr('cy', y);
                if (this.tooltip()) {
                    if (posX < this._hostWidth / 2) {
                        this._currentTooltipPosition = 'after-center';
                    }
                    else {
                        this._currentTooltipPosition = 'before-center';
                    }
                    this._setTooltipPositionByEvent(e);
                    if (visible) {
                        this._setTooltipVisible();
                        if (!this._overlayRef?.hasAttached()) {
                            this._showTooltip({
                                label,
                                value
                            });
                        }
                        else {
                            if (oldXPosition !== x) {
                                this._showTooltip({
                                    label,
                                    value
                                });
                            }
                            else {
                                this._overlayRef.updatePositionStrategy(this._getOverlayPositionStrategy());
                                this._overlayRef.updatePosition();
                            }
                        }
                    }
                    else {
                        this._setTooltipInVisible();
                    }
                }
            });
        }
    }
    _setupResizeObserver() {
        if (!this.responsive()) {
            return;
        }
        this._resizeObserver = new ResizeObserver((entries) => {
            if (this._hostWidth !== entries[0].contentRect.width || this._hostHeight !== entries[0].contentRect.height) {
                this._hostWidth = entries[0].contentRect.width;
                this._hostHeight = entries[0].contentRect.height;
                this._innerWidth = entries[0].contentRect.width;
                this._innerHeight = entries[0].contentRect.height;
                this._svg
                    .attr("viewBox", `0 0 ${this._hostWidth} ${this._hostHeight}`);
                this._setupData(true);
            }
        });
        this._resizeObserver.observe(this._elementRef.nativeElement);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartLine, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MchartLine, isStandalone: true, selector: "ngs-mchart-line", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showArea: { classPropertyName: "showArea", publicName: "showArea", isSignal: true, isRequired: false, transformFunction: null }, showMarkers: { classPropertyName: "showMarkers", publicName: "showMarkers", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, fillAreaGradient: { classPropertyName: "fillAreaGradient", publicName: "fillAreaGradient", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, xAccessor: { classPropertyName: "xAccessor", publicName: "xAccessor", isSignal: true, isRequired: false, transformFunction: null }, yAccessor: { classPropertyName: "yAccessor", publicName: "yAccessor", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, markerDotSize: { classPropertyName: "markerDotSize", publicName: "markerDotSize", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fill-area-gradient": "fillAreaGradient()" }, classAttribute: "ngs-mchart-line" }, exportAs: ["ngsMchartLine"], usesInheritance: true, ngImport: i0, template: "<svg>\n  @if (fillAreaGradient()) {\n    <linearGradient [id]=\"gradientId\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n      <stop offset=\"0%\" class=\"lg-start-color\"/>\n      <stop offset=\"100%\" class=\"lg-end-color\"/>\n    </linearGradient>\n  }\n</svg>\n", styles: [":host{--ngs-mchart-line-line-bg: var(--ngs-color-primary);--ngs-mchart-line-area-bg: var(--ngs-color-primary-200);--ngs-mchart-line-marker-line-bg: var(--ngs-color-neutral);--ngs-mchart-line-marker-dot-bg: var(--ngs-color-primary);--ngs-mchart-line-area-gradient-start-color: var(--ngs-color-primary);--ngs-mchart-line-area-gradient-end-color: var(--ngs-color-background);display:block;overflow:hidden}:host svg{width:100%;height:100%}:host ::ng-deep .line{stroke:var(--ngs-mchart-line-line-bg);fill:none;stroke-linejoin:round;stroke-linecap:round}:host ::ng-deep .area{stroke-width:0}:host ::ng-deep .marker-line{stroke:var(--ngs-mchart-line-marker-line-bg);stroke-width:1;stroke-dasharray:3}:host ::ng-deep .marker-dot{fill:var(--ngs-mchart-line-marker-dot-bg)}:host:not(.fill-area-gradient) ::ng-deep .area{fill:var(--ngs-mchart-line-area-bg)}:host.fill-area-gradient .lg-start-color{stop-color:var(--ngs-mchart-line-area-gradient-start-color)}:host.fill-area-gradient .lg-end-color{stop-color:var(--ngs-mchart-line-area-gradient-end-color)}:host-context(html.dark){--ngs-mchart-line-area-bg: var(--ngs-color-neutral-700);--ngs-mchart-line-area-gradient-start-color: var(--ngs-color-neutral-700)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartLine, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-mchart-line', exportAs: 'ngsMchartLine', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'ngs-mchart-line',
                        '[class.fill-area-gradient]': 'fillAreaGradient()',
                    }, template: "<svg>\n  @if (fillAreaGradient()) {\n    <linearGradient [id]=\"gradientId\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n      <stop offset=\"0%\" class=\"lg-start-color\"/>\n      <stop offset=\"100%\" class=\"lg-end-color\"/>\n    </linearGradient>\n  }\n</svg>\n", styles: [":host{--ngs-mchart-line-line-bg: var(--ngs-color-primary);--ngs-mchart-line-area-bg: var(--ngs-color-primary-200);--ngs-mchart-line-marker-line-bg: var(--ngs-color-neutral);--ngs-mchart-line-marker-dot-bg: var(--ngs-color-primary);--ngs-mchart-line-area-gradient-start-color: var(--ngs-color-primary);--ngs-mchart-line-area-gradient-end-color: var(--ngs-color-background);display:block;overflow:hidden}:host svg{width:100%;height:100%}:host ::ng-deep .line{stroke:var(--ngs-mchart-line-line-bg);fill:none;stroke-linejoin:round;stroke-linecap:round}:host ::ng-deep .area{stroke-width:0}:host ::ng-deep .marker-line{stroke:var(--ngs-mchart-line-marker-line-bg);stroke-width:1;stroke-dasharray:3}:host ::ng-deep .marker-dot{fill:var(--ngs-mchart-line-marker-dot-bg)}:host:not(.fill-area-gradient) ::ng-deep .area{fill:var(--ngs-mchart-line-area-bg)}:host.fill-area-gradient .lg-start-color{stop-color:var(--ngs-mchart-line-area-gradient-start-color)}:host.fill-area-gradient .lg-end-color{stop-color:var(--ngs-mchart-line-area-gradient-end-color)}:host-context(html.dark){--ngs-mchart-line-area-bg: var(--ngs-color-neutral-700);--ngs-mchart-line-area-gradient-start-color: var(--ngs-color-neutral-700)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArea", required: false }] }], showMarkers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMarkers", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], fillAreaGradient: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillAreaGradient", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], xAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAccessor", required: false }] }], yAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAccessor", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], markerDotSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerDotSize", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }] } });

let nextId = 0;
class MchartBar extends BaseChartTooltip {
    _initialized = false;
    _host;
    _svg;
    _hlContainer;
    _dataContainer;
    _dimensions;
    _innerWidth = 0;
    _innerHeight = 0;
    _hostWidth = 0;
    _hostHeight = 0;
    _xScale;
    _yScale;
    _resizeObserver;
    _platformId = inject(PLATFORM_ID);
    _elementRef = inject(ElementRef);
    _destroyRef = inject(DestroyRef);
    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
    labels = input([], ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
    gap = input(0.2, { ...(ngDevMode ? { debugName: "gap" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    radius = input(0, { ...(ngDevMode ? { debugName: "radius" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    highlight = input(false, { ...(ngDevMode ? { debugName: "highlight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    responsive = input(false, { ...(ngDevMode ? { debugName: "responsive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    fillGradient = input(false, { ...(ngDevMode ? { debugName: "fillGradient" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    xAccessor = input((d, i) => i, ...(ngDevMode ? [{ debugName: "xAccessor" }] : /* istanbul ignore next */ []));
    yAccessor = input((d) => d, ...(ngDevMode ? [{ debugName: "yAccessor" }] : /* istanbul ignore next */ []));
    tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
    tooltipPosition = input('after-center', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
    _currentTooltipPosition = 'after-center';
    get gradientId() {
        return 'areaGradient' + this._gradientId;
    }
    _gradientId = nextId++;
    constructor() {
        super();
        effect(() => {
            this._currentTooltipPosition = this.tooltipPosition();
        });
        effect(() => {
            if (!this._initialized) {
                return;
            }
            this._render();
            this._setupResizeObserver();
        });
    }
    ngAfterViewChecked() {
        if (isPlatformServer(this._platformId)) {
            return;
        }
        if (!this._initialized) {
            const element = this._elementRef.nativeElement;
            this._dimensions = element.getBoundingClientRect();
            if (this._dimensions.width !== 0 && this._dimensions.height !== 0) {
                this._initialized = true;
                this._render();
                this._setupResizeObserver();
            }
        }
    }
    ngOnDestroy() {
        this._resizeObserver?.disconnect();
    }
    getTooltipPosition() {
        return this._currentTooltipPosition;
    }
    getTooltipTemplateRef() {
        return this.tooltip();
    }
    _render() {
        this._init();
        this._setupAxisScale();
        this._setupData();
        this._initTooltip();
    }
    _init() {
        this._hostWidth = this._dimensions.width;
        this._hostHeight = this._dimensions.height;
        this._innerWidth = this._dimensions.width;
        this._innerHeight = this._dimensions.height;
        this._host = select(this._elementRef.nativeElement);
        this._svg = this._host
            .select('svg')
            .attr('viewBox', `0 0 ${this._hostWidth} ${this._hostHeight}`);
    }
    _setupAxisScale() {
        if (!this._xScale) {
            this._xScale = scaleBand()
                .paddingInner(this.gap())
                .domain(this.data().map((d, i) => i.toString()));
        }
        this._xScale.range([0, this._innerWidth]);
        if (!this._yScale) {
            this._yScale = scaleLinear().domain([0, Math.max(...this.data())]);
        }
        this._yScale.range([this._innerHeight, 0]);
    }
    _setupData() {
        if (this.highlight()) {
            if (!this._hlContainer) {
                this._hlContainer = this._svg.append('g')
                    .attr('class', 'hl-container')
                    .attr('transform', `translate(0,0)`);
                this._hlContainer.selectAll('rect')
                    .data(this.data())
                    .enter()
                    .append('rect')
                    .attr('rx', this.radius())
                    .attr('x', (d, i) => this._xScale(i.toString()))
                    .attr('y', 0)
                    .attr('width', this._xScale.bandwidth())
                    .attr('height', this._innerHeight)
                    .attr('class', 'highlight');
            }
            else {
                this._hlContainer.selectAll('rect')
                    .attr('x', (d, i) => this._xScale(i.toString()))
                    .attr('y', 0)
                    .attr('width', this._xScale.bandwidth())
                    .attr('height', this._innerHeight);
            }
        }
        if (!this._dataContainer) {
            this._dataContainer = this._svg.append('g')
                .attr('class', 'data-container')
                .attr('transform', `translate(0,0)`);
            const allBars = this._dataContainer.selectAll('rect')
                .data(this.data())
                .enter()
                .append('rect')
                .attr('rx', this.radius())
                .attr('x', (d, i) => this._xScale(i.toString()))
                .attr('y', (d) => this._yScale(d))
                .attr('width', this._xScale.bandwidth())
                .attr('height', (d) => this._innerHeight - this._yScale(d))
                .attr('class', 'bar');
            if (this.fillGradient()) {
                allBars.attr('fill', `url(#${this.gradientId})`);
            }
        }
        else {
            this._dataContainer.selectAll('rect')
                .attr('x', (d, i) => this._xScale(i.toString()))
                .attr('y', (d) => this._yScale(d))
                .attr('width', this._xScale.bandwidth())
                .attr('height', (d) => this._innerHeight - this._yScale(d));
        }
    }
    _setupResizeObserver() {
        if (!this.responsive()) {
            return;
        }
        this._resizeObserver?.disconnect();
        this._resizeObserver = new ResizeObserver((entries) => {
            if (this._hostWidth !== entries[0].contentRect.width || this._hostHeight !== entries[0].contentRect.height) {
                this._hostWidth = entries[0].contentRect.width;
                this._hostHeight = entries[0].contentRect.height;
                this._innerWidth = entries[0].contentRect.width;
                this._innerHeight = entries[0].contentRect.height;
                this._svg.attr('viewBox', `0 0 ${this._hostWidth} ${this._hostHeight}`);
                this._setupAxisScale();
                this._setupData();
            }
        });
        this._resizeObserver.observe(this._elementRef.nativeElement);
    }
    _initTooltip() {
        if (!this.tooltip()) {
            return;
        }
        const xAccessor = this.xAccessor();
        const yAccessor = this.yAccessor();
        this._createTooltipOrigin();
        let x = 0;
        let y = 0;
        let label;
        let value;
        let oldX;
        fromEvent(this._document, 'mousemove')
            .pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe((e) => {
            const target = e.target;
            const pointerCoords = pointer(e, this._svg.node());
            const [posX, posY] = pointerCoords;
            let visible = true;
            if (posX < 0 || posY < 0 || posX > this._hostWidth || posY > this._hostHeight) {
                visible = false;
                oldX = null;
                this._overlayRef?.detach();
            }
            else {
                if (!target.closest('.ngs-mchart-line') ||
                    !target.classList.contains('ngs-mchart-tooltip-overlay') ||
                    !target.closest('.ngs-mchart-tooltip-overlay')) {
                    oldX = null;
                    this._overlayRef?.detach();
                }
            }
            const eachBand = this._xScale.step();
            const index = Math.floor(posX / eachBand);
            const dataValue = this.data()[index];
            label = this.labels()[index] ? this.labels()[index] : xAccessor(index, index);
            value = yAccessor(dataValue);
            x = this._xScale(xAccessor(index, index));
            y = this._yScale(yAccessor(dataValue));
            if (posX < this._hostWidth / 2) {
                this._currentTooltipPosition = 'after-center';
            }
            else {
                this._currentTooltipPosition = 'before-center';
            }
            this._setTooltipPositionByEvent(e);
            if (visible) {
                this._setTooltipVisible();
                if (!this._overlayRef?.hasAttached()) {
                    oldX = x;
                    this._showTooltip({
                        label,
                        value
                    });
                }
                else {
                    if (oldX !== x) {
                        oldX = x;
                        this._showTooltip({
                            label,
                            value
                        });
                    }
                    else {
                        this._overlayRef.updatePositionStrategy(this._getOverlayPositionStrategy());
                        this._overlayRef.updatePosition();
                    }
                }
            }
            else {
                oldX = x;
                this._setTooltipInVisible();
            }
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MchartBar, isStandalone: true, selector: "ngs-mchart-bar", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, fillGradient: { classPropertyName: "fillGradient", publicName: "fillGradient", isSignal: true, isRequired: false, transformFunction: null }, xAccessor: { classPropertyName: "xAccessor", publicName: "xAccessor", isSignal: true, isRequired: false, transformFunction: null }, yAccessor: { classPropertyName: "yAccessor", publicName: "yAccessor", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fill-gradient": "fillGradient()", "class.with-tooltip": "!!tooltip()" }, classAttribute: "ngs-mchart-bar" }, exportAs: ["ngsMchartBar"], usesInheritance: true, ngImport: i0, template: "<svg>\n  <defs>\n    @if (fillGradient()) {\n      <linearGradient [id]=\"gradientId\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n        <stop offset=\"0%\" class=\"lg-start-color\"/>\n        <stop offset=\"100%\" class=\"lg-end-color\"/>\n      </linearGradient>\n    }\n  </defs>\n</svg>\n", styles: [":host{--ngs-mchart-bar-bar-bg: var(--ngs-color-primary);--ngs-mchart-bar-bar-gradient-start-color: var(--ngs-color-primary-500);--ngs-mchart-bar-bar-gradient-end-color: var(--ngs-color-primary);--ngs-mchart-bar-highlight-bg: var(--ngs-color-neutral-200);display:block;overflow:hidden}:host svg{width:100%;height:100%}:host ::ng-deep .highlight{fill:var(--ngs-mchart-bar-highlight-bg)}:host:not(.fill-gradient) ::ng-deep .bar{fill:var(--ngs-mchart-bar-bar-bg)}:host.fill-gradient .lg-start-color{stop-color:var(--ngs-mchart-bar-bar-gradient-start-color)}:host.fill-gradient .lg-end-color{stop-color:var(--ngs-mchart-bar-bar-gradient-end-color)}:host.with-tooltip ::ng-deep .bar:hover{opacity:.85}:host-context(html.dark){--ngs-mchart-bar-highlight-bg: var(--ngs-color-neutral-700)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartBar, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-mchart-bar', exportAs: 'ngsMchartBar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'ngs-mchart-bar',
                        '[class.fill-gradient]': 'fillGradient()',
                        '[class.with-tooltip]': '!!tooltip()',
                    }, template: "<svg>\n  <defs>\n    @if (fillGradient()) {\n      <linearGradient [id]=\"gradientId\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n        <stop offset=\"0%\" class=\"lg-start-color\"/>\n        <stop offset=\"100%\" class=\"lg-end-color\"/>\n      </linearGradient>\n    }\n  </defs>\n</svg>\n", styles: [":host{--ngs-mchart-bar-bar-bg: var(--ngs-color-primary);--ngs-mchart-bar-bar-gradient-start-color: var(--ngs-color-primary-500);--ngs-mchart-bar-bar-gradient-end-color: var(--ngs-color-primary);--ngs-mchart-bar-highlight-bg: var(--ngs-color-neutral-200);display:block;overflow:hidden}:host svg{width:100%;height:100%}:host ::ng-deep .highlight{fill:var(--ngs-mchart-bar-highlight-bg)}:host:not(.fill-gradient) ::ng-deep .bar{fill:var(--ngs-mchart-bar-bar-bg)}:host.fill-gradient .lg-start-color{stop-color:var(--ngs-mchart-bar-bar-gradient-start-color)}:host.fill-gradient .lg-end-color{stop-color:var(--ngs-mchart-bar-bar-gradient-end-color)}:host.with-tooltip ::ng-deep .bar:hover{opacity:.85}:host-context(html.dark){--ngs-mchart-bar-highlight-bg: var(--ngs-color-neutral-700)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], highlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlight", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], fillGradient: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillGradient", required: false }] }], xAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAccessor", required: false }] }], yAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAccessor", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }] } });

class MchartPie extends BaseChartTooltip {
    _initialized = false;
    _host;
    _svg;
    _dataContainer;
    _legendContainer;
    _dimensions;
    _innerWidth = 0;
    _innerHeight = 0;
    _hostWidth = 0;
    _hostHeight = 0;
    _resizeObserver;
    _platformId = inject(PLATFORM_ID);
    _elementRef = inject(ElementRef);
    _radius = 0;
    _arcGenerator;
    _pieGenerator;
    _colorsGenerator;
    _arcTweenGenerator;
    _pieData;
    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
    labels = input([], ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
    valueAccessor = input((d) => d, ...(ngDevMode ? [{ debugName: "valueAccessor" }] : /* istanbul ignore next */ []));
    dataItemStrokeWidth = input(1, { ...(ngDevMode ? { debugName: "dataItemStrokeWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    legendContainerWidth = input(0, { ...(ngDevMode ? { debugName: "legendContainerWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    showDataAnimation = input(false, { ...(ngDevMode ? { debugName: "showDataAnimation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    showValueOnSlices = input(false, { ...(ngDevMode ? { debugName: "showValueOnSlices" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    showLegend = input(false, { ...(ngDevMode ? { debugName: "showLegend" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    legendOffset = input(30, { ...(ngDevMode ? { debugName: "legendOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    legendItemHeight = input(30, { ...(ngDevMode ? { debugName: "legendItemHeight" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    legendItemSymbolSize = input(12, { ...(ngDevMode ? { debugName: "legendItemSymbolSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    legendItemFontSize = input(14, { ...(ngDevMode ? { debugName: "legendItemFontSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    legendItemSymbolBorderRadius = input(12, { ...(ngDevMode ? { debugName: "legendItemSymbolBorderRadius" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    valueFontSize = input(12, { ...(ngDevMode ? { debugName: "valueFontSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
    tooltipPosition = input('after-center', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
    getTooltipPosition() {
        return this.tooltipPosition();
    }
    getTooltipTemplateRef() {
        return this.tooltip();
    }
    ngAfterViewChecked() {
        if (isPlatformServer(this._platformId)) {
            return;
        }
        if (!this._initialized) {
            const element = this._elementRef.nativeElement;
            this._dimensions = element.getBoundingClientRect();
            if (this._dimensions.width !== 0 && this._dimensions.height !== 0) {
                this._initialized = true;
                this._render();
                this._setupResizeObserver();
            }
        }
    }
    ngOnChanges(changes) {
        if (!this._initialized) {
            return;
        }
        if (changes['data'] && !changes['data'].firstChange) {
            this._draw(true);
        }
    }
    ngOnDestroy() {
        this._resizeObserver?.disconnect();
    }
    _render() {
        this._initDimensions();
        this._initContainers();
        this._setGenerators();
        this._setLegend();
        this._draw();
        this._initTooltip();
    }
    _initDimensions() {
        const legendContainerWidth = this.showLegend() ? this.legendContainerWidth() : 0;
        this._hostWidth = this._dimensions.width;
        this._hostHeight = this._dimensions.height;
        this._innerWidth = this._dimensions.width - legendContainerWidth - this.dataItemStrokeWidth() * 2;
        this._innerHeight = this._dimensions.height - this.dataItemStrokeWidth() * 2;
        this._host = select(this._elementRef.nativeElement);
        this._svg = this._host
            .select('svg')
            .attr('viewBox', `0 0 ${this._hostWidth} ${this._hostHeight}`);
        this._radius = Math.min(this._innerWidth, this._innerHeight) * .5;
    }
    _initContainers() {
        this._dataContainer = this._svg
            .append('g')
            .attr('class', 'data-container')
            .attr('transform', `translate(${this._radius},${this._innerHeight * .5})`);
        if (this.showLegend()) {
            this._legendContainer = this._svg
                .append('g')
                .attr('class', 'legend-container');
        }
    }
    _setGenerators() {
        const self = this;
        this._arcGenerator = arc()
            .innerRadius(0)
            .outerRadius(this._radius);
        this._pieGenerator = pie()
            .value(this.valueAccessor());
        this._colorsGenerator = scaleOrdinal(schemeTableau10)
            .domain(this.data().map((d, i) => i.toString()));
        this._arcTweenGenerator = function (d) {
            // @ts-ignore
            const _this = this;
            const current = d;
            const interpolateGenerator = interpolate(_this._previous, current);
            _this._previous = current;
            return (t) => {
                return self._arcGenerator(interpolateGenerator(t));
            };
        };
    }
    _setLegend() {
        if (!this.showLegend()) {
            return;
        }
        this._legendContainer
            .selectAll('g.legend-item')
            .data(this.data())
            .join('g')
            .attr('class', 'legend-item')
            .attr('data-index', (d, i) => i)
            .attr('transform', (d, i) => `translate(0, ${i * this.legendItemHeight()})`)
            .on('mouseenter', (event, d) => {
            const target = event.target;
            const index = +target.getAttribute('data-index');
            this._dataContainer
                .select(`path.data-item[data-index="${index}"]`)
                .classed('active', true);
        })
            .on('mouseleave', (event, d) => {
            const target = event.target;
            const index = +target.getAttribute('data-index');
            this._dataContainer
                .select(`path.data-item[data-index="${index}"]`)
                .classed('active', false);
        });
        this._legendContainer
            .selectAll('g.legend-item')
            .selectAll('text')
            .data((d, i) => [i])
            .join('text')
            .attr('class', 'legend-item-text')
            .attr('x', this.legendItemSymbolSize() * 2)
            .attr('y', this.legendItemHeight() * .5)
            .attr('font-size', this.legendItemFontSize())
            .text((i) => this.labels()[i]);
        this._legendContainer
            .selectAll('g.legend-item')
            .selectAll('rect')
            .data((d, i) => [i])
            .join('rect')
            .attr('class', 'legend-item-symbol')
            .attr('rx', this.legendItemSymbolBorderRadius())
            .attr('width', this.legendItemSymbolSize())
            .attr('height', this.legendItemSymbolSize())
            .attr('fill', (i) => this._colorsGenerator(i))
            .attr('y', this.legendItemFontSize() * .5 - 2);
        const dimensions = this._legendContainer.node().getBBox();
        this._legendContainer.attr('transform', `translate(${this._radius * 2 + this.legendOffset()},${this._innerHeight * .5 - .5 * dimensions.height})`);
    }
    _draw(isUpdate = false) {
        if (isUpdate) {
            this._colorsGenerator
                .domain(this.data().map((d, i) => i.toString()));
        }
        this._pieData = this._pieGenerator(this.data());
        this._dataContainer
            .selectAll('g.data-item-group')
            .data(this.data())
            .join('g')
            .attr('class', 'data-item-group')
            .attr('data-index', (d, i) => i);
        this._dataContainer
            .selectAll('g.data-item-group')
            .selectAll('path')
            .data((d, i) => [this._pieData[i]])
            .join('path')
            .attr('class', 'data-item')
            .attr('stroke-width', this.dataItemStrokeWidth())
            .attr('d', (d) => this._arcGenerator(d))
            .style('fill', (d) => this._colorsGenerator(d.index))
            .attr('data-index', (d) => d.index)
            .transition()
            .duration(this.showDataAnimation() ? 1000 : 0)
            .attrTween('d', this._arcTweenGenerator);
        if (this.showValueOnSlices()) {
            this._dataContainer
                .selectAll('g.data-item-group')
                .selectAll('text')
                .data((d, i) => [this._pieData[i]])
                .join('text')
                .attr('class', 'value')
                .attr('font-size', this.valueFontSize())
                .attr('transform', (d) => {
                const coordinates = this._arcGenerator.centroid(d);
                return `translate(${coordinates[0]},${coordinates[1]})`;
            })
                .text((d) => d.data);
        }
    }
    _setupResizeObserver() {
    }
    _initTooltip() {
        if (!this.tooltip()) {
            return;
        }
        let oldValue;
        this._createTooltipOrigin();
        this._dataContainer
            .selectAll('g.data-item-group')
            .data(this._pieData)
            .on('mousemove', (event, d) => {
            const target = event.target;
            this._setTooltipPositionByEvent(event);
            this._setTooltipVisible();
            const index = +target.getAttribute('data-index');
            const label = this.labels()[index] ? this.labels()[index] : null;
            const color = this._colorsGenerator(index);
            const value = d.data;
            if (!this._overlayRef?.hasAttached()) {
                this._showTooltip({
                    label,
                    color,
                    value
                });
                oldValue = value;
            }
            else {
                if (oldValue !== d.data) {
                    this._showTooltip({
                        label,
                        color,
                        value
                    });
                    oldValue = value;
                }
                else {
                    this._overlayRef.updatePosition();
                }
            }
        });
        this._dataContainer
            .on('mouseleave', (event) => {
            this._setTooltipInVisible();
            this._hideTooltip();
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartPie, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: MchartPie, isStandalone: true, selector: "ngs-mchart-pie", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, valueAccessor: { classPropertyName: "valueAccessor", publicName: "valueAccessor", isSignal: true, isRequired: false, transformFunction: null }, dataItemStrokeWidth: { classPropertyName: "dataItemStrokeWidth", publicName: "dataItemStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, legendContainerWidth: { classPropertyName: "legendContainerWidth", publicName: "legendContainerWidth", isSignal: true, isRequired: false, transformFunction: null }, showDataAnimation: { classPropertyName: "showDataAnimation", publicName: "showDataAnimation", isSignal: true, isRequired: false, transformFunction: null }, showValueOnSlices: { classPropertyName: "showValueOnSlices", publicName: "showValueOnSlices", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, legendOffset: { classPropertyName: "legendOffset", publicName: "legendOffset", isSignal: true, isRequired: false, transformFunction: null }, legendItemHeight: { classPropertyName: "legendItemHeight", publicName: "legendItemHeight", isSignal: true, isRequired: false, transformFunction: null }, legendItemSymbolSize: { classPropertyName: "legendItemSymbolSize", publicName: "legendItemSymbolSize", isSignal: true, isRequired: false, transformFunction: null }, legendItemFontSize: { classPropertyName: "legendItemFontSize", publicName: "legendItemFontSize", isSignal: true, isRequired: false, transformFunction: null }, legendItemSymbolBorderRadius: { classPropertyName: "legendItemSymbolBorderRadius", publicName: "legendItemSymbolBorderRadius", isSignal: true, isRequired: false, transformFunction: null }, valueFontSize: { classPropertyName: "valueFontSize", publicName: "valueFontSize", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-mchart-pie" }, exportAs: ["ngsMchartPie"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg></svg>\n", styles: [":host{--ngs-mchart-pie-stroke-color: var(--ngs-color-background);--ngs-mchart-pie-legend-item-color: var(--ngs-color-neutral-900);--ngs-mchart-pie-legend-item-hover-color: var(--ngs-color-primary);--ngs-mchart-pie-value-color: var(--ngs-color-neutral-950);display:block;overflow:hidden}:host svg{width:100%;height:100%}:host:has(.data-item.active) ::ng-deep .data-item:not(.active){opacity:.7;scale:.93;transition:scale .2s}:host ::ng-deep .data-item{stroke:var(--ngs-mchart-pie-stroke-color)}:host ::ng-deep .value{text-anchor:middle;alignment-baseline:middle;fill:var(--ngs-mchart-pie-value-color)}:host ::ng-deep .legend-item{cursor:pointer}:host ::ng-deep .legend-item:hover .legend-item-text{fill:var(--ngs-mchart-pie-legend-item-hover-color)}:host ::ng-deep .legend-item-text{fill:var(--ngs-mchart-pie-legend-item-color)}:host-context(html.dark){--ngs-mchart-pie-legend-item-color: var(--ngs-color-neutral-200)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartPie, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-mchart-pie', exportAs: 'ngsMchartPie', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'ngs-mchart-pie'
                    }, template: "<svg></svg>\n", styles: [":host{--ngs-mchart-pie-stroke-color: var(--ngs-color-background);--ngs-mchart-pie-legend-item-color: var(--ngs-color-neutral-900);--ngs-mchart-pie-legend-item-hover-color: var(--ngs-color-primary);--ngs-mchart-pie-value-color: var(--ngs-color-neutral-950);display:block;overflow:hidden}:host svg{width:100%;height:100%}:host:has(.data-item.active) ::ng-deep .data-item:not(.active){opacity:.7;scale:.93;transition:scale .2s}:host ::ng-deep .data-item{stroke:var(--ngs-mchart-pie-stroke-color)}:host ::ng-deep .value{text-anchor:middle;alignment-baseline:middle;fill:var(--ngs-mchart-pie-value-color)}:host ::ng-deep .legend-item{cursor:pointer}:host ::ng-deep .legend-item:hover .legend-item-text{fill:var(--ngs-mchart-pie-legend-item-hover-color)}:host ::ng-deep .legend-item-text{fill:var(--ngs-mchart-pie-legend-item-color)}:host-context(html.dark){--ngs-mchart-pie-legend-item-color: var(--ngs-color-neutral-200)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], valueAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAccessor", required: false }] }], dataItemStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataItemStrokeWidth", required: false }] }], legendContainerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendContainerWidth", required: false }] }], showDataAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDataAnimation", required: false }] }], showValueOnSlices: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueOnSlices", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], legendOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendOffset", required: false }] }], legendItemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendItemHeight", required: false }] }], legendItemSymbolSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendItemSymbolSize", required: false }] }], legendItemFontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendItemFontSize", required: false }] }], legendItemSymbolBorderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendItemSymbolBorderRadius", required: false }] }], valueFontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFontSize", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }] } });

class MchartTooltip {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: MchartTooltip, isStandalone: true, selector: "ngs-mchart-tooltip", host: { classAttribute: "ngs-mchart-tooltip" }, exportAs: ["ngsMchartTooltip"], ngImport: i0, template: "<div class=\"title\">\n  <ng-content select=\"ngs-mchart-tooltip-title\" />\n</div>\n<div class=\"body\">\n  <ng-content select=\"ngs-mchart-tooltip-body\" />\n</div>\n<ng-content />\n", styles: [":host{display:block;width:max-content;box-shadow:var(--ngs-shadow-sm);border-radius:var(--ngs-radius-lg);background:#fff;font-size:var(--ngs-font-size-xs);overflow:hidden}:host .title:empty{display:none}:host .body:empty{display:none}:host-context(html.dark){background:var(--ngs-color-tertiary-200);color:var(--ngs-color-neutral-800)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartTooltip, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-mchart-tooltip', exportAs: 'ngsMchartTooltip', host: {
                        'class': 'ngs-mchart-tooltip'
                    }, template: "<div class=\"title\">\n  <ng-content select=\"ngs-mchart-tooltip-title\" />\n</div>\n<div class=\"body\">\n  <ng-content select=\"ngs-mchart-tooltip-body\" />\n</div>\n<ng-content />\n", styles: [":host{display:block;width:max-content;box-shadow:var(--ngs-shadow-sm);border-radius:var(--ngs-radius-lg);background:#fff;font-size:var(--ngs-font-size-xs);overflow:hidden}:host .title:empty{display:none}:host .body:empty{display:none}:host-context(html.dark){background:var(--ngs-color-tertiary-200);color:var(--ngs-color-neutral-800)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class MchartTooltipTitle {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartTooltipTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: MchartTooltipTitle, isStandalone: true, selector: "ngs-mchart-tooltip-title", host: { classAttribute: "ngs-mchart-tooltip-title" }, exportAs: ["ngsMchartTooltipTitle"], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;background:var(--ngs-color-neutral-200);padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 2);font-weight:500}:host-context(html.dark){background:var(--ngs-color-neutral-300);color:var(--ngs-color-neutral-900)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartTooltipTitle, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-mchart-tooltip-title', exportAs: 'ngsMchartTooltipTitle', host: {
                        'class': 'ngs-mchart-tooltip-title'
                    }, template: "<ng-content />\n", styles: [":host{display:block;background:var(--ngs-color-neutral-200);padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 2);font-weight:500}:host-context(html.dark){background:var(--ngs-color-neutral-300);color:var(--ngs-color-neutral-900)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class MchartTooltipBody {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartTooltipBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: MchartTooltipBody, isStandalone: true, selector: "ngs-mchart-tooltip-body", host: { classAttribute: "ngs-mchart-tooltip-body" }, exportAs: ["ngsMchartTooltipBody"], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 2)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartTooltipBody, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-mchart-tooltip-body', exportAs: 'ngsMchartTooltipBody', host: {
                        'class': 'ngs-mchart-tooltip-body'
                    }, template: "<ng-content />\n", styles: [":host{display:block;padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 2)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { MchartBar, MchartLine, MchartPie, MchartTooltip, MchartTooltipBody, MchartTooltipTitle };
//# sourceMappingURL=ngstarter-ui-components-micro-chart.mjs.map
