/**
 * Represents aspect ratio.
 */
interface IAspectRatio {
    /**
     * Horizontal dimension.
     */
    horizontal: number;
    /**
     * Vertical dimension.
     */
    vertical: number;
}
/**
 * Implements {@linkcode IAspectRatio} and provides helper methods.
 */
declare class AspectRatio implements IAspectRatio {
    /**
     * Horizontal dimension.
     */
    horizontal: number;
    /**
     * Vertical dimension.
     */
    vertical: number;
    /**
     * Returns aspect ratio.
     *
     * @readonly
     */
    get ratio(): number;
    /**
     * Initialize aspect ratio object.
     * @param horizontal - horizontal dimension.
     * @param vertical - vertical dimension.
     */
    constructor(horizontal: number, vertical: number);
    /**
     * Calculates vertical length based on horizontal length provided.
     * @param horizontalLength - horizontal length.
     * @returns - vertical length.
     */
    getVerticalLength(horizontalLength: number): number;
    /**
     * Calculates horizontal length based on vertical length provided.
     * @param verticalLength - vertical length.
     * @returns - horizontal length.
     */
    getHorizontalLength(verticalLength: number): number;
}

/**
 * Represents crop rectangle.
 */
interface IRect {
    x: number;
    y: number;
    width: number;
    height: number;
}

/**
 * Represents state of the CropArea.
 * Used to preserve and restore state between sessions.
 */
interface CropAreaState {
    /**
     * Editing canvas width.
     */
    width: number;
    /**
     * Editing canvas height.
     */
    height: number;
    /**
     * Rotation angle of the original image.
     */
    rotationAngle: number;
    /**
     * Is original image flipped horizontally?
     */
    flippedHorizontally: boolean;
    /**
     * Is original image flipped vertically?
     */
    flippedVertically: boolean;
    /**
     * Crop rectangle.
     */
    cropRect: IRect;
}

/**
 * Describes customizable UI settings.
 */
interface IStyleSettings {
    /**
     * Background color for the editor canvas when in popup mode.
     */
    canvasBackgroundColor?: string;
    /**
     * Background color of the toolbar block.
     */
    toolbarBackgroundColor?: string;
    /**
     * Background color of toolbar buttons on hover.
     */
    toolbarBackgroundHoverColor?: string;
    /**
     * Background color of active (pressed) toolbar buttons.
     */
    toolbarBackgroundActiveColor?: string;
    /**
     * Foreground color of toolbar icons.
     */
    toolbarColor?: string;
    /**
     * Color of the crop shade (outside area).
     */
    cropShadeColor?: string;
    /**
     * Line color of the crop frame.
     */
    cropFrameColor?: string;
    /**
     * Outline color of the crop frame grips.
     */
    gripColor?: string;
    /**
     * Fill color of the crop frame grips.
     */
    gripFillColor?: string;
    /**
     * Base height of the toolbar block in pixels.
     */
    toolbarHeight?: number;
    /**
     * CSS class name defining the visual style of the toolbar block.
     *
     * _Note_: should only be used for colors and similar styles. Changing layout-related styles here can break the UI.
     */
    toolbarStyleColorsClassName?: string;
    /**
     * CSS class name defining the visual style of the toolbar overflow block.
     * Displayed when markers don't fit in the main toolbar block.
     *
     * _Note_: should only be used for colors and similar styles. Changing layout-related styles here can break the UI.
     */
    toolbarOverflowBlockStyleColorsClassName?: string;
    /**
     * CSS class name defining the visual style of the toolbar buttons.
     *
     * _Note_: should only be used for colors and similar styles. Changing layout-related styles here can break the UI.
     */
    toolbarButtonStyleColorsClassName?: string;
    /**
     * CSS class name defining the visual style of the active (selected) toolbar button.
     *
     * _Note_: should only be used for colors and similar styles. Changing layout-related styles here can break the UI.
     */
    toolbarActiveButtonStyleColorsClassName?: string;
    /**
     * CSS class name defining the visual style of the dropdown portion of a dropdown toolbar button.
     *
     * _Note_: should only be used for colors and similar styles. Changing layout-related styles here can break the UI.
     */
    toolbarDropdownStyleColorsClassName?: string;
    /**
     * CSS class name defining the visual style of the straightening control.
     */
    toolbarStraightenerColorsClassName?: string;
    /**
     * CSS class name defining the visual style of the OK button.
     */
    toolbarOkButtonStyleColorsClassName?: string;
    /**
     * CSS class name defining the visual style of the close button.
     */
    toolbarCloseButtonStyleColorsClassName?: string;
    /**
     * If set to true, the top toolbar is hidden.
     */
    hideTopToolbar?: boolean;
    /**
     * If set to true, the bottom toolbar is hidden.
     */
    hideBottomToolbar?: boolean;
    /**
     * zIndex for the CROPRO UI.
     *
     * Defaults to 5 in inline mode and 1000 in popup mode.
     *
     * @since 1.2.0
     */
    zIndex?: string;
}

/**
 * Simple utility CSS-in-JS implementation.
 */
declare class StyleManager {
    private _classNamePrefixBase;
    /**
     * Static CSS class name used for the wrapper element.
     */
    get classNamePrefixBase(): string;
    private _classNamePrefix;
    /**
     * Prefix used for all internally created CSS classes.
     */
    get classNamePrefix(): string;
    private classes;
    private rules;
    private styleSheet?;
    /**
     * For cases when you need to add the stylesheet to anything
     * other than document.head (default), set this property
     * before calling `show()`.
     */
    styleSheetRoot: HTMLElement;
    /**
     * Returns default UI styles.
     */
    get defaultSettings(): IStyleSettings;
    /**
     * Holds current UI styles.
     */
    settings: IStyleSettings;
    /**
     * Returns global fade-in animation class name.
     */
    get fadeInAnimationClassName(): string;
    /**
     * Returns global fade-out animation class name.
     */
    get fadeOutAnimationClassName(): string;
    /**
     * Initializes a new style manager.
     * @param instanceNo - instance id.
     */
    constructor(instanceNo: number);
    /**
     * Adds a CSS class declaration.
     * @param styleClass - class to add.
     */
    addClass(styleClass: StyleClass): StyleClass;
    /**
     * Add arbitrary CSS rule
     * @param styleRule - CSS rule to add.
     */
    addRule(styleRule: StyleRule): void;
    private addStyleSheet;
    removeStyleSheet(): void;
}
/**
 * Represents an arbitrary CSS rule.
 */
declare class StyleRule {
    /**
     * CSS selector.
     */
    selector: string;
    /**
     * Style declaration for the rule.
     */
    style: string;
    /**
     * Creates an arbitrary CSS rule using the selector and style rules.
     * @param selector - CSS selector
     * @param style - styles to apply
     */
    constructor(selector: string, style: string);
}
/**
 * Represents a CSS class.
 */
declare class StyleClass {
    /**
     * CSS style rules for the class.
     */
    style: string;
    /**
     * Class name without the global prefix.
     */
    localName: string;
    /**
     * Fully qualified CSS class name.
     */
    name: string;
    /**
     * Creates a CSS class declaration based on supplied (local) name and style rules.
     * @param name - local CSS class name (will be prefixed with the marker.js prefix).
     * @param style - style declarations.
     */
    constructor(name: string, style: string);
}

/**
 * Event handler type for {@linkcode CropArea} `render` event.
 */
declare type RenderEventHandler = (dataURL: string, state?: CropAreaState) => void;
/**
 * Event handler type for {@linkcode CropArea} `close` event.
 */
declare type CloseEventHandler = () => void;
/**
 * Event handler type for {@linkcode CropArea} `statechange` event.
 *
 * @since 1.6.0
 */
declare type StateChangeEventHandler = (state: CropAreaState) => void;
/**
 * CROPRO display mode - `inline` or `popup` (full screen).
 */
declare type DisplayMode = 'inline' | 'popup';
/**
 * Main CROPRO class.
 *
 * Simple usage example:
 *
 * ```javascript
 * let ca = new CropArea(target);
 * ca.addRenderEventListener((dataUrl, state) => {
 *     const res = document.createElement('img');
 *     res.src = dataUrl;
 *     document.body.appendChild(res);
 * });
 * this.ca.show();
 * ```
 */
declare class CropArea {
    private target;
    private targetObserver;
    private imageWidth;
    private imageHeight;
    private left;
    private top;
    private windowHeight;
    private cropImage;
    private cropImageHolder;
    private defs;
    private coverDiv;
    private uiDiv;
    private contentDiv;
    private processingUi;
    private editorCanvas;
    private editingTargetContainer;
    private editingTargetRotationContainer;
    private editingTargetRotationScaleContainer;
    private editingTarget;
    private straightener;
    private logoUI;
    private static instanceCounter;
    private _instanceNo;
    get instanceNo(): number;
    /**
     * Manage style related settings via the `styles` property.
     */
    styles: StyleManager;
    private cropLayerContainer;
    private cropLayer;
    private cropRect;
    private _zoomToCropEnabled;
    /**
     * Get whether zoom-to-crop feature is enabled.
     * Set to true to enable zooming to crop area all the time.
     * When set to false the whole image is shown and cropping is done within it.
     */
    get zoomToCropEnabled(): boolean;
    set zoomToCropEnabled(value: boolean);
    private zoomFactor;
    private flippedHorizontally;
    private flippedVertically;
    private _isGridVisible;
    /**
     * Get whether alignment grid is visible.
     * When set to true alignment grid is shown, hidden otherwise.
     */
    get isGridVisible(): boolean;
    set isGridVisible(value: boolean);
    private _gridLines;
    /**
     * Number of grid lines in the alignment grid.
     */
    get gridLines(): number;
    set gridLines(value: number);
    private _rotationAngle;
    /**
     * Rotation angle of the original image with the crop area.
     */
    get rotationAngle(): number;
    set rotationAngle(value: number);
    private scaleFactor;
    private toolbarStyleClass;
    private toolbarStyleColorsClass;
    private toolbarBlockStyleClass;
    private toolbarButtonStyleClass;
    private toolbarButtonStyleColorsClass;
    private toolbarActiveButtonStyleColorsClass;
    private toolbarDropdownStyleClass;
    private toolbarDropdownStyleColorsClass;
    private toolbarStraightenerBlockStyleClass;
    private toolbarStraightenerStyleClass;
    private toolbarStraightenerStyleColorsClass;
    /**
     * `targetRoot` is used to set an alternative positioning root for the UI.
     *
     * This is useful in cases when your target image is positioned, say, inside a div with `position: relative;`
     *
     * ```typescript
     * // set targetRoot to a specific div instead of document.body
     * cropArea.targetRoot = document.getElementById('myRootElement');
     * ```
     *
     * @default document.body
     */
    targetRoot: HTMLElement;
    private bodyOverflowState;
    private scrollYState;
    private scrollXState;
    private renderEventListeners;
    private closeEventListeners;
    private stateChangeEventListeners;
    private _isOpen;
    private topToolbar;
    private bottomToolbar;
    private CANVAS_MARGIN;
    private get paddedImageWidth();
    private get paddedImageHeight();
    /**
     * Returns `true` when CropArea is open and `false` otherwise.
     *
     * @readonly
     */
    get isOpen(): boolean;
    /**
     * When set to true resulting image will be rendered at the natural (original) resolution
     * of the target image. Otherwise (default), screen dimensions of the image are used.
     *
     * @default false (use screen dimensions)
     */
    renderAtNaturalSize: boolean;
    /**
     * Type of image for the rendering result. Eg. `image/png` (default) or `image/jpeg`.
     *
     * @default `image/png`
     */
    renderImageType: string;
    /**
     * When rendering engine/format supports it (jpeg, for example),
     * sets the rendering quality for the resulting image.
     *
     * In case of `image/jpeg` the value should be between 0 (worst quality) and 1 (best quality).
     */
    renderImageQuality?: number;
    /**
     * When set and {@linkcode renderAtNaturalSize} is `false` sets the width of the rendered image.
     *
     * Both `renderWidth` and `renderHeight` have to be set for this to take effect.
     */
    renderWidth?: number;
    /**
     * When set and {@linkcode renderAtNaturalSize} is `false` sets the height of the rendered image.
     *
     * Both `renderWidth` and `renderHeight` have to be set for this to take effect.
     */
    renderHeight?: number;
    /**
     * When set the total area of the rendered image (width * height) will be limited to the specified value.
     * The rendered image width and height will be scaled down proportionally to fit the specified size.
     *
     * @remarks
     * Some browsers (iOS Safari, for example) have a limit on the size of the image
     * that can be rendered. When this limit is exceeded the rendering will fail.
     * At the time this setting was added this limit was 16777216 pixels (4096 x 4096).
     *
     * You should set this setting if you expect users to edit large images on iOS devices.
     *
     * @since 1.5.0
     */
    renderMaxSize?: number;
    /**
     * Display mode.
     * `inline` for cropping right on top of the original image,
     * `popup` for a full-screen experience.
     */
    displayMode: DisplayMode;
    /**
     * Margin in pixels between CROPRO popup UI and window borders.
     */
    popupMargin: number;
    /**
     * Base height of the toolbar block in pixels.
     */
    toolbarHeight: number;
    /**
     * Aspect ratio options.
     * Displayed in the aspect ratio dropdown.
     * When only one option is specified the aspect ratio button is hidden.
     */
    aspectRatios: IAspectRatio[];
    private _aspectRatio;
    /**
     * Currently active aspect ratio.
     */
    set aspectRatio(value: IAspectRatio);
    get aspectRatio(): IAspectRatio;
    /**
     * If set, the UI will be offset by the specified value.
     *
     * Use this if you want to control the position inside a
     * `position: relative` parent (for example), as auto-calculation
     * will calculate available space from the relative
     * container and not the whole page.
     *
     * Common usage when used with a relatively positioned parent would be:
     *
     * ```typescript
     * cropArea.targetRoot = document.getElementById('relativeParent');
     * cropArea.uiOffsetTop = -10;
     * ```
     *
     * @since 1.3.0
     */
    uiOffsetTop?: number;
    /**
     * If set, the UI will be offset by the specified number of pixels on the left.
     *
     * @since 1.3.0
     */
    uiOffsetLeft?: number;
    private aspectRatioButton;
    /**
     * Creates a new CropArea for the specified target image.
     *
     * ```typescript
     * // create an instance of CropArea and pass the target image reference as a parameter
     * let cropArea = new cropro.CropArea(document.getElementById('myimg'));
     * ```
     *
     * @param target image object to crop.
     */
    constructor(target: HTMLImageElement);
    private open;
    /**
     * Initializes the CropArea and opens the UI.
     */
    show(): void;
    /**
     * Closes the CropArea UI.
     */
    close(isRendering?: boolean): void;
    /**
     * Add a `render` event listener which is called when user clicks on the OK/save button
     * in the toolbar.
     *
     * ```typescript
     * // register an event listener for when user clicks OK/save in the UI
     * cropArea.addRenderEventListener(dataUrl => {
     *   // we are setting the cropping result to replace our original image on the page
     *   // but you can set a different image or upload it to your server
     *   document.getElementById('myimg').src = dataUrl;
     * });
     * ```
     *
     * This is where you place your code to save a resulting image and/or CropAreaState.
     *
     * @param listener - a method handling rendering results
     *
     * @see {@link CropAreaState}
     */
    addRenderEventListener(listener: RenderEventHandler): void;
    /**
     * Remove a `render` event handler.
     *
     * @param listener - previously registered `render` event handler.
     */
    removeRenderEventListener(listener: RenderEventHandler): void;
    /**
     * Add a `close` event handler to perform actions in your code after the user
     * clicks on the close button (without saving).
     *
     * @param listener - close event listener
     */
    addCloseEventListener(listener: CloseEventHandler): void;
    /**
     * Remove a `close` event handler.
     *
     * @param listener - previously registered `close` event handler.
     */
    removeCloseEventListener(listener: CloseEventHandler): void;
    /**
     * Add a `statechange` event handler to perform actions in your code after
     * the state of the CropArea changes.
     *
     * @param listener - state change event listener
     *
     * @since 1.6.0
     */
    addStateChangeEventListener(listener: StateChangeEventHandler): void;
    /**
     * Remove a `statechange` event handler.
     *
     * @param listener - previously registered `statechange` event handler.
     *
     * @since 1.6.0
     */
    removeStateChangeEventListener(listener: StateChangeEventHandler): void;
    private setupResizeObserver;
    private onPopupResize;
    private setWindowHeight;
    private setEditingTargetSize;
    private resize;
    private setEditingTarget;
    private setTopLeft;
    private initCropCanvas;
    private positionCropImage;
    private initCropLayer;
    private zoomToCrop;
    private unzoomFromCrop;
    private cropRectChanged;
    private attachEvents;
    private overrideOverflow;
    private restoreOverflow;
    private showUI;
    private addToolbars;
    private addTopToolbar;
    private addBottomToolbar;
    private ratioButtonClicked;
    private applyAspectRatio;
    private setCropLayerAspectRatio;
    private closeUI;
    /**
     * Returns the complete state for the CropArea that can be preserved and used
     * to continue cropping next time.
     */
    getState(): CropAreaState;
    /**
     * Restores CropArea state to continue previous cropping session.
     *
     * **IMPORTANT**: call `restoreState()` __after__ you've opened the CropArea with {@linkcode show}.
     *
     * ```typescript
     * this.cropArea1.show();
     * if (this.currentState) {
     *   this.cropArea1.restoreState(this.currentState);
     * }
     * ```
     *
     * @param state - previously saved state object.
     */
    restoreState(state: CropAreaState): void;
    /**
     * Renders previously saved state without user intervention.
     *
     * The rendered image is returned to the `render` event handlers (as in the regular interactive process).
     * Rendering options set on `CropArea` are respected.
     *
     * @param state state to render
     * @since 1.4.0
     */
    renderState(state: CropAreaState): void;
    private clientToLocalCoordinates;
    private onWindowResize;
    private positionUI;
    private rotateLeftButtonClicked;
    private rotateRightButtonClicked;
    private rotateTo;
    private rotateBy;
    private applyRotation;
    private flipHorizontallyButtonClicked;
    private flipVerticallyButtonClicked;
    private applyFlip;
    /**
     * Initiates rendering of the cropped image.
     * Add an event listener for the `render` event via {@linkcode addRenderEventListener}
     * to get the rendering result.
     */
    startRenderAndClose(): Promise<void>;
    private render;
    private previousState;
    private onStateChanged;
    private addStyles;
}

/**
 * Manages commercial licenses.
 */
declare class Activator {
    private static key;
    /**
     * Add a license key
     * @param key license key sent to you after purchase.
     */
    static addKey(key: string): void;
    /**
     * Returns true if the copy of CROPRO is commercially licensed.
     */
    static get isLicensed(): boolean;
}

export { Activator, AspectRatio, CloseEventHandler, CropArea, CropAreaState, DisplayMode, IAspectRatio, IRect, IStyleSettings, RenderEventHandler, StyleManager };