// #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 { CssLength } from '@breadstone/mosaik-themes';
import { Disableable } from '../../../Behaviors/Disableable';
import { Labelable } from '../../../Behaviors/Labelable';
import { Orientable } from '../../../Behaviors/Orientable';
import { Themeable } from '../../../Behaviors/Themeable';
import { Variantable } from '../../../Behaviors/Variantable';
import { InlineStyleController } from '../../../Controllers/InlineStyleController';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { TextElement } from '../../Primitives/Text/TextElement';
import { RangeBaseElement } from '../Abstracts/RangeBaseElement';
import { progressRingElementTemplate } from './ProgressRingElementTemplate';
import { progressRingElementCosmopolitanStyle } from './Themes/ProgressRingElement.Cosmopolitan';
import { progressRingElementJoyStyle } from './Themes/ProgressRingElement.Joy';
import { progressRingElementMemphisStyle } from './Themes/ProgressRingElement.Memphis';
// #endregion
/**
 * ProgressRing - A circular progress indicator for displaying task completion and loading states.
 *
 * @description
 * The ProgressRing component presents progress information in an elegant circular format with
 * support for both determinate progress (specific percentage) and indeterminate loading states.
 * Features smooth SVG-based animations, customizable stroke thickness and radius, optional text
 * labels for enhanced user feedback, and comprehensive theming. Ideal for dashboards, loading
 * indicators, file operations, and any scenario where circular progress visualization provides
 * better visual feedback than linear bars.
 *
 * @name ProgressRing
 * @element mosaik-progress-ring
 * @category Ranges
 *
 * @slot hint - Secondary text content area for additional progress information or status
 * @slot label - Text label content area for progress description or percentage display
 *
 * @csspart bar - Background circle/track element for the progress ring
 * @csspart fill - Progress circle/path indicating current completion level
 * @csspart hint - Hint text styling container for additional information
 * @csspart indeterminate - Animated circle for indeterminate loading state
 * @csspart label - Text label styling container for progress information
 * @csspart svg - Root SVG container for the progress ring
 *
 * @cssprop {String} --progress-ring-background-color - Background color for the ring container
 * @cssprop {String} --progress-ring-border-color - Border color for ring container styling
 * @cssprop {String} --progress-ring-border-radius - Border radius for container styling
 * @cssprop {String} --progress-ring-border-style - Border style for ring container
 * @cssprop {String} --progress-ring-border-width - Border width for ring container
 * @cssprop {String} --progress-ring-fill-color - Fill color for the progress indicator arc
 * @cssprop {String} --progress-ring-font-family - Font family for progress text labels
 * @cssprop {String} --progress-ring-font-letter-spacing - The ring font letter spacing CSS custom property.
 * @cssprop {String} --progress-ring-font-line-height - The ring font line height CSS custom property.
 * @cssprop {String} --progress-ring-font-size - Font size for progress text
 * @cssprop {String} --progress-ring-font-text-decoration - The ring font text decoration CSS custom property.
 * @cssprop {String} --progress-ring-font-text-transform - The ring font text transform CSS custom property.
 * @cssprop {String} --progress-ring-font-weight - Font weight for progress text
 * @cssprop {String} --progress-ring-foreground-color - Primary color for ring stroke and text
 * @cssprop {String} --progress-ring-gap - Spacing between ring and label elements
 * @cssprop {String} --progress-ring-padding-bottom - Bottom padding for ring container
 * @cssprop {String} --progress-ring-padding-left - Left padding for ring container
 * @cssprop {String} --progress-ring-padding-right - Right padding for ring container
 * @cssprop {String} --progress-ring-padding-top - Top padding for ring container
 * @cssprop {String} --progress-ring-radius - The ring radius CSS custom property.
 * @cssprop {String} --progress-ring-shadow - Drop shadow or elevation effect for the progress ring
 * @cssprop {String} --progress-ring-shadow-blur - The ring shadow blur CSS custom property.
 * @cssprop {String} --progress-ring-shadow-color - The ring shadow color CSS custom property.
 * @cssprop {String} --progress-ring-shadow-offset-x - The ring shadow offset x CSS custom property.
 * @cssprop {String} --progress-ring-shadow-offset-y - The ring shadow offset y CSS custom property.
 * @cssprop {String} --progress-ring-shadow-spread - The ring shadow spread CSS custom property.
 * @cssprop {String} --progress-ring-thickness - The ring thickness CSS custom property.
 * @cssprop {String} --progress-ring-transition-duration - Animation duration for progress changes
 * @cssprop {String} --progress-ring-transition-mode - Animation easing mode for progress transitions
 * @cssprop {String} --progress-ring-transition-property - CSS properties to animate during transitions
 * @cssprop {String} --progress-ring-translate - The ring translate CSS custom property.
 *
 * @fires rangeValueChanged {RangeValueChangedEvent} - Fired when the progress value changes
 *
 * @dependency mosaik-text - The Text element.
 *
 * @example
 * Simple progress ring with percentage:
 * ```html
 * <mosaik-progress-ring value="65" max="100">
 *   <mosaik-text slot="label">65%</mosaik-text>
 * </mosaik-progress-ring>
 * ```
 *
 * @example
 * File upload progress with status:
 * ```html
 * <mosaik-progress-ring value="42" max="100">
 *   <mosaik-text slot="label">42%</mosaik-text>
 *   <mosaik-text slot="hint">Uploading...</mosaik-text>
 * </mosaik-progress-ring>
 * ```
 *
 * @example
 * Indeterminate loading ring:
 * ```html
 * <mosaik-progress-ring is-indeterminate>
 *   <mosaik-text slot="label">Loading</mosaik-text>
 * </mosaik-progress-ring>
 * ```
 *
 * @example
 * Task completion ring with custom variant:
 * ```html
 * <mosaik-progress-ring value="8" max="10" variant="success">
 *   <mosaik-text slot="label">8/10</mosaik-text>
 *   <mosaik-text slot="hint">Tasks Complete</mosaik-text>
 * </mosaik-progress-ring>
 * ```
 *
 * @example
 * Small loading spinner for buttons:
 * ```html
 * <mosaik-progress-ring
 *   is-indeterminate
 *   radius="12"
 *   thickness="2">
 * </mosaik-progress-ring>
 * ```
 *
 * @example
 * Custom styled download progress:
 * ```html
 * <mosaik-progress-ring
 *   value="75"
 *   max="100"
 *   radius="60"
 *   thickness="8"
 *   variant="info">
 *   <mosaik-text slot="label">75%</mosaik-text>
 *   <mosaik-text slot="hint">Download Progress</mosaik-text>
 * </mosaik-progress-ring>
 * ```
 *
 * @example
 * Dashboard metric with large ring:
 * ```html
 * <mosaik-progress-ring
 *   value="92"
 *   max="100"
 *   radius="80"
 *   thickness="12"
 *   variant="primary">
 *   <div slot="label" style="text-align: center;">
 *     <div style="font-size: 32px; font-weight: bold;">92%</div>
 *     <div style="font-size: 14px;">Completion Rate</div>
 *   </div>
 * </mosaik-progress-ring>
 * ```
 *
 * @public
 */
let ProgressRingElement = class ProgressRingElement extends Themeable(Variantable(Orientable(Disableable(Labelable(RangeBaseElement))))) {
    // #region Fields
    _inlineStyleController;
    _isIndeterminate;
    _thickness;
    _radius;
    // #endregion
    // #region Ctor
    constructor() {
        super();
        this._isIndeterminate = false;
        this._thickness = 4;
        this._radius = 16;
        this._inlineStyleController = new InlineStyleController(this);
    }
    // #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');
        }
    }
    /**
     * Gets or sets the `thickness` property, which defines the thickness of the progress ring.
     *
     * @remarks
     * The CSS variable `--progress-ring-thickness` is set directly from this value via an inline style
     * on the host element. All calculations regarding the thickness of the ring are handled on the CSS side
     * to ensure consistency and flexibility. When no attribute is set, the theme token value is used.
     *
     * @public
     * @attr
     */
    get thickness() {
        return this._thickness;
    }
    set thickness(value) {
        if (this._thickness !== value) {
            this._thickness = value;
            this._inlineStyleController.set('progress-ring-thickness', CssLength.toString(value));
            this.requestUpdate('thickness');
        }
    }
    /**
     * Gets or sets the `radius` property, which defines the radius of the progress ring.
     *
     * @remarks
     * The CSS variable `--progress-ring-radius` is set directly from this value via an inline style
     * on the host element. All calculations regarding the size and dimensions of the ring are handled
     * on the CSS side to ensure consistency and flexibility. When no attribute is set, the theme token value is used.
     *
     * @public
     * @attr
     */
    get radius() {
        return this._radius;
    }
    set radius(value) {
        if (this._radius !== value) {
            this._radius = value;
            this._inlineStyleController.set('progress-ring-radius', CssLength.toString(value));
            this.requestUpdate('radius');
        }
    }
    // #endregion
    // #region Methods
    /**
     * @inheritdoc
     */
    onRangeValueChanged(prev, next) {
        super.onRangeValueChanged(prev, next);
        this._inlineStyleController.set('_progress-ring-value', String(next));
    }
};
__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);
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