// #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 { Invalidable } from '../../../Behaviors/Invalidable';
import { Orientable } from '../../../Behaviors/Orientable';
import { Themeable } from '../../../Behaviors/Themeable';
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 { sliderElementCosmopolitanStyle } from './Themes/SliderElement.Cosmopolitan';
import { sliderElementJoyStyle } from './Themes/SliderElement.Joy';
import { sliderElementMemphisStyle } from './Themes/SliderElement.Memphis';
// #endregion
/**
 * Slider - An interactive range input for selecting numeric values by dragging a handle along a track.
 *
 * @description
 * The Slider component provides precise value selection within defined ranges through intuitive
 * mouse, touch, and keyboard interaction. Supports both horizontal and vertical orientations,
 * customizable tick marks with labels, value tooltips during interaction, and comprehensive
 * accessibility. Features smooth animations, keyboard navigation (arrow keys, Home, End, Page Up/Down),
 * and flexible styling options. Essential for settings controls, filters, volume controls, and any
 * numeric input requiring visual feedback and range constraints.
 *
 * @name Slider
 * @element mosaik-slider
 * @category Ranges
 *
 * @slot prefix - Content displayed before the slider track (e.g., minimum value label or icon)
 * @slot suffix - Content displayed after the slider track (e.g., maximum value label or icon)
 *
 * @csspart root - Root container for the slider component
 * @csspart input - Native HTML range input element for slider functionality
 * @csspart tickBar - Tick mark container element for value indicators
 * @csspart tooltip - Value tooltip displayed during slider interaction
 * @csspart text - Text content within the tooltip
 *
 * @cssprop {String} --slider-background-color - Background color of the slider container
 * @cssprop {String} --slider-border-color - Border color for slider elements
 * @cssprop {String} --slider-border-radius - Border radius for rounded slider styling
 * @cssprop {String} --slider-border-style - Border style for slider elements
 * @cssprop {String} --slider-border-width - Border width for slider styling
 * @cssprop {String} --slider-font-family - Font family for slider text labels
 * @cssprop {String} --slider-font-letter-spacing - Letter spacing for slider text
 * @cssprop {String} --slider-font-line-height - Line height for slider text
 * @cssprop {String} --slider-font-size - Font size for slider labels and tooltip
 * @cssprop {String} --slider-font-text-decoration - Text decoration style for slider text
 * @cssprop {String} --slider-font-text-transform - Text transformation for slider labels
 * @cssprop {String} --slider-font-weight - Font weight for slider text
 * @cssprop {String} --slider-foreground-color - Foreground color for text and icons
 * @cssprop {String} --slider-gap - Spacing between slider elements
 * @cssprop {String} --slider-padding-top - Top padding for slider container
 * @cssprop {String} --slider-padding-right - Right padding for slider container
 * @cssprop {String} --slider-padding-bottom - Bottom padding for slider container
 * @cssprop {String} --slider-padding-left - Left padding for slider container
 * @cssprop {String} --slider-shadow - Drop shadow or elevation effect
 * @cssprop {String} --slider-thumb-background-color - Background color of the draggable thumb
 * @cssprop {String} --slider-thumb-border-color - Border color of the thumb handle
 * @cssprop {String} --slider-thumb-border-radius - Border radius for thumb styling
 * @cssprop {String} --slider-thumb-border-style - Border style for thumb element
 * @cssprop {String} --slider-thumb-border-width - Border width for thumb outline
 * @cssprop {String} --slider-thumb-foreground-color - Foreground/fill color of the thumb
 * @cssprop {String} --slider-thumb-size - Size dimensions of the draggable thumb handle
 * @cssprop {String} --slider-tick-gap - Spacing between tick marks
 * @cssprop {String} --slider-tooltip-background-color - Background color of value tooltip
 * @cssprop {String} --slider-tooltip-border-color - Border color of tooltip
 * @cssprop {String} --slider-tooltip-border-radius - Border radius for tooltip styling
 * @cssprop {String} --slider-tooltip-border-style - Border style for tooltip
 * @cssprop {String} --slider-tooltip-border-width - Border width for tooltip outline
 * @cssprop {String} --slider-tooltip-font-family - Font family for tooltip text
 * @cssprop {String} --slider-tooltip-font-letter-spacing - Letter spacing for tooltip text
 * @cssprop {String} --slider-tooltip-font-line-height - Line height for tooltip text
 * @cssprop {String} --slider-tooltip-font-size - Font size for tooltip value display
 * @cssprop {String} --slider-tooltip-font-text-decoration - Text decoration for tooltip
 * @cssprop {String} --slider-tooltip-font-text-transform - Text transformation for tooltip
 * @cssprop {String} --slider-tooltip-font-weight - Font weight for tooltip text
 * @cssprop {String} --slider-tooltip-foreground-color - Foreground color for tooltip text
 * @cssprop {String} --slider-tooltip-gap - Spacing within tooltip elements
 * @cssprop {String} --slider-tooltip-padding-top - Top padding for tooltip content
 * @cssprop {String} --slider-tooltip-padding-right - Right padding for tooltip content
 * @cssprop {String} --slider-tooltip-padding-bottom - Bottom padding for tooltip content
 * @cssprop {String} --slider-tooltip-padding-left - Left padding for tooltip content
 * @cssprop {String} --slider-tooltip-shadow - Drop shadow effect for tooltip
 * @cssprop {String} --slider-tooltip-transition-duration - Animation duration for tooltip appearance
 * @cssprop {String} --slider-tooltip-transition-mode - Animation easing for tooltip transitions
 * @cssprop {String} --slider-tooltip-transition-property - CSS properties to animate on tooltip
 * @cssprop {String} --slider-track-size - Height (horizontal) or width (vertical) of slider track
 * @cssprop {String} --slider-transition-duration - Animation duration for slider interactions
 * @cssprop {String} --slider-transition-mode - Animation easing mode for slider transitions
 * @cssprop {String} --slider-transition-property - CSS properties to animate during interactions
 *
 * @dependency {TextElement} - For rendering labels and tooltip text
 * @dependency {TickBarElement} - For displaying tick marks and value indicators
 *
 * @fires rangeValueChanged {RangeValueChangedEvent} - Fired when the slider value changes
 *
 * @example
 * Basic horizontal slider:
 * ```html
 * <mosaik-slider min="0" max="100" value="50"></mosaik-slider>
 * ```
 *
 * @example
 * Volume slider with icons:
 * ```html
 * <mosaik-slider min="0" max="100" value="75">
 *   <mosaik-icon slot="prefix" data="volume-off"></mosaik-icon>
 *   <mosaik-icon slot="suffix" data="volume-up"></mosaik-icon>
 * </mosaik-slider>
 * ```
 *
 * @example
 * Slider with tick marks and tooltip:
 * ```html
 * <mosaik-slider
 *   min="0"
 *   max="10"
 *   value="5"
 *   step="1"
 *   ticks="1"
 *   tick-placement="both"
 *   tooltip-placement="top"
 *   show-tick-labels="true">
 * </mosaik-slider>
 * ```
 *
 * @example
 * Vertical brightness slider:
 * ```html
 * <mosaik-slider
 *   min="0"
 *   max="255"
 *   value="128"
 *   orientation="vertical"
 *   variant="primary"
 *   tooltip-placement="right">
 * </mosaik-slider>
 * ```
 *
 * @example
 * Price range filter with custom labels:
 * ```html
 * <div class="price-filter">
 *   <label>Price Range</label>
 *   <mosaik-slider
 *     min="0"
 *     max="1000"
 *     value="250"
 *     step="10"
 *     tooltip-placement="top">
 *     <span slot="prefix">$0</span>
 *     <span slot="suffix">$1000</span>
 *   </mosaik-slider>
 * </div>
 * ```
 *
 * @example
 * Temperature control with custom tooltip:
 * ```html
 * <mosaik-slider
 *   id="tempSlider"
 *   min="16"
 *   max="30"
 *   value="22"
 *   step="0.5"
 *   ticks="1"
 *   tick-placement="after"
 *   tooltip-placement="top">
 * </mosaik-slider>
 * <script>
 *   document.getElementById('tempSlider').tooltipAccessor = (v) => `${v}°C`;
 * </script>
 * ```
 *
 * @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,
            memphis: sliderElementMemphisStyle,
            cosmopolitan: sliderElementCosmopolitanStyle
        },
        imports: [
            TextElement,
            TickBarElement
        ]
    }),
    __metadata("design:paramtypes", [])
], SliderElement);
export { SliderElement };
//# sourceMappingURL=SliderElement.js.map