import WUPBaseElement from "./baseElement";
import WUPPopupElement from "./popup/popupElement";
declare const tagName = "wup-circle";
declare global {
    namespace WUP.Circle {
        /** Item object related to */
        interface Item {
            /** Value of item that will be rendered; depends on @see {@link Options.min}, {@link Options.max}, {@link Options.from}, {@link Options.to} */
            value: number;
            /** Color for item. Default colors defined in css-variables like `--circle-X: #e4e4e4;` where `X` is number of item */
            color?: string;
            /** Point any text | function to show tooltip
             * @hints
             * * set `Item value {#}` to use tooltip where `{#}` is pointed value
             * * point function to use custom logic
             * * override `WUPCircleElement.prototype.renderTooltip` to use custom logic
             * * to change hover-timeouts see {@link WUPCircleElement.$defaults.hoverOpenTimeout}, {@link WUPCircleElement.$defaults.hoverCloseTimeout}_
             * * use below example to use custom logic @example
             *  items = [{
             *    value: 5,
             *    tooltip: (item, popup) => {
             *     setTimeout(()=>popup.innerHTML=...);
             *     return ""
             *  }] */
            tooltip?: string | ItemTooltipFn;
        }
        /** Callback function for rendering tooltip */
        type ItemTooltipFn = (item: ItemResult, popup: WUPPopupElement) => string;
        /** Returns in tooltip callback function with extra fields */
        interface ItemResult extends Item {
            /** Pointed {@link Item.color} OR defined from css-variable like `--circle-X: #e4e4e4;` where `X` is number of item */
            color: string;
            /** Value relative to another items where 100% is SUM or difference max-min for single item */
            percentage: number;
        }
        interface SVGItem extends SVGPathElement {
            _relatedItem: Item;
            _hasTooltip?: true;
            _center: {
                x: number;
                y: number;
            };
            _definedColor: string;
        }
        interface Options {
            /** Width of each segment; expected 1..100 (perecentage)
             * @defaultValue 10 */
            width: number;
            /** Border/corner radius of each segment; expected 0..0.5 where 0.5 == 50% of `$options.width`
             * @defaultValue 0.25 */
            corner: number;
            /** Enable background circle
             * @defaultValue true */
            back: boolean;
            /** Angle from that rendering is started -360..360 (degrees)
             * @defaultValue 0 */
            from: number;
            /** Angle to that rendering is finished -360..360 (degrees)
             * @defaultValue 360 */
            to: number;
            /** Min possible value that fits `options.from`
             * @defaultValue 0 */
            min: number;
            /** Max possible value that fits `options.to`
             * @defaultValue 100 */
            max: number;
            /** Space between segments; expected 0..20 (degrees)
             * @defaultValue 2 */
            space: number;
            /** Min segment size - to avoid rendering extra-small segments; expected 0..20 (degrees)
             * @defaultValue 10 */
            minSize: number;
            /** Timeout in ms before popup shows on hover of target;
             * @defaultValue inherited from WUPPopupElement.$defaults.hoverOpenTimeout */
            hoverOpenTimeout: number;
            /** Timeout in ms before popup closes on mouse-leave of target;
             * @defaultValue 0 */
            hoverCloseTimeout: number;
            /** Items related to circle-segments;
             * If pointed single item then label will be auto created. For other label-details @see {@link WUPCircleElement.prototype.$refLabel}  */
            items: Item[];
        }
        interface JSXProps extends WUP.Base.OnlyNames<Omit<Options, "hoverOpenTimeout" | "hoverCloseTimeout" | "items">> {
            "w-width"?: number;
            "w-corner"?: number;
            "w-back"?: boolean | "";
            "w-from"?: number;
            "w-to"?: number;
            "w-min"?: number;
            "w-max"?: number;
            "w-space"?: number;
            "w-minSize"?: number;
            /** Global reference to object with array
             * @see {@link Item}
             * @example
             * ```js
             * window.myItems = [...];
             * <wup-circle w-items="window.myItems"></wup-circle>
             * ``` */
            "w-items"?: string;
        }
    }
    interface HTMLElementTagNameMap {
        [tagName]: WUPCircleElement;
    }
}
declare module "react" {
    namespace JSX {
        interface IntrinsicElements {
            /** Arc/circle chart based on SVG
             *  @see {@link WUPCircleElement} */
            [tagName]: WUP.Base.ReactHTML<WUPCircleElement> & WUP.Circle.JSXProps;
        }
    }
}
declare module "preact/jsx-runtime" {
    namespace JSX {
        interface HTMLAttributes<RefType> {
        }
        interface IntrinsicElements {
            /** Arc/circle chart based on SVG
             *  @see {@link WUPCircleElement} */
            [tagName]: HTMLAttributes<WUPCircleElement> & WUP.Circle.JSXProps;
        }
    }
}
/** Arc/circle chart based on SVG
 * @see demo {@link https://yegorich555.github.io/web-ui-pack/circle}
 * @example
 * <wup-circle
 *   w-back="true"
 *   w-from="0"
 *   w-to="360"
 *   w-space="2"
 *   w-min="0"
 *   w-max="100"
 *   w-width="14"
 *   w-corner="0.25"
 *   w-items="window.circleItems"
 *  >
 *   <strong>Some custom label</strong>
 * </wup-circle>
 * // or JS/TS
 * const el = document.createElement("wup-circle");
 * el.$options.items = [{value:20}]; // etc.
 * document.body.appendChild(el); */
export default class WUPCircleElement extends WUPBaseElement<WUP.Circle.Options> {
    static get $styleRoot(): string;
    static get $style(): string;
    static $defaults: WUP.Circle.Options;
    static cloneDefaults<T extends Record<string, any>>(): T;
    $refSVG: SVGSymbolElement | SVGStyleElement | SVGAElement | SVGFilterElement | SVGTitleElement | SVGAnimateElement | SVGScriptElement | SVGAnimateMotionElement | SVGAnimateTransformElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGMPathElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGSetElement | SVGStopElement | SVGSVGElement | SVGSwitchElement | SVGTextElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement;
    $refItems: SVGSymbolElement | SVGStyleElement | SVGAElement | SVGFilterElement | SVGTitleElement | SVGAnimateElement | SVGScriptElement | SVGAnimateMotionElement | SVGAnimateTransformElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGMPathElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGSetElement | SVGStopElement | SVGSVGElement | SVGSwitchElement | SVGTextElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement;
    /** Reference to <strong> element
     * @tutorial Troubleshooting/rules:
     * * label auto created only when pointed items.length === 1
     * * if you need custom label then use `<wup-circle><strong>Custom label here</strong><wup-circle>`
     * * Override {@link WUPCircleElement.prototype.renderLabel} to customize behavior when single item */
    $refLabel?: HTMLElement;
    /** Creates new svg-part */
    protected make<K extends keyof SVGElementTagNameMap>(tag: string): SVGElementTagNameMap[K];
    protected gotChanges(propsChanged: Array<keyof WUP.Circle.Options> | null): void;
    /** Returns array of render-angles according to pointed arguments */
    mapItems(valueMin: number, valueMax: number, angleMin: number, angleMax: number, space: number, minSizeDeg: number, animTime: number, items: WUP.Circle.Options["items"]): Array<{
        angleFrom: number;
        angleTo: number;
        ms: number;
    }>;
    _animation?: WUP.PromiseCancel<boolean>;
    protected renderItems(skipAnim?: boolean): void;
    /** Called when need to show popup over segment */
    renderTooltip(segment: WUP.Circle.SVGItem): WUPPopupElement;
    /** Function to remove tooltipListener */
    _tooltipDisposeLst?: () => void;
    /** Apply tooltip listener; */
    protected useTooltip(isEnable: boolean): void;
    /** Called on every changeEvent */
    protected gotRender(): void;
    /** Called every time as need text-value (only if $options.items.length === 1) */
    renderLabel(label: HTMLElement, percent: number, rawValue: number): void;
    /** Returns svg-path for Arc according to options */
    protected drawArc(angleFrom: number, angleTo: number): string;
}
/** Returns svg-path for Circle according to options */
export declare function drawCircle(center: [number, number], r: number, width: number): string;
/** Returns svg-path for Arc according to options */
export declare function drawArc(center: [number, number], r: number, width: number, angleFrom: number, angleTo: number, cornerR: number): string;
export {};