import * as i0 from '@angular/core';
import { input, numberAttribute, inject, ElementRef, computed, Component, NgModule } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';

const BASE_SIZE = 100;
const BASE_STROKE_WIDTH = 10;
class ProgressSpinner {
    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
    mode = input('indeterminate', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
    value = input(0, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    diameter = input(100, { ...(ngDevMode ? { debugName: "diameter" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    strokeWidth = input(undefined, { ...(ngDevMode ? { debugName: "strokeWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    _elementRef = inject(ElementRef);
    _actualStrokeWidth = computed(() => this.strokeWidth() || this.diameter() / 10, ...(ngDevMode ? [{ debugName: "_actualStrokeWidth" }] : /* istanbul ignore next */ []));
    _circleRadius() {
        return (this.diameter() - BASE_STROKE_WIDTH) / 2;
    }
    _viewBox() {
        const viewBox = this._circleRadius() * 2 + this._actualStrokeWidth();
        return `0 0 ${viewBox} ${viewBox}`;
    }
    _strokeCircumference() {
        return 2 * Math.PI * this._circleRadius();
    }
    _strokeDashOffset() {
        if (this.mode() === 'determinate') {
            return (this._strokeCircumference() * (100 - this.value())) / 100;
        }
        return null;
    }
    _circleStrokeWidth() {
        return (this._actualStrokeWidth() / this.diameter()) * 100;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ProgressSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: ProgressSpinner, isStandalone: true, selector: "ngs-progress-spinner", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "class.mdc-circular-progress--indeterminate": "mode() === \"indeterminate\"", "class.ngs-progress-spinner-indeterminate": "mode() === \"indeterminate\"", "class.ngs-progress-spinner-determinate": "mode() === \"determinate\"", "style.width.px": "diameter()", "style.height.px": "diameter()", "style.--ngs-progress-spinner-size": "diameter() + \"px\"", "style.--ngs-progress-spinner-active-indicator-width": "diameter() + \"px\"", "class": "\"ngs-\" + color()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.aria-valuenow": "mode() === \"determinate\" ? value() : null", "attr.mode": "mode()" }, classAttribute: "ngs-progress-spinner" }, exportAs: ["ngsProgressSpinner"], ngImport: i0, template: "<ng-template #circle>\n  <svg [attr.viewBox]=\"_viewBox()\" class=\"ngs-circular-progress__indeterminate-circle-graphic\"\n       xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n    <circle [attr.r]=\"_circleRadius()\"\n            [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n            [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n            [style.stroke-width.%]=\"_circleStrokeWidth()\"\n            cx=\"50%\" cy=\"50%\"/>\n  </svg>\n</ng-template>\n\n<div class=\"ngs-circular-progress__determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n  <svg [attr.viewBox]=\"_viewBox()\" class=\"ngs-circular-progress__determinate-circle-graphic\"\n       xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n    <circle [attr.r]=\"_circleRadius()\"\n            [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n            [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n            [style.stroke-width.%]=\"_circleStrokeWidth()\"\n            class=\"ngs-circular-progress__determinate-circle\"\n            cx=\"50%\" cy=\"50%\"/>\n  </svg>\n</div>\n<div class=\"ngs-circular-progress__indeterminate-container\" aria-hidden=\"true\">\n  <div class=\"ngs-circular-progress__spinner-layer\">\n    <div class=\"ngs-circular-progress__circle-clipper ngs-circular-progress__circle-left\">\n      <ng-container [ngTemplateOutlet]=\"circle\" />\n    </div>\n    <div class=\"ngs-circular-progress__gap-patch\">\n      <ng-container [ngTemplateOutlet]=\"circle\" />\n    </div>\n    <div class=\"ngs-circular-progress__circle-clipper ngs-circular-progress__circle-right\">\n      <ng-container [ngTemplateOutlet]=\"circle\" />\n    </div>\n  </div>\n</div>\n", styles: [":host{--ngs-progress-spinner-color: var(--ngs-color-primary);--ngs-progress-spinner-animation-multiplier: 1}:host.ngs-primary{--ngs-progress-spinner-color: var(--ngs-color-primary)}:host.ngs-accent{--ngs-progress-spinner-color: var(--ngs-color-secondary)}:host.ngs-warn{--ngs-progress-spinner-color: var(--ngs-color-danger)}:host{display:block;overflow:hidden;line-height:0;position:relative;direction:ltr;transition:opacity .25s cubic-bezier(.4,0,.6,1)}:host circle{stroke-width:var(--ngs-progress-spinner-active-indicator-width, 4px);fill:#0000;stroke:var(--ngs-progress-spinner-color)}:host.ngs-progress-spinner-determinate .ngs-circular-progress__determinate-container{opacity:1}:host.ngs-progress-spinner-indeterminate .ngs-circular-progress__indeterminate-container{opacity:1;animation:ngs-circular-progress-container-rotate calc(1.5682352941176s * var(--ngs-progress-spinner-animation-multiplier)) linear infinite}:host .ngs-circular-progress__determinate-container,:host .ngs-circular-progress__indeterminate-circle-graphic,:host .ngs-circular-progress__indeterminate-container,:host .ngs-circular-progress__spinner-layer{position:absolute;width:100%;height:100%}:host .ngs-circular-progress__determinate-container{transform:rotate(-90deg);opacity:0}:host .ngs-circular-progress__indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}:host .ngs-circular-progress__determinate-circle{transition:stroke-dashoffset .5s cubic-bezier(0,0,.2,1)}:host .ngs-circular-progress__gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}:host .ngs-circular-progress__gap-patch .ngs-circular-progress__indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}:host .ngs-circular-progress__circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}:host .ngs-circular-progress__circle-clipper .ngs-circular-progress__indeterminate-circle-graphic{width:200%}:host .ngs-circular-progress__circle-right .ngs-circular-progress__indeterminate-circle-graphic{left:-100%}:host .ngs-circular-progress__spinner-layer{animation:ngs-circular-progress-spinner-layer-rotate calc(5332ms * var(--ngs-progress-spinner-animation-multiplier)) cubic-bezier(.4,0,.2,1) infinite both}:host .ngs-circular-progress__circle-left .ngs-circular-progress__indeterminate-circle-graphic{animation:ngs-circular-progress-left-spin calc(1333ms * var(--ngs-progress-spinner-animation-multiplier)) cubic-bezier(.4,0,.2,1) infinite both}:host .ngs-circular-progress__circle-right .ngs-circular-progress__indeterminate-circle-graphic{animation:ngs-circular-progress-right-spin calc(1333ms * var(--ngs-progress-spinner-animation-multiplier)) cubic-bezier(.4,0,.2,1) infinite both}@keyframes ngs-circular-progress-container-rotate{to{transform:rotate(360deg)}}@keyframes ngs-circular-progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes ngs-circular-progress-left-spin{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}to{transform:rotate(265deg)}}@keyframes ngs-circular-progress-right-spin{0%{transform:rotate(-265deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-265deg)}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ProgressSpinner, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-progress-spinner', exportAs: 'ngsProgressSpinner', host: {
                        'role': 'progressbar',
                        'class': 'ngs-progress-spinner',
                        'tabindex': '-1',
                        '[class.mdc-circular-progress--indeterminate]': 'mode() === "indeterminate"',
                        '[class.ngs-progress-spinner-indeterminate]': 'mode() === "indeterminate"',
                        '[class.ngs-progress-spinner-determinate]': 'mode() === "determinate"',
                        '[style.width.px]': 'diameter()',
                        '[style.height.px]': 'diameter()',
                        '[style.--ngs-progress-spinner-size]': 'diameter() + "px"',
                        '[style.--ngs-progress-spinner-active-indicator-width]': 'diameter() + "px"',
                        '[class]': '"ngs-" + color()',
                        '[attr.aria-valuemin]': '0',
                        '[attr.aria-valuemax]': '100',
                        '[attr.aria-valuenow]': 'mode() === "determinate" ? value() : null',
                        '[attr.mode]': 'mode()',
                    }, standalone: true, imports: [NgTemplateOutlet], template: "<ng-template #circle>\n  <svg [attr.viewBox]=\"_viewBox()\" class=\"ngs-circular-progress__indeterminate-circle-graphic\"\n       xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n    <circle [attr.r]=\"_circleRadius()\"\n            [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n            [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n            [style.stroke-width.%]=\"_circleStrokeWidth()\"\n            cx=\"50%\" cy=\"50%\"/>\n  </svg>\n</ng-template>\n\n<div class=\"ngs-circular-progress__determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n  <svg [attr.viewBox]=\"_viewBox()\" class=\"ngs-circular-progress__determinate-circle-graphic\"\n       xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n    <circle [attr.r]=\"_circleRadius()\"\n            [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n            [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n            [style.stroke-width.%]=\"_circleStrokeWidth()\"\n            class=\"ngs-circular-progress__determinate-circle\"\n            cx=\"50%\" cy=\"50%\"/>\n  </svg>\n</div>\n<div class=\"ngs-circular-progress__indeterminate-container\" aria-hidden=\"true\">\n  <div class=\"ngs-circular-progress__spinner-layer\">\n    <div class=\"ngs-circular-progress__circle-clipper ngs-circular-progress__circle-left\">\n      <ng-container [ngTemplateOutlet]=\"circle\" />\n    </div>\n    <div class=\"ngs-circular-progress__gap-patch\">\n      <ng-container [ngTemplateOutlet]=\"circle\" />\n    </div>\n    <div class=\"ngs-circular-progress__circle-clipper ngs-circular-progress__circle-right\">\n      <ng-container [ngTemplateOutlet]=\"circle\" />\n    </div>\n  </div>\n</div>\n", styles: [":host{--ngs-progress-spinner-color: var(--ngs-color-primary);--ngs-progress-spinner-animation-multiplier: 1}:host.ngs-primary{--ngs-progress-spinner-color: var(--ngs-color-primary)}:host.ngs-accent{--ngs-progress-spinner-color: var(--ngs-color-secondary)}:host.ngs-warn{--ngs-progress-spinner-color: var(--ngs-color-danger)}:host{display:block;overflow:hidden;line-height:0;position:relative;direction:ltr;transition:opacity .25s cubic-bezier(.4,0,.6,1)}:host circle{stroke-width:var(--ngs-progress-spinner-active-indicator-width, 4px);fill:#0000;stroke:var(--ngs-progress-spinner-color)}:host.ngs-progress-spinner-determinate .ngs-circular-progress__determinate-container{opacity:1}:host.ngs-progress-spinner-indeterminate .ngs-circular-progress__indeterminate-container{opacity:1;animation:ngs-circular-progress-container-rotate calc(1.5682352941176s * var(--ngs-progress-spinner-animation-multiplier)) linear infinite}:host .ngs-circular-progress__determinate-container,:host .ngs-circular-progress__indeterminate-circle-graphic,:host .ngs-circular-progress__indeterminate-container,:host .ngs-circular-progress__spinner-layer{position:absolute;width:100%;height:100%}:host .ngs-circular-progress__determinate-container{transform:rotate(-90deg);opacity:0}:host .ngs-circular-progress__indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}:host .ngs-circular-progress__determinate-circle{transition:stroke-dashoffset .5s cubic-bezier(0,0,.2,1)}:host .ngs-circular-progress__gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}:host .ngs-circular-progress__gap-patch .ngs-circular-progress__indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}:host .ngs-circular-progress__circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}:host .ngs-circular-progress__circle-clipper .ngs-circular-progress__indeterminate-circle-graphic{width:200%}:host .ngs-circular-progress__circle-right .ngs-circular-progress__indeterminate-circle-graphic{left:-100%}:host .ngs-circular-progress__spinner-layer{animation:ngs-circular-progress-spinner-layer-rotate calc(5332ms * var(--ngs-progress-spinner-animation-multiplier)) cubic-bezier(.4,0,.2,1) infinite both}:host .ngs-circular-progress__circle-left .ngs-circular-progress__indeterminate-circle-graphic{animation:ngs-circular-progress-left-spin calc(1333ms * var(--ngs-progress-spinner-animation-multiplier)) cubic-bezier(.4,0,.2,1) infinite both}:host .ngs-circular-progress__circle-right .ngs-circular-progress__indeterminate-circle-graphic{animation:ngs-circular-progress-right-spin calc(1333ms * var(--ngs-progress-spinner-animation-multiplier)) cubic-bezier(.4,0,.2,1) infinite both}@keyframes ngs-circular-progress-container-rotate{to{transform:rotate(360deg)}}@keyframes ngs-circular-progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes ngs-circular-progress-left-spin{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}to{transform:rotate(265deg)}}@keyframes ngs-circular-progress-right-spin{0%{transform:rotate(-265deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-265deg)}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }] } });
class ProgressSpinnerModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: ProgressSpinnerModule, imports: [ProgressSpinner], exports: [ProgressSpinner] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ProgressSpinnerModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ProgressSpinnerModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [ProgressSpinner],
                    exports: [ProgressSpinner],
                }]
        }] });

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

export { ProgressSpinner, ProgressSpinnerModule };
//# sourceMappingURL=ngstarter-ui-components-spinner.mjs.map
