import { MeterRange } from '../../../Types/MeterRange';
import { MeterScale } from '../../../Types/MeterScale';
import { RangeBaseElement } from '../Abstracts/RangeBaseElement';
import type { IMeterRingElementProps } from './IMeterRingElementProps';
/**
 * Represents segment information for the segmented scale mode.
 *
 * @private
 */
interface IMeterRingSegment {
    /**
     * The range type of the segment.
     */
    range: MeterRange;
    /**
     * The angle in degrees for this segment (0-360).
     */
    angle: number;
    /**
     * The start angle offset in degrees.
     */
    startAngle: number;
}
declare const MeterRingElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Orientable").IOrientableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Labelable").ILabelableProps) & typeof RangeBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * MeterRing - A circular gauge for displaying numeric measurements within defined ranges.
 *
 * @description
 * The MeterRing component provides elegant circular visualization of measurements with contextual
 * coloring based on optimum, low, and high thresholds. Supports both continuous ring fill and
 * segmented arc display modes, making it ideal for dashboards, KPIs, performance metrics, and
 * status indicators where radial presentation adds visual impact. Features smooth animations,
 * SVG-based rendering for crisp scaling, and comprehensive accessibility support.
 *
 * @name MeterRing
 * @element mosaik-meter-ring
 * @category Ranges
 *
 * @slot hint - Secondary text content area for additional meter information or status
 * @slot label - Text label content area for meter description or value display
 *
 * @csspart bar - Background ring/circle element for the meter track
 * @csspart fill - Filled arc/circle indicating current value in continuous mode
 * @csspart hint - Hint text styling container for additional information
 * @csspart label - Text label styling container for meter information
 * @csspart marker - Circle marker indicator showing current value position in segmented mode
 * @csspart root - Root SVG container for the meter ring component
 * @csspart segment - Individual arc segment representing a specific range (low/optimum/high) in segmented mode
 *
 * @cssprop {String} --meter-ring-background-color - Background color for the meter ring container
 * @cssprop {String} --meter-ring-border-color - Border color for the meter ring
 * @cssprop {String} --meter-ring-border-radius - Border radius for the container styling
 * @cssprop {String} --meter-ring-border-style - Border style for the meter ring
 * @cssprop {String} --meter-ring-border-width - Border width for the meter ring
 * @cssprop {String} --meter-ring-fill-color - Fill color for the meter indicator in continuous mode
 * @cssprop {String} --meter-ring-fill-color-high - Fill color for high range segment (above high threshold)
 * @cssprop {String} --meter-ring-fill-color-low - Fill color for low range segment (below low threshold)
 * @cssprop {String} --meter-ring-fill-color-normal - Fill color for normal range segment
 * @cssprop {String} --meter-ring-fill-color-optimum - Fill color for optimum range segment (between low and high)
 * @cssprop {String} --meter-ring-font-family - Font family for meter text labels
 * @cssprop {String} --meter-ring-font-letter-spacing - Letter spacing for meter text
 * @cssprop {String} --meter-ring-font-line-height - Line height for meter text
 * @cssprop {String} --meter-ring-font-size - Font size for meter text
 * @cssprop {String} --meter-ring-font-text-decoration - Text decoration style for meter text
 * @cssprop {String} --meter-ring-font-text-transform - Text transformation style for meter text
 * @cssprop {String} --meter-ring-font-weight - Font weight for meter text
 * @cssprop {String} --meter-ring-foreground-color - Foreground color for meter text and icons
 * @cssprop {String} --meter-ring-gap - Spacing between ring and label elements
 * @cssprop {String} --meter-ring-marker-color - Color for the marker indicator in segmented mode
 * @cssprop {String} --meter-ring-padding-bottom - Bottom padding for the meter ring container
 * @cssprop {String} --meter-ring-padding-left - Left padding for the meter ring container
 * @cssprop {String} --meter-ring-padding-right - Right padding for the meter ring container
 * @cssprop {String} --meter-ring-padding-top - Top padding for the meter ring container
 * @cssprop {String} --meter-ring-radius - Radius of the circular meter ring
 * @cssprop {String} --meter-ring-shadow - Drop shadow or elevation effect for the meter ring
 * @cssprop {String} --meter-ring-shadow-blur - The ring shadow blur CSS custom property.
 * @cssprop {String} --meter-ring-shadow-color - The ring shadow color CSS custom property.
 * @cssprop {String} --meter-ring-shadow-offset-x - The ring shadow offset x CSS custom property.
 * @cssprop {String} --meter-ring-shadow-offset-y - The ring shadow offset y CSS custom property.
 * @cssprop {String} --meter-ring-shadow-spread - The ring shadow spread CSS custom property.
 * @cssprop {String} --meter-ring-thickness - Stroke thickness of the meter ring arc
 * @cssprop {String} --meter-ring-transition-duration - Animation duration for value changes
 * @cssprop {String} --meter-ring-transition-mode - Animation easing mode for transitions
 * @cssprop {String} --meter-ring-transition-property - CSS properties to animate during transitions
 * @cssprop {String} --meter-ring-translate - Transform translation for positioning
 *
 * @fires rangeValueChanged {RangeValueChangedEvent} - Fired when the meter value changes
 *
 * @dependency mosaik-text - The Text element.
 *
 * @example
 * Basic circular meter with continuous fill:
 * ```html
 * <mosaik-meter-ring
 *   min="0"
 *   max="100"
 *   value="65"
 *   low="30"
 *   high="80"
 *   optimum="50">
 *   <span slot="label">Performance Score</span>
 * </mosaik-meter-ring>
 * ```
 *
 * @example
 * Segmented meter ring for system health monitoring:
 * ```html
 * <mosaik-meter-ring
 *   min="0"
 *   max="100"
 *   value="42"
 *   low="25"
 *   high="75"
 *   optimum="50"
 *   scale="segmented"
 *   radius="80"
 *   thickness="8"
 *   variant="warning">
 *   <span slot="label">System Health</span>
 *   <span slot="hint">42% Capacity</span>
 * </mosaik-meter-ring>
 * ```
 *
 * @example
 * Dashboard KPI gauge:
 * ```html
 * <div class="kpi-grid">
 *   <mosaik-meter-ring
 *     min="0"
 *     max="100"
 *     value="92"
 *     low="40"
 *     high="90"
 *     optimum="70"
 *     radius="60"
 *     thickness="10">
 *     <span slot="label">Conversion Rate</span>
 *     <span slot="hint">92%</span>
 *   </mosaik-meter-ring>
 * </div>
 * ```
 *
 * @example
 * Memory usage indicator:
 * ```html
 * <mosaik-meter-ring
 *   min="0"
 *   max="16"
 *   value="12"
 *   low="4"
 *   high="14"
 *   optimum="8"
 *   radius="50"
 *   thickness="6"
 *   variant="error">
 *   <span slot="label">RAM</span>
 *   <span slot="hint">12 GB / 16 GB</span>
 * </mosaik-meter-ring>
 * ```
 *
 * @public
 */
export declare class MeterRingElement extends MeterRingElement_base implements IMeterRingElementProps {
    private _thickness;
    private _radius;
    private _high;
    private _low;
    private _optimum;
    private _percent;
    private _range;
    private _scale;
    /**
     * @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 thickness property.
     *
     * @public
     * @attr
     */
    get thickness(): number;
    set thickness(value: number);
    /**
     * @public
     * @attr
     */
    get radius(): number;
    set radius(value: number);
    /**
     * Gets or sets the `high` property.
     *
     * @public
     * @attr
     */
    get high(): number;
    set high(value: number);
    /**
     * Gets or sets the `low` property.
     *
     * @public
     * @attr
     */
    get low(): number;
    set low(value: number);
    /**
     * Gets or sets the `optimum` property.
     *
     * @public
     * @attr
     */
    get optimum(): number;
    set optimum(value: number);
    /**
     * @private
     * @readonly
     */
    get percent(): number;
    /**
     * @private
     * @hidden
     * @readonly
     */
    get diameter(): number;
    /**
     * Gets or sets the `range` property.
     *
     * @public
     * @readonly
     * @attr
     */
    get range(): MeterRange;
    private set range(value);
    /**
     * Gets or sets the `scale` property.
     * Determines how the meter scale is visually represented.
     * - `continuous`: Single continuous ring with color based on current range (default).
     * - `segmented`: Visible arc segments for low, optimum, and high zones with a marker for the current value.
     *
     * @public
     * @attr
     */
    get scale(): MeterScale;
    set scale(value: MeterScale);
    /**
     * Gets the segments for the segmented scale mode.
     * Returns an array of arc segments representing low, optimum, and high zones.
     *
     * @public
     * @readonly
     */
    get segments(): Array<IMeterRingSegment>;
    /**
     * Gets the effective radius for SVG calculations.
     *
     * @public
     * @readonly
     */
    get effectiveRadius(): number;
    /**
     * Gets the position of the marker on the ring based on the current value.
     *
     * @private
     * @readonly
     */
    get markerPosition(): {
        x: number;
        y: number;
    };
    /**
     * Generates an SVG arc path for a segment.
     *
     * @param startAngle - The start angle in degrees.
     * @param sweepAngle - The sweep angle in degrees.
     * @param radius - The radius of the arc.
     * @param cx - The center x coordinate.
     * @param cy - The center y coordinate.
     * @returns The SVG path d attribute string.
     *
     * @private
     */
    getArcPath(startAngle: number, sweepAngle: number, radius: number, cx: number, cy: number): string;
    /**
     * @protected
     * @override
     */
    protected onRangeValueChanged(prev: number, next: number): void;
    protected onPropertyChanged(): void;
}
/**
* @public
*/
export declare namespace MeterRingElement {
    type Props = IMeterRingElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-meter-ring': MeterRingElement;
    }
}
export {};
//# sourceMappingURL=MeterRingElement.d.ts.map