// #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 { tickBarElementMemphisStyle } from './Themes/TickBarElement.Memphis';
import { tickBarElementCosmopolitanStyle } from './Themes/TickBarElement.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
// #endregion
/**
 * TickBar - A visual scale showing interval markers along a slider or range control.
 *
 * @description
 * The TickBar element displays evenly-spaced tick marks along a linear scale, typically used
 * alongside slider components to indicate available values or intervals. Supports optional labels
 * for each tick mark with customizable positioning and formatting. Automatically calculates tick
 * positions based on min, max, and interval values. Can be oriented horizontally or vertically
 * to match the parent control.
 *
 * @name TickBar
 * @element mosaik-tick-bar
 * @category Primitives
 *
 * @csspart label - Text label for each tick mark
 * @csspart tick - Individual tick mark container
 *
 * @cssprop {String} --tick-bar-background-color - Background color of the tick bar
 * @cssprop {String} --tick-bar-border-color - Border color of tick marks
 * @cssprop {String} --tick-bar-border-radius - Border radius for tick marks
 * @cssprop {String} --tick-bar-border-style - Border style of tick marks
 * @cssprop {String} --tick-bar-border-width - Border width of tick marks
 * @cssprop {String} --tick-bar-font-family - Font family for tick labels
 * @cssprop {String} --tick-bar-font-letter-spacing - Letter spacing for labels
 * @cssprop {String} --tick-bar-font-line-height - Line height for labels
 * @cssprop {String} --tick-bar-font-size - Font size for tick labels
 * @cssprop {String} --tick-bar-font-text-decoration - Text decoration for labels
 * @cssprop {String} --tick-bar-font-text-transform - Text transform for labels
 * @cssprop {String} --tick-bar-font-weight - Font weight for labels
 * @cssprop {String} --tick-bar-foreground-color - Color of tick marks and labels
 * @cssprop {String} --tick-bar-gap - Spacing between tick marks
 * @cssprop {String} --tick-bar-padding-bottom - Bottom padding
 * @cssprop {String} --tick-bar-padding-left - Left padding
 * @cssprop {String} --tick-bar-padding-right - Right padding
 * @cssprop {String} --tick-bar-padding-top - Top padding
 * @cssprop {String} --tick-bar-shadow - Shadow applied to tick marks
 * @cssprop {String} --tick-bar-shadow-blur - The bar shadow blur CSS custom property.
 * @cssprop {String} --tick-bar-shadow-color - The bar shadow color CSS custom property.
 * @cssprop {String} --tick-bar-shadow-offset-x - The bar shadow offset x CSS custom property.
 * @cssprop {String} --tick-bar-shadow-offset-y - The bar shadow offset y CSS custom property.
 * @cssprop {String} --tick-bar-shadow-spread - The bar shadow spread CSS custom property.
 * @cssprop {String} --tick-bar-tick-height - Height of individual tick marks
 * @cssprop {String} --tick-bar-tick-size - General size of tick marks
 * @cssprop {String} --tick-bar-tick-text-gap - Gap between tick mark and label
 * @cssprop {String} --tick-bar-tick-width - Width of individual tick marks
 * @cssprop {String} --tick-bar-transition-duration - Transition duration
 * @cssprop {String} --tick-bar-transition-mode - Transition timing function
 * @cssprop {String} --tick-bar-transition-property - Properties to transition
 * @cssprop {String} --tick-bar-translate - The bar translate CSS custom property.
 *
 * @dependency mosaik-text - The Text element.
 *
 * @example
 * Basic tick bar for a slider (0-100, every 10):
 * ```html
 * <div class="slider-container">
 *   <input type="range" min="0" max="100" step="10">
 *   <mosaik-tick-bar
 *     min="0"
 *     max="100"
 *     interval="10"
 *     show-labels>
 *   </mosaik-tick-bar>
 * </div>
 * ```
 *
 * @example
 * Custom label formatter:
 * ```html
 * <mosaik-tick-bar
 *   id="priceBar"
 *   min="0"
 *   max="500"
 *   interval="100"
 *   show-labels
 *   label-position="after">
 * </mosaik-tick-bar>
 *
 * <script>
 *   const bar = document.getElementById('priceBar');
 *   bar.labelAccessor = (value, index) => `$${value}`;
 * </script>
 * ```
 *
 * @example
 * Vertical tick bar without labels:
 * ```html
 * <mosaik-tick-bar
 *   orientation="vertical"
 *   min="0"
 *   max="10"
 *   interval="1">
 * </mosaik-tick-bar>
 * ```
 *
 * @example
 * Temperature scale with custom labels:
 * ```html
 * <mosaik-tick-bar
 *   id="tempScale"
 *   min="-20"
 *   max="40"
 *   interval="10"
 *   show-labels
 *   disabled>
 * </mosaik-tick-bar>
 *
 * <script>
 *   document.getElementById('tempScale').labelAccessor = (value) => `${value}°C`;
 * </script>
 * ```
 *
 * @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 `is` property.
     * The `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,
            memphis: tickBarElementMemphisStyle,
            cosmopolitan: tickBarElementCosmopolitanStyle
        },
        imports: [
            TextElement
        ]
    }),
    __metadata("design:paramtypes", [])
], TickBarElement);
export { TickBarElement };
//# sourceMappingURL=TickBarElement.js.map