import { __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { Prop, Watch } from 'vue-property-decorator';
import { ModulVue } from '../../utils/vue/vue';
import { PROGRESS_NAME } from '../component-names';
import WithRender from './progress.html?style=./progress.scss';
import INDETERMINATE_ANIMATION_TEMPLATE from './progressSpinnerAnimation';
export var MProgressState;
(function (MProgressState) {
    MProgressState["Completed"] = "completed";
    MProgressState["InProgress"] = "in-progress";
    MProgressState["Error"] = "error";
})(MProgressState || (MProgressState = {}));
export var MProgressSkin;
(function (MProgressSkin) {
    MProgressSkin["Default"] = "default";
    MProgressSkin["Monochrome"] = "monochrome";
})(MProgressSkin || (MProgressSkin = {}));
var MProgress = /** @class */ (function (_super) {
    __extends(MProgress, _super);
    function MProgress() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    MProgress.prototype.mounted = function () {
        this.attachStyleTag();
    };
    MProgress.prototype.setAttachStyleTag = function () {
        this.attachStyleTag();
    };
    MProgress.prototype.attachStyleTag = function () {
        if (!this.styleTag) {
            this.styleTag = document.getElementById('m-progress-spinner-styles');
        }
        if (!this.styleTag) {
            this.styleTag = document.createElement('style');
            this.styleTag.id = 'm-progress-spinner-styles';
            if (this.$modul !== undefined && this.$modul.CSPNonce !== undefined) {
                this.styleTag.setAttribute('nonce', this.$modul.CSPNonce);
            }
            document.head.appendChild(this.styleTag);
        }
        if (this.styleTag && this.styleTag.sheet) {
            this.styleTag.sheet.insertRule(this.animationCSS, 0);
        }
    };
    Object.defineProperty(MProgress.prototype, "animationCSS", {
        get: function () {
            return INDETERMINATE_ANIMATION_TEMPLATE
                .replace(/START_VALUE/g, "" + 0.95 * this.circleCircumference)
                .replace(/END_VALUE/g, "" + 0.2 * this.circleCircumference)
                .replace(/DIAMETER/g, "" + this.diameter);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "propSize", {
        get: function () {
            return this.circle ? '100%' : this.size + 'px';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "propState", {
        get: function () {
            return this.state ? this.state : this.value >= 100 ? MProgressState.Completed : MProgressState.InProgress;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "radiusSize", {
        get: function () {
            return this.circle || !this.borderRadius ? 'initial' : this.size / 2 + 'px';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "styleObject", {
        get: function () {
            return {
                height: this.propSize,
                borderRadius: this.radiusSize
            };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "barStyleObject", {
        get: function () {
            return this.value >= 100 ? {
                width: this.stringValue,
                borderRadius: this.radiusSize
            } :
                {
                    width: this.stringValue,
                    'border-bottom-left-radius': this.radiusSize,
                    'border-top-left-radius': this.radiusSize
                };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "stringValue", {
        get: function () {
            if (!this.indeterminate) {
                if (this.value < 0) {
                    return '0%';
                }
                else if (this.value > 100) {
                    return '100%';
                }
                else if (this.value !== undefined) {
                    return this.value + '%';
                }
                else {
                    return '0%';
                }
            }
            else {
                return '0%';
            }
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "numberValue", {
        get: function () {
            if (!this.indeterminate) {
                if (this.value < 0) {
                    return 0;
                }
                else if (this.value > 100) {
                    return 100;
                }
                else {
                    return this.value;
                }
            }
            else {
                return 0;
            }
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "isDeterminate", {
        get: function () {
            if (this.circle === false) {
                this.mode = 'determinate';
            }
            return this.circle === false;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "isIndeterminate", {
        get: function () {
            if (this.circle === true) {
                this.mode = 'indeterminate';
            }
            return this.circle === true;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "progressClasses", {
        get: function () {
            var _a;
            var animationClass = 'm-progress-spinner-indeterminate';
            return _a = {},
                _a[animationClass] = true,
                _a['m-' + this.mode] = true,
                _a;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "svgViewbox", {
        get: function () {
            return "0 0 " + this.diameter + " " + this.diameter;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "svgStyles", {
        get: function () {
            var circleSize = this.diameter + "px";
            return {
                width: circleSize,
                height: circleSize
            };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "circleStyles", {
        get: function () {
            return {
                'stroke-dashoffset': this.circleStrokeDashOffset,
                'stroke-dasharray': this.circleStrokeDashArray,
                'stroke-width': this.circleStrokeWidth,
                'animation-name': 'm-progress-spinner-stroke-rotate-' + this.diameter
            };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "backgroundCircleStyles", {
        get: function () {
            return {
                'stroke-dasharray': this.circleStrokeDashArray,
                'stroke-width': this.circleStrokeWidth,
                'animation-name': 'm-progress-spinner-stroke-rotate-' + this.diameter
            };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "circleRadius", {
        get: function () {
            return (this.diameter - this.stroke) / 2;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "circleStrokeWidth", {
        get: function () {
            return this.stroke + 'px';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "circleCircumference", {
        get: function () {
            return 2 * Math.PI * this.circleRadius;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "circleStrokeDashArray", {
        get: function () {
            return this.circleCircumference + 'px';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "circleStrokeDashOffset", {
        get: function () {
            if (!this.indeterminate) {
                return this.circleCircumference * (100 - this.numberValue) / 100 + 'px';
            }
            else if (this.indeterminate) {
                return this.circleCircumference * 0.2 + 'px';
            }
            return '0px';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MProgress.prototype, "isMonochrome", {
        get: function () {
            return this.skin === MProgressSkin.Monochrome;
        },
        enumerable: false,
        configurable: true
    });
    __decorate([
        Prop()
    ], MProgress.prototype, "value", void 0);
    __decorate([
        Prop()
    ], MProgress.prototype, "indeterminate", void 0);
    __decorate([
        Prop({ default: 6 })
    ], MProgress.prototype, "size", void 0);
    __decorate([
        Prop()
    ], MProgress.prototype, "circle", void 0);
    __decorate([
        Prop({ default: 50 })
    ], MProgress.prototype, "diameter", void 0);
    __decorate([
        Prop({ default: 4 })
    ], MProgress.prototype, "stroke", void 0);
    __decorate([
        Prop({
            validator: function (value) {
                return value === MProgressState.Completed ||
                    value === MProgressState.InProgress ||
                    value === MProgressState.Error;
            }
        })
    ], MProgress.prototype, "state", void 0);
    __decorate([
        Prop({ default: true })
    ], MProgress.prototype, "borderRadius", void 0);
    __decorate([
        Prop({ default: MProgressSkin.Default })
    ], MProgress.prototype, "skin", void 0);
    __decorate([
        Watch('diameter')
    ], MProgress.prototype, "setAttachStyleTag", null);
    MProgress = __decorate([
        WithRender,
        Component
    ], MProgress);
    return MProgress;
}(ModulVue));
export { MProgress };
var ProgressPlugin = {
    install: function (v, options) {
        v.component(PROGRESS_NAME, MProgress);
    }
};
export default ProgressPlugin;
//# sourceMappingURL=progress.js.map