// #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 { Disableable } from '../../../Behaviors/Disableable';
import { Orientable } from '../../../Behaviors/Orientable';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Property } from '../../../Decorators/PropertyDecorator';
import { Watch } from '../../../Decorators/WatchDecorator';
import { TickLabelPosition } from '../../../Types/TickLabelPosition';
import { CustomElement } from '../../Abstracts/CustomElement';
import { TextElement } from '../Text/TextElement';
import { tickBarElementTemplate } from './TickBarElementTemplate';
import { tickBarElementJoyStyle } from './Themes/TickBarElement.Joy';
import { tickBarElementRetroStyle } from './Themes/TickBarElement.Retro';
import { tickBarElementCosmopolitanStyle } from './Themes/TickBarElement.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
// #endregion
/**
 * Tick Bar - A visual element that represents a bar with alternating upward and downward motion, commonly used to indicate ongoing processes or loading states within an application.
 *
 * @public
 */
let TickBarElement = class TickBarElement extends Themeable(Disableable(Orientable(CustomElement))) {
    // #region Fields
    _min;
    _max;
    _interval;
    _showLabels;
    _labelAccessor;
    _labelPosition;
    _ticks;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._min = 0;
        this._max = 100;
        this._interval = 0;
        this._showLabels = false;
        this._labelAccessor = (value, index) => value.toString();
        this._labelPosition = TickLabelPosition.After;
        this._ticks = [];
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `{@link is}` property.
     * The `{@link is}` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-tick-bar';
    }
    /**
     * Gets or sets the `min` property.
     *
     * @public
     * @attr
     */
    get min() {
        return this._min;
    }
    set min(value) {
        if (this._min !== value) {
            this._min = value;
            this.requestUpdate('min');
        }
    }
    /**
     * Gets or sets the `max` property.
     *
     * @public
     * @attr
     */
    get max() {
        return this._max;
    }
    set max(value) {
        if (this._max !== value) {
            this._max = value;
            this.requestUpdate('max');
        }
    }
    /**
     * Gets or sets the `interval` property.
     *
     * @public
     * @attr
     */
    get interval() {
        return this._interval;
    }
    set interval(value) {
        if (this._interval !== value) {
            this._interval = value;
            this.requestUpdate('interval');
        }
    }
    /**
     * Gets the `ticks` property.
     *
     * @public
     * @readonly
     */
    get ticks() {
        return this._ticks;
    }
    set ticks(value) {
        if (this._ticks !== value) {
            this._ticks = value;
            this.requestUpdate('ticks');
        }
    }
    /**
     * Gets or sets the `showLabels` property.
     *
     * @public
     * @attr
     */
    get showLabels() {
        return this._showLabels;
    }
    set showLabels(value) {
        if (this._showLabels !== value) {
            this._showLabels = value;
            this.requestUpdate('showLabels');
        }
    }
    /**
     * Gets or sets the `labelAccessor` property.
     *
     * @public
     */
    get labelAccessor() {
        return this._labelAccessor;
    }
    set labelAccessor(value) {
        if (this._labelAccessor !== value) {
            this._labelAccessor = value;
            this.requestUpdate('labelAccessor');
        }
    }
    /**
     * Gets or sets the `labelPosition` property.
     *
     * @public
     * @attr
     */
    get labelPosition() {
        return this._labelPosition;
    }
    set labelPosition(value) {
        if (this._labelPosition !== value) {
            this._labelPosition = value;
            this.requestUpdate('labelPosition');
        }
    }
    // #endregion
    // #region Methods
    /**
     * Calculates the position of a tick mark as a percentage.
     *
     * @private
     * @template
     * @param tick - The tick mark value.
     * @returns The position as a percentage.
     */
    calculateTickPosition(tick) {
        const range = this.max - this.min;
        return ((tick - this.min) / range) * 100;
    }
    /**
     * @protected
     */
    onMinPropertyChanged(prev, next) {
        this.updateTicks();
    }
    /**
     * @protected
     */
    onMaxPropertyChanged(prev, next) {
        this.updateTicks();
    }
    /**
     * @protected
     */
    onIntervalPropertyChanged(prev, next) {
        this.updateTicks();
    }
    /**
     * Updates the tick positions.
     *
     * @private
     */
    updateTicks() {
        this._ticks = [];
        for (let i = this.min; i <= this.max; i += this._interval) {
            this._ticks.push(i);
        }
    }
};
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], TickBarElement.prototype, "min", null);
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], TickBarElement.prototype, "max", null);
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], TickBarElement.prototype, "interval", null);
__decorate([
    Property({ type: Array }),
    __metadata("design:type", Array),
    __metadata("design:paramtypes", [Array])
], TickBarElement.prototype, "ticks", null);
__decorate([
    Attribute({ type: Boolean, useDefault: true }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], TickBarElement.prototype, "showLabels", null);
__decorate([
    Property({ type: Function }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function])
], TickBarElement.prototype, "labelAccessor", null);
__decorate([
    Attribute({ type: TickLabelPosition }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], TickBarElement.prototype, "labelPosition", null);
__decorate([
    Watch('min'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Number, Number]),
    __metadata("design:returntype", void 0)
], TickBarElement.prototype, "onMinPropertyChanged", null);
__decorate([
    Watch('max'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Number, Number]),
    __metadata("design:returntype", void 0)
], TickBarElement.prototype, "onMaxPropertyChanged", null);
__decorate([
    Watch('interval'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Number, Number]),
    __metadata("design:returntype", void 0)
], TickBarElement.prototype, "onIntervalPropertyChanged", null);
TickBarElement = __decorate([
    Component({
        selector: 'mosaik-tick-bar',
        template: tickBarElementTemplate,
        themes: {
            joy: tickBarElementJoyStyle,
            retro: tickBarElementRetroStyle,
            cosmopolitan: tickBarElementCosmopolitanStyle
        },
        imports: [
            TextElement
        ]
    }),
    __metadata("design:paramtypes", [])
], TickBarElement);
export { TickBarElement };
//# sourceMappingURL=TickBarElement.js.map