// #region Imports
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { RendererServiceLocator } from '../../../../Dom/Renderer';
import { Disableable } from '../../../Behaviors/Disableable';
import { Labelable } from '../../../Behaviors/Labelable';
import { Orientable } from '../../../Behaviors/Orientable';
import { Variantable } from '../../../Behaviors/Variantable';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Watch } from '../../../Decorators/WatchDecorator';
import { TextElement } from '../../Primitives/Text/TextElement';
import { RangeBaseElement } from '../Abstracts/RangeBaseElement';
import { progressRingElementTemplate } from './ProgressRingElementTemplate';
import { progressRingElementJoyStyle } from './Themes/ProgressRingElement.Joy';
import { progressRingElementRetroStyle } from './Themes/ProgressRingElement.Retro';
import { progressRingElementCosmopolitanStyle } from './Themes/ProgressRingElement.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
import { CssLength } from '@breadstone/mosaik-themes';
// #endregion
/**
 * Progress Ring - A circular version of a progress bar, often used for visual appeal.
 *
 * @category Range
 * @element mosaik-progress-ring
 *
 * @slot label - The label slot.
 * @slot hint - The hint slot.
 *
 * @public
 */
let ProgressRingElement = class ProgressRingElement extends Themeable(Variantable(Orientable(Disableable(Labelable(RangeBaseElement))))) {
    // #region Fields
    _isIndeterminate;
    _thickness;
    _radius;
    _percent;
    // #endregion
    // #region Ctor
    constructor() {
        super();
        this._isIndeterminate = false;
        this._thickness = 4;
        this._radius = 16;
        this._percent = 0;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @readonly
    */
    static get is() {
        return 'mosaik-progress-ring';
    }
    /**
     * Determines if `ProgressRing` shows actual values `false` or generic, continuous progress feedback `true`.
     *
     * @public
     * @attr
     */
    get isIndeterminate() {
        return this._isIndeterminate;
    }
    set isIndeterminate(value) {
        if (this._isIndeterminate !== value) {
            this._isIndeterminate = value;
            this.requestUpdate('isIndeterminate');
        }
    }
    /**
     * @public
     * @attr
     */
    get thickness() {
        return this._thickness;
    }
    set thickness(value) {
        if (this._thickness !== value) {
            this._thickness = value;
            this.requestUpdate('thickness');
        }
    }
    /**
     * @public
     * @attr
     */
    get radius() {
        return this._radius;
    }
    set radius(value) {
        if (this._radius !== value) {
            this._radius = value;
            this.requestUpdate('radius');
        }
    }
    /**
     * @private
     * @readonly
     */
    get percent() {
        return this._percent;
    }
    /**
     * @private
     * @hidden
     * @readonly
     */
    get diameter() {
        const cssRadius = CssLength.isLength(this._radius) ? CssLength.extractValue(this._radius) : 0;
        return cssRadius * 2;
    }
    // #endregion
    // #region Methods
    /**
     * @protected
     * @override
     */
    onValueChanged(prev, next) {
        super.onValueChanged(prev, next);
        this._percent = this._isIndeterminate || this.max <= this.min
            ? Number.NaN
            : (this.value - this.min) / (this.max - this.min);
    }
    /**
     * @protected
     */
    onRadiusPropertyChanged(_prev, _next) {
        RendererServiceLocator.current.setStyle(this, 'width', `${this.diameter}px`);
        RendererServiceLocator.current.setStyle(this, 'height', `${this.diameter}px`);
    }
    /**
     * @private
     */
    getCircumference() {
        const cssRadius = CssLength.isLength(this._radius) ? CssLength.extractValue(this._radius) : 0;
        return 2 * Math.PI * cssRadius;
    }
    /**
     * @private
     */
    getOffset() {
        const circumference = this.getCircumference();
        const offset = circumference - (((this.value - this.min) / (this.max - this.min)) * circumference);
        const cssThickness = CssLength.isLength(this._thickness) ? CssLength.extractValue(this._thickness) : 0;
        return offset + cssThickness;
    }
};
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ProgressRingElement.prototype, "isIndeterminate", null);
__decorate([
    Attribute({
        type: String,
        converter: (value) => CssLength.tryParse(value)
    }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ProgressRingElement.prototype, "thickness", null);
__decorate([
    Attribute({
        type: String,
        converter: (value) => CssLength.tryParse(value)
    }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ProgressRingElement.prototype, "radius", null);
__decorate([
    Watch('radius'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Number, Number]),
    __metadata("design:returntype", void 0)
], ProgressRingElement.prototype, "onRadiusPropertyChanged", null);
ProgressRingElement = __decorate([
    Component({
        selector: 'mosaik-progress-ring',
        template: progressRingElementTemplate,
        themes: {
            joy: progressRingElementJoyStyle,
            retro: progressRingElementRetroStyle,
            cosmopolitan: progressRingElementCosmopolitanStyle
        },
        imports: [
            TextElement
        ]
    }),
    __metadata("design:paramtypes", [])
], ProgressRingElement);
export { ProgressRingElement };
//# sourceMappingURL=ProgressRingElement.js.map