import * as i0 from '@angular/core';
import { viewChild, input, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);
class SdBarChartComponent {
    canvas = viewChild.required('canvas');
    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
    plugins = input([], ...(ngDevMode ? [{ debugName: "plugins" }] : /* istanbul ignore next */ []));
    isScrollable = computed(() => {
        const labelsLength = this.data()?.labels?.length || 0;
        return labelsLength > 15;
    }, ...(ngDevMode ? [{ debugName: "isScrollable" }] : /* istanbul ignore next */ []));
    computedMinWidth = computed(() => {
        if (!this.isScrollable())
            return null;
        const labelsLength = this.data()?.labels?.length || 0;
        return labelsLength * 50;
    }, ...(ngDevMode ? [{ debugName: "computedMinWidth" }] : /* istanbul ignore next */ []));
    chart;
    constructor() {
        effect(() => {
            const currentData = this.data();
            const currentOptions = this.options();
            if (this.chart) {
                this.chart.data = currentData;
                if (currentOptions) {
                    this.chart.options = currentOptions;
                }
                this.chart.update();
            }
        });
    }
    ngOnInit() {
        this.#initChart();
    }
    ngOnDestroy() {
        if (this.chart) {
            this.chart.destroy();
        }
    }
    #initChart() {
        if (this.chart) {
            this.chart.destroy();
        }
        const ctx = this.canvas().nativeElement.getContext('2d');
        if (ctx) {
            this.chart = new Chart(ctx, {
                type: 'bar',
                data: this.data(),
                options: this.options() || {},
                plugins: this.plugins(),
            });
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: SdBarChartComponent, isStandalone: true, selector: "sd-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: `
    <div [style.overflow-x]="isScrollable() ? 'auto' : 'visible'" style="width: 100%; height: 100%;">
      <div [style.height]="'100%'" [style.min-width.px]="computedMinWidth()" style="position: relative;">
        <canvas #canvas></canvas>
      </div>
    </div>
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdBarChartComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'sd-bar-chart',
                    template: `
    <div [style.overflow-x]="isScrollable() ? 'auto' : 'visible'" style="width: 100%; height: 100%;">
      <div [style.height]="'100%'" [style.min-width.px]="computedMinWidth()" style="position: relative;">
        <canvas #canvas></canvas>
      </div>
    </div>
  `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    standalone: true,
                }]
        }], ctorParameters: () => [], propDecorators: { canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }] } });

Chart.register(...registerables);
class SdLineChartComponent {
    canvas = viewChild.required('canvas');
    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
    plugins = input([], ...(ngDevMode ? [{ debugName: "plugins" }] : /* istanbul ignore next */ []));
    isScrollable = computed(() => {
        const labelsLength = this.data()?.labels?.length || 0;
        return labelsLength > 15;
    }, ...(ngDevMode ? [{ debugName: "isScrollable" }] : /* istanbul ignore next */ []));
    computedMinWidth = computed(() => {
        if (!this.isScrollable())
            return null;
        const labelsLength = this.data()?.labels?.length || 0;
        return labelsLength * 50;
    }, ...(ngDevMode ? [{ debugName: "computedMinWidth" }] : /* istanbul ignore next */ []));
    chart;
    constructor() {
        effect(() => {
            const currentData = this.data();
            const currentOptions = this.options();
            if (this.chart) {
                this.chart.data = currentData;
                if (currentOptions) {
                    this.chart.options = currentOptions;
                }
                this.chart.update();
            }
        });
    }
    ngOnInit() {
        this.#initChart();
    }
    ngOnDestroy() {
        if (this.chart) {
            this.chart.destroy();
        }
    }
    #initChart() {
        if (this.chart) {
            this.chart.destroy();
        }
        const ctx = this.canvas().nativeElement.getContext('2d');
        if (ctx) {
            this.chart = new Chart(ctx, {
                type: 'line',
                data: this.data(),
                options: this.options() || {},
                plugins: this.plugins(),
            });
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: SdLineChartComponent, isStandalone: true, selector: "sd-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: `
    <div [style.overflow-x]="isScrollable() ? 'auto' : 'visible'" style="width: 100%; height: 100%;">
      <div [style.height]="'100%'" [style.min-width.px]="computedMinWidth()" style="position: relative;">
        <canvas #canvas></canvas>
      </div>
    </div>
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLineChartComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'sd-line-chart',
                    template: `
    <div [style.overflow-x]="isScrollable() ? 'auto' : 'visible'" style="width: 100%; height: 100%;">
      <div [style.height]="'100%'" [style.min-width.px]="computedMinWidth()" style="position: relative;">
        <canvas #canvas></canvas>
      </div>
    </div>
  `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    standalone: true,
                }]
        }], ctorParameters: () => [], propDecorators: { canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }] } });

Chart.register(...registerables);
class SdPieChartComponent {
    canvas = viewChild.required('canvas');
    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
    plugins = input([], ...(ngDevMode ? [{ debugName: "plugins" }] : /* istanbul ignore next */ []));
    chart;
    constructor() {
        effect(() => {
            const currentData = this.data();
            const currentOptions = this.options();
            if (this.chart) {
                this.chart.data = currentData;
                if (currentOptions) {
                    this.chart.options = currentOptions;
                }
                this.chart.update();
            }
        });
    }
    ngOnInit() {
        this.#initChart();
    }
    ngOnDestroy() {
        if (this.chart) {
            this.chart.destroy();
        }
    }
    #initChart() {
        if (this.chart) {
            this.chart.destroy();
        }
        const ctx = this.canvas().nativeElement.getContext('2d');
        if (ctx) {
            this.chart = new Chart(ctx, {
                type: 'pie',
                data: this.data(),
                options: this.options() || {},
                plugins: this.plugins(),
            });
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdPieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: SdPieChartComponent, isStandalone: true, selector: "sd-pie-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: `
    <div style="position: relative; height: 100%; width: 100%;">
      <canvas #canvas></canvas>
    </div>
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdPieChartComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'sd-pie-chart',
                    template: `
    <div style="position: relative; height: 100%; width: 100%;">
      <canvas #canvas></canvas>
    </div>
  `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    standalone: true,
                }]
        }], ctorParameters: () => [], propDecorators: { canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }] } });

Chart.register(...registerables);
class SdDoughnutChartComponent {
    canvas = viewChild.required('canvas');
    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
    plugins = input([], ...(ngDevMode ? [{ debugName: "plugins" }] : /* istanbul ignore next */ []));
    chart;
    constructor() {
        effect(() => {
            const currentData = this.data();
            const currentOptions = this.options();
            if (this.chart) {
                this.chart.data = currentData;
                if (currentOptions) {
                    this.chart.options = currentOptions;
                }
                this.chart.update();
            }
        });
    }
    ngOnInit() {
        this.#initChart();
    }
    ngOnDestroy() {
        if (this.chart) {
            this.chart.destroy();
        }
    }
    #initChart() {
        if (this.chart) {
            this.chart.destroy();
        }
        const ctx = this.canvas().nativeElement.getContext('2d');
        if (ctx) {
            this.chart = new Chart(ctx, {
                type: 'doughnut',
                data: this.data(),
                options: this.options() || {},
                plugins: this.plugins(),
            });
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdDoughnutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: SdDoughnutChartComponent, isStandalone: true, selector: "sd-doughnut-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: `
    <div style="position: relative; height: 100%; width: 100%;">
      <canvas #canvas></canvas>
    </div>
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdDoughnutChartComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'sd-doughnut-chart',
                    template: `
    <div style="position: relative; height: 100%; width: 100%;">
      <canvas #canvas></canvas>
    </div>
  `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    standalone: true,
                }]
        }], ctorParameters: () => [], propDecorators: { canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }] } });

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

export { SdBarChartComponent, SdDoughnutChartComponent, SdLineChartComponent, SdPieChartComponent };
//# sourceMappingURL=sdcorejs-angular-components-chart.mjs.map
