import * as i0 from '@angular/core';
import { input, numberAttribute, Component } from '@angular/core';

class Gauge {
    value = input(0, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    strokeWidth = input(10, { ...(ngDevMode ? { debugName: "strokeWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    radius = input(50, { ...(ngDevMode ? { debugName: "radius" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    strokeDasharray;
    initialOffset;
    strokeDashoffset;
    ngOnInit() {
        const circumference = 2 * Math.PI * this.radius();
        const valueInCircumference = (this.value() / 100) * circumference;
        this.strokeDasharray = `${circumference} ${circumference}`;
        this.initialOffset = circumference;
        this.strokeDashoffset = this.initialOffset - valueInCircumference;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Gauge, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Gauge, isStandalone: true, selector: "ngs-gauge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-gauge" }, exportAs: ["ngsGauge"], ngImport: i0, template: "<svg\n  fill=\"none\"\n  shape-rendering=\"crispEdges\"\n  height=\"100%\"\n  width=\"100%\"\n  viewBox=\"0 0 120 120\"\n  stroke-width=\"0\"\n  class=\"transform -rotate-90\">\n  <circle\n    class=\"bg\"\n    [attr.stroke-width]=\"strokeWidth()\"\n    stroke=\"currentColor\"\n    fill=\"transparent\"\n    shape-rendering=\"geometricPrecision\"\n    [attr.r]=\"radius()\"\n    cx=\"60\"\n    cy=\"60\"/>\n  @if (value() > 0) {\n    <circle\n      class=\"fill\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      shape-rendering=\"geometricPrecision\"\n      stroke-linecap=\"round\"\n      stroke=\"currentColor\"\n      fill=\"transparent\"\n      [attr.r]=\"radius()\"\n      cx=\"60\"\n      cy=\"60\"\n      [attr.stroke-dasharray]=\"strokeDasharray\"\n      [attr.stroke-dashoffset]=\"strokeDashoffset\"\n      [style.stroke-dashoffset]=\"strokeDashoffset\"/>\n  }\n</svg>\n<ng-content select=\"ngs-gauge-value\" />\n", styles: [":host{--ngs-gauge-value-color: var(--ngs-color-neutral-700);--ngs-gauge-bg: var(--ngs-color-neutral-300);--ngs-gauge-fill: var(--ngs-color-primary);--ngs-gauge-size: calc(var(--spacing, .25rem) * 20);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;flex:none;-webkit-user-select:none;user-select:none}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-gauge-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-gauge-size)}:host .bg{color:var(--ngs-gauge-bg)}:host .fill{transition:stroke-dasharray 1s ease 0s,stroke 1s ease 0s;animation:ngs-gauge-fill 1s ease forwards;color:var(--ngs-gauge-fill)}@keyframes ngs-gauge-fill{0%{stroke-dashoffset:332}}:host-context(html.dark){--ngs-gauge-value-color: var(--ngs-color-neutral-300);--ngs-gauge-bg: var(--ngs-color-neutral-600)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Gauge, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-gauge', exportAs: 'ngsGauge', host: {
                        'class': 'ngs-gauge'
                    }, template: "<svg\n  fill=\"none\"\n  shape-rendering=\"crispEdges\"\n  height=\"100%\"\n  width=\"100%\"\n  viewBox=\"0 0 120 120\"\n  stroke-width=\"0\"\n  class=\"transform -rotate-90\">\n  <circle\n    class=\"bg\"\n    [attr.stroke-width]=\"strokeWidth()\"\n    stroke=\"currentColor\"\n    fill=\"transparent\"\n    shape-rendering=\"geometricPrecision\"\n    [attr.r]=\"radius()\"\n    cx=\"60\"\n    cy=\"60\"/>\n  @if (value() > 0) {\n    <circle\n      class=\"fill\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      shape-rendering=\"geometricPrecision\"\n      stroke-linecap=\"round\"\n      stroke=\"currentColor\"\n      fill=\"transparent\"\n      [attr.r]=\"radius()\"\n      cx=\"60\"\n      cy=\"60\"\n      [attr.stroke-dasharray]=\"strokeDasharray\"\n      [attr.stroke-dashoffset]=\"strokeDashoffset\"\n      [style.stroke-dashoffset]=\"strokeDashoffset\"/>\n  }\n</svg>\n<ng-content select=\"ngs-gauge-value\" />\n", styles: [":host{--ngs-gauge-value-color: var(--ngs-color-neutral-700);--ngs-gauge-bg: var(--ngs-color-neutral-300);--ngs-gauge-fill: var(--ngs-color-primary);--ngs-gauge-size: calc(var(--spacing, .25rem) * 20);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;flex:none;-webkit-user-select:none;user-select:none}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-gauge-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-gauge-size)}:host .bg{color:var(--ngs-gauge-bg)}:host .fill{transition:stroke-dasharray 1s ease 0s,stroke 1s ease 0s;animation:ngs-gauge-fill 1s ease forwards;color:var(--ngs-gauge-fill)}@keyframes ngs-gauge-fill{0%{stroke-dashoffset:332}}:host-context(html.dark){--ngs-gauge-value-color: var(--ngs-color-neutral-300);--ngs-gauge-bg: var(--ngs-color-neutral-600)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }] } });

class GaugeValue {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GaugeValue, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: GaugeValue, isStandalone: true, selector: "ngs-gauge-value", host: { classAttribute: "ngs-gauge-value" }, exportAs: ["ngsGaugeValue"], ngImport: i0, template: "<ng-content />\n", styles: [":host{position:absolute;color:var(--ngs-gauge-value-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GaugeValue, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-gauge-value', exportAs: 'ngsGaugeValue', host: {
                        'class': 'ngs-gauge-value'
                    }, template: "<ng-content />\n", styles: [":host{position:absolute;color:var(--ngs-gauge-value-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

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

export { Gauge, GaugeValue };
//# sourceMappingURL=ngstarter-ui-components-gauge.mjs.map
