// #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 { progressRingElementMemphisStyle } from './Themes/ProgressRingElement.Memphis';
import { progressRingElementCosmopolitanStyle } from './Themes/ProgressRingElement.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
import { CssLength } from '@breadstone/mosaik-themes';
// #endregion
/**
 * ProgressRing - A circular progress indicator component for displaying task completion and loading states.
 *
 * Presents progress information in an elegant circular format with support for both determinate
 * progress (specific percentage) and indeterminate loading states. Features smooth animations,
 * customizable styling, and optional text labels for enhanced user feedback during operations.
 *
 * @name ProgressRingElement
 * @element mosaik-progress-ring
 * @category Ranges
 *
 * @slot label - Text label content area for progress description or percentage display
 * @slot hint - Secondary text content area for additional progress information or status
 *
 * @csspart root - Root container for the progress ring component
 * @csspart bar - Progress bar/ring path element for visual progress representation
 * @csspart label - Text label styling container for progress information
 * @csspart track - Background track/circle for the progress ring
 * @csspart fill - Progress fill/path for indicating completion
 *
 * @cssprop --progress-ring-font-family - Font family for progress text labels
 * @cssprop --progress-ring-font-size - Font size for progress text
 * @cssprop --progress-ring-font-weight - Font weight for progress text
 * @cssprop --progress-ring-padding-top - Top padding for ring container
 * @cssprop --progress-ring-padding-right - Right padding for ring container
 * @cssprop --progress-ring-padding-bottom - Bottom padding for ring container
 * @cssprop --progress-ring-padding-left - Left padding for ring container
 * @cssprop --progress-ring-gap - Gap between ring and label elements
 * @cssprop --progress-ring-transition-duration - Animation duration for progress changes
 * @cssprop --progress-ring-transition-mode - Animation easing mode for progress transitions
 * @cssprop --progress-ring-transition-property - CSS properties to animate during transitions
 * @cssprop --progress-ring-foreground-color - Primary color for ring and text
 * @cssprop --progress-ring-background-color - Background color for the ring container
 * @cssprop --progress-ring-border-color - Border color for ring elements
 * @cssprop --progress-ring-border-width - Border width for ring styling
 * @cssprop --progress-ring-border-radius - Border radius for container styling
 * @cssprop --progress-ring-border-style - Border style for ring elements
 * @cssprop --progress-ring-shadow - Shadow effect for the progress ring
 * @cssprop --progress-ring-fill-color - Fill color for the progress indicator
 * @cssprop --progress-ring-track-color - Background track color for the ring
 * @cssprop --progress-ring-size - Size dimensions for the progress ring
 * @cssprop --progress-ring-stroke-width - Thickness of the progress ring stroke
 *
 * @fires valueChanged - Fired when the value is changed.
 *
 * @dependency TextElement - For rendering progress labels and text content
 * @dependency CssLength - For handling CSS length values and sizing
 *
 * @example
 * ```html
 * <!-- Simple progress ring with percentage -->
 * <mosaik-progress-ring value="65" max="100">
 *   <mosaik-text slot="label">65%</mosaik-text>
 * </mosaik-progress-ring>
 *
 * <!-- File upload progress -->
 * <mosaik-progress-ring value="42" max="100">
 *   <mosaik-text slot="label">42%</mosaik-text>
 *   <mosaik-text slot="hint">Uploading...</mosaik-text>
 * </mosaik-progress-ring>
 *
 * <!-- Indeterminate loading ring -->
 * <mosaik-progress-ring indeterminate="true">
 *   <mosaik-text slot="label">Loading</mosaik-text>
 * </mosaik-progress-ring>
 *
 * <!-- Task completion ring -->
 * <mosaik-progress-ring value="8" max="10" appearance="success">
 *   <mosaik-text slot="label">8/10</mosaik-text>
 *   <mosaik-text slot="hint">Tasks Complete</mosaik-text>
 * </mosaik-progress-ring>
 *
 * <!-- Small loading spinner -->
 * <mosaik-progress-ring
 *   size="small"
 *   indeterminate="true"
 *   style="--progress-ring-size: 24px;">
 * </mosaik-progress-ring>
 *
 * <!-- Custom styled progress ring -->
 * <mosaik-progress-ring
 *   value="75"
 *   style="
 *     --progress-ring-fill-color: #00ff00;
 *     --progress-ring-track-color: #e0e0e0;
 *     --progress-ring-size: 120px;
 *     --progress-ring-stroke-width: 8px;
 *   ">
 *   <mosaik-text slot="label">75%</mosaik-text>
 *   <mosaik-text slot="hint">Download Progress</mosaik-text>
 * </mosaik-progress-ring>
 * ```
 *
 * @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) : this._radius;
        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,
            memphis: progressRingElementMemphisStyle,
            cosmopolitan: progressRingElementCosmopolitanStyle
        },
        imports: [
            TextElement
        ]
    }),
    __metadata("design:paramtypes", [])
], ProgressRingElement);
export { ProgressRingElement };
//# sourceMappingURL=ProgressRingElement.js.map