import { TickLabelPosition } from '../../../Types/TickLabelPosition';
import { CustomElement } from '../../Abstracts/CustomElement';
import { ITickBarElementProps } from './ITickBarElementProps';
declare const TickBarElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Orientable").IOrientableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * 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 tick - Individual tick mark container
 * @csspart label - Text label for each tick mark
 *
 * @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-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
 *
 * @dependency {TextElement} - Text component for tick labels
 *
 * @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
 */
export declare class TickBarElement extends TickBarElement_base implements ITickBarElementProps {
    private _min;
    private _max;
    private _interval;
    private _showLabels;
    private _labelAccessor;
    private _labelPosition;
    private _ticks;
    /**
     * @public
     */
    constructor();
    /**
     * Returns the `is` property.
     * The `is` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is(): string;
    /**
     * Gets or sets the `min` property.
     *
     * @public
     * @attr
     */
    get min(): number;
    set min(value: number);
    /**
     * Gets or sets the `max` property.
     *
     * @public
     * @attr
     */
    get max(): number;
    set max(value: number);
    /**
     * Gets or sets the `interval` property.
     *
     * @public
     * @attr
     */
    get interval(): number;
    set interval(value: number);
    /**
     * Gets the `ticks` property.
     *
     * @public
     * @readonly
     */
    get ticks(): Array<number>;
    private set ticks(value);
    /**
     * Gets or sets the `showLabels` property.
     *
     * @public
     * @attr
     */
    get showLabels(): boolean;
    set showLabels(value: boolean);
    /**
     * Gets or sets the `labelAccessor` property.
     *
     * @public
     */
    get labelAccessor(): (value: number, index: number) => string;
    set labelAccessor(value: (value: number, index: number) => string);
    /**
     * Gets or sets the `labelPosition` property.
     *
     * @public
     * @attr
     */
    get labelPosition(): TickLabelPosition;
    set labelPosition(value: TickLabelPosition);
    /**
     * 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: number): number;
    /**
     * @protected
     */
    protected onMinPropertyChanged(prev: number, next: number): void;
    /**
     * @protected
     */
    protected onMaxPropertyChanged(prev: number, next: number): void;
    /**
     * @protected
     */
    protected onIntervalPropertyChanged(prev: number, next: number): void;
    /**
     * Updates the tick positions.
     *
     * @private
     */
    private updateTicks;
}
/**
 * @public
 */
export declare namespace TickBarElement {
    type Props = ITickBarElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-tick-bar': TickBarElement;
    }
}
export {};
//# sourceMappingURL=TickBarElement.d.ts.map