'use strict';

var index = require('./index-feA4skrY.js');
var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
var bem = require('./bem-p0PWVN8n.js');
var helpers = require('./helpers-HuaiWXrB.js');
var log = require('./log-CXDMiw7o.js');
var config_default = require('./config.default-Cko-wpRU.js');
var config_decorator = require('./config.decorator-CUe4yCTd.js');
require('./browser-BwmkTmm8.js');
require('./config.utils-Civnz2jT.js');

const balSpinnerCss = ":root{--bal-spinner-circle-background:var(--bal-color-grey);--bal-spinner-circle-progress:var(--bal-color-primary);--bal-spinner-circle-background-inverted:var(--bal-color-white);--bal-spinner-circle-progress-inverted:var(--bal-color-primary)}bal-spinner,.bal-spinner{text-align:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;width:4rem}bal-spinner svg,.bal-spinner svg{-webkit-transform:unset !important;transform:unset !important}.bal-spinner--small{width:2rem}.bal-spinner--circle{margin:auto;border-width:.25rem;border-style:solid;border-color:var(--bal-spinner-circle-background);border-radius:50%;border-top-color:var(--bal-spinner-circle-progress);width:1.5rem;height:1.5rem}.bal-spinner--circle.bal-spinner--small{width:1.125rem;height:1.125rem;border-width:.2rem}.bal-spinner--circle.bal-spinner--animated{-webkit-animation:spinner 1.6s linear infinite;animation:spinner 1.6s linear infinite}.bal-spinner--circle.bal-spinner--color-white{border-color:var(--bal-spinner-circle-background-inverted);border-top-color:var(--bal-spinner-circle-progress-inverted)}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";

const Spinner = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.animated = config_default.defaultConfig.animated;
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * If `true` the component can be used on dark background
         */
        this.inverted = false;
        /**
         * If `true` the component will not add the spinner animation svg
         */
        this.deactivated = false;
        /**
         * Defines the color of the spinner.
         */
        this.color = 'blue';
        /**
         * If `true` the component is smaller
         */
        this.small = false;
        /**
         * Defines the look of the spinner
         */
        this.variation = 'logo';
        /**
         * PRIVATE METHODS
         * ------------------------------------------------------
         */
        this.animate = async () => {
            if (!this.animated) {
                this.destroy();
                return;
            }
            await this.load();
            if (this.currentRaf !== undefined) {
                cancelAnimationFrame(this.currentRaf);
            }
            if (this.shouldAnimate()) {
                this.destroy();
                this.currentRaf = helpers.raf(async () => {
                    if (this.animationFunction) {
                        this.animationFunction(this.el, this.getColor());
                    }
                });
            }
        };
        this.destroy = () => {
            if (this.animationItem && this.animationItem.destroy) {
                this.animationItem.destroy();
            }
            this.el.innerHTML = '';
        };
        this.shouldAnimate = () => {
            if (this.variation !== 'logo') {
                return false;
            }
            if (typeof window === 'undefined') {
                return false;
            }
            if (this.animationFunction === undefined) {
                return false;
            }
            return !this.deactivated;
        };
        this.load = async () => {
            return new Promise((resolve, reject) => {
                if (this.animationFunction) {
                    return resolve();
                }
                else {
                    helpers.rOnLoad(async () => {
                        Promise.resolve().then(function () { return require(/* @vite-ignore */ './bal-spinner.animation-BL6PkxOx.js'); })
                            .then(module => {
                            this.animationFunction = module.animate;
                            resolve();
                        })
                            .catch(reject);
                    });
                }
            });
        };
    }
    createLogger(log) {
        this.log = log;
    }
    deactivatedWatcher(newValue, oldValue) {
        if (newValue !== oldValue) {
            if (this.deactivated) {
                this.destroy();
            }
            else {
                this.animate();
            }
        }
    }
    variationWatcher(newValue, oldValue) {
        if (newValue !== oldValue) {
            if (this.variation === 'circle') {
                this.destroy();
            }
            else {
                this.animate();
            }
        }
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    componentDidLoad() {
        if (this.variation === 'logo') {
            this.animate();
        }
        else {
            this.destroy();
        }
    }
    disconnectedCallback() {
        if (this.el && !this.el.isConnected) {
            this.destroy();
        }
    }
    /**
     * LISTENERS
     * ------------------------------------------------------
     */
    configChanged(state) {
        this.animated = state.animated;
        if (state.animated === false) {
            this.destroy();
        }
    }
    /**
     * GETTERS
     * ------------------------------------------------------
     */
    getColor() {
        return this.inverted || this.color === 'white' ? '#ffffff' : '#151f6d';
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = bem.BEM.block('spinner');
        return (index.h(index.Host, { key: 'bf00a08aaa12fd4a3473d6f277a62abe4537ee8f', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('circle').class(this.variation === 'circle')), block.modifier('small').class(this.small)), block.modifier('animated').class(this.animated)), block.modifier(`color-${this.color}`).class(this.variation === 'circle')), role: "progressbar", "aria-hidden": "true" }));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "deactivated": ["deactivatedWatcher"],
        "variation": ["variationWatcher"]
    }; }
};
tslib_es6.__decorate([
    log.Logger('bal-spinner'),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", [Function]),
    tslib_es6.__metadata("design:returntype", void 0)
], Spinner.prototype, "createLogger", null);
tslib_es6.__decorate([
    config_decorator.ListenToConfig(),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", [Object]),
    tslib_es6.__metadata("design:returntype", void 0)
], Spinner.prototype, "configChanged", null);
Spinner.style = balSpinnerCss;

exports.bal_spinner = Spinner;
