// #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 { on } from '@breadstone/mosaik-elements';
import { Appearanceable } from '../../../Behaviors/Appearanceable';
import { Disableable } from '../../../Behaviors/Disableable';
import { Focusable } from '../../../Behaviors/Focusable';
import { Orientable } from '../../../Behaviors/Orientable';
import { Variantable } from '../../../Behaviors/Variantable';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Property } from '../../../Decorators/PropertyDecorator';
import { AutoToolTipPlacement } from '../../../Types/AutoToolTipPlacement';
import { TickPlacement } from '../../../Types/TickPlacement';
import { TextElement } from '../../Primitives/Text/TextElement';
import { TickBarElement } from '../../Primitives/TickBar/TickBarElement';
import { RangeBaseElement } from '../Abstracts/RangeBaseElement';
import { sliderElementTemplate } from './SliderElementTemplate';
import { sliderElementJoyStyle } from './Themes/SliderElement.Joy';
import { sliderElementRetroStyle } from './Themes/SliderElement.Retro';
import { sliderElementCosmopolitanStyle } from './Themes/SliderElement.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
import { Invalidable } from '../../../Behaviors/Invalidable';
// #endregion
/**
 * Slider - A user interface component that allows users to select a value from a continuous range.
 *
 * @element mosaik-slider
 *
 * @description
 * The Slider component is a graphical user interface element that enables users to choose a value from a continuous
 * range by dragging a handle along a track. Sliders are commonly used to adjust settings like volume, brightness,
 * or any numeric value within a defined range.
 *
 * @category Ranges
 *
 * @slot prefix - The prefix slot.
 * @slot suffix - The suffix slot.
 *
 * @public
 */
let SliderElement = class SliderElement extends Themeable(Orientable(Disableable(Variantable(Appearanceable(Focusable(Invalidable(RangeBaseElement))))))) {
    // #region Fields
    _inputElement;
    _step;
    _ticks;
    _tickPlacement;
    _tooltipPlacement;
    _tooltipAccessor;
    _track;
    _showTickLabels;
    _tickLabelAccessor;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._step = 0;
        this._ticks = 0;
        this._tickPlacement = TickPlacement.None;
        this._tooltipPlacement = AutoToolTipPlacement.None;
        this._tooltipAccessor = (v) => v.toString();
        this._track = false;
        this._showTickLabels = false;
        this._tickLabelAccessor = (v) => v.toString();
    }
    // #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-slider';
    }
    /**
     * Gets or sets the `step` property.
     *
     * @public
     * @attr
     */
    get step() {
        return this._step;
    }
    set step(value) {
        if (this._step !== value) {
            this._step = value;
            this.requestUpdate('step');
        }
    }
    /**
     * Gets or sets the `ticks` property.
     *
     * @public
     * @attr
     */
    get ticks() {
        return this._ticks;
    }
    set ticks(value) {
        if (this._ticks !== value) {
            this._ticks = value;
            this.requestUpdate('ticks');
        }
    }
    /**
     * Gets or sets the `tickPlacement` property.
     *
     * @public
     * @attr
     */
    get tickPlacement() {
        return this._tickPlacement;
    }
    set tickPlacement(value) {
        if (this._tickPlacement !== value) {
            this._tickPlacement = value;
            this.requestUpdate('tickPlacement');
        }
    }
    /**
     * Gets or sets the `tooltipPlacement` property.
     *
     * @public
     * @attr
     */
    get tooltipPlacement() {
        return this._tooltipPlacement;
    }
    set tooltipPlacement(value) {
        if (this._tooltipPlacement !== value) {
            this._tooltipPlacement = value;
            this.requestUpdate('tooltipPlacement');
        }
    }
    /**
     * Gets or sets the `tooltipAccessor` property.
     *
     * @public
     */
    get tooltipAccessor() {
        return this._tooltipAccessor;
    }
    set tooltipAccessor(value) {
        if (this._tooltipAccessor !== value) {
            this._tooltipAccessor = value;
            this.requestUpdate('tooltipAccessor');
        }
    }
    /**
     * Gets or sets the `track` property.
     *
     * @public
     * @attr
     */
    get track() { return this._track; }
    set track(value) {
        if (this._track !== value) {
            this._track = value;
            this.requestUpdate('track');
        }
    }
    /**
     * Gets or sets the `showTickLabels` property.
     *
     * @public
     * @attr
     */
    get showTickLabels() {
        return this._showTickLabels;
    }
    set showTickLabels(value) {
        if (this._showTickLabels !== value) {
            this._showTickLabels = value;
            this.requestUpdate('showTickLabels');
        }
    }
    /**
     * Gets or sets the `tickLabelAccessor` property.
     *
     * @public
     */
    get tickLabelAccessor() {
        return this._tickLabelAccessor;
    }
    set tickLabelAccessor(value) {
        if (this._tickLabelAccessor !== value) {
            this._tickLabelAccessor = value;
            this.requestUpdate('tickLabelAccessor');
        }
    }
    // #endregion
    // #region Methods
    /**
     * Decrements the value by the value given by the `Step` property.
     * If the optional parameter is used, it will decrement the step value multiplied by the parameter's value.
     *
     * @public
     * @param value - Value to decrement the value by.
     */
    stepDown(value) {
        this.getTemplatePart('input').stepDown(value);
    }
    /**
     * Increments the value by the value given by the `Step` property.
     * If the optional parameter is used, will increment the step value by that value.
     *
     * @public
     * @param value - Value to increment the value by.
     */
    stepUp(value) {
        this.getTemplatePart('input').stepUp(value);
    }
    /**
     * Checks the validity of the element and returns `true` if it is valid; otherwise, `false`.
     *
     * @public
     * @override
     */
    checkValidity() {
        return this.shadowRoot
            ? this._inputElement.checkValidity()
            : true;
    }
    /**
     * @protected
     */
    onApplyTemplate() {
        super.onApplyTemplate();
        this._inputElement = this.getTemplatePart('input');
        on(this._inputElement, 'input', (e) => {
            this.value = Number.parseInt(e.target.value);
        });
    }
};
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], SliderElement.prototype, "step", null);
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], SliderElement.prototype, "ticks", null);
__decorate([
    Attribute({ type: TickPlacement }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], SliderElement.prototype, "tickPlacement", null);
__decorate([
    Attribute({ type: AutoToolTipPlacement }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], SliderElement.prototype, "tooltipPlacement", null);
__decorate([
    Property({ type: Function }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function])
], SliderElement.prototype, "tooltipAccessor", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], SliderElement.prototype, "track", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], SliderElement.prototype, "showTickLabels", null);
__decorate([
    Property({ type: Function }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function])
], SliderElement.prototype, "tickLabelAccessor", null);
SliderElement = __decorate([
    Component({
        selector: 'mosaik-slider',
        template: sliderElementTemplate,
        themes: {
            joy: sliderElementJoyStyle,
            retro: sliderElementRetroStyle,
            cosmopolitan: sliderElementCosmopolitanStyle
        },
        imports: [
            TextElement,
            TickBarElement
        ]
    }),
    __metadata("design:paramtypes", [])
], SliderElement);
export { SliderElement };
//# sourceMappingURL=SliderElement.js.map