// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to
//  deal in the Software without restriction, including without limitation the
//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
//  sell copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
//  all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
//  THE SOFTWARE.
import { animate, style, transition, trigger } from "@angular/animations";
import { ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, NgZone, Output, ViewEncapsulation, } from "@angular/core";
import { LoggerService } from "../../services/log-service";
import { ButtonIcon, SpinnerSize } from "./public-api";
import * as i0 from "@angular/core";
import * as i1 from "../../services/log-service";
import * as i2 from "../button/button.component";
import * as i3 from "@angular/common";
import * as i4 from "../tooltip/tooltip.directive";
/**
 * <example-url>./../examples/index.html#/spinner</example-url>
 */
export class SpinnerComponent {
    constructor(logger, changeDetector, ngZone) {
        this.logger = logger;
        this.changeDetector = changeDetector;
        this.ngZone = ngZone;
        this.tooltipText = $localize `Cancel`;
        this.showSpinner = false;
        this.isDeterminate = false;
        this.show = false;
        this.delay = 250;
        /**
         * Input to set aria label text
         */
        this.ariaLabel = "Spinner";
        this.cancel = new EventEmitter();
    }
    set size(val) {
        const sizes = Object.values(SpinnerSize);
        if (sizes.includes(val)) {
            this._size = val;
            return;
        }
        this.logger.warn(`Allowed sizes for nui-spinner are ${sizes.join(", ")}. ` +
            `Default is ${SpinnerComponent.defaultSize}.`);
        this._size = SpinnerComponent.defaultSize;
    }
    get size() {
        return this._size || SpinnerComponent.defaultSize;
    }
    get icon() {
        return ButtonIcon[this.size];
    }
    get showText() {
        return this.size !== SpinnerSize.Small;
    }
    ngOnChanges(changes) {
        if (changes?.percent) {
            this.ariaValueNow = this.percent ? String(this.percent) : undefined;
        }
        if (!changes["show"]) {
            return;
        }
        this.isDeterminate = this.percent !== undefined;
        this.cancelShowTimer();
        if (this.delay && this.show) {
            this.ngZone.runOutsideAngular(() => {
                this.showTimer = setTimeout(() => {
                    this.ngZone.run(() => {
                        this.showSpinner = this.show;
                        this.changeDetector.detectChanges();
                    });
                }, this.delay);
            });
        }
        else {
            this.showSpinner = this.show;
        }
    }
    cancelShowTimer() {
        if (this.showTimer) {
            clearTimeout(this.showTimer);
        }
    }
    cancelProgress() {
        this.cancel.emit();
    }
    ngOnDestroy() {
        this.cancelShowTimer();
    }
}
SpinnerComponent.defaultSize = SpinnerSize.Small;
SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpinnerComponent, deps: [{ token: i1.LoggerService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SpinnerComponent, selector: "nui-spinner", inputs: { percent: "percent", show: "show", delay: "delay", allowCancel: "allowCancel", message: "message", helpText: "helpText", ariaLabel: "ariaLabel", size: "size" }, outputs: { cancel: "cancel" }, host: { attributes: { "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100" }, properties: { "attr.aria-label": "ariaLabel", "attr.aria-valuenow": "this.ariaValueNow" } }, usesOnChanges: true, ngImport: i0, template: "<span\n    class=\"nui-icon-busy-circular nui-spinner nui-spinner__container--{{\n        size\n    }}\"\n    *ngIf=\"showSpinner\"\n    [ngClass]=\"{ 'nui-spinner--determinate': isDeterminate }\"\n    [@spinnerAppear]\n>\n    <div class=\"nui-spinner__container\">\n        <svg\n            class=\"nui-spinner__circular\"\n            viewBox=\"25 25 50 50\"\n            *ngIf=\"!isDeterminate\"\n        >\n            <circle\n                class=\"nui-spinner__path-under\"\n                cx=\"50\"\n                cy=\"50\"\n                r=\"22\"\n                fill=\"none\"\n                stroke-width=\"5\"\n                stroke-miterlimit=\"10\"\n            />\n            <circle\n                class=\"nui-spinner__path\"\n                cx=\"50\"\n                cy=\"50\"\n                r=\"22\"\n                fill=\"none\"\n                stroke-width=\"5\"\n                stroke-miterlimit=\"10\"\n            />\n        </svg>\n        <svg\n            class=\"nui-spinner__circular\"\n            viewBox=\"0 0 36 36\"\n            *ngIf=\"isDeterminate\"\n        >\n            <circle\n                class=\"nui-spinner__path-under\"\n                cx=\"18\"\n                cy=\"18\"\n                r=\"15.9155\"\n                fill=\"none\"\n                stroke-width=\"4\"\n                stroke-miterlimit=\"10\"\n            />\n            <circle\n                class=\"nui-spinner__path\"\n                cx=\"18\"\n                cy=\"18\"\n                r=\"15.9155\"\n                fill=\"none\"\n                stroke-width=\"4\"\n                stroke-miterlimit=\"10\"\n                [ngStyle]=\"{ 'stroke-dasharray': percent + ', 100' }\"\n            />\n        </svg>\n\n        <button\n            nui-button\n            type=\"button\"\n            class=\"nui-spinner__cancel\"\n            icon=\"close\"\n            *ngIf=\"allowCancel\"\n            (click)=\"cancelProgress()\"\n            displayStyle=\"action\"\n            [nuiTooltip]=\"tooltipText\"\n        ></button>\n    </div>\n\n    <div class=\"nui-spinner__text-content\" *ngIf=\"showText\">\n        <div class=\"nui-spinner__label\" *ngIf=\"message !== undefined\">\n            <span class=\"nui-text-label nui-spinner__label-item\">{{\n                message\n            }}</span>\n        </div>\n        <span\n            class=\"nui-spinner__hint nui-help-hint\"\n            *ngIf=\"helpText !== undefined\"\n        >\n            {{ helpText }}\n        </span>\n    </div>\n</span>\n", styles: [".nui-spinner{display:inline-flex;align-items:center;position:relative;margin:0 auto;box-sizing:border-box;vertical-align:middle}.nui-spinner__container{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}.nui-spinner__container--small .nui-spinner__container{width:20px;height:20px}.nui-spinner__container--small .nui-spinner__cancel.nui-button{border-radius:50%;min-height:10px;min-width:10px;padding:0}.nui-spinner__container--large .nui-spinner__container{width:50px;height:50px}.nui-spinner__container--large .nui-spinner__cancel.nui-button{border-radius:50%;min-height:10px;min-width:10px;padding:3px}.nui-spinner__label{margin-left:10px}.nui-spinner__hint{display:block;margin-left:10px}.nui-spinner__circular{position:absolute;width:100%;height:100%;animation:rotate 2s linear infinite;transform-origin:center center;top:0;bottom:0;left:0;right:0;margin:auto}.nui-spinner__path-under{stroke:var(--nui-color-line-default,#d9d9d9)}.nui-spinner__path{stroke-dashoffset:0px;animation:dash 1.5s ease-in-out infinite;stroke-linecap:square;stroke:var(--nui-color-progress,#00c4d2)}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:67,200;stroke-dashoffset:-35px}to{stroke-dasharray:134,200;stroke-dashoffset:-134px}}.nui-spinner--determinate .nui-spinner__circular{animation:none}.nui-spinner--determinate .nui-spinner__path{transition:.5s linear;animation:none}\n"], components: [{ type: i2.ButtonComponent, selector: "[nui-button]", inputs: ["displayStyle", "icon", "iconColor", "iconRight", "isBusy", "isEmpty", "ariaLabel", "isRepeat", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.TooltipDirective, selector: "[nuiTooltip]", inputs: ["tooltipPlacement", "nuiTooltipDisabled", "nuiTooltip"], exportAs: ["nuiTooltip"] }], animations: [
        trigger("spinnerAppear", [
            transition(":enter", [
                animate(".2s ease-in-out", style({ opacity: 1 })),
            ]),
            transition(":leave", [
                animate(".2s ease-in-out", style({ opacity: 0 })),
            ]),
        ]),
    ], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpinnerComponent, decorators: [{
            type: Component,
            args: [{ selector: "nui-spinner", encapsulation: ViewEncapsulation.None, animations: [
                        trigger("spinnerAppear", [
                            transition(":enter", [
                                animate(".2s ease-in-out", style({ opacity: 1 })),
                            ]),
                            transition(":leave", [
                                animate(".2s ease-in-out", style({ opacity: 0 })),
                            ]),
                        ]),
                    ], host: {
                        role: "progressbar",
                        "aria-valuemin": "0",
                        "aria-valuemax": "100",
                        "[attr.aria-label]": "ariaLabel",
                    }, template: "<span\n    class=\"nui-icon-busy-circular nui-spinner nui-spinner__container--{{\n        size\n    }}\"\n    *ngIf=\"showSpinner\"\n    [ngClass]=\"{ 'nui-spinner--determinate': isDeterminate }\"\n    [@spinnerAppear]\n>\n    <div class=\"nui-spinner__container\">\n        <svg\n            class=\"nui-spinner__circular\"\n            viewBox=\"25 25 50 50\"\n            *ngIf=\"!isDeterminate\"\n        >\n            <circle\n                class=\"nui-spinner__path-under\"\n                cx=\"50\"\n                cy=\"50\"\n                r=\"22\"\n                fill=\"none\"\n                stroke-width=\"5\"\n                stroke-miterlimit=\"10\"\n            />\n            <circle\n                class=\"nui-spinner__path\"\n                cx=\"50\"\n                cy=\"50\"\n                r=\"22\"\n                fill=\"none\"\n                stroke-width=\"5\"\n                stroke-miterlimit=\"10\"\n            />\n        </svg>\n        <svg\n            class=\"nui-spinner__circular\"\n            viewBox=\"0 0 36 36\"\n            *ngIf=\"isDeterminate\"\n        >\n            <circle\n                class=\"nui-spinner__path-under\"\n                cx=\"18\"\n                cy=\"18\"\n                r=\"15.9155\"\n                fill=\"none\"\n                stroke-width=\"4\"\n                stroke-miterlimit=\"10\"\n            />\n            <circle\n                class=\"nui-spinner__path\"\n                cx=\"18\"\n                cy=\"18\"\n                r=\"15.9155\"\n                fill=\"none\"\n                stroke-width=\"4\"\n                stroke-miterlimit=\"10\"\n                [ngStyle]=\"{ 'stroke-dasharray': percent + ', 100' }\"\n            />\n        </svg>\n\n        <button\n            nui-button\n            type=\"button\"\n            class=\"nui-spinner__cancel\"\n            icon=\"close\"\n            *ngIf=\"allowCancel\"\n            (click)=\"cancelProgress()\"\n            displayStyle=\"action\"\n            [nuiTooltip]=\"tooltipText\"\n        ></button>\n    </div>\n\n    <div class=\"nui-spinner__text-content\" *ngIf=\"showText\">\n        <div class=\"nui-spinner__label\" *ngIf=\"message !== undefined\">\n            <span class=\"nui-text-label nui-spinner__label-item\">{{\n                message\n            }}</span>\n        </div>\n        <span\n            class=\"nui-spinner__hint nui-help-hint\"\n            *ngIf=\"helpText !== undefined\"\n        >\n            {{ helpText }}\n        </span>\n    </div>\n</span>\n", styles: [".nui-spinner{display:inline-flex;align-items:center;position:relative;margin:0 auto;box-sizing:border-box;vertical-align:middle}.nui-spinner__container{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}.nui-spinner__container--small .nui-spinner__container{width:20px;height:20px}.nui-spinner__container--small .nui-spinner__cancel.nui-button{border-radius:50%;min-height:10px;min-width:10px;padding:0}.nui-spinner__container--large .nui-spinner__container{width:50px;height:50px}.nui-spinner__container--large .nui-spinner__cancel.nui-button{border-radius:50%;min-height:10px;min-width:10px;padding:3px}.nui-spinner__label{margin-left:10px}.nui-spinner__hint{display:block;margin-left:10px}.nui-spinner__circular{position:absolute;width:100%;height:100%;animation:rotate 2s linear infinite;transform-origin:center center;top:0;bottom:0;left:0;right:0;margin:auto}.nui-spinner__path-under{stroke:var(--nui-color-line-default,#d9d9d9)}.nui-spinner__path{stroke-dashoffset:0px;animation:dash 1.5s ease-in-out infinite;stroke-linecap:square;stroke:var(--nui-color-progress,#00c4d2)}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:67,200;stroke-dashoffset:-35px}to{stroke-dasharray:134,200;stroke-dashoffset:-134px}}.nui-spinner--determinate .nui-spinner__circular{animation:none}.nui-spinner--determinate .nui-spinner__path{transition:.5s linear;animation:none}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.LoggerService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { ariaValueNow: [{
                type: HostBinding,
                args: ["attr.aria-valuenow"]
            }], percent: [{
                type: Input
            }], show: [{
                type: Input
            }], delay: [{
                type: Input
            }], allowCancel: [{
                type: Input
            }], message: [{
                type: Input
            }], helpText: [{
                type: Input
            }], ariaLabel: [{
                type: Input
            }], cancel: [{
                type: Output
            }], size: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 