/** Core */
import { CoreComponent } from "cmf.core/src/core";
/** Angular2 */
import * as ng from "@angular/core";
import { ElementQuerySize } from "../../directives/elementQuery/elementQuery";
import { ValidatorModel } from "../../directives/validator/validator";
/**
 * The SingleColumnView Reisze Event
 */
export interface SingleColumnViewResizeEvent {
    leftPanelWidth: ElementQuerySize;
    rightPanelWidth: ElementQuerySize;
    totalWidth: number;
    displayMode: SingleColumnViewDisplayMode;
}
/**
 * The SingleColumnView Validation Event
 */
export interface SingleColumnViewValidationEvent {
    row: any;
    isValid: boolean;
}
/**
 * Row Metadata
 */
interface SingleColumnViewRow {
    value: any;
    isValid?: boolean;
}
/**
 * Goup Metadata
 */
interface SingleColumnViewGoup {
    key: string;
    rows: SingleColumnViewRow[];
}
/**
 * The SingleColumnView display modes.
 */
export declare enum SingleColumnViewDisplayMode {
    SinglePanel = 0,
    DoublePanel = 1
}
/**
 * The row scroll options.
 */
export interface SingleColumnViewScrollOptions {
    behavior?: "auto" | "smooth";
    block?: "start" | "center" | "end" | "nearest";
    mode: "immediate" | "afterRender";
}
/**
 * @whatItDoes
 *
 * This is the SingleColumnView component. Allows the display of a list of objects and their details on two Panels.
 *
 * @howToUse
 *
 * This component is used with the inputs and outputs mentioned below.
 *
 *  ### Inputs
 * `any[]` : **data** - The data to be listed.
 * `boolean` : **selectable** - Allows the selection of rows by click events.
 * `string` : **groupBy** - Indicates the property of each data item from which a groupBy will be performed.
 * `any` : **selectedRow** - Indicates the row object that is selected.
 *
 * ### Outputs
 * `SingleColumnViewResizeEvent` : **resize** - On Panels resize event.
 * `any` : **selectedRowChange** - On the selected row change.
 * `SingleColumnViewValidationEvent` : **validate** - On row validation performed.
 *
 * ### Example
 * To use the component, assume this HTML Template as an example:
 *
 * ```HTML
 * <cmf-core-controls-single-column-view
 *  [data]="data"
 *  groupBy="group"
 *  [(selectedRow)]="selectedRow"
 *  (resize)="onResize($event)">
 * </cmf-core-controls-single-column-view>
 * ```
 *
 * @description
 *
 * SingleColumnView Component
 *
 * ### Dependencies
 *
 * #### Components
 * *  _This component does not depend on any component_
 *
 * #### Services
 * * _This component does not depend on any service_
 *
 * #### Directives
 * * ElementQueryModule : `cmf.core.controls`
 *
 */
export declare class SingleColumnView extends CoreComponent implements ng.OnDestroy, ng.AfterViewInit, ng.AfterContentInit, ng.OnChanges {
    private _validatorModel;
    private _element;
    private _viewCcontainer;
    private _ngZone;
    /**
     * Indicates the distance to the left the gutter was moved.
     */
    gutterDistMoved: number;
    /**
     * Indicates if he user is in a mobile device.
     */
    isMobile: boolean;
    /**
     * Indicates if the leaf should be visible.
     */
    isEditingLeaf: boolean;
    /**
     * Indicates if the ColumnView is in mobile or desktop mode.
     */
    largeMode: boolean;
    /**
     * The aggregate property of the data input.
     */
    groupBy: string;
    /**
     * The groups retrieve from the data input.
     */
    groups: SingleColumnViewGoup[];
    /**
     * The data input used to feel the rows and groups.
     */
    data: any[];
    /**
     * When the ColumnView is resized.
     */
    resize: ng.EventEmitter<SingleColumnViewResizeEvent>;
    /**
     * When the selected row has changed.
     */
    selectedRowChange: ng.EventEmitter<any>;
    /**
     * When the selected row has changed.
     */
    validate: ng.EventEmitter<SingleColumnViewValidationEvent>;
    /**
     * The index of the selected row in the selected group
     */
    selectedRowIndex: number;
    /**
     * The index of the selected group
     */
    selectedGroupIndex: number;
    /**
     * Allows rows to be selected.
     */
    selectable: boolean;
    /**
     * Indicates if ngAfterViewInit has run.
     */
    viewInitialized: boolean;
    /**
     * Groups Header TemplateRef
     */
    groupTemplate: ng.TemplateRef<any>;
    /**
     * Rows TemplateRef
     */
    rowTemplate: ng.TemplateRef<any>;
    /**
     * [Mobile] Leaf Heade TemplateRef (Right Panel Navigation Header)
     */
    leafHeaderTemplate: ng.TemplateRef<any>;
    /**
     * Leaf TemplateRef (Right Panel Content)
     */
    leafTemplate: ng.TemplateRef<any>;
    /**
     * Global Header TemplateRef
     */
    headerTemplate: ng.TemplateRef<any>;
    /**
     * Stores the scroll information that will be performed when some condition is meet
     */
    private _scrollToWhenReady;
    /**
     * Element Query Resizing event Subscription
     */
    private _sizeChangeSubscription;
    /**
     * Stores the Panels Relative Sizes to be emmited.
     */
    private _currRelativeSizes;
    /**
     * Window Element
     */
    private _viewWindow;
    /**
     * Groups ElementRef List to listen for render events.
     */
    private _groupDivs;
    /**
     * Header TemplateRef for the Right Panel
     */
    private _headerLeftElement;
    /**
     * Header TemplateRef for the Left Panel
     */
    private _headerRightElement;
    /**
     * Left Panel ElementRef
     */
    private _contentPanelLeft;
    /**
     * Right Panel ElementRef
     */
    private _contentPanelRight;
    /**
     * ElementQuery directive.
     */
    private _elementQuery;
    /**
     * Method that will emit the panels sizes after resizing to the parent component.
     */
    private updateRelativeSizes;
    /**
     * Method that will handle the gutter drag event to resize the columnview pannels.
     */
    private onGutterMoveEvent;
    /**
     * constructor
     * @param _element ElementRef
     * @param _viewCcontainer ViewContainerRef
     * @param _ngZone NgZone
     */
    constructor(_validatorModel: ValidatorModel, _element: ng.ElementRef, _viewCcontainer: ng.ViewContainerRef, _ngZone: ng.NgZone);
    /**
     * Finds the row HTMLElement that corresponds to the row object set as the argument.
     * @param row Row object to be matched
     */
    private findRowHTMLElement;
    /**
     * Scrolls to a given element if he is not in the viewPort.
     * @param element element to scroll into.
     * @param scrollOpts scroll options.
     */
    private scrollIfNeeded;
    /**
     * Subscribs a set of events on an element or window.
     * @param target the targeted element.
     * @param events the list of events to be subscribed.
     * @param handler the callback function that will handle the events.
     */
    private addEventListeners;
    /**
     * Removes a set of events subscribed to an element or window.
     * @param target the targeted element.
     * @param events the list of events to remove the subscription.
     * @param handler the callback function that was used to handle the events.
     */
    private removeEventListeners;
    /**
     * Resizes the panels based on a given size for the left Panel
     * @param leftPanelWidth the pretended width for the left panel.
     */
    private resizePanels;
    /**
     * When the mouse button is released, we stop the panels rezing, remove the subscribed events
     * and we revert the classes applyed before.
     */
    private onGutterMouseUp;
    /**
     * Updates the gutter position. The gutter position determines the size of each panel.
     */
    private updateGutterOnResize;
    /**
     * When we resize the window, we need to update the view to single panel (Mobile) or double panel (descktop)
     * Also the gutter position need to be adjusted.
     * @param availableWidth available width of the columnview
     */
    private resizeColumnView;
    /**
     * Element Query callback
     * @param values OnSizeChangeArgs
     */
    private onColumnViewResize;
    /**
     * On Row click select the corresponding row.
     * @param groupIndex index of the group
     * @param rowIndex index of the row inside the group
     */
    onRowClick(groupIndex: number, rowIndex: number): void;
    /**
     * Scrolls To the HTMLElement of a given row object if that element is outside of the viewport.
     * @param row Row object to be scrolled into.
     * @param scrollOpts Scroll Options.
     */
    scrollToRowIfNeeded(rowValue: any, scrollOpts?: SingleColumnViewScrollOptions): void;
    /**
     * Scrolls to an element inside a row acording to some scroll options.
     * @param element the element that we want to scroll into.
     * @param scrollOpts the scroll options.
     */
    scrollTo(element: HTMLElement, scrollOpts: SingleColumnViewScrollOptions): void;
    /**
     * Selects a row from the row object reference.
     * @param row the row object.
     */
    selectRow(rowValue: any): void;
    /**
     * Sets the selected row from it's group index and row index.
     * @param groupIndex index of the group
     * @param rowIndex index of the row inside the group
     */
    selectRowByIndex(groupIndex: number, rowIndex: number): Promise<void>;
    /**
     * [Mobile] when navigation to the right panel, we hide the left panel by resizing them.
     */
    navigateToRightPanel(): void;
    /**
     * [Mobile] when navigation back to the left panel, we unselect the selected element and resize the panels.
     */
    navigateToLeftPanel(): Promise<void>;
    /**
     * Handles the collaps of a group.
     * We scroll back to the element if the group is partialy outside of the viewport to avoid visual inconsistencies.
     * @param event MouseEvent
     * @param group the group to collapse
     */
    onGroupCollapse(event: MouseEvent, group: any): void;
    /**
     * Initializes the panels resizing events. We subscribe mouse and touch events for mobile devices.
     * We apply the resize class the the child elemments to avoid the content selection while dragging the mouse.
     */
    onGutterMouseDown(): void;
    /**
     * Returns the last validation result for a given row.
     * @param rowValue the row object.
     */
    isRowValid(rowValue: any): boolean;
    /**
     * Validates a row's leaf.
     */
    validateRow(): Promise<void>;
    /**
     * AfterContentInit - Calculate and Update Column View Dysplay Mode.
     */
    ngAfterContentInit(): void;
    /**
     * AfterViewInit - Subscribe resize and render events, apply selected element.
     */
    ngAfterViewInit(): void;
    /**
     * OnChanges - group items acording to the groupBy input.
     * @param changes SimpleChanges
     */
    ngOnChanges(changes: ng.SimpleChanges): void;
    /**
     * OnDestroy - unsubscribe events.
     */
    ngOnDestroy(): void;
}
export declare class SingleColumnViewModule {
}
export {};