tripetto/types/tripetto.d.ts

/*! Tripetto Builder 4.5.1 - Copyright (C) 2022 Tripetto B.V. - All Rights Reserved */

declare module "tripetto" {
    import * as Tripetto from "tripetto/module";
    export * from "tripetto/module";
    export { Tripetto };
    export default Tripetto;
}

declare module "tripetto/module" {
    /** Implicit exports. */
    export * from "tripetto/module/functional";
    /** Namespaces. */
    export * as AES from "tripetto/module/aes";
    export * as Collection from "tripetto/helpers/collection";
    export * as Components from "tripetto/components";
    export * as Contracts from "tripetto/module/contracts";
    export * as DOM from "tripetto/module/dom";
    export * as Drawings from "tripetto/drawings";
    export * as Forms from "tripetto/forms";
    export * as Layers from "tripetto/module/ui-layers";
    export * as Layouts from "tripetto/layouts";
    export * as SHA2 from "tripetto/module/sha2";
    export * as Slots from "tripetto/module/slots";
    export * as Touch from "tripetto/touch";
    export * as Markdown from "tripetto/module/markdown";
    /** Explicit exports. */
    export { Application } from "tripetto/module/dom";
    export { Await, Callback } from "tripetto/module/callback";
    export { Rectangles, Coordinate, Dimensions, Spacing } from "tripetto/module/metrics";
    export {
        Namespaces,
        Branch,
        Branches,
        Cluster,
        Clusters,
        Condition,
        Conditions,
        IConditionBlock,
        IDefinition,
        INamespace,
        INodeBlock,
        IVariable,
        Node,
        detectChange,
        mountNamespace,
        unmountNamespace,
        lookupVariable,
    } from "tripetto/module/map";
    export { L10n, pgettext, npgettext, _, _n } from "tripetto/l10n";
    export { TGridRectangles } from "tripetto/module/grid";
    export { Renderer as LayerRenderer, Layout as LayerLayout } from "tripetto/module/ui-grid2layer";
    export { MoveableLayout } from "tripetto/helpers/layout";
    export { ConditionBlock, NodeBlock } from "tripetto/helpers/blocks";
    export { ISlotIdentifier, populateSlots } from "tripetto/helpers/slots/populate";
    export { insertVariable, slotInsertAction, getSlotIcon } from "tripetto/helpers/variables/insert";
    export { populateVariables } from "tripetto/helpers/variables/populate";
    export { isVariable } from "tripetto/helpers/variables/verify";
    export { getMetadata } from "tripetto/helpers/decorators/metadata";
    export { markdownifyToString, makeMarkdownSafe } from "tripetto/helpers/markdown";
    export { Fonts } from "tripetto/helpers/fonts";
    export { linearicon, linearicons, style as lineariconStyle } from "tripetto/styles/linearicons";
    export { SVGImage } from "tripetto/helpers/svg";
    export { REGEX_IS_URL } from "tripetto/helpers/regex/url";
    export { getHelpTopic } from "tripetto/help";
    /** Orchestrators */
    export { EditorOrchestrator as EditorOrchestratorNodeBlock } from "tripetto/templates";
    export { EditorOrchestrator } from "tripetto/components/controller/editor/orchestrator";
    export { Slots as SlotsOrchestrator } from "tripetto/module/slots";
    export { ConditionsOrchestrator } from "tripetto/helpers/conditions/orchestrator";
    /** Decorators */
    export { affects } from "tripetto/helpers/decorators/affects";
    export { assigned, definition, destroyed, detached, slots, unassigned, upgraded } from "tripetto/module/map";
    export { conditions } from "tripetto/helpers/blocks/conditions/decorator";
    export { created } from "tripetto/helpers/decorators/created";
    export { collection } from "tripetto/helpers/decorators/collection";
    export { deleted } from "tripetto/helpers/collection/decorators/deleted";
    export { editor } from "tripetto/helpers/decorators/editor";
    export { supplies } from "tripetto/helpers/decorators/supplies";
    export { metadata } from "tripetto/helpers/decorators/metadata";
    export { name } from "tripetto/helpers/collection/decorators/name";
    export { icon } from "tripetto/helpers/collection/decorators/icon";
    export { alias } from "tripetto/helpers/collection/decorators/alias";
    export { score } from "tripetto/helpers/collection/decorators/score";
    export { title } from "tripetto/helpers/collection/decorators/title";
    export { menu } from "tripetto/helpers/collection/decorators/menu";
    export { width } from "tripetto/helpers/collection/decorators/width";
    export { refreshed } from "tripetto/helpers/collection/decorators/refreshed";
    export { renamed } from "tripetto/helpers/decorators/renamed";
    export { reordered } from "tripetto/helpers/collection/decorators/reordered";
    export { tripetto } from "tripetto/helpers/blocks";
    /** Builder. */
    export * from "tripetto/builder";
    export {
        IBuilderChangeEvent,
        IBuilderCloseEvent,
        IBuilderEditEvent,
        IBuilderErrorEvent,
        IBuilderLoadEvent,
        IBuilderOpenEvent,
        IBuilderPreviewEvent,
        IBuilderReadyEvent,
        IBuilderRenameEvent,
        IBuilderSaveEvent,
        TBuilderEditData,
        TBuilderEditEpilogue,
        TBuilderEditTypes,
    } from "tripetto/events";
    export { IBuilderProperties } from "tripetto/properties";
    export { IBuilderStyle } from "tripetto/styles/builder";
    export { ITier as IBuilderTier } from "tripetto/tier";
    export { DEFAULT } from "tripetto/skins/default";
    /** Imports */
}

declare module "tripetto/helpers/collection" {
    /** Dependencies */
    import { Collection } from "tripetto/helpers/collection/collection";
    import { CollectionItem, ICollectionItemConstructor } from "tripetto/helpers/collection/item";
    import { ConditionBlock, NodeBlock } from "tripetto/helpers/blocks";
    import { Slot } from "tripetto/module/slots";
    import { IVariable } from "tripetto/module/map";
    import { ISlotIdentifier } from "tripetto/helpers/slots/populate";
    /** Explicit exports */
    export { Collection as Provider } from "tripetto/helpers/collection/collection";
    export { CollectionItem as Item, ICollectionItem as IItem } from "tripetto/helpers/collection/item";
    export {
        IItemAddEvent,
        IItemDeleteEvent,
        IItemIndexEvent,
        IItemRenameEvent,
        IItemCloseEvent,
        IItemIconEvent,
        IItemOpenEvent,
    } from "tripetto/helpers/collection/events";
    export { ICollectionProperties as IProperties } from "tripetto/components/controller/collection/properties";
    export { CollectionCard as Card } from "tripetto/components/controller/collection/card";
    export interface ICollectionSupply<T extends NodeBlock, C extends Collection<CollectionItem, {}>> {
        /** Contains the name of the collection property. */
        readonly name: keyof T;
        /** Contains a reference to the collection instance. */
        readonly collection: C;
        /**
         * Specifies if the collection is the origin for the slot. This means the slot
         * is created/maintained by the collection.
         */
        readonly origin: boolean;
        /**
         * Specifies if the collection is the sole supplier of values for the slot.
         * For example, if your slot is used for a fixed dropdown list and the possible dropdown
         * options are supplied by the collection, that collection is the sole supplier
         * of values for the slot. If your slot is used for a text field with autocomplete
         * suggestions and the collection is the supplier for the suggestions, the
         * collection is not a sole supplier, because the respondent can also specify another
         * value that is not in the collection list.
         */
        readonly sole: boolean;
    }
    /**
     * Creates a new collection and binds data to it.
     * @param pConstructor Reference to the item constructor.
     * @param pReference Reference to the parent.
     * @param bRoot Specifies if the reference is the root collection.
     */
    export function of<T extends CollectionItem<Reference>, Reference>(
        pConstructor: ICollectionItemConstructor<T, Reference>,
        pReference:
            | (Reference & {
                  readonly block?: NodeBlock | ConditionBlock;
              })
            | {
                  readonly ref: Reference;
              },
        bRoot?: boolean
    ): Collection<T, Reference>;
    /**
     * Tries to retrieve the collection with the specified name from the block.
     * @param pBlock Specifies the block.
     * @param sCollection Specifies the collection name.
     */
    export function get<T extends NodeBlock, C extends Collection<CollectionItem, {}>>(pBlock: T, sCollection: string): C | undefined;
    /**
     * Finds the collection that is the values supply for the specified slot identifier.
     * @param pSlot Specifies the slot identifier to search for.
     */
    export function find<T extends NodeBlock, C extends Collection<CollectionItem, {}>>(
        pSlot: ISlotIdentifier
    ): ICollectionSupply<T, C> | undefined;
    /**
     * Finds the collection that is the values supply for the specified slot.
     * @param pSlot Specifies the slot to search for.
     * @param pBlock Specifies the block.
     */
    export function find<T extends NodeBlock, C extends Collection<CollectionItem, {}>>(
        pSlot: Slot,
        pBlock: T
    ): ICollectionSupply<T, C> | undefined;
    /**
     * Finds the collection that is the values supply for the specified variable.
     * @param pVariable Specifies the variable to search for.
     */
    export function find<T extends NodeBlock, C extends Collection<CollectionItem, {}>>(
        pVariable: IVariable
    ): ICollectionSupply<T, C> | undefined;
}

declare module "tripetto/components" {
    export * from "tripetto/module/ui-cards";
    export * from "tripetto/components/controller/controller";
    export * from "tripetto/components/l10n";
    export * from "tripetto/module/ui-list";
    export * from "tripetto/components/loader";
    export * from "tripetto/helpers/menu";
    export * from "tripetto/module/ui-scrollbars";
    export * from "tripetto/components/styles";
    export * from "tripetto/module/ui-toolbar";
    export * from "tripetto/components/tutorial";
    export * from "tripetto/module/ui-workspace";
}

declare module "tripetto/drawings" {
    export { INodeDrawing, IConditionDrawing } from "tripetto/components/map";
}

declare module "tripetto/forms" {
    export * from "tripetto/module/ui-form";
    export * from "tripetto/module/ui-form-button";
    export * from "tripetto/module/ui-form-checkbox";
    export * from "tripetto/module/ui-form-date";
    export * from "tripetto/module/ui-form-dropdown";
    export * from "tripetto/module/ui-form-email";
    export * from "tripetto/module/ui-form-html";
    export * from "tripetto/module/ui-form-notification";
    export * from "tripetto/module/ui-form-numeric";
    export * from "tripetto/module/ui-form-radiobutton";
    export * from "tripetto/module/ui-form-spacer";
    export * from "tripetto/module/ui-form-static";
    export * from "tripetto/module/ui-form-text";
}

declare module "tripetto/layouts" {
    export {
        MapLayout as Map,
        ClusterLayout as Cluster,
        NodeLayout as Node,
        BranchLayout as Branch,
        ConditionLayout as Condition,
    } from "tripetto/components/map";
}

declare module "tripetto/touch" {
    export * from "tripetto/module/touch-tap";
    export * from "tripetto/module/touch-hover";
    export * from "tripetto/module/touch-keyboard";
}

declare module "tripetto/l10n" {
    import { Namespace } from "tripetto/module/l10n";
    export const L10n: Namespace;
    export const npgettext: (sContext: string, sId: string, sPluralId: string, nCount: number, ...pArguments: string[]) => string,
        pgettext: (sContext: string, sId: string, ...pArguments: string[]) => string,
        _: (sId: string, ...pArguments: string[]) => string,
        _n: (sId: string, sPluralId: string, nCount: number, ...pArguments: string[]) => string;
    export { ILocale, TTranslation } from "tripetto/module/l10n";
}

declare module "tripetto/helpers/layout" {
    /** Dependencies */
    import { IBuilderStyle } from "tripetto/styles/builder";
    import { Layout } from "tripetto/module/ui-grid2layer";
    import { TGrid, TGridResource } from "tripetto/module/grid";
    export abstract class MoveableLayout<Grid extends TGrid, T extends TGridResource, Style extends IBuilderStyle> extends Layout<
        Grid,
        T,
        Style
    > {
        /**
         * Sets the moving state of a layout.
         * @param bMoving Specifies if the layout is moving.
         * @return Returns `true` if the state is changed.
         */
        moving(bMoving: boolean): boolean;
        /**
         * Sets the following state of a layout.
         * @param bFollowing Specifies if the layout is following.
         * @return Returns `true` if the state is changed.
         */
        following(bFollowing: boolean): boolean;
        /**
         * Sets the ensuing state of a layout.
         * @param bEnsuing Specifies if the layout is ensuing.
         * @return Returns `true` if the state is changed.
         */
        ensuing(bEnsuing: boolean): boolean;
        /**
         * Executes the supplied operation with animations enabled.
         * @param fnOperation Specifies the operation to execute.
         */
        animate<Return>(fnOperation: () => Return): Return;
        /** Scrolls the element into view. */
        scrollIntoView(): void;
    }
}

declare module "tripetto/helpers/blocks" {
    /** Exports */
    export { Blocks } from "tripetto/helpers/blocks/blocks";
    export { ConditionBlockEx as ConditionBlock } from "tripetto/helpers/blocks/conditions/block";
    export { conditionTemplatesToMenu } from "tripetto/helpers/blocks/conditions/menu";
    export { IConditionBlockDecoratorEx as IConditionBlockDecorator } from "tripetto/helpers/blocks/conditions/decorator";
    export { IConditionBlockType } from "tripetto/helpers/blocks/conditions/type";
    export { INodeBlockDecoratorEx as INodeBlockDecorator } from "tripetto/helpers/blocks/nodes/decorator";
    export { INodeBlockType } from "tripetto/helpers/blocks/nodes/type";
    export { NodeBlockEx as NodeBlock } from "tripetto/helpers/blocks/nodes/block";
    export { tripetto } from "tripetto/helpers/blocks/decorator";
}

declare module "tripetto/helpers/slots/populate" {
    import { Condition, Map, Node } from "tripetto/module/map";
    import { Slot } from "tripetto/module/slots";
    import { ConditionBlock, INodeBlockType, NodeBlock } from "tripetto/helpers/blocks";
    import { SVGImage } from "tripetto/helpers/svg";
    export interface ISlotIdentifier {
        /** Type of the identifier. */
        readonly type: "slot" | "pipe" | "group";
        /** Reference to the parent block that holds the slot. */
        readonly block: NodeBlock;
        /** Label for the slot. */
        readonly label: string;
        /** Icon for the slot. */
        readonly icon?: SVGImage | string;
        /** Identifier of the slot. */
        readonly id?: string;
        /** Reference of the slot. */
        readonly reference?: string;
        /** Reference to the slot instance. */
        readonly slot?: Slot;
        /**
         * Collection of slot identifiers used to when a slot identifier denotes
         * a group of slots (`type` is set to `group`).
         */
        readonly slots?: ISlotIdentifier[];
    }
    /**
     * Populates a collection of slots in the map.
     * @param pSource Reference to the source.
     * @param pFilter Specifies filters for the function. The following filters
     * are available:
     * - `mode`: Supply `all` to use all slots in the map, `validated` to return
     * only the slots that could be available for the target node (basically these
     * are all the slots prepending the supplied node), `self` to return all validated
     * slots and the slots of the supplied node or `exclude` to return all
     * slots excluding the slots of the supplied node (defaults to `all`);
     * - `pipes`: Specifies if pipes need to be populated. Can be `include` to
     * include pipes (this will exclude all the slots that are consumed by the pipe),
     * `include-consumed-slots` will include pipes and all the slots that are consumed
     * by the pipe, `exclude` will ignore pipes, `exclude-consumed-slots` will ignore
     * pipes and the slots that are consumed by the pipe and `only` will only
     * include pipes and no other slots (defaults to `include`);
     * - `blocks`: Specifies block identifiers or types to filter on;
     * - `references`: Specifies slot references to filter on;
     * - `include`: Specifies slot identifiers to include;
     * - `exclude`: Specifies slot identifiers to exclude.
     * @return Returns an array with slots or `undefined` if there are none.
     */
    export function populateSlots(
        pSource: Node | NodeBlock | Condition | ConditionBlock | Map,
        pFilter?: {
            readonly mode?: "all" | "validated" | "self" | "exclude";
            readonly pipes?: "include" | "include-consumed-slots" | "exclude" | "exclude-consumed-slots" | "only";
            readonly blocks?: (string | INodeBlockType)[];
            readonly references?: string[];
            readonly include?: string[];
            readonly exclude?: string[];
        }
    ): ISlotIdentifier[] | undefined;
}

declare module "tripetto/helpers/variables/insert" {
    /** Dependencies */
    import { Element } from "tripetto/module/dom";
    import * as Slots from "tripetto/module/slots";
    import { MenuOption } from "tripetto/module/ui-menu";
    import { Condition, Map, Node } from "tripetto/module/map";
    import { ConditionBlock, NodeBlock } from "tripetto/helpers/blocks";
    import { CollectionItem } from "tripetto/helpers/collection/item";
    export function getSlotIcon(pSlot: Slots.Slot): number;
    /**
     * Variable insert action function. Can be used to enable the variable insert
     * action on text input controls.
     * @param pParent Specifies the parent node, condition or map.
     * @param sMode Supply `all` to use all slots in the map, `validated` to return
     * only the slots that could be available for the target node (basically these
     * are all the slots prepending the supplied node) or `exclude` to return all
     * slots excluding the slots of the supplied node.
     * @param fnModifier Function to modify the menu options generated by the action.
     * @return Returns the action function.
     */
    export const insertVariable: (
        pParent: Node | NodeBlock | Condition | ConditionBlock | Map | CollectionItem,
        sMode?: "all" | "validated" | "exclude" | undefined,
        fnModifier?: ((options: MenuOption[], fnDone: (sText?: string | undefined) => void) => MenuOption[]) | undefined
    ) => (
        fnDone: (sText?: string | undefined) => void,
        pElement: Element
    ) => ((sKey: string) => "cancel" | "capture" | "continue") | undefined;
    /** Legacy export. */
    export const slotInsertAction: (
        pParent: Node | NodeBlock | Condition | ConditionBlock | Map | CollectionItem,
        sMode?: "all" | "validated" | "exclude" | undefined,
        fnModifier?: ((options: MenuOption[], fnDone: (sText?: string | undefined) => void) => MenuOption[]) | undefined
    ) => (
        fnDone: (sText?: string | undefined) => void,
        pElement: Element
    ) => ((sKey: string) => "cancel" | "capture" | "continue") | undefined;
}

declare module "tripetto/helpers/variables/populate" {
    import { IDropdownOption } from "tripetto/module/ui-form-dropdown";
    import { Condition, Node } from "tripetto/module/map";
    import { Slot } from "tripetto/module/slots";
    import { ConditionBlock, NodeBlock } from "tripetto/helpers/blocks";
    /**
     * Populates a list of variables for use in dropdown controls.
     * @param pSource Reference to the source.
     * @param fnFilter Optional filter function that is invoked for each slot found.
     * @param sValue Specifies an optional value of the control that will use the
     * variables list. This will assure that the referenced variable in that value
     * will be included in the list.
     * @param bIncludeSelf Specifies if slots of the source should be included or not.
     * @param pExcludes Specifies the slot identifiers of slots that should be ignored.
     * @return Returns an array with dropdown options.
     */
    export function populateVariables(
        pSource: Node | NodeBlock | Condition | ConditionBlock,
        fnFilter?: (slot: Slot, pipe: boolean) => boolean,
        sValue?: string,
        bIncludeSelf?: boolean,
        ...pExcludes: (string | undefined)[]
    ): IDropdownOption<string>[];
}

declare module "tripetto/helpers/variables/verify" {
    /**
     * Verifies if the supplied input is a possible variable.
     * @param sInput Specifies the input to verify.
     * @return Returns `true` if the input could be a variable.
     */
    export function isVariable(sInput: string | undefined): sInput is string;
}

declare module "tripetto/helpers/decorators/metadata" {
    /** Dependencies */
    import { NodeBlock } from "tripetto/helpers/blocks";
    /**
     * Marks a property as metadata supply for the specified reference.
     * @param sReference Specifies the metadata reference.
     */
    export function metadata<T extends NodeBlock>(sReference: string): (pTarget: T, sProperty: string) => void;
    /**
     * Tries to retrieve metadata from the block.
     * @param pBlock Reference to the block.
     * @param sReference Specifies the metadata reference.
     */
    export function getMetadata<D extends {}>(pBlock: NodeBlock, sReference: string): D | undefined;
}

declare module "tripetto/helpers/markdown" {
    /** Dependencies */
    import { MarkdownFeatures } from "tripetto/module/markdown";
    /**
     * Parses a markdown string to a plain text string.
     * @param sMarkdown Specifies the markdown string to parse.
     * @param nFeatures Specifies the markdown features to parse (defaults to `MarkdownFeatures.All`).
     * @param sPlaceholder Specifies a placeholder string for variables (defaults to `___`).
     * @returns Returns a plain text string where all markdown is removed/parsed.
     */
    export function markdownifyToString(sMarkdown: string, nFeatures?: MarkdownFeatures, sPlaceholder?: string): string;
    /**
     * Makes a string markdown safe so that all possible markdown markup is ignored.
     * @param sInput Specifies the input string.
     * @param nFeatures Specifies the markdown features to strip (defaults to `MarkdownFeatures.Formatting | MarkdownFeatures.InlineCode`).
     * @returns Returns the sanitized markdown string.
     */
    export function makeMarkdownSafe(sInput: string, nFeatures?: MarkdownFeatures): string;
}

declare module "tripetto/helpers/fonts" {
    export class Fonts {
        /** Retrieves if the font loading is ready. */
        static get isReady(): boolean;
        /** Retrieves if the font loading resulted in an error. */
        static get isError(): boolean;
        /**
         * Loads the specified font families.
         * @param sFamilies Specifies the families to load.
         * @param fnDone Specifies a callback function which is invoked when the
         * fonts are loaded.
         */
        static load(sFamilies: string[], fnDone: (bSucceeded: boolean) => void): true;
    }
}

declare module "tripetto/styles/linearicons" {
    /** Dependencies */
    import { Element, IStyles, Stylesheet } from "tripetto/module/dom";
    /** Style defaults for the font. */
    export const STYLE: IStyles;
    /**
     * Loads the linearicons font.
     * @param sURI Specifies the path or URL to the font.
     * @param pStylesheet Specifies the optional stylesheet to use.
     * @return Returns the family name.
     */
    export function linearicons(sURI: string, pStylesheet?: Stylesheet): string;
    /**
     * Retrieves an icon or applies an icon to an element.
     * @param nCode Specifies the icon code.
     * @param pElement Specifies an optional element.
     * @param bAsText Specifies if the icon should be inserted as text node.
     * @return Returns the class name for the icon.
     */
    export function linearicon(nCode: number, pElement?: Element, bAsText?: boolean): string;
    /**
     * Generates an icon style.
     * @param nCode Specifies the icon code.
     * @param pStyle Specifies additional styles.
     * @return Returns the style object.
     */
    export function style(nCode: number, pStyle?: IStyles): IStyles;
}

declare module "tripetto/helpers/svg" {
    /** Dependencies */
    import SVG from "*.svg";
    /** Type for SVG images. */
    export type SVGImage = typeof SVG;
    /** Exports */
    export { SVGLine } from "tripetto/helpers/svg/line";
    export { SVGColorizePath } from "tripetto/helpers/svg/colorize";
}

declare module "tripetto/helpers/regex/url" {
    export const REGEX_IS_URL: RegExp;
}

declare module "tripetto/help" {
    export interface IHelpTopics {
        [topic: string]: string | undefined;
    }
    /**
     * Sets the current help topics reference.
     * @param ref Reference to a help topics object.
     * @returns Returns a reference to the help topics.
     */
    export function setHelpTopics(ref: IHelpTopics): IHelpTopics;
    /**
     * Retrieves help topic data.
     * @param topic Specifies the topic.
     * @returns Returns the help topic data or `undefined` if the topic was not found.
     */
    export function getHelpTopic(topic: string): string | undefined;
}

declare module "tripetto/templates" {
    /** Dependencies */
    import { EditorOrchestrator as EditorOrchestratorBase } from "tripetto/components/controller/editor/orchestrator";
    import { Feature } from "tripetto/module/ui-cards";
    import { Control, Group } from "tripetto/module/ui-form";
    import { IScoresFeature } from "tripetto/templates/scores/scores";
    import { INumericFeature } from "tripetto/templates/numeric/numeric";
    import { Transformations } from "tripetto/module/slots";
    export type CallableRef<T> = T | (() => T);
    export class EditorOrchestrator<Reference> extends EditorOrchestratorBase<Reference> {
        /** Retrieves the group templates. */
        readonly groups: {
            /** Group for general features. */
            general: () => Feature<import("tripetto/module/ui-cards").Card<import("tripetto/module/hookup").THooks>>;
            /** Group for settings. */
            settings: () => Feature<import("tripetto/module/ui-cards").Card<import("tripetto/module/hookup").THooks>>;
            /** Group for options. */
            options: () => Feature<import("tripetto/module/ui-cards").Card<import("tripetto/module/hookup").THooks>>;
        };
        /**
         * Adds the alias feature.
         * @param pAlias Reference to an alias interface.
         * @return Returns a reference to the feature.
         */
        alias(
            pAlias: CallableRef<{
                alias?: string;
            }>
        ): Feature;
        /**
         * Adds the description feature.
         * @param bLocked Specifies if the feature is locked.
         * @param sLabel Specifies the label for the description feature.
         * @param bSupportVariables Specifies if markdown variables inside the
         * description are supported. Can be one of the following values:
         * - boolean: Specifies if variables are supported or not;
         * - `validated`: Specifies to only include validated variables (basically these are all the variables prepending the current block);
         * - `exclude`: Specifies to include all variables, except those of the current block itself.
         */
        description(bLocked?: boolean, sLabel?: string, bSupportVariables?: boolean | "validated" | "exclude"): Feature;
        /** Adds the explanation feature. */
        explanation(): Feature;
        /**
         * Adds the name feature.
         * @param bToggle Specifies if the name visibility can be toggled.
         * @param bMultiline Specifies if multiline text is supported.
         * @param sLabel Specifies the label for the feature.
         * @param bSupportVariables Specifies if markdown variables inside the
         * description are supported. Can be one of the following values:
         * - boolean: Specifies if variables are supported or not;
         * - `validated`: Specifies to only include validated variables (basically these are all the variables prepending the current block);
         * - `exclude`: Specifies to include all variables, except those of the current block itself.
         */
        name(bToggle?: boolean, bMultiline?: boolean, sLabel?: string, bSupportVariables?: boolean | "validated" | "exclude"): Feature;
        /**
         * Adds the placeholder feature.
         * @param pCustomPlaceholders Additional placeholder controls.
         */
        placeholder(...pCustomPlaceholders: (Control | Group)[]): Feature;
        /**
         * Adds the data required feature.
         * @param pRequired Reference to something that impements the `required` property.
         * @param sLabel Specifies the label for the required checkbox.
         * @param onChange Invoked when the value of the required prop is changed.
         */
        required(
            pRequired: CallableRef<{
                required?: boolean;
            }>,
            sLabel?: string,
            onChange?: (bRequired: boolean) => void
        ): Feature;
        /**
         * Adds the data exportable feature.
         * @param pExportable Reference to something that impements the `exportable` property.
         * @param bIncludedByDefault Specifies if the data is exportable by default (so when this feature is unchecked).
         * @param sLabel Specifies the label for the exportable checkbox.
         */
        exportable<T extends {}>(
            pExportable:
                | CallableRef<{
                      exportable?: boolean;
                  }>
                | {
                      ref: T;
                      props: {
                          name: keyof T;
                          label: string;
                      }[];
                  },
            bIncludedByDefault?: boolean,
            sLabel?: string
        ): Feature;
        /**
         * Adds the transformation feature.
         * @param pTransformation Reference to something that implements the `transformation` property.
         */
        transformations(
            pTransformation: CallableRef<{
                transformation?: Transformations;
            }>
        ): Feature;
        /** Adds the visibility feature which controls the state of a node. */
        visibility(): Feature;
        /** Adds a scores feature that creates a score slot. */
        scores(pProperties: IScoresFeature): Feature;
        /** Adds a numeric feature that creates a feature slot. */
        numeric(pProperties: INumericFeature): Feature;
    }
}

declare module "tripetto/components/controller/editor/orchestrator" {
    /** Dependencies */
    import { Cards, Feature, Features } from "tripetto/module/ui-cards";
    import { CollectionCard } from "tripetto/components/controller/collection/card";
    import { CollectionItem } from "tripetto/helpers/collection/item";
    import { Form, IFormProperties } from "tripetto/module/ui-form";
    import { ICollectionProperties } from "tripetto/components/controller/collection/properties";
    export class EditorOrchestrator<Reference> {
        /** Reference to an object. */
        readonly reference: Reference;
        constructor(pCards: Cards, pReference: Reference, fnClose: () => void);
        /** Retrieves a reference to the features. */
        get features(): Features;
        /** Retrieves the close handler which closes the panel. */
        get close(): () => boolean;
        /**
         * Adds a form.
         * @param pProperties Specifies the form properties.
         * @return Returns a reference to the form.
         */
        form(pProperties: IFormProperties): Form;
        /**
         * Adds a collection.
         * @param pProperties Specifies the collection properties.
         * @return Returns a reference to the collection.
         */
        collection<T extends CollectionItem<R>, R>(pProperties: ICollectionProperties<T, R>): CollectionCard<T, R>;
        /**
         * Adds an option feature with a form or card.
         * @param pProperties Specifies the option properties.
         * @return Returns a reference to the feature.
         */
        option<T extends CollectionItem<R>, R>(
            pProperties: {
                /** Name for the option. */
                name: string;
                /** Specifies if the option is activated. */
                activated?: boolean;
                /** Specifies if the option is visible. */
                visible?: boolean;
                /** Specifies if the option is disabled. */
                disabled?: boolean;
                /** Specifies if the option is locked. */
                locked?: boolean;
            } & (
                | {
                      /** Form properties. */
                      form?: IFormProperties;
                      /** Specifies a function that is invoked when the option is toggled. */
                      on?: (feature: Feature<Form>) => void;
                      /** Specifies a function that is invoked when the option is shown or hidden. */
                      onVisible?: (feature: Feature<Form>) => void;
                      /** Specifies a function that is invoked when the option is disabled or enabled. */
                      onDisable?: (feature: Feature<Form>) => void;
                      /** Specifies a function that is invoked when the option is locked or unlocked. */
                      onLock?: (feature: Feature<Form>) => void;
                  }
                | {
                      /** Collection properties. */
                      collection?: ICollectionProperties<T, R>;
                      /** Specifies a function that is invoked when the option is toggled. */
                      on?: (feature: Feature) => void;
                      /** Specifies a function that is invoked when the option is shown or hidden. */
                      onVisible?: (feature: Feature) => void;
                      /** Specifies a function that is invoked when the option is disabled or enabled. */
                      onDisable?: (feature: Feature) => void;
                      /** Specifies a function that is invoked when the option is locked or unlocked. */
                      onLock?: (feature: Feature) => void;
                  }
            )
        ): Feature;
        /**
         * Adds a group label.
         * @param sLabel Specifies the label.
         */
        group(sLabel: string): Feature;
    }
}

declare module "tripetto/helpers/conditions/orchestrator" {
    /** Dependencies */
    import { Condition, ConditionBlock, Node } from "tripetto/module/map";
    import { IConditionGroup, IConditionTemplate } from "tripetto/helpers/conditions/interface";
    import { ITemplateProperties } from "tripetto/helpers/conditions/properties";
    export class ConditionsOrchestrator {
        /**
         * Creates a new condition template orchestrator.
         * @param pNode Reference to the parent node.
         */
        static create(pNode: Node): ConditionsOrchestrator;
        /** Retrieves an array with templates. */
        get templates(): (IConditionTemplate | IConditionGroup)[];
        /**
         * Creates a new condition template.
         * @param pProperties Specifies the template properties.
         * @return Returns the condition template.
         */
        template<T extends ConditionBlock>(pProperties: ITemplateProperties<T>): this;
        /**
         * Adds a custom command.
         * @param sLabel Specifies the label for the custom command.
         * @param fnCommand Specifies the function to execute.
         * @param sIcon Specifies the icon for the custom command.
         * @param bMarkdown Specifies if markdown is supported in the label.
         * @return Returns the condition template.
         */
        custom(sLabel: string, fnCommand: (pCondition: Condition) => void, sIcon?: string, bMarkdown?: boolean): this;
        /**
         * Adds a group.
         * @param sLabel Specifies the label for the group.
         * @param sIcon Specifies the icon for the group.
         * @param bMarkdown Specifies if markdown is supported in the label.
         * @param bSeparator Specifies if the group should be preceded by a separator.
         * @return Returns the `ConditionsOrchestrator` instance for the group.
         */
        group(sLabel: string, sIcon?: string, bMarkdown?: boolean, bSeparator?: boolean): ConditionsOrchestrator;
    }
}

declare module "tripetto/helpers/decorators/affects" {
    import { ConditionBlock, NodeBlock } from "tripetto/helpers/blocks";
    import { CollectionItem } from "tripetto/helpers/collection/item";
    /** Marks a property that affects the name or icon of a node, condition or collection item. */
    export function affects<T extends NodeBlock | ConditionBlock | CollectionItem>(
        sTarget: "#name" | "#icon"
    ): (pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor) => void;
    /** Marks a property that affects the label of a node or condition. */
    export function affects<T extends NodeBlock | ConditionBlock>(
        sTarget: "#label"
    ): (pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor) => void;
    /** Marks a property that affects the condition state. */
    export function affects<T extends ConditionBlock>(
        sTarget: "#condition"
    ): (pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor) => void;
    /** Marks a property that affects the slots or required condition. */
    export function affects<T extends NodeBlock>(
        sTarget: "#slots" | "#required"
    ): (pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor) => void;
    /**
     * Marks a property that affects a collection. It triggers a collection refresh.
     */
    export function affects<T>(
        sTarget: "#collection",
        sCollection: keyof T
    ): (pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor) => void;
    /** Marks a property that triggers a collection item refresh. */
    export function affects<T extends CollectionItem<Reference>, Reference>(
        sTarget: "#refresh"
    ): (pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor) => void;
}

declare module "tripetto/helpers/blocks/conditions/decorator" {
    import { IConditionBlockDecorator } from "tripetto/module/map";
    import { NodeBlock } from "tripetto/helpers/blocks";
    import { SVGImage } from "tripetto/helpers/svg";
    export interface IConditionBlockDecoratorEx extends IConditionBlockDecorator {
        /** Contains the icon image for the block. */
        readonly icon: SVGImage | string;
        /** Specifies if the condition editor should be opened automatically. */
        readonly autoOpen?: boolean;
    }
    /**
     * Marks the condition templates function that should create all the
     * possible condition templates for a node block. The following arguments
     * are passed to the function:
     * - `conditions` (ConditionsOrchestrator): Reference to the condition
     * orchestrator which is a helper for implementing condition templates.
     */
    export function conditions<T extends NodeBlock>(pTarget: T, sMethod: keyof T, pDescriptor?: PropertyDescriptor): void;
}

declare module "tripetto/helpers/decorators/created" {
    /** Dependencies */
    import { ConditionBlock } from "tripetto/helpers/blocks";
    import { CollectionItem } from "tripetto/helpers/collection/item";
    import { NodeBlock } from "tripetto/helpers/blocks";
    /**
     * Marks the created function that is invoked when the block or collection item
     * is created (right after the instance is created and just before
     * deserialization occurs).
     */
    export function created<T extends NodeBlock | ConditionBlock | CollectionItem>(
        pTarget: T,
        sFunction: keyof T,
        pDescriptor?: PropertyDescriptor
    ): void;
}

declare module "tripetto/helpers/decorators/collection" {
    import { ConditionBlock } from "tripetto/helpers/blocks";
    /**
     * Attaches a property to a collection item in the specified collection in the
     * parent node block. The property will serve the identifier of a collection
     * item to the definition.
     * @param sCollection Specifies the property name (prefixed with `#`) of the collection in the node block.
     * @param sMode Specifies the mode:
     * - `r`: Reads a property from the definition;
     * - `w`: Writes a property to the definition;
     * - `rw`: Reads and writes a property from/to the definition (default mode).
     */
    export function collection<T extends ConditionBlock>(
        sCollection: string,
        sMode?: "r" | "w" | "rw"
    ): (pTarget: T, sProperty: string) => void;
}

declare module "tripetto/helpers/collection/decorators/deleted" {
    import { CollectionItem } from "tripetto/helpers/collection/item";
    /**
     * Marks the item deleted function that is invoked when the collecton item is
     * deleted.
     */
    export function deleted<T extends CollectionItem<Reference>, Reference>(
        pTarget: T,
        sMethod: keyof T,
        pDescriptor?: PropertyDescriptor
    ): void;
}

declare module "tripetto/helpers/decorators/editor" {
    /** Dependencies */
    import { ConditionBlock, NodeBlock } from "tripetto/helpers/blocks";
    import { CollectionItem } from "tripetto/helpers/collection/item";
    /**
     * Marks the editor function that is invoked when the editor is opened. The
     * following arguments are passed to the function:
     * - `editor` (EditorOrchestrator): Reference to the editor orchestrator
     * which is a helper for implementing editor features.
     */
    export function editor<T extends NodeBlock | ConditionBlock | CollectionItem>(
        pTarget: T,
        sFunction: keyof T,
        pDescriptor?: PropertyDescriptor
    ): void;
}

declare module "tripetto/helpers/decorators/supplies" {
    /** Dependencies */
    import { NodeBlock } from "tripetto/helpers/blocks";
    export interface ISupply<T extends NodeBlock> {
        readonly collection: keyof T;
        readonly type: "slot" | "collection";
        readonly reference: string;
        readonly isSole: (pRef: T) => boolean;
        readonly isAvailable: (pRef: T) => boolean;
    }
    /**
     * Marks a collection as the values supply for a slot.
     * @param sType Specifies the target type (`#slot` in this case).
     * @param sReference Specifies the slot reference.
     * @param bSole Specifies if the collection is the sole values supplier (`true`
     * by default). For example, if your slot is used for a fixed dropdown list and
     * the dropdown options are supplied by the collection, that collection is the
     * sole supplier of values for the slot. If your slot is used for a text field
     * with autocomplete suggestions and the collection is the supplier for the
     * suggestions, the collection is not a sole supplier, because the user can also
     * specify another value that is not in the collection list.
     * @param sCondition Optional property identifier of a boolean value that
     * specifies if the supply is active.
     */
    export function supplies<T extends NodeBlock>(
        sType: "#slot",
        sReference: string,
        bSole?: boolean | keyof T,
        sCondition?: keyof T
    ): (pTarget: T, sProperty: keyof T) => void;
    /**
     * Marks a collection as the values supply for another collecton.
     * @param sType Specifies the target type (`#collection` in this case).
     * @param sReference Specifies the collection property name.
     * @param bSole Specifies if the collection is the sole values supplier (`true`
     * by default). For example, if your slot is used for a fixed dropdown list and
     * the dropdown options are supplied by the collection, that collection is the
     * sole supplier of values for the slot. If your slot is used for a text field
     * with autocomplete suggestions and the collection is the supplier for the
     * suggestions, the collection is not a sole supplier, because the user can also
     * specify another value that is not in the collection list.
     * @param sCondition Optional property identifier of a boolean value that
     * specifies if the supply is active.
     */
    export function supplies<T extends NodeBlock>(
        sType: "#collection",
        sCollection: keyof T,
        bSole?: boolean | keyof T,
        sCondition?: keyof T
    ): (pTarget: T, sProperty: keyof T) => void;
    /**
     * Finds the supply for the specified slot or collection.
     * @param pBlock Reference to the block.
     * @param sType Specifies the type to search for.
     * @param sReference Specifies the type reference.
     */
    export function findSupply<T extends NodeBlock>(pBlock: T, sType: "slot" | "collection", sReference: string): ISupply<T> | undefined;
}

declare module "tripetto/helpers/collection/decorators/name" {
    /** Dependencies */
    import { CollectionItem } from "tripetto/helpers/collection/item";
    /**
     * Marks the property that holds the name of the item.
     * @param pItem Reference to the item.
     * @param sProperty Specifies the property.
     * @param pDescriptor Reference to the descriptor.
     */
    export function name<T extends CollectionItem<Reference>, Reference>(
        pTarget: T,
        sProperty: keyof T,
        pDescriptor?: PropertyDescriptor
    ): void;
}

declare module "tripetto/helpers/collection/decorators/icon" {
    /** Dependencies */
    import { CollectionItem } from "tripetto/helpers/collection/item";
    /**
     * Marks the property that holds the icon of the item.
     * @param pItem Reference to the item.
     * @param sProperty Specifies the property.
     * @param pDescriptor Reference to the descriptor.
     */
    export function icon<T extends CollectionItem<Reference>, Reference>(
        pTarget: T,
        sProperty: keyof T,
        pDescriptor?: PropertyDescriptor
    ): void;
}

declare module "tripetto/helpers/collection/decorators/alias" {
    /** Dependencies */
    import { CollectionItem } from "tripetto/helpers/collection/item";
    /**
     * Marks the property that holds the alias of the item.
     * @param pItem Reference to the item.
     * @param sProperty Specifies the property.
     * @param pDescriptor Reference to the descriptor.
     */
    export function alias<T extends CollectionItem<Reference>, Reference>(
        pTarget: T,
        sProperty: keyof T,
        pDescriptor?: PropertyDescriptor
    ): void;
}

declare module "tripetto/helpers/collection/decorators/score" {
    /** Dependencies */
    import { CollectionItem } from "tripetto/helpers/collection/item";
    /**
     * Marks the property that holds the score of the item.
     * @param pItem Reference to the item.
     * @param sProperty Specifies the property.
     * @param pDescriptor Reference to the descriptor.
     */
    export function score<T extends CollectionItem<Reference>, Reference>(
        pTarget: T,
        sProperty: keyof T,
        pDescriptor?: PropertyDescriptor
    ): void;
}

declare module "tripetto/helpers/collection/decorators/title" {
    /** Dependencies */
    import { CollectionItem } from "tripetto/helpers/collection/item";
    /**
     * Marks the property that holds the title for the properties layer of the item.
     * @param pItem Reference to the item.
     * @param sProperty Specifies the property.
     * @param pDescriptor Reference to the descriptor.
     */
    export function title<T extends CollectionItem<Reference>, Reference>(pTarget: T, sProperty: keyof T): void;
}

declare module "tripetto/helpers/collection/decorators/menu" {
    /** Dependencies */
    import { CollectionItem } from "tripetto/helpers/collection/item";
    /**
     * Marks the property that supplies a context menu for the item.
     * @param pItem Reference to the item.
     * @param sProperty Specifies the property.
     * @param pDescriptor Reference to the descriptor.
     */
    export function menu<T extends CollectionItem<Reference>, Reference>(pTarget: T, sProperty: keyof T): void;
}

declare module "tripetto/helpers/collection/decorators/width" {
    /** Dependencies */
    import { CollectionItem } from "tripetto/helpers/collection/item";
    /**
     * Marks the property that supplies the width of the item panel.
     * @param pItem Reference to the item.
     * @param sProperty Specifies the property.
     * @param pDescriptor Reference to the descriptor.
     */
    export function width<T extends CollectionItem<Reference>, Reference>(pTarget: T, sProperty: keyof T): void;
}

declare module "tripetto/helpers/collection/decorators/refreshed" {
    import { CollectionItem } from "tripetto/helpers/collection/item";
    /**
     * Marks the item refreshed function that is invoked when an item is refreshed.
     */
    export function refreshed<T extends CollectionItem<Reference>, Reference>(
        pTarget: T,
        sMethod: keyof T,
        pDescriptor?: PropertyDescriptor
    ): void;
}

declare module "tripetto/helpers/decorators/renamed" {
    /** Dependencies */
    import { ConditionBlock, NodeBlock } from "tripetto/helpers/blocks";
    import { CollectionItem } from "tripetto/helpers/collection/item";
    /**
     * Marks the renamed function that is invoked when the name or label of a block
     * or collection item is changed.
     */
    export function renamed<T extends NodeBlock | ConditionBlock | CollectionItem>(
        pTarget: T,
        sFunction: keyof T,
        pDescriptor?: PropertyDescriptor
    ): void;
}

declare module "tripetto/helpers/collection/decorators/reordered" {
    import { CollectionItem } from "tripetto/helpers/collection/item";
    /**
     * Marks the item reordered function that is invoked when the order of the item
     * is changed.
     */
    export function reordered<T extends CollectionItem<Reference>, Reference>(
        pTarget: T,
        sMethod: keyof T,
        pDescriptor?: PropertyDescriptor
    ): void;
}

declare module "tripetto/builder" {
    import { Hooks } from "tripetto/module/hookup";
    import { Layer } from "tripetto/module/ui-layers";
    import { TTranslation } from "tripetto/module/l10n";
    import { TBuilderEvents } from "tripetto/events";
    import { IDefinition } from "tripetto/module/map";
    import { StylesEditor } from "tripetto/components/styles";
    import { L10nEditor } from "tripetto/components/l10n";
    import { IBuilderProperties } from "tripetto/properties";
    import { IBuilderStyle } from "tripetto/styles/builder";
    import { TL10n, TL10nContract, TStyleTiers, TStyles, TStylesContract } from "tripetto/module/contracts";
    /** Contains the package name. */
    export const NAME: string;
    /** Contains the version number. */
    export const VERSION: string;
    /** Website URL. */
    export const WEBSITE = "https://tripetto.com";
    /** Documentation URL. */
    export const DOCS = "https://docs.tripetto.com";
    export class Builder extends Hooks<TBuilderEvents> {
        /**
         * Invoked when the builder is loaded.
         * @event
         */
        onLoad?: (pBuilder: Builder) => void;
        /**
         * Invoked when there was an error during loading.
         * @event
         */
        onError?: (nErroneousBlocks: number, pMissingBlockTypes: string[], pBuilder: Builder) => void;
        /**
         * Invoked when the builder is ready to use.
         * @event
         */
        onReady?: (pBuilder: Builder) => void;
        /**
         * Invoked when the builder is opened.
         * @event
         */
        onOpen?: (pBuilder: Builder) => void;
        /**
         * Invoked when the definition is saved.
         * @event
         */
        onSave?: (pDefinition: IDefinition, pBuilder: Builder) => void;
        /**
         * Invoked when the definition is changed.
         * @event
         */
        onChange?: (pDefinition: IDefinition, pBuilder: Builder) => void;
        /**
         * Invoked when the builder is closed.
         * @event
         */
        onClose?: (pBuilder: Builder) => void;
        /**
         * Creates a new builder instance.
         * @param pDefinition Specifies the form definition to load.
         * @param pProperties Specifies the builder properties.
         */
        static open(pDefinition?: IDefinition, pProperties?: IBuilderProperties): Builder;
        /**
         * Creates a new builder instance.
         * @param pProperties Specifies the builder properties.
         */
        constructor(pProperties?: IBuilderProperties);
        /** Retrieves a reference to the builder layer. */
        get layer(): Layer | undefined;
        /** Retrieves the form definition. */
        get definition(): IDefinition | undefined;
        /** Sets the form definition. */
        set definition(pDefinition: IDefinition | undefined);
        /** Retrieves the name of the definition. */
        get name(): string;
        /** Sets the name of the definition. */
        set name(sName: string);
        /** Retrieves the language of the definition. */
        get language(): string | undefined;
        /** Sets the language of the definition. */
        set language(sLanguage: string | undefined);
        /**
         * Opens the builder.
         * @param pDefinition Optionally specifies the form definition to load.
         */
        open(pDefinition?: IDefinition): this;
        /** Notify the builder about a parent element resize. */
        resize(): this;
        /**
         * Loads a form definition.
         * @param pDefinition Specifies the form definition.
         */
        load(pDefinition: IDefinition): this;
        /** Reloads the definition. */
        reload(): this;
        /** Restores the last loaded or saved definition. */
        restore(): this;
        /** Saves the form definition. */
        save(): IDefinition | undefined;
        /**
         * Opens the editor panel for the specified element.
         * @param sType Specifies the edit type. Can be one of the following values;
         * - `properties`: Opens the map properties editor;
         * - `prologue`: Opens the prologue properties editor;
         * - `branch`: Opens the branch properties for the specified branch id;
         * - `cluster`: Opens the cluster properties for the specified cluster id;
         * - `node`: Opens the node properties for the specified node id;
         * - `condition`: Opens the condition properties for the specified condition id;
         * - `epilogue`: Opens the epilogue properties for the specified branch id.
         * @param sId Specifies the id of the element that should be edited.
         */
        edit(sType: "branch" | "cluster" | "node" | "condition", sId: string): this;
        edit(sType: "epilogue", sId?: string): this;
        edit(sType?: "properties" | "prologue"): this;
        /** Clears the form (creates a new empty one). */
        clear(): this;
        /** Closes the builder. */
        close(): this;
        /**
         * Uses the namespace for the specified identifier (or optionally load it if it is not available).
         * @param sIdentifier Specifies the namespace identifier.
         */
        useNamespace(sIdentifier: string): Promise<void>;
        /**
         * Uses the namespace for the specified identifier.
         * @param sIdentifier Specifies the namespace identifier.
         * @param sSrc Specifies the UMD code or URL to load.
         * @param sType Specifies what to load (UMD code or an URL).
         * @param bAlwaysLoad Specifies if the bundle should always load, even when there is already a
         * namespace available with the specified identifier (default is `true`).
         * @param bUnloadFirst Specifies if the namespace should unload if it is already available (default is `false`).
         */
        useNamespace(sIdentifier: string, sSrc: string, sType: "umd" | "url", bAlwaysLoad?: boolean, bUnloadFirst?: boolean): Promise<void>;
        /** Shows the tutorial dialog. */
        tutorial(): this;
        /**
         * Creates a new panel.
         * @param fnLayer Reference to the layer construction function.
         * @param size Specifies the panel size (`normal`, `small`, `compact` or custom width in pixels).
         */
        createPanel<T>(
            fnLayer: (layer: Layer, builder: Builder, style: IBuilderStyle) => T,
            size?: "normal" | "small" | "compact" | number
        ): T;
        /**
         * Invokes the styles editor for the supplied contract.
         * @param contract Specifies the styles contract.
         * @param styles Reference to the styles object to edit (if omitted a new object is created).
         * @param tier Specifies the features tier.
         * @param onChange Specifies a function that is invoked on each style change.
         * @param hideInaccessibleOptions Specifies if options that aren't available should be invisible
         * instead of disabled.
         * @param allowReset Allows a reset button to reset all styles.
         * @param onReset Specifies a function that is invoked when the styles are about to reset.
         */
        stylesEditor(
            contract: TStylesContract,
            styles?: TStyles,
            tier?: TStyleTiers,
            onChange?: (styles: TStyles) => void,
            hideInaccessibleOptions?: boolean,
            allowReset?: boolean,
            onReset?: (fnDone: (bReset: boolean) => void) => void
        ): StylesEditor;
        /**
         * Invokes the l10n editor for the supplied contract.
         * @param contract Specifies the l10n contract.
         * @param l10n Reference to the l10n object to edit (if omitted a new object is created).
         * @param onChange Specifies a function that is invoked on each change. It receives two arguments:
         * - `l10n`: Reference to the l10n object;
         * - `currentL10n`: Copy of the l10n object where the current edit language is set as the default language.
         * @param onTranslation Specifies a function that should deliver translations for the given language.
         */
        l10nEditor(
            contract: TL10nContract,
            l10n?: TL10n,
            onChange?: (l10n: TL10n, currentL10n: TL10n) => void,
            onTranslation?: (
                language: string
            ) => TTranslation | TTranslation[] | Promise<TTranslation | TTranslation[] | undefined> | undefined
        ): L10nEditor;
    }
}

declare module "tripetto/events" {
    /** Dependencies */
    import { Builder } from "tripetto/builder";
    import { IDefinition } from "tripetto/module/map";
    import { IHookPayload, THooks } from "tripetto/module/hookup";
    import { Branch, Cluster, Condition, IEpilogue, IPrologue, Map, Node } from "tripetto/module/map";
    export type TBuilderEvents =
        | "OnLoad"
        | "OnError"
        | "OnReady"
        | "OnOpen"
        | "OnSave"
        | "OnChange"
        | "OnPreview"
        | "OnRename"
        | "OnEdit"
        | "OnClose";
    interface IBuilderEvent<Hook extends THooks> extends IHookPayload<Hook> {
        /** Reference to the builder. */
        readonly builder: Builder;
    }
    interface IBuilderDefinitionEvent<Hook extends THooks> extends IBuilderEvent<Hook> {
        /** Reference to the definition. */
        readonly definition: IDefinition;
    }
    export interface IBuilderLoadEvent extends IBuilderEvent<"OnLoad"> {}
    export interface IBuilderErrorEvent extends IBuilderEvent<"OnError"> {
        /** Contains the number of blocks with an error. */
        readonly erroneousBlocks: number;
        /** Contains a list of missing block types. */
        readonly missingBlockTypes: string[];
    }
    export interface IBuilderOpenEvent extends IBuilderEvent<"OnOpen"> {}
    export interface IBuilderCloseEvent extends IBuilderEvent<"OnClose"> {}
    export interface IBuilderReadyEvent extends IBuilderDefinitionEvent<"OnReady"> {}
    export interface IBuilderSaveEvent extends IBuilderDefinitionEvent<"OnSave"> {}
    export interface IBuilderChangeEvent extends IBuilderDefinitionEvent<"OnChange"> {}
    export interface IBuilderPreviewEvent extends IBuilderDefinitionEvent<"OnPreview"> {}
    export interface IBuilderRenameEvent extends IBuilderDefinitionEvent<"OnRename"> {
        /** Contains the name of the definition. */
        readonly name: string;
    }
    export type TBuilderEditTypes = "properties" | "prologue" | "branch" | "cluster" | "node" | "condition" | "epilogue";
    export type TBuilderEditEpilogue = IEpilogue & {
        readonly branch?: string;
    };
    interface IBuilderEditData<Type extends TBuilderEditTypes, Ref> {
        readonly action: "start" | "end";
        readonly type: Type;
        readonly ref: Ref;
        readonly subscribe?: (onChange: (ref: Ref) => void) => void;
    }
    export type TBuilderEditData =
        | IBuilderEditData<"properties", Map>
        | IBuilderEditData<"prologue", IPrologue | undefined>
        | IBuilderEditData<"branch", Branch>
        | IBuilderEditData<"cluster", Cluster>
        | IBuilderEditData<"node", Node>
        | IBuilderEditData<"condition", Condition>
        | IBuilderEditData<"epilogue", TBuilderEditEpilogue | undefined>;
    export interface IBuilderEditEvent extends IBuilderEvent<"OnEdit"> {
        readonly data: TBuilderEditData;
    }
    export {};
}

declare module "tripetto/properties" {
    /** Dependencies */
    import { Builder } from "tripetto/builder";
    import { IDefinition } from "tripetto/module/map";
    import { TBuilderEditData } from "tripetto/events";
    import { IBuilderStyle } from "tripetto/styles/builder";
    import { ILocale, TTranslation } from "tripetto/module/l10n";
    import { Layer, LayerConfiguration } from "tripetto/module/ui-layers";
    import { ITier } from "tripetto/tier";
    import { IHelpTopics } from "tripetto/help";
    import { INamespace } from "tripetto/module/map";
    export interface IBuilderProperties {
        /** Host HTML element (the builder is displayed inside this element or the document body if omitted). */
        readonly element?: Element | null;
        /** Host layer (if the builder is used inside a layer). If you use this property, the `element` property is ignored. */
        readonly layer?: Layer;
        /** Specifies a layer configuration for the chain layer (only used when you supply a host layer). */
        readonly layerConfiguration?: LayerConfiguration;
        /**
         * Specifies the path to the folder with the font files. This can be a relative path or an absolute URL or `inherit` if you take care
         * of the font loading yourself.
         */
        readonly fonts?: string | "inherit";
        /** Contains the builder styles (can be used to create a custom skin). */
        readonly style?: IBuilderStyle;
        /** Specifies the locale. */
        readonly locale?: ILocale;
        /** Optional translations for the builder and the blocks. */
        readonly translations?: TTranslation | TTranslation[];
        /** Specifies a blocks namespace to use or load. */
        readonly namespace?: {
            /** Contains the namespace identifier. */
            readonly identifier: string;
            /** Contains the UMD bundle code for the namespace. */
            readonly umd?: string;
            /** Contains the URL to the UMD bundle for the namespace. */
            readonly url?: string;
            /** Invoked when a namespace is loaded. */
            readonly onLoad?: (namespace: INamespace) => void;
        };
        /** Specifies a tier for the builder. */
        readonly tier?: ITier;
        /** Specifies the initial zoom state (defaults to `fit`). */
        readonly zoom?: "1:1" | "fit" | "fit-horizontal" | "fit-vertical";
        /** Specifies if the content in the builder is centered (defaults to `true`). */
        readonly centering?: boolean;
        /** Specifies the location of the navigation and zoombar (defaults to `right`). */
        readonly controls?: "left" | "right";
        /** Specifies if the prologue feature should be disabled. */
        readonly disablePrologue?: boolean;
        /** Specifies if the epilogue feature should be disabled. */
        readonly disableEpilogue?: boolean;
        /** Disables the zoombar. */
        readonly disableZoombar?: boolean;
        /** Disables the Tripetto logo in the navigation bar. */
        readonly disableLogo?: boolean;
        /** Disables the save button in the navigation bar. */
        readonly disableSaveButton?: boolean;
        /** Disables the restore button in the navigation bar (defaults to `true`). */
        readonly disableRestoreButton?: boolean;
        /** Disables the clear button in the navigation bar (defaults to `true`). */
        readonly disableClearButton?: boolean;
        /** Disables the edit button in the navigation bar. */
        readonly disableEditButton?: boolean;
        /** Disables the close button in the navigation bar. */
        readonly disableCloseButton?: boolean;
        /** Disables the tutorial button in the navigation bar. */
        readonly disableTutorialButton?: boolean;
        /** Disables the open and close animation of the builder layer. */
        readonly disableOpenCloseAnimation?: boolean;
        /** Shows the tutorial dialog on startup. */
        readonly showTutorial?: boolean;
        /** Specifies the URL of a preview page. */
        readonly previewURL?: string;
        /** Specifies an URL to a custom help or support page (supply `false` to disable this button). */
        readonly supportURL?: string | false;
        /** Specifies URLs to help topics. */
        readonly helpTopics?: IHelpTopics & {
            /** Help topic about welcome messages. */
            readonly prologue?: string;
            /** Help topic about closing messages. */
            readonly epilogue?: string;
            /** Help topic about using branches. */
            readonly branches?: string;
            /** Help topic about using conditions. */
            readonly conditions?: string;
            /** Help topic about branch culling modes. */
            readonly culling?: string;
            /** Help topic about branch terminators. */
            readonly terminators?: string;
        };
        /** Invoked when the builder is loaded. */
        readonly onLoad?: (builder: Builder) => void;
        /** Invoked when errors occured during loading. */
        readonly onError?: (erroneousBlocks: number, missingBlockTypes: string[], builder: Builder) => void;
        /** Invoked when the builder is ready to use. */
        readonly onReady?: (builder: Builder) => void;
        /** Invoked when the builder is opened. */
        readonly onOpen?: (builder: Builder) => void;
        /** Invoked when the user clicks the save button (or when the `save()` command is called). */
        readonly onSave?: (definition: IDefinition, builder: Builder) => void;
        /** Invoked when a change occurs. */
        readonly onChange?: (definition: IDefinition, builder: Builder) => void;
        /** Invoked when a definition can be previewed. */
        readonly onPreview?: (definition: IDefinition, builder: Builder) => void;
        /** Invoked when the edit panel is opened or closed. */
        readonly onEdit?: (data: TBuilderEditData) => void;
        /** Invoked when the builder is closed. */
        readonly onClose?: (builder: Builder) => void;
    }
}

declare module "tripetto/styles/builder" {
    /** Dependencies */
    import { IFormsStyle } from "tripetto/styles/forms";
    import { IMapStyle } from "tripetto/components/map/map/style";
    import { IMenuStyle } from "tripetto/module/ui-menu";
    import { INavigatorStyle } from "tripetto/styles/navigator";
    import { ITutorialStyle } from "tripetto/components/tutorial/style";
    import { IZoombarStyle } from "tripetto/module/ui-zoombar";
    export interface IBuilderStyle {
        /** Contains the background color. */
        background: string;
        /** Contains the color for the loader. */
        loader: {
            color: string;
            size: number;
        };
        /** Contains the menu styles. */
        menu: IMenuStyle;
        /** Contains the zoombar styles. */
        zoombar: IZoombarStyle;
        /** Contains the form styles. */
        forms: IFormsStyle;
        /** Contains the navigator style. */
        navigator: INavigatorStyle;
        /** Specifies the map styles. */
        map: IMapStyle;
        /** Specifies the tutorial styles. */
        tutorial: ITutorialStyle;
        /** Contains the list of custom font names. */
        fonts?: (sURI: string) => string[];
    }
}

declare module "tripetto/tier" {
    import { EditorOrchestrator } from "tripetto/templates";
    import { Node } from "tripetto/module/map";
    export interface ITier {
        /** Specifies a name for the tier. */
        readonly name: string;
        /** Specifies the block identifiers that are included in the tier. */
        readonly blocks: string[];
        /**
         * Specifies the mode for the tier. Can be one of the following values:
         * - `enabled`: The blocks in the tier are enabled and the name of the tier is shown in the blocks list (this is the default mode);
         * - `disabled`: The blocks in the tier are disabled;
         * - `hidden`: The blocks in the tier are hidden and cannot be selected.
         */
        readonly mode?: "enabled" | "disabled" | "hidden";
        /** Specifies a message that is rendered when a block from the tier is selected, but the tier is disabled. */
        readonly message?: (pOrchestrator: EditorOrchestrator<Node>) => void;
    }
}

declare module "tripetto/skins/default" {
    /** Dependencies */
    import { IBuilderStyle } from "tripetto/styles/builder";
    export const DEFAULT: IBuilderStyle;
}

declare module "tripetto/helpers/collection/collection" {
    /** Dependencies */
    import { CollectionItem, ICollectionItem, ICollectionItemConstructor } from "tripetto/helpers/collection/item";
    import { ConditionBlock, NodeBlock } from "tripetto/helpers/blocks";
    import { Stack } from "tripetto/module/functional";
    import { IDimensionChangeEvent, Matrix } from "tripetto/module/matrix";
    export class Collection<T extends CollectionItem<Reference>, Reference> extends Matrix<T, void> {
        /**
         * Constructs a new collection.
         * @param pConstructor Reference to the item constructor.
         * @param pReference Reference to something.
         */
        constructor(pConstructor: ICollectionItemConstructor<T, Reference>, pReference: () => Reference);
        /** Retrieves the reference. */
        get ref(): Reference & {
            readonly block?: NodeBlock | ConditionBlock;
        };
        /** Retrieves the block for the collection (if available). */
        get block(): NodeBlock | ConditionBlock | undefined;
        /**
         * Fired when the dimensions of the collection are changed.
         * @param pEvent Specifies the event payload.
         * @event
         */
        protected onDimensionChange(pEvent: IDimensionChangeEvent<this>): void;
        /** Sets the block reference for the collection. */
        setBlock(pBlock: NodeBlock | ConditionBlock): void;
        /**
         * Inserts a new item to the collection.
         * @param nIndex Specifies the index of the new item.
         * @param fnInit Specifies an init function that can be used to to set item
         * properties before the created marker is invoked.
         * @return Returns a reference to the new item instance.
         */
        insert(nIndex?: number, fnInit?: (pItem: T) => void): T;
        /**
         * Appends a new item to the end of the collection.
         * @param fnInit Specifies an init function that can be used to to set item
         * properties before the created marker is invoked.
         * @return Returns a reference to the new item instance.
         */
        append(fnInit?: (pItem: T) => void): T;
        /**
         * Duplicates an item in the collection.
         * @param pSrc Specifies the source item.
         * @return Returns an object with a reference to the duplicate and a function
         * that should be called when the duplicated item is ready. This allows you
         * to configure the duplicate before the markers are invoked.
         */
        duplicate(pSrc: CollectionItem): {
            readonly item: T;
            readonly done: () => void;
        };
        /**
         * Retrieves the item with the specified identifier.
         * @param sId Specifies the identifier.
         * @return Returns the item or `undefined` if the item is not found.
         */
        itemByIdentifier(sId: string): T | undefined;
        /** Refreshes all items in the collection. */
        refresh(): void;
        /**
         * Serializes a collection.
         * @return Returns an array with serialized items.
         */
        serialize(): ICollectionItem[] | undefined;
        /**
         * Dserializes an array of items to the collection.
         * @param pItems Specifies the items.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @return Returns a reference to the collection instance.
         */
        deserialize(pItems: ICollectionItem[] | undefined, pAfterwards: Stack): this;
    }
}

declare module "tripetto/helpers/collection/item" {
    /** Dependencies */
    import { Collection } from "tripetto/helpers/collection/collection";
    import { EditorOrchestrator } from "tripetto/components/controller/editor/orchestrator";
    import { TItemEvents } from "tripetto/helpers/collection/events";
    import { Item } from "tripetto/module/matrix";
    import { ISerialize } from "tripetto/module/serializer";
    import { Stack } from "tripetto/module/functional";
    import { MenuOption } from "tripetto/module/ui-menu";
    export interface ICollectionItem extends ISerialize {
        readonly id: string;
    }
    export interface ICollectionItemConstructor<T extends CollectionItem<Reference>, Reference> {
        new (): T;
    }
    export abstract class CollectionItem<Reference = {}> extends Item<TItemEvents> {
        /** Reference to the editor orchestrator. */
        readonly orchestratorForEditor?: EditorOrchestrator<this>;
        /** Creates a new collection item instance. */
        constructor();
        /** Retrieves the editor orchestrator. */
        protected get editor(): EditorOrchestrator<this>;
        /** Retrieves a reference to the parent collection. */
        get collection(): Collection<CollectionItem<Reference>, Reference>;
        /** Retrieves the identifier of the item. */
        get id(): string;
        /** Retrieves the reference. */
        get ref(): Reference;
        /** Retrieves if the block is initialized. */
        get isInitialized(): boolean;
        /** Retrieves if the item is deleted. */
        get isDeleted(): boolean;
        /** Retrieves the label for the item (this is the name of the item without any markdown). */
        get labelWithoutMarkdown(): string;
        /** Retrieves the icon of an item. */
        getIconOfItem(): string | undefined;
        /** Retrieves the name of an item. */
        getNameOfItem(): string;
        /** Sets the name of an item. */
        setNameOfItem(sName: string): void;
        /** Retrieves the alias of an item. */
        getAliasOfItem(): string;
        /** Sets the alias of an item. */
        setAliasOfItem(sAlias: string): void;
        /** Retrieves the score of an item. */
        getScoreOfItem(): number | undefined;
        /** Sets the score of an item. */
        setScoreOfItem(nScore: number | undefined): void;
        /** Retrieves the title for the item. */
        getTitleOfItem(): string;
        /** Retrieves the option menu for the item. */
        getMenuOfItem(): MenuOption[];
        /** Retrieves the width of the item panel. */
        getWidthOfItem(): number;
        /**
         * Serializes an item.
         * @return Returns the serialized item.
         */
        serialize(): ICollectionItem;
        /**
         * Deserializes an item.
         * @param pItem Reference to the serialized item.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @return Returns a reference to the item instance.
         */
        deserialize(pItem: ICollectionItem, pAfterwards: Stack): this;
        /** Opens the item panel. */
        open(): this;
        /** Closes the item panel. */
        close(): this;
        /** Refreshes the collection item. */
        refresh(type?: "icon" | "name"): void;
        /** Deletes an item. */
        delete(): this;
    }
}

declare module "tripetto/helpers/collection/events" {
    /** Dependencies */
    import { CollectionItem } from "tripetto/helpers/collection/item";
    import { IHookPayload, THooks } from "tripetto/module/hookup";
    export type TItemEvents = "OnAdd" | "OnRename" | "OnIndex" | "OnIcon" | "OnDelete" | "OnOpen" | "OnClose";
    export interface IItemEvent<H extends THooks, T extends CollectionItem<Reference>, Reference> extends IHookPayload<H> {
        /** Reference to the item. */
        readonly item: T;
    }
    export interface IItemAddEvent<T extends CollectionItem<Reference>, Reference> extends IItemEvent<"OnAdd", T, Reference> {}
    export interface IItemRenameEvent<T extends CollectionItem<Reference>, Reference> extends IItemEvent<"OnRename", T, Reference> {}
    export interface IItemIndexEvent<T extends CollectionItem<Reference>, Reference> extends IItemEvent<"OnIndex", T, Reference> {}
    export interface IItemIconEvent<T extends CollectionItem<Reference>, Reference> extends IItemEvent<"OnIcon", T, Reference> {}
    export interface IItemDeleteEvent<T extends CollectionItem<Reference>, Reference> extends IItemEvent<"OnDelete", T, Reference> {}
    export interface IItemOpenEvent<T extends CollectionItem<Reference>, Reference> extends IItemEvent<"OnOpen", T, Reference> {}
    export interface IItemCloseEvent<T extends CollectionItem<Reference>, Reference> extends IItemEvent<"OnClose", T, Reference> {}
}

declare module "tripetto/components/controller/collection/properties" {
    /** Dependencies */
    import { Collection } from "tripetto/helpers/collection/collection";
    import { CollectionItem } from "tripetto/helpers/collection/item";
    import { MenuOption } from "tripetto/module/ui-menu";
    import { MarkdownFeatures } from "tripetto/module/markdown";
    export interface ICollectionProperties<T extends CollectionItem<Reference>, Reference> {
        /** Reference to the collection. */
        readonly collection: Collection<T, Reference>;
        /** Title for the collection card. */
        readonly title: string;
        /** Specifies a banner for collection card. */
        readonly banner?: string;
        /** Specifies the collection sorting type (defaults to `manual`). */
        readonly sorting?: "ascending" | "descending" | "manual";
        /** Specifies the placeholder for unnamed items. */
        readonly placeholder?: string;
        /** Specifies the message that is shown when the collection is empty. */
        readonly emptyMessage?:
            | string
            | {
                  readonly message: string;
                  readonly height: number;
              };
        /** Specifies if an icon is shown for each item (a default icon can be supplied). */
        readonly icon?: boolean | string;
        /** Specifies if the name of the items can be edited in the list by double tapping on the name. */
        readonly editable?: boolean;
        /** Specifies whether to open the editor panel of new items when they are added. */
        readonly autoOpen?: boolean;
        /** Specifies if the option to automatically sort the list is shown (enabled by default). */
        readonly allowAutoSorting?: boolean;
        /**
         * Specifies if the option to delete all unnamed items is shown (enabled by
         * default). When a string is supplied the option is enabled and that string
         * is shown as menu option to execute the cleanup.
         */
        readonly allowCleanup?: boolean | string;
        /** Specifies if variables are supported. */
        readonly allowVariables?: boolean;
        /** Specifies if markdown formatting is rendered in the list. */
        readonly allowFormatting?: boolean;
        /** Specifies if the bulk item importer is allowed. */
        readonly allowImport?: boolean;
        /** Specifies if the bulk item exporter is allowed. */
        readonly allowExport?: boolean;
        /** Specifies if the deduplication function is allowed. */
        readonly allowDedupe?: boolean;
        /** Specifies to show aliases. */
        readonly showAliases?: boolean | ((pItem: T) => string | undefined);
        /** Specifies to show scores. */
        readonly showScores?: boolean | ((pItem: T) => number | string | undefined);
        /** Specifies the markdown features that are enabled. */
        readonly markdown?: MarkdownFeatures;
        /** Specifies a menu that is shown when the user wants to add something to the collection. */
        readonly menu?: MenuOption[] | (() => MenuOption[]);
        /** Specifies the width if the item panel. */
        readonly width?: number;
        /** Specifies an indicator. */
        readonly indicator?: (pItem: T) => string | undefined;
        /** Invoked when an item is added to the collection. */
        readonly onAdd?: (pItem: T) => void;
        /** Invoked when the name of the item is changed. */
        readonly onRename?: (pItem: T) => void;
        /** Invoked when the position of the item is changed. */
        readonly onReposition?: (pItem: T) => void;
        /** Invoked when the number of items in the collection is changed. */
        readonly onResize?: (collection: Collection<T, Reference>) => void;
        /** Invoked when an item is removed from the collection. */
        readonly onDelete?: (pItem: T) => void;
        /** Invoked when an item is opened. */
        readonly onOpen?: (pItem: T) => void;
        /** Invoked when an item is closed. */
        readonly onClose?: (pItem: T) => void;
    }
}

declare module "tripetto/components/controller/collection/card" {
    /** Dependencies */
    import { Card } from "tripetto/module/ui-cards";
    import { CollectionItem } from "tripetto/helpers/collection/item";
    import { Element } from "tripetto/module/dom";
    import { ICollectionProperties } from "tripetto/components/controller/collection/properties";
    export class CollectionCard<T extends CollectionItem<Reference>, Reference> extends Card {
        /**
         * Creates a new collection card.
         * @param pProperties Specifies the properties for the collection.
         */
        constructor(pProperties: ICollectionProperties<T, Reference>);
        /** Retrieves the default icon for collection items. */
        get icon(): string | undefined;
        /** Sets the default icon for collection items. */
        set icon(sIcon: string | undefined);
        /** Retrieves the item placeholder. */
        get placeholder(): string;
        /** Retrieves the width of the item panel. */
        get width(): number;
        /** Retrieves the current banner. */
        get banner(): string;
        /** Sets the current banner. */
        set banner(sBanner: string);
        /**
         * Draws the form.
         * @param pCard Reference to the card element.
         * @event
         */
        protected onDraw(pCard: Element): void;
        /**
         * Invoked when the card layer is resized.
         * @event
         */
        protected onResize(): void;
        /**
         * Invoked when the card is destroyed.
         * @event
         */
        protected onDestroy(): void;
        /**
         * Initializes the card.
         * @event
         */
        onInit(): boolean;
        /**
         * Invoked when the name of an item is changed.
         * @param pItem Reference to the item which name is changed.
         * @event
         */
        onRename(pItem: T): void;
        /**
         * Invoked when the item is opened.
         * @param pItem Reference to the item which is opened.
         * @event
         */
        onOpen(pItem: T): void;
        /**
         * Invoked when the item is closed.
         * @param pItem Reference to the item which is closed.
         * @event
         */
        onClose(pItem: T): void;
        /**
         * Measures the size of the card.
         * @return Returns `true` if the size is changed.
         */
        measure(): boolean;
        /**
         * Sorts the list with items.
         * @param sDirection Specifies the sort direction.
         */
        sort(sDirection: "ascending" | "descending"): void;
        /** Deletes all unnamed items from the collection. */
        deleteUnnamed(): void;
        /** Deletes all items from the collection. */
        deleteAll(): void;
        /** Refreshes all data in the collection. */
        refresh(): void;
        /** Shows the item import panel. */
        import(): void;
        /** Shows the item export panel. */
        export(): void;
        /** Removes items with duplicate names from the collection. */
        deduplicate(): void;
        /** Changes the aliases setting. */
        aliases(pAliases: boolean | ((pItem: T) => string | undefined) | undefined): this;
        /** Changes the scores setting. */
        scores(pScores: boolean | ((pItem: T) => number | string | undefined) | undefined): this;
        /** Changes the indicators function. */
        indicators(pIndicators: ((pItem: T) => string | undefined) | undefined): this;
    }
}

declare module "tripetto/components/controller/controller" {
    /** Dependencies */
    import { Cards } from "tripetto/module/ui-cards";
    import { IBuilderStyle } from "tripetto/styles/builder";
    import { Layer } from "tripetto/module/ui-layers";
    import { ToolbarButton, ToolbarItem, ToolbarStatic } from "tripetto/module/ui-toolbar";
    export abstract class Controller<Reference, Views = void> {
        /** Static reference to the builder styles. */
        static style: IBuilderStyle;
        /** Ref to the close button if enabled. */
        readonly closeButton: ToolbarButton<Views> | undefined;
        /**
         * Creates a new controller instance.
         * @param pLayer Reference to the parent layer.
         * @param pReference Reference to some data.
         * @param sTitle Specifies the title.
         * @param sMode Specifies the mode.
         * @param pStyle Reference to the style.
         * @param sLocation Specifies the location of the pane.
         * @param sCloseButtonType Specifies if the close button mode.
         * @param sCloseButtonLabel Specifies the label of the close button.
         * @param pToolbarItems Specifies custom toolbar items.
         */
        protected constructor(
            pLayer: Layer,
            pReference: Reference,
            sTitle?: string,
            sMode?: "normal" | "compact",
            pStyle?: IBuilderStyle,
            sLocation?: "left" | "right",
            sCloseButtonMode?: "always-on" | "on-when-validated" | "disabled",
            sCloseButtonLabel?: string,
            pToolbarItems?: ToolbarItem<Views>[]
        );
        /** Retrieves a reference to the style. */
        protected get style(): IBuilderStyle;
        /** Retrieves a reference to the layer. */
        protected get layer(): Layer;
        /** Retrieves the cards instance. */
        protected get cards(): Cards | undefined;
        /** Sets the cards instance. */
        protected set cards(pCards: Cards | undefined);
        /** Retrieves a reference to the data. */
        protected get ref(): Reference;
        /** Retrieves a reference to the title. */
        protected get title(): ToolbarStatic<Views> | undefined;
        /**
         * Invoked when the header is constructed.
         * @param sTitle Specifies the title.
         * @return Should return an array with toolbar items.
         * @event
         */
        protected onHeader(sTitle: string): ToolbarItem<Views>[];
        /**
         * Invoked when the properties controller should be constructed.
         * @param sMode Specifies the mode.
         * @event
         */
        protected onLayer(sMode: "normal" | "compact"): void;
        /**
         * Invoked when the layer is updated.
         * @event
         */
        protected onLayerUpdate(): void;
        /**
         * Implements the cards.
         * @param pCards Reference to the cards instance.
         * @event
         */
        protected abstract onCards(pCards: Cards): void;
        /**
         * Invoked when the controller is destroyed.
         * @event
         */
        protected onDestroy(): void;
        /** Closes the controller. */
        close(): void;
        /** Scrolls the cards layer to the top or bottom. */
        scrollToTopOrBottom(): void;
    }
}

declare module "tripetto/components/l10n" {
    import { Controller } from "tripetto/components/controller/controller";
    import { Cards } from "tripetto/module/ui-cards";
    import { Layer } from "tripetto/module/ui-layers";
    import { IBuilderStyle } from "tripetto/styles/builder";
    import { ToolbarItem } from "tripetto/module/ui-toolbar";
    import { TTranslation } from "tripetto/module/l10n";
    import { TL10n, TL10nContract } from "tripetto/module/contracts";
    import { Builder } from "tripetto/builder";
    export class L10nEditor<Views = void> extends Controller<
        {
            readonly contract: TL10nContract;
            readonly l10n: TL10n;
            builder?: Builder;
        },
        Views
    > {
        whenClosed?: () => void;
        constructor(
            layer: Layer,
            contract: TL10nContract,
            builder?: Builder,
            l10n?: TL10n,
            onChange?: (l10n: TL10n, currentL10n: TL10n) => void,
            onTranslation?: (
                language: string
            ) => TTranslation | TTranslation[] | Promise<TTranslation | TTranslation[] | undefined> | undefined,
            title?: string,
            style?: IBuilderStyle,
            location?: "left" | "right",
            toolbarItems?: ToolbarItem<Views>[]
        );
        onCards(cards: Cards): void;
    }
}

declare module "tripetto/components/loader" {
    /** Dependencies */
    import { Element } from "tripetto/module/dom";
    export class Loader {
        static create(sColor: string, nSize: number, pParent?: Element): Loader;
        destroy(): void;
    }
}

declare module "tripetto/helpers/menu" {
    /** Exports */
    export * from "tripetto/module/ui-menu";
    export { Item as MenuItemWithIcon } from "tripetto/helpers/menu/item";
    export { Link as MenuLinkWithIcon } from "tripetto/helpers/menu/link";
    export { Submenu as MenuSubmenuWithIcon } from "tripetto/helpers/menu/submenu";
}

declare module "tripetto/components/styles" {
    import { TStyleTiers, TStyles, TStylesContract } from "tripetto/module/contracts";
    import { Controller } from "tripetto/components/controller/controller";
    import { Cards } from "tripetto/module/ui-cards";
    import { Layer } from "tripetto/module/ui-layers";
    import { IBuilderStyle } from "tripetto/styles/builder";
    import { ToolbarItem } from "tripetto/module/ui-toolbar";
    export class StylesEditor<Views = void> extends Controller<
        {
            readonly contract: TStylesContract;
            readonly styles: TStyles;
            readonly tier: TStyleTiers | undefined;
            readonly hideInaccessibleOptions: boolean;
            readonly allowReset: boolean;
            readonly onReset?: (fnDone: (bReset: boolean) => void) => void;
        },
        Views
    > {
        whenClosed?: () => void;
        constructor(
            layer: Layer,
            contract: TStylesContract,
            styles?: TStyles,
            tier?: TStyleTiers,
            onChange?: (styles: TStyles) => void,
            hideInaccessibleOptions?: boolean,
            allowReset?: boolean,
            onReset?: (fnDone: (bReset: boolean) => void) => void,
            title?: string,
            style?: IBuilderStyle,
            location?: "left" | "right",
            toolbarItems?: ToolbarItem<Views>[]
        );
        onCards(cards: Cards): void;
    }
}

declare module "tripetto/components/tutorial" {
    import { ITutorialStyle } from "tripetto/components/tutorial/style";
    import { Layer, LayerComponent } from "tripetto/module/ui-layers";
    export class Tutorial extends LayerComponent {
        /** Opens the tutorial layer. */
        static open(pLayer: Layer, pStyle: ITutorialStyle): Tutorial;
        /** Renders the layer. */
        protected onRender(): void;
    }
}

declare module "tripetto/components/map" {
    import { Layer } from "tripetto/module/ui-layers";
    import { Renderer } from "tripetto/module/ui-grid2layer";
    import { Branch, Cluster, Condition, IPrologue, Map, Node } from "tripetto/module/map";
    import { IBuilderStyle } from "tripetto/styles/builder";
    import { TBuilderEditEpilogue, TBuilderEditTypes } from "tripetto/events";
    import { ITier } from "tripetto/tier";
    /** Exports */
    export { MapLayout } from "tripetto/components/map/map/layout";
    export { ClusterLayout } from "tripetto/components/map/cluster/layout";
    export { NodeLayout } from "tripetto/components/map/node/layout";
    export { INodeDrawing } from "tripetto/components/map/node/drawing";
    export { BranchLayout } from "tripetto/components/map/branch/layout";
    export { ConditionLayout } from "tripetto/components/map/condition/layout";
    export { IConditionDrawing } from "tripetto/components/map/condition/drawing";
    export interface IPane {
        isVisible: boolean;
    }
    //@ts-ignore
    export class Map2Layer extends Renderer<Map, Map | Branch | Cluster | Node | Condition, IBuilderStyle> {
        /** Contains if the prologue feature is supported. */
        readonly supportsPrologue: boolean;
        /** Contains if the epilogue feature is supported. */
        readonly supportsEpilogue: boolean;
        /**
         * Constructs a new map layer renderer.
         * @param pLayer Specifies the layer.
         * @param pStyle Specifies the map styles.
         * @param pTier Specified the tier.
         * @param bPrologue Specifies if the prologue feature is enabled.
         * @param bEpilogue Specifies if the epilogue feature is enabled.
         * @param fnOnEdit Specifies a function that is invoked when a map element is edited.
         * @param pPanes References to panes that should hide when a panel is opened.
         */
        constructor(
            pLayer: Layer,
            pStyle: IBuilderStyle,
            pTier: ITier | undefined,
            bPrologue: boolean,
            bEpilogue: boolean,
            fnOnEdit:
                | ((
                      sAction: "start" | "end",
                      sType: TBuilderEditTypes,
                      pRef: Map | IPrologue | Branch | Cluster | Node | Condition | TBuilderEditEpilogue | undefined,
                      fnSubscribe?: (
                          on: (pRef: Map | IPrologue | Branch | Cluster | Node | Condition | TBuilderEditEpilogue | undefined) => void
                      ) => void
                  ) => void)
                | undefined,
            ...pPanes: (IPane | undefined)[]
        );
        /** Retrieves the map. */
        get map(): Map | undefined;
        /** Retrieves the tier. */
        get tier(): ITier | undefined;
        /** Renders the map. */
        protected render(): void;
        /**
         * Fired when a move starts.
         * @event
         */
        onMoveStart(): void;
        /**
         * Fired when the moving ends.
         * @event
         */
        onMoveEnd(): void;
        onEdit(sAction: "start" | "end", sType: "properties", pRef: Map): void;
        onEdit(
            sAction: "start",
            sType: "prologue",
            pRef: IPrologue | undefined,
            fnSubscribe?: (on: (pRef: IPrologue | undefined) => void) => void
        ): void;
        onEdit(sAction: "end", sType: "prologue", pRef: IPrologue | undefined): void;
        onEdit(
            sAction: "start",
            sType: "epilogue",
            pRef: TBuilderEditEpilogue | undefined,
            fnSubscribe?: (on: (pRef: TBuilderEditEpilogue | undefined) => void) => void
        ): void;
        onEdit(sAction: "end", sType: "epilogue", pRef: TBuilderEditEpilogue | undefined): void;
        onEdit(sAction: "start" | "end", sType: "branch", pRef: Branch): void;
        onEdit(sAction: "start" | "end", sType: "cluster", pRef: Cluster): void;
        onEdit(sAction: "start" | "end", sType: "node", pRef: Node): void;
        onEdit(sAction: "start" | "end", sType: "condition", pRef: Condition): void;
    }
}

declare module "tripetto/helpers/blocks/blocks" {
    export class Blocks {
        /** Retrieves if the blocks are loaded. */
        static get isLoaded(): boolean;
        /** Loads the blocks. */
        static load(fnDone: (bSucceeded: boolean, sLog: string) => void): void;
    }
}

declare module "tripetto/helpers/blocks/conditions/block" {
    import { ConditionBlock, IConditionBlock } from "tripetto/module/map";
    import { EditorOrchestrator } from "tripetto/components/controller/editor/orchestrator";
    import { Element } from "tripetto/module/dom";
    import { IConditionBlockType } from "tripetto/helpers/blocks/conditions/type";
    import { IConditionDrawing } from "tripetto/components/map/condition/drawing";
    import { ISerialize } from "tripetto/module/serializer";
    import { Layer } from "tripetto/module/ui-layers";
    import { Stack } from "tripetto/module/functional";
    import { SVGImage } from "tripetto/helpers/svg";
    export abstract class ConditionBlockEx extends ConditionBlock {
        /** Contains the icon of the block. */
        static readonly icon: SVGImage | string;
        /** Reference to the block type. */
        readonly type: IConditionBlockType<this>;
        /** Reference to the editor orchestrator. */
        readonly orchestratorForEditor?: EditorOrchestrator<this>;
        /** Retrieves the editor orchestrator. */
        protected get editor(): EditorOrchestrator<this>;
        /** Retrieves the icon for the block. */
        get icon(): SVGImage | string;
        /** Retrieves the title for the block. */
        get title(): string | undefined;
        /**
         * Block is assigned to a condition.
         * @param pPrevious Reference to the previous block that was attaced to the condition.
         * @return Returns a reference to the block instance.
         */
        assignedToCondition(pPrevious?: ConditionBlock): () => void;
        /**
         * Overrides the default condition drawing and allows a custom drawing for
         * the block in the supplied element. A typical condition drawing
         * contains a label for the condition name and a button element for the
         * context menu. You should return references to those elements in an
         * `IConditionDrawing` object which should be returned by your draw function.
         * @param pElement Reference to the element to draw on.
         * @param nWidth Specifies the width of the element in pixels.
         * @param nHeight Specifies the height of the element in pixels.
         * @param bRedraw Specifies if the node is completely redrawn.
         * @return Returns a `INodeDrawing` object.
         */
        draw(pElement: Element, nWidth: number, nHeight: number, bRedraw: boolean): IConditionDrawing | undefined;
        /**
         * Rerenders the block.
         * @param bShouldRerender Specifies if the condition should rerender.
         * @event
         */
        rerender(bShouldRerender?: boolean): void;
        /**
         * Invoked when the block editor is opened. You can use this to override the
         * default properties layer. If you implement your own layer you should
         * return `true`.
         * @param pLayer Specifies the parent layer.
         * @return Returns `true` if the block has its own properties layer.
         */
        open(pLayer: Layer): boolean;
        /**
         * Serializes a block.
         * @return Returns a reference to the serialized block.
         */
        serialize(pProperties?: ISerialize): IConditionBlock;
        /**
         * Deserializes to a block instance.
         * @param pBlock Contains the serialized block.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @return Returns a reference to the instance.
         */
        deserialize(pBlock: IConditionBlock, pAfterwards: Stack): this;
    }
}

declare module "tripetto/helpers/blocks/conditions/menu" {
    /** Dependencies */
    import { Condition } from "tripetto/module/map";
    import { IConditionGroup, IConditionTemplate, IConditionTemplateCommand } from "tripetto/helpers/conditions/interface";
    import { MenuOption } from "tripetto/module/ui-menu";
    /**
     * Parses the condition templates to an actionable menu.
     * @param pConditions Specifies the condition templates.
     * @param fnCreateCondition Specifies the function which is invoked when a
     * condition is requested.
     * @param pOptions Specifies the options array.
     * @param pCommands Contains all commands.
     * @return Returns a function which adds all conditions if invoked.
     */
    export function conditionTemplatesToMenu(
        pConditions: (IConditionTemplate | IConditionGroup)[],
        fnCreateCondition: () => Condition,
        pOptions?: MenuOption[],
        pCommands?: IConditionTemplateCommand[]
    ): MenuOption[];
}

declare module "tripetto/helpers/blocks/conditions/type" {
    /** Dependencies */
    import { ConditionBlock, TConditionBlock } from "tripetto/module/map";
    import { SVGImage } from "tripetto/helpers/svg";
    export interface IConditionBlockType<T extends ConditionBlock = ConditionBlock> extends TConditionBlock<T> {
        /** Contains the icon image for the block. */
        readonly icon: SVGImage | string;
        /** Specifies if the condition editor should be opened automatically. */
        readonly autoOpen?: boolean;
    }
}

declare module "tripetto/helpers/blocks/nodes/decorator" {
    /** Dependencies */
    import { INodeBlockDecorator } from "tripetto/module/map";
    import { SVGImage } from "tripetto/helpers/svg";
    export interface INodeBlockDecoratorEx extends INodeBlockDecorator {
        /** Contains the icon image for the block. */
        readonly icon: SVGImage | string;
    }
}

declare module "tripetto/helpers/blocks/nodes/type" {
    /** Dependencies */
    import { NodeBlock, TNodeBlock } from "tripetto/module/map";
    import { SVGImage } from "tripetto/helpers/svg";
    export interface INodeBlockType<T extends NodeBlock = NodeBlock> extends TNodeBlock<T> {
        /** Contains the icon image for the block. */
        readonly icon: SVGImage | string;
    }
}

declare module "tripetto/helpers/blocks/nodes/block" {
    /** Dependencies */
    import { ConditionsOrchestrator } from "tripetto/helpers/conditions/orchestrator";
    import { EditorOrchestrator } from "tripetto/templates";
    import { Element } from "tripetto/module/dom";
    import { INodeBlockType } from "tripetto/helpers/blocks/nodes/type";
    import { INodeDrawing } from "tripetto/components/map/node/drawing";
    import { Layer } from "tripetto/module/ui-layers";
    import { NodeBlock } from "tripetto/module/map";
    import { SVGImage } from "tripetto/helpers/svg";

    export abstract class NodeBlockEx extends NodeBlock {
        /** Contains the icon of the block. */
        static readonly icon: SVGImage | string;
        /** Reference to the block type. */
        readonly type: INodeBlockType<this>;
        /** Reference to the editor orchestrator. */
        readonly orchestratorForEditor?: EditorOrchestrator<this>;
        /** Reference to the condition templates orchestrator. */
        readonly orchestratorForConditions?: ConditionsOrchestrator;
        /** Retrieves the editor orchestrator. */
        protected get editor(): EditorOrchestrator<this>;
        /** Retrieves the condition templates orchestrator. */
        protected get conditions(): ConditionsOrchestrator;
        /** Retrieves the icon for the block. */
        get icon(): SVGImage | string;
        /** Retrieves if the node is required or can be skipped. */
        get isRequired(): boolean;
        /**
         * The block is assigned to a node.
         * @param pPrevious Reference to the previous block that was attached to the node.
         * @return Returns a reference to the block instance.
         */
        assignedToNode(pPrevious?: NodeBlock): () => void;
        /**
         * Overrides the default node drawing and allows a custom drawing for the
         * block in the supplied element. A typical node drawing contains a
         * label for the node name, a label for the block type name and a
         * button element for the context menu. You should return references to
         * those elements in an `INodeDrawing` object which should be returned by
         * your draw function.
         * @param pElement Reference to the element to draw on.
         * @param nWidth Specifies the width of the element in pixels.
         * @param nHeight Specifies the height of the element in pixels.
         * @param bRedraw Specifies if the node is completely redrawn.
         * @param bDisabled Specifies if the node is disabled (if so, the element will also have a selector with name `disabled`).
         * @param bRequired Specifies if the node is required (if so, the element will also have a selector with name `required`).
         * @param bNamed Specifies if the node has a name (if so, the element will also have a selector with name `named`).
         * @return Returns a `INodeDrawing` object.
         */
        draw(
            pElement: Element,
            nWidth: number,
            nHeight: number,
            bRedraw: boolean,
            bDisabled: boolean,
            bRequired: boolean,
            bNamed: boolean
        ): INodeDrawing | undefined;
        /**
         * Rerenders the block.
         * @param bShouldRerender Specifies if the node should rerender.
         * @event
         */
        rerender(bShouldRerender?: boolean): void;
        /**
         * Invoked when the block editor is opened. You can use this to override the
         * default properties layer. If you implement your own layer you should
         * return `true`.
         * @param pLayer Specifies the parent layer.
         * @return Returns `true` if the block has its own properties layer.
         */
        open(pLayer: Layer): boolean;
    }
}

declare module "tripetto/helpers/blocks/decorator" {
    import { IConditionBlockDecorator, IConditionBlockType, INodeBlockDecorator, INodeBlockType } from "tripetto/helpers/blocks";
    /**
     * Defines a node block.
     * @param pProperties Specifies the properties for the block.
     */
    export function tripetto(pProperties: INodeBlockDecorator): (pBlock: INodeBlockType) => void;
    /**
     * Defines a condition block.
     * @param pProperties Specifies the properties for the block.
     */
    export function tripetto(pProperties: IConditionBlockDecorator): (pBlock: IConditionBlockType) => void;
}

declare module "tripetto/helpers/svg/line" {
    /** Dependencies */
    import { Spacing } from "tripetto/module/metrics";
    /**
     * Draws a horizontal or vertical line in SVG.
     * @param pProperties Specifies the line properties.
     * @return Returns the SVG line.
     */
    export function SVGLine(pProperties: {
        orientation: "horizontal" | "vertical";
        alignment: "left" | "top" | "right" | "bottom" | "center";
        width: number;
        height: number;
        thickness: number;
        color: string;
        dotted?: "no" | "begin-with-dot" | "begin-with-gap";
        arrows?: "no" | "begin" | "end";
        spacing?: Spacing;
        break?: {
            from: number;
            size: number;
        };
    }): string;
}

declare module "tripetto/helpers/svg/colorize" {
    /** Dependencies */
    import { SVGImage } from "tripetto/helpers/svg";
    export function SVGColorizePath(sBase64Image: SVGImage | string, sColor: string): string;
}

declare module "tripetto/templates/scores/scores" {
    /** Dependencies */
    import { Numeric } from "tripetto/module/ui-form-numeric";
    import { EditorOrchestrator } from "tripetto/components/controller/editor/orchestrator";
    import { Feature } from "tripetto/module/ui-cards";
    import { Slots } from "tripetto/module/slots";
    import { CollectionCard } from "tripetto/components/controller/collection/card";
    import { CollectionItem } from "tripetto/helpers/collection/item";
    export interface IScoresFeature {
        /** Reference to the target. */
        readonly target: {
            readonly slots: Slots;
        };
        /** Optional description. */
        readonly description?: string;
        /** Specifies if the slot is exportable or not (default is `false`). */
        readonly exportable?: boolean;
        /** Specifies scores to display inside the feature. */
        readonly scores?: Numeric[];
        /** Specifies a collection that holds the scores. */
        readonly collection?: CollectionCard<CollectionItem<{}>, {}> | Feature;
    }
    /**
     * Adds score feature.
     * @param pOrchestrator Reference to the editor orchestrator.
     * @param pProperties Specifies the score feature properties.
     * @return Returns a reference to the score feature.
     */
    export function scores<Reference>(pOrchestrator: EditorOrchestrator<Reference>, pProperties: IScoresFeature): Feature;
}

declare module "tripetto/templates/numeric/numeric" {
    import { Numeric } from "tripetto/module/ui-form-numeric";
    import { EditorOrchestrator } from "tripetto/components/controller/editor/orchestrator";
    import { Card, Feature } from "tripetto/module/ui-cards";
    import { Slots } from "tripetto/module/slots";
    import { CollectionCard } from "tripetto/components/controller/collection/card";
    import { CollectionItem } from "tripetto/helpers/collection/item";
    export interface INumericFeature {
        /** Reference to the target. */
        readonly target: {
            readonly slots: Slots;
        };
        /** Specifies the slot reference. */
        readonly reference: string;
        /** Specifies the slot label. */
        readonly label: string;
        /** Specifies the name of the feature. */
        readonly name: string;
        /** Specifies an optional title for the feature. */
        readonly title?: string;
        /** Optional description. */
        readonly description?: string;
        /** Optional paired feature or card. */
        readonly pair?: Feature | Card | (() => Feature | Card);
        /** Specifies if the slot is exportable or not (default is `false`). */
        readonly exportable?: boolean;
        /** Specifies scores to display inside the feature. */
        readonly scores?: Numeric[];
        /** Specifies a collection that holds the scores. */
        readonly collection?: CollectionCard<CollectionItem<{}>, {}>;
    }
    /**
     * Adds the numeric feature.
     * @param pOrchestrator Reference to the editor orchestrator.
     * @param pProperties Specifies the numeric feature properties.
     * @return Returns a reference to the numeric feature.
     */
    export function numeric<Reference>(pOrchestrator: EditorOrchestrator<Reference>, pProperties: INumericFeature): Feature;
}

declare module "tripetto/helpers/conditions/interface" {
    /** Dependencies */
    import { Condition } from "tripetto/module/map";
    import { SVGImage } from "tripetto/helpers/svg";
    interface IConditionBase {
        /** Label for the template. */
        readonly label: string;
        /** Specifies if the label has possible markdown in it. */
        readonly markdown: boolean;
        /** Icon for the template. */
        readonly icon?: SVGImage | string;
    }
    export interface IConditionTemplate extends IConditionBase {
        /** Specifies if the template should be preceded by a separator. */
        readonly separator?: boolean;
        /** Contains if the condition allows burst creation. */
        readonly burst?: "branches" | "branch" | "pipe";
        /** Command which creates the condition block. */
        readonly command: (pCondition: Condition, bBurst: boolean) => void;
    }
    export interface IConditionGroup extends IConditionBase {
        /** Specifies additional templates. */
        readonly templates: IConditionTemplate[];
    }
    export interface IConditionTemplateCommand {
        readonly label: string;
        readonly burst: "branches" | "branch" | "pipe";
        readonly execute: (pCondition: Condition, bBurst: boolean) => void;
    }
    export {};
}

declare module "tripetto/helpers/conditions/properties" {
    /** Dependencies */
    import { ConditionBlock } from "tripetto/module/map";
    import { IConditionBlockType } from "tripetto/helpers/blocks/conditions/type";
    import { SVGImage } from "tripetto/helpers/svg";
    export interface ITemplateProperties<T extends ConditionBlock> {
        /** Specifies the condition block. */
        readonly condition: IConditionBlockType<T>;
        /** Specifies the label for the condition. */
        readonly label?: string;
        /** Specifies a label for the condition that has markdown in it (overrules the `label` property). */
        readonly markdown?: string;
        /** Specifies the icon for the condition. */
        readonly icon?: SVGImage | string;
        /** Specifies the properties to set on the condition. */
        readonly props?: Partial<Readonly<T>>;
        /** Contains if the condition allows burst creation. Specify `branch` if the condition may burst into a single branch. */
        readonly burst?: boolean | "branch";
        /** Contains if the condition should be opened automatically after creation. */
        readonly autoOpen?: boolean;
        /** Specifies if the template should be preceded by a separator. */
        readonly separator?: boolean;
    }
}

declare module "tripetto/styles/forms" {
    /** Dependencies */
    import { ICardsStyle } from "tripetto/module/ui-cards";
    import { ICollectionStyle } from "tripetto/components/controller/collection/style";
    import { IFormStyle } from "tripetto/module/ui-form";
    import { IToolbarItemStyle, IToolbarMenuStyle, IToolbarStyle } from "tripetto/module/ui-toolbar";
    export interface IFormHeaderStyle {
        /** Header height. */
        height: number;
        /** Header style. */
        style: IToolbarStyle;
        /** Title style. */
        title: {
            /** Specifies the title color. */
            color: string;
            /** Title with icon. */
            withIcon: IToolbarItemStyle;
            /** Title without icon. */
            withoutIcon: IToolbarItemStyle;
        };
        /** Button styles. */
        buttons: {
            /** Style for the type button. */
            type: IToolbarMenuStyle;
            /** Close button. */
            close: IToolbarItemStyle;
        };
    }
    export interface IFormsStyle {
        /** Specifies the background color. */
        background: string;
        /** Specifies the border color. */
        border: string;
        /** Header style. */
        header: IFormHeaderStyle;
        /** Style of the form cards. */
        cards: ICardsStyle;
        /** Form styles. */
        form: IFormStyle;
        /** Contains the collection style. */
        collection: ICollectionStyle;
        /** Specifies the form width. */
        width: {
            /** Normal form. */
            normal: number;
            /** Small form. */
            small: number;
            /** Compact form. */
            compact: number;
        };
    }
}

declare module "tripetto/components/map/map/style" {
    /** Dependencies */
    import { IStyles } from "tripetto/module/dom";
    import { Spacing } from "tripetto/module/metrics";
    import { IScrollbarsStyle } from "tripetto/module/ui-scrollbars";
    import { SVGImage } from "tripetto/helpers/svg";
    import { IBranchStyle } from "tripetto/components/map/branch/style";
    import { IClusterStyle } from "tripetto/components/map/cluster/style";
    import { INodeStyle } from "tripetto/components/map/node/style";
    import { IConditionStyle } from "tripetto/components/map/condition/style";
    export interface IMapStyle {
        /** Cluster styles. */
        clusters: IClusterStyle;
        /** Node styles. */
        nodes: INodeStyle;
        /** Branch styles. */
        branches: IBranchStyle;
        /** Condition styles. */
        conditions: IConditionStyle;
        /** Connector styles. */
        connectors: {
            /** Connector thickness. */
            thickness: number;
            /** Spacing between connectors and elements. */
            spacing: number;
            /** Padding between corners and end points. */
            padding: number;
            /** Corner radius for connectors. */
            radius: number;
            /** Branch connector color. */
            branch: string;
            /** Cluster connector color. */
            cluster: string;
            /** Guides connector color. */
            guides: string;
        };
        /** Startpoint styles. */
        start: {
            /** Width of the start element. */
            width: number;
            /** Height of the start element. */
            height: number;
            /** Start image. */
            image: SVGImage;
            /** Prologue image. */
            prologue: SVGImage;
            /** Hover image. */
            hover?: SVGImage;
            /** Tap image. */
            tap?: SVGImage;
        };
        /** Endpoint styles. */
        end: {
            /** Width of the end element. */
            width: number;
            /** Height of the end element. */
            height: number;
            /** End image. */
            image: SVGImage;
            /** Epilogue image. */
            epilogue: SVGImage;
            /** Hover image. */
            hover?: SVGImage;
            /** Tap image. */
            tap?: SVGImage;
        };
        /** Block icons. */
        blocks: {
            /** Undefined blocks. */
            undefined: SVGImage;
            /** Block error. */
            error: SVGImage;
            /** Static. */
            static: SVGImage;
            /** Note. */
            note: SVGImage;
            /** Branch. */
            branch: SVGImage;
        };
        /** Appearance of ensuing state. */
        ensuing?: IStyles;
        /** Specifies if the rulers should be displayed. */
        rulers: boolean;
        /** Specifies the spacing for the map. */
        spacing?: Spacing;
        /** Specifies the scrollbars style. */
        scrollbars?: IScrollbarsStyle;
        /** Specifies the animation duration. */
        animateDuration?: number;
    }
}

declare module "tripetto/styles/navigator" {
    /** Dependencies */
    import { IToolbarItemStyle, IToolbarStyle } from "tripetto/module/ui-toolbar";
    export interface INavigatorStyle {
        /** Height of the navigator. */
        height: number;
        /** Spacing around the navigator. */
        spacing: number;
        /** Navigator style. */
        style: IToolbarStyle;
        /** Button style. */
        button: IToolbarItemStyle;
        /** Separator style. */
        separator: IToolbarItemStyle;
    }
}

declare module "tripetto/components/tutorial/style" {
    import { IStyles } from "tripetto/module/dom";
    import { IScrollbarsStyle } from "tripetto/module/ui-scrollbars";
    export interface ITutorialStyle {
        width: number;
        height: number;
        margin: number;
        spacing: number;
        appearance: IStyles;
        overlay: IStyles;
        scrollbars: IScrollbarsStyle;
        title: IStyles;
        help: IStyles;
        blocks: {
            row: IStyles;
            appearance: IStyles;
            title: IStyles;
            subtitle: IStyles;
            text: IStyles;
        };
        close: {
            appearance: IStyles;
            hover?: IStyles;
            tap?: IStyles;
        };
    }
}

declare module "tripetto/helpers/menu/item" {
    /** Dependencies */
    import { Element } from "tripetto/module/dom";
    import { Menu, MenuItem } from "tripetto/module/ui-menu";
    export class Item extends MenuItem {
        constructor(nIcon: number, sLabel: string, fnCommand?: () => void, bDisabled?: boolean);
        draw(pMenu: Menu, pElement: Element): void;
    }
}

declare module "tripetto/helpers/menu/link" {
    /** Dependencies */
    import { Element } from "tripetto/module/dom";
    import { Menu, MenuLink } from "tripetto/module/ui-menu";
    export class Link extends MenuLink {
        constructor(nIcon: number, sLabel: string, sURL: string, sTarget?: "self" | "blank");
        draw(pMenu: Menu, pElement: Element): void;
    }
}

declare module "tripetto/helpers/menu/submenu" {
    /** Dependencies */
    import { Element } from "tripetto/module/dom";
    import { Menu, MenuOption, MenuSubmenu } from "tripetto/module/ui-menu";
    export class Submenu extends MenuSubmenu {
        constructor(nIcon: number, sLabel: string, pOptions: MenuOption[] | (() => MenuOption[]), bDisabled?: boolean, bCollapse?: boolean);
        draw(pMenu: Menu, pElement: Element): void;
    }
}

declare module "tripetto/components/map/map/layout" {
    /** Dependencies */
    import { Branch, Cluster, Map } from "tripetto/module/map";
    import { Coordinate } from "tripetto/module/metrics";
    import { IBuilderStyle } from "tripetto/styles/builder";
    import { Layer } from "tripetto/module/ui-layers";
    import { Map2Layer } from "tripetto/components/map";
    import { MoveableLayout } from "tripetto/helpers/layout";
    import { TGridRectangles } from "tripetto/module/grid";
    //@ts-ignore
    export class MapLayout extends MoveableLayout<Map, Map, IBuilderStyle> {
        /**
         * Constructs a new map layout.
         * @param pRenderer Reference to the renderer.
         * @param pMap Reference to the map.
         * @param pLayer Reference to the layer.
         */
        constructor(pRenderer: Map2Layer, pMap: Map, pLayer: Layer);
        /** Returns the map layout configuration. */
        get configuration(): TGridRectangles;
        /** Retrieves a reference to the map. */
        get map(): Map;
        /**
         * Draws the map.
         * @param nLeft Specifies the horizontal position.
         * @param nTop Specifies the vertical position.
         * @param nWidth Specifies the width.
         * @param nHeight Specifies the height.
         * @param nZoom Contains the zoom factor.
         * @param nZ Specifies the z-index.
         * @param bRedraw Specifies if the element is redrawn.
         */
        protected draw(nLeft: number, nTop: number, nWidth: number, nHeight: number, nZoom: number, nZ: number, bRedraw: boolean): void;
        /**
         * Specifies the expansion coordinates for the move detection. These
         * coordinates are applied to the rectangle detection. Use it to
         * expand or contract the rectangle.
         * @param nX Specifies the horizontal mouse coordinate.
         * @param nY Specifies the vertical mouse coordinate.
         * @param pTarget Specifies the target resource.
         * @return Returns the expansion coordinates.
         * @event
         */
        onMoveExpansion(nX: number, nY: number, pTarget: Branch): Coordinate;
        /**
         * Fired when the initiator wants to know if the supplied mouse coordinates
         * are within the map.
         * @param nX Specifies the horizontal mouse coordinate.
         * @param nY Specifies the vertical mouse coordinate.
         * @param pTarget Specifies the target resource.
         * @return Returns `true` if the mouse is within the branch.
         */
        onIsMoveIn(nX: number, nY: number, pTarget: Cluster): boolean;
        /** Opens the prologue editor. */
        prologue(): void;
        /** Opens the epilogue editor. */
        epilogue(): void;
    }
}

declare module "tripetto/components/map/cluster/layout" {
    import { Branch, Cluster, Clusters, Map } from "tripetto/module/map";
    import { Coordinate } from "tripetto/module/metrics";
    import { IBuilderStyle } from "tripetto/styles/builder";
    import { Layer } from "tripetto/module/ui-layers";
    import { Map2Layer } from "tripetto/components/map";
    import { MoveableLayout } from "tripetto/helpers/layout";
    import { TGridRectangles } from "tripetto/module/grid";
    //@ts-ignore
    export class ClusterLayout extends MoveableLayout<Map, Cluster, IBuilderStyle> {
        /**
         * Constructs a new cluster layout.
         * @param pRenderer Reference to the renderer.
         * @param pCluster Reference to the cluster.
         * @param pLayer Reference to the layer.
         */
        constructor(pRenderer: Map2Layer, pCluster: Cluster, pLayer: Layer);
        /** Returns the cluster layout configuration. */
        get configuration(): TGridRectangles;
        /** Retrieves a reference to the cluster. */
        get cluster(): Cluster;
        /** Retrieves a reference to the clusters. */
        get clusters(): Clusters | undefined;
        /**
         * Retrieves the area in which a move can be initiated. In this case the
         * cluster header is the only valid area to initiate a cluster move.
         */
        get moveArea(): Coordinate;
        /**
         * Draws the cluster.
         * @param nLeft Specifies the horizontal position.
         * @param nTop Specifies the vertical position.
         * @param nWidth Specifies the width.
         * @param nHeight Specifies the height.
         * @param nZoom Contains the zoom factor.
         * @param nZ Specifies the z-index.
         * @param bRedraw Specifies if the element is redrawn.
         */
        protected draw(nLeft: number, nTop: number, nWidth: number, nHeight: number, nZoom: number, nZ: number, bRedraw: boolean): void;
        /**
         * Fired when the cluster is about to resize.
         * @param pRectangles Reference to the cluster rectangles.
         */
        beforeResize(pRectangles: TGridRectangles): void;
        /**
         * Sets the dimensions of the layout element.
         * @param nWidth Specifies the width.
         * @param nHeight Specifies the height.
         * @param nZoom Contains the zoom factor.
         * @param sWhat Indicates what is changed.
         */
        resize(nWidth: number, nHeight: number, nZoom: number, sReason: "redraw" | "width" | "height" | "zoom"): void;
        /** Draws the connectors. */
        connectors(): void;
        /**
         * Creates cluster guides.
         * @event
         */
        onGuides(): void;
        /**
         * Invoked when the guides of a rendering are changed.
         * @param bVisible Indicates if the guides should be visible.
         * @param nLeft Specifies the left coordinate of the guides.
         * @param nTop Specifies the top coordinate of the guides.
         * @param nWidth Specifies the width of the guides.
         * @param nHeight Specifies the height of the guides.
         * @param nZoom Specifies the zoom factor of the guides.
         * @event
         */
        onGuidesChange(bVisible: boolean, nLeft: number, nTop: number, nWidth: number, nHeight: number, nZoom: number): void;
        /**
         * Specifies the expansion coordinates for the move detection. These
         * coordinates are applied to the rectangle detection. Use it to
         * expand or contract the rectangle.
         * @param nX Specifies the horizontal mouse coordinate.
         * @param nY Specifies the vertical mouse coordinate.
         * @param pTarget Specifies the target resource.
         * @return Returns the expansion coordinates.
         * @event
         */
        onMoveExpansion(nX: number, nY: number, pTarget: Branch): Coordinate;
        /**
         * Fired when the initiator wants to know if the supplied mouse coordinates
         * are within the cluster.
         * @param nX Specifies the horizontal mouse coordinate.
         * @param nY Specifies the vertical mouse coordinate.
         * @return Returns `true` if the mouse is within the cluster.
         */
        onIsMoveIn(nX: number, nY: number, pTarget: Branch): boolean;
        /**
         * Sets the moving state of a layout.
         * @param bMoving Specifies if the layout is moving.
         * @return Returns `true` if the state is changed.
         */
        moving(bMoving: boolean): boolean;
        /**
         * Sets the following state of a layout.
         * @param bFollowing Specifies if the layout is following.
         * @return Returns `true` if the state is changed.
         */
        following(bFollowing: boolean): boolean;
        /** Opens the cluster editor. */
        edit(): void;
        /** Shows the cluster context menu. */
        contextMenu(): void;
        /** Destroys the layout. */
        destroy(): void;
    }
}

declare module "tripetto/components/map/node/layout" {
    import { IBuilderStyle } from "tripetto/styles/builder";
    import { Layer } from "tripetto/module/ui-layers";
    import { Map2Layer } from "tripetto/components/map";
    import { MoveableLayout } from "tripetto/helpers/layout";
    import { Map, Node, Nodes } from "tripetto/module/map";
    import { TGridRectangles } from "tripetto/module/grid";
    //@ts-ignore
    export class NodeLayout extends MoveableLayout<Map, Node, IBuilderStyle> {
        /**
         * Constructs a new node layout.
         * @param pRenderer Reference to the renderer.
         * @param pNode Reference to the node.
         * @param pLayer Reference to the layer.
         */
        constructor(pRenderer: Map2Layer, pNode: Node, pLayer: Layer);
        /** Returns the node layout configuration. */
        get configuration(): TGridRectangles;
        /** Retrieves a reference to the node. */
        get node(): Node;
        /** Retrieves a reference to the nodes. */
        get nodes(): Nodes | undefined;
        /**
         * Draws the node.
         * @param nLeft Specifies the horizontal position.
         * @param nTop Specifies the vertical position.
         * @param nWidth Specifies the width.
         * @param nHeight Specifies the height.
         * @param nZoom Contains the zoom factor.
         * @param nZ Specifies the z-index.
         * @param bRedraw Specifies if the element is redrawn.
         */
        protected draw(nLeft: number, nTop: number, nWidth: number, nHeight: number, nZoom: number, nZ: number, bRedraw: boolean): void;
        /**
         * Fired when the node becomes part of a dispatcher.
         * @event
         */
        onPush(): void;
        /**
         * Fired when the node becomes the last item.
         * @event
         */
        onLast(): void;
        /**
         * Creates node guides.
         * @event
         */
        onGuides(): void;
        /**
         * Invoked when the guides of a rendering are changed.
         * @param bVisible Indicates if the guides should be visible.
         * @param nLeft Specifies the left coordinate of the guides.
         * @param nTop Specifies the top coordinate of the guides.
         * @param nWidth Specifies the width of the guides.
         * @param nHeight Specifies the height of the guides.
         * @param nZoom Specifies the zoom factor of the guides.
         * @event
         */
        onGuidesChange(bVisible: boolean, nLeft: number, nTop: number, nWidth: number, nHeight: number, nZoom: number): void;
        /** Opens the node editor. */
        edit(): void;
        /** Shows the node context menu. */
        contextMenu(): void;
        /** Destroys the layout. */
        destroy(): void;
    }
}

declare module "tripetto/components/map/node/drawing" {
    /** Dependencies */
    import { Element } from "tripetto/module/dom";
    export interface INodeDrawing {
        /** Contains the node icon element. */
        icon?: Element;
        /** Contains the node label element. */
        label?: Element;
        /** Contains the node type element. */
        type?: Element;
        /** Contains the node button element. */
        button?: Element;
    }
}

declare module "tripetto/components/map/branch/layout" {
    /** Dependencies */
    import { Branch, Branches, Cluster, Condition, Map } from "tripetto/module/map";
    import { Coordinate } from "tripetto/module/metrics";
    import { IBuilderStyle } from "tripetto/styles/builder";
    import { Layer } from "tripetto/module/ui-layers";
    import { Map2Layer } from "tripetto/components/map";
    import { MoveableLayout } from "tripetto/helpers/layout";
    import { TGridRectangles } from "tripetto/module/grid";
    //@ts-ignore
    export class BranchLayout extends MoveableLayout<Map, Branch, IBuilderStyle> {
        /**
         * Constructs a new branch layout.
         * @param pRenderer Reference to the renderer.
         * @param pBranch Reference to the branch.
         * @param pLayer Reference to the layer.
         */
        constructor(pRenderer: Map2Layer, pBranch: Branch, pLayer: Layer);
        /** Returns the branch layout configuration. */
        get configuration(): TGridRectangles;
        /** Retrieves a reference to the branch. */
        get branch(): Branch;
        /** Retrieves a reference to the branches. */
        get branches(): Branches | undefined;
        get x(): number;
        get y(): number;
        /**
         * Specifies the area in which a move can be initiated. In this case the
         * branch and condition header is the only valid area to initiate a
         * branch move.
         */
        get moveArea(): Coordinate;
        /**
         * Draws the branch.
         * @param nLeft Specifies the horizontal position.
         * @param nTop Specifies the vertical position.
         * @param nWidth Specifies the width.
         * @param nHeight Specifies the height.
         * @param nZoom Contains the zoom factor.
         * @param nZ Specifies the z-index.
         * @param bRedraw Specifies if the element is redrawn.
         */
        protected draw(nLeft: number, nTop: number, nWidth: number, nHeight: number, nZoom: number, nZ: number, bRedraw: boolean): void;
        /**
         * Sets the dimensions of the branch.
         * @param nWidth Specifies the width.
         * @param nHeight Specifies the height.
         * @param nZoom Contains the zoom factor.
         * @param sReason Reason for the change.
         */
        resize(nWidth: number, nHeight: number, nZoom: number, sReason: "redraw" | "width" | "height" | "zoom"): void;
        /**
         * Fired when the branch becomes the first item.
         * @event
         */
        onFirst(): void;
        /**
         * Creates the branch guides.
         * @event
         */
        onGuides(): void;
        /**
         * Invoked when the guides of a rendering is changed.
         * @param bVisible Indicates if the guides should be visible.
         * @param nLeft Specifies the left coordinate of the guides.
         * @param nTop Specifies the top coordinate of the guides.
         * @param nWidth Specifies the width of the guides.
         * @param nHeight Specifies the height of the guides.
         * @param nZoom Specifies the zoom factor of the guides.
         * @event
         */
        onGuidesChange(bVisible: boolean, nLeft: number, nTop: number, nWidth: number, nHeight: number, nZoom: number): void;
        /**
         * Specifies the expansion coordinates for the move detection. These
         * coordinates are applied to the rectangle detection. Use it to
         * expand or contract the rectangle.
         * @param nX Specifies the horizontal mouse coordinate.
         * @param nY Specifies the vertical mouse coordinate.
         * @param pTarget Specifies the target resource.
         * @return Returns the expansion coordinates.
         * @event
         */
        onMoveExpansion(nX: number, nY: number, pTarget: Branch): Coordinate;
        /**
         * Fired when the initiator wants to know if the supplied mouse coordinates
         * are within the branch.
         * @param nX Specifies the horizontal mouse coordinate.
         * @param nY Specifies the vertical mouse coordinate.
         * @param pTarget Specifies the target resource.
         * @return Returns `true` if the mouse is within the branch.
         */
        onIsMoveIn(nX: number, nY: number, pTarget: Cluster | Condition): boolean;
        /**
         * Sets the moving state of a branch layout.
         * @param bMoving Specifies if the layout is moving.
         * @return Returns `true` if the state is changed.
         */
        moving(bMoving: boolean): boolean;
        /** Opens the branch edtior. */
        edit(): void;
        /** Shows the branch context menu. */
        contextMenu(): void;
        /** Shows the culling context menu. */
        cullingMenu(): void;
        /** Shows the terminator context menu. */
        terminatorMenu(): void;
        /** Opens the epilogue editor. */
        epilogue(): void;
        /** Destroys the layout. */
        destroy(): void;
    }
}

declare module "tripetto/components/map/condition/layout" {
    /** Dependencies */
    import { Condition, Conditions, Map } from "tripetto/module/map";
    import { IBuilderStyle } from "tripetto/styles/builder";
    import { Layer } from "tripetto/module/ui-layers";
    import { Map2Layer } from "tripetto/components/map";
    import { MoveableLayout } from "tripetto/helpers/layout";
    import { TGridRectangles } from "tripetto/module/grid";
    //@ts-ignore
    export class ConditionLayout extends MoveableLayout<Map, Condition, IBuilderStyle> {
        /**
         * Constructs a new condition layout.
         * @param pRenderer Reference to the renderer.
         * @param pCondition Reference to the condition.
         * @param pLayer Reference to the layer.
         */
        constructor(pRenderer: Map2Layer, pCondition: Condition, pLayer: Layer);
        /** Returns the condition layout configuration. */
        get configuration(): TGridRectangles;
        /** Retrieves a reference to the condition. */
        get condition(): Condition;
        /** Retrieves a reference to the conditions. */
        get conditions(): Conditions | undefined;
        get x(): number;
        get y(): number;
        /**
         * Draws the condition.
         * @param nLeft Specifies the horizontal position.
         * @param nTop Specifies the vertical position.
         * @param nWidth Specifies the width.
         * @param nHeight Specifies the height.
         * @param nZoom Contains the zoom factor.
         * @param nZ Specifies the z-index.
         * @param bRedraw Specifies if the element is redrawn.
         */
        protected draw(nLeft: number, nTop: number, nWidth: number, nHeight: number, nZoom: number, nZ: number, bRedraw: boolean): void;
        /**
         * Fired when the condition becomes part of a dispatcher.
         * @event
         */
        onPush(): void;
        /**
         * Fired when the condition becomes the last item.
         * @event
         */
        onLast(): void;
        /**
         * Creates condition guides.
         * @event
         */
        onGuides(): void;
        /**
         * Invoked when the guides of a rendering are changed.
         * @param bVisible Indicates if the guides should be visible.
         * @param nLeft Specifies the left coordinate of the guides.
         * @param nTop Specifies the top coordinate of the guides.
         * @param nWidth Specifies the width of the guides.
         * @param nHeight Specifies the height of the guides.
         * @param nZoom Specifies the zoom factor of the guides.
         * @event
         */
        onGuidesChange(bVisible: boolean, nLeft: number, nTop: number, nWidth: number, nHeight: number, nZoom: number): void;
        /** Opens the condition editor. */
        edit(): void;
        /** Shows the node context menu. */
        contextMenu(): void;
        /** Destroys the layout. */
        destroy(): void;
    }
}

declare module "tripetto/components/map/condition/drawing" {
    /** Dependencies */
    import { Element } from "tripetto/module/dom";
    export interface IConditionDrawing {
        /** Contains the condition icon element. */
        icon?: Element;
        /** Contains the condition text element. */
        text?: Element;
        /** Contains the condition name element. */
        name?: Element;
        /** Contains the condition label element. */
        label?: Element;
        /** Contains the condition button element. */
        button?: Element;
    }
}

declare module "tripetto/components/controller/collection/style" {
    /** Dependencies */
    import { IStyles } from "tripetto/module/dom";
    import { IToolbarItemStyle, IToolbarMenuStyle, IToolbarStyle } from "tripetto/module/ui-toolbar";
    import { IListStyle } from "tripetto/module/ui-list";
    export interface ICollectionStyle {
        appearance?: IStyles;
        header: {
            height: number;
            style: IToolbarStyle;
            title: IToolbarItemStyle;
            menu: IToolbarMenuStyle;
            import: IToolbarItemStyle;
            splitter: IToolbarItemStyle;
        };
        list: IListStyle;
        footer: {
            height: number;
            style: IToolbarStyle;
            add: IToolbarItemStyle;
        };
        assets: {
            menu: string;
        };
        unnamedIcon: string;
    }
}

declare module "tripetto/components/map/branch/style" {
    /** Dependencies */
    import { SVGImage } from "tripetto/helpers/svg";
    import { IStyles } from "tripetto/module/dom";
    export interface IBranchStyle {
        /** Width of the branch. */
        width: number;
        /** Offset between the left of the branch and the conditions header. */
        left: number;
        /** Offset between the top of the branch and the conditions header. */
        top: number;
        /** Appearance of the branch. */
        appearance: IStyles;
        /** Appearance of moving branch. */
        moving?: IStyles;
        /** Appearance of following branch. */
        following?: IStyles;
        /** Appearance of ensuing branch. */
        ensuing?: IStyles;
        /** Culling styles. */
        culling: {
            /** Width of the culling element. */
            width: number;
            /** Height of the culling element. */
            height: number;
            /** Culling mode first. */
            first: {
                /** Icon image. */
                icon: SVGImage;
                /** Idle image. */
                image: SVGImage;
                /** Hover image. */
                hover?: SVGImage;
                /** Tap image. */
                tap?: SVGImage;
                /** Selected image. */
                selected?: SVGImage;
                /** Guide image. */
                guide?: SVGImage;
            };
            /** Culling mode each. */
            each: {
                /** Icon image. */
                icon: SVGImage;
                /** Idle image. */
                image: SVGImage;
                /** Hover image. */
                hover?: SVGImage;
                /** Tap image. */
                tap?: SVGImage;
                /** Selected image. */
                selected?: SVGImage;
                /** Guide image. */
                guide?: SVGImage;
            };
            /** Culling mode all. */
            all: {
                /** Icon image. */
                icon: SVGImage;
                /** Idle image. */
                image: SVGImage;
                /** Hover image. */
                hover?: SVGImage;
                /** Tap image. */
                tap?: SVGImage;
                /** Selected image. */
                selected?: SVGImage;
                /** Guide image. */
                guide?: SVGImage;
            };
            /** Culling mode none. */
            none: {
                /** Icon image. */
                icon: SVGImage;
                /** Idle image. */
                image: SVGImage;
                /** Hover image. */
                hover?: SVGImage;
                /** Tap image. */
                tap?: SVGImage;
                /** Selected image. */
                selected?: SVGImage;
                /** Guide image. */
                guide?: SVGImage;
            };
        };
        /** Contains the junction settings. */
        junction: {
            /** Width of the junction. */
            width: number;
            /** Height of the junction. */
            height: number;
            /** Size of the junction. */
            size: number;
            /** Idle image. */
            image: SVGImage;
            /** Hover image. */
            hover?: SVGImage;
            /** Tap image. */
            tap?: SVGImage;
            /** Selected image. */
            selected?: SVGImage;
            /** Guide image. */
            guide?: SVGImage;
        };
        /** Styles for the conditions header. */
        header: {
            /** Height of the header. */
            height: number;
            /** Appearance of the header. */
            appearance: IStyles;
            /** Header label. */
            label: {
                /** Label appearance. */
                appearance: IStyles;
                /** Named label appearance. */
                named: IStyles;
            };
            /** Header button. */
            button: {
                /** Button appearance. */
                appearance: IStyles;
                /** Button hover state. */
                hover: IStyles;
                /** Button tap state. */
                tap: IStyles;
                /** Button selected state. */
                selected: IStyles;
            };
        };
        /** Styles for the conditions footer. */
        footer: {
            /** Height of the footer. */
            height: number;
            /** Appearance of the footer. */
            appearance: IStyles;
            /** Hover state of the footer. */
            hover: IStyles;
            /** Tap state of the footer. */
            tap: IStyles;
            /** Selected state of the footer. */
            selected: IStyles;
        };
        /** Terminator styles. */
        terminators: {
            /** Width of the terminator. */
            width: number;
            /** Height of the terminator. */
            height: number;
            /** Continuous terminator. */
            continuous: {
                /** Idle image. */
                image: SVGImage;
                /** Hover image. */
                hover?: SVGImage;
                /** Tap image. */
                tap?: SVGImage;
                /** Selected image. */
                selected?: SVGImage;
                /** Guide image. */
                guide?: SVGImage;
            };
            /** Jump terminator. */
            jump: {
                /** Idle image. */
                image: SVGImage;
                /** Hover image. */
                hover?: SVGImage;
                /** Tap image. */
                tap?: SVGImage;
                /** Selected image. */
                selected?: SVGImage;
                /** Guide image. */
                guide?: SVGImage;
            };
            /** Abort terminator. */
            abort: {
                /** Idle image. */
                image: SVGImage;
                /** Hover image. */
                hover?: SVGImage;
                /** Tap image. */
                tap?: SVGImage;
                /** Selected image. */
                selected?: SVGImage;
                /** Guide image. */
                guide?: SVGImage;
            };
            /** Epilogue terminator. */
            epilogue: {
                /** Idle image. */
                image: SVGImage;
                /** Hover image. */
                hover?: SVGImage;
                /** Tap image. */
                tap?: SVGImage;
                /** Selected image. */
                selected?: SVGImage;
                /** Guide image. */
                guide?: SVGImage;
            };
        };
        /** Branch guides. */
        guides?: {
            /** Guides appearance. */
            appearance: IStyles;
            /** Guides visible. */
            visible: IStyles;
            /** Guides invisible. */
            invisible: IStyles;
        };
    }
}

declare module "tripetto/components/map/cluster/style" {
    /** Dependencies */
    import { SVGImage } from "tripetto/helpers/svg";
    import { IStyles } from "tripetto/module/dom";
    export interface IClusterStyle {
        /** Cluster width. */
        width: number;
        /** Size of the cluster border. */
        borderSize: number;
        /** Contains the junction settings. */
        junction: {
            /** Width of the junction. */
            width: number;
            /** Height of the junction. */
            height: number;
            /** Left position of the junction relative to the cluster element. */
            left: number;
            /** Top position of the junction relative to the cluster element. */
            top: number;
            /** Size of the actual junction. */
            size: number;
            /** Idle image. */
            image: SVGImage;
            /** Hover image. */
            hover?: SVGImage;
            /** Tap image. */
            tap?: SVGImage;
            /** Selected image. */
            selected?: SVGImage;
            /** Guide image. */
            guide?: SVGImage;
        };
        /** Appearance of cluster. */
        appearance: IStyles;
        /** Appearance of moving cluster. */
        moving?: IStyles;
        /** Appearance of following cluster. */
        following?: IStyles;
        /** Appearance of ensuing cluster. */
        ensuing?: IStyles;
        /** Header styles. */
        header: {
            /** Height of the header. */
            height: number;
            /** Appearance of the header. */
            appearance: IStyles;
            /** Header label. */
            label: {
                /** Label appearance. */
                appearance: IStyles;
                /** Named label appearance. */
                named: IStyles;
            };
            /** Header button. */
            button: {
                /** Button appearance. */
                appearance: IStyles;
                /** Button hover state. */
                hover: IStyles;
                /** Button tap state. */
                tap: IStyles;
                /** Button selected state. */
                selected: IStyles;
            };
        };
        /** Footer styles. */
        footer: {
            /** Height of the footer. */
            height: number;
            /** Appearance of the footer. */
            appearance: IStyles;
            /** Hover state of the footer. */
            hover: IStyles;
            /** Tap state of the footer. */
            tap: IStyles;
        };
        /** Contains the branch button settings. */
        branch:
            | {
                  enabled: true;
                  /** Width of the branch button. */
                  width: number;
                  /** Height of the branch button. */
                  height: number;
                  /** Size of the branch button. */
                  size: number;
                  /** Idle image. */
                  image: SVGImage;
                  /** Hover image. */
                  hover?: SVGImage;
                  /** Tap image. */
                  tap?: SVGImage;
                  /** Selected image. */
                  selected?: SVGImage;
              }
            | {
                  enabled: false;
              };
        /** Cluster guides. */
        guides?: {
            /** Guides appearance. */
            appearance: IStyles;
            /** Guides visible. */
            visible: IStyles;
            /** Guides invisible. */
            invisible: IStyles;
        };
    }
}

declare module "tripetto/components/map/node/style" {
    /** Dependencies */
    import { IStyles } from "tripetto/module/dom";
    export interface INodeStyle {
        /** Width of the node. */
        width: number;
        /** Height of the node. */
        height: number;
        /** Appearance of the node. */
        appearance: IStyles;
        /** Appearance of named node. */
        named?: IStyles;
        /** Appearance of required node. */
        required?: IStyles;
        /** Appearance of moving node. */
        moving?: IStyles;
        /** Appearance of following node. */
        following?: IStyles;
        /** Appearance of ensuing node. */
        ensuing?: IStyles;
        /** Appearance of disabled node. */
        disabled: IStyles;
        /** Node icon style. */
        icon: {
            color: string;
            appearance: IStyles;
            required?: IStyles;
        };
        /** Node label style. */
        label: {
            appearance: IStyles;
            variable?: IStyles;
            named?: IStyles;
            required?: IStyles;
        };
        /** Node type style. */
        type: IStyles;
        /** Node button style. */
        button: {
            appearance: IStyles;
            hover?: IStyles;
            tap?: IStyles;
            selected?: IStyles;
        };
        /** Color for the nodes separator. */
        separator: {
            between: string;
            last: string;
        };
        /** Node guides. */
        guides?: {
            /** Guides appearance. */
            appearance: IStyles;
            /** Guides visible. */
            visible: IStyles;
            /** Guides invisible. */
            invisible: IStyles;
        };
    }
}

declare module "tripetto/components/map/condition/style" {
    /** Dependencies */
    import { IStyles } from "tripetto/module/dom";
    export interface IConditionStyle {
        /** Width of the condition. */
        width: number;
        /** Height of the condition. */
        height: number;
        /** Appearance of the condition. */
        appearance: IStyles;
        /** Appearance of moving condition. */
        moving?: IStyles;
        /** Appearance of following condition. */
        following?: IStyles;
        /** Appearance of ensuing condition. */
        ensuing?: IStyles;
        /** Appearance of disabled condition. */
        disabled: IStyles;
        /** Appearance of named condition. */
        named?: IStyles;
        /** Condition icon style. */
        icon: {
            color: string;
            appearance: IStyles;
        };
        /** Condition text style. */
        text: {
            appearance: IStyles;
            named?: IStyles;
            name?: IStyles;
            label?: IStyles;
            variable?: IStyles;
        };
        /** Condition button style. */
        button: {
            appearance: IStyles;
            hover?: IStyles;
            tap?: IStyles;
            selected?: IStyles;
        };
        /** Color for the condition separator. */
        separator: {
            between: string;
            last: string;
        };
        /** Condition guides. */
        guides?: {
            /** Guides appearance. */
            appearance: IStyles;
            /** Guides visible. */
            visible: IStyles;
            /** Guides invisible. */
            invisible: IStyles;
        };
    }
}

declare module "tripetto/module/aes" {
    /**
     * Encrypt string data using AES encryption in counter mode and returns the
     * enrypted data as a string in Base64-encoded ASCII format.
     * @param data Specifies the data to encrypt.
     * @param password Specifies the password used to generate the encryption key.
     * @param bits Specifies the number of bits for the key.
     * @param btoa Specifies the function used to generate the Base64-encoded ASCII string with the encrypted data.
     * @returns Returns the encrypted data as a string in Base64-encoded ASCII format.
     */
    export function encrypt(data: string, password: string, bits: 128 | 192 | 256, btoa: (input: string) => string): string;
    /**
     * Decrypts Base64-encoded data using AES in counter mode.
     * @param data Specifies the data to decrypt.
     * @param password Specifies the password used to generate the encryption key.
     * @param bits Specifies the number of bits for the key.
     * @param atob Specifies the function used to decode the Base64-encoded input data.
     * @returns Returns the decrypted data.
     */
    export function decrypt(data: string, password: string, bits: 128 | 192 | 256, atob: (input: string) => string): string;
}

declare module "tripetto/module/callback" {
    /**
     * Type alias for the callback await function.
     * @param TCallbackAwait.pCallback Reference to the callback.
     */
    export type TCallbackAwait<T> = (pCallback: Callback<T>) => T | Callback<T>;
    /**
     * Type alias for the promise function.
     * @param TPromise.pPromise Contains the promise details.
     */
    export type TPromise<T> = ((pPromise: ICallbackPromise<T>) => void) | undefined;
    /** Defines the promise interface. */
    export interface ICallbackPromise<T> {
        /** Specifies if the await was asynchronous. */
        readonly isAsynchronous: boolean;
        /** Specifies if the await was canceled. */
        readonly isCanceled: boolean;
        /** Specifies the payload which is returned. */
        readonly payload: T | undefined;
    }
    /** Defines the callback properties interface. */
    export interface ICallbackProperties<T> {
        /** Specifies the await function. */
        readonly await: TCallbackAwait<T>;
        /** Specifies the promise function. */
        readonly promise: TPromise<T>;
        /**
         * Specifies if the callback is conditional. In this case the callback
         * condition must be set to true before a callback is accepted. The callback
         * condition can only be used for asynchronous callbacks.
         */
        readonly conditional?: boolean;
        /**
         * Specifies if the callback should be continuous. The callback property
         * `Payload` or function `done()` can be called multiple times.
         */
        readonly continuous?: boolean;
    }
    export class Callback<T> {
        /**
         * Callback template of specified type.
         * @param pProperties Specifies the callback properties.
         * @return Returns a reference to the callback.
         */
        static of<Type>(pProperties: ICallbackProperties<Type>): Callback<Type>;
        /**
         * Creates a new callback.
         * @param pProperties Specifies the callback properties.
         */
        constructor(pProperties: ICallbackProperties<T>);
        /** Retrieves the callback condition state. */
        get condition(): boolean;
        /** Sets the callback condition state. */
        set condition(bCondition: boolean);
        /** Verifies if the callback pointer is alive and still usable. */
        get isAlive(): boolean;
        /** Retrieves the promise invoke count. */
        get promiseCount(): number;
        /**
         * Terminates the callback.
         * @return Returns `true` if the callback loop is terminated.
         */
        protected terminate(): boolean;
        /**
         * Cancels the callback loop.
         * @return Returns `true` if the callback loop is terminated.
         */
        cancel(): boolean;
        /** Sets the return payload of the callback function. */
        return(pPayload: T | undefined): T | undefined;
    }
    /**
     * Type alias for the await function.
     * @param TAwait.pAwait Reference to the await.
     */
    export type TAwait = (pAwait: Await) => void | Await;
    /** Defines the promise interface. */
    export interface IAwaitPromise extends ICallbackPromise<void> {}
    /** Defines the callback properties interface. */
    export interface IAwaitProperties {
        /** Specifies the await function. */
        readonly await: TAwait;
        /** Specifies the promise function. */
        readonly promise: TPromise<void>;
        /**
         * Specifies if the callback is conditional. In this case the callback
         * condition must be set to true before a callback is accepted. The callback
         * condition can only be used for asynchronous callbacks.
         */
        readonly conditional?: boolean;
        /**
         * Specifies if the callback should be continuous. The callback function
         * `done()` can be called multiple times.
         */
        readonly continuous?: boolean;
    }
    export class Await extends Callback<void> {
        /**
         * Await for.
         * @param pProperties Specifies the await properties.
         * @return Returns a reference to the await.
         */
        static for(pProperties: IAwaitProperties): Await;
        /**
         * Creates a new await.
         * @param pProperties Specifies the await properties.
         */
        constructor(pProperties: IAwaitProperties);
        /**
         * Terminates the await.
         * @return Returns `true` if the await loop is terminated.
         */
        done(): boolean;
    }
}

declare module "tripetto/module/dom" {
    import { IObject, TLimiterType } from "tripetto/module/functional";
    import { MarkdownFeatures, MarkdownParser, MarkdownTypes } from "tripetto/module/markdown";
    import { Coordinate, IPoint, Rectangle as Rect } from "tripetto/module/metrics";

    export type TDOMElement = HTMLElement | Element | Document | DocumentFragment | Window | string | undefined | null;
    export class DOMElement {
        /**
         * Sets or retrieves the specified data attribute.
         * @param pAsset Specifies the asset.
         * @param sName Specifies the data name.
         * @param sValue Optional data.
         * @return Returns the data value.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
         */
        static data(pAsset: HTMLElement | undefined, sName: string, sValue?: string): string;
        /**
         * Destroys the specified data attribute.
         * @param pAsset Specifies the asset.
         * @param sName Specifies the data name.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
         */
        static destroyData(pAsset: HTMLElement | undefined, sName: string): void;
        /**
         * Sets or retrieves the specified attribute.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Specifies the asset.
         * @param sName Specifies the attribute name.
         * @param sValue Optional value for the attribute.
         * @return Returns the attribute value.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttribute
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute
         */
        static attribute(pAsset: HTMLElement | undefined, sName: string, sValue?: string): string;
        /**
         * Destroys the specified attribute.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Specifies the asset.
         * @param sName Specifies the attribute name.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.removeAttribute
         */
        static destroyAttribute(pAsset: HTMLElement | undefined, sName: string): void;
        /**
         * Retrieves if the asset is in the DOM tree of the browser.
         * @param pAsset Specifies the asset.
         * @return Returns `true` if the asset is in the DOM.
         */
        static isInDOM(pAsset: HTMLElement | undefined | null): boolean;
        /**
         * Verifies if the supplied assets are equal.
         * @param pAssetA Specifies asset A to compare.
         * @param pAssetB Specifies asset B to compare.
         * @return Return `true` if the assets are equal.
         */
        static isEqual(pAssetA: DOMElement | HTMLElement | null, pAssetB: DOMElement | HTMLElement | null): boolean;
        /**
         * Retrieves the asset from the DOM.
         * @param pAsset Reference to the asset or the asset identifier.
         * @return Returns a reference to the DOM asset or `undefined` if the asset is not found.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById
         */
        static $(pAsset: DOMElement | TDOMElement): HTMLElement | undefined;
        /**
         * Retrieves a string signature for an asset (e.g. `Element`, `HTMLElement`, `Window`, `Document`).
         * @param pAsset Reference to the asset.
         * @return Returns a signature string (`<Type>Name`).
         */
        static $ignature(pAsset: DOMElement | TDOMElement): string;
        /**
         * Removes all child nodes from the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         */
        static removeChildren(pAsset: HTMLElement | undefined): void;
        /**
         * Destroys all child nodes of the asset.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         */
        static destroyChildren(pAsset: HTMLElement | undefined): void;
        /**
         * Destroys the asset and all of its child nodes.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         * @param bTidy Specifies if child assets should be removed piece by piece from the DOM.
         * @param fnDone Specifies a callback which is invoked when the asset is removed.
         */
        static destroy(pAsset: HTMLElement | undefined, bTidy?: boolean, fnDone?: () => void): void;
        /**
         * Constructs a new asset.
         * @param pAsset Reference to the asset or the asset identifier.
         */
        protected constructor(pAsset: DOMElement | TDOMElement);
        /** Returns the unique identifier for the asset. */
        get id(): number;
        /**
         * Returns a unique hash for the asset. When you invoke this property the
         * returned hash string is set as element id so you can use it to reference
         * the element.
         */
        get hash(): string;
        /** Returns the DOM HTML element. */
        get HTMLElement(): HTMLElement | undefined;
        /** Retrieves if the asset exists. */
        get exists(): boolean;
        /** Retrieves if the asset is part of the DOM. */
        get isInDOM(): boolean;
        /** Retrieves the parent asset. */
        get parent(): DOMElement | undefined;
        /** Retrieves the first child of the asset. */
        get firstChild(): DOMElement | undefined;
        /** Retrieves the number of child assets. */
        get childCount(): number;
        /** Retrieves the element depth in the DOM. Returns `-1` if the element is not in the DOM. */
        get depth(): number;
        /** Retrieves the tag name of the asset. */
        get tagName(): string;
        /** Retrieves a drawing context on the canvas of the asset. */
        get canvas(): CanvasRenderingContext2D | undefined;
        /**
         * Sets or retrieves the specified data attribute.
         * @param sName Specifies the data name.
         * @param sValue Optional data.
         * @return Returns the data value.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
         */
        data(sName: string, sValue?: string): string;
        /**
         * Destroys the specified data attribute.
         * @param sName Specifies the data name.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
         */
        destroyData(sName: string): void;
        /**
         * Sets or retrieves the specified attribute.
         * @param sName Specifies the attribute name.
         * @param sValue Optional value for the attribute.
         * @return Returns the attribute value.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttribute
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute
         */
        attribute(sName: string, sValue?: string): string;
        /**
         * Destroys the specified attribute.
         * @param sName Specifies the attribute name.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.removeAttribute
         */
        destroyAttribute(sName: string): void;
        /**
         * Verifies if the supplied asset is equal to the asset.
         * @param pAsset Specifies the asset to compare.
         * @return Returns `true` if the assets are equal.
         */
        isEqual(pAsset: DOMElement | HTMLElement | null): boolean;
        /**
         * Verifies if the supplied asset is the parent of the current asset.
         * @param pAsset Specifies the child asset.
         * @return Returns `true` if the asset is the parent of the supplied asset.
         */
        isParentOf(pAsset: DOMElement | HTMLElement): boolean;
        /**
         * Verifies if the supplied asset is a child of the current asset.
         * @param pAsset Specifies the parent asset.
         * @return Returns `true` if the asset us a child of the supplied asset.
         */
        isChildOf(pAsset: DOMElement | HTMLElement): boolean;
        /**
         * Retrieves the HTML element and cast to a certain type.
         * @return Returns the HTML element as type `T`.
         */
        HTMLElementOfType<T extends HTMLElement>(): T | undefined;
        /**
         * Destroys the instance.
         * @return Returns a reference to the asset in the DOM.
         */
        destroy(): HTMLElement | undefined;
    }
    export interface IEventProperties {
        /** Specifies whether the event should be executed in the capturing or in the bubbling phase. */
        readonly capture?: boolean;
        /**
         * Specifies whether the event should be passive. By marking a touch or
         * wheel listener as passive, the developer is promising the handler won't
         * call preventDefault to disable scrolling.
         */
        readonly passive?: boolean;
        /** Specifies if event propagation should be stopped. */
        readonly stopPropagation?: boolean;
        /**
         * Specifies if the sequencer should be used for invoking the event handler function. Use this option if you
         * are changing DOM properties in the event handler function.
         */
        readonly sequencer?: "read" | "write" | "write-after-read" | "write-thorough";
        /** Specifies if a limiter should be installed. Possible values are `debounce`, `throttle` and `throttle-delay`. */
        readonly limiter?: TLimiterType;
        /** Specifies the limiter timeout. If omitted the system will align with 60fps. */
        readonly timeout?: number;
        /** Specifies if an event can be overwritten if another handler is already attached. */
        readonly overwrite?: boolean;
        /** Specifies if an event cannot be overwritten. */
        readonly noOverwrite?: boolean;
    }
    export type TEventListener<T extends Event> = (pEvent: T) => void;
    export class EventListeners extends DOMElement {
        /** Retrieves if passive  */
        static get isPassiveSupported(): boolean;

        /**
         * Attaches one or more event handlers to an asset.
         * @param pAsset Reference to the asset or the asset identifier.
         * @param pEvents Specifies the event or an array with events to attach to.
         * @param fnCallee Specifies the event handler function.
         * @param pProperties Specifies event properties.
         * @param pThis Specifies `this` for the callee.
         * @return Returns true if the function succeeded.
         */
        static attachListener<T extends Event>(
            pAsset: TDOMElement | DOMElement,
            pEvents: string | string[],
            fnCallee: TEventListener<T>,
            pProperties?: IEventProperties,
            pThis?: IObject
        ): boolean;
        /**
         * Detaches one or more event handlers from an asset.
         * @param pAsset Reference to the asset or the asset identifier.
         * @param pEvents Specifies the event or an array with events to detach from.
         * @param bHasCapture Specifies whether the event was executed in the capturing or in the bubbling phase.
         * @param pThis Specifies `this` for the callee.
         * @return Returns true if the function succeeded.
         */
        static detachListener(pAsset: TDOMElement | DOMElement, pEvents: string | string[], pThis?: IObject): boolean;
        /**
         * Prevents further propagation of the supplied event.
         * @param pEvent Pointer to the event. If omitted the `window.event` object will be used.
         */
        static stopPropagation(pEvent: Event): void;
        /**
         * Constructs a new event manager.
         * @param pAsset Reference to the asset.
         */
        protected constructor(pAsset: EventListeners | TDOMElement);
        /**
         * Attaches one or more event handlers to the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout.</i></span>
         * @param pEvents Specifies the event or an array with events to attach to.
         * @param fnCallee Specifies the event handler function.
         * @param pProperties Specifies event properties.
         * @return Returns true if the function succeeded.
         */
        on<T extends Event>(pEvents: string | string[], fnCallee: TEventListener<T>, pProperties?: IEventProperties): boolean;
        /**
         * Detaches one or more event handlers from the asset.
         * @param pEvents Specifies the event or an array with events to detach from.
         */
        off(pEvents: string | string[]): void;
        /**
         * Verifies if the supplied event is attached.
         * @param sEvent Specifies the event to verify.
         * @return Returns `true` if the event is attached.
         */
        listensTo(sEvent: string): boolean;
        /**
         * Destroys the instance.
         * @return Returns a reference to the asset in the DOM.
         */
        destroy(): HTMLElement | undefined;
    }
    /** Declares the style property value type. */
    export type TStyleProperty = string | string[] | number | number[];
    /** Declares the styles array type. */
    export type TStylesArray = (IStyleProperties | IStyles | undefined)[];
    /** Declares the style properties array type. */
    export type TStylePropertiesArray = (IStyleProperties | undefined)[];
    /** Describes the styles interface. */
    export interface IStyles extends IStyleProperties {
        [selector: string]: IStyles | TStyleProperty | undefined;
    }
    /** Describes the style properties interface. */
    export interface IStyleProperties {
        alignContent?:
            | "stretch"
            | "center"
            | "flex-start"
            | "flex-end"
            | "space-between"
            | "space-around"
            | "inherit"
            | "initial"
            | "unset";
        alignItems?: "stretch" | "center" | "flex-start" | "flex-end" | "baseline" | "inherit" | "initial" | "unset";
        alignSelf?: "auto" | "stretch" | "center" | "flex-start" | "flex-end" | "baseline" | "inherit" | "initial" | "unset";
        alignmentBaseline?:
            | "auto"
            | "baseline"
            | "before-edge"
            | "text-before-edge"
            | "middle"
            | "central"
            | "after-edge"
            | "text-after-edge"
            | "ideographic"
            | "alphabetic"
            | "hanging"
            | "mathematical"
            | "inherit";
        animation?: string | string[];
        animationDelay?: string;
        animationDirection?: "normal" | "reverse" | "alternate" | "alternate-reverse" | "inherit" | "initial" | "unset";
        animationDuration?: string;
        animationFillMode?: "none" | "forwards" | "backwards" | "both" | "inherit" | "initial" | "unset";
        animationIterationCount?: string;
        animationName?: string;
        animationPlayState?: "paused" | "running" | "inherit" | "initial" | "unset";
        animationTimingFunction?:
            | "linear"
            | "ease"
            | "ease-in"
            | "ease-out"
            | "ease-in-out"
            | "step-start"
            | "step-end"
            | string
            | "inherit"
            | "initial"
            | "unset";
        backdropFilter?: string | "none" | "inherit" | "initial" | "unset";
        backfaceVisibility?: "visible" | "hidden" | "inherit" | "initial" | "unset";
        background?: string | string[];
        backgroundAttachment?: "scroll" | "fixed" | "local" | "inherit" | string[];
        backgroundClip?: "border-box" | "padding-box" | "content-box" | "inherit" | "initial" | "unset";
        backgroundColor?: string;
        backgroundImage?: string | string[];
        backgroundOrigin?: "border-box" | "padding-box" | "content-box" | "inherit" | "initial" | "unset" | string[];
        backgroundPosition?: string | string[];
        backgroundPositionX?: string | string[];
        backgroundPositionY?: string | string[];
        backgroundRepeat?: "repeat" | "repeat-x" | "repeat-y" | "no-repeat" | "inherit" | "initial" | "unset" | string[];
        backgroundSize?: string | string[];
        baselineShift?: "auto" | "baseline" | "super" | "sub" | string | "inherit";
        border?: string;
        borderBottom?: string;
        borderBottomColor?: string;
        borderBottomLeftRadius?: string | number;
        borderBottomRightRadius?: string | number;
        borderBottomStyle?:
            | "none"
            | "hidden"
            | "dotted"
            | "dashed"
            | "solid"
            | "double"
            | "groove"
            | "ridge"
            | "inset"
            | "outset"
            | "inherit"
            | "initial"
            | "unset";
        borderBottomWidth?: string | number;
        borderCollapse?: "collapse" | "separate" | "inherit";
        borderColor?: string;
        borderImage?: string;
        borderImageOutset?: string;
        borderImageRepeat?: string;
        borderImageSlice?: string;
        borderImageSource?: string;
        borderImageWidth?: string | number;
        borderLeft?: string;
        borderLeftColor?: string;
        borderLeftStyle?:
            | "none"
            | "hidden"
            | "dotted"
            | "dashed"
            | "solid"
            | "double"
            | "groove"
            | "ridge"
            | "inset"
            | "outset"
            | "inherit"
            | "initial"
            | "unset";
        borderLeftWidth?: string | number;
        borderRadius?: string | number;
        borderRight?: string;
        borderRightColor?: string;
        borderRightStyle?:
            | "none"
            | "hidden"
            | "dotted"
            | "dashed"
            | "solid"
            | "double"
            | "groove"
            | "ridge"
            | "inset"
            | "outset"
            | "inherit"
            | "initial"
            | "unset";
        borderRightWidth?: string | number;
        borderSpacing?: string;
        borderStyle?:
            | "none"
            | "hidden"
            | "dotted"
            | "dashed"
            | "solid"
            | "double"
            | "groove"
            | "ridge"
            | "inset"
            | "outset"
            | "inherit"
            | "initial"
            | "unset";
        borderTop?: string;
        borderTopColor?: string;
        borderTopLeftRadius?: string | number;
        borderTopRightRadius?: string | number;
        borderTopStyle?:
            | "none"
            | "hidden"
            | "dotted"
            | "dashed"
            | "solid"
            | "double"
            | "groove"
            | "ridge"
            | "inset"
            | "outset"
            | "inherit"
            | "initial"
            | "unset";
        borderTopWidth?: string | number;
        borderWidth?: string | number;
        bottom?: "auto" | string | number | "inherit" | "initial" | "unset";
        boxFlex?: string | number;
        boxFlexGroup?: string | number;
        boxShadow?: string;
        boxSizing?: "content-box" | "border-box" | "inherit" | "initial" | "unset";
        breakAfter?:
            | "auto"
            | "avoid"
            | "avoid-page"
            | "page"
            | "left"
            | "right"
            | "recto"
            | "verso"
            | "avoid-column"
            | "column"
            | "avoid-region"
            | "region";
        breakBefore?:
            | "auto"
            | "avoid"
            | "avoid-page"
            | "page"
            | "left"
            | "right"
            | "recto"
            | "verso"
            | "avoid-column"
            | "column"
            | "avoid-region"
            | "region";
        breakInside?: "auto" | "avoid" | "avoid-page" | "avoid-column" | "avoid-region";
        captionSide?: "top" | "bottom" | "block-start" | "block-end" | "inline-start" | "inline-end" | "inherit" | "initial" | "unset";
        clear?: "none" | "left" | "right" | "both" | "inherit" | "initial" | "unset";
        clip?: "auto" | string | "inherit" | "initial" | "unset";
        clipPath?: string;
        clipRule?: "nonzero" | "evenodd" | "inherit";
        color?: string;
        colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit";
        columnCount?: string | number;
        columnFill?: string;
        columnGap?: string | number;
        columnRule?: string;
        columnRuleColor?: string;
        columnRuleStyle?: string;
        columnRuleWidth?: string | number;
        columnSpan?: string;
        columnWidth?: string | number;
        columns?: string;
        content?: string;
        counterIncrement?: string;
        counterReset?: string;
        cursor?:
            | "auto"
            | "default"
            | "none"
            | "context-menu"
            | "help"
            | "pointer"
            | "progress"
            | "wait"
            | "cell"
            | "crosshair"
            | "text"
            | "vertical-text"
            | "alias"
            | "copy"
            | "move"
            | "no-drop"
            | "not-allowed"
            | "e-resize"
            | "n-resize"
            | "ne-resize"
            | "nw-resize"
            | "s-resize"
            | "se-resize"
            | "sw-resize"
            | "w-resize"
            | "ew-resize"
            | "ns-resize"
            | "nesw-resize"
            | "nwse-resize"
            | "col-resize"
            | "row-resize"
            | "all-scroll"
            | "zoom-in"
            | "zoom-out"
            | "grab"
            | "grabbing"
            | string
            | "inherit"
            | "initial"
            | "unset";
        direction?: "ltr" | "rtl" | "inherit" | "initial" | "unset";
        display?:
            | "none"
            | "inline"
            | "block"
            | "inline-block"
            | "contents"
            | "list-item"
            | "inline-list-item"
            | "table"
            | "inline-table"
            | "table-cell"
            | "table-column"
            | "table-column-group"
            | "table-footer-group"
            | "table-header-group"
            | "table-row"
            | "table-row-group"
            | "table-caption"
            | "flex"
            | "inline-flex"
            | "grid"
            | "inline-grid"
            | "ruby"
            | "ruby-base"
            | "ruby-text"
            | "ruby-base-container"
            | "ruby-text-container"
            | "run-in"
            | "inherit"
            | "initial"
            | "unset";
        dominantBaseline?: string;
        emptyCells?: string;
        enableBackground?: string;
        fill?: string;
        fillOpacity?: string;
        fillRule?: string;
        filter?: string;
        flex?: string | number;
        flexBasis?: string;
        flexDirection?: string;
        flexFlow?: string;
        flexGrow?: string | number;
        flexPositive?: string | number;
        flexShrink?: string | number;
        flexNegative?: string | number;
        flexWrap?: string;
        floodColor?: string;
        floodOpacity?: string;
        font?: string;
        fontFamily?: string | string[];
        fontFeatureSettings?: "normal" | string | "inherit" | "initial" | "unset";
        fontSize?:
            | "xx-small"
            | "x-small"
            | "small"
            | "medium"
            | "large"
            | "x-large"
            | "xx-large"
            | "larger"
            | "smaller"
            | string
            | number
            | "inherit"
            | "initial"
            | "unset";
        fontSizeAdjust?: "none" | number | "inherit" | "initial" | "unset";
        fontStretch?:
            | "normal"
            | "ultra-condensed"
            | "extra-condensed"
            | "condensed"
            | "semi-condensed"
            | "semi-expanded"
            | "expanded"
            | "extra-expanded"
            | "ultra-expanded"
            | "inherit"
            | "initial"
            | "unset";
        fontStyle?: "normal" | "italic" | "oblique" | "inherit" | "initial" | "unset";
        fontVariant?: "normal" | "small-caps" | "inherit" | "initial" | "unset";
        fontWeight?: "normal" | "bold" | "bolder" | "lighter" | number | "inherit" | "initial" | "unset";
        glyphOrientationHorizontal?: string;
        glyphOrientationVertical?: string;
        height?: "auto" | string | number | "inherit" | "initial" | "unset";
        imeMode?: string;
        justifyContent?: string;
        kerning?: string;
        left?: "auto" | string | number | "inherit" | "initial" | "unset";
        letterSpacing?: string;
        lightingColor?: string;
        lineClamp?: string | number;
        lineHeight?: string | number;
        listStyle?: string;
        listStyleImage?: string;
        listStylePosition?: string;
        listStyleType?: string;
        margin?: "auto" | string | number | number[] | "inherit" | "initial" | "unset";
        marginBottom?: "auto" | string | number | "inherit" | "initial" | "unset";
        marginLeft?: "auto" | string | number | "inherit" | "initial" | "unset";
        marginRight?: "auto" | string | number | "inherit" | "initial" | "unset";
        marginTop?: "auto" | string | number | "inherit" | "initial" | "unset";
        marker?: string;
        markerEnd?: string;
        markerMid?: string;
        markerStart?: string;
        mask?: string;
        maxHeight?: string | number;
        maxWidth?: string | number;
        minHeight?: string | number;
        minWidth?: string | number;
        msContentZoomChaining?: string;
        msContentZoomLimit?: string;
        msContentZoomLimitMax?: string;
        msContentZoomLimitMin?: string;
        msContentZoomSnap?: string;
        msContentZoomSnapPoints?: string;
        msContentZoomSnapType?: string;
        msContentZooming?: string;
        msFlowFrom?: string;
        msFlowInto?: string;
        msFontFeatureSettings?: string;
        msGridColumn?: string;
        msGridColumnAlign?: string;
        msGridColumnSpan?: string;
        msGrdColumns?: string;
        msGridRow?: string;
        msGridRowAlign?: string;
        msGridRowSpan?: string;
        msGridRows?: string;
        msHighContrastAdjust?: string;
        msHyphenateLimitChars?: string;
        msHyphenateLimitLines?: string;
        msHyphenateLimitZone?: string;
        msHyphens?: string;
        msImeAlign?: string;
        msOverflowStyle?: string;
        msScrollChaining?: string;
        msScrollLimit?: string;
        msScrollLimitXMax?: string;
        msScrollLimitXMin?: string;
        msScrollLimitYMax?: string;
        msScrollLimitYMin?: string;
        msScrollRails?: string;
        msScrollSnapPointsX?: string;
        msScrollSnapPointsY?: string;
        msScrollSnapType?: string;
        msScrollSnapX?: string;
        msScrollSnapY?: string;
        msScrollTranslation?: string;
        msTextCombineHorizontal?: string;
        msTextSizeAdjust?: string;
        msTouchAction?: string;
        msTouchSelect?: string;
        msUserSelect?: string;
        msWrapFlow?: string;
        msWrapMargin?: string;
        msWrapThrough?: string;
        opacity?: number | "inherit" | "initial" | "unset";
        order?: number | "inherit" | "initial" | "unset";
        orphans?: string | number;
        outline?: string | "inherit" | "initial" | "unset";
        outlineColor?: string;
        outlineStyle?:
            | "auto"
            | "none"
            | "dotted"
            | "dashed"
            | "solid"
            | "double"
            | "groove"
            | "ridge"
            | "inset"
            | "outset"
            | "inherit"
            | "initial"
            | "unset";
        outlineWidth?: string | number;
        overflow?: "visible" | "hidden" | "scroll" | "auto" | "inherit" | "initial" | "unset";
        overflowX?: "visible" | "hidden" | "scroll" | "auto" | "inherit" | "initial" | "unset";
        overflowY?: "visible" | "hidden" | "scroll" | "auto" | "inherit" | "initial" | "unset";
        padding?: string | number | number[] | "inherit" | "initial" | "unset";
        paddingBottom?: string | number | "inherit" | "initial" | "unset";
        paddingLeft?: string | number | "inherit" | "initial" | "unset";
        paddingRight?: string | number | "inherit" | "initial" | "unset";
        paddingTop?: string | number | "inherit" | "initial" | "unset";
        pageBreakAfter?: string;
        pageBreakBefore?: string;
        pageBreakInside?: string;
        perspective?: "none" | string | "inherit" | "initial" | "unset";
        perspectiveOrigin?: string | "inherit" | "initial" | "unset";
        pointerEvents?:
            | "auto"
            | "none"
            | "visiblePainted"
            | "visibleFill"
            | "visibleStroke"
            | "visible"
            | "painted"
            | "fill"
            | "stroke"
            | "all"
            | "inherit"
            | "initial"
            | "unset";
        position?: "static" | "relative" | "absolute" | "sticky" | "fixed" | "inherit" | "initial" | "unset";
        quotes?: string;
        right?: "auto" | string | number | "inherit" | "initial" | "unset";
        rubyAlign?: string;
        rubyOverhang?: string;
        rubyPosition?: string;
        stopColor?: string;
        stopOpacity?: string;
        stroke?: string;
        strokeDasharray?: string;
        strokeDashoffset?: string;
        strokeLinecap?: string;
        strokeLinejoin?: string;
        strokeMiterlimit?: string;
        strokeOpacity?: string;
        strokeWidth?: string | number;
        src?: string | string[];
        tableLayout?: string;
        tabSize?: string | number;
        textAlign?: "start" | "end" | "left" | "right" | "center" | "justify" | "match-parent" | "inherit" | "initial" | "unset";
        textAlignLast?: string;
        textAnchor?: string;
        textDecoration?: string | "inherit" | "initial" | "unset";
        textIndent?: string;
        textJustify?: string;
        textKashida?: string;
        textKashidaSpace?: string;
        textOverflow?: "clip" | "ellipsis" | string | "inherit" | "initial" | "unset";
        textRendering?: "auto" | "optimizeSpeed" | "optimizeLegibility" | "geometricPrecision";
        textShadow?: string;
        textTransform?: "none" | "capitalize" | "uppercase" | "lowercase" | "full-width" | "inherit" | "initial" | "unset";
        textUnderlinePosition?: string;
        top?: "auto" | string | number | "inherit" | "initial" | "unset";
        touchAction?:
            | "auto"
            | "none"
            | "pan-x"
            | "pan-left"
            | "pan-right"
            | "pan-y"
            | "pan-up"
            | "pan-down"
            | "manipulation"
            | "inherit"
            | "initial"
            | "unset";
        transform?: "none" | string | string[] | "inherit" | "initial" | "unset";
        transformOrigin?: string | "inherit" | "initial" | "unset";
        transformStyle?: "flat" | "preserve-3d" | "inherit" | "initial" | "unset";
        transition?: string | string[] | "inherit" | "initial" | "unset";
        transitionDelay?: string;
        transitionDuration?: string;
        transitionProperty?: "none" | "all" | string | "inherit" | "initial" | "unset";
        transitionTimingFunction?:
            | "ease"
            | "linear"
            | "ease-in"
            | "ease-out"
            | "ease-in-out"
            | "step-start"
            | "step-end"
            | string
            | "inherit"
            | "initial"
            | "unset";
        unicodeBidi?: string;
        userSelect?: "auto" | "text" | "none" | "contain" | "all";
        verticalAlign?:
            | "baseline"
            | "sub"
            | "super"
            | "text-top"
            | "text-bottom"
            | "middle"
            | "top"
            | "bottom"
            | string
            | "inherit"
            | "initial"
            | "unset";
        visibility?: "visible" | "hidden" | "collapse" | "inherit" | "initial" | "unset";
        webkitAlignContent?: string;
        webkitAlignItems?: string;
        webkitAlignSelf?: string;
        webkitAnimation?: string;
        webkitAnimationDelay?: string;
        webkitAnimationDirection?: string;
        webkitAnimationDuration?: string;
        webkitAnimationFillMode?: string;
        webkitAnimationIterationCount?: string;
        webkitAnimationName?: string;
        webkitAnimationPlayState?: string;
        webkitAnimationTimingFunction?: string;
        webkitAppearance?: string;
        webkitBackdropFilter?: string | "none" | "inherit" | "initial" | "unset";
        webkitBackfaceVisibility?: string;
        webkitBackgroundClip?: string;
        webkitBackgroundOrigin?: string;
        webkitBackgroundSize?: string;
        webkitBorderBottomLeftRadius?: string;
        webkitBorderBottomRightRadius?: string;
        webkitBorderImage?: string;
        webkitBorderRadius?: string;
        webkitBorderTopLeftRadius?: string;
        webkitBorderTopRightRadius?: string;
        webkitBoxAlign?: string;
        webkitBoxDirection?: string;
        webkitBoxFlex?: string | number;
        webkitBoxOrdinalGroup?: string;
        webkitBoxOrient?: string;
        webkitBoxPack?: string;
        webkitBoxSizing?: string;
        webkitColumnBreakAfter?: string;
        webkitColumnBreakBefore?: string;
        webkitColumnBreakInside?: string;
        webkitColumnCount?: string;
        webkitColumnGap?: string;
        webkitColumnRule?: string;
        webkitColumnRuleColor?: string;
        webkitColumnRuleStyle?: string;
        webkitColumnRuleWidth?: string;
        webkitColumnSpan?: string;
        webkitColumnWidth?: string;
        webkitColumns?: string;
        webkitFilter?: string;
        webkitFlex?: string;
        webkitFlexBasis?: string;
        webkitFlexDirection?: string;
        webkitFlexFlow?: string;
        webkitFlexGrow?: string;
        webkitFlexShrink?: string;
        webkitFlexWrap?: string;
        webkitJustifyContent?: string;
        webkitOrder?: string;
        webkitPerspective?: string;
        webkitPerspectiveOrigin?: string;
        webkitTapHighlightColor?: string;
        webkitTextFillColor?: string;
        webkitTextSizeAdjust?: string;
        webkitTransform?: string;
        webkitTransformOrigin?: string;
        webkitTransformStyle?: string;
        webkitTransition?: string;
        webkitTransitionDelay?: string;
        webkitTransitionDuration?: string;
        webkitTransitionProperty?: string;
        webkitTransitionTimingFunction?: string;
        webkitUserModify?: string;
        webkitUserSelect?: string;
        webkitWritingMode?: string;
        whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap" | "inherit" | "initial" | "unset";
        widows?: string | number;
        width?: "auto" | string | number | "inherit" | "initial" | "unset";
        wordBreak?: "normal" | "break-all" | "keep-all" | "inherit" | "initial" | "unset";
        wordSpacing?: "normal" | string | "inherit" | "initial" | "unset";
        wordWrap?: "normal" | "break-word" | "inherit" | "initial" | "unset";
        writingMode?: "horizontal-tb" | "vertical-rl" | "vertical-lr" | "sideways-rl" | "sideways-lr" | "inherit" | "initial" | "unset";
        zIndex?: "auto" | string | number | "inherit" | "initial" | "unset";
        zoom?: "auto" | string | number;
    }
    export type TStyle = (pStyle: Style) => void;
    /** Describes a property. */
    export interface IProperty {
        readonly name: string;
        readonly value: string;
    }
    /** Describes a style rule. */
    export interface IStyleRule {
        readonly properties: IProperty[];
        selector: string;
        atRule: string;
    }
    /** Describes the style rules. */
    export interface IStyleRuleCollection {
        readonly rules: IStyleRule[];
        readonly hash: string;
        readonly isEmpty: boolean;
    }
    /** Describes the style parsers interface. */
    export interface IStyleParsers {
        readonly [selector: string]: (pStyles: IStyles) => IProperty[];
    }
    export class Style extends EventListeners {
        /** Retrieves the maximum opacity value where opacity is `1`. */
        static get MAX_OPACITY(): number;
        /** Retrieves the z-index for layers. */
        static get ZINDEX_LAYERS(): number;
        /** Retrieves the z-index for floating layers. */
        static get ZINDEX_FLOATING(): number;
        /** Retrieves the z-index for elevated items. Elevated items move behind controls and menus and scrollbars. */
        static get ZINDEX_ELEVATED(): number;
        /** Retrieves the z-index for modal layers. */
        static get ZINDEX_MODAL(): number;
        /** Retrieves the z-index for scrollbars. */
        static get ZINDEX_SCROLLBARS(): number;
        /** Retrieves the z-index for menus. Menus are displayed above any other asset. */
        static get ZINDEX_MENU(): number;

        /**
         * Retrieves a metrics reference.
         * @param pAsset Reference to the asset or the asset identifier.
         * @return Returns a style instance.
         */
        static of(pAsset: Style | TDOMElement): Style;
        /**
         * Applies styles to an asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         * @param fnStyle Specifies the style function which applies the styles.
         * @return Returns a style instance.
         */
        static apply(pAsset: Style | TDOMElement, fnStyle: TStyle): Style;
        /**
         * Sets a style property of an asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         * @param sName Specifies the name of the property to set.
         * @param pValue Specifies the value for the property.
         * @param bPrefix Specifies if automatic prefixing is enabled (enabled by default).
         * @param bImportant Specifies if the `!important` attribute needs to be appended.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference
         */
        static set(
            pAsset: HTMLElement | CSSStyleRule | undefined,
            sName: string,
            pValue: TStyleProperty,
            bPrefix?: boolean,
            bImportant?: boolean
        ): void;
        /**
         * Retrieves a style property of an asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         * @param sName Specifies the name of the property to retrieve.
         * @param bComputed Specifies if the computed or style value should be retrieved (enabled by default).
         * @param sPseudo A string specifying the pseudo-element to match.
         * @return Returns the style value as a string.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle
         */
        static get(pAsset: HTMLElement | CSSStyleRule | undefined, sName: string, bComputed?: boolean, sPseudo?: string): string;
        /**
         * Sets the styles for an asset.
         * @param pAsset Reference to the asset.
         * @param pProperties Specifies the style properties.
         */
        static styles(pAsset: HTMLElement | CSSStyleRule | undefined, pProperties: IStyleProperties): void;
        /**
         * Parses the supplied styles to a stylesheet rule.
         * @param sSelector Specifies the selector. If you supply `&` it
         * will be replaced by a unique hash selector.
         * @param pStyles Specifies the styles object or an array of styles.
         * @param bNestedStyles Specifies if nested styles are allowed.
         * @param bKeyframes Specifies if keyframes are specified.
         * @param pParsers Specifies custom parsers.
         * @return Returns an object with the rules array and the hash string.
         */
        static stylesToRules(
            sSelector: string,
            pStyles: IStyleProperties | IStyles | TStylesArray,
            bNestedStyles: boolean,
            bKeyframes: boolean,
            pParsers?: IStyleParsers
        ): IStyleRuleCollection;
        /**
         * Converts the supplied styles to a style string.
         * @param pStyles Specifies the styles object or an array of styles.
         * @return Returns the style string.
         */
        static stylesToString(pStyles: IStyleProperties | IStyles | TStylesArray): string;
        /**
         * Sets or retrieves the (computed) pointer-events setting of an asset.
         * @param pAsset Reference to the asset.
         * @param bEnabled Specifies if pointer events are enabled.
         * @return Returns `true` if pointer events are enabled.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
         */
        static pointerEvents(pAsset: HTMLElement | undefined, bEnabled?: boolean): boolean;
        /**
         * Sets or retrieves the z-index of an asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         * @param nZ Specifies the z-index as a positive or negative number (can be a number, `auto` or `inherit`).
         * @return Returns the current z-index.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
         */
        static zIndex(pAsset: HTMLElement | undefined, nZ?: number | "auto" | "inherit"): number | "auto";
        /**
         * Sets or retrieves the (computed) opacity of an asset. Supply `inherit` to remove the opacity style.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         * @param nOpacity Specifies the opacity (0...MAX_OPACITY).
         * @return Returns the current opacity.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
         */
        static opacity(pAsset: HTMLElement | undefined, nOpacity?: number | "inherit"): number;
        /**
         * Sets or retrieves the (computed) transition of an asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         * @param sTransition Specifies the desired transition.
         * @return Returns the transition string.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transition
         * @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
         */
        static transition(pAsset: HTMLElement | undefined, sTransition?: string | "inherit"): string;
        /**
         * Sets or retrieves the (computed) transformation of an asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         * @param sTransform Specifies the desired transition.
         * @return Returns the transformation string.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function
         * @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms
         */
        static transformation(pAsset: HTMLElement | undefined, sTransform?: string): string;
        /**
         * Sets or retrieves the class of an asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         * @param sClass Specifies the class name.
         * @return Returns the class name string.
         */
        static class(pAsset: HTMLElement | undefined, sClass?: string): string;
        /**
         * Adds a class to an asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         * @param sClass Specifies the class to add.
         * @return Returns the current class string.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.className
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
         */
        static addClass(pAsset: HTMLElement | undefined, sClass: string): string;
        /**
         * Removes a class from an asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         * @param sClass Specifies the class to remove.
         * @return Returns the current class string.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.className
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
         */
        static removeClass(pAsset: HTMLElement | undefined, sClass: string): string;
        /**
         * Toggles a class of an asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         * @param sClass Specifies the class to toggle.
         * @return Returns the current class string.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.className
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
         */
        static toggleClass(pAsset: HTMLElement | undefined, sClass: string): string;
        /**
         * Enables or disables a class for an asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         * @param sClass Specifies the class to enable or disable.
         * @param bEnabled Specifies if the class should be enabled or disabled.
         * @return Returns the current class string.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.className
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
         */
        static setClass(pAsset: HTMLElement | undefined, sClass: string, bEnabled: boolean): string;
        /**
         * Checks if the supplied class is attached to the asset.
         * @param pAsset Reference to the asset.
         * @param sClass Specifies the class to check.
         * @return Returns `true` if the class is attached.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
         */
        static hasClass(pAsset: HTMLElement | undefined, sClass: string): boolean;
        /**
         * Constructs a new style instance.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         * @param fnConstruct Optional function which is invoked when constructing the instance.
         */
        protected constructor(pAsset: Style | TDOMElement, fnConstruct?: TStyle);
        /**
         * Retrieves the class string.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.className
         */
        get class(): string;
        /**
         * Sets the class string.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.className
         */
        set class(sClass: string);
        /** Retrieves the styles object. */
        get styles(): IStyleProperties;
        /** Sets the styles of the rules. */
        set styles(pStyles: IStyleProperties);
        /**
         * Retrieves if pointer events are enabled.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
         */
        get pointerEvents(): boolean;
        /**
         * Enables or disables pointer events.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
         */
        set pointerEvents(bEnabled: boolean);
        /**
         * Retrieves the z-index.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
         * @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index
         */
        get zIndex(): number | "auto" | "inherit";
        /**
         * Sets the z-index as a positive or negative number (can be a number, `auto` or `inherit`).
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
         * @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index
         */
        set zIndex(nZ: number | "auto" | "inherit");
        /**
         * Elevates the asset (supply `0` to reset the elevation).
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        set elevate(nElevate: number);
        /** Retrieves if the asset is elevated. */
        get elevated(): boolean;
        /**
         * Elevates the asset and disables transitions. Use this property for elevating assets which will be dragged.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        set elevated(bElevated: boolean);
        /**
         * Retrieves the computed opacity (0...MAX_OPACITY).
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
         */
        get opacity(): number | "inherit";
        /**
         * Sets the opacity (0...MAX_OPACITY).
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
         */
        set opacity(nOpacity: number | "inherit");
        /**
         * Retrieves the transition.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transition
         * @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
         */
        get transition(): string;
        /**
         * Sets the transition.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transition
         * @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
         */
        set transition(sTransition: string);
        /** Retrieves the `OnTransitionEnd` event. */
        get onTransitionEnd(): ((sProperty: string, nElapsedTime: number) => void) | undefined;
        /**
         * Sets a callback which is invoked when a CSS transition ends.
         * @param fnTransitionEnd Specifies the function which is invoked when the transition ends.
         * @param fnTransitionEnd.sProperty Specifies the property which is animated.
         * @param fnTransitionEnd.nElapsedTime Specifies the elapsed animation time.
         * @event
         */
        set onTransitionEnd(fnTransitionEnd: ((sProperty: string, nElapsedTime: number) => void) | undefined);
        /**
         * Retrieves if transitions are enabled.
         */
        get transitions(): boolean;
        /**
         * Enables or disables transitions.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        set transitions(bTransitions: boolean);
        /**
         * Activates transitions with a one time callback function which is invoked
         * when there is no transition set, the transition ends or when a timeout occurs.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param fnTransitionEnd Specifies the function which is executed.
         * @param nTimeout Specifies the timeout for the transition.
         */
        transitionActivate(fnTransitionEnd: () => void, nTimeout?: number): void;
        /** Retrieves the `OnAnimationStart` event. */
        get onAnimationStart(): ((sName: string) => void) | undefined;
        /**
         * Sets a callback which is invoked when a CSS animation starts.
         * @param fnAnimationStart Specifies the callback function.
         * @param fnAnimationStart.sName Contains the name of the animation.
         * @event
         */
        set onAnimationStart(fnAnimationStart: ((sName: string) => void) | undefined);
        /** Retrieves the `OnAnimationEnd` event. */
        get onAnimationEnd(): ((sName: string, nElapsedTime: number) => void) | undefined;
        /**
         * Sets a callback which is invoked when a CSS animation ends.
         * @param fnAnimationEnd Specifies the callback function.
         * @param fnAnimationEnd.sName Contains the name of the animation.
         * @param fnAnimationEnd.nElapsedTime Contains the elapsed animation time.
         * @event
         */
        set onAnimationEnd(fnAnimationEnd: ((sName: string, nElapsedTime: number) => void) | undefined);
        /**
         * Retrieves the transformation string.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function
         * @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms
         */
        get transformation(): string;
        /**
         * Sets the transformation.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function
         * @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms
         */
        set transformation(sTransform: string);
        /**
         * Sets the transformation prefix for the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        set transformationPrefix(sPrefix: string);
        /**
         * Applies styles and returns a reference to the instance.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param fnStyle Specifies the style function which applies the styles.
         * @param bSequencer Specifies if the write sequencer must be used.
         * @return Returns a style instance.
         */
        apply(fnStyle: TStyle, bSequencer?: boolean): this;
        /**
         * Sets a style property.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param sName Specifies the name of the property to set.
         * @param pValue Specifies the value for the property.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference
         */
        set(sName: string, pValue: TStyleProperty): void;
        /**
         * Retrieves a style property.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param sName Specifies the name of the property to retrieve.
         * @param bComputed Specifies if the computed or style value should be retrieved (enabled by default).
         * @param sPseudo A string specifying the pseudo-element to match.
         * @return Returns the style value string.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference
         */
        get(sName: string, bComputed?: boolean, sPseudo?: string): string;
        /**
         * Adds the supplied class and invokes the supplied function when the animation ends. If no animation is triggered the function is
         * invoked as soons as possible.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sClass Specifies the class name.
         * @param fnAnimationEnd Specifies the callback function which is invoked when the animation ends.
         * @param fnAnimationEnd.sName Contains the name of the animation.
         * @param fnAnimationEnd.nElapsedTime Contains the elapsed animation time.
         * @param bRemove Specifies if the class name needs to be removed from the element after the animation.
         * @param sMode Specifies the sequencer mode.
         */
        animate(
            sClass: string,
            fnAnimationEnd?: (sName?: string, nElapsedTime?: number) => void,
            bRemove?: boolean,
            sMode?: "safe" | "synchronous" | "frame"
        ): void;
        /**
         * Sets the translate and scale transformation.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param nX Specifies the horizontal translate.
         * @param nY Specifies the vertical translate.
         * @param nZ Specifies the zoom factor.
         * @param b3D Specifies if 3D acceleration should be used.
         */
        transcale(nX?: number, nY?: number, nZ?: number, b3D?: boolean): void;
        /**
         * Adds a class.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param sClass Specifies the class to add.
         * @return Returns the current class string.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.className
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
         */
        addClass(sClass: string): string;
        /**
         * Adds a class (forced layout safe).
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sClass Specifies the class to add.
         * @param bWaitOneFrame Specifies to wait one animation frame.
         * @return Returns the current class string.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.className
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
         */
        addClassSafe(sClass: string, bWaitOneFrame?: boolean): void;
        /**
         * Removes a class.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param sClass Specifies the class to remove.
         * @return Returns the current class string.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.className
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
         */
        removeClass(sClass: string): string;
        /**
         * Removes a class (forced layout safe).
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sClass Specifies the class to remove.
         * @param bWaitOneFrame Specifies to wait one animation frame.
         * @return Returns the current class string.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.className
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
         */
        removeClassSafe(sClass: string, bWaitOneFrame?: boolean): void;
        /**
         * Toggles a class.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param sClass Specifies the class to toggle.
         * @return Returns the current class string.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.className
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
         */
        toggleClass(sClass: string): string;
        /**
         * Toggles a class (forced layout safe).
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sClass Specifies the class to toggle.
         * @param bWaitOneFrame Specifies to wait one animation frame.
         * @return Returns the current class string.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.className
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
         */
        toggleClassSafe(sClass: string, bWaitOneFrame?: boolean): void;
        /**
         * Enables or disables a class.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param sClass Specifies the class to enable or disable.
         * @param bEnabled Specifies if the class should be enabled or disabled.
         * @return Returns the current class string.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.className
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
         */
        setClass(sClass: string, bEnabled: boolean): string;
        /**
         * Enables or disables a class (forced layout safe).
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sClass Specifies the class to enable or disable.
         * @param bEnabled Specifies if the class should be enabled or disabled.
         * @param bWaitOneFrame Specifies to wait one animation frame.
         * @return Returns the current class string.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.className
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
         */
        setClassSafe(sClass: string, bEnabled: boolean, bWaitOneFrame?: boolean): void;
        /**
         * Checks if the supplied class is attached.
         * @param sClass Specifies the class to check.
         * @return Returns `true` if the class is attached.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
         */
        hasClass(sClass: string): boolean;
        /**
         * Enables or disables a selector.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param sSelector Specifies the selector to enable or disable.
         * @param bEnabled Specifies if the selector should be enabled or disabled.
         * @return Returns the current class string.
         */
        selector(sSelector: string, bEnabled: boolean): string;
        /**
         * Enables or disables a selector (forced layout safe).
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sSelector Specifies the selector to enable or disable.
         * @param bEnabled Specifies if the selector should be enabled or disabled.
         * @param bWaitOneFrame Specifies to wait one animation frame.
         * @return Returns the current class string.
         */
        selectorSafe(sSelector: string, bEnabled: boolean, bWaitOneFrame?: boolean): void;
        /**
         * Adds a selector.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param sSelector Specifies the selector to add.
         * @return Returns the current class string.
         */
        addSelector(sSelector: string): string;
        /**
         * Adds a selector (forced layout safe).
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sSelector Specifies the selector to add.
         * @param bWaitOneFrame Specifies to wait one animation frame.
         * @return Returns the current class string.
         */
        addSelectorSafe(sSelector: string, bWaitOneFrame?: boolean): void;
        /**
         * Removes a selector.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param sSelector Specifies the selector to remove.
         * @return Returns the current class string.
         */
        removeSelector(sSelector: string): string;
        /**
         * Removes a selector (forced layout safe).
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sSelector Specifies the selector to remove.
         * @param bWaitOneFrame Specifies to wait one animation frame.
         * @return Returns the current class string.
         */
        removeSelectorSafe(sSelector: string, bWaitOneFrame?: boolean): void;
        /**
         * Toggles a selector.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param sSelector Specifies the selector to toggle.
         * @return Returns the current class string.
         */
        toggleSelector(sSelector: string): string;
        /**
         * Toggles a selector (forced layout safe).
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sSelector Specifies the selector to toggle.
         * @param bWaitOneFrame Specifies to wait one animation frame.
         * @return Returns the current class string.
         */
        toggleSelectorSafe(sSelector: string, bWaitOneFrame?: boolean): void;
        /**
         * Checks if the supplied selector is attached.
         * @param sSelector Specifies the selector to check.
         * @return Returns `true` if the selector is attached.
         */
        hasSelector(sSelector: string): boolean;
        /**
         * Adds the supplied selector and invokes the supplied function when the animation ends. If no animation is triggered the function is
         * invoked as soons as possible.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sSelector Specifies the selector.
         * @param fnAnimationEnd Specifies the callback function which is invoked when the animation ends.
         * @param fnAnimationEnd.sName Contains the name of the animation.
         * @param fnAnimationEnd.nElapsedTime Contains the elapsed animation time.
         * @param bRemove Specifies if the selector needs to be removed from the element after the animation.
         * @param sMode Specifies the sequencer mode.
         */
        animateSelector(
            sSelector: string,
            fnAnimationEnd?: (sName?: string, nElapsedTime?: number) => void,
            bRemove?: boolean,
            sMode?: "safe" | "synchronous" | "frame"
        ): void;
        /**
         * Destroys the instance.
         * @return Returns a reference to the asset in the DOM.
         */
        destroy(): HTMLElement | undefined;
    }
    export class Rule {
        /**
         * Retrieves or creates a new rule.
         * @param pStylesheet Reference to the stylesheet.
         * @param sSelector Specifies the class selector.
         * @param pStyles Specifies the rule styles. You can supply an array of
         * styles which will be merged. When there are identical styles, the
         * right-most style property takes precedence.
         * @param nIndex Specifies the rule index.
         * @param sClass Specifies the class name for the rule.
         */
        constructor(
            pStylesheet: Stylesheet,
            sSelector: string,
            pStyles?: IStyleProperties | TStylePropertiesArray,
            nIndex?: number,
            sClass?: string
        );

        /** Retrieves the selector of the rule. */
        get selector(): string;
        /** Retrieves the class name for the rule (if set). */
        get class(): string;
        /** Retrieves the index of the rule. */
        get index(): number;
        /** Retrieves the CSS text. */
        get CSS(): string;
        /** Retrieves the styles object. */
        get styles(): IStyleProperties;
        /** Sets the styles of the rules. */
        set styles(pStyles: IStyleProperties);
        /**
         * Sets a style property of the rule.
         * @param sName Specifies the name of the property to set.
         * @param pValue Specifies the value for the property.
         * @param bImportant Specifies if the `!important` attribute needs to be appended.
         */
        set(sName: string, pValue: TStyleProperty, bImportant?: boolean): void;
        /**
         * Retrieves a style property of the rule.
         * @param sName Specifies the name of the property to retrieve.
         * @return Returns the style value as a string.
         */
        get(sName: string): string;
        /**
         * Deletes the rule from the stylesheet.
         * @return Returns `true` if the rule is deleted.
         */
        delete(): boolean;
    }
    export class Stylesheet {
        /** Retrieves a unique reference to the application stylesheet. */
        static get app(): Stylesheet;
        /** Retrieves a unique reference to the application screen stylesheet. */
        static get screen(): Stylesheet;
        /** Retrieves a unique reference to the application print stylesheet. */
        static get print(): Stylesheet;
        /** Retrieves the global prefix string for classes, rules and selectors. */
        static get prefix(): string;
        /** Specifies the global prefix string for classes, rules and selectors. */
        static set prefix(sPrefix: string);
        /**
         * Hashes the supplied value.
         * @param sValue Specifies the value to hash.
         * @param sPrefix Specifies a hash prefix.
         * @return Returns the hash value.
         */
        static hash(sValue: string, sPrefix: string): string;
        /**
         * Retrieves the number of rules in the supplied sheet.
         * @param pSheet Reference to the sheet.
         * @return Returns the number of rules in the sheet.
         */
        static count(pSheet: CSSStyleSheet): number;
        /**
         * Creates a new stylesheet.
         * @param bAutoReflection Specifies if the stylesheet is automatically
         * reflected to the dom.
         * @param sMedia Specifies the optional media type.
         * @param pTarget Specifies an optional target element for the styles. Use
         * this parameter if you want to insert styles to a web component.
         * @return Returns a reference to a new stylesheet instance.
         */
        static create(bAutoReflection?: boolean, sMedia?: string, pTarget?: Asset | TDOMElement): Stylesheet;
        /**
         * Retrieves a selector hash.
         * @param sSelector Specifies the selector.
         * @return Returns the selector hash.
         */
        static selectorHash(sSelector: string): string;
        /**
         * Retrieves a stylesheet selector for the specified selector string.
         * @param sSelector Specifies the selector.
         * @param sPrefix Specifies an optional prefix (for example `div`).
         * @return Returns a stylesheet selector string.
         */
        static selector(sSelector: string, sPrefix?: string): string;
        /**
         * Retrieves a stylesheet selector for the specified selector(s) strings.
         * @param pSelectors Specifies the selectors.
         * @return Returns a selector string.
         */
        static selectors(...pSelectors: string[]): string;
        /**
         * Constructs a new stylesheet instance.
         * @param bAutoReflection Specifies if the stylesheet is automatically
         * reflected to the dom.
         * @param sMedia Specifies the optional media type.
         * @param pTarget Specifies an optional target element for the styles. Use
         * this parameter if you want to insert styles to a web component.
         */
        constructor(bAutoReflection?: boolean, sMedia?: string, pTarget?: Asset | TDOMElement);

        /** Retrieves a reference to the stylesheets. */
        get sheets(): CSSStyleSheet[];
        /** Retrieves a reference to the stylesheet. */
        get sheet(): CSSStyleSheet | undefined;
        /** Retrieves the number of rules managed by the stylesheet. */
        get count(): number;
        /** Retrieves the CSS style rules. */
        get CSSStyleRules(): CSSStyleRule[];
        /** Retrieves the CSS text for the all the static rules. */
        get CSSText(): string;
        /** Retrieves an array with rules. */
        get rules(): Rule[];

        /**
         * Creates a static rule.
         * @param sSelector Specifies the selector.
         * @param pStyles Specifies the styles. Nested styles are allowed. You
         * can supply an array of styles which will be merged. When there are
         * identical styles, the right-most style property takes precedence.
         * @param sClass Specifies the optional class name.
         * @return Returns the class name for the static rule.
         */
        static(sSelector: string, pStyles: IStyles | TStylesArray): void;
        /**
         * Creates a static style and returns the class name for the style.
         * @param pStyles Specifies the styles. Nested styles are allowed. You
         * can supply an array of styles which will be merged. When there are
         * identical styles, the right-most style property takes precedence.
         * @return Returns the class name for the static rule.
         */
        style(pStyles: IStyles | TStylesArray): string;
        /**
         * Styles an asset.
         * @param pAsset Reference to the asset.
         * @param pStyles Specifies the styles. Nested styles are allowed. You
         * can supply an array of styles which will be merged. When there are
         * identical styles, the right-most style property takes precedence.
         */
        styleAsset(pAsset: Asset, pStyles: IStyles | TStylesArray): void;
        /**
         * Styles an asset (layout safe).
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset.
         * @param pStyles Specifies the styles. Nested styles are allowed. You
         * can supply an array of styles which will be merged. When there are
         * identical styles, the right-most style property takes precedence.
         */
        styleAssetSafe(pAsset: Asset, pStyles: IStyles | TStylesArray): void;
        /**
         * Creates an animation with the supplied keyframes.
         * @param pKeyframes Specifies the keyframes. You can supply an array of
         * styles which will be merged. When there are identical styles, the
         * right-most style property takes precedence.
         * @param sName Specifies an optional name for the animation.
         * @return Returns the animation name.
         */
        animation(pKeyframes: IStyles | TStylesArray, sName?: string): string;
        /**
         * Creates a new managed rule.
         * @param pStyles Specifies the styles. Nested styles are not allowed. You
         * can supply an array of styles which will be merged. When there are
         * identical styles, the right-most style property takes precedence.
         * @return Returns a reference to the rule.
         */
        rule(pStyles?: IStyleProperties | TStylePropertiesArray): Rule;
        /**
         * Adds a rule to the beginning of the stylesheet.
         * @param sSelector Specifies the selector.
         * @param pStyles Specifies the styles. Nested styles are not allowed. You
         * can supply an array of styles which will be merged. When there are
         * identical styles, the right-most style property takes precedence.
         * @param sClass Specifies the class name.
         * @return Returns a reference to the rule.
         */
        insertRule(sSelector: string, pStyles?: IStyleProperties | TStylePropertiesArray, sClass?: string): Rule;
        /**
         * Adds a rule at the specified position in the the stylesheet.
         * @param nIndex Specifies the zero-based index.
         * @param sSelector Specifies the selector.
         * @param pStyles Specifies the styles. Nested styles are not allowed. You
         * can supply an array of styles which will be merged. When there are
         * identical styles, the right-most style property takes precedence.
         * @param sClass Specifies the class name.
         * @return Returns a reference to the rule.
         */
        insertRuleAt(nIndex: number, sSelector: string, pStyles?: IStyleProperties | TStylePropertiesArray, sClass?: string): Rule;
        /**
         * Adds a rule to the end of the stylesheet.
         * @param sSelector Specifies the selector.
         * @param pStyles Specifies the styles. Nested styles are not allowed. You
         * can supply an array of styles which will be merged. When there are
         * identical styles, the right-most style property takes precedence.
         * @param sClass Specifies the class name.
         * @return Returns a reference to the rule.
         */
        addRule(sSelector: string, pStyles?: IStyleProperties | TStylePropertiesArray, sClass?: string): Rule;
        /**
         * Retrieves a rule from the stylesheet.
         * @param sSelector Specifies the selector.
         * @return Returns a reference to the rule.
         */
        getRule(sSelector: string): Rule;
        /**
         * Deletes a rule from the stylesheet.
         * @param sSelector Specifies the selector.
         * @return Returns a reference to the rule.
         */
        deleteRule(sSelector: string): boolean;
        /** Flushes the stylesheet to the browser. */
        flush(): void;
        /** Destroys the stylesheet. */
        destroy(): void;
    }
    /**
     * Type alias for the asset function.
     * @param TAsset.pAsset Reference to the asset instance.
     */
    export type TAsset = (pAsset: Asset) => void;
    /**
     * Describes the available positioning types.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
     */
    export type TPositioning = "static" | "relative" | "absolute" | "fixed";
    /**
     * Describes the available overflow types.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
     */
    export type TOverflow = "visible" | "hidden" | "scroll" | "auto";
    /**
     * Describes the available box sizing models.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
     */
    export type TModel = "content" | "border" | "padding";
    /**
     * Describes the available display rendering options.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
     */
    export type TRendering = "none" | "inline" | "block";
    /**
     * Sets or retrieves the positioning type of the asset.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param sPositioning Specifies the desired positioning type.
     * @return Returns the positioning type.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
     */
    export function positioning(pAsset: HTMLElement | undefined, sPositioning?: TPositioning): TPositioning;
    /**
     * Sets or retrieves the box sizing model for the asset.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param sBoxModel Specifies the desired box sizing model.
     * @return Returns the box sizing model.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
     */
    export function boxModel(pAsset: HTMLElement | undefined, sBoxModel?: TModel): TModel;
    /**
     * Sets or retrieves the rendering (display) method for the asset.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param sRendering Specifies the desired rendering option.
     * @return Returns the rendering method.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
     */
    export function rendering(pAsset: HTMLElement | undefined, sRendering?: TRendering): TRendering;
    /**
     * Sets or retrieves the visibility of the asset.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param bVisible Specifies if the asset should be visible or hidden.
     * @param bRemove Specifies if visibility property should be removed instead of setting it to `visible`.
     * @return Returns `true` if the asset is visible.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility
     */
    export function visible(pAsset: HTMLElement | undefined, bVisible?: boolean, bRemove?: boolean): boolean;
    /**
     * Sets or retrieves the overflow type of the asset.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param sOverflow Specifies the overflow type.
     * @return Returns the overflow type.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
     */
    export function overflow(pAsset: HTMLElement | undefined, sOverflow?: TOverflow): TOverflow;
    /**
     * Sets or retrieves the horizontal overflow type of the asset.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param sOverflowHorizontal Specifies the horizontal overflow type.
     * @return Returns the horizontal overflow type.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
     */
    export function overflowHorizontal(pAsset: HTMLElement | undefined, sOverflowHorizontal?: TOverflow): TOverflow;
    /**
     * Sets or retrieves the vertical overflow type of the asset.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param sOverflowVertical Specifies the vertical overflow type.
     * @return Returns the vertical overflow type.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
     */
    export function overflowVertical(pAsset: HTMLElement | undefined, sOverflowVertical?: TOverflow): TOverflow;
    /**
     * Returns the boundaries of the asset relative to the viewport. The amount of scrolling that has been applied to the viewport area (or
     * any other scrollable asset) is taken into account when computing the bounding rectangle. This means that the `top` and `left`
     * property change their values as soon as the scrolling position changes (so their values are relative to the viewport and not absolute).
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param bClient Specifies if the client area needs to be calculated.
     * @param pOffset Optional offset coordinates for the rectangle.
     * @return Returns a rectangle with the boundaries.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
     */
    export function rectangle(pAsset: HTMLElement | undefined, bClient?: boolean, pOffset?: Coordinate): Rect;
    /**
     * Returns the left boundary of the asset relative to the viewport.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @return Returns the left boundary in pixels.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
     */
    export function rectangleLeft(pAsset: HTMLElement | undefined): number;
    /**
     * Returns the top boundary of the asset relative to the viewport.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @return Returns the top boundary in pixels.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
     */
    export function rectangleTop(pAsset: HTMLElement | undefined): number;
    /**
     * Returns the right boundary of the asset relative to the viewport.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @return Returns the right boundary in pixels.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
     */
    export function rectangleRight(pAsset: HTMLElement | undefined): number;
    /**
     * Returns the bottom boundary of the asset relative to the viewport.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @return Returns the bottom boundary in pixels.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
     */
    export function rectangleBottom(pAsset: HTMLElement | undefined): number;
    /**
     * Returns the true pixel width of the asset.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @return Returns the width in pixels.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
     */
    export function rectangleWidth(pAsset: HTMLElement | undefined): number;
    /**
     * Returns the true pixel height of the asset.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @return Returns the height in pixels.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
     */
    export function rectangleHeight(pAsset: HTMLElement | undefined): number;
    /**
     * Sets or retrieves the left pixel value of the asset.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param nLeft Specifies the left value (can be a number, `auto` or `inherit`).
     * @return Returns the left value.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/left
     */
    export function left(pAsset: HTMLElement | undefined, nLeft?: number | "auto" | "inherit"): number | "auto";
    /**
     * Sets or retrieves the top pixel value of the asset.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param nTop Specifies the top value (can be a number, `auto` or `inherit`).
     * @return Returns the top value.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/top
     */
    export function top(pAsset: HTMLElement | undefined, nTop?: number | "auto" | "inherit"): number | "auto";
    /**
     * Sets or retrieves the right pixel value of the asset.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param nRight Specifies the right value (can be a number, `auto` or `inherit`).
     * @return Returns the right value.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/right
     */
    export function right(pAsset: HTMLElement | undefined, nRight?: number | "auto" | "inherit"): number | "auto";
    /**
     * Sets or retrieves the bottom pixel value of the asset.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param nBottom Specifies the bottom value (can be a number, `auto` or `inherit`).
     * @return Returns the bottom value.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
     */
    export function bottom(pAsset: HTMLElement | undefined, nBottom?: number | "auto" | "inherit"): number | "auto";
    /**
     * Sets or retrieves the width of the asset in pixels.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param nWidth Specifies the width in pixels (can be a number, `auto` or `inherit`).
     * @param bAttribute Specifies if the width attribute or style needs to be set or retrieves.
     * @return Returns the width in pixels.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/width
     */
    export function width(pAsset: HTMLElement | undefined, nWidth?: number | "auto" | "inherit", bAttribute?: boolean): number | "auto";
    /**
     * Sets or retrieves the height of the asset in pixels.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param nHeight Specifies the height in pixels (can be a number, `auto` or `inherit`).
     * @param bAttribute Specifies if the width attribute or style needs to be set or retrieves.
     * @return Returns the height in pixels.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/height
     */
    export function height(pAsset: HTMLElement | undefined, nHeight?: number | "auto" | "inherit", bAttribute?: boolean): number | "auto";
    /**
     * Sets or retrieves the background size of the asset in pixels.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param pSize Specifies the background size.
     * @return Returns the background size string.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
     */
    export function backgroundSize(
        pAsset: HTMLElement | undefined,
        pSize?: {
            /** Specifies the width in pixels (can be a number or `auto`). */
            width: number | "auto";
            /** Specifies the height in pixels (can be a number or `auto`). */
            height: number | "auto";
        }
    ): string;
    /**
     * Sets or retrieves a 2D translation.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param pTranslate Specifies the translation properties.
     * @return Returns the horizontal and vertical translation as a point.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform#translate
     */
    export function translate(
        pAsset: HTMLElement | undefined,
        pTranslate: {
            /** Specifies the horizontal translation. */
            x?: number;
            /** Specifies the vertical translation. */
            y?: number;
            /** Specifies if `translate3D` should be used (enabled by default). */
            translate3D?: boolean;
            /** Specifies if other transformations should be ignored or preserved. */
            ignoreTransformations?: boolean;
        }
    ): IPoint;
    /**
     * Sets the position of the asset.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param pPosition Specifies the position properties.
     */
    export function position(
        pAsset: HTMLElement | undefined,
        pPosition: {
            /** Specifies the horizontal position. */
            x: number;
            /** Specifies the vertical position. */
            y: number;
            /**
             * Specifies if the position should be set using a translate(3d)
             * transformation (disabled by default).
             */
            translate?: "no" | "yes" | "accelerated";
            /**
             * Specifies if the CSS left and top position should be set to `0` when
             * positioning the asset by translate (disabled by default).
             */
            resetCSSPosition?: boolean;
        }
    ): void;
    /**
     * Sets or retrieves the left scroll position.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param nScrollLeft Specifies the left scroll position.
     * @return Returns the left scroll position.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollLeft
     */
    export function scrollLeft(pAsset: HTMLElement | undefined, nScrollLeft?: number): number;
    /**
     * Sets or retrieves the top scroll position.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param nScrollLeft Specifies the top scroll position.
     * @return Returns the top scroll position.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop
     */
    export function scrollTop(pAsset: HTMLElement | undefined, nScrollTop?: number): number;
    /**
     * Retrieves the scroll width.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @return Returns the scroll width.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollWidth
     */
    export function scrollWidth(pAsset: HTMLElement | undefined): number;
    /**
     * Retrieves the scroll height.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @return Returns the scroll height.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight
     */
    export function scrollHeight(pAsset: HTMLElement | undefined): number;
    /**
     * Sets or retrieves the specified property.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param sProperty Specifies the property to get or set.
     * @param sValue Specifies the value to set.
     * @return Returns the property value.
     */
    export function property<T>(pAsset: HTMLElement | undefined, sProperty: string, pValue?: T): T | undefined;
    /**
     * Sets or retrieves the tab index.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param nTabIndex Specifies the tab index. Can be one of the following values:
     * - `-1`: The tab index is disabled;
     * - `0`: The browser determines the actual tab index;
     * - A positive value specifies a fixed index.
     * @return Returns the tab index.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.tabIndex
     */
    export function tabIndex(pAsset: HTMLElement | undefined, nTabIndex?: number): number;
    /**
     * Applies a skew effect.
     *
     * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param pProperties Specifies the skew properties.
     */
    export function skew(
        pAsset: HTMLElement | undefined,
        pProperties: {
            /** Specifies the left top horizontal coordinate. */
            leftTopX?: number;
            /** Specifies the left top vertical coordinate. */
            leftTopY?: number;
            /** Specifies the right top horizontal coordinate. */
            rightTopX?: number;
            /** Specifies the right top vertical coordinate. */
            rightTopY?: number;
            /** Specifies the left bottom horizontal coordinate. */
            leftBottomX?: number;
            /** Specifies the left bottom vertical coordinate. */
            leftBottomY?: number;
            /** Specifies the right bottom horizontal coordinate. */
            rightBottomX?: number;
            /** Specifies the right bottom vertical coordinate. */
            rightBottomY?: number;
            /** Specifies the width of the asset. */
            width?: number;
            /** Specifies the height of the asset. */
            height?: number;
        }
    ): void;
    /**
     * Gives focus to the asset.
     *
     * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @param bGuarantee Guarantees the focus is set.
     * @return Returns `true` if the focus is set.
     */
    export function focus(pAsset: HTMLElement | undefined, bGuarantee: boolean): boolean;
    /**
     * Blurs the asset focus.
     *
     * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
     * @param pAsset Reference to the asset.
     * @return Returns `true` if the focus is blurred.
     */
    export function blur(pAsset: HTMLElement | undefined): boolean;
    export class Asset extends Style {
        /** Returns the asset which currently has focus. */
        static get isFocused(): Asset | undefined;
        /** Retrieves if an input asset gained focus. */
        static get isFocusedOnInput(): boolean;
        /**
         * Retrieves an asset instance.
         * @param pAsset Reference to the asset or the asset identifier.
         * @return Returns an asset instance.
         */
        static of(pAsset: Asset | TDOMElement): Asset;
        /**
         * Asserts an asset instance. If no valid asset is supplied a temporary asset instance is created.
         * @param pAsset Specifies the asset to guarantee.
         */
        static assert(pAsset: Asset | undefined): Asset;
        /**
         * Applies operations to the specified asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset or the asset identifier.
         * @param fnAsset Specifies a function which can be used to apply operations.
         * @return Returns an asset instance.
         */
        static apply(pAsset: Asset | TDOMElement, fnAsset?: TAsset): Asset;
        /**
         * Styles an asset.
         * @param pAsset Reference to the asset or the asset identifier.
         * @param pStyles Specifies the styles. Nested styles are allowed. You
         * can supply an array of styles which will be merged. When there are
         * identical styles, the right-most style property takes precedence.
         * @param pStylesheet Reference to the stylesheet (if ommitted the default application stylesheet will be used).
         */
        static style(pAsset: Asset | TDOMElement, pStyles: IStyles | TStylesArray, pStylesheet?: Stylesheet): void;
        /**
         * Styles an asset (layout safe).
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset or the asset identifier.
         * @param pStyles Specifies the styles. Nested styles are allowed. You
         * can supply an array of styles which will be merged. When there are
         * identical styles, the right-most style property takes precedence.
         * @param pStylesheet Reference to the stylesheet (if ommitted the default application stylesheet will be used).
         */
        static styleSafe(pAsset: Asset | TDOMElement, pStyles: IStyles | TStylesArray, pStylesheet?: Stylesheet): void;
        /**
         * Creates a new asset and inserts it to the DOM.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sType Specifies the type of asset to be created.
         * @param fnConstruct Specifies a constructor function for the asset. This function is invoked before the asset is inserted into
         * the DOM. Use it to construct the new asset.
         * @param pParent Specifies an optional parent asset. If omitted the asset will be inserted into the document body.
         * @param pInsertBefore Specifies the asset before which the new asset is inserted.
         * @return Returns an asset instance.
         */
        static create(
            sType: string,
            fnConstruct?: TAsset,
            pParent?: Asset | TDOMElement,
            pInsertBefore?: Asset | TDOMElement
        ): Asset | undefined;
        /**
         * Constructs an asset instance.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pAsset Reference to the asset or the asset identifier.
         * @param fnConstruct Optional function which is invoked when constructing the instance.
         */
        protected constructor(pAsset: Asset | TDOMElement, fnConstruct?: TAsset);
        /** Retrieves the parent asset. */
        get parent(): Asset | undefined;
        /** Retrieves the first child of the asset. */
        get firstChild(): Asset | undefined;
        /** Retrieves the last child of the asset. */
        get lastChild(): Asset | undefined;
        /** Retrieves the (managed) left position of the asset. */
        get x(): number;
        /**
         * Sets the left position of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        set x(nX: number);
        /** Retrieves the (managed) top position of the asset. */
        get y(): number;
        /**
         * Sets the top position of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        set y(nY: number);
        /** Retrieves the (managed) zoom factor of the asset. */
        get z(): number;
        /**
         * Sets the top position of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        set z(nZ: number);
        /** Retrieves if the asset position is set using a translate transformation. */
        get positionByTranslate(): boolean;
        /**
         * Enables or disables if the asset position is set using a translate transformation.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        set positionByTranslate(bTranslate: boolean);
        /** Retrieves if the asset position is set using a translate3d transformation. */
        get positionByTranslate3D(): boolean;
        /**
         * Enables or disables if the asset position is set using a translate3d transformation.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        set positionByTranslate3D(bTranslate3d: boolean);
        /**
         * Retrieves the positioning type of the asset.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
         */
        get positioning(): TPositioning;
        /**
         * Sets the positioning type of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
         */
        set positioning(sPositioning: TPositioning);
        /**
         * Retrieves the box sizing model of the asset.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
         */
        get boxModel(): TModel;
        /**
         * Sets the box sizing model of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
         */
        set boxModel(sBoxModel: TModel);
        /**
         * Retrieves the rendering (display) method of the asset.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
         */
        get rendering(): TRendering;
        /**
         * Sets the rendering (display) method of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
         */
        set rendering(sRendering: TRendering);
        /**
         * Retrieves if the asset is visible.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility
         */
        get visible(): boolean;
        /**
         * Sets the visibility of the asset (and removes the visibility property
         * if the asset should be visible).
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility
         */
        set visible(bVisible: boolean);
        /**
         * Sets the visibility of the asset explicitly (using `visible` for visible assets).
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility
         */
        set visibleExplicit(bVisible: boolean);
        /**
         * Retrieves the overflow type of the asset.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
         */
        get overflow(): TOverflow;
        /**
         * Sets the overflow type of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
         */
        set overflow(sOverflow: TOverflow);
        /**
         * Retrieves the horizontal overflow type of the asset.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
         */
        get overflowHorizontal(): TOverflow;
        /**
         * Sets the horizontal overflow type of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
         */
        set overflowHorizontal(sOverflowHorizontal: TOverflow);
        /**
         * Retrieves the vertical overflow type of the asset.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
         */
        get overflowVertical(): TOverflow;
        /**
         * Sets the vertical overflow type of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
         */
        set overflowVertical(sOverflowVertical: TOverflow);
        /**
         * Retrieves the boundaries of the asset relative to the viewport. The amount of scrolling that has been applied to the viewport area
         * (or any other scrollable asset) is taken into account when computing the bounding rectangle. This means that the `top` and `left`
         * property change their values as soon as the scrolling position changes (so their values are relative to the viewport and not
         * absolute).
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
         */
        get rectangle(): Rect;
        /**
         * Retrieves the boundaries of the client are of the asset relative to the viewport. The amount of scrolling that has been applied to
         * the viewport area (or any other scrollable asset) is taken into account when computing the bounding rectangle. This means that
         * the `top` and `left` property change their values as soon as the scrolling position changes (so their values are relative to the
         * viewport and not absolute).
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
         */
        get rectangleClient(): Rect;
        /**
         * Retrieves the left boundary of the asset relative to the viewport.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
         */
        get rectangleLeft(): number;
        /**
         * Retrieves the top boundary of the asset relative to the viewport.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
         */
        get rectangleTop(): number;
        /**
         * Retrieves the right boundary of the asset relative to the viewport.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
         */
        get rectangleRight(): number;
        /**
         * Retrieves the bottom boundary of the asset relative to the viewport.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
         */
        get rectangleBottom(): number;
        /**
         * Retrieves the true pixel width of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
         */
        get rectangleWidth(): number;
        /**
         * Retrieves the true pixel height of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
         */
        get rectangleHeight(): number;
        /** Retrieves the zoom factor of the asset. */
        get zoom(): number;
        /**
         * Sets the zoom factor of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        set zoom(nZoom: number);
        /**
         * Retrieves the left pixel value of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/left
         */
        get left(): number | "auto" | "inherit";
        /**
         * Sets the left pixel value of the asset (can be a number, `auto` or `inherit`).
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/left
         */
        set left(nLeft: number | "auto" | "inherit");
        /**
         * Retrieves the top pixel value of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/top
         */
        get top(): number | "auto" | "inherit";
        /**
         * Sets the top pixel value of the asset (can be a number, `auto` or `inherit`).
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/top
         */
        set top(nTop: number | "auto" | "inherit");
        /**
         * Retrieves the right pixel value of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/right
         */
        get right(): number | "auto" | "inherit";
        /**
         * Sets the right pixel value of the asset (can be a number, `auto` or `inherit`).
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/right
         */
        set right(nRight: number | "auto" | "inherit");
        /**
         * Retrieves the bottom pixel value of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
         */
        get bottom(): number | "auto" | "inherit";
        /**
         * Sets the bottom pixel value of the asset (can be a number, `auto` or `inherit`).
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
         */
        set bottom(nBottom: number | "auto" | "inherit");
        /**
         * Retrieves the width of the asset in pixels.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/width
         */
        get width(): number | "auto" | "inherit";
        /**
         * Sets the width of the asset (or supply `AUTO` to set the property to `auto`).
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/width
         */
        set width(nWidth: number | "auto" | "inherit");
        /**
         * Retrieves the height of the asset in pixels.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/height
         */
        get height(): number | "auto" | "inherit";
        /**
         * Sets the height of the asset (or supply `AUTO` to set the property to `auto`).
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/height
         */
        set height(nHeight: number | "auto" | "inherit");
        /**
         * Retrieves the width attribute of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        get elementWidth(): number | "auto" | "inherit";
        /**
         * Sets the width attribute of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        set elementWidth(nWidth: number | "auto" | "inherit");
        /**
         * Retrieves the height attribute of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        get elementHeight(): number | "auto" | "inherit";
        /**
         * Sets the height attribute of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        set elementHeight(nHeight: number | "auto" | "inherit");
        /**
         * Retrieves the left scroll position.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        get scrollLeft(): number;
        /**
         * Sets the left scroll position.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        set scrollLeft(nScrollLeft: number);
        /**
         * Retrieves the top scroll position.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        get scrollTop(): number;
        /**
         * Sets the top scroll position.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        set scrollTop(nScrollTop: number);
        /**
         * Retrieves the scroll width.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        get scrollWidth(): number;
        /**
         * Retrieves the scroll height.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        get scrollHeight(): number;
        /**
         * Retrieves the tab index. Can be one of the following values:
         * - `-1`: The tab index is disabled;
         * - `0`: The browser determines the actual tab index;
         * - A positive value specifies a fixed index.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        get tabIndex(): number;
        /**
         * Sets the tab index. Can be one of the following values:
         * - `-1`: The tab index is disabled;
         * - `0`: The browser determines the actual tab index;
         * - A positive value specifies a fixed index.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        set tabIndex(nTab: number);
        /**
         * Sets or retrieves the specified property.
         * @param sProperty Specifies the property name.
         * @param pValue Optional value for the property.
         * @return Returns the property value.
         */
        property<T>(sProperty: string, pValue?: T): T | undefined;
        /**
         * Applies asset operations and returns a reference.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param fnAsset Specifies the function which applies the operations.
         * @param bInstantly Executes the write operation instantly.
         * @return Returns a reference to the asset instance.
         */
        apply(fnAsset: TAsset, bInstantly?: boolean): this;
        /**
         * Styles an asset.
         * @param pStyles Specifies the styles. Nested styles are allowed. You
         * can supply an array of styles which will be merged. When there are
         * identical styles, the right-most style property takes precedence.
         * @param pStylesheet Reference to the stylesheet (if ommitted the default application stylesheet will be used).
         */
        style(pStyles: IStyles | TStylesArray, pStylesheet?: Stylesheet): void;
        /**
         * Styles an asset (layout safe).
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pStyles Specifies the styles. Nested styles are allowed. You
         * can supply an array of styles which will be merged. When there are
         * identical styles, the right-most style property takes precedence.
         * @param pStylesheet Reference to the stylesheet (if ommitted the default application stylesheet will be used).
         */
        styleSafe(pStyles: IStyles | TStylesArray, pStylesheet?: Stylesheet): void;
        /**
         * Returns a child asset.
         * @param nIndex Specifies the asset index.
         * @return Returns a new asset instance or `undefined` if no child is found.
         */
        child(nIndex?: number): Asset | undefined;
        /**
         * Iterates through all child assets.
         * @param fnChild Function which is invoked for each child asset.
         * @param fnChild.pChild Reference to the child asset.
         */
        forEachChild(fnChild: (pChild: Asset) => void): void;
        /**
         * Sets the position of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pPosition Specifies the position properties.
         */
        position(pPosition: {
            /** Specifies the left position of the asset. */
            x?: number;
            /** Specifies the top position of the asset. */
            y?: number;
            /** Specifies the zoom factor of the asset. */
            z?: number;
            /** Specifies if the position should be set using a translate(3d) transformation. */
            translate?: "no" | "yes" | "accelerated";
        }): void;
        /**
         * Shifts the position of the asset.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pShift Specifies the shift properties.
         */
        shift(pShift: {
            /** Specifies the horizontal shift of the asset. */
            horizontal?: number;
            /** Specifies the vertical shift of the asset. */
            vertical?: number;
            /** Specifies if the position should be set using a translate(3d) transformation. */
            translate?: "no" | "yes" | "accelerated";
        }): void;
        /**
         * Retrieves the boundaries of the asset with the applied offset relative to the viewport.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pOffset Specifies offset coordinates for the rectangle.
         * @return Returns the boundaries.
         */
        rectangleOffset(pOffset: Coordinate): Rect;
        /**
         * Sets or retrieves the background size of the asset in pixels.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pSize Specifies the background size.
         * @return Returns the background size string.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
         */
        backgroundSize(pSize?: {
            /** Specifies the width in pixels (can be a number or `auto`). */
            width: number | "auto";
            /** Specifies the height in pixels (can be a number or `auto`). */
            height: number | "auto";
        }): string;
        /**
         * Sets or retrieves a 2D translation.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pTranslate Specifies the translation properties.
         * @return Returns the horizontal and vertical translation as a point.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform#translate
         */
        translate(pTranslate: {
            /** Specifies the horizontal translation. */
            x?: number;
            /** Specifies the vertical translation. */
            y?: number;
            /** Specifies if `translate3D` should be used (enabled by default). */
            translate3D?: boolean;
            /** Specifies if other transformations should be ignored or preserved. */
            ignoreTransformations?: boolean;
        }): IPoint;
        /**
         * Sets or retrieves a horizontal 2D translation.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pTranslate Specifies the translation properties.
         * @return Returns the horizontal translation.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform#translate
         */
        translateX(pTranslate: {
            /** Specifies the horizontal translation. */
            x?: number;
            /** Specifies if `translate3D` should be used (enabled by default). */
            translate3D?: boolean;
            /** Specifies if other transformations should be ignored or preserved. */
            ignoreTransformations?: boolean;
        }): number;
        /**
         * Sets or retrieves a vertical 2D translation.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pTranslate Specifies the translation properties.
         * @return Returns the vertical translation.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform#translate
         */
        translateY(pTranslate: {
            /** Specifies the vertical translation. */
            y?: number;
            /** Specifies if `translate3D` should be used (enabled by default). */
            translate3D?: boolean;
            /** Specifies if other transformations should be ignored or preserved. */
            ignoreTransformations?: boolean;
        }): number;
        /**
         * Applies a skew effect.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pProperties Specifies the skew properties.
         */
        skew(pProperties: {
            /** Specifies the left top horizontal coordinate. */
            leftTopX?: number;
            /** Specifies the left top vertical coordinate. */
            leftTopY?: number;
            /** Specifies the right top horizontal coordinate. */
            rightTopX?: number;
            /** Specifies the right top vertical coordinate. */
            rightTopY?: number;
            /** Specifies the left bottom horizontal coordinate. */
            leftBottomX?: number;
            /** Specifies the left bottom vertical coordinate. */
            leftBottomY?: number;
            /** Specifies the right bottom horizontal coordinate. */
            rightBottomX?: number;
            /** Specifies the right bottom vertical coordinate. */
            rightBottomY?: number;
            /** Specifies the width of the asset. */
            width?: number;
            /** Specifies the height of the asset. */
            height?: number;
        }): void;
        /**
         * Applies an offset skew effect.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pProperties Specifies the skew properties.
         */
        skewOffset(pProperties: {
            /** Specifies the left top horizontal coordinate. */
            leftTopX?: number;
            /** Specifies the left top vertical coordinate. */
            leftTopY?: number;
            /** Specifies the right top horizontal coordinate. */
            rightTopX?: number;
            /** Specifies the right top vertical coordinate. */
            rightTopY?: number;
            /** Specifies the left bottom horizontal coordinate. */
            leftBottomX?: number;
            /** Specifies the left bottom vertical coordinate. */
            leftBottomY?: number;
            /** Specifies the right bottom horizontal coordinate. */
            rightBottomX?: number;
            /** Specifies the right bottom vertical coordinate. */
            rightBottomY?: number;
            /** Specifies the width of the asset. */
            width?: number;
            /** Specifies the height of the asset. */
            height?: number;
        }): void;
        /**
         * Removes an active skew.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         */
        unskew(): void;
        /**
         * Gives focus to the asset.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param bGuarantee Gurantees the focus is set (default is `true`).
         * @return Returns `true` if the focus is set.
         */
        focus(bGuarantee?: boolean): boolean;
        /**
         * Blurs the asset focus.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @return Returns `true` if the focus is blurred.
         */
        blur(): boolean;
        /**
         * Removes the children from the asset.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         */
        destroyChildren(): void;
        /**
         * Destroys the asset.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param bRemoveFromDOM Specifies that the asset should be removed from the DOM.
         * @param bTidy Specifies if child assets should be removed piece by piece from the DOM.
         * @return Returns a reference to the asset in the DOM.
         */
        destroy(bRemoveFromDOM?: boolean, bTidy?: boolean): HTMLElement | undefined;
    }
    /** Describes the available gradient directions. */
    export const enum Directions {
        Vertical = 0,
        Horizontal = 1,
        Diagonal = 2,
    }
    /** Describes the horizontal alignment options. */
    export const enum HorizontalAlignment {
        Left = 0,
        Center = 1,
        Right = 2,
    }
    /** Describes the vertical alignment options. */
    export const enum VerticalAlignment {
        Top = 0,
        Middle = 1,
        Bottom = 2,
    }
    /**
     * Type alias for the render function.
     * @param TRender.pContext Reference to the context.
     * @param TRender.nWidth Specifies the width of the canvas.
     * @param TRender.nHeight Specifies the height of the canvas.
     * @param TRender.nRatio Specifies the pixel ratio of the canvas.
     */
    export type TRender = (pContext: CanvasRenderingContext2D, nWidth?: number, nHeight?: number, nRatio?: number) => void;
    /**
     * Returns the pixel ratio of the display.
     * @return Returns the pixel ratio.
     */
    export function pixelRatio(): number;
    /**
     * Creates a new canvas element.
     * @return Returns the new canvas element.
     */
    export function canvas(): HTMLCanvasElement;
    /**
     * Creates a 2D context for the canvas.
     * @param pCanvas Specifies the canvas. If omitted a new canvas will be created.
     * @param nWidth Specifies the width of the context.
     * @param nHeight Specifies the height of the context.
     * @return Returns the 2D context.
     */
    export function context2D(pCanvas?: HTMLCanvasElement, nWidth?: number, nHeight?: number): CanvasRenderingContext2D;
    /**
     * Creates a WebGL context for the canvas.
     * @param pCanvas Specifies the canvas. If omitted a new canvas will be created.
     * @param pOptions Specifies options for the canvas.
     * @param nWidth Specifies the width of the context.
     * @param nHeight Specifies the height of the context.
     * @return Returns the WebGL context.
     */
    export function contextWebGL(pCanvas?: HTMLCanvasElement, pOptions?: Object, nWidth?: number, nHeight?: number): WebGLRenderingContext;
    /**
     * Renders a 2D canvas.
     * @param pAsset Specifies the asset to render.
     * @param fnRender Specifies the rendering function.
     * @param nWidth Specifies the width of the canvas.
     * @param nHeight Specifies the height of the canvas.
     * @return Returns the 2D context.
     */
    export function render2D(
        pAsset: DOMElement | HTMLCanvasElement | undefined,
        fnRender: TRender,
        nWidth?: number,
        nHeight?: number
    ): CanvasRenderingContext2D;
    /**
     * Renders a 2D canvas to the background of an asset.
     * @param pAsset Specifies the asset to render.
     * @param fnRender Specifies the rendering function.
     * @param nWidth Specifies the width of the canvas.
     * @param nHeight Specifies the height of the canvas.
     * @param sRepeat Specifies the background repeat setting.
     */
    export function renderBackground(pAsset: Asset, fnRender: TRender, nWidth: number, nHeight: number, sRepeat?: string): void;
    /**
     * Applies a new 2D shader.
     * @param pAsset Reference to the asset.
     * @param fnRender Specifies the rendering function.
     * @param nWidth Specifies the width of the shader.
     * @param nHeight Specifies the height of the shader.
     * @return Returns the shader.
     */
    export function applyShader2D(pAsset: DOMElement | HTMLCanvasElement, fnRender: TRender, nWidth?: number, nHeight?: number): Shader2D;
    /** Shader for a 2D canvas. */
    export class Shader2D {
        /**
         * Constructs a new 2D shader.
         * @param pElement Reference tot the element.
         * @param fnRender Specifies the rendering function.
         * @param nWidth Specifies the width of the shader.
         * @param nHeight Specifies the height of the shader.
         */
        constructor(pElement: DOMElement | HTMLCanvasElement, fnRender: TRender, nWidth?: number, nHeight?: number);
        /** Retrieves a reference to the drawing context. */
        get context(): CanvasRenderingContext2D;
        /** Retrieves the width of the canvas. */
        get width(): number;
        /** Retrieves the height of the canvas. */
        get height(): number;
        /**
         * Clears the canvas.
         * @param bFromBuffer Specifies if the image in the buffer needs to be restored on the canvas.
         */
        clear(bFromBuffer?: boolean): void;
        /**
         * Creates a buffer of the current canvas.
         * @param bForce Specifies if the buffer always needs to be created.
         * @return Returns the drawing context of the buffer.
         */
        buffer(bForce?: boolean): CanvasRenderingContext2D | undefined;
        /** Resets the canvas. This will restore the image from the buffer (if present) or from a new rendering. */
        reset(): void;
        /**
         * Renders the canvas with the specified width and height.
         * @param nWidth Specifies the width of the canvas.
         * @param nHeight Specifies the height of the canvas.
         */
        render(nWidth?: number, nHeight?: number): void;
        /**
         * Applies a darken effect on the canvas.
         * @param nBegin Specifies the begin darkness (0..100).
         * @param nEnd Specifies the end darkness (0..100).
         * @param nDirection Specifies the direction of the darken effect.
         */
        darken(nBegin: number, nEnd: number, nDirection?: Directions): void;
        /**
         * Applies a lighten effect on the canvas.
         * @param nBegin Specifies the begin lightness (0..100).
         * @param nEnd Specifies the end lightness (0..100).
         * @param nDirection Specifies the direction of the lighten effect.
         */
        lighten(nBegin: number, nEnd: number, nDirection?: Directions): void;
        /**
         * Applies a grayscale effect to the canvas.
         * @param bOptimized Specifies if optimized grayscaling should be used.
         * @param bWhitening Specifies if a whitening effect should be applied.
         * @param nOpacity Specifies the opacity.
         */
        grayscale(bOptimized?: boolean, bWhitening?: boolean, nOpacity?: number): void;
    }
    /** Text wrapper for a 2D canvas. */
    export class TextWrapper {
        /**
         * Calculates the baseline correction for the font.
         * @param sFont Specifies the font.
         * @param sAlignment Specifies the alignment.
         * @return Returns the correction number.
         */
        static correction(sFont: string, sAlignment: CanvasTextBaseline): number;
        /**
         * Constructs a new text wrapper.
         * @param pContext Reference to the drawing context.
         * @param pProperties Specifies the font properties.
         */
        constructor(
            pContext: CanvasRenderingContext2D,
            pProperties?: {
                /** Specifies the font. */
                font?: string;
                /** Specifies the font size. */
                size?: number;
                /** Specifies the fill style. */
                fillStyle?: string;
                /** Specifies the line height. */
                lineHeight?: number;
                /** Specifies if stroking is enabled. */
                stroke?: boolean;
                /** Specifies the stroke style. */
                strokeStyle?: string;
            }
        );
        /** Retrieves a reference to the drawing context. */
        get context(): CanvasRenderingContext2D;
        /** Retrieves the font. */
        get font(): string;
        /** Sets the font. */
        set font(sFont: string);
        /** Retrieves the font size. */
        get size(): number;
        /** Sets the font size. */
        set size(nSize: number);
        /** Retrieves the line height. */
        get lineHeight(): number;
        /** Sets the line height. */
        set lineHeight(nLineHeight: number);
        /** Retrieves the fill style. */
        get fillStyle(): string;
        /** Sets the fill style. */
        set fillStyle(sFillStyle: string);
        /** Retrieves the stroke mode. */
        get stroke(): boolean;
        /** Enables or disables stroke mode. */
        set stroke(bStroke: boolean);
        /** Retrieves the stroke style. */
        get strokeStyle(): string;
        /** Sets the stroke style. */
        set strokeStyle(sStrokeStyle: string);

        /**
         * Measures the width of the supplied text.
         * @param sText Specifies the text to measure.
         * @return Returns the width in pixels.
         */
        measure(sText: string): number;
        /**
         * The master draw text function.
         * @param sText Specifies the string to plot.
         * @param pProperties Specifies the text properties.
         */
        draw(
            sText: string,
            pProperties: {
                /** Specifies the horizontal position. */
                x: number;
                /** Specifies the vertical position. */
                y: number;
                /** Specifies the maximum string width in pixels. */
                width: number;
                /** Specifies the font face. */
                font?: string;
                /** Specifies the font size. */
                size?: number;
                /** Specifies the fill style. */
                fillStyle?: string;
                /** Specifies the line height. */
                lineHeight?: number;
                /** Specifies if the text needs to be stroked. */
                stroke?: boolean;
                /** Specifies the stroke style. */
                strokeStyle?: string;
                /** Specifies the horizontal alignment. */
                horizontal?: HorizontalAlignment;
                /** Specifies the vertical alignment. */
                vertical?: VerticalAlignment;
                /** Specifies the maximum lines. */
                lines?: number;
                /** Specifies the suffix to add in case of cropped text. */
                suffix?: string;
            }
        ): void;
        /**
         * Draws a single line of text.
         * @param sText Specifies the string to plot.
         * @param nX Specifies the horizontal position.
         * @param nY Specifies the vertical position.
         * @param nWidth Specifies the maximum string width in pixels.
         * @param nAlignment Specifies the horizontal alignment.
         * @param sSuffix Specifies the suffix to add in case of cropped text.
         */
        single(sText: string, nX: number, nY: number, nWidth?: number, nAlignment?: HorizontalAlignment, sSuffix?: string): void;
        /**
         * Draws multiple lines of text.
         * @param sText Specifies the string to plot.
         * @param nX Specifies the horizontal position.
         * @param nY Specifies the vertical position.
         * @param nWidth Specifies the maximum string width in pixels.
         * @param nLines Specifies the maximum lines.
         * @param nHorizontal Specifies the horizontal alignment.
         * @param nVertical Specifies the vertical alignment.
         * @param sSuffix Specifies the suffix to add in case of cropped text.
         */
        Mmultiple(
            sText: string,
            nX: number,
            nY: number,
            nWidth?: number,
            nLines?: number,
            nHorizontal?: HorizontalAlignment,
            nVertical?: VerticalAlignment,
            sSuffix?: string
        ): void;
    }
    export interface IStyleRules {
        [selector: string]: IStyles;
    }
    /**
     * Applies static stylesheet rules to the supplied stylesheet.
     * @param pRules Specifies the rules to add.
     * @param pStylesheet Specifies the stylesheet.
     */
    export function styleRules(pRules: IStyleRules, pStylesheet?: Stylesheet): void;
    export interface IApplication<T> {
        /**
         * Specifies the function to be executed when the dom is `Interactive` or
         * `Complete` (depending on the `WaitForComplete` value).
         */
        do?: (pPayload: T) => void;
        /**
         * Specifies an optional condition function which should return `true`
         * before the application can continue.
         */
        when?: (pPayload: T) => boolean;
        /**
         * Specifies an optional prerequisites function. This function is
         * executed before the job is executed. It is possible this function is
         * invoked multiple times. Be careful if you use this function to start
         * other processes as they can be invoked more than once. Return
         * `true` to prevent further calls and to make sure the function is
         * invoked once.
         */
        first?: (pPayload: T) => boolean;
        /**
         * Specifies if the function execution is postponed until the DOM
         * is `Complete` (default is `true`).
         */
        waitForComplete?: boolean;
        /**
         * Specifies the function which is executed when the application
         * is shown.
         */
        readonly onShow?: (pPayload: T) => void;
        /**
         * Specifies the function which is executed when the application
         * is hidden.
         */
        readonly onHide?: (pPayload: T) => void;
        /**
         * Specifies the function which is executed when the application is
         * activated (gains focus).
         */
        readonly onActivate?: (pPayload: T) => void;
        /**
         * Specifies the function which is executed when the application is
         * deactivated (loses focus).
         */
        readonly onDeactivate?: (pPayload: T) => void;
        /**
         * Specifies the function which is executed when the application is
         * unloaded.
         */
        onUnload?: (pPayload: T) => void;
        /** Contains application payload. */
        readonly payload?: T;
        /** Contains styles for the application. */
        readonly styleRules?: IStyleRules;
        /** Specifies if the default CSS template for desktop class applications should be used. */
        readonly desktopClass?: boolean;
    }
    export class Application {
        /**
         * Retrieves if the DOM is interactive. This state is reached immediately after
         * the DOM is loaded and it is ready for low-level interaction. For drawing
         * and user interface actions wait until the DOM is complete.
         */
        static get isInteractive(): boolean;
        /**
         * Retrieves if the DOM loading is complete. This state is reached after the
         * document is processed.
         */
        static get isComplete(): boolean;
        /** Retrieves if the DOM is unloading. */
        static get isUnloading(): boolean;
        /** Retrieves if the DOM is visible. */
        static get isVisible(): boolean;
        /** Retrieves if the DOM is active and has focus. */
        static get isActive(): boolean;

        /** Observe the process pipeline. */
        static observe(): void;
        /**
         * Execute an application or adds it to the process pipeline.
         * @param pApplication Specifies the application properties.
         */
        static run<T>(pApplication: IApplication<T>): void;
    }
    /** Type alias for the element callback function. */
    export type TElement = (pElement: Element) => void;
    /** Type alias for the element destroy event. */
    export type TElementDestroy = (pElement: Element, bIsChild: boolean) => void;
    export class Element extends Asset {
        /**
         * Contains the `OnDestroy` event which is invoked when the element is destroyed.
         * @event
         */
        onDestroy: TElementDestroy | undefined;
        /** Retrieves the (managed) head element. */
        static get head(): Element;
        /** Retrieves the (managed) body element. */
        static get body(): Element;
        /** Sets the policy name for trusted types. */
        static setTrustedTypesPolicy(sPolicyName: string): void;
        /**
         * Sets a function which is invoked when an element is destroyed. Multiple bindings are supported.
         * @event
         */
        static whenDestroyed(fnDestroy: TElementDestroy): void;
        /**
         * Creates a new element and inserts it to the DOM.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sType Specifies the type of element to be created.
         * @param fnElement Specifies a constructor function for the element. This function is invoked before the element is inserted into
         * the DOM. Use it to construct the new element.
         * @param pParent Specifies an optional parent element. If omitted the element will be inserted into the document body.
         * @param pInsertBefore Specifies the element before the new element is inserted.
         * @param pStyles Specifies the styles. Nested styles are allowed. You can supply an array of styles which will be merged. When there
         * are identical styles, the right-most style property takes precedence.
         * @param pStylesheet Reference to the stylesheet. If omitted the default application stylesheet will be used.
         * @return Returns the new element.
         */
        static create(
            sType: string,
            fnElement?: TElement,
            pParent?: Element | Asset | TDOMElement,
            pInsertBefore?: Element | Asset | TDOMElement,
            pStyles?: IStyles | TStylesArray,
            pStylesheet?: Stylesheet
        ): Element;
        /**
         * Asserts an element instance. If no valid element is supplied a temporary element instance is created.
         * @param pElement Specifies the element to guarantee.
         */
        static assert(pElement: Element | undefined): Element;
        /**
         * Sanitizes the supplied HTML code using the current trusted types policy.
         * @param sHTML Specifies the HTML code to sanitize.
         * @return Returns the sanitized HTML string.
         */
        //@ts-ignore
        static sanitize<T extends string | TrustedHTML = string | TrustedHTML>(sHTML: string): T;
        /**
         * Sets or retrieves the `innerHTML` of the element.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param pElement Specifies the element.
         * @param sHTML Optional value with the HTML string.
         * @return Returns the HTML string.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML
         */
        static HTML(pElement: HTMLElement | undefined, sHTML?: string): string;
        /**
         * Sets or retrieves the plain text content of the element. The text is HTML safe, so no markup is supported. Use `HTML` if you
         * need markup.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param pElement Specifies the element.
         * @param sText Optional value with the text string.
         * @param bAppend Optional parameter which specifies if the supplied text needs to be appended instead of replaced.
         * @param bInsert Optional parameter which specifies if the supplied text needs to be inserted at the beginning instead of replaced.
         * @return Returns the text content.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent
         * @see https://developer.mozilla.org/en-US/docs/Web/API/document.createTextNode
         */
        static text(pElement: HTMLElement | undefined, sText?: string, bAppend?: boolean, bInsert?: boolean): string;
        /**
         * Sets the zoom factor for the specified elements.
         *
         * <span style="color: #ff9307;"><b>Forced layout warning!</b> <i>This function might cause a forced layout</i></span>
         * @param pElements Specifies an array of elements.
         * @param nZoom Specifies the zoom factor to apply.
         */
        static zoom(pElements: Element[], nZoom: number): void;

        /** Retrieves the parent element. */
        get parent(): Element | Asset | undefined;
        /** Retrieves the index number of the element. */
        get index(): number;
        /**
         * Retrieves the `innerHTML` of the element.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML
         */
        get HTML(): string;
        /**
         * Sets the `innerHTML` of the element.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML
         */
        set HTML(sHTML: string);
        /**
         * Returns the text content of the element and its descendants.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent
         */
        get text(): string;
        /**
         * Sets the text content of the element.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @see https://developer.mozilla.org/en-US/docs/Web/API/document.createTextNode
         */
        set text(sText: string);
        /** Specifies if the element is destroyed. */
        get isDestroyed(): boolean;

        /**
         * Chains the supplied element.
         * @param pElement Specifies the element to chain.
         */
        chain(pElement: Element): void;
        /**
         * Creates a new child element.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sType Specifies the type of element to be created.
         * @param fnElement Specifies a constructor function for the element. This function is invoked before the element is inserted into
         * the DOM. Use it to construct the new element.
         * @param pStyles Specifies the styles. Nested styles are allowed. You can supply an array of styles which will be merged. When there
         * are identical styles, the right-most style property takes precedence.
         * @param pStylesheet Reference to the stylesheet. If omitted the default application stylesheet will be used.
         * @return Returns a reference to the new element.
         */
        create(sType: string, fnElement?: TElement, pStyles?: IStyles | TStylesArray, pStylesheet?: Stylesheet): Element;
        /**
         * Appends a new child element.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sType Specifies the type of element to be created.
         * @param fnElement Specifies a constructor function for the element. This function is invoked before the element is inserted into
         * the DOM. Use it to construct the new element.
         * @param pStyles Specifies the styles. Nested styles are allowed. You can supply an array of styles which will be merged. When there
         * are identical styles, the right-most style property takes precedence.
         * @param pStylesheet Reference to the stylesheet. If omitted the default application stylesheet will be used.
         * @return Returns a reference to the new element.
         */
        append(sType: string, fnElement?: TElement, pStyles?: IStyles | TStylesArray, pStylesheet?: Stylesheet): Element;
        /**
         * Inserts a new child element.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sType Specifies the type of element to be created.
         * @param fnElement Specifies a constructor function for the element. This function is invoked before the element is inserted into
         * the DOM. Use it to construct the new element.
         * @param pStyles Specifies the styles. Nested styles are allowed. You can supply an array of styles which will be merged. When there
         * are identical styles, the right-most style property takes precedence.
         * @param pStylesheet Reference to the stylesheet. If omitted the default application stylesheet will be used.
         * @param nIndex Specifies the index number for the insert.
         * @return Returns a reference to the new element.
         */
        insert(sType: string, fnElement?: TElement, pStyles?: IStyles | TStylesArray, pStylesheet?: Stylesheet, nIndex?: number): Element;
        /**
         * Appends text content to the element.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sText Specifies the text string to add.
         */
        textAppend(sText: string): void;
        /**
         * Inserts text content to the beginning of the element.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sText Specifies the text string to insert.
         */
        textInsert(sText: string): void;
        /**
         * Parses markdown to the element.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param pMarkdownParser Reference to a markdown parser to use as input.
         * @param pOptions Options for the parser.
         * @param fnElement Specifies a function that is invoked for each created element.
         */
        markdown<T = undefined>(
            pMarkdownParser: MarkdownParser<T>,
            pOptions?: {
                /** Specifies the features to emit. */
                features?: MarkdownFeatures;
                /** Specifies a `@`-mention handler. */
                mentions?: (pParent: Element, pMention: T | undefined, sContent: string) => Element | undefined;
                /** Specifies a `#`-reference handler. */
                references?: (pParent: Element, pReference: T | undefined, sContent: string) => Element | undefined;
                /** Specifies the target for hyperlinks. */
                target?: "self" | "blank";
            },
            fnElement?: (pElement: Element, sType: MarkdownTypes) => void
        ): void;
        /**
         * Removes the children from the element.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         */
        destroyChildren(): void;
        /**
         * Destroys the element.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param bTidy Specifies if child assets should be removed piece by piece from the DOM.
         * @return Returns a reference to the asset in the DOM.
         */
        destroy(bTidy?: boolean): HTMLElement | undefined;
    }
    /**
     * Type alias for the fragment callback function.
     * @param TFragment.pFragment Reference to the fragment.
     */
    export type TFragment = (pFragment: Fragment) => void;
    export class Fragment {
        /**
         * Creates a new fragment and inserts it to the DOM. If you want to postpone the DOM insertion, create a new `Fragment` object and
         * invoke `Insert` manually.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param fnFragment Specifies a constructor function for the fragment.
         * @param pParent Specifies an optional parent element. If omitted the fragment will be inserted into the document body.
         * @param pInsertBefore Specifies the element before the fragment is inserted.
         * @return Returns the fragment.
         */
        static create(
            fnFragment?: TFragment,
            pParent?: Element | Asset | TDOMElement,
            pInsertBefore?: Element | Asset | TDOMElement
        ): Fragment;
        /**
         * Constructs a new fragment.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param fnFragment Specifies a constructor function for the fragment.
         */
        constructor(fnFragment?: TFragment);
        /**
         * Creates a new child element at the end of the fragment (or the parent element if the fragment is inserted).
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sType Specifies the type of element to be created.
         * @param fnElement Specifies a constructor function for the element. This function is invoked before the element is inserted into
         * the DOM. Use it to construct the new element.
         * @return Returns a reference to the new element.
         */
        create(sType: string, fnElement?: TElement): Element | undefined;
        /**
         * Appends a new child element to the end of the fragment (or the parent element if the fragment is inserted).
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sType Specifies the type of element to be created.
         * @param fnElement Specifies a constructor function for the element. This function is invoked before the element is inserted into
         * the DOM. Use it to construct the new element.
         * @return Returns a reference to the new element.
         */
        append(sType: string, fnElement?: TElement): Element | undefined;
        /**
         * Inserts a new child element into the fragment (or the parent element if the fragment is inserted).
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param sType Specifies the type of element to be created.
         * @param pInsertBefore Specifies the before element.
         * @param fnElement Specifies a constructor function for the element. This function is invoked before the element is inserted into
         * the DOM. Use it to construct the new element.
         * @return Returns a reference to the new element.
         */
        insertBefore(sType: string, pInsertBefore: Element | Asset | TDOMElement, fnElement?: TElement): Element | undefined;
        /**
         * Relfects the fragment to the DOM.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param pParent Specifies an optional parent element. If omitted the fragment will be inserted into the document body.
         * @param pInsertBefore Specifies the element before the fragment is inserted.
         */
        reflect(pParent?: Element | Asset | TDOMElement, pInsertBefore?: Element | Asset | TDOMElement): void;
    }
    /**
     * # Perspective
     *
     * Perform perspective skew or warp on HTML elements using 3D transformation.
     */
    /**
     * Calculates the skew 3D matrix transformation string.
     * @param pProperties Specifies the transformation properties.
     * @return Returns the transformation string.
     */
    export function perspective(pProperties: {
        /** Specifies the left top horizontal coordinate. */
        leftTopX: number;
        /** Specifies the left top vertical coordinate. */
        leftTopY: number;
        /** Specifies the right top horizontal coordinate. */
        rightTopX: number;
        /** Specifies the right top vertical coordinate. */
        rightTopY: number;
        /** Specifies the left bottom horizontal coordinate. */
        leftBottomX: number;
        /** Specifies the left bottom vertical coordinate. */
        leftBottomY: number;
        /** Specifies the right bottom horizontal coordinate. */
        rightBottomX: number;
        /** Specifies the right bottom vertical coordinate. */
        rightBottomY: number;
        /** Specifies the width of the element. */
        width: number;
        /** Specifies the height of the element. */
        height: number;
    }): string;
    /** Retrieves style rules for desktop class applications. */
    export const desktopStyles: () => IStyleRules;
    /**
     * Apply style rules for desktop class applications.
     * @param pStylesheet Reference to the stylesheet.
     */
    export function desktopStylesheet(pStylesheet?: Stylesheet): void;
    export namespace SVG {
        /**
         * Creates a SVG drawing from a string.
         * @param nWidth Width of the image.
         * @param nHeight Height of the image.
         * @param sSVG Contains the drawing string.
         * @return Returns the SVG string.
         */
        function create(nWidth: number, nHeight: number, sSVG: string): string;
        /**
         * Creates a bas64 encoded SVG drawing from a string.
         * @param nWidth Width of the image.
         * @param nHeight Height of the image.
         * @param sSVG Contains the drawing string.
         * @return Returns the base64 encoded SVG string.
         */
        function createBase64(nWidth: number, nHeight: number, sSVG: string): string;
        /**
         * Renders a SVG drawing from a string to an image asset.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param pAsset Reference to the asset which receives the SVG drawing.
         * @param nWidth Width of the image.
         * @param nHeight Height of the image.
         * @param sSVG Contains the drawing string.
         * @param bResize Specifies if the asset needs to be resized (enabled by default).
         */
        function apply(pAsset: Asset, nWidth: number, nHeight: number, sSVG: string, bResize?: boolean): void;
        /**
         * Renders a SVG drawing from a string to the background of an asset.
         *
         * <span style="color: #7da01f;"><b>Forced layout safe!</b> <i>This function will not cause a forced layout</i></span>
         * @param pAsset Reference to the asset which receives the SVG drawing as a background.
         * @param nWidth Width of the image.
         * @param nHeight Height of the image.
         * @param sSVG Contains the drawing string.
         * @param bBackgroundResize Specifies if the background of the asset needs to be resized (enabled by default). The `background-size`
         * property is set and the `background-repeat` property is set to `no-repeat`.
         * @param bElementResize Specifies if the asset needs to be resized (enabled by default).
         */
        function background(
            pAsset: Asset,
            nWidth: number,
            nHeight: number,
            sSVG: string,
            bBackgroundResize?: boolean,
            bElementResize?: boolean
        ): void;
    }
}

declare module "tripetto/module/functional" {
    export type TAny = any;
    export type TArguments = TAny[];
    /** Describes an object. */
    export interface IObject {
        [name: string]: TAny;
    }
    /** Describes a collection. */
    export interface ICollection<T> {
        /** Contains the number of items in the collection. */
        length: number;
        /** Retrieves the item at the specified index. */
        item(nIndex: number): T;
    }
    /** Describes an enumerable object. */
    export interface IEnumerable<T> {
        [name: string]: T;
    }
    /** Type definition for lists (arrays, collections or enumerable objects). */
    export type TList<T> = T[] | ICollection<T> | IEnumerable<T>;
    /** Does nothing. */
    export function noop(): void;
    /**
     * Validates if the supplied variable is undefined.
     *
     * #### Example
     * ```typescript
     * isUndefined(1); // Returns `false`
     * isUndefined(); // Returns `true`
     * ```
     *
     * @param pVariable Variable to validate.
     * @return Returns `true` if the variable is undefined.
     */
    export function isUndefined(pVariable: TAny): pVariable is undefined;
    /**
     * Validates if the supplied variable is defined.
     *
     * #### Example
     * ```typescript
     * isDefined(1); // Returns `true`
     * isDefined(); // Returns `false`
     * ```
     *
     * @param pVariable Variable to validate.
     * @return Returns `true` if the variable is defined.
     */
    export function isDefined(pVariable: TAny): boolean;
    /**
     * Validates if the supplied variable is `null`. Please consider the use of
     * `null`. TypeScript has two bottom types: `null` and `undefined`. They are
     * intented to mean different things:
     * - Something hasn't been initialized: `undefined`
     * - Something is current unavailable: `null`
     * Most other languages only have one (commonly called `null`). Since by default
     * JavaScript will evaluate an uninitialized variable/parameter/property to
     * `undefined` (you don't get a choice) we recommend you just use that for your
     * own unavailable status and don't bother with `null`.
     *
     * #### Example
     * ```typescript
     * isNull(null); // Returns `true`
     * isNull(undefined); // Returns `true`
     * isNull({}); // Returns `false`
     * ```
     *
     * @param pVariable Variable to validate.
     * @return Returns `true` if the variable is `null`.
     */
    export function isNull(pVariable: TAny): pVariable is null;
    /**
     * Validates if the supplied variable is an object and is available (not `null`
     * or `undefined`).
     *
     * #### Example
     * ```typescript
     * isObject({}); // Returns `true`
     * isObject([]); // Returns `false`
     * isObject(null); // Returns `false`
     * isObject(undefined); // Returns `false`
     * ```
     *
     * @param pObject Variable to validate.
     * @return Returns `true` if the variable is an object.
     */
    export function isObject(pObject: TAny): pObject is {
        [property: string]: TAny;
    };
    /**
     * Validates if the supplied variable is a function.
     *
     * #### Example
     * ```typescript
     * isFunction(() => {}); // Returns `true`
     * ```
     *
     * @param pFunction Variable to validate.
     * @return Returns `true` if the variable is a function.
     */
    export function isFunction(pFunction: TAny): pFunction is (...pArguments: TAny[]) => void | TAny;
    /**
     * Validates if the supplied variable is a string.
     *
     * #### Example
     * ```typescript
     * isString("1"); // Returns `true`
     * isString(1); // Returns `false`
     * ```
     *
     * @param pString Variable to validate.
     * @return Returns `true` if the variable is a string.
     */
    export function isString(pString: TAny): pString is string;
    /**
     * Returns the length of the supplied string.
     *
     * #### Example
     * ```typescript
     * stringLength("ABC"); // Returns `3`
     * stringLength(1); // Returns `0`
     * ```
     *
     * @param pString Specifies the string.
     * @return Returns the length of the string or `0` if the supplied variable is not a valid string or an empty string.
     */
    export function stringLength(pString: TAny): number;
    /**
     * Validates if the supplied variable is a string which is not empty.
     *
     * #### Example
     * ```typescript
     * isFilledString("ABC"); // Returns `true`
     * isFilledString(""); // Returns `false`
     * isFilledString(1); // Returns `false`
     * ```
     *
     * @param pString Variable to validate.
     * @return Returns `true` if the variable is a string with content.
     */
    export function isFilledString(pString: TAny): pString is string;
    /**
     * Validates if the supplied variable is a number (finite or infinite). To make sure the supplied number is a valid finite number, use
     * `isNumberFinite`.
     *
     * #### Example
     * ```typescript
     * isNumber(1); // Returns `true`
     * isNumber(Infinity); // Returns `true`
     * isNumber(NaN); // Returns `false`
     * isNumber("1"); // Returns `false`
     * ```
     *
     * @param pNumber Variable to validate.
     * @return Returns `true` if the variable is a number.
     */
    export function isNumber(pNumber: TAny): pNumber is number;
    /**
     * Validates if the supplied variable is a finite number and optionally checks if the number is within the specified range.
     *
     * #### Example
     * ```typescript
     * isNumberFinite(1); // Returns `true`
     * isNumberFinite(Infinity); // Returns `false`
     * isNumberFinite(NaN); // Returns `false`
     * isNumberFinite("1"); // Returns `false`
     * ```
     *
     * @param pNumber Variable to validate.
     * @param nRangeLower Optional parameter which specifies the lower range.
     * @param nRangeUpper Optional parameter which specifies the upper range.
     * @return Returns `true` if the variable is a number.
     */
    export function isNumberFinite(pNumber: TAny, nRangeLower?: number, nRangeUpper?: number): pNumber is number;
    /**
     * Validates if the supplied variable is a floating point number and optionally checks if the number is within the specified range.
     *
     * #### Example
     * ```typescript
     * isFloat(1.01); // Returns `true`
     * isFloat(1); // Returns `false`
     * isFloat(Infinity); // Returns `false`
     * isFloat(NaN); // Returns `false`
     * isFloat("1"); // Returns `false`
     * ```
     *
     * @param pFloat Variable to validate.
     * @param fRangeLower Optional parameter which specifies the lower range.
     * @param fRangeUpper Optional parameter which specifies the upper range.
     * @return Returns `true` if the variable is a floating point number.
     */
    export function isFloat(pFloat: TAny, fRangeLower?: number, fRangeUpper?: number): pFloat is number;
    /**
     * Validates if the supplied variable is a boolean.
     *
     * #### Example
     * ```typescript
     * isBoolean(false); // Returns `true`
     * isBoolean(1); // Returns `false`
     * ```
     *
     * @param pBool Variable to validate.
     * @return Returns `true` if the variable is a boolean.
     */
    export function isBoolean(pBool: TAny): pBool is boolean;
    /**
     * Validates if the supplied variable is an array.
     *
     * #### Example
     * ```typescript
     * isArray([]); // Returns `true`
     * isArray([1]); // Returns `true`
     * isArray(new Array()); // Returns `true`
     * isArray({}); // Returns `false`
     * ```
     *
     * @param pArray Variable to validate.
     * @return Returns `true` if the variable is an array.
     */
    export function isArray<T>(pArray: TAny): pArray is T[];
    /**
     * Validates if the supplied variable is a collection. A collection is a list
     * which is enumerable using a `length` property and an `item` function.
     * @param pCollection Variable to validate.
     * @return Returns `true` if the variable is a collection.
     */
    export function isCollection(pCollection: TAny): boolean;
    /**
     * Validates if the supplied variable is an array or a collection.
     * @param pArray Variable to validate.
     * @return Returns `true` if the variable is an array or collection.
     */
    export function isArrayOrCollection(pArray: TAny): boolean;
    /**
     * Returns the array size for the supplied array or the number of items in the object.
     *
     * #### Example
     * ```typescript
     * arraySize([]); // Returns `0`
     * arraySize([1, 2, 3]); // Returns `3`
     * ```
     *
     * @param pArray Specifies the array.
     * @return Returns the size of the array/object as a number.
     */
    export function arraySize(pArray: TAny): number;
    /**
     * Returns the item at the specified index in the array, collection or
     * enumerable object.
     *
     * #### Example
     * ```typescript
     * arrayItem<number>([1, 2, 3], 2); // Returns `3`
     * arrayItem<number>([1, 2, 3], 3); // Returns `undefined`
     * arrayItem<number>([1, 2, 3], 3, 0); // Returns `0`
     * ```
     *
     * @param T Specifies the item type.
     * @param pArray Specifies the array, collection or enumerable object.
     * @param nIndex Specifies the zero based item index.
     * @param pDefault Optional parameter which specifies the default value if the
     * supplied index is invalid.
     * @return Returns the item at the specified index.
     */
    export function arrayItem<T>(pArray: TList<T> | undefined, nIndex: number, pDefault?: T): T | undefined;
    /**
     * Returns the first item in the array, collection or enumerable object.
     *
     * #### Example
     * ```typescript
     * firstArrayItem<number>([1, 2, 3]); // Returns `1`
     * ```
     *
     * @param T Specifies the item type.
     * @param pArray Specifies the array, collection or enumerable object.
     * @param pDefault Optional parameter which specifies the default value if there
     * is no first item.
     * @return Returns the last item.
     */
    export function firstArrayItem<T>(pArray: TList<T> | undefined, pDefault?: T): T | undefined;
    /**
     * Returns the last item in the array, collection or enumerable object.
     *
     * #### Example
     * ```typescript
     * lastArrayItem<number>([1, 2, 3]); // Returns `3`
     * ```
     *
     * @param T Specifies the item type.
     * @param pArray Specifies the array, collection or enumerable object.
     * @param pDefault Optional parameter which specifies the default value if there
     * is no last item.
     * @return Returns the last item.
     */
    export function lastArrayItem<T>(pArray: TList<T> | undefined, pDefault?: T): T | undefined;
    /**
     * Validates if the supplied variable is a date.
     *
     * #### Example
     * ```typescript
     * isDate(new Date()); // Returns `true`
     * ```
     *
     * @param pDate Variable to validate.
     * @return Returns `true` if the variable is a date.
     */
    export function isDate(pDate: TAny): pDate is Date;
    /**
     * Validates if the supplied variable is a regular expression.
     *
     * #### Example
     * ```typescript
     * isRegEx(/[a-z]+/); // Returns `true`
     * ```
     *
     * @param pRegEx Variable to validate.
     * @return Returns `true` if the variable is a regular expression.
     */
    export function isRegEx(pRegEx: TAny): boolean;
    /**
     * Validates if the supplied variable is an error object.
     *
     * #### Example
     * ```typescript
     * isError(new Error("Test message")); // Returns `true`
     * ```
     *
     * @param pError Variable to validate.
     * @return Returns `true` if the variable is an error object.
     */
    export function isError(pError: TAny): boolean;
    /**
     * Verifies if the supplied value is defined. If not, an error is thrown.
     * @param pAssert Specifies the value to assert.
     * @param sError Specifies the optional error message that is thrown.
     * @return Returns the value.
     */
    export function assert<T>(pAssert: T | undefined, sError?: string): T;
    /**
     * Cast variable to the desired type without type checking.
     * @param pSource Specifies the source.
     * @return Returns the desired type.
     */
    export function cast<To>(pSource: TAny): To;
    /**
     * Cast a variable to a string.
     *
     * #### Example
     * ```typescript
     * castToString(1); // Returns `1`
     * castToString(1.2); // Returns `1.2`
     * castToString(undefined); // Returns ``
     * ```
     *
     * @param pValue Source variable.
     * @param sDefault Optional parameter which specifies the default string if the supplied source variable cannot be casted.
     * @return Returns the string value.
     */
    export function castToString(pValue: TAny, sDefault?: string): string;
    /**
     * Cast a variable to a rounded number.
     *
     * #### Example
     * ```typescript
     * castToNumber("1"); // Returns `1`
     * castToNumber("1.5"); // Returns `2`
     * castToNumber(undefined); // Returns `0`
     * ```
     *
     * @param pValue Source variable.
     * @param nDefault Optional parameter which specifies the default number if the supplied source variable cannot be casted.
     * @return Returns the number value.
     */
    export function castToNumber(pValue: TAny, nDefault?: number): number;
    /**
     * Cast a variable to a floating point number.
     *
     * #### Example
     * ```typescript
     * castToFloat("1"); // Returns `1`
     * castToFloat("1.5"); // Returns `1.5`
     * castToFloat(undefined); // Returns `0`
     * ```
     *
     * @param pValue Source variable.
     * @param fDefault Optional parameter which specifies the default floating point number if the supplied source variable cannot be casted.
     * @return Returns the floating point number value.
     */
    export function castToFloat(pValue: TAny, fDefault?: number): number;
    /**
     * Cast a variable to a boolean value.
     *
     * #### Example
     * ```typescript
     * castToBoolean(1); // Returns `true`
     * castToBoolean("true"); // Returns `true`
     * castToBoolean("false"); // Returns `false`
     * ```
     *
     * @param pValue Source variable.
     * @param bDefault Optional parameter which specifies the default boolean value if the supplied source variable cannot be casted.
     * @return Returns the boolean value.
     */
    export function castToBoolean(pValue: TAny, bDefault?: boolean): boolean;
    /**
     * Clones an object.
     *
     * #### Example
     * ```typescript
     * clone({ a: 1, b: 2 }); // Returns `{ a: 1, b: 2 }`
     * ```
     *
     * @param pObject Specifies the object to clone.
     * @return Returns a clone of the object which is no reference to the original object.
     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create
     */
    export function clone<T extends IObject>(pObject: T): T;
    /**
     * Extend an object by appending all of the properties from each supplied
     * object. When there are identical properties, the right-most property takes
     * precedence. This function returns a mutable object reference which is the
     * supplied `pObject` (the first function argument).
     *
     * #### Example
     * ```typescript
     * extend({ a: 1, b: 2 }, { b: 3, d: 4 }, { d: 5 }); // Returns `{ a: 1, b: 3, d: 5 }`
     * ```
     *
     * @param pObject Specifies the object to extend.
     * @param pObjects Specifies the objects to extend with.
     * @return Returns the extended mutable object which is a reference to `pObject`.
     */
    export function extend<T extends IObject>(pObject: Partial<T>, ...pObjects: (Partial<T> | undefined)[]): T;
    /**
     * Extend an object by appending all of the properties from each supplied
     * object. When there are identical properties, the right-most property takes
     * precedence. This function returns a immutable object reference which is
     * basically a new combined copy of the supplied objects.
     *
     * #### Example
     * ```typescript
     * extendImmutable({ a: 1, b: 2, c }, { b: 3, d: 4 }, { d: 5 }); // Returns `{ a: 1, b: 3, d: 5 }`
     * ```
     *
     * @param pObjects Specifies the objects to extend the immutable object with.
     * @return Returns the extended immutable object.
     */
    export function extendImmutable<T extends IObject>(...pObjects: (Partial<T> | undefined)[]): T;
    /**
     * Does a type or value comparison of two variables or a structure.
     *
     * #### Example
     * ```typescript
     * compare({ a: 1, b: 2 }, { a: 1, b: 3 }, false); // Returns `true`
     * compare({ a: 1, b: 2 }, { a: 1, c: 3 }, false); // Returns `false`
     * compare({ a: 1, b: 2 }, { a: 1, b: 3 }, true); // Returns `false`
     * compare({ a: 1, b: 2 }, { a: 1, b: 2 }, true); // Returns `true`
     * ```
     *
     * @param pA Specifies the first variable.
     * @param pB Specifies the second variable.
     * @param bCompareValues Specifies if the values or just the structure needs to be compared.
     * @return Returns `true` if the objects are identical.
     */
    export function compare(pA: TAny, pB: TAny, bCompareValues: boolean): boolean;
    /**
     * Iterates through an array, collection or enumerable object and invokes the
     * supplied function for each element.
     *
     * #### Example
     * ```typescript
     * let nResult = 0;
     * each([1, 2, 3], (nItem: number) => nResult += nItem);
     * // The value of `nResult` is `6`
     * ```
     *
     * @param T Specifies the item type.
     * @param pList Specifies the array, collection or enumerable object to iterate
     * through.
     * @param fnCallee Specifies the function to be invoked for each element. The
     * element value will be exposed to the function as the first argument of the
     * argument list. Additional arguments can be specified and will be pushed to
     * the function.
     * @param fnCallee.pItem Contains the item.
     * @param fnCallee.pArguments Optional additional arguments. These are the
     * additional arguments which are passed to the main function.
     * @param pOptions Specifies the options.
     * @return Returns a reference to the list.
     */
    export function each<T>(
        pList: TList<T> | undefined,
        fnCallee: (pItem: T, ...pArguments: TArguments) => T | void,
        pOptions?: {
            /**
             * Specifies if each value in the array should be overwritten
             * with the return value of its executed function.
             */
            replace?: boolean;
            /**
             * Specifies if the item key should be passed as first argument in the
             * argument list of the function.
             */
            keys?: boolean;
            /**
             * Optional additional arguments which will be passed to the callee.
             */
            arguments?: TArguments;
        }
    ): TList<T> | undefined;
    /**
     * Iterates through an array, collection or enumerable object in reverse and
     * invokes the supplied function for each element.
     *
     * #### Example
     * ```typescript
     * let sResult = "";
     * eachReverse([1, 2, 3], (nItem: number) => nResult += CastToString(nItem));
     * // The value of `sResult` is `321`
     * ```
     *
     * @param T Specifies the item type.
     * @param pList Specifies the array, collection or enumerable object to iterate
     * through.
     * @param fnCallee Specifies the function to be invoked for each element. The
     * element value will be exposed to the function as the first argument of the
     * argument list. Additional arguments can be specified and will be pushed to
     * the function.
     * @param fnCallee.pItem Contains the item.
     * @param fnCallee.pArguments Optional additional arguments. These are the
     * additional arguments which are passed to the main function.
     * @param pOptions Specifies the options.
     * @return Returns a reference to the list.
     */
    export function eachReverse<T>(
        pList: TList<T> | undefined,
        fnCallee: (pItem: T, ...pArguments: TArguments) => T | void,
        pOptions?: {
            /**
             * Specifies if each value in the array should be overwritten
             * with the return value of its executed function.
             */
            replace?: boolean;
            /**
             * Specifies if the item key should be passed as first argument in the
             * argument list of the function.
             */
            keys?: boolean;
            /**
             * Optional additional arguments which will be passed to the callee.
             */
            arguments?: TArguments;
        }
    ): TList<T> | undefined;
    /**
     * Produces a new array of values by mapping each value in the supplied array,
     * collection or enumerable object through a transformation function.
     *
     * #### Example
     * ```typescript
     * map<number, number>([1, 2, 3], (nItem: number) => nItem * nItem); // Returns `[1, 4, 9]`
     * map<number, number>([1, 2, 3], (nItem: number, nMultiplier: number) => nItem * nMultiplier, 2); // Returns `[2, 4, 6]`
     * ```
     *
     * @param T Specifies the item type.
     * @param R Specifies the return type.
     * @param pList Specifies the array, collection or enumerable object to iterate
     * through.
     * @param fnTransformation Specifies the function to be invoked for each
     * element. The element value will be exposed to the function as the first
     * argument of the argument list. Additional arguments can be specified and will
     * be pushed to the function.
     * @param fnTransformation.pItem Contains the item.
     * @param fnTransformation.pArguments Optional additional arguments. These are
     * the additional arguments which are passed to the main function.
     * @param pArguments Optional additional arguments which will be passed to the
     * callee.
     * @return Returns an array with mapped values.
     */
    export function map<T, R>(
        pList: TList<T> | undefined,
        fnTransformation: (pItem: T, ...pArguments: TArguments) => R,
        ...pArguments: TArguments
    ): R[];
    /**
     * Reduce boils down an array, collection or enumerable object into a
     * single value of type `R`.
     *
     * #### Example
     * ```typescript
     * reduce<number, number>([1, 2, 3], (nValue: number, nItem: number) => nValue + nItem, 2); // Returns `8`
     * ```
     *
     * @param T Specifies the item type.
     * @param R Specifies the reduce type.
     * @param pList Specifies the array, collection or enumerable object to iterate
     * through.
     * @param fnReduce Specifies the reduce function to be invoked for each
     * element. The return value of each reduce function will be the current
     * reduced value.
     * @param fnReduce.pValue Contains the current reduce value. If `pInitial` is
     * specified, this value is `pInitial` upon the first call otherwise this value
     * is `undefined`.
     * @param fnReduce.pItem Contains the item.
     * @param fnReduce.pArguments Optional additional arguments. These are the
     * additional arguments which are passed to the main function.
     * @param pInitial Optional initial value for the reduce value.
     * @param pArguments Optional additional arguments which will be passed to the
     * callee.
     * @return Returns the reduced value.
     */
    export function reduce<T, R>(
        pList: TList<T> | undefined,
        fnReduce: (pValue: R, pItem: T, ...pArguments: TArguments) => R,
        pInitial?: R,
        ...pArguments: TArguments
    ): R | undefined;
    /**
     * Verifies an array, collection or enumerable object by iterating through the
     * items and verify them against the supplied truth function.
     *
     * #### Example
     * ```typescript
     * has<number>([1, 2, 3], (nItem: number) => nItem > 0); // Returns `true`
     * has<number>([1, 2, 3], (nItem: number) => nItem > 1); // Returns `false`
     * has<number>([1, 2, 3], (nItem: number) => nItem > 1, true); // Returns `true`
     * ```
     *
     * @param T Specifies the item type.
     * @param pList Specifies the array, collection or enumerable object to
     * iterate through.
     * @param fnTruth Specifies the truth function. Each item is supplied to the
     * function, passing the item as argument. The function should return a boolean
     * value with the individual verification result.
     * @param fnTruth.pItem Contains the item.
     * @param bOneOrMore Optional parameter which specifies if one or more items
     * should pass the verification. By default (`false`) all items should
     * pass (equals `HasOnly`).
     * @return Returns `true` in case of a verification pass.
     */
    export function has<T>(pList: TList<T> | undefined, fnTruth: (pItem: T) => boolean, bOneOrMore?: boolean): boolean;
    /**
     * Verifies all items of an array, collection or enumerable object against the
     * truth function.
     *
     * #### Example
     * ```typescript
     * hasOnly<number>([1, 2, 3], (nItem: number) => nItem > 0); // Returns `true`
     * hasOnly<number>([1, 2, 3], (nItem: number) => nItem > 1); // Returns `false`
     * ```
     *
     * @param T Specifies the item type.
     * @param pList Specifies the array, collection or enumerable object to iterate
     * through.
     * @param fnTruth Specifies the truth function. Each item is supplied to the
     * function, passing the item as argument. The function should return a boolean
     * value with the individual verification result.
     * @param fnTruth.pItem Contains the item.
     * @return Returns `true` when all items pass the verification test.
     */
    export function hasOnly<T>(pList: TList<T> | undefined, fnTruth: (pItem: T) => boolean): boolean;
    /**
     * Verifies some items of an array, collection or enumerable object against the
     * truth function.
     *
     * #### Example
     * ```typescript
     * hasOneOrMore<number>([1, 2, 3], (nItem: number) => nItem > 2); // Returns `true`
     * hasOneOrMore<number>([1, 2, 3], (nItem: number) => nItem > 3); // Returns `false`
     * ```
     *
     * @param T Specifies the item type.
     * @param pList Specifies the array, collection or enumerable object to iterate
     * through.
     * @param fnTruth Specifies the truth function. Each item is supplied to the
     * function, passing the item as argument. The function should return a boolean
     * value with the individual verification result.
     * @param fnTruth.pItem Contains the item.
     * @return Returns `true` when one or more items pass the verification test.
     */
    export function hasOneOrMore<T>(pList: TList<T> | undefined, fnTruth: (pItem: T) => boolean): boolean;
    /**
     * Counts the number of items in the supplied array, collection or
     * enumerable object.
     *
     * #### Example
     * ```typescript
     * count<number>([1, 2, 3], (nItem: number) => nItem > 1); // Returns `2`
     * ```
     *
     * @param T Specifies the item type.
     * @param pList Specifies the array, collection or enumerable object to iterate
     * through.
     * @param fnTruth Specifies the optional truth function. Only items that pass
     * the truth test are included in the count. The function should return a
     * boolean value whether the item should be counted. If omitted all items are
     * counted.
     * @param fnTruth.pItem Contains the item.
     * @return Returns the number of items that pass.
     */
    export function count<T>(pList: TList<T> | undefined, fnTruth?: (pItem: T) => boolean): number;
    /**
     * Selects items from an array, collection or enumerable object using a truth
     * test and optionally invokes a function for each item.
     *
     * #### Example
     * ```typescript
     * forEach<number>([1, 2, 3], (nItem: number) => nItem > 1); // Returns `[2, 3]`
     * forEach<number>([1, 2, 3], (nItem: number) => nItem > 1, {
     *   do: (nItem: number) => nItem + 1,
     *   replace: true
     * }); // Returns `[3, 4]`
     * ```
     *
     * @param T Specifies the item type.
     * @param pList Specifies the array, collection or enumerable object to iterate
     * through.
     * @param fnTruth Specifies the selector function. Each item is
     * supplied to the function, passing the item as argument. The function should
     * return a boolean value whether to include the item in the selection.
     * @param fnTruth.pItem Contains the item.
     * @param pOptions Contains the options.
     * @return Returns an array with the selected items or just the selected item if
     * the single mode is enabled.
     */
    export function forEach<T>(
        pList: TList<T> | undefined,
        fnTruth: (pItem: T) => boolean,
        pOptions?: {
            /**
             * Specifies an optional function to be invoked for each element that
             * passed the truth test. The element value will be exposed to the function
             * as the first argument of the argument list. Additional arguments can be
             * specified and will be pushed to the function.
             * @param pItem Contains the item.
             * @param pArguments Optional additional arguments. These are the
             * additional arguments which are passed to the main function.
             */
            do?: (pItem: T, ...pArguments: TArguments) => T | void;
            /**
             * Specifies if each value in the array should be overwritten  with the
             * return value of its executed function.
             */
            replace?: boolean;
            /**
             * Specifies if the function should return items. The default setting
             * is `matches` which returns all items which passed the truth test.
             */
            return?: "none" | "matches" | "first" | "last";
            /** Optional arguments which will be passed to the optional call function. */
            arguments?: TArguments;
        }
    ): T[] | T | undefined;
    /**
     * Selects all items from an array, collection or enumerable object that match
     * the truth function.
     *
     * #### Example
     * ```typescript
     * filter<number>([1, 2, 3], (nItem: number) => nItem > 1); // Returns `[2, 3]`
     * ```
     *
     * @param T Specifies the item type.
     * @param pList Specifies the array, collection or enumerable object to iterate
     * through.
     * @param fnTruth Specifies the truth function. Each item is supplied
     * to the function, passing the item as argument. The function should return a
     * boolean value whether to include the item in the selection.
     * @param fnTruth.pItem Contains the item.
     * @return Returns an array with the selected items.
     */
    export function filter<T>(pList: TList<T> | undefined, fnTruth: (pItem: T) => boolean): T[];
    /**
     * Selects the first item from an array, collection or enumerable object that
     * matches the truth function.
     *
     * #### Example
     * ```typescript
     * findFirst<number>([1, 2, 3], (nItem: number) => nItem > 1); // Returns `2`
     * ```
     *
     * @param T Specifies the item type.
     * @param pList Specifies the array, collection or enumerable object to iterate
     * through.
     * @param fnTruth Specifies the truth function. Each item is supplied
     * to the function, passing the item as argument. The function should return a
     * boolean value whether to include the item in the selection.
     * @param fnTruth.pItem Contains the item.
     * @return Returns the item or `undefined` if no item is found.
     */
    export function findFirst<T>(pList: TList<T> | undefined, fnTruth: (pItem: T) => boolean): T | undefined;
    /**
     * Selects the last item from an array, collection or enumerable object that
     * matches the truth function.
     *
     * #### Example
     * ```typescript
     * findLast<number>([1, 2, 3], (nItem: number) => nItem > 1); // Returns `3`
     * ```
     *
     * @param T Specifies the item type.
     * @param pList Specifies the array, collection or enumerable object to iterate
     * through.
     * @param fnTruth Specifies the truth function. Each item is supplied
     * to the function, passing the item as argument. The function should return a
     * boolean value whether to include the item in the selection.
     * @param fnTruth.pItem Contains the item.
     * @return Returns the item or `undefined` if no item is found.
     */
    export function findLast<T>(pList: TList<T> | undefined, fnTruth: (pItem: T) => boolean): T | undefined;
    /**
     * Finds the first item from an array, collection or enumerable object that
     * matches the truth function and returns its key.
     *
     * #### Example
     * ```typescript
     * find<number>([1, 2, 3], (nItem: number) => nItem > 1); // Returns `1`
     * find<Object>({a: 1, b: 2, c: 3}, (nItem: number) => nItem > 1); // Returns `b`
     * ```
     *
     * @param T Specifies the item type.
     * @param pList Specifies the array, collection or enumerable object to iterate
     * through.
     * @param fnTruth Specifies the truth function. Each item is supplied
     * to the function, passing the item as argument. The function should return a
     * boolean value whether to include the item in the selection.
     * @param fnTruth.pItem Contains the item.
     * @return Returns the item key or `undefined` if no item is found.
     */
    export function find<T>(pList: TList<T> | undefined, fnTruth: (pItem: T) => boolean): string | number | undefined;
    /**
     * Calls the supplied function.
     * @param T Specifies the return type of the call.
     * @param fnCallee Specifies the function to execute.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     * @return Returns `undefined` if the call fails or the return value of the function which is executed if the call succeeds.
     */
    export function call<T>(fnCallee: ((...pArguments: TArguments) => T | void) | undefined, ...pArguments: TArguments): T | undefined;
    /**
     * Calls the supplied function asynchronous. Tries the following schedulers in
     * this order: `FUNCTION_TICK`, `FUNCTION_TIMEOUT`. The call cannot be canceled.
     * @param fnCallee Specifies the function to execute.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     */
    export function callAsync(fnCallee: ((...pArguments: TArguments) => void) | undefined, ...pArguments: TArguments): void;
    /**
     * Calls the supplied function using promise. Tries the following schedulers in
     * this order: `FUNCTION_PROMISE`, `FUNCTION_TICK`, `FUNCTION_TIMEOUT`. The call cannot be canceled.
     * @param fnCallee Specifies the function to execute.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     */
    export function callPromise(fnCallee: ((...pArguments: TArguments) => void) | undefined, ...pArguments: TArguments): void;
    /**
     * Calls the supplied function synchronous or asynchronous.
     * @param fnCallee Specifies the function to execute.
     * @param bSynchronous Specifies if the functio should be executed synchronously.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     * @return Returns the call handle for asynchronous calls or `0` for synchronous calls.
     */
    export function callEx(
        fnCallee: ((...pArguments: TArguments) => void) | undefined,
        bSynchronous: boolean,
        ...pArguments: TArguments
    ): void;
    /**
     * Calls the supplied function and binds the specified context.
     * @param T Specifies the return type of the call.
     * @param fnCallee Specifies the function to execute.
     * @param pContext Context to bind to.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     * @return Returns `undefined` if the call fails or the return value of the function which is executed if the call succeeds.
     */
    export function callBind<T>(
        fnCallee: ((...pArguments: TArguments) => T | void) | undefined,
        pContext: {},
        ...pArguments: TArguments
    ): T | undefined;
    /**
     * Calls the supplied function.
     * @param fnCallee Specifies the function to execute.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     * @return Returns `undefined` if the call fails or the return value of the function which is executed if the call succeeds.
     */
    export function callFunction(fnCallee: TAny, ...pArguments: TArguments): TAny;
    /**
     * Calls the supplied function asynchronous on the next tick.
     * @param fnCallee Specifies the function to execute.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     * @return Returns the call handle.
     */
    export function scheduleTick(fnCallee: ((...pArguments: TArguments) => void) | undefined, ...pArguments: TArguments): number;
    /**
     * Calls the supplied function asynchronous on the next tick and cancels a pending call.
     * @param fnCallee Specifies the function to execute.
     * @param nHandle Specifies the handle of the call to cancel.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     * @return Returns the call handle.
     */
    export function scheduleAndCancelTick(
        fnCallee: ((...pArguments: TArguments) => void) | undefined,
        nHandle: number,
        ...pArguments: TArguments
    ): number;
    /**
     * Cancels a pending asynchronous tick call.
     * @param nHandle Contains the handle of the call.
     * @return Always returns 0.
     */
    export function cancelTick(nHandle: number): number;
    /**
     * Calls the supplied function as a promise.
     * @param fnCallee Specifies the function to execute.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     * @return Returns the call handle.
     */
    export function schedulePromise(fnCallee: ((...pArguments: TArguments) => void) | undefined, ...pArguments: TArguments): number;
    /**
     * Calls the supplied function as a promise and cancels a pending promise.
     * @param fnCallee Specifies the function to execute.
     * @param nHandle Specifies the handle of the call to cancel.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     * @return Returns the call handle.
     */
    export function scheduleAndCancelPromise(
        fnCallee: ((...pArguments: TArguments) => void) | undefined,
        nHandle: number,
        ...pArguments: TArguments
    ): number;
    /**
     * Cancels a pending promise.
     * @param nHandle Contains the handle of the call.
     * @return Always returns 0.
     */
    export function cancelPromise(nHandle: number): number;
    /**
     * Calls the supplied function asynchronous on the next frame.
     * @param fnCallee Specifies the function to execute.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     * @return Returns the call handle.
     */
    export function scheduleFrame(fnCallee: ((...pArguments: TArguments) => void) | undefined, ...pArguments: TArguments): number;
    /**
     * Calls the supplied function asynchronous on the next frame.
     * @param fnCallee Specifies the function to execute.
     * @param nHandle Specifies the handle of the call to cancel.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     * @return Returns the call handle.
     */
    export function scheduleAndCancelFrame(
        fnCallee: ((...pArguments: TArguments) => void) | undefined,
        nHandle: number,
        ...pArguments: TArguments
    ): number;
    /**
     * Cancels a pending asynchronous frame call.
     * @param nHandle Contains the handle of the call.
     * @return Always returns 0.
     */
    export function cancelFrame(nHandle: number): number;
    /**
     * Schedules the supplied function and invokes it on the specified timeout (using `setTimeout`).
     * @param fnCallee Specifies the function to execute.
     * @param nTimeout Specifies the timeout in milliseconds.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     * @return Returns the call handle.
     */
    export function scheduleTimeout(fnCallee: (...pArguments: TArguments) => void, nTimeout: number, ...pArguments: TArguments): number;
    /**
     * Cancels a pending asynchronous call.
     * @param nHandle Contains the handle of the asynchronous timeout call.
     * @return Always returns 0.
     */
    export function cancelTimeout(nHandle: number): number;
    /**
     * Schedules the supplied function and invokes it on the specified timeout
     * (using `requestAnimationFrame`) which is optimal for UI related timers.
     * @param fnCallee Specifies the function to execute.
     * @param nTimeout Specifies the timeout in milliseconds.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     * @return Returns the call handle.
     * @see https://bugs.chromium.org/p/chromium/issues/detail?id=574343
     */
    export function scheduleUITimeout(fnCallee: (...pArguments: TArguments) => void, nTimeout: number, ...pArguments: TArguments): number;
    /**
     * Cancels a pending UI timeout call.
     * @param nHandle Contains the handle of the asynchronous timeout call.
     * @return Always returns 0.
     */
    export function cancelUITimeout(nHandle: number): number;
    /**
     * Schedules the supplied function and invokes it on the specified interval (using `setInterval`).
     * @param fnCallee Specifies the function to execute.
     * @param nInterval Specifies the interval in milliseconds.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     * @return Returns the call handle.
     */
    export function scheduleInterval(fnCallee: (...pArguments: TArguments) => void, nInterval: number, ...pArguments: TArguments): number;
    /**
     * Cancels an interval call.
     * @param nHandle Contains the handle of the asynchronous interval call.
     * @return Always returns 0.
     */
    export function cancelInterval(nHandle: number): number;
    /**
     * Schedules the supplied function and invokes it on the specified interval
     * (using `requestAnimationFrame`) which is optimal for UI related timers.
     * @param fnCallee Specifies the function to execute.
     * @param nInterval Specifies the interval in milliseconds.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     * @return Returns the call handle.
     * @see https://bugs.chromium.org/p/chromium/issues/detail?id=574343
     */
    export function scheduleUIInterval(fnCallee: (...pArguments: TArguments) => void, nInterval: number, ...pArguments: TArguments): number;
    /**
     * Cancels a pending UI interval call.
     * @param nHandle Contains the handle of the asynchronous interval call.
     * @return Always returns 0.
     */
    export function cancelUIInterval(nHandle: number): number;
    /**
     * Calls the supplied function at a specific number of frames.
     * @param fnAnimation Specifies the function to execute.
     * @param fnAnimation.pArguments Optional additional arguments. These are the additional arguments which are passed to the main function.
     * @param nFrames Specifies the number of frames.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     */
    export function scheduleNumberOfFrames(
        fnAnimation: ((...pArguments: TArguments) => void) | undefined,
        nFrames: number,
        ...pArguments: TArguments
    ): void;
    /**
     * Calls the supplied animation function using a double animation frame request. Use this function if you need to be sure all pending
     * DOM reads and writes are performed.
     * @param fnAnimation Specifies the function to execute.
     * @param fnAnimation.pArguments Optional additional arguments. These are the additional arguments which are passed to the main function.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     */
    export function scheduleAnimation(fnAnimation: ((...pArguments: TArguments) => void) | undefined, ...pArguments: TArguments): void;
    /**
     * Calls the supplied event function (after 2 animation frames).
     * @param fnEvent Specifies the function to execute.
     * @param fnEvent.pArguments Optional additional arguments. These are the additional arguments which are passed to the main function.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     */
    export function scheduleEvent(fnEvent: ((...pArguments: TArguments) => void) | undefined, ...pArguments: TArguments): void;
    /**
     * Calls the supplied function as part of an action in a waiting loop (after 5 animation frames).
     * @param fnAction Specifies the function to execute.
     * @param fnAction.pArguments Optional additional arguments. These are the additional arguments which are passed to the main function.
     * @param pArguments Optional additional arguments which will be passed to the callee.
     */
    export function scheduleAction(fnAction: ((...pArguments: TArguments) => void) | undefined, ...pArguments: TArguments): void;
    /**
     * Sets the value of the specified variable in the object using its index type.
     * @param pObject Reference to the object.
     * @param sName Name of the variable.
     * @param pValue Value for the variable.
     * @return Returns a reference to the value on the object.
     */
    export function set<T, K extends keyof T>(pObject: T, sName: K, pValue: T[K]): T[K];
    /**
     * Sets the value of the specified variable in the object array.
     * @param T Specifies the type of the variable which is set.
     * @param pObject Reference to the object.
     * @param sName Name of the variable.
     * @param pValue Value for the variable.
     * @return Returns a reference to the value on the object.
     */
    export function setAny<T>(pObject: TAny, sName: string, pValue: T): T;
    /**
     * Retrieves the value of the specified variable in the object using its index type.
     * @param pObject Reference to the object.
     * @param sName Name of the variable.
     * @return Returns the value of the variable.
     */
    export function get<T, K extends keyof T>(pObject: T, sName: K): T[K];
    /**
     * Retrieves the value of the specified variable in the object array.
     * @param T Specifies the type of the returned variable.
     * @param pObject Reference to the object.
     * @param sName Name of the variable.
     * @return Returns the value of the variable.
     */
    export function getAny<T>(pObject: IObject | undefined, sName: string): T | undefined;
    /**
     * Retrieves a boolean value of the specified variable in the object array.
     * @param pObject Reference to the object.
     * @param sName Name of the variable.
     * @param bDefault Specifies the default value.
     * @return Returns the value of the variable.
     */
    export function getBoolean(pObject: IObject | undefined, sName: string, bDefault?: boolean): boolean;
    /**
     * Retrieves a string value of the specified variable in the object array.
     * @param pObject Reference to the object.
     * @param sName Name of the variable.
     * @param sDefault Specifies the default value.
     * @return Returns the value of the variable.
     */
    export function getString(pObject: IObject | undefined, sName: string, sDefault?: string): string;
    /**
     * Retrieves a numeric value of the specified variable in the object array.
     * @param pObject Reference to the object.
     * @param sName Name of the variable.
     * @param nDefault Specifies the default value.
     * @return Returns the value of the variable.
     */
    export function getNumber(pObject: IObject | undefined, sName: string, nDefault?: number): number;
    /**
     * Retrieves a floating value of the specified variable in the object array.
     * @param pObject Reference to the object.
     * @param sName Name of the variable.
     * @param fDefault Specifies the default value.
     * @return Returns the value of the variable.
     */
    export function getFloat(pObject: IObject | undefined, sName: string, fDefault?: number): number;
    /**
     * Destroys the specified variable in the object array.
     * @param pObject Reference to the object.
     * @param sName Name of the variable.
     * @return Returns `true` if the variable is deleted.
     */
    export function destroy(pObject: IObject | undefined, sName: string): boolean;
    /**
     * Creates a new class instance with the supplied constructor and arguments
     * array.
     *
     * #### Example
     * ```typescript
     * class Example {
     *     constructor(public a: string, public b: number) {}
     * }
     *
     * let pExample = createInstanceOf(Example, "Hello", 1);
     * ```
     *
     * @param T Specifies the instance type.
     * @param pConstructor Specifies the constructor.
     * @param pArguments Optional array with arguments which will be passed to the constructor.
     * @return Returns the instance.
     */
    export function createInstanceOf<T>(
        pConstructor: {
            new (...pArguments: TArguments): T;
        },
        ...pArguments: TArguments
    ): T;
    export namespace Console {
        /**
         * Returns a log string with a time stamp.
         * @return Returns the time stamp log string.
         */
        function time(): string;
        /**
         * Returns a log string for a module name.
         * @param sName Specifies the name of the module.
         * @return Returns the log string.
         */
        function module(sName: string): string;
        /**
         * Returns a complete log string.
         * @param sName Specifies the name of the module.
         * @param sMessage Specifies the message to log.
         * @return Returns the log string.
         */
        function log(sName: string, sMessage: string): string;
    }
    export namespace Environment {
        /** Contains if the environment is a browser. */
        const isBrowser: boolean;
        /** Contains if the environment is Node. */
        const isNode: boolean;
        /** Contains if the environment is a web worker. */
        const isWebWorker: boolean;
    }
    export namespace Num {
        /**
         * Round a floating point number to the nearest integer.
         *
         * #### Example
         * ```typescript
         * round(1.49); // Returns `1`
         * round(1.5); // Returns `2`
         * ```
         *
         * @param fValue Input number.
         * @return Returns the rounded number.
         */
        function round(fValue: number): number;
        /**
         * Round a floating point number downward to its nearest integer.
         *
         * #### Example
         * ```typescript
         * floor(1.6); // Returns `1`
         * ```
         *
         * @param fValue Input number.
         * @return Returns the floored number.
         */
        function floor(fValue: number): number;
        /**
         * Round a floating point number upward to its nearest integer.
         *
         * #### Example
         * ```typescript
         * ceil(1.6); // Returns `2`
         * ```
         *
         * @param fValue Input number.
         * @return Returns the ceiled number.
         */
        function ceil(fValue: number): number;
        /**
         * Conforms the supplied number to the specified precision.
         *
         * #### Example
         * ```typescript
         * conform(1.1235, 3); // Returns `1.124`
         * conform(1.1235, 2); // Returns `1.12`
         * ```
         *
         * @param fValue Input value.
         * @param nPrecision Specifies the number of decimals.
         * @return Returns the conformed number.
         */
        function conform(fValue: number, nPrecision: number): number;
        /**
         * Checks if the supplied number is positive and returns this positive value or `0` if the value is negative.
         *
         * #### Example
         * ```typescript
         * positive(1); // Returns `1`
         * positive(-1); // Returns `0`
         * ```
         *
         * @param nValue Input number.
         * @return Returns nValue if the value is positive otherwise `0`.
         */
        function positive(nValue: number): number;
        /**
         * Checks if the supplied number is negative and returns this negative value or `0` if the value is positive.
         *
         * #### Example
         * ```typescript
         * negative(1); // Returns `0`
         * negative(-1); // Returns `-1`
         * ```
         *
         * @param nValue Input number.
         * @return Returns nValue if the value is negative otherwise `0`.
         */
        function negative(nValue: number): number;
        /**
         * Compares two numbers and returns the highest value.
         *
         * #### Example
         * ```typescript
         * max(1, 2); // Returns `2`
         * ```
         *
         * @param nA Input number A.
         * @param nB Input number B.
         * @return Returns the number with the highest value.
         */
        function max(nA: number, nB: number): number;
        /**
         * Compares the supplied arguments returns the highest value.
         *
         * #### Example
         * ```typescript
         * maxL(1, 2, 5, 3); // Returns `5`
         * ```
         *
         * @param pArguments Arguments to compare.
         * @return Returns the number with the highest value.
         */
        function maxL(...pArguments: number[]): number;
        /**
         * Compares two numbers and returns the lowest value.
         *
         * #### Example
         * ```typescript
         * min(1, 2); // Returns `1`
         * ```
         *
         * @param nA Input number A.
         * @param nB Input number B.
         * @return Returns the number with the lowest value.
         */
        function min(nA: number, nB: number): number;
        /**
         * Compares the supplied arguments returns the lowest value.
         *
         * #### Example
         * ```typescript
         * minL(1, 2, 5, 3); // Returns `1`
         * ```
         *
         * @param pArguments Arguments to compare.
         * @return Returns the number with the lowest value.
         */
        function minL(...pArguments: number[]): number;
        /**
         * Adjusts a number so it is in range between the specifies minimum and maximum.
         *
         * #### Example
         * ```typescript
         * range(20, 5, 10); // Returns `10`
         * range(0, 5, 10); // Returns `5`
         * ```
         *
         * @param nValue Input number.
         * @param nMin Specifies the minimum value.
         * @param nMax Specifies the maximum value.
         * @return Returns the ranged number.
         */
        function range(nValue: number, nMin: number, nMax?: number): number;
        /**
         * Checks if the given value is within the specified range.
         *
         * #### Example
         * ```typescript
         * inRange(5, 5, 10); // Returns `true`
         * inRange(0, 5, 10); // Returns `false`
         * ```
         *
         * @param nValue Input number.
         * @param nMin Specifies the minimum value.
         * @param nMax Specifies the maximum value.
         * @param bEdgeMin Specifies if the edge of the min value is allowed (enabled by default).
         * @param bEdgeMax Specifies if the edge of the max value is allowed (disabled by default).
         * @return Returns `true` if the value is in range.
         */
        function inRange(nValue: number, nMin: number, nMax: number, bEdgeMin?: boolean, bEdgeMax?: boolean): boolean;
        /**
         * Formats a number by inserting thousands and decimal separators while taking rounding into account.
         *
         * #### Example
         * ```typescript
         * format("1000.235", 2); // Returns `1,000.24`
         * ```
         *
         * @param nValue Input value as a number or string.
         * @param nPrecision Specifies the precision (set it to `auto` to allow
         * floating point numbers with automatic precision detection).
         * @param sSeparator Separator sign.
         * @param sDecimal Decimal sign.
         * @param sMinus Minus sign.
         * @return Returns the formatted number as a string.
         */
        function format(
            nValue: number | string,
            nPrecision?: number | "auto",
            sSeparator?: string,
            sDecimal?: string,
            sMinus?: string
        ): string;
    }
    export namespace Str {
        /**
         * Converts a string to lowercase.
         *
         * #### Example
         * ```typescript
         * lowercase("HELLO"); // Returns `hello`
         * ```
         *
         * @param sValue Source string.
         * @return Returns the converted string.
         */
        function lowercase(sValue: string): string;
        /**
         * Converts a string to uppercase.
         *
         * #### Example
         * ```typescript
         * uppercase("Hello"); // Returns `HELLO`
         * ```
         *
         * @param sValue Source string.
         * @return Returns the converted string.
         */
        function uppercase(sValue: string): string;
        /**
         * Capitalizes the first character of a string or the first character of each word.
         *
         * #### Example
         * ```typescript
         * capitalize("lorem ipsum. dolor"); // Returns `Lorem ipsum. dolor`
         * capitalize("lorem ipsum. dolor", "each-word"); // Returns `Lorem Ipsum. Dolor`
         * capitalize("lorem ipsum. dolor", "each-sentence"); // Returns `Lorem ipsum. Dolor`
         * ```
         *
         * @param sValue Source string.
         * @param sMode Specifies the mode: `first-character` (default), `each-word` or `each-sentence`.
         * @param bLowercase Converts the string to lowercase before capitalizing it.
         * @return Returns the capitalized string.
         */
        function capitalize(sValue: string, sMode?: "first-character" | "each-word" | "each-sentence", bLowercase?: boolean): string;
        /**
         * Trims a string by removing all leading and trailing whitespaces (`_ab__cd_` -> `ab__cd`).
         *
         * #### Example
         * ```typescript
         * trim(" ab  cd "); // Returns `ab  cd`
         * ```
         *
         * @param sValue Source string.
         * @return Returns the trimmed string.
         */
        function trim(sValue: string): string;
        /**
         * Trims a string at the left side by removing all leading whitespaces (`_ab__cd_` -> `ab__cd_`).
         *
         * #### Example
         * ```typescript
         * trimLeft(" ab  cd "); // Returns `ab  cd `
         * ```
         *
         * @param sValue Source string.
         * @return Returns the trimmed string.
         */
        function trimLeft(sValue: string): string;
        /**
         * Trims a string at the right by removing all trailing whitespaces (`_ab__cd_` -> `_ab__cd`).
         *
         * #### Example
         * ```typescript
         * trimRight(" ab  cd "); // Returns ` ab  cd`
         * ```
         *
         * @param sValue Source string.
         * @return Returns the trimmed string.
         */
        function trimRight(sValue: string): string;
        /**
         * Trims a string by removing all multiple whitespaces (`_ab__cd_` -> `_ab_cd_`).
         *
         * #### Example
         * ```typescript
         * trimMultiple(" ab  cd "); // Returns ` ab cd `
         * ```
         *
         * @param sValue Source string.
         * @return Returns the trimmed string.
         */
        function trimMultiple(sValue: string): string;
        /**
         * Sanitize a string by removing all leading, trailing and multiple whitespaces (`_ab__cd_` -> `ab_cd`).
         *
         * #### Example
         * ```typescript
         * sanitize(" ab  cd "); // Returns `ab cd`
         * ```
         *
         * @param sValue Source string.
         * @return Returns the sanitized string.
         */
        function sanitize(sValue: string): string;
        /**
         * Removes all white spaces from the specified string (`_ab__cd_` -> `abcd`).
         *
         * #### Example
         * ```typescript
         * removeWhitespaces(" ab  cd "); // Returns `abcd`
         * ```
         *
         * @param sValue Source string.
         * @return Returns the sanitized string.
         */
        function removeWhitespaces(sValue: string): string;
        /**
         * Limits a string which is greater than the specified number of characters and appends an optional string. If an append string is
         * specified any trailing spaces in the trimmed string are removed.
         *
         * #### Example
         * ```typescript
         * limit("Lorem ipsum", 5, "..."); // Returns `Lorem...`
         * limit("Lorem ipsum", 6, "..."); // Returns `Lorem...`
         * limit("Lorem ipsum", 6); // Returns `Lorem `
         * ```
         *
         * @param sValue Specifies the input string (variable will be casted to a string if necessary).
         * @param nMax Maximum string length.
         * @param sAppend Optional string which is appended to a limited string.
         * @return Returns the limited string.
         */
        function limit(sValue: string, nMax: number, sAppend?: string): string;
        /**
         * Replaces all occurrences of `sWhat` with `sWith` in the specified string.
         *
         * #### Example
         * ```typescript
         * replace("Hello", "l", "-"); // Returns `He--o`
         * ```
         *
         * @param sValue Specifies the input string (variable will be casted to a string if necessary).
         * @param sWhat Specifies the string to search for.
         * @param sWith Specifies the replace string. If omitted an empty string will be used.
         * @param bIgnoreCase Specifies if the string replace should be case insensitive.
         * @return Returns the replaced string.
         */
        function replace(sValue: string, sWhat: string, sWith?: string, bIgnoreCase?: boolean): string;
        /**
         * Replaces all occurrences of strings in `pWhat` with `sWith` in the specified string.
         *
         * #### Example
         * ```typescript
         * replaceMultiple("Hello", ["ll", "o"], "-"); // Returns `He---`
         * ```
         *
         * @param sValue Specifies the input string (variable will be casted to a string if necessary).
         * @param pWhat Specifies the strings to search for.
         * @param sWith Specifies the replace string. If omitted an empty string will be used.
         * @param bIgnoreCase Specifies if the string replace should be case insensitive.
         * @return Returns the replaced string.
         */
        function replaceMultiple(sValue: string, pWhat: string[], sWith?: string, bIgnoreCase?: boolean): string;
        /**
         * Converts HTML brackets to HTML entities so it is safe to display without HTML parsing. *Careful, only the brackets (`<` and `>`)
         * are converted to HTML entities.*
         *
         * #### Example
         * ```typescript
         * makeHTMLSafe("<b>Hello</b>"); // Returns `&lt;b&gt;Hello&lt;b&gt;`
         * ```
         *
         * @param sValue Specifies the string to be converted (variable will be casted to a string if necessary).
         * @return Returns the converted string.
         */
        function makeHTMLSafe(sValue: string): string;
        /**
         * Converts carriage returns and/or newlines to HTML breaks.
         *
         * #### Example
         * ```typescript
         * CRLFToHTML("Row 1\r\nRow 2"); // Returns `Row 1<br />Row 2`
         * ```
         *
         * @param sValue Specifies the string to be converted (variable will be casted to a string if necessary).
         * @return Returns the converted string.
         */
        function CRLFToHTML(sValue: string): string;
        /**
         * Converts an array or object list to a concatenated string.
         *
         * #### Example
         * ```typescript
         * iterateToString(["a", "b", "c"]); // Returns `abc`
         * iterateToString(["a", "b", "c"], "-"); // Returns `a-b-c`
         * iterateToString(["a", "b", "c"], "/", (sValue: string) => sValue + sValue); // Returns `aa/bb/cc`
         * ```
         *
         * @param T Specifies the item type.
         * @param pList Specifies the array, collection or enumerable object to
         * iterate through.
         * @param sSeparator Optional parameter which specifies the separator string or char.
         * @param fnCast Optional function to be invoked for each element instead of automatic casting to strings. The element value will be
         * exposed to the function as the first argument of the argument list. Additional arguments can be specified and will be pushed to
         * the function.
         * @param fnCast.pItem Contains the item which should be casted to a string.
         * @param fnCast.pArguments Optional additional arguments for the casting function. These are the additional arguments which are
         * passed to the main function.
         * @param pArguments Optional additional arguments which will be passed to the callee.
         * @return Returns the concatenated string.
         */
        function iterateToString<T>(
            pList: TList<T>,
            sSeparator?: string,
            fnCast?: (pItem: T, ...pArguments: TArguments) => string,
            ...pArguments: TArguments
        ): string;
        /**
         * Extracts the part of the string between the first occurrence of `left` and the optional occurrence of `right`.
         *
         * #### Example
         * ```typescript
         * extract("Lorem ipsum dolor", { left: "Lo", right: "m" }); // Returns `re`
         * extract("Lorem ipsum dolor", { left: "Lo", right: "m", fromEnd: true }); // Returns `rem ipsu`
         * ```
         *
         * @param sValue Specifies the input string (variable will be casted to a string if necessary).
         * @param pOptions Specifies the extract options.
         * @return Returns the string between `left` and `right` or an empty string if an error occurs.
         */
        function extract(
            sValue: string,
            pOptions: {
                /** Left string selector. */
                left: string;
                /** Right string selector. */
                right?: string;
                /**
                 * Specifies the search direction of the right string selector. If
                 * `false` is specified, the function searches for the first
                 * occurrence of `Right` directly after the position of `Left`.
                 */
                fromEnd?: boolean;
                /** Specifies if a case insensitive check should be performed. */
                ignoreCase?: boolean;
            }
        ): string;
        /**
         * Fills a string for the specified times with the specified string or characters.
         *
         * #### Example
         * ```typescript
         * fill("A", 5); // Returns `AAAAA`
         * ```
         *
         * @param sFill Specifies the fill string.
         * @param nCount Specifies the number of copies to insert.
         * @return Returns the filled string.
         */
        function fill(sFill: string, nCount: number): string;
        /**
         * Converts source variable to a string and pads the string on the left with the supplied number of characters.
         *
         * #### Example
         * ```typescript
         * padLeft("ABC", "A", 5); // Returns `AAABC`
         * ```
         *
         * @param pValue Specifies the input string or number.
         * @param sFill Contains the string which will be used as fill string.
         * @param nLength Specifies the desired string length.
         * @param bCrop Optional boolean value which enables string cropping if the source string length is larger than the desired string
         * length.
         * @param bTreatAsNumber Optional boolean value which specifies the input string should be treated as a number.
         * @return Returns the padded string.
         */
        function padLeft(pValue: string | number, sFill: string, nLength: number, bCrop?: boolean, bTreatAsNumber?: boolean): string;
        /**
         * Converts source variable to a string and pads the string on the right with the supplied number of characters.
         *
         * #### Example
         * ```typescript
         * padRight("ABC", "A", 5); // Returns `ABCAA`
         * ```
         *
         * @param pValue Specifies the input string or number.
         * @param sFill Contains the string which will be used as fill string.
         * @param nLength Specifies the desired string length.
         * @param bCrop Optional boolean value which enables string cropping if the source string length is larger than the desired string
         * length.
         * @return Returns the padded string.
         */
        function padRight(pValue: string | number, sFill: string, nLength: number, bCrop?: boolean): string;
        /**
         * Creates a simple hash for the supplied string using the djb2-algorithm
         * written by Dan Bernstein. This hash function is similar to a linear
         * congruential generator and is absolutely not collision resistant.
         *
         * #### Example
         * ```typescript
         * djb2Hash("Abc"); // Returns `ABCAA`
         * djb2Hash("Abc", "prefix-"); // Returns `prefix-ABCAA`
         * ```
         *
         * @param sValue Specifies the input string.
         * @param sPrefix Specifies a prefix for the hash result.
         * @return Returns the hash string.
         * @see http://www.cse.yorku.ca/~oz/hash.html
         * @see https://en.wikipedia.org/wiki/Linear_congruential_generator
         */
        function djb2Hash(sValue: string, sPrefix?: string): string;
    }
    export class DateTime {
        /** Returns the current time and date as number of milliseconds. */
        static get now(): number;
        /** Returns a high precision time stamp with up to microsecond precision. */
        static get precise(): number;
        /** Returns the current local time as if it is that time in UTC as number of milliseconds. */
        static get UTC(): number;
        /** Returns today 0:00 as number of milliseconds. */
        static get today(): number;
        /** Returns today 0:00 as if it is that date in UTC as number of milliseconds. */
        static get UTCToday(): number;
        /**
         * Checks if the specified date/time is in the future.
         * @param nTime Specifies the date/time to check.
         * @return Returns `true` if the supplied date/time is in the future.
         */
        static isFuture(nTime: number): boolean;
        /**
         * Checks if the specified date/time is in the past.
         * @param nTime Specifies the date/time to check.
         * @return Returns `true` if the supplied date/time is in the past.
         */
        static isPast(nTime: number): boolean;
        /**
         * Returns the number of elapsed milliseconds between the current time and the supplied time.
         * @param nTime Specifies the date/time to subtract.
         * @param bPrecise Specifies if the precise or normal time should be used.
         * @return Returns the number of elapsed milliseconds between the current time and the supplied time.
         */
        static elapsed(nTime: number, bPrecise?: boolean): number;
        /**
         * Resets the high precision timer and returns the old value.
         * @return Returns the previous timer value.
         */
        static timerReset(): number;
        /** Returns the number of milliseconds elapsed since the last timer update. On each call the timer is restarted. */
        static get timerElapsed(): number;
        /** Returns a timer stamp with the number of milliseconds elapsed since the last timer update. */
        static get timerStamp(): string;
        /**
         * Formats a date/time string.
         * @param sFormat Specifies the format to use, using the CLDR date/time formatting style. The following variables are available:
         * - `y` / `yyyy`: Specifies the full 4-digit year;
         * - `yy`: Specifies the 2-digit year;
         * - `M`: Specifies the month number;
         * - `MM`: Specifies the month number with a minimum of 2 digits;
         * - `MMM`: Specifies the month as an abbreviated string which should be supplied through the `monthFormattedAbbreviated`
         * parameter (e.g. `Jan`);
         * - `MMMM`: Specifies the month as a full string which should be supplied through the `monthFormattedWide`
         * parameter (e.g. `January`);
         * - `MMMMM`: Specifies the month as a narrow string which should be supplied through the `monthFormattedNarrow`
         * parameter (e.g. `J`);
         * - `LLL`: Specifies the month as an abbreviated nominative string which should be supplied through
         * the `monthNominativeAbbreviated` parameter (e.g. `Jan`);
         * - `LLLL`: Specifies the month as a full nominative string which should be supplied through
         * the `monthNominativeWide` parameter (e.g. `January`);
         * - `LLLLL`: Specifies the month as a narrow nominative string which should be supplied through
         * the `monthNominativeNarrow` parameter (e.g. `J`);
         * - `d`: Specifies the day of the month;
         * - `dd`: Specifies the day of the month with a minimum of 2 digits;
         * - `E`: Specifies the day of the week;
         * - `EE`: Specifies the day of the week as a string which should be supplied through the `weekdaysFormattedShort`
         * parameter (e.g. `Su`);
         * - `EEE`: Specifies the day of the week as an abbreviated string which should be supplied through
         * the `weekdaysFormattedAbbreviated` parameter (e.g. `Sun`);
         * - `EEEE`: Specifies the day of the week as a full string which should be supplied through the `weekdaysFormattedWide`
         * parameter (e.g. `Sunday`);
         * - `EEEEE`: Specifies the day of the week as a narrow string which should be supplied through the `weekdaysFormattedNarrow`
         * parameter (e.g. `S`);
         * - `cc`: Specifies the day of the week as a nominative string which should be supplied through the `weekdaysNominativeShort`
         * parameter (e.g. `Su`);
         * - `ccc`: Specifies the day of the week as an abbreviated nominative string which should be supplied through
         * the `weekdaysNominativeAbbreviated` parameter (e.g. `Sun`);
         * - `cccc`: Specifies the day of the week as a full nominative string which should be supplied through
         * the `weekdaysNominativeWide` parameter (e.g. `Sunday`);
         * - `ccccc`: Specifies the day of the week as a narrow nominative string which should be supplied through
         * the `weekdaysNominativeNarrow` parameter (e.g. `S`);
         * - `H`: Specifies the number of hours in 24-hour format;
         * - `HH`: Specifies the number of hours in 24-hour format  with a minimum of 2 digits;
         * - `h`: Specifies the number of hours in 12-hour format;
         * - `hh`: Specifies the number of hours in 12-hour format  with a minimum of 2 digits;
         * - `a`: Specifies the `AM` or `PM` hour suffix;
         * - `m`: Specifies the number of minutes;
         * - `mm`: Specifies the number of minutes with a minimum of 2 digits;
         * - `s`: Specifies the number of seconds;
         * - `ss`: Specifies the number of seconds with a minimum of 2 digits;
         * - `S`: Specifies the number of milliseconds;
         * - `SSS`: Specifies the number of milliseconds with a minimum of 3 digits;
         * @param nTime Specifies the date/time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param pLocales Contains the date/time locales.
         * @return Returns the formatted date string.
         * @see http://cldr.unicode.org/translation/date-time
         */
        static format(
            sFormat?: string,
            nTime?: number,
            bUTC?: boolean,
            pLocales?: {
                /** Specifies an array with 12 formatted abbreviated month labels, starting with january. */
                monthsFormattedAbbreviated?: string[];
                /** Specifies an array with 12 formatted narrow month labels, starting with january. */
                monthsFormattedNarrow?: string[];
                /** Specifies an array with 12 formatted wide month labels, starting with january. */
                monthsFormattedWide?: string[];
                /** Specifies an array with 12 nominative abbreviated month labels, starting with january. */
                monthsNominativeAbbreviated?: string[];
                /** Specifies an array with 12 nominative narrow month labels, starting with january. */
                monthsNominativeNarrow?: string[];
                /** Specifies an array with 12 nominative wide month labels, starting with january. */
                monthsNominativeWide?: string[];
                /** Specifies an array with 7 formatted abbreviated day labels, starting with sunday. */
                weekdaysFormattedAbbreviated?: string[];
                /** Specifies an array with 7 formatted narrow day labels, starting with sunday. */
                weekdaysFormattedNarrow?: string[];
                /** Specifies an array with 7 formatted short day labels, starting with sunday. */
                weekdaysFormattedShort?: string[];
                /** Specifies an array with 7 formatted wide day labels, starting with sunday. */
                weekdaysFormattedWide?: string[];
                /** Specifies an array with 7 nominative abbreviated day labels, starting with sunday. */
                weekdaysNominativeAbbreviated?: string[];
                /** Specifies an array with 7 nominative narrow day labels, starting with sunday. */
                weekdaysNominativeNarrow?: string[];
                /** Specifies an array with 7 nominative short day labels, starting with sunday. */
                weekdaysNominativeShort?: string[];
                /** Specifies an array with 7 nominative wide day labels, starting with sunday. */
                weekdaysNominativeWide?: string[];
                /** Specifies the `AM` suffix. */
                AM?: string;
                /** Specifies the `PM` suffix. */
                PM?: string;
            }
        ): string;
        /**
         * Formats an elapsed time as a string. Uses the CLDR date/time formatting style.
         * @param sFormat Specifies the format to use. The following variables are available:
         * - `H`: Specifies the number of hours;
         * - `HH`: Specifies the number of hours with a minimum of 2 digits;
         * - `m`: Specifies the number of minutes;
         * - `mm`: Specifies the number of minutes with a minimum of 2 digits;
         * - `s`: Specifies the number of seconds;
         * - `ss`: Specifies the number of seconds with a minimum of 2 digits;
         * - `S`: Specifies the number of milliseconds;
         * - `SSS`: Specifies the number of milliseconds with a minimum of 3 digits;
         * - `u`: Specifies the number of microseconds;
         * - `uuu`: Specifies the number of microseconds with a minimum of 3 digits;
         * @param nElapsed Specifies the elapsed time. If this value is not specified, the current `timerElapsed` value will be used.
         * @param sAM Specifies the `AM` suffix.
         * @param sPM Specifies the `PM` suffix.
         * @return Returns the formatted elapsed time string.
         * @see http://cldr.unicode.org/translation/date-time
         */
        static formatElapsed(sFormat?: string, nElapsed?: number, sAM?: string, sPM?: string): string;
        /** Returns a preformatted log string. */
        static get log(): string;
        /** Returns a preformatted time log string. */
        static get logTime(): string;
        /**
         * Constructs a new date object.
         * @param Specifies the date/time.
         */
        constructor(pDate?: DateTime | Date | number);
        /** Retrieves the date object. */
        get date(): Date;
        /** Retrieves the unix time stamp. */
        get time(): number;
        /** Sets the unix time stamp. */
        set time(nTime: number);
    }
    export class Flags {
        /** Creates a new flag identifier. */
        get flag(): number;
        /**
         * Converts the supplied boolean values to a flag identifier.
         * @param pFlags Array with boolean attributes.
         * @return Returns the flag number.
         */
        static convert(...pFlags: boolean[]): number;
        /**
         * Checks if the supplied flags value has the specified flag index enabled.
         * @param nFlags Specifies the flags value.
         * @param nIndex Specifies the flag index (the first flag is `1`).
         * @return Returns `true` if the flag is enabled.
         */
        static has(nFlags: number, nIndex: number): boolean;
    }
    export class Enumerator {
        /** Retrieves the next global enumerator. */
        static get n(): number;
        /** Retrieves the next instance enumerator. */
        get n(): number;
        /** Sets the enumerator offset. */
        set n(nEnumerator: number);
        /** Recycles the global enumerator. */
        static recycle(): void;
        /** Recycles the instance enumerator. */
        recycle(): void;
    }
    type TType = "throttle" | "throttle-delay" | "debounce";
    export type TCallback = (...pArguments: TArguments) => void;
    export class Limiter {
        /**
         * Creates a new limiter.
         * @param sType Specifies the limiter type.
         * @param fnCallback Specifies the callback function.
         * @param nTimeout Specifies the timeout. Can be a number that specifies
         * the number of milliseconds or can be one of the following values:
         * - `tick`: Use a single tick;
         * - `frame`: Use a single animation frame;
         * - `double-frame`: Use a double animation frame;
         * - `promise`: Debounce using promise;
         * - `tick`: Debounce on next tick.
         */
        constructor(sType: TType, fnCallback: TCallback, nTimeout: number | "tick" | "promise" | "frame" | "double-frame");

        /**
         * Invokes the callback with the supplied arguments.
         * @param pArguments Specifies the arguments to pass to the callback.
         */
        invoke(...pArguments: TArguments): void;
        /** Cancels any pending callbacks. */
        cancel(): void;
        /** Flushes any pending callbacks by executing them immediately (even when a callback is hold). */
        flush(): void;
        /** Hold any pending callbacks. */
        hold(): void;
        /**
         * Release any pending callbacks.
         * @param bImmediately Specifies if the release should be instantly.
         */
        release(bImmediately?: boolean): void;
    }
    export class Throttle extends Limiter {
        /**
         * Creates a new throttle.
         * @param fnCallback Specifies the callback function.
         * @param nTimeout Specifies the throttle timeout. Can be a number that
         * specifies the number of milliseconds or can be one of the following values:
         * - `frame`: Use a single animation frame (default);
         * - `double-frame`: Use a double animation frame;
         * - `promise`: Debounce using promise;
         * - `tick`: Debounce on next tick.
         * @param bDelay Specifies if the first call should be delayed until the
         * timeout. If the delay is disabled (`false`), all calls until the next
         * timeout are ignored.
         */
        constructor(fnCallback: TCallback, nTimeout?: number | "tick" | "promise" | "frame" | "double-frame", bDelay?: boolean);
    }
    export class Debounce extends Limiter {
        /**
         * Creates a new debouncer.
         * @param fnCallback Specifies the callback function.
         * @param nTimeout Specifies the debounce timeout. Can be a number that
         * specifies the number of milliseconds or can be one of the following values:
         * - `frame`: Use a single animation frame (default);
         * - `double-frame`: Use a double animation frame;
         * - `promise`: Debounce using promise;
         * - `tick`: Debounce on next tick.
         */
        constructor(fnCallback: TCallback, nTimeout?: number | "tick" | "promise" | "frame" | "double-frame");
    }
    export class Stack {
        /** Adds a call to the buffer. */
        add(fnCall: () => void): void;
        /** Executes all calls in the stack. */
        flush(): void;
        /** Clears the stack. */
        clear(): void;
        /** Flushes and clears the stack. */
        flushAndClear(): void;
    }
    /** Indicates if debugging is enabled. */
    export let DEBUG: boolean;
    /** Enable debugging. */
    export function enableDebugging(): void;
    /** Disable debugging. */
    export function disableDebugging(): void;

    export { TType as TLimiterType };
}

declare module "tripetto/module/grid" {
    import { Stack, TAny } from "tripetto/module/functional";
    import { IHookPayload, THooks } from "tripetto/module/hookup";
    import {
        ICountChangeEvent,
        IDimensionChangeEvent,
        IItemChangeEvent,
        IItemPopEvent,
        IItemPushEvent,
        Item,
        Matrix,
        Orientations,
        Types,
    } from "tripetto/module/matrix";
    import { Coordinate, IPoint, Rectangle, Rectangles } from "tripetto/module/metrics";
    import { ISerialize } from "tripetto/module/serializer";

    export interface IGridResource extends ISerialize {
        /** Contains the identifier for the serialized resource. */
        readonly id: string;
    }
    /** Specifies the rectangles type. */
    export type TGridRectangles = Rectangles<"self" | "children">;
    export type TGridStructure = Structure<Item<THooks>, TDispatcherFactory, TDispatcherFactory, THooks>;
    abstract class Structure<
        Ancestor extends Item<THooks>,
        Dispatcher extends TDispatcherFactory,
        Children extends TDispatcherFactory,
        Hooks extends THooks
    > extends Item<Hooks> {
        /**
         * Constructs a new structure instance.
         * @param pDispatcher Reference to the dispatcher.
         * @param fnChildren Creates and returns the child structure.
         * @param pRenderer Reference to the renderer.
         * @param bRender Specifies if the structure needs to be rendered.
         */
        constructor(
            pDispatcher: Dispatcher | undefined,
            fnChildren: ((pParent: Structure<Ancestor, Dispatcher, Children, Hooks>) => Children) | undefined,
            pRenderer: GridRenderer<TGrid> | undefined
        );
        /** Retrieves the parent dispatcher. */
        get parent(): Dispatcher | undefined;
        /** Retrieves the ancestor. */
        get ancestor(): Ancestor | undefined;
        /** Retrieves the children of the structure. */
        get children(): Children | undefined;
        /** Retrieves the zoom factor. */
        get zoom(): number;
        /** Sets the zoom factor. */
        set zoom(nZoom: number);
        /** Retrieves the layout. */
        get layout(): GridLayout<TGrid, Structure<Ancestor, Dispatcher, Children, Hooks>> | undefined;
        /** Retrieves the renderer. */
        get renderer(): GridRenderer<TGrid> | undefined;
        /** Sets the renderer. */
        set renderer(pRenderer: GridRenderer<TGrid> | undefined);
        /** Specifies if the structure is rendered. */
        get isRendered(): boolean;
        /** Retrieves the rectangles of the structure. */
        get rectangles(): TGridRectangles;
        /** Retrieves the rectangle of the structure. */
        get rectangle(): Rectangle;
        /** Retrieves the left position of the structure. */
        get left(): number;
        /** Retrieves the top position of the structure. */
        get top(): number;
        /** Retrieves the right position of the structure. */
        get right(): number;
        /** Retrieves the bottom position of the structure. */
        get bottom(): number;
        /** Retrieves the width of the structure. */
        get width(): number;
        /** Retrieves the height of the structure. */
        get height(): number;
        /** Retrieves the horizontal mean of the structure. */
        get meanHorizontal(): number;
        /** Retrieves the vertical mean of the structure. */
        get meanVertical(): number;
        /** Invalidates the rendering. */
        protected renderInvalidate(): void;
        /**
         * Applies the position.
         * @param sType Specifies the change type.
         * @return Returns `true` if the structure position is changed.
         */
        protected applyPosition(sType?: "redraw" | "zoom"): boolean;
        /**
         * Applies a resize.
         * @param sType Specifies the resize type.
         * @return Returns `true` if the structure is resized.
         */
        applyResize(sType?: "redraw" | "zoom"): boolean;
        /**
         * Changes the dimensions of the structure.
         * @param nWidth Specifies the width of the structure.
         * @param nHeight Specifies the height of the structure.
         * @return Returns `true` if the structure is resized.
         */
        resize(nWidth?: number, nHeight?: number): boolean;
        /**
         * Iterate through each descendant of the structure.
         * @param fnStructure Specifies the structure function.
         * @param fnStructure.pStructure Contains a reference to the structure.
         * @return Returns `true` if the iteration is stopped (break).
         */
        abstract forEachDescendant(fnStructure: (pStructure: TGridStructure) => boolean | void): boolean;
        /**
         * Iterate recursively through each descendant of the structure. For each
         * structure (including the structure from which the iteration originates)
         * a function will be invoked. This function should return `true` if the
         * structure needs to be iterated or `false` if the iteration should
         * continue with the next sibling structure.
         * @param fnStructure Specifies the structure function.
         * @param fnStructure.pStructure Contains a reference to the structure.
         * @return Returns the result of the structure function.
         */
        abstract forEachDescendantRecursive(fnStructure: (pStructure: TGridStructure) => boolean | void): boolean;
        /**
         * Renders the structure.
         * @param bRecursive Specifies if the underlying structures needs to be
         * rendered.
         */
        render(bRecursive: boolean): void;
        /**
         * Invokes the layout renderer.
         * @param sType Specifies the rerender type. Can be one of the following values:
         * - `refresh`: Refresh the rendering;
         * - `update`: Update the rendering.
         */
        rerender(sType: "refresh" | "update"): void;
        /**
         * Invoked when the structure is rendered. Can be used to bind events.
         * @event
         */
        onRender(): void;
        /** Resets a structure. */
        reset(): void;
        /** Destroys a structure. */
        destroy(): void;
    }
    export interface ILayout<Grid extends TGrid, Parent extends TGridStructure> {
        /**
         * Specifies the constructor function.
         * @param pParent Specifies a reference to the parent.
         * @param pArguments Specifies additional constructor arguments.
         */
        new (pRenderer: GridRenderer<Grid>, pParent: Parent, ...pArguments: TAny[]): GridLayout<Grid, Parent>;
    }
    export abstract class GridLayout<Grid extends TGrid, Parent extends TGridStructure> {
        /**
         * Constructs a new layout.
         * @param pRenderer Reference to the renderer.
         * @param pParent Reference to the layout parent.
         */
        constructor(pRenderer: GridRenderer<Grid>, pParent: Parent);
        /** Returns the layout configuration. */
        abstract get configuration(): TGridRectangles;
        /** Retrieves a reference to the renderer. */
        get renderer(): GridRenderer<Grid>;
        /** Retrieves a reference to the layout parent. */
        get parent(): Parent;
        /** Retrieves the horizontal offset for the layout. */
        get x(): number;
        /** Retrieves the vertical offset for the layout. */
        get y(): number;
        /**
         * Invooked when the layout is about to resize.
         * @param pRectangles Contains the layout rectangles.
         */
        beforeResize(pRectangles: TGridRectangles): void;
        /**
         * Fired when the z-index is changed.
         * @param nZ Specifies the z-index.
         * @event
         */
        zIndex(nZ: number): void;
        /**
         * Fired when the layout should be elevated.
         * @param bElevate Specifies if the layout is elevated.
         * @event
         */
        onElevate(bElevate: boolean): void;
        /**
         * Fired when an item becomes part of a dispatcher.
         * @event
         */
        onPush(): void;
        /**
         * Fired when an item becomes the first item.
         * @event
         */
        onFirst(): void;
        /**
         * Fired when an item becomes the last item.
         * @event
         */
        onLast(): void;
        /**
         * Specifies the expansion coordinates for the move detection. These
         * coordinates are applied to the rectangle detection. Use it to
         * expand or contract the rectangle.
         * @param nX Specifies the horizontal mouse coordinate.
         * @param nY Specifies the vertical mouse coordinate.
         * @param pTarget Specifies the target resource.
         * @return Returns the expansion coordinates.
         * @event
         */
        onMoveExpansion(nX: number, nY: number, pTarget: TGridResource): Coordinate;
        /**
         * Fired when the system wants to know if the supplied mouse coordinates
         * are within the resource.
         * @param nX Specifies the horizontal mouse coordinate.
         * @param nY Specifies the vertical mouse coordinate.
         * @param pTarget Specifies the target resource.
         * @return Returns `true` if the mouse is within the resource.
         * @event
         */
        onIsMoveIn(nX: number, nY: number, pTarget: TGridResource): boolean;
        /**
         * Specifies the function which is invoked when the move is initialized.
         * @param nDelay Specifies the delay in milliseconds before the movement starts.
         * @param pOffset Contains the touch/click offset relative to the resource.
         * @return Return `true` if the move should be continued.
         * @event
         */
        onMoveInit(nDelay: number, pOffset: IPoint): boolean;
        /**
         * Specifies the function which is invoked when the move starts.
         * @param pOffset Contains the touch/click offset relative to the resource.
         * @return Return `true` if the move should be continued.
         * @event
         */
        onMoveStart(pOffset: IPoint): boolean;
        /**
         * Specifies the function which is invoked when a movement occurs.
         * @param nMouseX Specifies the horizontal mouse coordinate.
         * @param nMouseY Specifies the vertical mouse coordinate.
         * @param bPopped Specifies if the resource is popped. In that case the
         * resource is not inside a parent which can host the resource.
         * @param pOffset Contains the touch/click offset relative to the resource.
         * @return Return `true` if the movement is valid. If you return `false`
         * the item will be popped.
         * @event
         */
        onMove(nMouseX: number, nMouseY: number, bPopped: boolean, pOffset: IPoint): boolean;
        /**
         * Specifies the function which is invoked when the move ends.
         * @param bDragging Specifies if the `MoveStart` event is fired and the
         * resource was in dragging mode.
         * @event
         */
        onMoveEnd(bDragging: boolean): void;
        /**
         * Invoked when the guides of a rendering are changed.
         * @param bVisible Indicates if the guides should be visible.
         * @param nLeft Specifies the left coordinate of the guides.
         * @param nTop Specifies the top coordinate of the guides.
         * @param nWidth Specifies the width of the guides.
         * @param nHeight Specifies the height of the guides.
         * @param nZoom Specifies the zoom factor of the guides.
         * @event
         */
        onGuidesChange(bVisible: boolean, nLeft: number, nTop: number, nWidth: number, nHeight: number, nZoom: number): void;
        /**
         * Renders the layout.
         * @param sType Specifies the render type. Can be one of the following values:
         * - `render`: Do a complete render;
         * - `refresh`: Refresh the rendering;
         * - `update`: Update the rendering.
         */
        abstract render(sType: "render" | "refresh" | "update"): void;
        /**
         * Sets the position of the layout element.
         * @param nLeft Specifies the horizontal position.
         * @param nTop Specifies the vertical position.
         * @param nZoom Contains the zoom factor.
         * @param sReason Specifies the reason for the position change.
         */
        abstract position(nLeft: number, nTop: number, nZoom: number, sReason: "redraw" | "zoom"): void;
        /**
         * Sets the dimensions of the layout element.
         * @param nWidth Specifies the width.
         * @param nHeight Specifies the height.
         * @param nZoom Contains the zoom factor.
         * @param sReason Specifies the reason for the resize.
         */
        abstract resize(nWidth: number, nHeight: number, nZoom: number, sReason: "redraw" | "width" | "height" | "zoom"): void;
        /** Destroys the layout. */
        abstract destroy(): void;
    }
    export interface IType<T extends TGridStructure> {
        /**
         * Specifies the constructor function.
         * @param pArguments Specifies additional constructor arguments.
         */
        new (...pArguments: TAny[]): T;
    }
    export interface IGridLayout<Grid extends TGrid, Type extends TGridStructure> {
        /** Specifies the type constructor. */
        type: IType<Type>;
        /** Specifies the layout. */
        layout: ILayout<Grid, Type>;
    }
    export abstract class GridRenderer<Grid extends TGrid, Types extends TGridStructure = TGridStructure> {
        /**
         * Constructs a new renderer.
         * @param pLayouts Specifies an array of layouts which are rendered.
         */
        constructor(...pLayouts: IGridLayout<Grid, Types>[]);
        /** Retrieves the grid of the rendering. */
        get grid(): Grid | undefined;
        /** Sets the rendering grid. */
        set grid(pGrid: Grid | undefined);
        /**
         * Provides the layout constructor for the specified parent type.
         * @param pType Reference to the parent type.
         * @return Returns the layout provider.
         */
        protected provider<Type extends TGridStructure>(pType: Type): IGridLayout<Grid, Type>;
        /**
         * Retrieves a new layout instance for the specified type.
         * @param pType Reference to the parent type.
         * @return Returns the layout instance.
         */
        abstract layout(pType: Types): GridLayout<Grid, Types>;
        /**
         * Fired when the renderer is initialized.
         * @event
         */
        onInit(): void;
        /**
         * Fired when the dimensions of the rendering are changed.
         * @param nWidth Specifies the width.
         * @param nHeight Specifies the height.
         * @param nZoom Contains the zoom factor.
         * @param sReason Specifies the reason for the resize.
         * @event
         */
        onResize(nWidth: number, nHeight: number, nZoom: number, sReason: "redraw" | "width" | "height" | "zoom"): void;
        /**
         * Fired when a move starts.
         * @event
         */
        onMoveStart(): void;
        /**
         * Fired when something is moving.
         * @event
         */
        onMove(): void;
        /**
         * Fired when the moving ends.
         * @event
         */
        onMoveEnd(): void;
    }
    export type TGridResource = Resource<TGridStructure, TDispatcherFactory, TDispatcherFactory, THooks>;
    abstract class Resource<
        Ancestor extends TGridStructure,
        Dispatcher extends TDispatcherFactory,
        Children extends TDispatcherFactory,
        Hooks extends THooks
    > extends Structure<Ancestor, Dispatcher, Children, Hooks> {
        /**
         * Constructs a new resource instance.
         * @param pDispatcher Reference to the dispatcher.
         * @param fnChildren Creates and returns the child resource.
         * @param pRenderer Reference to the renderer.
         */
        constructor(
            pDispatcher: Dispatcher | undefined,
            fnChildren?: (pParent: Resource<Ancestor, Dispatcher, Children, Hooks>) => Children,
            pRenderer?: GridRenderer<TGrid>
        );
        /** Retrieves if this is the grid. */
        protected get isGrid(): boolean;
        /** Retrieves the grid. */
        get grid(): TGrid | undefined;
        /** Returns the z-index. */
        get z(): number;
        /** Contains if the resource is being moved. */
        get isMoving(): boolean;

        /**
         * Fired when a new resource is pushed to the dispatcher. This new resource
         * should be positioned, sized and drawn on the screen.
         * @param pEvent Specifies the event payload.
         * @event
         */
        protected onPush(pEvent: IItemPushEvent<this>): void;
        /**
         * Fired when a resource is changed.
         * @param pEvent Specifies the event payload.
         * @event
         */
        protected onChange(pEvent: IItemChangeEvent<this>): void;
        /**
         * Fired when a resource is popped.
         * @param pEvent Specifies the event payload.
         * @event
         */
        protected onPop(pEvent: IItemPopEvent<this>): void;
        /** Validates the resource. */
        protected onValidate(): void;
        /**
         * Iterate through each descendant of the resource.
         * @param fnResource Specifies the resource function.
         * @param fnResource.pResource Contains a reference to the resource.
         * @return Returns `true` if the iteration is stopped (break).
         */
        forEachDescendant(fnResource: (pResource: TGridResource) => boolean | void): boolean;
        /**
         * Iterate recursively through each descendant of the resource. For each
         * resource (including the resource from which the iteration originates)
         * a function will be invoked. This function should return `true` if the
         * resource needs to be iterated or `false` if the iteration should
         * continue with the next sibling resource.
         * @param fnResource Specifies the resource function.
         * @param fnResource.pResource Contains a reference to the resource.
         * @return Returns the result of the resource function.
         */
        forEachDescendantRecursive(fnResource: (pResource: TGridResource) => boolean | void): boolean;
        /**
         * Calculates the z-index of the resource.
         * @param nZ Specifies the minimum z-index.
         * @return Returns `true` if the z-index is changed.
         */
        zIndex(nZ?: number): boolean;
        /**
         * Calculates the position of the resource.
         * @param nLeft Specifies the left coordinate.
         * @param nTop Specifies the top coordinate.
         * @return Returns `true` if the position is changed.
         */
        position(nLeft?: number, nTop?: number): boolean;
        /**
         * Shifts the position of the resource.
         * @param nHorizontal Specifies the horizontal shift.
         * @param nVertical Specifies the vertical shift.
         */
        shift(nHorizontal: number, nVertical: number): void;
        /**
         * Calculates the dimensions of the resource.
         * @param nWidth Specifies the width of the resource.
         * @param nHeight Specifies the height of the resource.
         * @return Returns `true` if the resource is resized.
         */
        resize(nWidth?: number, nHeight?: number): boolean;
        /**
         * Moves the resource and returns the coordinates with the supplied offset
         * applied.
         * @param nLeft Specifies the left movement.
         * @param nTop Specifies the top movement.
         * @param pOffset Specifies the offset of the touch point in the element.
         * @return Returns the coordinates with the supplied offset.
         */
        move(nLeft?: number, nTop?: number, pOffset?: IPoint): IPoint;
        /** Requests a guides update and invokes the guides layout. */
        guides(): void;
        /** Fired when there is a child pushed or popped. */
        onPushOrPop(): void;
        /**
         * Fired when a resource move is initialized.
         * @param nDelay Specifies the delay before the move occurs.
         * @param pOffset Specifies the offset of the touch point.
         * @return Returns `true` if the move operation is initialized.
         * @event
         */
        onMoveInit(nDelay: number, pOffset: IPoint): boolean;
        /**
         * Fired when a resource move starts.
         * @param pOffset Specifies the offset of the touch point.
         * @return Returns `true` if the move operation is started.
         * @event
         */
        onMoveStart(pOffset: IPoint): boolean;
        /**
         * Fired when a resource move occurs.
         * @param nMoveX Specifies the horizontal movement.
         * @param nMoveY Specifies the vertical movement.
         * @param pOffset Specifies the offset of the touch point.
         * @param sDispatcher Specifies the name of the child dispatcher.
         * @event
         */
        onMove(nMoveX: number, nMoveY: number, pOffset: IPoint, sDispatcher?: string): void;
        /**
         * Specifies the function which is invoked when a movement is validated.
         * @param pDispatcher Reference to the dispatcher.
         * @param nIndex Specifies the desired index for the resource.
         * @param bIsChild Specifies if the resource is already a child of the dispatcher.
         * @return Return `true` if the movement is validated.
         * @event
         */
        onMoveValidate(pDispatcher: TDispatcher, nIndex: number, bIsChild: boolean): boolean;
        /**
         * Fired when a resource move ends.
         * @param bDragging Specifies if the `onMoveStart` event is fired.
         * @event
         */
        onMoveEnd(bDragging: boolean): void;
        /**
         * Generates a serialized representation of a resource.
         * @param sChildren Specified the data name for the child array.
         * @return Returns a reference to the serialized resource.
         */
        serialize(sChildren?: string): IGridResource;
        /**
         * Deserializes to a resource.
         * @param pResource Contains the serialized resource.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @param sChildren Specified the data name for the child array.
         * @return Returns a reference to the instance.
         */
        deserialize(pResource: IGridResource, pAfterwards: Stack, sChildren?: string): this;
        /** Resets the resource. */
        reset(): void;
        /** Destroys the resource and all of its children. */
        destroy(): void;
    }
    export type TDispatcher = Dispatcher<TGridResource, TGridResource, THooks>;
    export type TDispatcherFactory = Dispatcher<TAny, TAny, THooks>;
    export type TDispatcherEvents<Hooks extends THooks> = Hooks | "OnResize";
    /** Dispatcher constructor template. */
    export interface IDispatcherConstructor<Parent extends TGridResource, T extends TGridResource, Hooks extends THooks> {
        new (pDispatcher: Dispatcher<Parent, T, Hooks>, ...pArguments: TAny[]): T;
    }
    abstract class Dispatcher<Parent extends TGridResource, T extends TGridResource, Hooks extends THooks> extends Matrix<
        T,
        TDispatcherEvents<Hooks>
    > {
        /**
         * Constructs a new dispatcher.
         * @param pType Reference to the dispatcher type.
         * @param pParent Reference to the parent (this is the ancestor of an item).
         * @param nType Specifies the direction.
         * @param nOrientation Specifies the orientation.
         * @param nSize Specifies the size.
         */
        constructor(
            pType: IDispatcherConstructor<Parent, T, Hooks>,
            pParent: Parent,
            nType: Types,
            nOrientation: Orientations,
            nSize: number
        );
        /** Retrieves the grid. */
        get grid(): TGrid | undefined;
        /** Retrieves the dispatcher type. */
        get dispatcher(): IDispatcherConstructor<Parent, T, Hooks>;
        /** Returns a reference to the parent. */
        get parent(): Parent;
        /**
         * Appends an item to the end.
         * @param pItem Reference to the item.
         * @return Returns a reference to the item.
         */
        protected appendItem(pItem: T): T;
        /**
         * Inserts an item at the begin.
         * @param pItem Reference to the item.
         * @return Returns a reference to the item.
         */
        protected insertItem(pItem: T): T;
        /**
         * Inserts an item at the specified index.
         * @param pItem Reference to the item.
         * @param nIndex Specifies the index position.
         * @return Returns a reference to the item.
         */
        protected insertItemAtIndex(pItem: T, nIndex: number): T;
        /**
         * Fired when the dimensions of the dispatcher are changed.
         * @param pEvent Specifies the event payload.
         * @event
         */
        protected onDimensionChange(pEvent: IDimensionChangeEvent<this>): void;
        protected onCountChange(pEvent: ICountChangeEvent<this>): void;
        /**
         * Invoked when the dispatcher dimensions are changed.
         * @event
         */
        onDimensions(): void;
        /**
         * Deserializes the supplied resources to the dispatcher.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @param pResources Reference to the resources.
         */
        deserialize(pAfterwards: Stack, ...pResources: IGridResource[]): void;
        /** Resets a dispatcher. */
        reset(): void;
        /** Destroys a dispatcher. */
        destroy(): void;
    }
    /** Nodes constructor template. */
    export interface INodesConstructor<T extends TGridNode> {
        new (
            pNodeConstructor: INodeConstructor<T>,
            pParent: TGridBranch<T> | TGridCluster<T>,
            nDimensions?: number,
            sOrientation?: "vertical" | "horizontal"
        ): GridNodes<T, THooks>;
    }
    export abstract class GridNodes<T extends TGridNode, Hooks extends THooks = void> extends Dispatcher<
        TGridBranch<TGridNode> | TGridCluster<TGridNode>,
        T,
        Hooks
    > {
        /**
         * Constructs a new `Node` dispatcher.
         * @param pNodeConstructor Reference to the `Node` constructor.
         * @param pParent Specifies the parent `Branch` or `Cluster`.
         * @param nDimensions Specifies the number of columns for vertical grids
         * or the number of rows for horizontal grids.
         * @param sOrientation Specifies the orientation of the grid.
         */
        constructor(
            pNodeConstructor: INodeConstructor<T>,
            pParent: TGridBranch<TGridNode> | TGridCluster<TGridNode>,
            nDimensions?: number,
            sOrientation?: "vertical" | "horizontal"
        );
    }
    /** Node template. */
    export type TGridNode = GridNode<THooks>;
    /** Node constructor template. */
    export interface INodeConstructor<T extends TGridNode> {
        new (pNodes: GridNodes<T, THooks>): T;
    }
    export abstract class GridNode<Hooks extends THooks = void> extends Resource<
        TGridCluster<GridNode<Hooks>> | TGridBranch<GridNode<Hooks>>,
        GridNodes<GridNode<Hooks>, THooks>,
        TDispatcher,
        Hooks
    > {
        /**
         * Constructs a new `Node` instance.
         * @param pNodes Reference to the parent `Nodes`.
         */
        constructor(pNodes: GridNodes<GridNode<Hooks>, THooks>);
    }
    /** Clusters template. */
    export type TClusters<T extends TGridNode> = GridClusters<TGridCluster<T>, T, THooks>;
    /** Clusters constructor template. */
    export interface IClustersConstructor<T extends TGridNode> {
        new (
            pClusterConstructor: IClusterConstructor<T, TGridCluster<T>>,
            pBranch: TGridBranch<T>,
            sOrientation?: "vertical" | "horizontal"
        ): TClusters<T>;
    }
    export abstract class GridClusters<
        Children extends TGridCluster<T>,
        T extends TGridNode,
        Hooks extends THooks = void
    > extends Dispatcher<GridBranch<TClusters<T>, T, THooks>, Children, Hooks> {
        /**
         * Constructs a new `Cluster` dispatcher.
         * @param pClusterConstructor Reference to the `Cluster` constructor.
         * @param pBranch Specifies the parent `Branch`.
         * @param sOrientation Specifies the orientation of the grid.
         */
        constructor(
            pClusterConstructor: IClusterConstructor<T, Children>,
            pBranch: GridBranch<TClusters<T>, T, THooks>,
            sOrientation?: "vertical" | "horizontal"
        );
    }
    /** Cluster template. */
    export type TGridCluster<T extends TGridNode> = GridCluster<GridNodes<T, THooks>, T, THooks>;
    /** Cluster constructor template. */
    export interface IClusterConstructor<T extends TGridNode, C extends TGridCluster<T>> {
        new (pClusters: TClusters<T>, pNodesConstructor: INodesConstructor<T>, pNodeConstructor: INodeConstructor<T>): C;
    }
    export abstract class GridCluster<
        Children extends GridNodes<T, THooks>,
        T extends TGridNode,
        Hooks extends THooks = void
    > extends Resource<GridBranch<TClusters<T>, T, THooks>, TClusters<T>, Children, Hooks> {
        /**
         * Constructs a new `Cluster` instance.
         * @param pClusters Reference to the parent `Clusters`.
         * @param pNodesConstructor Reference to the `Nodes` constructor.
         * @param pNodeConstructor Reference to the `Node` constructor.
         */
        constructor(pClusters: TClusters<T>, pNodesConstructor: INodesConstructor<T>, pNodeConstructor: INodeConstructor<T>);
    }
    /** Branches template. */
    export type TBranches<T extends TGridNode> = GridBranches<TGridBranch<T>, T, THooks>;
    export abstract class GridBranches<
        Children extends TGridBranch<T>,
        T extends TGridNode,
        Hooks extends THooks = void
    > extends Dispatcher<TGridCluster<T>, Children, Hooks> {
        /**
         * Constructs a new `Branch` dispatcher.
         * @param pBranchConstructor Reference to the `Branch` constructor.
         * @param pCluster Specifies the parent `Cluster`.
         */
        constructor(pBranchConstructor: IBranchConstructor<T, Children>, pCluster: TGridCluster<T>);
    }
    /** Branch template. */
    export type TGridBranch<T extends TGridNode> = GridBranch<TClusters<T>, T, THooks>;
    /** Branch constructor template. */
    export interface IBranchConstructor<T extends TGridNode, B extends TGridBranch<T>> {
        new (
            pBranches: TBranches<T>,
            pClustersConstructor: IClustersConstructor<T>,
            pClusterConstructor: IClusterConstructor<T, TGridCluster<T>>,
            pRenderer?: GridRenderer<TGrid>
        ): B;
    }
    export abstract class GridBranch<Children extends TClusters<T>, T extends TGridNode, Hooks extends THooks = void> extends Resource<
        TGridCluster<T>,
        TBranches<T>,
        Children,
        Hooks
    > {
        /**
         * Constructs a new `Branch` instance.
         * @param pBranches Reference to the parent `Branches`.
         * @param pClustersConstructor Reference to the `Clusters` constructor.
         * @param pClusterConstructor Reference to the `Cluster` constructor.
         * @param pRenderer Reference to a renderer.
         */
        constructor(
            pBranches: TBranches<T> | undefined,
            pClustersConstructor: IClustersConstructor<T>,
            pClusterConstructor: IClusterConstructor<T, TGridCluster<T>>,
            pRenderer?: GridRenderer<TGrid>
        );
    }
    export type TGrid = Grid<TClusters<TGridNode>, TGridNode, THooks>;
    export abstract class Grid<Children extends TClusters<T>, T extends TGridNode, Hooks extends THooks = void> extends GridBranch<
        Children,
        T,
        Hooks
    > {
        /**
         * Constructs a new `Grid` instance.
         * @param pClustersConstructor Reference to the `Clusters` constructor.
         * @param pClusterConstructor Reference to the `Cluster` constructor.
         * @param pRenderer Reference to a renderer.
         */
        constructor(
            pClustersConstructor: IClustersConstructor<T>,
            pClusterConstructor: IClusterConstructor<T, TGridCluster<T>>,
            pRenderer?: GridRenderer<TGrid>
        );
        /** Retrieves the overflow threshold for the grid. */
        get threshold(): number;
        /** Sets the overflow threshold for the grid. */
        set threshold(nThreshold: number);
        /**
         * Deserializes to a grid.
         * @param pGrid Contains the serialized grid.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @param sChildren Specified the data name for the child array.
         * @return Returns a reference to the instance.
         */
        deserialize(pGrid: IGridResource, pAfterwards: Stack, sChildren: string): this;
    }
    export interface IGridResizeEvent extends IHookPayload<"OnResize"> {
        /** Reference to the dispatcher. */
        readonly dispatcher: TDispatcher;
    }
}

declare module "tripetto/module/hookup" {
    import { TAny } from "tripetto/module/functional";

    export interface IHookPayload<Name extends THooks> {
        hook: {
            name: Name;
            type: TType;
        };
    }
    export type THooks = string | void;
    export type HookProps<T extends IHookPayload<THooks>> = Pick<T, Exclude<keyof T, "hook">>;
    export type THookContext = Function | {};
    export type TType = "synchronous" | "asynchronous" | "framed";
    export type TFunc<Names extends THooks, Hook extends Names, Payload extends IHookPayload<Hook> = IHookPayload<Hook>> = (
        pPayload: Payload
    ) => void;
    /**
     * Implements the hooks class.
     * @param Names Specifies the available hooks (specify using string literals).
     */
    export class Hooks<Names extends THooks> {
        /** Retrieves if the hooks buffer is enabled. */
        get isHookBufferEnabled(): boolean;

        /**
         * Register a hook.
         * @param sHook Specifies the hook name.
         * @param sType Specifies the hook type.
         * @param fnHook Specifies the hook function.
         * @param pContext Specifies the hook context.
         * @return Returns `this` to allow chaining.
         */
        hook<Hook extends Names, Payload extends IHookPayload<Hook>>(
            sHook: Hook,
            sType: TType,
            fnHook: TFunc<Names, Hook, Payload>,
            pContext?: THookContext
        ): this;
        /**
         * Register a grouped hook.
         * @param sHook Specifies the hook name.
         * @param sType Specifies the hook type.
         * @param fnHook Specifies the hook function.
         * @param pContext Specifies the hook context.
         * @return Returns `this` to allow chaining.
         */
        groupedHook<Hook extends Names, Payload extends IHookPayload<Hook>>(
            sHook: Hook,
            sType: TType,
            fnHook: TFunc<Names, Hook, Payload>,
            pContext?: THookContext
        ): this;
        /**
         * Emits a hook.
         * @param sHook Specifies the hook name.
         * @param pPayload Specifies the payload.
         * @param sMode Specifies the mode. Can be `fifo` or `lifo` (default is `fifo`).
         * @return Returns `true` if the hook is emitted.
         */
        emitHook<Hook extends Names, Payload extends IHookPayload<Hook>>(
            sHook: Hook,
            pPayload: HookProps<Payload>,
            sMode?: "fifo" | "lifo"
        ): boolean;
        /** Enables the hooks buffer. */
        bufferHooks(): void;
        /** Flushes the hooks buffer. */
        flushHooks(): void;
        /**
         * Removes a hook.
         * @param sHook Specifies the hook name.
         * @param pContextOrFunction Specifies the hook context or function to detach.
         * @return Returns `true` if the hook was found and removed.
         */
        unhook<Hook extends Names>(sHook: Hook, pContextOrFunction?: TFunc<Names, Hook> | THookContext): boolean;
        /**
         * Unhooks all hooks from the specifies context.
         * @param pContext Specifies the context.
         * @return Returns `true` if one or more hooks were found and removed for
         * the specifies context.
         */
        unhookContext(pContext: THookContext): boolean;
        /** destroys the hooks (any pending hook emits are flushed synchronous). */
        destroy(): void;
    }
    export interface IHookProperty<Name extends THooks, T extends {}, K extends keyof T> extends IHookPayload<Name> {
        /** Name of the property. */
        property: K;
        /** Value of the property. */
        value: T[K];
    }
    /**
     * Binds a hook to a property.
     * @param sHook Specifies the hook to attach.
     */
    export function hookup<T extends Hooks<TAny>, Hook extends THooks>(
        sHook: Hook
    ): (pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor) => void;
}

declare module "tripetto/module/l10n" {
    export interface IDomain {
        /** Specifies the locale (language[_territory]). */
        readonly locale: string;
        /** Specifies the language in english. */
        readonly language: string;
        /** Specifies the language in the native language. */
        readonly native: string;
    }
    export type TTranslation = {
        "": {
            readonly language?: string;
            readonly "plural-forms"?: string;
            readonly "plural-family"?: string;
        };
    } & {
        [id: string]: [null | string, ...string[]] | [null | string, [string]];
    };
    export class Translation {
        /**
         * Constructs a new domain.
         * @param pTranslation Reference to the translation data.
         */
        constructor(pTranslation: TTranslation);
        /** Retrieves the number of plurals. */
        get plurals(): number;
        /**
         * Enriches the domains with more translations.
         * @param pTranslation Reference to the translation.
         * @param bOverwrite Specifies if translations should be overwritten.
         */
        enrich(pTranslation: TTranslation, bOverwrite: boolean): void;
        /**
         * Retrieves the plural index for the supplied count.
         * @param nCount Specifies the count.
         * @return Returns the plural index.
         */
        plural(nCount: number): number;
        /**
         * Retrieves the translation for the specified message identifier or string.
         * @param sId Specifies the message identifier or string to retrieve.
         * @return Returns an array with translation strings.
         */
        translation(sId: string): [null | string, ...string[]] | [null | string, [string]] | undefined;
    }
    export const CONTEXT_SEPARATOR = "\u0004";
    export class Translations {
        /** Retrieves a list of loaded domains. */
        static get domains(): string[];
        /** Retrieves the default language. */
        static get default(): string;
        /** Sets the default domain. */
        static set default(sDomain: string);
        /** Retrieves the current domain. */
        static get current(): string;
        /** Sets the current domain. */
        static set current(sDomain: string);
        /**
         * Loads translation domains.
         * @param pTranslation Specifies the translation domains.
         * @param bMakeCurrent Specifies if the translation domain should be selected as current domain.
         * @param sMode Specifies if the translation domain needs to be enriched, overwritten or completely replaced.
         * @return Returns `true` if the domain is loaded.
         */
        static load(
            pTranslation: TTranslation | TTranslation[],
            bMakeCurrent?: boolean | "only-when-no-domain",
            sMode?: "enrich" | "overwrite" | "replace"
        ): boolean;
        /**
         * Unloads translations.
         * @param sDomain Specifies the domain to unload. If omitted all domains are unloaded.
         */
        static unload(sDomain?: string): void;
        /**
         * Verifies if the specified domain is loaded.
         * @param sDomain Specifies the language domain identifier.
         */
        static isLoaded(sDomain: string): boolean;
        /**
         * Resets all translations and activate the default domain.
         * @param sCurrent Specifies the language to reset the current domain to.
         */
        static reset(sCurrent?: string): void;
        /**
         * Translates the specified message.
         * @param sDomain Specifies the language domain identifier.
         * @param sContext Specifies the context of the message.
         * @param sId Specifies the message identifier or string to translate.
         * @param nCount Specifies the count for the plural.
         * @param bPlural Specifies if the message is a plural string.
         * @param sPluralId Specifies the plural message identifier or string to translate.
         * @param pArguments Specifies an array with string arguments which can be referenced in the context string using the percent sign
         * followed by the argument index `%n`. The first argument is referenced with `%1`.
         * @return Returns the formatted string.
         */
        static translate(
            sDomain: string,
            sContext: string,
            sId: string,
            bPlural?: boolean,
            sPluralId?: string,
            nCount?: number,
            ...pArguments: string[]
        ): string;

        /** Retrieves a list of loaded domains. */
        get domains(): string[];
        /** Retrieves the default language. */
        get default(): string;
        /** Sets the default domain. */
        set default(sDomain: string);
        /** Retrieves the current domain. */
        get current(): string;
        /** Sets the current domain. */
        set current(sDomain: string);
        /**
         * Loads translation domains.
         * @param pTranslation Specifies the translation domains.
         * @param bMakeCurrent Specifies if the translation domain should be selected as current domain.
         * @param sMode Specifies if the translation domain needs to be enriched, overwritten or completely replaced.
         * @return Returns `true` if the domain is loaded.
         */
        load(
            pTranslation: TTranslation | TTranslation[],
            bMakeCurrent: boolean | "only-when-no-domain",
            sMode: "enrich" | "overwrite" | "replace"
        ): boolean;
        /**
         * Unloads translations.
         * @param sDomain Specifies the domain to unload. If omitted all domains are unloaded.
         */
        unload(sDomain?: string): void;
        /**
         * Verifies if the specified domain is loaded.
         * @param sDomain Specifies the language domain identifier.
         */
        isLoaded(sDomain: string): boolean;
        /**
         * Resets all translations and activate the default domain.
         * @param sCurrent Specifies the language to reset the current domain to.
         */
        reset(sCurrent?: string): void;
        /**
         * Translates the specified message.
         * @param sDomain Specifies the language domain identifier.
         * @param sContext Specifies the context of the message.
         * @param sId Specifies the message identifier or string to translate.
         * @param nCount Specifies the count for the plural.
         * @param bPlural Specifies if the message is a plural string.
         * @param sPluralId Specifies the plural message identifier or string to translate.
         * @param pArguments Specifies an array with string arguments which can be referenced in the context string using the percent sign
         * followed by the argument index `%n`. The first argument is referenced with `%1`.
         * @return Returns the formatted string.
         */
        translate(
            sDomain: string,
            sContext: string,
            sId: string,
            bPlural: boolean,
            sPluralId: string,
            nCount: number,
            ...pArguments: string[]
        ): string;
    }
    /** Describes a locale string. */
    export interface ILocaleString {
        readonly full: string;
        readonly long: string;
        readonly medium: string;
        readonly short: string;
    }
    /**
     * Describes the locale formats.
     * @param T Specifies the formatting type.
     */
    export interface ILocaleFormatting<T> {
        readonly formatted: T;
        readonly nominative: T;
    }
    /** Describes a locale number. */
    export interface ILocaleNumber {
        readonly decimals: string;
        readonly grouping: string;
        readonly minus: string;
    }
    /** Describes the locale months. */
    export interface ILocaleMonths {
        readonly abbreviated: string[];
        readonly narrow: string[];
        readonly wide: string[];
    }
    /** Describes the locale days. */
    export interface ILocaleDays {
        readonly abbreviated: string[];
        readonly narrow: string[];
        readonly short: string[];
        readonly wide: string[];
    }
    /** Describes the locale time. */
    export interface ILocaleTime {
        readonly AM: string;
        readonly PM: string;
    }
    /** Describes the locale translations. */
    export interface ILocaleTranslations {
        readonly months: ILocaleFormatting<ILocaleMonths>;
        readonly days: ILocaleFormatting<ILocaleDays>;
        readonly time: ILocaleTime;
    }
    /**  Describes the locale formats. */
    export interface ILocaleFormats {
        readonly date: ILocaleString;
        readonly time: ILocaleString;
        readonly dateTime: ILocaleString;
        readonly numbers: ILocaleNumber;
    }
    /**  Describes a locale. */
    export interface ILocale {
        readonly locale: string;
        readonly domain: string;
        readonly direction: "ltr" | "rtl";
        readonly countryCode: string;
        readonly country: string;
        readonly countryNative: string;
        readonly language: string;
        readonly languageNative: string;
        readonly translations: ILocaleTranslations;
        readonly formats: ILocaleFormats;
    }
    const DEFAULTS: ILocale;
    export class Locales {
        /** Retrieves the locale information for the current locale. */
        static get locale(): ILocale;
        /** Retrieves the locale identifier string. */
        static get identifier(): string;
        /** Retrieves the domain for the current locale. */
        static get domain(): string;
        /** Retrieves the country code for the active locale. */
        static get countryCode(): string;
        /** Retrieves the country for the active locale. */
        static get country(): string;
        /** Retrieves the native country name for the active locale. */
        static get countryNative(): string;
        /** Retrieves the language for the active locale. */
        static get language(): string;
        /** Retrieves the language in the native language for the active locale. */
        static get languageNative(): string;
        /** Retrieves the text direction for the active locale. */
        static get direction(): "ltr" | "rtl";
        /** Retrieves a list of locales. */
        static get locales(): string[];
        /** Retrieves a list of domains. Each domain contains the locale, language and native language string. */
        static get domains(): IDomain[];
        /**
         * Verifies if the specified locale is loaded.
         * @param sLocale Specifies the locale identifier.
         * @return Returns `true` if the locale is loaded.
         */
        static isLoaded(sLocale: string): boolean;
        /**
         * Loads the specified locale profiles.
         * @param pLocale Specifies the locale profile (multiple profiles can be supplied).
         * @param bSelect Specifies if the locale needs to be selected as active
         * locale (default is `true`, but only when a single locale is supplied).
         * @return Returns `true` if the locale data is loaded.
         */
        static load(pLocale: ILocale | ILocale[], bSelect?: boolean): boolean;
        /**
         * Retrieves the specified locale (or the current locale if no locale identifier is specified).
         * @param sLocale Specifies the locale identifier.
         * @return Returns the locale.
         */
        static get(sLocale?: string): ILocale;
        /**
         * Sets the current locale.
         * @param sLocale Specifies the locale identifier.
         * @return Returns `true` if the locale is set.
         */
        static set(sLocale: string): boolean;
        /**
         * Tries to find the most significant domain (ignoring case).
         * @param sDomain Specifies the domain.
         * @return Returns the domain string.
         */
        static findDomain(sDomain: string | undefined): string;
        /**
         * Retrieves domain information for the specified locale (or the current locale if no locale identifier is specified).
         * @param sLocale Specifies the locale identifier.
         * @return Returns the locale.
         */
        static getDomain(sLocale?: string): IDomain;
        /**
         * Formats a number by inserting thousands and decimal separators while taking rounding into account.
         * @param nValue Input value as a number or string.
         * @param nPrecision Specifies the precision (set it to `auto` to allow floating point numbers with automatic precision detection).
         * @param bThousands Specifies if thousands separators should be inserted.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted number as a string.
         */
        static number(nValue: number | string, nPrecision?: number | "auto", bThousands?: boolean, sLocale?: string): string;
        /**
         * Formats a date/time string.
         * @param sFormat Specifies the format to use, using the CLDR date/time formatting style. The following variables are available:
         * - `y` / `yyyy`: Specifies the full 4-digit year;
         * - `yy`: Specifies the 2-digit year;
         * - `M`: Specifies the month number;
         * - `MM`: Specifies the month number with a minimum of 2 digits;
         * - `MMM`: Specifies the month as an abbreviated string (e.g. `Jan`);
         * - `MMMM`: Specifies the month as a full string (e.g. `January`);
         * - `MMMMM`: Specifies the month as a narrow (e.g. `J`);
         * - `LLL`: Specifies the month as an abbreviated nominative string (e.g. `Jan`);
         * - `LLLL`: Specifies the month as a full nominative string (e.g. `January`);
         * - `LLLLL`: Specifies the month as a narrow nominative string (e.g. `J`);
         * - `d`: Specifies the day of the month;
         * - `dd`: Specifies the day of the month with a minimum of 2 digits;
         * - `E`: Specifies the day of the week;
         * - `EE`: Specifies the day of the week as a string (e.g. `Su`);
         * - `EEE`: Specifies the day of the week as an abbreviated string (e.g. `Sun`);
         * - `EEEE`: Specifies the day of the week as a full string (e.g. `Sunday`);
         * - `EEEEE`: Specifies the day of the week as a narrow string (e.g. `S`);
         * - `cc`: Specifies the day of the week as a nominative string (e.g. `Su`);
         * - `ccc`: Specifies the day of the week as an abbreviated nominative string  (e.g. `Sun`);
         * - `cccc`: Specifies the day of the week as a full nominative string (e.g. `Sunday`);
         * - `ccccc`: Specifies the day of the week as a narrow nominative string (e.g. `S`);
         * - `H`: Specifies the number of hours in 24-hour format;
         * - `HH`: Specifies the number of hours in 24-hour format  with a minimum of 2 digits;
         * - `h`: Specifies the number of hours in 12-hour format;
         * - `hh`: Specifies the number of hours in 12-hour format  with a minimum of 2 digits;
         * - `a`: Specifies the `AM` or `PM` hour suffix;
         * - `m`: Specifies the number of minutes;
         * - `mm`: Specifies the number of minutes with a minimum of 2 digits;
         * - `s`: Specifies the number of seconds;
         * - `ss`: Specifies the number of seconds with a minimum of 2 digits;
         * - `S`: Specifies the number of milliseconds;
         * - `SSS`: Specifies the number of milliseconds with a minimum of 3 digits.
         * @param nTime Specifies the date/time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted date string.
         * @see http://cldr.unicode.org/translation/date-time
         */
        static dateTime(sFormat: string, nTime?: number, bUTC?: boolean, sLocale?: string): string;
        /**
         * Formats a full date string.
         * @param nTime Specifies the date to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted date string.
         */
        static dateFull(nTime?: number, bUTC?: boolean, sLocale?: string): string;
        /**
         * Formats a long date string.
         * @param nTime Specifies the date to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted date string.
         */
        static dateLong(nTime?: number, bUTC?: boolean, sLocale?: string): string;
        /**
         * Formats a medium date string.
         * @param nTime Specifies the date to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted date string.
         */
        static dateMedium(nTime?: number, bUTC?: boolean, sLocale?: string): string;
        /**
         * Formats a short date string.
         * @param nTime Specifies the date to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted date string.
         */
        static dateShort(nTime?: number, bUTC?: boolean, sLocale?: string): string;
        /**
         * Formats a full time string.
         * @param nTime Specifies the time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted time string.
         */
        static timeFull(nTime?: number, bUTC?: boolean, sLocale?: string): string;
        /**
         * Formats a long time string.
         * @param nTime Specifies the time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted time string.
         */
        static timeLong(nTime?: number, bUTC?: boolean, sLocale?: string): string;
        /**
         * Formats a medium time string.
         * @param nTime Specifies the time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted time string.
         */
        static timeMedium(nTime?: number, bUTC?: boolean, sLocale?: string): string;
        /**
         * Formats a short time string.
         * @param nTime Specifies the time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted time string.
         */
        static timeShort(nTime?: number, bUTC?: boolean, sLocale?: string): string;
        /**
         * Formats a full date/time string.
         * @param nTime Specifies the date/time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted date/time string.
         */
        static dateTimeFull(nTime?: number, bUTC?: boolean, sLocale?: string): string;
        /**
         * Formats a long date/time string.
         * @param nTime Specifies the date/time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted date/time string.
         */
        static dateTimeLong(nTime?: number, bUTC?: boolean, sLocale?: string): string;
        /**
         * Formats a medium date/time string.
         * @param nTime Specifies the date/time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted date/time string.
         */
        static dateTimeMedium(nTime?: number, bUTC?: boolean, sLocale?: string): string;
        /**
         * Formats a short date/time string.
         * @param nTime Specifies the date/time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted date/time string.
         */
        static dateTimeShort(nTime?: number, bUTC?: boolean, sLocale?: string): string;
        /** Retrieves the locale information for the current locale. */
        get locale(): ILocale;
        /** Retrieves the locale identifier string. */
        get identifier(): string;
        /** Retrieves the domain for the current locale. */
        get domain(): string;
        /** Retrieves the country code for the active locale. */
        get countryCode(): string;
        /** Retrieves the country for the active locale. */
        get country(): string;
        /** Retrieves the native country name for the active locale. */
        get countryNative(): string;
        /** Retrieves the language for the active locale. */
        get language(): string;
        /** Retrieves the language in the native language for the active locale. */
        get languageNative(): string;
        /** Retrieves the text direction. */
        get direction(): "ltr" | "rtl";
        /**
         * Loads the specified locale profile and activates it.
         * @param pLocale Specifies the locale profile.
         * @return Returns `true` if the locale data is loaded.
         */
        load(pLocale: ILocale): boolean;
        /**
         * Sets the current locale.
         * @param sLocale Specifies the locale identifier.
         * @return Returns `true` if the locale is set.
         */
        set(sLocale: string): boolean;
        /**
         * Formats a number by inserting thousands and decimal separators while taking rounding into account.
         * @param nValue Input value as a number or string.
         * @param nPrecision Specifies the precision (set it to `auto` to allow floating point numbers with automatic precision detection).
         * @param bThousands Specifies if thousands separators should be inserted.
         * @return Returns the formatted number as a string.
         */
        number(nValue: number | string, nPrecision?: number | "auto", bThousands?: boolean): string;
        /**
         * Formats a date/time string.
         * @param sFormat Specifies the format to use, using the CLDR date/time formatting style. The following variables are available:
         * - `y` / `yyyy`: Specifies the full 4-digit year;
         * - `yy`: Specifies the 2-digit year;
         * - `M`: Specifies the month number;
         * - `MM`: Specifies the month number with a minimum of 2 digits;
         * - `MMM`: Specifies the month as an abbreviated string (e.g. `Jan`);
         * - `MMMM`: Specifies the month as a full string (e.g. `January`);
         * - `MMMMM`: Specifies the month as a narrow (e.g. `J`);
         * - `LLL`: Specifies the month as an abbreviated nominative string (e.g. `Jan`);
         * - `LLLL`: Specifies the month as a full nominative string (e.g. `January`);
         * - `LLLLL`: Specifies the month as a narrow nominative string (e.g. `J`);
         * - `d`: Specifies the day of the month;
         * - `dd`: Specifies the day of the month with a minimum of 2 digits;
         * - `E`: Specifies the day of the week;
         * - `EE`: Specifies the day of the week as a string (e.g. `Su`);
         * - `EEE`: Specifies the day of the week as an abbreviated string (e.g. `Sun`);
         * - `EEEE`: Specifies the day of the week as a full string (e.g. `Sunday`);
         * - `EEEEE`: Specifies the day of the week as a narrow string (e.g. `S`);
         * - `cc`: Specifies the day of the week as a nominative string (e.g. `Su`);
         * - `ccc`: Specifies the day of the week as an abbreviated nominative string  (e.g. `Sun`);
         * - `cccc`: Specifies the day of the week as a full nominative string (e.g. `Sunday`);
         * - `ccccc`: Specifies the day of the week as a narrow nominative string (e.g. `S`);
         * - `H`: Specifies the number of hours in 24-hour format;
         * - `HH`: Specifies the number of hours in 24-hour format  with a minimum of 2 digits;
         * - `h`: Specifies the number of hours in 12-hour format;
         * - `hh`: Specifies the number of hours in 12-hour format  with a minimum of 2 digits;
         * - `a`: Specifies the `AM` or `PM` hour suffix;
         * - `m`: Specifies the number of minutes;
         * - `mm`: Specifies the number of minutes with a minimum of 2 digits;
         * - `s`: Specifies the number of seconds;
         * - `ss`: Specifies the number of seconds with a minimum of 2 digits;
         * - `S`: Specifies the number of milliseconds;
         * - `SSS`: Specifies the number of milliseconds with a minimum of 3 digits.
         * @param nTime Specifies the date/time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @return Returns the formatted date string.
         * @see http://cldr.unicode.org/translation/date-time
         */
        dateTime(sFormat: string, nTime?: number, bUTC?: boolean): string;
        /**
         * Formats a full date string.
         * @param nTime Specifies the date to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @return Returns the formatted date string.
         */
        dateFull(nTime?: number, bUTC?: boolean): string;
        /**
         * Formats a long date string.
         * @param nTime Specifies the date to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted date string.
         */
        dateLong(nTime?: number, bUTC?: boolean): string;
        /**
         * Formats a medium date string.
         * @param nTime Specifies the date to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted date string.
         */
        dateMedium(nTime?: number, bUTC?: boolean): string;
        /**
         * Formats a short date string.
         * @param nTime Specifies the date to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted date string.
         */
        dateShort(nTime?: number, bUTC?: boolean): string;
        /**
         * Formats a full time string.
         * @param nTime Specifies the time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted time string.
         */
        timeFull(nTime?: number, bUTC?: boolean): string;
        /**
         * Formats a long time string.
         * @param nTime Specifies the time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted time string.
         */
        timeLong(nTime?: number, bUTC?: boolean): string;
        /**
         * Formats a medium time string.
         * @param nTime Specifies the time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted time string.
         */
        timeMedium(nTime?: number, bUTC?: boolean): string;
        /**
         * Formats a short time string.
         * @param nTime Specifies the time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted time string.
         */
        timeShort(nTime?: number, bUTC?: boolean): string;
        /**
         * Formats a full date/time string.
         * @param nTime Specifies the date/time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted date/time string.
         */
        dateTimeFull(nTime?: number, bUTC?: boolean): string;
        /**
         * Formats a long date/time string.
         * @param nTime Specifies the date/time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted date/time string.
         */
        dateTimeLong(nTime?: number, bUTC?: boolean): string;
        /**
         * Formats a medium date/time string.
         * @param nTime Specifies the date/time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted date/time string.
         */
        dateTimeMedium(nTime?: number, bUTC?: boolean): string;
        /**
         * Formats a short date/time string.
         * @param nTime Specifies the date/time to format. If this value is not specified `Now` will be used.
         * @param bUTC Specifies if the UTC time needs to be used.
         * @param sLocale Specifies the locale to use.
         * @return Returns the formatted date/time string.
         */
        dateTimeShort(nTime?: number, bUTC?: boolean): string;
    }
    /**
     * # L10n
     *
     * This module contains the localization functions. This is based on the GNU `gettext` approach (https://www.gnu.org/software/gettext/).
     *
     * ## Examples
     *
     * ```typescript
     * // Translate plain text
     * gettext('Lorem ipsum dolor sit amet');
     *
     * // Translate plain text with shorthand
     * _('Lorem ipsum dolor sit amet');
     *
     * // Translate text with arguments
     * gettext('Hello %1', 'there');
     * _('Hello %1', 'there');
     *
     * // Plural forms
     * ngettext('1 user', '%1 users', 2);
     * _n('1 user', '%1 users', 2);
     * ```
     */
    /**
     * Translates a string using the default language.
     * @param sId Specifies the message identifier or string to translate.
     * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
     * the argument index `%n`. The first argument is referenced with `%1`.
     * @return Returns the translated string.
     */
    export function gettext(sId: string, ...pArguments: string[]): string;
    /**
     * Translates a string using the specified language domain.
     * @param sDomain Specifies the language domain identifier.
     * @param sId Specifies the message identifier or string to translate.
     * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
     * the argument index `%n`. The first argument is referenced with `%1`.
     * @return Returns the translated string.
     */
    export function dgettext(sDomain: string, sId: string, ...pArguments: string[]): string;
    /**
     * Translates a plural string using the default language.
     * @param sId Specifies the message identifier or string to translate.
     * @param sPluralId Specifies the plural message identifier or string to translate.
     * @param nCount Specifies the count for the plural.
     * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
     * the argument index `%n`. The count value `nCount` is automatically included as the first argument (`%1`).
     * @return Returns the translated string.
     */
    export function ngettext(sId: string, sPluralId: string, nCount: number, ...pArguments: string[]): string;
    /**
     * Translates a plural string using the specified language domain.
     * @param sDomain Specifies the language domain identifier.
     * @param sId Specifies the message identifier or string to translate.
     * @param sPluralId Specifies the plural message identifier or string to translate.
     * @param nCount Specifies the count for the plural.
     * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
     * the argument index `%n`. The count value `nCount` is automatically included as the first argument (`%1`).
     * @return Returns the translated string.
     */
    export function dngettext(sDomain: string, sId: string, sPluralId: string, nCount: number, ...pArguments: string[]): string;
    /**
     * Translates a string from a specific context using the default language.
     * @param sContext Specifies the translation context.
     * @param sId Specifies the message identifier or string to translate.
     * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
     * the argument index `%n`. The first argument is referenced with `%1`.
     * @return Returns the translated string.
     */
    export function pgettext(sContext: string, sId: string, ...pArguments: string[]): string;
    /**
     * Translates a string from a specific context using the specified language domain.
     * @param sDomain Specifies the language domain identifier.
     * @param sContext Specifies the translation context.
     * @param sId Specifies the message identifier or string to translate.
     * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
     * the argument index `%n`. The first argument is referenced with `%1`.
     * @return Returns the translated string.
     */
    export function dpgettext(sDomain: string, sContext: string, sId: string, ...pArguments: string[]): string;
    /**
     * Translates a plural string using the default language.
     * @param sContext Specifies the translation context.
     * @param sId Specifies the message identifier or string to translate.
     * @param sPluralId Specifies the plural message identifier or string to translate.
     * @param nCount Specifies the count for the plural.
     * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
     * the argument index `%n`. The count value `nCount` is automatically included as the first argument (`%1`).
     * @return Returns the translated string.
     */
    export function npgettext(sContext: string, sId: string, sPluralId: string, nCount: number, ...pArguments: string[]): string;
    /**
     * Translates a plural string using the specified language domain.
     * @param sDomain Specifies the language domain identifier.
     * @param sContext Specifies the translation context.
     * @param sId Specifies the message identifier or string to translate.
     * @param sPluralId Specifies the plural message identifier or string to translate.
     * @param nCount Specifies the count for the plural.
     * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
     * the argument index `%n`. The count value `nCount` is automatically included as the first argument (`%1`).
     * @return Returns the translated string.
     */
    export function dnpgettext(
        sDomain: string,
        sContext: string,
        sId: string,
        sPluralId: string,
        nCount: number,
        ...pArguments: string[]
    ): string;
    /**
     * Translates a string using the default language (short version for `gettext`).
     * @param sId Specifies the message identifier or string to translate.
     * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
     * the argument index `%n`. The first argument is referenced with `%1`.
     * @return Returns the translated string.
     */
    export function _(sId: string, ...pArguments: string[]): string;
    /**
     * Translates a plural string using the default language (short version for `ngettext`).
     * @param sId Specifies the message identifier or string to translate.
     * @param sPluralId Specifies the plural message identifier or string to translate.
     * @param nCount Specifies the count for the plural.
     * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed
     * by the argument index `%n`. The count value `nCount` is automatically included as the first argument (`%1`).
     * @return Returns the translated string.
     */
    export function _n(sId: string, sPluralId: string, nCount: number, ...pArguments: string[]): string;
    export interface IPlural {
        readonly rules: string[];
        readonly expression: string;
        readonly locales: string[];
        readonly fn: (n: number) => number;
    }
    export interface IPluralRule extends IPlural {
        readonly family: string;
    }
    export class Plurals {
        /** Retrieves a list of plural rules. */
        static get rules(): IPluralRule[];
        /** Retrieves a list of locals with their plural rules. */
        static get locales(): {
            [locale: string]: IPluralRule | undefined;
        };
        /**
         * Retrieves the plural for the specified locale.
         * @param locale Specifies the local (if omitted the current locale will be used).
         * @return Returns the plural information or `undefined` if not found.
         */
        static getForLocale(locale?: string): IPluralRule | undefined;
        /**
         * Retrieves the plural for the specified family.
         * @param family Specifies the family.
         * @return Returns the plural information or `undefined` if not found.
         */
        static getForFamily(family: string): IPluralRule | undefined;
        static getForExpression(expression: string): IPluralRule | undefined;
    }
    export class Namespace {
        /** Retrieves the global namespace (using the global translation and locale). */
        static get global(): Namespace;
        /** Creates a namespace with the specified identifier. */
        static create(identifier: string): Namespace;
        /** Retrieves a translation namespace with a global locale. */
        static translation(identifier: string): Namespace;

        /** Retrieves a reference to the locale instance. */
        get locale(): typeof Locales | Locales;
        /** Retrieves the default translation domain. */
        get default(): string;
        /** Sets the default translation domain. */
        set default(d: string);
        /** Retrieves the current translation domain. */
        get current(): string;
        /** Sets the current translation domain. */
        set current(c: string);
        /** Retrieves a list of loaded domains. */
        get domains(): string[];
        /**
         * Loads translation domains.
         * @param pTranslation Specifies the translation domains.
         * @param bMakeCurrent Specifies if the translation domain should be selected as current domain.
         * @param sMode Specifies if the translation domain needs to be enriched, overwritten or completely replaced.
         * @return Returns `true` if the domain is loaded.
         */
        get load(): (
            pTranslation: TTranslation | TTranslation[],
            bMakeCurrent?: boolean | "only-when-no-domain",
            sMode?: "enrich" | "overwrite" | "replace"
        ) => boolean;
        /**
         * Unloads translations.
         * @param sDomain Specifies the domain to unload. If omitted all domains are unloaded.
         */
        get unload(): (sDomain?: string) => void;
        /**
         * Verifies if the specified domain is loaded.
         * @param sDomain Specifies the language domain identifier.
         */
        get isLoaded(): (sDomain: string) => boolean;
        /**
         * Resets all translations and activate the default domain.
         * @param sCurrent Specifies the language to reset the current domain to.
         */
        get reset(): (sCurrent?: string) => void;
        /**
         * Translates a string using the default language.
         * @param sId Specifies the message identifier or string to translate.
         * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
         * the argument index `%n`. The first argument is referenced with `%1`.
         * @return Returns the translated string.
         */
        get gettext(): (sId: string, ...pArguments: string[]) => string;
        /**
         * Translates a string using the specified language domain.
         * @param sDomain Specifies the language domain identifier.
         * @param sId Specifies the message identifier or string to translate.
         * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
         * the argument index `%n`. The first argument is referenced with `%1`.
         * @return Returns the translated string.
         */
        get dgettext(): (sDomain: string, sId: string, ...pArguments: string[]) => string;
        /**
         * Translates a plural string using the default language.
         * @param sId Specifies the message identifier or string to translate.
         * @param sPluralId Specifies the plural message identifier or string to translate.
         * @param nCount Specifies the count for the plural.
         * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
         * the argument index `%n`. The count value `nCount` is automatically included as the first argument (`%1`).
         * @return Returns the translated string.
         */
        get ngettext(): (sId: string, sPluralId: string, nCount: number, ...pArguments: string[]) => string;
        /**
         * Translates a plural string using the specified language domain.
         * @param sDomain Specifies the language domain identifier.
         * @param sId Specifies the message identifier or string to translate.
         * @param sPluralId Specifies the plural message identifier or string to translate.
         * @param nCount Specifies the count for the plural.
         * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
         * the argument index `%n`. The count value `nCount` is automatically included as the first argument (`%1`).
         * @return Returns the translated string.
         */
        get dngettext(): (sDomain: string, sId: string, sPluralId: string, nCount: number, ...pArguments: string[]) => string;
        /**
         * Translates a string from a specific context using the default language.
         * @param sContext Specifies the translation context.
         * @param sId Specifies the message identifier or string to translate.
         * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
         * the argument index `%n`. The first argument is referenced with `%1`.
         * @return Returns the translated string.
         */
        get pgettext(): (sContext: string, sId: string, ...pArguments: string[]) => string;
        /**
         * Translates a string from a specific context using the specified language domain.
         * @param sDomain Specifies the language domain identifier.
         * @param sContext Specifies the translation context.
         * @param sId Specifies the message identifier or string to translate.
         * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
         * the argument index `%n`. The first argument is referenced with `%1`.
         * @return Returns the translated string.
         */
        get dpgettext(): (sDomain: string, sContext: string, sId: string, ...pArguments: string[]) => string;
        /**
         * Translates a plural string using the default language.
         * @param sContext Specifies the translation context.
         * @param sId Specifies the message identifier or string to translate.
         * @param sPluralId Specifies the plural message identifier or string to translate.
         * @param nCount Specifies the count for the plural.
         * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
         * the argument index `%n`. The count value `nCount` is automatically included as the first argument (`%1`).
         * @return Returns the translated string.
         */
        get npgettext(): (sContext: string, sId: string, sPluralId: string, nCount: number, ...pArguments: string[]) => string;
        /**
         * Translates a plural string using the specified language domain.
         * @param sDomain Specifies the language domain identifier.
         * @param sContext Specifies the translation context.
         * @param sId Specifies the message identifier or string to translate.
         * @param sPluralId Specifies the plural message identifier or string to translate.
         * @param nCount Specifies the count for the plural.
         * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
         * the argument index `%n`. The count value `nCount` is automatically included as the first argument (`%1`).
         * @return Returns the translated string.
         */
        get dnpgettext(): (
            sDomain: string,
            sContext: string,
            sId: string,
            sPluralId: string,
            nCount: number,
            ...pArguments: string[]
        ) => string;
        /**
         * Translates a string using the default language (short version for `gettext`).
         * @param sId Specifies the message identifier or string to translate.
         * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed by
         * the argument index `%n`. The first argument is referenced with `%1`.
         * @return Returns the translated string.
         */
        get _(): (sId: string, ...pArguments: string[]) => string;
        /**
         * Translates a plural string using the default language (short version for `ngettext`).
         * @param sId Specifies the message identifier or string to translate.
         * @param sPluralId Specifies the plural message identifier or string to translate.
         * @param nCount Specifies the count for the plural.
         * @param pArguments Optional string arguments which can be referenced in the translation string using the percent sign followed
         * by the argument index `%n`. The count value `nCount` is automatically included as the first argument (`%1`).
         * @return Returns the translated string.
         */
        get _n(): (sId: string, sPluralId: string, nCount: number, ...pArguments: string[]) => string;
    }

    export { DEFAULTS as LOCALE_DEFAULTS, Translations as Domain };
}

declare module "tripetto/module/markdown" {
    export type MarkdownTypes =
        | "paragraph"
        | "break"
        | "bold"
        | "italic"
        | "bold+italic"
        | "underline"
        | "strikethrough"
        | "code"
        | "hyperlink"
        | "image"
        | "h1"
        | "h2"
        | "h3"
        | "h4"
        | "h5"
        | "h6"
        | "codeblock"
        | "codeline"
        | "quote"
        | "mention"
        | "reference";
    export enum MarkdownFeatures {
        /** Disable all features. */
        None = 0,
        /** Allow basic formatting like bold, italic, underline and strikethrough. */
        Formatting = 1,
        /** Allow the use of paragraphs (necessary for the `Headings`, `Quotes` or `Code` features). */
        Paragraphs = 2,
        /** Allow inline breaks. */
        Breaks = 4,
        /** Allow hyperlinks. */
        Hyperlinks = 8,
        /** Allow headings. */
        Headings = 16,
        /** Allow block quotes. */
        Blockquotes = 32,
        /** Allow code blocks. */
        Code = 64,
        /** Allows inline code. */
        InlineCode = 128,
        /** Allow embedding of images. */
        Images = 256,
        /** All features. */
        All = 511,
    }
    export interface IMarkdownRef<T> {
        ref: T;
        string: string;
    }
    export interface IMarkdownBufferParser<T> {
        /**
         * The parser function.
         * @param sBuffer Contains the buffer.
         * @param nIndex Specifies the index of the buffer.
         * @return Should return an object with the following properties:
         * - `shift`: Specifies the number of characters to shift the input buffer;
         * - `markdown`: Specifies the markdown string that is pushed to the AST (optional);
         * - `text`: Specifies the text string that is pused to the AST when no
         * markdown string is supplied (optional);
         * - `value`: Specifies the value that is pushed to the AST (optional).
         * Or return `undefined` to skip the parser.
         */
        parser: (
            sBuffer: string,
            nIndex: number
        ) =>
            | {
                  shift: number;
                  markdown?: string;
                  text?: string;
                  value?: T | IMarkdownRef<T>;
              }
            | undefined;
        /**
         * Requested number of chars from the buffer. If you omit this property,
         * the complete buffer is supplied to the parser function.
         */
        numberOfChars?: number;
    }
    export interface IMarkdownOptions<T> {
        /** Specifies the parser features. */
        features?: MarkdownFeatures;
        /** Specifies a `@`-mention parser. */
        mentions?: IMarkdownBufferParser<T>;
        /** Specifies a `#`-reference parser. */
        references?: IMarkdownBufferParser<T>;
        /** Specifies a stop word for the parser. Parsing stops when the word is found. */
        stopWord?: string;
    }
    export interface IMarkdown<T> {
        content: string | IMarkdownNode<T> | IMarkdownNode<T>[];
        type?: MarkdownTypes;
        value?: string | T | IMarkdownRef<T>;
    }
    export interface IMarkdownNode<T> extends IMarkdown<T> {
        parent?: IMarkdownNode<T>;
    }
    export class MarkdownParser<T = undefined> {
        /**
         * Parses the supplied markdown string and returns a markdown parser instance.
         * @param sMarkdown Specifies the markdown string to parse.
         * @param pOptions Specifies options for the markdown parser.
         * @return Returns a markdown parser instance.
         */
        static parse<T = undefined>(sMarkdown: string, pOptions?: IMarkdownOptions<T>): MarkdownParser<T>;
        /**
         * Creates a new markdown parser instance.
         * @param sMarkdown Specifies the markdown string to parse.
         * @param pOptions Specifies options for the markdown parser.
         */
        constructor(sMarkdown: string, pOptions?: IMarkdownOptions<T>);
        /** Contains the enabled features. */
        get features(): MarkdownFeatures;
        /** Retrieves a reference to the AST. */
        get abstractSyntaxTree(): IMarkdown<T>;
        /** Retrieves the plain text without markdown formatting. */
        get text(): string;
        /** Retrieves if a mention with a value is parsed. */
        get hasMentions(): boolean;
        /** Retrieves if a reference with a value is parsed. */
        get hasReferences(): boolean;

        /**
         * Maps the markdown AST to a structure.
         * @param fnMap Specifies the map function.
         * @return Returns the ancestor of the map structure.
         */
        map<R>(
            fnMap: (
                sType: MarkdownTypes | undefined,
                sContent: string,
                pValue: string | T | undefined,
                pParent: R | undefined,
                sKind: "root" | "text" | "node"
            ) => R
        ): R;
        /**
         * Reduces the markdown AST.
         * @param fnReduce Specifies the reduce function.
         * @returns Returns the reduced value.
         */
        reduce<R>(fnReduce: (sType: MarkdownTypes | undefined, pContent: string | R[], pValue: string | T | undefined) => R): R;
    }
}

declare module "tripetto/module/matrix" {
    import { Enumerator } from "tripetto/module/functional";
    import { HookProps, Hooks, IHookPayload, THooks } from "tripetto/module/hookup";

    export interface ICursor {
        /** Specifies the current column of the cursor. */
        column?: number;
        /** Specifies the current row of the cursor. */
        row?: number;
        /** Specifies the current index of the cursor. */
        index?: number;
    }
    export interface ISafeCursor {
        /** Specifies the current column of the cursor. */
        column: number;
        /** Specifies the current row of the cursor. */
        row: number;
        /** Specifies the current index of the cursor. */
        index: number;
    }
    export interface IDispatch<Hook extends THooks, T extends IHookPayload<Hook>> {
        hook: Hook;
        payload: HookProps<T>;
    }
    export const enum Reasons {
        /** A new item is pushed to the matrix. */
        Push = 1,
        /** An item is popped from the matrix. */
        Pop = 2,
        /** An item is moved to another position in the matrix. */
        Move = 4,
        /** An item is swapped. */
        Swap = 8,
        /** The matrix is sorted. */
        Sort = 16,
        /** A matrix recalculation occurred. */
        Recalculation = 32,
        /** An item has become the last item or the predecessor of the last item. */
        Last = 64,
        /** An item has become the first item or the successor of the first item. */
        First = 128,
    }
    /** Defines the matrix hooks. */
    export type TMatrixHooks = "OnDimensionChange" | "OnCountChange" | "OnCursorChange" | "OnItemPush" | "OnItemChange" | "OnItemPop";
    /** Defines the item hooks. */
    export type TItemHooks = "OnItemPush" | "OnItemChange" | "OnItemPop";
    /** Defines the `DimensionChange` event. */
    export interface IDimensionChangeEvent<T extends Matrix<Item<THooks>, THooks>> extends IHookPayload<"OnDimensionChange"> {
        /** Reference to the matrix. */
        readonly matrix: T;
        /** Specifies the matrix volume difference since the last event. */
        readonly difference: number;
        /** Specifies the number of columns. */
        readonly columns: number;
        /** Specifies the number of rows. */
        readonly rows: number;
        /** Specifies the reason for the change. */
        readonly reason: Reasons;
    }
    /** Defines the `CountChange` event. */
    export interface ICountChangeEvent<T extends Matrix<Item<THooks>, THooks>> extends IHookPayload<"OnCountChange"> {
        /** Reference to the matrix. */
        readonly matrix: T;
        /** Specifies the matrix count. */
        readonly count: number;
        /** Specifies the matrix count difference since the last event. */
        readonly difference: number;
        /** Specifies the reason for the change. */
        readonly reason: Reasons;
    }
    /** Defines the `Item` event which is the base event for `IItemPushEvent` and `IItemChangeEvent`. */
    export interface IItemEvent<H extends THooks, T extends Item<THooks>> extends IHookPayload<H> {
        /** Reference to the current matrix. */
        readonly matrix: Matrix<T, THooks>;
        /** Reference to the previous matrix. */
        readonly matrixPrevious: Matrix<T, THooks> | undefined;
        /** Reference to the item. */
        readonly item: T;
        /** Specifies the reason for the push. */
        readonly reason: Reasons;
    }
    /** Defines the `ItemPush` event. */
    export interface IItemPushEvent<T extends Item<THooks>> extends IItemEvent<"OnItemPush", T> {}
    /** Defines the `ItemChange` event. */
    export interface IItemChangeEvent<T extends Item<THooks>> extends IItemEvent<"OnItemChange", T> {}
    /** Defines the `ItemPop` event. */
    export interface IItemPopEvent<T extends Item<THooks>> extends IHookPayload<"OnItemPop"> {
        /** Reference to the matrix. */
        readonly matrix: Matrix<T, THooks>;
        /** Reference to the item. */
        readonly item: T;
    }
    /** Defines the `CursorChange` event. */
    export interface ICursorChangeEvent<T extends Matrix<Item<THooks>, THooks>> extends IHookPayload<"OnCursorChange"> {
        /** Reference to the matrix. */
        readonly matrix: T;
        /** Contains the cursor position. */
        readonly cursor: ICursor;
    }
    class Stack {
        /**
         * Pushes a call to the stack.
         * @param fnCall Specifies the call.
         */
        push(fnCall: () => void): void;
        /** Flushes the stack. */
        flush(): void;
    }
    /**
     * Implements the matrix item.
     * @param H Specifies custom hooks for the matrix (optional).
     */
    export abstract class Item<H extends THooks = void> extends Hooks<TItemHooks | H> {
        /** Contains the id enumerator. */
        static readonly enumerator: Enumerator;

        /**
         * Pushes an item to the supplied matrix.
         * @param pItem Reference to the item.
         * @param pMatrix Reference to the matrix to push the item to. If omitted
         * the current matrix of the item will be used.
         * @return Returns a reference to the item.
         */
        static pushToMatrix<T extends Item<THooks>>(pItem: T, pMatrix?: Matrix<T, THooks>): T;
        /**
         * Creates a new item.
         * @param pMatrix Optional reference to the matrix.
         */
        constructor(pMatrix?: Matrix<Item<H>, THooks>);
        /** Retrieves a reference to the underlying matrix. */
        get parent(): Matrix<Item<H>, THooks> | undefined;
        /** Specifies the unique id of the item. The id is unique within the current session. */
        get uniqueId(): number;
        /** Returns a (SHA2-256) hash for the item. The hash is unique within the current session. */
        get hash(): string;
        /** Overrides the automatic calculated hash value for the item. */
        set hash(sHash: string);
        /** Retrieves the index of the item (first item is zero). */
        get index(): number;
        /** Sets the index of the item (first item is zero). */
        set index(nIndex: number);
        /** Returns the column index of the item in the matrix (first column is zero). */
        get columnIndex(): number;
        /** Returns the row index of the item in the matrix (first row is zero). */
        get rowIndex(): number;
        /** Retrieves if the item is popped (not in the matrix). */
        get isPopped(): boolean;
        /** Specifies if the item is the first item in the column or row. */
        get isFirst(): boolean;
        /** Specifies if the item is the last item in the column or row. */
        get isLast(): boolean;
        /** Specifies if the item is the first item in the column. */
        get isFirstColumn(): boolean;
        /** Specifies if the item is the last item in the column. */
        get isLastColumn(): boolean;
        /** Specifies if the item is the first item in the row. */
        get isFirstRow(): boolean;
        /** Specifies if the item is the last item in the row. */
        get isLastRow(): boolean;
        /** Specifies if the item is the first item in the matrix. */
        get isFirstOfMatrix(): boolean;
        /** Specifies if the item is the last item in the matrix. */
        get isLastOfMatrix(): boolean;
        /** Retrieves the previous sibling of the item. */
        get predecessorSibling(): Item<H> | undefined;
        /** Retrieves the next sibling of the item. */
        get successorSibling(): Item<H> | undefined;
        /** Retrieves the previous item in the same column. */
        get predecessorInColumn(): Item<H> | undefined;
        /** Retrieves the next item in the same column. */
        get successorInColumn(): Item<H> | undefined;
        /** Retrieves the previous item in the same row. */
        get predecessorInRow(): Item<H> | undefined;
        /** Retrieves the next item in the same row. */
        get successorInRow(): Item<H> | undefined;
        /**
         * Retrieves a reference to the underlying matrix.
         * @return Returns a reference to the matrix.
         */
        protected matrix(): Matrix<Item<H>, THooks> | undefined;
        /**
         * Fired when the item is pushed.
         * @param pEvent Specifies the event payload.
         * @event
         */
        protected onPush(pEvent: HookProps<IItemPushEvent<Item<H>>>): void;
        /**
         * Fired when the item is changed.
         * @param pEvent Specifies the event payload.
         * @event
         */
        protected onChange(pEvent: HookProps<IItemChangeEvent<Item<H>>>): void;
        /**
         * Fired when the item is popped.
         * @param pEvent Specifies the event payload.
         * @event
         */
        protected onPop(pEvent: HookProps<IItemPopEvent<Item<H>>>): void;
        /**
         * Dispatches a matrix event.
         * @param pStack Reference to the stack.
         * @param pEvent Specifies the event to dispatch.
         */
        dispatch(
            pStack: Stack,
            pEvent: IDispatch<"OnItemChange", IItemChangeEvent<Item<H>>> | IDispatch<"OnItemPop", IItemPopEvent<Item<H>>> | "Pop" | "Detach"
        ): void;
        /**
         * Sets the index of an item.
         * @param pStack Reference to the stack.
         * @param pMatrix Reference to the matrix.
         * @param nIndex Specifies the new index of the item.
         * @param sEmit Specifies if events needs to be emitted.
         * @param nReason Specifies the event reason.
         * @return Returns `true` if a change occured.
         */
        reindex(
            pStack: Stack,
            pMatrix: Matrix<Item<H>, THooks>,
            nIndex: number,
            sEmit: "nothing" | "auto" | "change" | "push",
            nReason: Reasons
        ): boolean;
        /**
         * Moves the item to the specified cursor.
         * @param pCursor Specifies the cursor.
         * @return Returns `true` if the move succeeded.
         */
        moveTo(pCursor: ICursor): boolean;
        /**
         * Moves the item to the specified index.
         * @param nIndex Specifies the index position.
         * @return Returns `true` if the move succeeded.
         */
        moveToIndex(nIndex: number): boolean;
        /**
         * Moves the item to the specified position.
         * @param nColumn Specifies the column.
         * @param nRow Specifies the row.
         * @return Returns `true` if the move succeeded.
         */
        moveToPosition(nColumn: number, nRow: number): boolean;
        /**
         * Moves the item to the specified item.
         * @param pTo Specifies the item to move to.
         * @param bAbove Specifies if the move position is above or below the
         * specified item.
         * @return Returns `true` if the move succeeded.
         */
        moveToItem(pTo: Item<H>, bAbove: boolean): boolean;
        /**
         * Moves the item up or down.
         * @param bUp Specifies if the move direction is up (true) or down (false).
         * @return Returns `true` if the move succeeded.
         */
        moveUpOrDown(bUp: boolean): boolean;
        /**
         * Swaps an item with another item.
         * @param pWith Specifies the item to swap with.
         * @return Returns `true` if the swap succeeded.
         */
        swap(pWith: Item<H>): boolean;
        /**
         * Removes the item from the matrix.
         * @return Returns `true` if the function succeeded.
         */
        pop(): boolean;
        /**
         * Removes the item from the matrix without emitting events.
         * @return Returns `true` if the function succeeded.
         */
        popSilent(): boolean;
        /**
         * Restores a popped item.
         * @param pMatrix Specifies a matrix to use.
         * @param nIndex Specifies the restore position.
         * @return Returns a reference to the item.
         */
        unpop(pMatrix?: Matrix<Item<H>, THooks>, nIndex?: number): boolean;
        /**
         * Restores a popped item.
         * @param pMatrix Specifies a matrix to use.
         * @param nIndex Specifies the restore position.
         * @return Returns a reference to the item.
         */
        unpopSilent(pMatrix?: Matrix<Item<H>, THooks>, nIndex?: number): boolean;
    }
    export const enum Orientations {
        /** Items a vertical oriented (columns are filled out). */
        Vertical = 0,
        /** Items are horizontal oriented (rows are filled out). */
        Horizontal = 1,
    }
    export const enum Types {
        /** A vertical matrix expands vertical (fixed number of columns). */
        Vertical = 0,
        /** A horizontal matrix expands horizontal (fixed number of rows). */
        Horizontal = 1,
        /** A square matrix expands horizontal and vertical in a perfect square. */
        Square = 2,
        /** A horizontal square matrix expands first horizontal and then vertical. */
        SquareHorizontal = 3,
        /** A vertical square matrix expands first vertical and then horizontal. */
        SquareVertical = 4,
    }
    /**
     * Implements the convolution matrix.
     * @param T Specifies the item type.
     * @param H Specifies custom hooks for the matrix (optional).
     */
    export abstract class Matrix<T extends Item<THooks>, H extends THooks = void> extends Hooks<TMatrixHooks | H> {
        /**
         * Creates a new matrix.
         * @param nType Specifies the matrix direction.
         * @param nOrientation Specifies the matrix orientation.
         * @param nDimensions Specifies the number of columns for vertical matrices or the number of rows for horizontal matrices.
         */
        constructor(nType?: Types, nOrientation?: Orientations, nDimensions?: number);
        /** Specifies the unique id of the matrix. */
        get uniqueId(): number;
        /** Retrieves the current matrix type. */
        get type(): Types;
        /** Sets the current matrix type. */
        set type(nType: Types);
        /** Retrieves the current matrix orientation. */
        get orientation(): Orientations;
        /** Sets the current matrix orientation. */
        set orientation(nOrientation: Orientations);
        /** Retrieves the number of columns in the matrix. */
        get columns(): number;
        /** Sets the number of columns in the matrix. */
        set columns(nColumns: number);
        /** Retrieves the number of rows in the matrix. */
        get rows(): number;
        /** Sets the number of rows in the matrix. */
        set rows(nRows: number);
        /** Retrieves the total number of items in the matrix. */
        get count(): number;
        /** Retrieves all the items. */
        get all(): T[];
        /** Retrieves the item at the current cursor position. */
        get currentItem(): T | undefined;
        /** Retrieves the first item in the matrix. */
        get firstItem(): T | undefined;
        /** Retrieves the last item in the matrix. */
        get lastItem(): T | undefined;
        /** Retrieves the last item in the first row of the matrix. */
        get lastItemInFirstRow(): T | undefined;
        /** Retrieves the last item in the first column of the matrix. */
        get lastItemInFirstColumn(): T | undefined;
        /** Retrieves the current cursor. */
        get cursor(): ICursor | ISafeCursor;
        /** Sets the current cursor. */
        set cursor(pCursor: ICursor | ISafeCursor);
        /** Retrieves the current (safe) cursor. */
        get safeCursor(): ISafeCursor;
        /** Verifies if the cursor is at the first column. */
        get isCursorAtFirstColumn(): boolean;
        /** Verifies if the cursor is at the last column. */
        get isCursorAtLastColumn(): boolean;
        /** Verifies if the column cursor is past the last column. */
        get isCursorAtEndColumn(): boolean;
        /** Verifies if the row cursor is at the first row. */
        get isCursorAtFirstRow(): boolean;
        /** Verifies if the row cursor is at the last row. */
        get isCursorAtLastRow(): boolean;
        /** Verifies if the row cursor is past the last row. */
        get isCursorAtEndRow(): boolean;
        /** Verifies if the cursor is at the first item of the matrix. */
        get isCursorAtFirst(): boolean;
        /** Verifies if the cursor is at the last item of the matrix. */
        get isCursorAtLast(): boolean;
        /** Verifies if the cursor is past the end of the matrix. */
        get isCursorAtEnd(): boolean;
        /** Retrieves the silent mode. */
        get isSilent(): boolean | (() => boolean);
        /** Sets the silent mode. */
        set isSilent(pSilent: boolean | (() => boolean));

        /**
         * Retrieves a validated cursor from the supplied cursor.
         * @param pCursor Specifies the source cursor.
         * @return Returns the validated cursor.
         */
        protected getSafeCursor(pCursor: ICursor): ISafeCursor;
        /**
         * Fired when the dimensions of the matrix are changed.
         * @param pEvent Specifies the event payload.
         * @event
         */
        protected onDimensionChange(pEvent: HookProps<IDimensionChangeEvent<this>>): void;
        /**
         * Fired when the item count of the matrix is changed.
         * @param pEvent Specifies the event payload.
         * @event
         */
        protected onCountChange(pEvent: HookProps<ICountChangeEvent<this>>): void;
        /**
         * Fired when the cursor position of the matrix is changed.
         * @param pEvent Specifies the event payload.
         * @event
         */
        protected onCursorChange(pEvent: HookProps<ICursorChangeEvent<this>>): void;
        /**
         * Retrieves the index for the given column and row.
         * @param nColumn Specifies the column.
         * @param nRow Specifies the row.
         * @return Returns the item index or `-1` if the index is invalid.
         */
        indexFromColumnRow(nColumn: number, nRow: number): number;
        /**
         * Retrieves a cursor for the specified index.
         * @param nIndex Specifies the index.
         * @return Returns a cursor.
         */
        cursorFromIndex(nIndex: number | undefined): ISafeCursor;
        /**
         * Pushes an item to the matrix.
         * @param pItem Specifies the item to put in the matrix.
         * @param pOptions Specifies one or more of the following options:
         * - Index: Specifies the desired index for the item (if `undefined` the
         * supplied index in the item will be used or the item will be pushed to the
         * end of the matrix if the index is invalid);
         * - Recalculate: Specifies if the matrix needs to be recalculated;
         * - Emit: Specifies what to emit.
         * @return Returns a reference to the item.
         */
        pushToMatrix(
            pItem: T,
            pOptions?: {
                index: number | undefined;
                recalculate: boolean;
                emit: "nothing" | "push" | "change";
            }
        ): T;
        /**
         * Moves an item to the specified cursor.
         * @param pItem Specifies the item to move.
         * @param pCursor Specifies the cursor.
         * @return Returns `true` if the move succeeded.
         */
        moveTo(pItem: T, pCursor: ICursor): boolean;
        /**
         * Moves an item to the specified index position.
         * @param pItem Specifies the item to move.
         * @param nIndex Specifies the index position.
         * @return Returns `true` if the move succeeded.
         */
        moveToIndex(pItem: T, nIndex: number): boolean;
        /**
         * Moves an item to the specified position.
         * @param pItem Specifies the item to move.
         * @param nColumn Specifies the column.
         * @param nRow Specifies the row.
         * @return Returns `true` if the move succeeded.
         */
        moveToPosition(pItem: T, nColumn: number, nRow: number): boolean;
        /**
         * Moves an item to the specified item.
         * @param pItem Specifies the item to swap.
         * @param pTo Specifies the item to move to.
         * @param bAbove Specifies if the move position is above or below the specified item.
         * @return Returns `true` if the move succeeded.
         */
        moveToItem(pItem: T, pTo: T, bAbove: boolean): boolean;
        /**
         * Moves an item up or down.
         * @param pItem Specifies the item to move.
         * @param bUp Specifies if the move direction is up (true) or down (false).
         * @return Returns `true` if the move succeeded.
         */
        moveUpOrDown(pItem: T, bUp: boolean): boolean;
        /**
         * Swaps two items.
         * @param pA Item A.
         * @param pB Item B.
         * @return Returns `true` if the swap succeeded.
         */
        swap(pA: T, pB: T): boolean;
        /**
         * Removes an item from the matrix (or the last item if no item is specified).
         * @param pItem Specifies the item to remove.
         * @param bEmit Specifies if the events needs to be emitted.
         * @return Returns the popped item.
         */
        popFromMatrix(pItem?: T, bEmit?: boolean): T | undefined;
        /**
         * Sorts the matrix using the supplied compare functions.
         * @param fnCompare Specifies the compare function. The compare function should return a number according to the following rules:
         * - A is less than B return -1;
         * - A is greater than B return 1;
         * - A is equal to B return 0.
         *
         * To compare numbers you can simply return `nA - nB`. If no compare function is specified, the items are sorted according to the
         * original push order.
         * @param fnCompare.pA Compare item A.
         * @param fnCompare.pB Compare item B.
         * @return Returns `true` if the sort invoked an item position change.
         */
        sort(fnCompare?: (pA: T, pB: T) => number): boolean;
        /**
         * Removes all matrix items.
         * @param sMode Specifies the clear mode:
         * - `dirty`: Just removes all the items from the matrix without emitting events;
         * - `fast`: Removes the items and invokes the `onPop` method for each item;
         * - `thorough`: Removes the items and invokes the `OnPop`method and hooks for each item.
         */
        clear(sMode?: "dirty" | "fast" | "thorough"): void;
        /** Invalidates the matrix and forces the `DimensionChange` event. */
        invalidateMatrix(): void;
        /** Recalculates the matrix. */
        recalculateMatrix(): void;
        /**
         * Iterates through each item.
         * @param fnCallee Specifies the function to be invoked for each item. The item value will be exposed to the function as the first
         * argument of the argument list. Additional arguments can be specified and will be pushed to the function. If the function returns
         * `true` the iteration is stopped.
         * @param nFrom Specifies the index to start the iteration from. A negative index indicates an offset from the end of the matrix.
         * @param nTo Specifies the index to stop the iteration. A negative index indicates an offset from the end of the matrix.
         * @return Returns `true` if the iteration is stopped (break).
         */
        each(fnCallee: (pItem: T) => boolean | void, nFrom?: number, nTo?: number): boolean;
        /**
         * Iterates through each item starting with the last item.
         * @param fnCallee Specifies the function to be invoked for each item. The item value will be exposed to the function as the first
         * argument of the argument list. Additional arguments can be specified and will be pushed to the function. If the function
         * returns `true` the iteration is stopped.
         * @param nFrom Specifies the index to start the iteration from. A negative index indicates an offset from the end of the matrix.
         * @param nTo Specifies the index to stop the iteration. A negative index indicates an offset from the end of the matrix.
         * @return Returns `true` if the iteration was stopped (break).
         */
        reverseEach(fnCallee: (pItem: T) => boolean | void, nFrom?: number, nTo?: number): boolean;
        /**
         * Retrieves the item at the specified index.
         * @param nIndex Specifies the index.
         * @return Returns the item or `undefined` if the item is not found.
         */
        itemAtIndex(nIndex: number): T | undefined;
        /**
         * Retrieves the item at the specified position.
         * @param nColumn Specifies the column.
         * @param nRow Specifies the row.
         * @return Returns the item or `undefined` if the item is not found.
         */
        itemAtPosition(nColumn: number, nRow: number): T | undefined;
        /**
         * Retrieves the item at the specified cursor.
         * @param pCursor Specifies the cursor.
         * @return Returns the item or `undefined` if the item is not found.
         */
        itemAtCursor(pCursor: ICursor): T | undefined;
        /**
         * Retrieves the item with the specified id.
         * @param nId Specifies the id of the item.
         * @return Returns the item or `undefined` if the item is not found.
         */
        itemFromId(nId: number): T | undefined;
        /**
         * Retrieves the last item in the specified row of the matrix.
         * @param nRow Specifies the row.
         * @return Returns a reference to the last item or `undefined` if the item is not found.
         */
        lastItemInRow(nRow: number): T | undefined;
        /**
         * Retrieves the last item in the specified column of the matrix.
         * @param nColumn Specifies the column.
         * @return Returns a reference to the last item or `undefined` if the item is not found.
         */
        lastItemInColumn(nColumn: number): T | undefined;
        /**
         * Moves the cursor to the first column.
         * @param bMoveToFirstRow Specifies if the cursor needs to be moved to the first row.
         * @return Returns the new cursor position.
         */
        moveCursorToFirstColumn(bMoveToFirstRow?: boolean): ISafeCursor;
        /**
         * Moves the cursor to the next column.
         * @param bMoveToFirstRow Specifies if the cursor needs to be moved to the first row.
         * @return Returns the new cursor position.
         */
        moveCursorToSuccessorColumn(bMoveToFirstRow?: boolean): ISafeCursor;
        /**
         * Moves the cursor to the previous column.
         * @param bMoveToFirstRow Specifies if the cursor needs to be moved to the first row.
         * @return Returns the new cursor position.
         */
        moveCursorToPredecessorColumn(bMoveToFirstRow?: boolean): ISafeCursor;
        /**
         * Moves the cursor to the last column.
         * @param bMoveToFirstRow Specifies if the cursor needs to be moved to the first row.
         * @return Returns the new cursor position.
         */
        moveCursorToLastColumn(bMoveToFirstRow?: boolean): ISafeCursor;
        /**
         * Moves the cursor to the first row.
         * @param bMoveToFirstColumn Specifies if the cursor needs to be moved to the first column.
         * @return Returns the new cursor position.
         */
        moveCursorToFirstRow(bMoveToFirstColumn?: boolean): ISafeCursor;
        /**
         * Moves the cursor to the next row.
         * @param bMoveToFirstColumn Specifies if the cursor needs to be moved to the first column.
         * @return Returns the new cursor position.
         */
        moveCursorToSuccessorRow(bMoveToFirstColumn?: boolean): ISafeCursor;
        /**
         * Moves the cursor to the previous row.
         * @param bMoveToFirstColumn Specifies if the cursor needs to be moved to the first column.
         * @return Returns the new cursor position.
         */
        moveCursorToPredecessorRow(bMoveToFirstColumn?: boolean): ISafeCursor;
        /**
         * Moves the row cursor to the last row.
         * @param bMoveToFirstColumn Specifies if column cursor needs to be moved to the first column.
         * @return Returns the new cursor position.
         */
        moveCursorToLastRow(bMoveToFirstColumn?: boolean): ISafeCursor;
        /**
         * Moves the cursor to the first item.
         * @return Returns the new cursor position.
         */
        moveCursorToFirst(): ISafeCursor;
        /**
         * Moves the cursor to the next item.
         * @return Returns the new cursor position.
         */
        moveCursorToSuccessor(): ISafeCursor;
        /**
         * Moves the cursor to the previous item.
         * @return Returns the new cursor position.
         */
        moveCursorToPredecessor(): ISafeCursor;
        /**
         * Moves the cursor to the last item.
         * @return Returns the new cursor position.
         */
        moveCursorToLast(): ISafeCursor;
        /**
         * Moves the cursor past the last item.
         * @return Returns the new cursor position.
         */
        moveCursorToEnd(): ISafeCursor;
    }
    /**
     * Implements the strict matrix item. In a strict matrix an item is always
     * bound to a parent matrix and items can be created by the matrix.
     * @param P Specifies the matrix type.
     * @param H Specifies custom hooks for the item (optional).
     * @param D Specifies a data type for the item (optional).
     */
    export abstract class StrictItem<
        P extends StrictMatrix<P, StrictItem<P, H, D>, THooks, D>,
        H extends THooks = void,
        D = undefined
    > extends Item<H> {
        /**
         * Creates a new strict item.
         * @param pMatrix Reference to the matrix.
         */
        constructor(pMatrix: P);
        /** Retrieves a reference to the parent matrix. */
        get parent(): P;
        /**
         * Retrieves a reference to the underlying matrix.
         * @return Returns a reference to the matrix.
         */
        protected matrix(): P;
        /**
         * Inserts a new item before this item.
         * @param pData Data which is passed to the item constructor.
         * @return Returns a reference to the item.
         */
        protected insertBefore(pData: D): StrictItem<P, H, D>;
        /**
         * Inserts a new item after this item.
         * @param pData Data which is passed to the item constructor.
         * @return Returns a reference to the item.
         */
        protected insertAfter(pData: D): StrictItem<P, H, D>;
        /**
         * Dispatches a matrix event.
         * @param pStack Reference to the stack.
         * @param pEvent Specifies the event to dispatch.
         */
        dispatch(
            pStack: Stack,
            pEvent:
                | IDispatch<"OnItemChange", IItemChangeEvent<StrictItem<P, H, D>>>
                | IDispatch<"OnItemPop", IItemPopEvent<StrictItem<P, H, D>>>
                | "Pop"
                | "Detach"
        ): void;
    }
    /**
     * Describes the item constructor.
     * @param P Specifies the matrix type.
     * @param T Specifies the item type.
     * @param D Specifies a data type for the item (optional).
     */
    export interface IStrictItemConstructor<P extends StrictMatrix<P, T, THooks, D>, T extends StrictItem<P, THooks, D>, D> {
        new (pMatrix: P, pData: D): T;
    }
    /**
     * Implements the strict convolution matrix. In a strict matrix an item is
     * always bound to a parent matrix and items can be created by the matrix.
     * @param P Specifies the matrix type.
     * @param T Specifies the item type.
     * @param H Specifies custom hooks for the matrix (optional).
     * @param D Specifies a data type for the item (optional).
     */
    export abstract class StrictMatrix<
        P extends StrictMatrix<P, T, H, D>,
        T extends StrictItem<P, THooks, D>,
        H extends THooks = void,
        D = undefined
    > extends Matrix<T, H> {
        /**
         * Creates a new matrix.
         * @param pItem Specifies the item constructor.
         * @param nType Specifies the matrix direction.
         * @param nOrientation Specifies the matrix orientation.
         * @param nDimensions Specifies the number of columns for vertical matrices or the number of rows for horizontal matrices.
         */
        constructor(pItemConstructor: IStrictItemConstructor<P, T, D>, nType?: Types, nOrientation?: Orientations, nDimensions?: number);
        /** Retrieves a reference to the item constructor. */
        get itemConstructor(): IStrictItemConstructor<P, T, D>;
        /**
         * Appends a new item to the end of the matrix.
         * @param pData Data which is passed to the item constructor.
         * @return Returns a reference to the item.
         */
        protected appendToMatrix(pData: D): T;
        /**
         * Inserts a new item at the beginning of the matrix.
         * @param pData Data which is passed to the item constructor.
         * @return Returns a reference to the item.
         */
        protected insertToMatrix(pData: D): T;
        /**
         * Inserts a new item at the specified cursor or at the beginning of the matrix.
         * @param pData Data which is passed to the item constructor.
         * @param pCursor Specifies the cursor.
         * @return Returns a reference to the item.
         */
        protected insertToMatrixAtCursor(pData: D, pCursor: ICursor): T;
        /**
         * Inserts a new item at the specified index.
         * @param pData Data which is passed to the item constructor.
         * @param nIndex Specifies the index position.
         * @return Returns a reference to the item.
         */
        protected insertToMatrixAtIndex(pData: D, nIndex: number): T;
        /**
         * Inserts a new item at the specified index.
         * @param pData Data which is passed to the item constructor.
         * @param nColumn Specifies the column.
         * @param nRow Specifies the row.
         * @return Returns a reference to the item.
         */
        protected insertToMatrixAtPosition(pData: D, nColumn: number, nRow: number): T;
        /**
         * Invoked when a new item instance is requested.
         * @param pData Specifies the data.
         * @return Returns the new item instance.
         * @event
         */
        onItemInstance(pData: D): T;
    }
    /** Defines the `DataChange` event. */
    export interface IDataChangeEvent<T> extends IHookPayload<"OnDataChange"> {
        /** Reference to the model. */
        readonly model: Model<T>;
        /** Reference to the item. */
        readonly item: ModelItem<T>;
        /** Reference to the data. */
        readonly data: T;
    }
    /**
     * Creates a new matrix model item.
     * @param T Specifies the type for the item.
     */
    export class ModelItem<T> extends StrictItem<Model<T>, "OnDataChange", T> {
        /**
         * Creates a new item.
         * @param pData Specifies the data for the item.
         */
        constructor(pMatrix: Model<T>, pData: T);
        /** Retrieves the attached data. */
        get data(): T;
        /** Sets the attached data. */
        set data(pData: T);
        /**
         * Inserts a new item before this item.
         * @param pData Specifies the data for the item.
         * @return Returns the new item.
         */
        insertBefore(pData: T): ModelItem<T>;
        /**
         * Inserts a new item after this item.
         * @param pData Specifies the data for the item.
         * @return Returns the new item.
         */
        insertAfter(pData: T): ModelItem<T>;
    }
    /**
     * Creates a matrix model of the specified type.
     * @param T Specifies the type for the model.
     */
    export class Model<T> extends StrictMatrix<Model<T>, ModelItem<T>, "OnDataChange", T> {
        /**
         * Creates a new matrix.
         * @param nType Specifies the matrix direction.
         * @param nOrientation Specifies the matrix orientation.
         * @param nDimensions Specifies the number of columns for vertical matrices
         * or the number of rows for horizontal matrices.
         * @param pItems Specifies an array with initial data items.
         */
        constructor(nType?: Types, nOrientation?: Orientations, nDimensions?: number, pItems?: T[]);
        /**
         * Appends a new item to the end of the model.
         * @param pData Specifies the data for the item.
         * @return Returns the new item.
         */
        append(pData: T): ModelItem<T>;
        /**
         * Inserts a new item at the beginning of the model.
         * @param pData Specifies the data for the item.
         * @return Returns the new item.
         */
        insert(pData: T): ModelItem<T>;
        /**
         * Inserts a new item at the specified cursor.
         * @param pData Specifies the data for the item.
         * @param pCursor Specifies the cursor.
         * @return Returns the new item.
         */
        insertAtCursor(pData: T, pCursor: ICursor): ModelItem<T>;
        /**
         * Inserts a new item at the specified index.
         * @param pData Specifies the data for the item.
         * @param nIndex Specifies the index position.
         * @return Returns the new item.
         */
        insertAtIndex(pData: T, nIndex: number): ModelItem<T>;
        /**
         * Inserts a new item at the specified index.
         * @param pData Specifies the data for the item.
         * @param nColumn Specifies the column.
         * @param nRow Specifies the row.
         * @return Returns the new item.
         */
        insertAtPosition(pData: T, nColumn: number, nRow: number): ModelItem<T>;
    }
}

declare module "tripetto/module/metrics" {
    export interface IPoint {
        /** Specifies the horizontal coordinate. */
        readonly x: number;
        /** Specifies the vertical coordinate. */
        readonly y: number;
    }
    export interface IRectangleProperties<T extends string> {
        /** Specifies the rectangle name. */
        name: T;
        /** Specifies the initial width of the rectangle. */
        readonly width?: number;
        /** Specifies the initial height of the rectangle. */
        readonly height?: number;
        /** Specifies the minimal width of the rectangle. */
        readonly minWidth?: number;
        /** Specifies the minimal height of the rectangle. */
        readonly minHeight?: number;
        /** Specifies the maximal width of the rectangle. */
        readonly maxWidth?: number;
        /** Specifies the minimal width of the rectangle. */
        readonly maxHeight?: number;
        /** Specifies the left spacing of the rectangle. */
        readonly spacingLeft?: number;
        /** Specifies the top spacing of the rectangle. */
        readonly spacingTop?: number;
        /** Specifies the right spacing of the rectangle. */
        readonly spacingRight?: number;
        /** Specifies the bottom spacing of the rectangle. */
        readonly spacingBottom?: number;
        /** Specifies the left hint correction. */
        readonly hintCorrectionLeft?: number;
        /** Specifies the top hint correction. */
        readonly hintCorrectionTop?: number;
        /** Specifies the right hint correction. */
        readonly hintCorrectionRight?: number;
        /** Specifies the bottom hint correction. */
        readonly hintCorrectionBottom?: number;
        /** Specifies the horizontal mean correction. */
        readonly meanCorrectionHorizontal?: number;
        /** Specifies the vertical mean correction. */
        readonly meanCorrectionVertical?: number;
        /** Specifies the names of the rectangles which should align to this rectangle. */
        readonly align?: T[];
    }
    export class Coordinate {
        /** Specifies the left coordinate. */
        left: number;
        /** Specifies the top coordinate. */
        top: number;
        /** Specifies the right coordinate. */
        right: number;
        /** Specifies the bottom coordinate. */
        bottom: number;
        /**
         * Constructs a new coordinate.
         * @param nLeft Specifies the left coordinate.
         * @param nTop Specifies the top coordinate.
         * @param nRight Specifies the right coordinate.
         * @param nBottom Specifies the bottom coordinate.
         */
        constructor(nLeft?: number, nTop?: number, nRight?: number, nBottom?: number);
    }
    export class Dimensions {
        /** Retrieves the `none` constant for the width and height. */
        static get NONE(): number;

        /**
         * Constructs a new dimension object.
         * @param nWidth Specifies the width.
         * @param nHeight Specifies the height.
         * @param nMinWidth Specifies the minimum width.
         * @param nMinHeight Specifies the minimum height.
         * @param nMaxWidth Specifies the maximum width.
         * @param nMaxHeight Specifies the minimum height.
         */
        constructor(nWidth?: number, nHeight?: number, nMinWidth?: number, nMinHeight?: number, nMaxWidth?: number, nMaxHeight?: number);
        /** Retrieves the minimum width. */
        get minWidth(): number;
        /** Sets the minimum width. */
        set minWidth(nMinWidth: number);
        /** Retrieves the minimum height. */
        get minHeight(): number;
        /** Sets the minimum height. */
        set minHeight(nMinHeight: number);
        /** Retrieves the maximum width. */
        get maxWidth(): number;
        /** Sets the maximum width. */
        set maxWidth(nMaxWidth: number);
        /** Retrieves the maximum height. */
        get maxHeight(): number;
        /** Sets the maximum height. */
        set maxHeight(nMaxHeight: number);
        /** Retrieves the current width. */
        get width(): number;
        /** Sets the current width. */
        set width(nWidth: number);
        /** Retrieves the current height. */
        get height(): number;
        /** Sets the current height. */
        set height(nHeight: number);
        /** Retrieves if the width is specified. */
        get isWidthSpecified(): boolean;
        /** Retrieves if the height is specified. */
        get isHeightSpecified(): boolean;
        /** Retrieves the unranged width. */
        get w(): number;
        /** Retrieves the unranged height. */
        get h(): number;
    }
    export class Rectangle {
        /**
         * Constructs a new rectangle.
         * @param pProperties Specifies the rectangle properties.
         */
        constructor(pProperties?: {
            /** Specifies the left position. */
            left?: number;
            /** Specifies the top position. */
            top?: number;
            /** Specifies the right position. */
            right?: number;
            /** Specifies the bottom position. */
            bottom?: number;
            /** Specifies the width of the rectangle. If the width is supplied the specified right position is ignored. */
            width?: number;
            /** Specifies the height of the rectangle. If the height is supplied the specified bottom position is ignored. */
            height?: number;
            /** Specifies the minimum width. */
            minWidth?: number;
            /** Specifies the minimum height. */
            minHeight?: number;
            /** Specifies the maximum width. */
            maxWidth?: number;
            /** Specifies the maximum height. */
            maxHeight?: number;
        });
        /** Retrieves the dimensions. */
        get dimensions(): Dimensions;
        /** Retrieves the coordinates. */
        get coordinate(): Coordinate;
        /** Retrieves the left coordinate of the rectangle. */
        get left(): number;
        /** Sets the left coordinate of the rectangle. */
        set left(nLeft: number);
        /** Retrieves the top coordinate of the rectangle. */
        get top(): number;
        /** Sets the top coordinate of the rectangle. */
        set top(nTop: number);
        /** Retrieves the right coordinate of the rectangle. */
        get right(): number;
        /** Sets the right coordinate of the rectangle. */
        set right(nRight: number);
        /** Retrieves the bottom coordinate of the rectangle. */
        get bottom(): number;
        /** Sets the bottom coordinate of the rectangle. */
        set bottom(nBottom: number);
        /** Retrieves the width of the rectangle. */
        get width(): number;
        /** Sets the width of the rectangle. */
        set width(nWidth: number);
        /** Retrieves the height of the rectangle. */
        get height(): number;
        /** Sets the height of the rectangle. */
        set height(nHeight: number);
        /** Retrieves the rounded width of the rectangle.  */
        get roundedWidth(): number;
        /** Retrieves the rounded height of the rectangle.  */
        get roundedHeight(): number;
        /** Retrieves the unranged width of the rectangle.  */
        get w(): number;
        /** Retrieves the unranged height of the rectangle.  */
        get h(): number;
        /** Retrieves an immutable copy of the rectangle. */
        get copy(): Rectangle;
        /**
         * Verifies if the supplied point is within the rectangle.
         * @param nX Specifies the horizontal position.
         * @param nY Specifies the vertical position.
         * @return Returns `true` if the point is within the rectangle.
         */
        isIn(nX?: number, nY?: number): boolean;
    }
    /**
     * Implements a rectangle manager which can be used to manage rectangle relationships. The relation between those rectangles is described
     * by specifying characteristics of the rectangles, such as padding, minimal and maximum dimensions, etc. When the dimensions of a
     * rectangle change, the resulting dimensions of the surrounding rectangles are calculated.
     * @param T Specifies the rectangle names.
     */
    export class Rectangles<T extends string> {
        /**
         * Constructs a new rectangle repository.
         * @param pRectangles Specifies an array with rectangles.
         */
        constructor(pRectangles?: IRectangleProperties<T>[]);
        /** Retrieves the left coordinate of the comprehensive rectangle. */
        get left(): number;
        /** Sets the left coordinate of the comprehensive rectangle. */
        set left(nLeft: number);
        /** Retrieves the top coordinate of the comprehensive rectangle. */
        get top(): number;
        /** Sets the top coordinate of the comprehensive rectangle. */
        set top(nTop: number);
        /** Retrieves the right coordinate of the comprehensive rectangle. */
        get right(): number;
        /** Retrieves the bottom coordinate of the comprehensive rectangle. */
        get bottom(): number;
        /** Retrieves the width of the comprehensive rectangle. */
        get width(): number;
        /** Retrieves the height of the comprehensive rectangle. */
        get height(): number;
        /** Returns the width and height of the comprehensive rectangle. */
        get dimensions(): Dimensions;
        /**
         * Retrieves the inner left coordinate of the comprehensive rectangle. This
         * is the rectangle which includes all rectangles without spacing.
         */
        get innerLeft(): number;
        /**
         * Retrieves the inner top coordinate of the comprehensive rectangle. This
         * is the rectangle which includes all rectangles without spacing.
         */
        get innerTop(): number;
        /**
         * Retrieves the inner right coordinate of the comprehensive rectangle. This
         * is the rectangle which includes all rectangles without spacing.
         */
        get innerRight(): number;
        /**
         * Retrieves the inner bottom coordinate of the comprehensive rectangle.
         * This is the rectangle which includes all rectangles without spacing.
         */
        get innerBottom(): number;
        /**
         * Retrieves the inner width of the comprehensive rectangle. This is the
         * rectangle which includes all rectangles without spacing.
         */
        get innerWidth(): number;
        /**
         * Retrieves the inner height of the comprehensive rectangle. This is the
         * rectangle which includes all rectangles without spacing.
         */
        get innerHeight(): number;
        /** Retrieves the shift mode. */
        get isShifted(): boolean;
        /** Sets the shift mode. */
        set isShifted(bShift: boolean);
        /** Retrieves the left position of the shifted element. */
        get shiftLeft(): number;
        /** Sets the left move. */
        set shiftLeft(nLeft: number);
        /** Retrieves the top position of the shifted element. */
        get shiftTop(): number;
        /** Sets the top shift. */
        set shiftTop(nTop: number);
        /** Retrieves the right position of the shifted element. */
        get shiftRight(): number;
        /** Retrieves the bottom position of the shifted element. */
        get shiftBottom(): number;
        /** Retrieves the last horizontal position shift. */
        get shiftHorizontal(): number;
        /** Retrieves the last vertical position shift. */
        get shiftVertical(): number;
        /** Retrieves the horizontal shift mean. */
        get shiftMeanHorizontal(): number;
        /** Retrieves the vertical shift mean. */
        get shiftMeanVertical(): number;
        /**
         * Iterates through all rectangles.
         * @param fnRectangle Specifies the function which is called for each rectangle.
         * @param fnRectangle.pRectangle Reference to the rectangle metrics.
         * @param fnRectangle.sRectangle Contains the rectangle name.
         * @param nZoom Specifies an optional zoom factor.
         */
        each(fnRectangle: (pRectangle: Rectangle, sRectangle: T) => void, nZoom?: number): void;
        /**
         * Sets or retrieves the minimum width of the specified rectangle.
         * @param sRectangle Specifies the name of the rectangle.
         * @param nMinWidth Specifies the minimum width.
         * @return Returns the minimal width.
         */
        minWidth(sRectangle: T, nMinWidth?: number): number;
        /**
         * Sets or retrieves the minimum height of the specified rectangle.
         * @param sRectangle Specifies the name of the rectangle.
         * @param nMinHeight Specifies the minimum height.
         * @return Returns the minimal height.
         */
        minHeight(sRectangle: T, nMinHeight?: number): number;
        /**
         * Sets or retrieves the maximum width of the specified rectangle.
         * @param sRectangle Specifies the name of the rectangle.
         * @param nMaxWidth Specifies the maximum width.
         * @return Returns the maximum width.
         */
        maxWidth(sRectangle: T, nMaxWidth?: number): number;
        /**
         * Sets or retrieves the maximum height of the specified rectangle.
         * @param sRectangle Specifies the name of the rectangle.
         * @param nMaxHeight Specifies the maximum height.
         * @return Returns the maximum height.
         */
        maxHeight(sRectangle: T, nMaxHeight?: number): number;
        /**
         * Retrieves the horizontal center of the specified rectangle or the comprehensive rectangle.
         * @param sRectangle Specifies the name of the rectangle. If omitted the mean of the comprehensive rectangle will be calculated.
         * @return Returns the horizontal mean.
         */
        meanHorizontal(sRectangle?: T): number;
        /**
         * Retrieves the vertical center of the specified rectangle or the comprehensive rectangle.
         * @param sRectangle Specifies the name of the rectangle. If omitted the mean of the comprehensive rectangle will be calculated.
         * @return Returns the vertical mean.
         */
        meanVertical(sRectangle?: T): number;
        /**
         * Retrieves the rectangle for the specified rectangle or the comprehensive rectangle.
         * @param sRectangle Specifies the name of the rectangle. If omitted the rectangle of the comprehensive rectangle will be calculated.
         * @param nZoom Specifies an optional zoom factor.
         * @return Returns the rectangle.
         */
        rectangle(sRectangle?: T, nZoom?: number): Rectangle;
        /**
         * Retrieves the applied rectangle for the specified rectangle. This is the rectangle which is currently stored in the buffer.
         * @param sRectangle Specifies the name of the rectangle. If omitted the rectangle of the comprehensive rectangle will be calculated.
         * @param nZoom Specifies an optional zoom factor.
         * @return Returns the rectangle.
         */
        rectangleApplied(sRectangle?: T, nZoom?: number): Rectangle;
        /**
         * Sets or retrieves the width of a rectangle or retrieves the width of the comprehensive rectangle.
         * @param sRectangle Specifies the name of the rectangle. If omitted the rectangle of the comprehensive rectangle will be calculated.
         * @param nWidth Specifies the width.
         * @return Returns the width.
         */
        rectangleWidth(sRectangle?: T, nWidth?: number): number;
        /**
         * Sets or retrieves the height of a rectangle or retrieves the width of the comprehensive rectangle.
         * @param sRectangle Specifies the name of the rectangle. If omitted the rectangle of the comprehensive rectangle will be calculated.
         * @param nWidth Specifies the width.
         * @return Returns the width.
         */
        rectangleHeight(sRectangle?: T, nHeight?: number): number;
        /**
         * Verifies if the specified rectangle is aligned with another rectangle.
         * @param sRectangleA Specifies the first rectangle.
         * @param sRectangleB Specifies the second rectangle.
         * @return Returns `true` if the rectangle is aligned.
         */
        isRectangleAligned(sRectangleA: T, sRectangleB: T): boolean;
        /**
         * Sets or retrieves the left spacing of a rectangle or retrieves the left comprehensive rectangle spacing.
         * @param sRectangle Specifies the name of the rectangle. If omitted the rectangle of the comprehensive rectangle will be calculated.
         * @param nSpacingLeft Specifies the left spacing.
         * @return Returns the left spacing.
         */
        spacingLeft(sRectangle?: T, nSpacingLeft?: number): number;
        /**
         * Sets or retrieves the top spacing of a rectangle or retrieves the top comprehensive rectangle spacing.
         * @param sRectangle Specifies the name of the rectangle. If omitted the rectangle of the comprehensive rectangle will be calculated.
         * @param nSpacingTop Specifies the top spacing.
         * @return Returns the top spacing.
         */
        spacingTop(sRectangle?: T, nSpacingTop?: number): number;
        /**
         * Sets or retrieves the right spacing of a rectangle or retrieves the right comprehensive rectangle spacing.
         * @param sRectangle Specifies the name of the rectangle. If omitted the rectangle of the comprehensive rectangle will be calculated.
         * @param nSpacingLeft Specifies the right spacing.
         * @return Returns the right spacing.
         */
        spacingRight(sRectangle?: T, nSpacingRight?: number): number;
        /**
         * Sets or retrieves the bottom spacing of a rectangle or retrieves the bottom comprehensive rectangle spacing.
         * @param sRectangle Specifies the name of the rectangle. If omitted the rectangle of the comprehensive rectangle will be calculated.
         * @param nSpacingBottom Specifies the bottom spacing.
         * @return Returns the bottom spacing.
         */
        spacingBottom(sRectangle?: T, nSpacingBottom?: number): number;
        /**
         * Retrieves the horizontal spacing of a rectangle or the comprehensive rectangle.
         * @param sRectangle Specifies the name of the rectangle. If omitted the rectangle of the comprehensive rectangle will be calculated.
         * @return Returns the horizontal spacing.
         */
        spacingHorizontal(sRectangle?: T): number;
        /**
         * Retrieves the vertical spacing of a rectangle or the comprehensive rectangle.
         * @param sRectangle Specifies the name of the rectangle. If omitted the rectangle of the comprehensive rectangle will be calculated.
         * @return Returns the vertical spacing.
         */
        spacingVertical(sRectangle?: T): number;
        /**
         * Sets or retrieves the left hint correction of a rectangle.
         * @param sRectangle Specifies the name of the rectangle.
         * @param nHintLeft Specifies the left hint correction.
         * @return Returns the left hint correction.
         */
        hintCorrectionLeft(sRectangle: T, nHintLeft?: number): number;
        /**
         * Sets or retrieves the top hint correction of a rectangle.
         * @param sRectangle Specifies the name of the rectangle.
         * @param nHintTop Specifies the top hint correction.
         * @return Returns the top hint correction.
         */
        hintCorrectionTop(sRectangle: T, nHintTop?: number): number;
        /**
         * Sets or retrieves the right hint correction of a rectangle.
         * @param sRectangle Specifies the name of the rectangle.
         * @param nHintRight Specifies the right hint correction.
         * @return Returns the right hint correction.
         */
        hintCorrectionRight(sRectangle: T, nHintRight?: number): number;
        /**
         * Sets or retrieves the bottom hint correction of a rectangle.
         * @param sRectangle Specifies the name of the rectangle.
         * @param nHintBottom Specifies the bottom hint correction.
         * @return Returns the bottom hint correction.
         */
        hintCorrectionBottom(sRectangle: T, nHintBottom?: number): number;
        /**
         * Retrieves the shifted rectangle.
         * @param sRectangle Specifies the name of the rectangle. If omitted the rectangle of the comprehensive rectangle will be calculated.
         * @return Returns the rectangle.
         */
        shiftRectangle(sRectangle?: T): Rectangle;
        /**
         * Positions the rectangles.
         * @return Returns `true` if the position is changed.
         */
        position(): boolean;
        /**
         * Resizes the rectangles.
         * @return Returns which properties are changed (`none`, `width`, `height` or `both`).
         */
        resize(): "none" | "width" | "height" | "both";
        /**
         * Verifies if the supplied coordinate is within one or more rectangles.
         * @param nX Specifies the left position.
         * @param nY Specifies the top position.
         * @param bSpacing Specifies if the spacing needs to be applied.
         * @return Returns `true` if the coordinate is within one or more rectangles.
         */
        isCoordinateIn(nX: number | undefined, nY: number | undefined, bSpacing?: boolean): boolean;
        /**
         * Verifies if the supplied coordinate is within the comprehensive rectangle.
         * @param nX Specifies the left position.
         * @param nY Specifies the top position.
         * @param bInner Specifies if the inner rectangle needs to be verified.
         * @param pCorrection Specifies correction coordinates.
         * @return Returns `true` if the coordinate is within the comprehensive rectangle.
         */
        isCoordinateInRectangles(nX: number | undefined, nY: number | undefined, bInner?: boolean, pCorrection?: Coordinate): boolean;
        /**
         * Verifies if the supplied coordinate is within the specified rectangle.
         * @param sRectangle Specifies the name of the rectangle.
         * @param nX Specifies the left position.
         * @param nY Specifies the top position.
         * @param bSpacing Specifies if spacing needs to be included.
         * @return Returns `true` if the coordinate is within the specified rectangle.
         */
        isCoordinateInRectangle(sRectangle: T, nX: number | undefined, nY: number | undefined, bSpacing?: boolean): boolean;
    }
    export class Spacing extends Coordinate {
        /**
         * Constructs a new spacing container.
         * @param nLeft Specifies the left spacing.
         * @param nTop Specifies the top spacing.
         * @param nRight Specifies the right spacing.
         * @param nBottom Specifies the bottom spacing.
         */
        constructor(nLeft?: number, nTop?: number, nRight?: number, nBottom?: number);
        /** Retrieves the total horizontal spacing. */
        get horizontal(): number;
        /** Retrieves the total vertical spacing. */
        get vertical(): number;
    }
}

declare module "tripetto/module/serializer" {
    import { Stack, TAny } from "tripetto/module/functional";

    export type TSerializePrimitives = string | number | boolean | undefined | null | ISerialize;
    export type TSerializeTypes = TSerializePrimitives | TSerializePrimitives[];
    export interface ISerialize {
        /** Retrieves the specified property. */
        readonly [property: string]: TSerializeTypes;
    }
    /**
     * Serializes a source.
     * @param pSource Reference to the source.
     * @param pData Reference to the data object which receives the serialized data.
     */
    export function serializeTo<T, S extends ISerialize>(pSource: T, pData: S): S;
    /**
     * Deserializes data to a target.
     * @param pTarget Reference to the target.
     * @param pData Reference to the serialized data.
     * @param pAfterwards Optional stack with calls that are invoked after the
     * structural deserialization is done.
     */
    export function deserializeFrom<T, S extends ISerialize>(pTarget: T, pData: S, pAfterwards?: Stack): T;
    export interface IProp {
        /** Name of the propery. */
        readonly property: string;
        /** Value of the property. */
        readonly value: TAny;
    }
    /**
     * Finds all the serializable props.
     * @param pSource Reference to the source.
     */
    export function serializableProps<T>(pSource: T): IProp[];
    /**
     * Finds all the deserializable props.
     * @param pSource Reference to the source.
     */
    export function deserializableProps<T>(pSource: T): IProp[];
    /** Decorator which marks a property to be deserialized. */
    export function deserialize<T>(pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor): void;
    /** Decorator which marks a function as the deserializer of an object. */
    export function deserializer<T>(pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor): void;
    /** Decorator which marks a function as the serializer of an object. */
    export function serializer<T>(pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor): void;
    /** Decorator which marks a property to be serialized. */
    export function serialize<T>(pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor): void;
}

declare module "tripetto/module/sha2" {
    /**
     * Hashes the supplied string data using SHA2-224.
     * @param sData Specifies the data to hash.
     * @return Returns the hash string.
     */
    export function SHA2_224(sData: string): string;
    /**
     * Hashes the supplied string data using SHA2-256.
     * @param sData Specifies the data to hash.
     * @return Returns the hash string.
     */
    export function SHA2_256(sData: string): string;
    /**
     * Hashes the supplied string data using SHA2-384.
     * @param sData Specifies the data to hash.
     * @return Returns the hash string.
     */
    export function SHA2_384(sData: string): string;
    /**
     * Hashes the supplied string data using SHA2-512.
     * @param sData Specifies the data to hash.
     * @return Returns the hash string.
     */
    export function SHA2_512(sData: string): string;
    /**
     * Hashes the supplied string data using SHA2-512/224.
     * @param sData Specifies the data to hash.
     * @return Returns the hash string.
     */
    export function SHA2_512_224(sData: string): string;
    /**
     * Hashes the supplied string data using SHA2-512/256.
     * @param sData Specifies the data to hash.
     * @return Returns the hash string.
     */
    export function SHA2_512_256(sData: string): string;
    /**
     * Hashes the supplied string data using SHA2-224. This function implements a
     * cache to optimize performance when the same data is hashed multiple times.
     * @param sData Specifies the data to hash.
     * @return Returns the hash string.
     */
    export function CSHA2_224(sData: string): string;
    /**
     * Hashes the supplied string data using SHA2-256. This function implements a
     * cache to optimize performance when the same data is hashed multiple times.
     * @param sData Specifies the data to hash.
     * @return Returns the hash string.
     */
    export function CSHA2_256(sData: string): string;
    /**
     * Hashes the supplied string data using SHA2-384. This function implements a
     * cache to optimize performance when the same data is hashed multiple times.
     * @param sData Specifies the data to hash.
     * @return Returns the hash string.
     */
    export function CSHA2_384(sData: string): string;
    /**
     * Hashes the supplied string data using SHA2-512. This function implements a
     * cache to optimize performance when the same data is hashed multiple times.
     * @param sData Specifies the data to hash.
     * @return Returns the hash string.
     */
    export function CSHA2_512(sData: string): string;
    /**
     * Hashes the supplied string data using SHA2-512/224. This function implements a
     * cache to optimize performance when the same data is hashed multiple times.
     * @param sData Specifies the data to hash.
     * @return Returns the hash string.
     */
    export function CSHA2_512_224(sData: string): string;
    /**
     * Hashes the supplied string data using SHA2-512/256. This function implements a
     * cache to optimize performance when the same data is hashed multiple times.
     * @param sData Specifies the data to hash.
     * @return Returns the hash string.
     */
    export function CSHA2_512_256(sData: string): string;
}

declare module "tripetto/module/touch" {
    import { Asset, Stylesheet, TDOMElement } from "tripetto/module/dom";
    import { TArguments } from "tripetto/module/functional";
    import { Hooks, THooks } from "tripetto/module/hookup";
    import { Coordinate, IPoint, Rectangle } from "tripetto/module/metrics";

    /** Type definition for a controller type. */
    export type Type = number;
    /** Type definition for controller types. */
    export type Types = number;
    export const enum Events {
        OnTouchStart = 1,
        OnTouchMove = 2,
        OnTouchEnd = 4,
        OnMouseDown = 8,
        OnMouseMove = 16,
        OnMouseUp = 32,
        OnMouseWheel = 64,
    }
    export const enum Priorities {
        Lowest = 1,
        Low = 2,
        Normal = 3,
        High = 4,
        Highest = 5,
    }
    export type TAsset = Asset | TDOMElement;
    export interface IController {
        /** Specifies the id for the controller. */
        readonly id: string;
        /** Specifies the types the processor handles. */
        readonly types: Types;
        /** Specifies the processor function. */
        readonly processor?: (nEvent: Events) => void;
        /** Specifies the processor priority (a higher number means higher priority). */
        readonly priority?: Priorities;
        /** Specifies the function which is invoked when the processing is terminated. */
        readonly terminate?: (() => void) | undefined;
    }
    export interface IEvent<T> {
        /** Specifies the event function. */
        readonly event: ((pEvent: T) => boolean | void) | ((...pArguments: TArguments) => boolean | void) | undefined;
        /** Specifies if the event is called asynchronous. */
        readonly asynchronous?: boolean;
        /** Specifies if the event is cancelable or should always invoked. */
        readonly cancelable?: boolean;
        /** Specifies if the controller should be activated or deactivated. */
        readonly activate?: boolean;
        /** Contains the event payload. */
        readonly payload?: T;
        /** Contains the event arguments. */
        readonly arguments?: TArguments;
    }
    export abstract class Controller<T extends THooks> extends Hooks<T> {
        /**
         * Generates a new unique controller type.
         * @return Returns the new type.
         */
        static createType(): Type;
        /**
         * Constructs a new controller.
         * @param pController Reference to the static part of the controller.
         * @param pAsset Specifies the asset for the controller.
         * @param sMode Specifies the controller mode. In single mode only one
         * controller of the same type is allowed on an asset.
         * @param pStylesheet Reference to the stylesheet to use for styles.
         * @param pArea Specifies an optional area for the controller.
         * @param nType Specifies the controller type.
         */
        protected constructor(
            pController: IController,
            pAsset: TAsset,
            sMode: "single" | "multiple",
            pStylesheet?: Stylesheet,
            pArea?: Coordinate | (() => Coordinate),
            nType?: Type
        );
        /**
         * Retrieves the rectangle for the specified asset or the first attached asset.
         * @return Returns the bounding rectangle.
         */
        protected get rectangle(): Rectangle;
        /** Contains the identifier of the controller. */
        get id(): number;
        /** Contains the controller type. */
        get type(): Type;
        /** Retrieves the stylesheet. */
        get stylesheet(): Stylesheet;
        /** Contains a reference to the first asset attached to the controller. */
        get asset(): Asset;
        /** Retrieves the controller area. */
        get area(): Coordinate;
        /** Sets the controller area. */
        set area(pArea: Coordinate);
        /** Retrieves if the controller is active. */
        get isActive(): boolean;
        /** Retrieves if the controller is disabled. */
        get isDisabled(): boolean;
        /** Specifies if the controller is disabled. */
        set isDisabled(bDisabled: boolean);
        /** Retrieves if the controller is detached. */
        get isDetached(): boolean;
        /** Activates the controller. */
        protected activate(): void;
        /** Deactivates the controller. */
        protected deactivate(): void;
        /**
         * Emits a controller event.
         * @param pEvent Specifies the event properties.
         * @return Returns the return value of the event function which is
         * executed (or `true` when the event did not return a value or the event
         * is asynchronous).
         */
        protected emit<Event>(pEvent: IEvent<Event>): boolean;
        /**
         * Invoked when a controller is initialized.
         * @event
         */
        onRegister(): void;
        /**
         * Invoked when a controller is destroyed.
         * @return Returns `true` if the controller is detached.
         * @event
         */
        onDestroy(): boolean;
        /** Enables the controller. */
        enable(): void;
        /** Disables the controller. */
        disable(): void;
        /** Cancels the controller. */
        cancel(): void;
        /** Destroys the controller. */
        destroy(): void;
    }
    export const enum Buttons {
        /** No buttons are pressed. */
        None = 0,
        /** Left mouse button press. */
        MouseLeft = 1,
        /** Right mouse button press. */
        MouseRight = 2,
        /** Middle mouse button press. */
        MouseMiddle = 4,
        /** X1 (back) mouse button press. */
        MouseBack = 8,
        /** X2 (forward) mouse button press. */
        MouseForward = 16,
        /** Shift key is pressed. */
        KeyboardShift = 32,
        /** Ctrl key is pressed. */
        KeyboardCtrl = 64,
        /** Alt key is pressed. */
        KeyboardAlt = 128,
        /** Meta/Control key is pressed. */
        KeyboardMeta = 256,
        /** Pen contact. */
        PenContact = 512,
        /** Pen contact with barrel button pressed. */
        PenContactWithBarrel = 1024,
        /** Pen contact with eraser button pressed. */
        PenEraser = 2048,
    }
    /**
     * Implements the point class. Each touch or interaction point is stored as a
     * point instance which contains the characteristics of the point.
     */
    export class Point {
        /**
         * Clones the supplied point.
         * @param pPoint Specifies the point to clone.
         * @return Returns a clone of the point.
         */
        static clone(pPoint: Point): Point;
        /**
         * Iterates through the controllers attached to the supplied point.
         * @param pPoint Specifies the point.
         * @param nType Specifies the controller type (supply `*` to select all types).
         * @param fnController Specifies the function to call for each controller.
         * @param fnController.pController Reference to the controller.
         * @param fnController.pPoint Reference to the point.
         * @param pOptions Specifies options for the iteration.
         */
        static each<T extends Controller<THooks>>(
            pPoint: Point | undefined,
            nType: Type | "*",
            fnController: (pController: T, pPoint: Point) => boolean | void,
            pOptions?: {
                /**
                 * Specifies if the function should iterate through controllers on
                 * all underlying assets which have a controller (with the specified
                 * type) instead of iterating through only controllers on the first
                 * asset that has a controller (with the specified type).
                 */
                Bubble?: boolean;
                /** Verifies if the point is within the controller. */
                Verify?: boolean;
            }
        ): void;
        /**
         * Iterates through all the controllers which are within the supplied point.
         * @param pPoint Specifies the point.
         * @param nType Specifies the controller type (supply `*` to select all types).
         * @param sMode Specifies if the iteration should bubble up.
         * @param fnController Specifies the function to call for each controller.
         * @param fnController.pController Reference to the controller.
         * @param fnController.pPoint Reference to the point.
         */
        static controllers<T extends Controller<THooks>>(
            pPoint: Point | undefined,
            nType: Type | "*",
            sMode: "stop" | "bubble",
            fnController: (pController: T, pPoint: Point) => boolean | void
        ): void;
        /**
         * Retrieves the identifier of a point.
         * @param pPoint Reference to the point.
         * @return Returns the identifier or `undefined` if the point is invalid.
         */
        static id(pPoint: Point | undefined): number | undefined;
        /**
         * Calculates the mean point for the supplied points.
         * @param pPoints Array of points.
         * @return Returns the mean.
         */
        static mean(...pPoints: Point[]): IPoint;
        /**
         * Calculates the propertional mean point for the supplied points. The
         * mean is relatively moved to the point with the largest movement.
         * @param pPointA Specifies point A.
         * @param pPointB Specifies point B.
         * @return Returns the propertional mean.
         */
        static proportional(pPointA: Point, pPointB: Point): IPoint;
        /**
         * Calculates the difference between two points.
         * @param pPointA Specifies the first point.
         * @param pPointB Specifies the second point.
         * @return Returns the horizontal and vertical difference.
         */
        static difference(pPointA: IPoint, pPointB: IPoint): IPoint;
        /**
         * Determines the controller types and target for the supplied asset.
         * @param pAsset Reference to the asset.
         * @return Returns an object with the types and target.
         */
        static typesAndTarget(pAsset: Asset | undefined): {
            types: Types;
            target: Asset | undefined;
        };
        /**
         * Constructs a new point.
         * @param nId Specifies the identifier of the point.
         * @param pTarget Specifies the `EventTarget` of the point.
         * @param nX Specifies the initial absolute horizontal coordinate.
         * @param nY Specifies the initial absolute vertical coordinate.
         * @param bTouch Specifies if the point is a touch contact.
         * @param bPen Specifies if the point is a pen contact.
         * @param nButtons Specifies the mouse and keyboard buttons.
         * @param nClicks Specifies the number of clicks.
         * @param nWheelX Specifies the horizontal mouse wheel delta.
         * @param nWheelY Specifies the vertical mouse wheel delta.
         * @param nPressure Specifies the pressure of the pointer contact.
         * @param nTiltX Specifies the angle between the Y-Z plane and the plane
         * containing the pen axis and the Y axis in the range of -90 to +90.
         * @param nTiltY Specifies the angle between the X-Z and transducer-X planes.
         * @param bClone Specifies if the point is a clone.
         */
        constructor(
            nId: number,
            pTarget: Asset | undefined,
            nX: number,
            nY: number,
            bTouch: boolean,
            bPen: boolean,
            nButtons: Buttons,
            nClicks: number,
            nWheelX: number,
            nWheelY: number,
            nPressure: number,
            nTiltX: number,
            nTiltY: number,
            bClone: boolean
        );
        /** Contains the identifier of the point. */
        get id(): number;
        /** Returns if the point is active. */
        get isActive(): boolean;
        /** Returns the target asset. */
        get target(): Asset;
        /** Contains the initial position of the point. */
        get initialPosition(): IPoint;
        /** Contains the current position of the point. */
        get currentPosition(): IPoint;
        /** Retrieves the movement delta since the last call of this property. */
        get delta(): IPoint;
        /** Returns if the point is a mouse contact. */
        get isMouse(): boolean;
        /** Returns if the point is a touch contact. */
        get isTouch(): boolean;
        /** Returns if the point is a pen contact. */
        get isPen(): boolean;
        /** Returns if the point is on an input element. */
        get isInput(): boolean;
        /** Returns if the point is on a label element. */
        get isLabel(): boolean;
        /** Retrieves the pointer type. */
        get type(): "mouse" | "touch" | "pen";
        /** Specifies the controller types that can occur for this point. */
        get types(): Types;
        /** Retrieves the button flags attached to the point. */
        get buttons(): Buttons;
        get clicks(): number;
        /** Retrieves the mouse horizontal wheel delta (x-axis). */
        get wheelX(): number;
        /** Retrieves the mouse vertical wheel delta (y-axis). */
        get wheelY(): number;
        /** Retrieves the pressure of the pointer contact in range of 0 to 1. */
        get pressure(): number;
        /**
         * Retrieves the angle between the Y-Z plane and the plane containing the pen
         * axis and the Y axis in the range of -90 to +90. A positive X tilt is to
         * the right.
         */
        get tiltX(): number;
        /**
         * Retrieves the angle between the X-Z and transducer-X planes. A positive Y
         * tilt is toward the user.
         */
        get tiltY(): number;
        /** Returns the horizontal difference in pixels between the initial and current position. */
        get diffX(): number;
        /** Returns the vertical difference in pixels between the initial and current position. */
        get diffY(): number;
        /** Returns the horizontal mean of the initial and current position. */
        get meanX(): number;
        /** Returns the vertical mean of the initial and current position. */
        get meanY(): number;
        /** Returns the radius in pixels between the initial and current position. */
        get radius(): number;
        /** Returns the angle in degrees between the initial and current position (top=90, right=0, bottom=-90, right=-180/180). */
        get angle(): number;
        /** Returns the start time of the point. */
        get time(): number;
        /** Returns the duration in milliseconds between the start and the end of the point. */
        get duration(): number;
        /** Returns the horizontal velocity. */
        get velocityX(): number;
        /** Returns the vertical velocity. */
        get velocityY(): number;
        /** Returns if the point is on an asset with focus. */
        get hasVirtualFocus(): boolean;

        /**
         * Moves the current position of the point.
         * @param nX Specifies the horizontal coordinate.
         * @param nY Specifies the vertical coordinate.
         * @param bFinal Specifies if the point is final.
         * @param nButtons Specifies the mouse and keyboard buttons.
         * @param nPressure Specifies the pressure of the pointer contact.
         * @return Returns `true` if there was a change.
         */
        move(nX: number, nY: number, bFinal: boolean, nButtons: Buttons, nPressure: number, nTiltX: number, nTiltY: number): boolean;
        /**
         * Reinits the initial position.
         * @param nDiffMin Sets a minimal diff value.
         */
        reinit(nDiffMin?: number): void;
        /**
         * Returns the distance in pixels between the current position and the supplied coordinate.
         * @param pPoint Specifies the point or the coordinate to calculate.
         * @return Returns the distance in pixels.
         */
        distance(pPoint?: Point | IPoint): number;
        /**
         * Returns the alpha angle between the current position and the supplied coordinate.
         * @param pPoint Specifies the point or the coordinate to calculate.
         * @return Returns the angle in degrees (top=90, right=0, bottom=-90, right=-180/180).
         */
        alpha(pPoint?: Point | IPoint): number;
        /**
         * Returns the radial difference between the current position and the supplied coordinate.
         * @param pPoint Specifies the point or the coordinate to calculate.
         * @return Returns the distance in pixels.
         */
        radialDistance(pPoint?: Point | IPoint): number;
        /**
         * Iterates through the controllers.
         * @param fnController Specifies the controller callback function. This
         * function should return `true` if the iteration should break.
         * @param nType Specifies an optional controller type.
         * @return Returns `true` if the iteration is breaked.
         */
        forEachController<T extends Controller<THooks>>(
            fnController: (pController: T, pPoint: Point) => boolean | void,
            nType?: Type | "*"
        ): boolean;
        /**
         * Returns the position of the point within the attached or specified asset.
         * @param pAsset Specifies an optional asset. If omitted, the attached asset will be used.
         * @return Returns the position.
         */
        translatePointToAsset(pPoint: IPoint, pAsset?: Asset): IPoint;
        /**
         * Returns the position of the point within the attached or specified asset.
         * @param pAsset Specifies an optional asset. If omitted, the attached asset will be used.
         * @return Returns the position.
         */
        translateToAsset(pAsset?: Asset): IPoint;
        /**
         * Retrieves if the current point types implement a certain gesture.
         * @param sGesture Specifies the gesture.
         * @return Returns `true` if the point types implement the gesture.
         */
        implements(sGesture: TGesture): boolean;
        /**
         * Checks if the point is on an asset with focus capture.
         * @param pTarget Specifies the target asset.
         * @param bDisable Specifies if the point needs to be disabled.
         * @return Returns `true` if the point is on an asset with focus capture.
         */
        focus(pTarget: Asset | undefined, bDisable?: boolean): boolean;
        /** Performs cleanup when the instance is destroyed. */
        destroy(): void;
    }
    export interface IPoints {
        /** Retrieves the specified point. */
        [point: string]: Point;
    }
    /**
     * Type definition for the capturing modes. Possible values:
     * - `void`: Disable all controllers on the asset and all parent assets and block all events;
     * - `disable`: Disable controllers on the asset but not on the parent assets;
     * - `input`: Treat the asset as an input element and allows certain events to pass to avoid breaking normal browser behavior;
     * - `exclusive`: Only use touch controllers and disable the default browser behavior;
     * - `stop`: Only allow touch controllers on the asset and not on the parent assets.
     */
    export type TMode = "void" | "disable" | "input" | "exclusive" | "stop";
    /** Type definition for the gestures. */
    export type TGesture = "tap" | "doubletap" | "drag" | "scroll" | "hold" | "snap";
    /**
     * Defines the notification type.
     * @param TNotification.nEvent Contains the event identifier.
     */
    export type TNotification = (nEvent: Events) => void | boolean;
    class Coordinator {
        /** Contains the default stylesheet. */
        static stylesheet: Stylesheet;

        /** Retrieves a unique index number. */
        static get enumerator(): number;
        /** Returns the current number of active controllers. */
        static get count(): number;
        /** Retrieves the current number of touches. */
        static get touches(): number;
        /** Returns the current number of points. */
        static get touched(): number;
        /** Returns the controller type which is currently captured. */
        static get captured(): Type;
        /** Retrieves if the controller host is listening for events. */
        static get isListening(): boolean;
        /** Retrieves if all controllers are disabled. */
        static get isDisabled(): boolean;
        /** Specifies if all controllers are disabled. */
        static set isDisabled(bDisabled: boolean);
        /** Retrieves if the controller host is involved in some kind of drag action. */
        static get isDragging(): boolean;
        /** Retrieves if the controller host is involved in some kind of scroll action. */
        static get isScrolling(): boolean;
        /** Retrieves if there is a touch action active. */
        static get isTouch(): boolean;
        /** Retrieves if there was a recent touch active. */
        static get wasTouched(): boolean;
        /** Retrieves if there is a mouse action active. */
        static get isMouse(): boolean;
        /** Retrieves if there is a pen action active. */
        static get isPen(): boolean;
        /** Retrieves if physical focus is on an input element. */
        static get isInput(): boolean;
        /** Retrieves if the browser supports pointer events. */
        static get supportsPointerEvents(): boolean;
        /** Returns the list with points. */
        static get points(): IPoints;
        /** Retrieves the first point if available. */
        static get firstPoint(): Point | undefined;
        /** Retrieves the second point if available. */
        static get secondPoint(): Point | undefined;
        /** Returns the asset which currently has virtual focus. */
        static get assetWithVirtualFocus(): Asset | undefined;
        /** Returns the asset which currently has physical focus. */
        static get assetWithPhysicalFocus(): Asset | undefined;
        /** Retrieves if logging is enabled. */
        static get logging(): boolean;
        /** Specifies if logging is enabled. */
        static set logging(bLog: boolean);

        /**
         * Adds or removes a controller to/from the controller inventory.
         * @param pAsset Specifies the asset.
         * @param nAdd Specifies the controller identifier to add.
         * @param nRemove Specifies the controller identifier to remove.
         */
        static inventory(pAsset: Asset, nAdd?: number, nRemove?: number): void;
        /**
         * Returns the attached controller types for the specified asset.
         * @param pAsset Reference to the asset.
         * @return Returns a number with all the types.
         */
        static types(pAsset: Asset): Types;
        /**
         * Specifies if certain types implement a specific gesture.
         * @param sGesture Specifies the gesture.
         * @param nTypes Specifies the types.
         */
        static implement(sGesture: TGesture, nTypes: Types): void;
        /**
         * Retrieves the types which implements a certain gesture.
         * @param sGesture Specifies the gesture.
         * @return Returns the types.
         */
        static implements(sGesture: TGesture): Types;
        /**
         * Register a new controller to the host.
         * @param pStatic Reference to the static part of the controller.
         * @param pController Specifies the controller instance to register.
         * @return Returns the controller identifier or zero if the controller is not attached.
         */
        static register(pStatic: IController, pController: Controller<THooks>): number;
        /**
         * Unregister an existing controller from the host.
         * @param pReference Reference to the controller which should be unregistered.
         */
        static unregister(pController: Controller<THooks>): void;
        /**
         * Unregisters all existing controllers for the specified asset from the host.
         * @param pAsset Specifies the asset.
         * @param nType Specifies the optional controller type to unregister. If
         * omitted or when `*` is supplied all controllers will be detached.
         * @return Returns true if one or more controllers are unregistered.
         */
        static unregisterAsset(pAsset: Asset | TDOMElement, nType?: Type | "*"): boolean;
        /**
         * Registers a notification. Notifications are kept informed about the
         * controller events. They can even cancel the controller process when the
         * notification function returns `false`.
         * @param sNotification Contains the name of the notification.
         * @param fnNotification Contains the notification callback.
         */
        static registerNotification(sNotification: string, fnNotification: TNotification): void;
        /**
         * Unregister a notification.
         * @param sNotification Contains the name of the notification.
         */
        static unregisterNotification(sNotification: string): void;
        /**
         * Returns a reference to the controller with the specified controller identifier.
         * @param pController Reference to the controller or the identifier of the controller.
         * @return Returns a reference to the controller or `undefined` if the controller is not found.
         */
        static controller<T extends Controller<THooks>>(pController: Controller<THooks> | number): T | undefined;
        /**
         * Returns all the controllers for the specified asset/type.
         * @param pAsset Specifies the asset (supply `*` to query all assets).
         * @param nType Specifies the controller type (supply `*` to select all types).
         * @param fnController Specifies the controller callback function.
         */
        static each<T extends Controller<THooks>>(pAsset: Asset | "*", nType: Type | "*", fnController: (pController: T) => void): void;
        /**
         * Filters the controllers on the supplied type.
         * @param pAsset Specifies the asset (supply `*` to query all assets).
         * @param nType Specifies the controller type (supply `*` to select all types).
         * @return Returns an array with controllers.
         */
        static filter<T extends Controller<THooks>>(pAsset: Asset | "*", nType: Type | "*"): T[];
        /**
         * Returns all the controllers for the specified target and the underlying
         * assets. If no type is specified all the controllers are returned.
         * @param pTargets Specifies the target asset(s). This can be a single
         * target or an array with targets.
         * @param nType Specifies the controller type (supply `*` to select all types).
         * @param bBubble Specifies if the function should return controllers on all
         * underlying assets which have a controller (with the specified type)
         * instead of returning only controllers on the first asset that has a
         * controller (with the specified type).
         * @return Returns an array with controllers.
         */
        static filterRecursive<T extends Controller<THooks>>(pTargets: Asset | Asset[], nType?: Type | "*", bBubble?: boolean): T[];
        /**
         * Retrieves the first constroller for the specified asset of the specified type.
         * @param pAsset Specifies the asset (supply `*` to query all assets).
         * @param nType Specifies the controller type (supply `*` to select all types).
         * @return Returns the controller or `undefined` if no controller is found.
         */
        static first<T extends Controller<THooks>>(pAsset: Asset | "*", nType: Type | "*"): T | undefined;
        /**
         * Returns the point with the specified identifiers. The first
         * point which matches one of the supplied identifiers is returned.
         * @param pIds List of identifiers for the point.
         * @return Returns the point or `undefined` if no point is found.
         */
        static point(...pIds: (number | undefined)[]): Point | undefined;
        /**
         * Returns the point at the specified index.
         * @param nIndex Index of the point.
         * @return Returns the point or `undefined` if no listening point is found.
         */
        static pointFromIndex(nIndex: number): Point | undefined;
        /**
         * Schedules a task.
         * @param fnCallee Specifies the function to schedule.
         * @param fnCallee.pArguments Optional additional arguments.
         * @param nTimeout Specifies the scheduler timeout in milliseconds.
         * @param pArguments Optional additional arguments which will be passed to the callee.
         */
        static schedule(fnCallee: (...pArguments: TArguments) => void, nTimeout?: number, ...pArguments: TArguments): void;
        /** Invokes the current scheduled task immediately. */
        static scheduleInvoke(): void;
        /** Pauses the current scheduled task. */
        static schedulePause(): void;
        /**
         * Continues the current scheduled task.
         * @param nTimeout Specifies a timeout for the scheduled task.
         */
        static scheduleContinue(nTimeout?: number): void;
        /** Cancels the current scheduled task. */
        static scheduleCancel(): void;
        /**
         * Terminates the specified controller types.
         * @param nType Specifies the controller type to terminate.
         */
        static terminate(nType: Type | "*"): void;
        /**
         * Claims a controller and terminates other controller types.
         * @param nType Specifies the controller type to claim.
         */
        static claim(nType: Type): void;
        /**
         * Capture the specified controller type (other controllers will be ignored
         * as long as the capture remains).
         * @param nType Specifies the controller type to capture.
         */
        static capture(nType: Type): void;
        /** Releases the capture. */
        static release(): void;
        /**
         * Specifies the capturing mode for the asset.
         * @param pAsset Specifies the asset.
         * @param sMode Specifies one of the following modes:
         * - `void`: Disable all controllers on the asset and all parent assets and block all events;
         * - `disable`: Disable controllers on the asset but not on the parent assets;
         * - `input`: Treat the asset as an input element and allows certain events to pass to avoid breaking normal browser behavior;
         * - `exclusive`: Only use touch controllers and disable the default browser behavior;
         * - `stop`: Only allow touch controllers on the asset and not on the parent assets.
         */
        static mode(pAsset: Asset, sMode: TMode): void;
        /** Retrieves if the specified tag name is an input element. */
        static isInputElement(sTagName: string): boolean;
        /**
         * Sets an auto-blur focus to an asset.
         * @param pVirtual Specifies the asset which gains virtual focus.
         * @param pPhysical Specifies the asset which gains physical focus.
         * @param fnBlur Specifies an optional blur callback.
         */
        static focus(pVirtual: Asset, pPhysical?: Asset, fnBlur?: () => void): void;
        /**
         * Blurs the active focus.
         * @param pVirtual Specifies the virtual asset that is blurred. If omitted
         * the asset which currently has virtual focus is blurred.
         */
        static blur(pVirtual?: Asset): void;
        /**
         * Attaches an auto-blur focus and blur event handler.
         * @param pVirtual Specifies the virtual asset.
         * @param pPhysical Specifies the physical asset.
         * @param fnFocus Specifies an optional focus callback.
         * @param fnBlur Specifies an optional blur callback.
         */
        static onFocusOrBlur(pVirtual: Asset, pPhysical: Asset, fnFocus?: () => void, fnBlur?: () => void): void;
        /** Enables the controller host. */
        static enable(): void;
        /** Disables the controller host. */
        static disable(): void;
        /** Detaches and destroys all controllers. */
        static destroy(): void;
    }
    export const enum Directions {
        Bidirectional = 1,
        Horizontal = 2,
        Vertical = 4,
    }

    export { Coordinator as Touch };
}

declare module "tripetto/module/touch-focus" {
    import { Asset } from "tripetto/module/dom";
    import { Controller, Events, Priorities, Types } from "tripetto/module/touch";

    export interface IFocusEvent {
        /** Reference to the focus controller. */
        readonly focus: Focus;
        /** Reference to the asset being touched. */
        readonly asset: Asset;
        /** Contains if the asset has focus. */
        readonly hasFocus: boolean;
    }
    /** Type alias for the `OnFocus` function. */
    export type TFocus = (pFocusEvent: IFocusEvent) => void;
    export class Focus extends Controller<"OnFocus"> {
        /**
         * Contains the function which is invoked when the event occurs.
         * @event
         */
        on: TFocus | undefined;
        /** Retrieves the name of the controller. */
        static get id(): string;
        /** Retrieves the controller types. */
        static get types(): Types;
        /** Retrieves the controller priority. */
        static get priority(): Priorities;

        /**
         * The one and only processor function for the controller. This function is
         * **automatically** invoked by the controller host.
         * ***Do not invoke this method manually as it can disrupt the controller!***
         * @param nEvent Specifies the event type.
         */
        static processor(nEvent: Events): void;
        /**
         * Registers a new focus controller.
         * @param pVirtual Specifies the virtual focus asset.
         * @param pPhysical Specifies the physical focus asset.
         * @param sMode Specifies the focus mode.
         * @param sBlur Specifies if auto-blur should be used. When enabled, the
         * focus is removed if the user touches/clicks an area outside of the
         * virtual asset.
         * @param fnFocus Specifies the function which is called when a focus
         * event occurs.
         * @param nTab Specifies the tab index.
         * @param fnCondition Specifies a focus condition function.
         * @return Returns a reference to the focus controller.
         */
        static on(
            pVirtual: Asset,
            pPhysical: Asset,
            sFocus: "no-auto-focus" | "focus-on-stroke" | "focus-on-tap",
            sBlur: "no-auto-blur" | "auto-blur",
            fnFocus?: TFocus,
            nTab?: number,
            fnCondition?: (pFocus: Focus) => boolean
        ): Focus;
        /**
         * Constructs a new focus controller.
         * @param pVirtual Specifies the virtual focus asset.
         * @param pPhysical Specifies the physical focus asset.
         * @param sFocus Specifies the focus mode.
         * @param sBlur Specifies if auto-blur should be used. When enabled, the
         * focus is removed if the user touches/clicks an area outside of the
         * virtual asset.
         * @param nTab Specifies the tab index.
         * @param fnFocus Specifies the function which is called when a focus
         * event occurs.
         * @param fnCondition Specifies a focus condition function.
         */
        protected constructor(
            pVirtual: Asset,
            pPhysical: Asset,
            sFocus: "no-auto-focus" | "focus-on-stroke" | "focus-on-tap",
            sBlur: "no-auto-blur" | "auto-blur",
            nTab: number,
            fnFocus?: TFocus,
            fnCondition?: (pFocus: Focus) => boolean
        );
        /** Retrieves if the asset has focus. */
        get hasFocus(): boolean;
        /**
         * Invokes the `OnFocus` event.
         * @param pEvent Reference to the event.
         * @return Returns `true` if the event is invoked.
         * @event
         */
        protected onFocus(pEvent: IFocusEvent): void;
        /** Sets the focus. */
        focus(): boolean;
        /** Blurs the focus. */
        blur(): boolean;
        /** Updates the focus controller. */
        update(): void;
        /**
         * Invoked when the focus controller is destroyed.
         * @return Returns `true` if the controller is detached.
         * @event
         */
        onDestroy(): boolean;
    }
}

declare module "tripetto/module/touch-hover" {
    import { Asset } from "tripetto/module/dom";
    import { Controller, Events, Types } from "tripetto/module/touch";

    export type THoverEvents = "OnHover" | "OnHoverStart" | "OnHoverEnd";
    export interface IHoverEvents {
        /** Reference to the asset being hovered. */
        readonly asset: Asset;
        /** Reference to the hover instance. */
        readonly hover: Hover;
        /** Specifies if the asset is hovered or not. */
        readonly isHovered: boolean;
        /** Specifies if the hover occurred using a mouse. */
        readonly isMouse: boolean;
        /** Specifies if the hover occurred using touch input. */
        readonly isTouch: boolean;
        /** Specifies if the hover occurred using pen input. */
        readonly isPen: boolean;
    }
    export interface IHoverEvent extends IHoverEvents {}
    export interface IHoverStartEvent extends IHoverEvents {}
    export interface IHoverEndEvent extends IHoverEvents {}
    export const enum HoverType {
        /** Specifies if the controller should respond to mouse hovers. */
        Mouse = 1,
        /** Specifies if the controller should respond to display touches. */
        Touch = 2,
        /** Specifies if the controller should respond to pen hovers. */
        Pen = 4,
    }
    /** Type alias for the callback functions. */
    export type THover<T> = (pHoverEvent: T) => void;
    export class Hover extends Controller<THoverEvents> {
        /**
         * Contains the function which is invoked when a hover event occurs.
         * @event
         */
        on: THover<IHoverEvent> | undefined;
        /**
         * Contains the function which is invoked when a hover starts.
         * @event
         */
        onStart: THover<IHoverStartEvent> | undefined;
        /**
         * Contains the function which is invoked when a hover ends.
         * @event
         */
        onEnd: THover<IHoverEndEvent> | undefined;
        /** Retrieves the name of the controller. */
        static get id(): string;
        /** Retrieves the controller types. */
        static get types(): Types;

        /**
         * The one and only processor function for the controller. This function is
         * **automatically** invoked by the controller host.
         * ***Do not invoke this method manually as it can disrupt the controller!***
         * @param nEvent Specifies the event type.
         */
        static processor(nEvent: Events): void;
        /**
         * The one and only terminate function for the controller. This function is
         * **automatically** invoked by the controller host.
         * ***Do not invoke this method manually as it can disrupt the controller!***
         */
        static terminate(): void;
        /** Disables all hovers. */
        static disable(): void;
        /** Enables all hovers. */
        static enable(): void;
        /** Stops all hovers. */
        static stop(): void;
        /**
         * Registers a new hover controller.
         * @param pAsset Reference to the asset.
         * @param fnHover Specifies the function which is called when a hover event occurs.
         * @param fnHoverStart Invoked when the hover starts.
         * @param fnHoverEnd Invoked when the hover ends.
         * @param nType Specifies the hover types to respond for.
         * @return Returns a reference to the hover controller.
         */
        static on(
            pAsset: Asset,
            fnHover?: THover<IHoverEvent>,
            fnHoverStart?: THover<IHoverStartEvent>,
            fnHoverEnd?: THover<IHoverEndEvent>,
            nType?: HoverType
        ): Hover;
        /**
         * Registers a new hover controller which responds to mouse hovers.
         * @param pAsset Reference to the asset.
         * @param fnHover Specifies the function which is called when a hover event occurs.
         * @param fnHoverStart Invoked when the hover starts.
         * @param fnHoverEnd Invoked when the hover ends.
         * @return Returns a reference to the hover controller.
         */
        static mouse(
            pAsset: Asset,
            fnHover?: THover<IHoverEvent>,
            fnHoverStart?: THover<IHoverStartEvent>,
            fnHoverEnd?: THover<IHoverEndEvent>
        ): Hover;
        /**
         * Registers a new hover controller which responds to display touches.
         * @param pAsset Reference to the asset.
         * @param fnHover Specifies the function which is called when a hover event occurs.
         * @param fnHoverStart Invoked when the hover starts.
         * @param fnHoverEnd Invoked when the hover ends.
         * @return Returns a reference to the hover controller.
         */
        static touch(
            pAsset: Asset,
            fnHover?: THover<IHoverEvent>,
            fnHoverStart?: THover<IHoverStartEvent>,
            fnHoverEnd?: THover<IHoverEndEvent>
        ): Hover;
        /**
         * Registers a new hover controller which responds to pen hovers.
         * @param pAsset Reference to the asset.
         * @param fnHover Specifies the function which is called when a hover event occurs.
         * @param fnHoverStart Invoked when the hover starts.
         * @param fnHoverEnd Invoked when the hover ends.
         * @return Returns a reference to the hover controller.
         */
        static pen(
            pAsset: Asset,
            fnHover?: THover<IHoverEvent>,
            fnHoverStart?: THover<IHoverStartEvent>,
            fnHoverEnd?: THover<IHoverEndEvent>
        ): Hover;
        /**
         * Registers a new hover controller which responds to pointing device hovers
         * such as mouse and pen, but not display touches.
         * @param pAsset Reference to the asset.
         * @param fnHover Specifies the function which is called when a hover event occurs.
         * @param fnHoverStart Invoked when the hover starts.
         * @param fnHoverEnd Invoked when the hover ends.
         * @return Returns a reference to the hover controller.
         */
        static pointer(
            pAsset: Asset,
            fnHover?: THover<IHoverEvent>,
            fnHoverStart?: THover<IHoverStartEvent>,
            fnHoverEnd?: THover<IHoverEndEvent>
        ): Hover;
        /**
         * Constructs a new hover controller.
         * @param pAsset Reference to the asset.
         * @param fnHover Specifies the function which is called when a hover event occurs.
         * @param fnHoverStart Invoked when the hover starts.
         * @param fnHoverEnd Invoked when the hover ends.
         * @param nType Specifies the hover types to respond for.
         */
        protected constructor(
            pAsset: Asset,
            fnHover?: THover<IHoverEvent>,
            fnHoverStart?: THover<IHoverStartEvent>,
            fnHoverEnd?: THover<IHoverEndEvent>,
            nType?: HoverType
        );
        /** Contains if the hover is active. */
        get isHovered(): boolean;

        /**
         * Invokes the `OnHover` event which indicates when a hover starts or ends.
         * @param pEvent Reference to the event.
         * @event
         */
        protected onHover(pEvent: IHoverEvent): void;
        /**
         * Invokes the `OnHoverStart` event which indicates when a hover starts.
         * @param pEvent Reference to the event.
         * @event
         */
        protected onHoverStart(pEvent: IHoverStartEvent): void;
        /**
         * Invokes the `OnHoverEnd` event which indicates when a hover ends.
         * @param pEvent Reference to the event.
         * @event
         */
        protected onHoverEnd(pEvent: IHoverEndEvent): void;
        /**
         * Invoked when the hover controller is destroyed.
         * @return Returns `true` if the controller is detached.
         * @event
         */
        onDestroy(): boolean;
        /**
         * Specifies that the hover should always work (even when the hovers are
         * globally disabled).
         * @return Returns a reference to the listener.
         */
        alwaysOn(): this;
    }
}

declare module "tripetto/module/touch-keyboard" {
    import { Asset } from "tripetto/module/dom";
    import { Buttons, Controller, Types } from "tripetto/module/touch";
    import { Focus } from "tripetto/module/touch-focus";

    /**
     * Contains all possible key strokes.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
     */
    export type TKey =
        /** Special values */
        | ""
        /** Modifier keys */
        | "Alt"
        | "AltGraph"
        | "CapsLock"
        | "Control"
        | "Fn"
        | "FnLock"
        | "Hyper"
        | "Meta"
        | "NumLock"
        | "ScrollLock"
        | "Shift"
        | "Super"
        | "Symbol"
        | "SymbolLock"
        /** Whitespace keys */
        | "Enter"
        | "Tab"
        | " "
        /** Navigation keys */
        | "ArrowDown"
        | "ArrowLeft"
        | "ArrowRight"
        | "ArrowUp"
        | "End"
        | "Home"
        | "PageDown"
        | "PageUp"
        /** Editing keys */
        | "Backspace"
        | "Clear"
        | "Copy"
        | "CrSel"
        | "Cut"
        | "Delete"
        | "EraseEof"
        | "ExSel"
        | "Insert"
        | "Paste"
        | "Redo"
        | "Undo"
        /** UI keys */
        | "Accept"
        | "Again"
        | "Attn"
        | "Cancel"
        | "ContextMenu"
        | "Escape"
        | "Execute"
        | "Find"
        | "Finish"
        | "Help"
        | "Pause"
        | "Play"
        | "Props"
        | "Select"
        | "ZoomIn"
        | "ZoomOut"
        /** Device keys */
        | "BrightnessDown"
        | "BrightnessUp"
        | "Eject"
        | "LogOff"
        | "Power"
        | "PowerOff"
        | "PrintScreen"
        | "Hibernate"
        | "Standby"
        | "WakeUp"
        /** IME and composition keys */
        | "AllCandidates"
        | "Alphanumeric"
        | "CodeInput"
        | "Compose"
        | "Convert"
        | "Dead"
        | "FinalMode"
        | "GroupFirst"
        | "GroupLast"
        | "GroupNext"
        | "GroupPrevious"
        | "ModeChange"
        | "NextCandidate"
        | "NonConvert"
        | "PreviousCandidate"
        | "Process"
        | "SingleCandidate"
        /** Function keys */
        | "F1"
        | "F2"
        | "F3"
        | "F4"
        | "F5"
        | "F6"
        | "F7"
        | "F8"
        | "F9"
        | "F10"
        | "F11"
        | "F12"
        | "F13"
        | "F14"
        | "F15"
        | "F16"
        | "F17"
        | "F18"
        | "F19"
        | "F20"
        | "Soft1"
        | "Soft2"
        | "Soft3"
        | "Soft4"
        /** Phone keys */
        | "AppSwitch"
        | "Call"
        | "Camera"
        | "CameraFocus"
        | "EndCall"
        | "GoBack"
        | "GoHome"
        | "HeadsetHook"
        | "LastNumberRedial"
        | "Notification"
        | "MannerMode"
        | "VoiceDial"
        /** Multimedia keys */
        | "ChannelDown"
        | "ChannelUp"
        | "MediaFastForward"
        | "MediaPause"
        | "MediaPlay"
        | "MediaPlayPause"
        | "MediaRecord"
        | "MediaRewind"
        | "MediaStop"
        | "MediaTrackNext"
        | "MediaTrackPrevious"
        /** Audio control keys */
        | "AudioBalanceLeft"
        | "AudioBalanceRight"
        | "AudioBassDown"
        | "AudioBassBoostDown"
        | "AudioBassBoostToggle"
        | "AudioBassBoostUp"
        | "AudioBassUp"
        | "AudioFaderFront"
        | "AudioFaderRear"
        | "AudioSurroundModeNext"
        | "AudioTrebleDown"
        | "AudioTrebleUp"
        | "AudioVolumeDown"
        | "AudioVolumeMute"
        | "AudioVolumeUp"
        | "MicrophoneToggle"
        | "MicrophoneVolumeDown"
        | "MicrophoneVolumeMute"
        | "MicrophoneVolumeUp"
        /** TV control keys */
        | "TV"
        | "TV3DMode"
        | "TVAntennaCable"
        | "TVAudioDescription"
        | "TVAudioDescriptionMixDown"
        | "TVAudioDescriptionMixUp"
        | "TVContentsMenu"
        | "TVDataService"
        | "TVInput"
        | "TVInputComponent1"
        | "TVInputComponent1"
        | "TVInputComposite1"
        | "TVInputComposite2"
        | "TVInputHDMI1"
        | "TVInputHDMI4"
        | "TVInputHDMI4"
        | "TVInputHDMI4"
        | "TVInputVGA1"
        | "TVMediaContext"
        | "TVNetwork"
        | "TVNumberEntry"
        | "TVPower"
        | "TVRadioService"
        | "TVSatellite"
        | "TVSatelliteBS"
        | "TVSatelliteCS"
        | "TVSatelliteToggle"
        | "TVTerrestrialAnalog"
        | "TVTerrestrialDigital"
        | "TVTimer"
        /** Media controller keys */
        | "AVRInput"
        | "AVRPower"
        | "ColorF0Red"
        | "ColorF1Green"
        | "ColorF2Yellow"
        | "ColorF3Blue"
        | "ColorF4Grey"
        | "ColorF5Brown"
        | "ClosedCaptionToggle"
        | "Dimmer"
        | "DisplaySwap"
        | "DVR"
        | "Exit"
        | "FavoriteClear0"
        | "FavoriteClear1"
        | "FavoriteClear2"
        | "FavoriteClear3"
        | "FavoriteRecall0"
        | "FavoriteRecall1"
        | "FavoriteRecall2"
        | "FavoriteRecall3"
        | "FavoriteStore0"
        | "FavoriteStore1"
        | "FavoriteStore2"
        | "FavoriteStore3"
        | "Guide"
        | "GuideNextDay"
        | "GuidePreviousDay"
        | "Info"
        | "InstantReplay"
        | "Link"
        | "ListProgram"
        | "LiveContent"
        | "Lock"
        | "MediaApps"
        | "MediaAudioTrack"
        | "MediaLast"
        | "MediaSkipBackward"
        | "MediaSkipForward"
        | "MediaStepBackward"
        | "MediaStepForward"
        | "MediaTopMenu"
        | "NavigateIn"
        | "NavigateNext"
        | "NavigateOut"
        | "NavigatePrevious"
        | "NextFavoriteChannel"
        | "NextUserProfile"
        | "OnDemand"
        | "Pairing"
        | "PinPDown"
        | "PinPMove"
        | "PinPToggle"
        | "PinPUp"
        | "PlaySpeedDown"
        | "PlaySpeedReset"
        | "PlaySpeedUp"
        | "RandomToggle"
        | "RcLowBattery"
        | "RecordSpeedNext"
        | "RfBypass"
        | "ScanChannelsToggle"
        | "ScreenModeNext"
        | "Settings"
        | "SplitScreenToggle"
        | "STBInput"
        | "groupnext"
        | "Subtitle"
        | "Teletext"
        | "VideoModeNext"
        | "Wink"
        | "ZoomToggle"
        /** Speech recognition keys */
        | "SpeechCorrectionList"
        | "SpeechInputToggle"
        /** Document keys */
        | "Close"
        | "New"
        | "Open"
        | "Print"
        | "Save"
        | "SpellCheck"
        | "MailForward"
        | "MailReply"
        | "MailSend"
        /** Application selector keys */
        | "LaunchCalculator"
        | "LaunchCalendar"
        | "LaunchContacts"
        | "LaunchMail"
        | "LaunchMediaPlayer"
        | "LaunchMusicPlayer"
        | "LaunchMyComputer"
        | "LaunchPhone"
        | "LaunchScreenSaver"
        | "LaunchSpreadsheet"
        | "LaunchWebBrowser"
        | "LaunchWebCam"
        | "LaunchWordProcessor"
        | "LaunchApplication1"
        | "LaunchApplication2"
        | "LaunchApplication3"
        | "LaunchApplication4"
        | "LaunchApplication5"
        | "LaunchApplication6"
        | "LaunchApplication7"
        | "LaunchApplication8"
        | "LaunchApplication9"
        | "LaunchApplication10"
        | "LaunchApplication11"
        | "LaunchApplication12"
        | "LaunchApplication13"
        | "LaunchApplication14"
        | "LaunchApplication15"
        | "LaunchApplication16"
        /** Browser control keys */
        | "BrowserBack"
        | "BrowserFavorites"
        | "BrowserForward"
        | "BrowserHome"
        | "BrowserRefresh"
        | "BrowserSearch"
        | "BrowserStop"
        /** Numeric keypad keys */
        | "+"
        | "-"
        | "/"
        | "*";
    export interface IKeyboardEvent {
        /** Reference to the keyboard instance. */
        readonly keyboard: Keyboard;
        /** Reference to the asset which receives the keystroke. */
        readonly asset: Asset;
        /** Contains the pressed key name. */
        readonly key: TKey;
        /** Contains the key value. */
        readonly value: string;
        /** Contains the modifier keys. */
        readonly modifiers: Buttons;
        /** Contains if a modifier key is pressed. */
        readonly hasModifiers: boolean;
        /** Contains if the key is pressed. */
        readonly isKeyDown: boolean;
        /** Contains if the key is released. */
        readonly isKeyUp: boolean;
        /** Contains if the Alt-key is pressed. */
        readonly isAlt: boolean;
        /** Contains if the Ctrl-key is pressed. */
        readonly isCtrl: boolean;
        /** Contains if the Shift-key is pressed. */
        readonly isShift: boolean;
        /** Contains if the Meta-key is pressed. */
        readonly isMeta: boolean;
        /** Contains if the key is being held down (automatically repeating). */
        readonly isRepeat: boolean;
        /** Contains if an input element is active. */
        readonly isInput: boolean;
        /** Contains if the event is global. */
        readonly isGlobal: boolean;
    }
    /** Type alias for the callback function. */
    export type TKeyboard = (pKeyboardEvent: IKeyboardEvent) => boolean | void;
    /** Specifies the event types. */
    export type TEvents = "keyup" | "keydown" | "any";
    export class Keyboard extends Controller<"OnKey"> {
        /**
         * Contains the function which is invoked when a keyboard event occurs.
         * @event
         */
        on: TKeyboard | undefined;

        /** Retrieves the name of the controller. */
        static get id(): string;
        /** Retrieves the controller types. */
        static get types(): Types;
        /** Retrieves if a key is down. */
        static get isKeyDown(): boolean;

        /**
         * Registers a new global keyboard controller.
         * @param pAsset Reference to the asset.
         * @param fnKey Specifies the function which is called when a key is pressed.
         * @param sEvents Specifies which events need to be emitted.
         * @return Returns a reference to the keyboard controller.
         */
        static global(pAsset: Asset, fnKey: TKeyboard, sEvents?: TEvents): Keyboard;
        /**
         * Registers a new local keyboard controller.
         * @param pAsset Reference to the asset.
         * @param fnKey Specifies the function which is called when a key is pressed.
         * @param sEvents Specifies which events need to be emitted.
         * @return Returns a reference to the keyboard controller.
         */
        static local(pAsset: Asset, fnKey: TKeyboard, sEvents?: TEvents): Keyboard;
        /**
         * Constructs a new keyboard controller.
         * @param sType Specifies the controller type.
         * @param sEvents Specifies which events need to be emitted.
         * @param pAsset Reference to the asset.
         * @param fnKey Specifies the function which is called when a key is pressed.
         */
        protected constructor(sType: "global" | "local", sEvents: TEvents, pAsset: Asset, fnKey: TKeyboard);
        /** Retrieves if a key is down. */
        get isKeyDown(): boolean;

        /**
         * Invokes the `OnKey` event which indicates when a key is pressed.
         * @param pEvent Reference to the event.
         * @return Returns if subsequent events needs to be invoked. When the
         * function returns `true` the event does not bubble up and stops.
         * @event
         */
        protected onKey(pEvent: IKeyboardEvent): boolean;
        /**
         * Sets the focus to the attached asset.
         * @return Returns a reference to the focus controller.
         */
        focus(): Focus;
        /**
         * Invoked when the keyboard controller is destroyed.
         * @return Returns `true` if the controller is detached.
         * @event
         */
        onDestroy(): boolean;
    }
}

declare module "tripetto/module/touch-scroll" {
    import { Asset, Stylesheet } from "tripetto/module/dom";
    import { IHookPayload, THooks } from "tripetto/module/hookup";
    import { Dimensions, IPoint, Rectangle, Spacing } from "tripetto/module/metrics";
    import { Controller, Directions, Events, Priorities, Types } from "tripetto/module/touch";
    import { Focus } from "tripetto/module/touch-focus";

    /** Defines the scroll properties. */
    export interface IScrollProperties {
        /**
         * Specifies the stylesheet to write the styles to. If omitted
         * the default application global stylesheet will be used.
         */
        stylesheet?: Stylesheet;
        /** Reference to the asset. */
        asset?: Asset;
        /** Specifies the scroll direction (default value is `both`). */
        direction?: "horizontal" | "vertical" | "bidirectional" | Directions;
        /**
         * Specifies if the scroll controller should automatically initialize itself
         * (enabled by default).
         */
        autoInitialize?: boolean;
        /**
         * Specifies if the content should be hidden while the scroll controller is
         * initializing.
         */
        hideWhileNotInitialized?: boolean;
        /** Specifies if inertial scrolling should be used (enabled by default). */
        inertialScrolling?: boolean;
        /**
         * Specifies if horizontal bouncing should be used. Supply `yes` if
         * you want to enable bouncing when the horizontal area is scrollable.
         * Supply `always` if you want to always enable bouncing even if the
         * area is not scrollable.
         */
        bounceHorizontal?: "no" | "yes" | "always";
        /**
         * Specifies if vertical bouncing should be used. Supply `yes` if
         * you want to enable bouncing when the vertical area is scrollable.
         * Supply `always` if you want to always enable bouncing even if the
         * area is not scrollable.
         */
        bounceVertical?: "no" | "yes" | "always";
        /**
         * Specifies if panning mode is enabled for the mouse interaction (enabled
         * by default).
         */
        pannable?: boolean;
        /**
         * Specifies if direction locking should be used (enabled by default).
         * Direction locking only allows bidirectional scrolling when the user moves
         * the point diagonal.
         */
        lockDirection?: boolean;
        /** Specifies if wheel scrolling is enabled (enabled by default). */
        wheel?: boolean;
        /**
         * Specifies if the `OnHover` event should fire when a pointing device
         * hovers in or out of the scroll area (disabled by default).
         */
        hovering?: boolean;
        /**
         * Specifies if native scrolling through the `scrollLeft`  and `scrollTop`
         * attributes needs to be enabled. This gives slower performance but
         * probably better compatibility. Only use this mode if there is a specific
         * reason for it.
         */
        native?: boolean;
        /**
         * Specifies if focus support should be enabled or disabled (enabled by
         * default). When enabled the controller will emit the `OnFocus` event.
         */
        focus?: boolean;
        /**
         * Specifies if keyboard support should be enabled or disabled (enabled by
         * default). When enabled the user can use the keyboard to scroll, using the
         * arrow keys, page up/down, home, end and spacerbar keys.
         */
        keyboard?: boolean;
        /**
         * Specifies the left, top, right and bottom spacing which should be
         * applied. Only available when native scrolling is disabled.
         */
        spacing?: Spacing;
        /**
         * Specifies if the scrolled area needs to be centered (disabled by
         * default). Only available when native scrolling is disabled.
         */
        centering?: boolean;
        /** Specifies a class name which is applied when scrolling is possible. */
        classScroll?: string;
        /** Specifies a class name which is applied when horizontal scrolling is possible. */
        classScrollHorizontal?: string;
        /** Specifies a class name which is applied when vertical scrolling is possible. */
        classScrollVertical?: string;
        /** Specifies a class name which is applied when scrolling left is possible. */
        classScrollLeft?: string;
        /** Specifies a class name which is applied when scrolling right is possible. */
        classScrollRight?: string;
        /** Specifies a class name which is applied when scrolling up is possible. */
        classScrollUp?: string;
        /** Specifies a class name which is applied when scrolling down is possible. */
        classScrollDown?: string;
        /**
         * Contains the initial zoom factor (floating point between 0 and 1). This
         * property does not alter your content, it sets just an internal variable
         * which holds the current zoom factor.
         */
        zoom?: number;
        /**
         * Specifies it the zoom-factor will be applied to the scroll dimensions
         * which are requested using the `OnDimensions` event. In other words, the
         * supplied dimensions are always the actual size of the content. You
         * need to supply an `OnDimensions` event handler to let this work.
         */
        zoomDimensions?: boolean;
        /** Specifies if animations should be used for zooming. */
        zoomAnimations?: boolean;
        /** Specifies if the `OnZoom` event should be invoked during initialization. */
        zoomInitialize?: boolean;
        /** Specifies if the zoom-to-fit should be applied during initialization. */
        zoomToFit?: boolean | "all" | "horizontal" | "vertical";
        /** Specifies if the scroll area is zoomable by pinching. */
        zoomOnPinch?: boolean;
        /** Specifies if the scroll area can be zoomed with the mousewheel. */
        zoomOnWheel?: boolean;
        /** Specifies if the scroll area can be zoomed in or out by double tapping it. */
        zoomOnDoubleTap?: boolean;
        /**
         * Contains the function which is called when a zoom is requested.
         * @event
         */
        onZoomBounderies?: TZoomBounderies;
        /**
         * Contains the function which is called when a zoom starts.
         * @event
         */
        onZoomStart?: TZoom;
        /**
         * Contains the function which is called when a zoom needs to be applied.
         * @event
         */
        onZoom?: TZoom;
        /**
         * Contains the function which is called when the zoom changes.
         * @event
         */
        onZoomChange?: TZoom;
        /**
         * Contains the function which is called when a zoom ends.
         * @event
         */
        onZoomEnd?: TZoom;
        /**
         * Contains the function which is called when a wheel zoom occurs.
         * @event
         */
        onZoomWheel?: TZoomWheel;
        /**
         * Contains the function which is called when the scroll
         * controller is initialized.
         * @event
         */
        onInit?: TScroll;
        /**
         * Contains the function which is called when the scroll
         * controller needs to know the dimensions of the scroll content.
         * @event
         */
        onDimensions?: TDimension;
        /**
         * Contains the function which is called when the scroll
         * controller needs to know the rectangle of the viewport.
         * @event
         */
        onViewport?: TViewport;
        /**
         * Contains the function which is called when the scrolling area
         * is resized.
         * @event
         */
        onResize?: TScroll;
        /**
         * Contains the function which is called when the scroll
         * direction (lock) is changed.
         * @event
         */
        onDirection?: TScroll;
        /**
         * Contains the function which is invoked when focus is gained.
         * @event
         */
        onFocus?: TScroll;
        /**
         * Contains the function which is invoked when a scroll
         * or zoom event occurs.
         * @event
         */
        onActivate?: TScroll;
        /**
         * Contains the function which is invoked when a pointing device
         * hovers in or out the scroll area.
         * @event
         */
        onHover?: THover;
        /**
         * Contains the function which is called when the scrolling
         * starts.
         * @event
         */
        onStart?: TScroll;
        /**
         * Contains the function which is called when the scroll
         * position is changed.
         * @event
         */
        onChange?: TScroll;
        /**
         * Contains the function which is called when the scroll area is
         * scrolled. This is a realtime event which can be used to keep in sync with
         * scroll actions.
         * @event
         */
        onScroll?: TMove;
        /**
         * Contains the function which is called when the scrolling ends.
         * @event
         */
        onEnd?: TScroll;
    }
    export type TScrollEvents =
        | "OnScrollInit"
        | "OnScrollResize"
        | "OnScrollDirection"
        | "OnScrollFocus"
        | "OnScrollActivate"
        | "OnScrollHover"
        | "OnScrollStart"
        | "OnScrollChange"
        | "OnScrollEnd"
        | "OnZoomStart"
        | "OnZoomChange"
        | "OnZoomEnd";
    export interface IScrollEvents<Hook extends THooks> extends IHookPayload<Hook> {
        /** Reference to the scroll instance. */
        readonly scroll: Scroll;
    }
    export interface IScrollInitEvent extends IScrollEvents<"OnScrollInit"> {}
    export interface IScrollResizeEvent extends IScrollEvents<"OnScrollResize"> {}
    export interface IScrollDirectionEvent extends IScrollEvents<"OnScrollDirection"> {}
    export interface IScrollFocusEvent extends IScrollEvents<"OnScrollFocus"> {}
    export interface IScrollActivateEvent extends IScrollEvents<"OnScrollActivate"> {}
    export interface IScrollHoverEvent extends IScrollEvents<"OnScrollHover"> {}
    export interface IScrollStartEvent extends IScrollEvents<"OnScrollStart"> {}
    export interface IScrollChangeEvent extends IScrollEvents<"OnScrollChange"> {}
    export interface IScrollEndEvent extends IScrollEvents<"OnScrollEnd"> {}
    export interface IZoomStartEvent extends IScrollEvents<"OnZoomStart"> {}
    export interface IZoomChangeEvent extends IScrollEvents<"OnZoomChange"> {
        /** Contains the zoom factor. */
        zoom: number;
    }
    export interface IZoomEndEvent extends IScrollEvents<"OnZoomEnd"> {}
    const TIMEOUT = 250;
    const SENSITIVITY_MOUSE = 5;
    const SENSITIVITY_TOUCH = 15;
    /** Specifies the duration (in milliseconds) of scroll animations. */
    export const SCROLL_DURATION = 300;
    /** Specifies max edge speed in pixels. */
    export const SCROLL_EDGE_SPEED = 20;
    const DELAY_RESIZE = 100;
    /**
     * Type alias for the dimension event.
     * @param TDimension.pScroll Reference to the scroll instance.
     */
    export type TDimension = (pScroll: Scroll) => Dimensions | undefined;
    /**
     * Type alias for the rectangle event.
     * @param TViewport.pScroll Reference to the scroll instance.
     */
    export type TViewport = (pScroll: Scroll) => Rectangle | undefined;
    /**
     * Type alias for the scroll events.
     * @param TScroll.pScroll Reference to the scroll instance.
     */
    export type TScroll = (pScroll: Scroll) => void;
    /**
     * Type alias for the scroll hover event.
     * @param THover.bHovered Specifies if the scroll area is hovered.
     * @param THover.pScrollbars Reference to the scroll instance.
     */
    export type THover = (bHovered: boolean, pScroll: Scroll) => void;
    /**
     * Type alias for the scroll move events.
     * @param TMove.nLeft Contains the left scroll position.
     * @param TMove.nTop Contains the top scroll position.
     * @param TMove.pScroll Reference to the scroll instance.
     */
    export type TMove = (nLeft: number, nTop: number, pScroll: Scroll) => void;
    /**
     * Type alias for the zoom bounderies event.
     * @param TZoom.nZoom Contains the desired zoom.
     * @param TZoom.pScroll Reference to the scroll instance.
     */
    export type TZoomBounderies = (nZoom: number, pScroll: Scroll) => number;
    /**
     * Type alias for the zoom event.
     * @param TZoom.nZoom Contains the zoom factor.
     * @param TZoom.pScroll Reference to the scroll instance.
     */
    export type TZoom = (nZoom: number, pScroll: Scroll) => void;
    /**
     * Type alias for the zoom wheel event.
     * @param TZoomWheel.sZoom Specifies the zoom direction.
     * @param TZoomWheel.pScroll Reference to the scroll instance.
     */
    export type TZoomWheel = (sZoom: "in" | "out", pScroll: Scroll) => number;
    export class Scroll extends Controller<TScrollEvents> {
        /**
         * Contains the function which is invoked when the scroll
         * controller is initialized.
         * @event
         */
        onInit: TScroll | undefined;
        /**
         * Contains the function which is invoked when the scroll
         * controller needs to know the dimensions of the scroll content.
         * @event
         */
        onDimensions: TDimension | undefined;
        /**
         * Contains the function which is invoked when the scroll
         * controller needs to know the rectangle of the viewport.
         * @event
         */
        onViewport: TViewport | undefined;
        /**
         * Contains the function which is invoked when the scrolling area
         * is resized.
         * @event
         */
        onResize: TScroll | undefined;
        /**
         * Contains the function which is invoked when the scrolling
         * direction is changed.
         * @event
         */
        onDirection: TScroll | undefined;
        /**
         * Contains the function which is invoked when focus is gained.
         * @event
         */
        onFocus: TScroll | undefined;
        /**
         * Contains the function which is invoked when a scroll or
         * zoom starts.
         * @event
         */
        onActivate: TScroll | undefined;
        /**
         * Contains the function which is invoked when a pointing device
         * hovers in or out the scroll area.
         * @event
         */
        onHover: THover | undefined;
        /**
         * Contains the function which is invoked when the scrolling
         * starts.
         * @event
         */
        onStart: TScroll | undefined;
        /**
         * Contains the function which is invoked when the scroll
         * position is changed.
         * @event
         */
        onChange: TScroll | undefined;
        /**
         * Contains the function which is invoked when the scroll area is
         * scrolled. This is a realtime event which can be used to keep in sync with
         * scroll actions.
         * @event
         */
        onScroll: TMove | undefined;
        /**
         * Contains the function which is invoked when the scrolling ends.
         * @event
         */
        onEnd: TScroll | undefined;
        /**
         * Contains the function which is invoked when a zoom is requested.
         * @event
         */
        onZoomBounderies: TZoomBounderies | undefined;
        /**
         * Contains the function which is invoked when a zoom starts.
         * @event
         */
        onZoomStart: TZoom | undefined;
        /**
         * Contains the function which is invoked when a zoom needs to be applied.
         * @event
         */
        onZoom: TZoom | undefined;
        /**
         * Contains the function which is invoked when the zoom changes.
         * @event
         */
        onZoomChange: TZoom | undefined;
        /**
         * Contains the function which is invoked when a zoom ends.
         * @event
         */
        onZoomEnd: TZoom | undefined;
        /**
         * Contains the function which is invoked when a wheel zoom occurs.
         * @event
         */
        onZoomWheel: TZoomWheel | undefined;

        /** Retrieves the id of the controller. */
        static get id(): string;
        /** Retrieves the controller types. */
        static get types(): Types;
        /** Retrieves the controller priority. */
        static get priority(): Priorities;

        /**
         * The one and only processor function for the controller. This function is
         * **automatically** invoked by the controller host.
         * ***Do not invoke this method manually as it can disrupt the controller!***
         * @param nEvent Specifies the event type.
         */
        static processor(nEvent: Events): void;
        /**
         * The one and only terminate function for the controller. This function is
         * **automatically** invoked by the controller host.
         * ***Do not invoke this method manually as it can disrupt the controller!***
         */
        static terminate(): void;
        /**
         * Performs edge detection and automatic scrolling. The function checks if
         * the supplied coordinates are in range of the boundaries of a scroll area
         * and starts automatic scrolling. Always call `EdgeDetectionEnd` after
         * calling `EdgeDetectionStart` to stop the automatic scrolling.
         * @param pAssets Specifies the target asset(s).
         * @param pHint Specifies the hint coordinate.
         * @param bHintEdges Specifies if the hinting also occurs in the spacing.
         * @param bHorizontal Specifies if horizontal edging is allowed.
         * @param bVertical Specifies if vertical edging is allowed.
         * @param fnMove Specifies the callback function which is invoked when the
         * scrolling area is moved.
         * @param fnMove.pShift Specifies the shift coordinates.
         * @param fnMove.pAsset Reference to the asset with the scroll controller.
         * @param nAcceleration Specifies the maximum acceleration for the
         * movement (default is 100%).
         * @return Returns if the edge detection is activated.
         */
        static edgeDetection(
            pAssets: Asset | Asset[] | undefined,
            pHint: IPoint,
            bHintEdges: boolean,
            bHorizontal: boolean,
            bVertical: boolean,
            fnMove: (pShift: IPoint, pAsset: Asset) => void,
            nAcceleration?: number
        ): boolean;
        /** Stops the edge detection. */
        static edgeDetectionStop(): void;
        /**
         * Updates all the scroll controllers. Call this function after resizing the
         * screen or when other changes in a scroll area occur.
         * @param nDelay Specifies the optional update delay. Can be useful when
         * the update should wait on a pending animation.
         * @param bAnimations Specifies if animations should be used.
         */
        static update(nDelay?: number, bAnimations?: boolean): void;
        /**
         * Registers a new scroll controller.
         * @param pProperties Specifies the scroll properties.
         * @return Returns a reference to the scroll controller.
         */
        static on(pProperties: IScrollProperties): Scroll;
        /**
         * Constructs a new scroll controller.
         * @param pProperties Specifies the scroll properties.
         */
        protected constructor(pProperties: IScrollProperties);
        /** Retrieves a reference to the focus controller. */
        get focusController(): Focus | undefined;
        /** Retrieves if native scrolling is enabled. */
        get native(): boolean;
        /** Retrieves if inertial scrolling is enabled or disabled. */
        get inertialScrolling(): boolean;
        /** Retrieves if the scroll area is pannable with the mouse pointer. */
        get pannable(): boolean;
        /** Retrieves if direction locking is enabled or disabled. */
        get lockDirection(): boolean;
        /** Retrieves if mouse wheel is enabled or disabled. */
        get wheel(): boolean;
        /** Retrieves if hovering is enabled. */
        get hovering(): boolean;

        /** Retrieves if the scroll controller is initialized. */
        get isInitialized(): boolean;
        /** Retrieves if the scroll controller has focus. */
        get hasFocus(): boolean;
        /** Retrieved if the scroll area is hovered. */
        get isHovered(): boolean;
        /** Retrieved if the hover is canceled. */
        get isHovercanceled(): boolean;
        /** Retrieves if the controller is scrolling. */
        get isScrolling(): boolean;
        /** Retrieves if the scroll area is scrollable. */
        get isScrollable(): boolean;
        /** Retrieves if the controller is zooming. */
        get isZooming(): boolean;
        /** Contains the scroll direction for the current scroll action. */
        get direction(): Directions;
        /** Retrieves if horizontal scrolling is enabled. */
        get horizontal(): boolean;
        /** Retrieves if vertical scrolling is enabled. */
        get vertical(): boolean;
        /** Retrieves if automatic centering is enabled. */
        get centering(): boolean;
        /** Retrieves the current horizontal scroll position. */
        get scrollLeft(): number;
        /** Sets the validated current horizontal scroll position. */
        set scrollLeft(nLeft: number);
        /** Retrieves the validated current vertical scroll position. */
        get scrollTop(): number;
        /** Sets the current vertical scroll position. */
        set scrollTop(nTop: number);
        /** Retrieves the current horizontal scroll shift. */
        get shiftLeft(): number;
        /** Retrieves the current vertical scroll shift. */
        get shiftTop(): number;
        /**
         * Contains the horizontal scroll range (this is the maximum value for the
         * left scroll position).
         */
        get rangeHorizontal(): number;
        /**
         * Contains the vertical scroll range (this is the maximum value for the
         * top scroll position).
         */
        get rangeVertical(): number;
        /** Contains the width of the scrollable area. */
        get width(): number;
        /** Contains the height of the scrollable area. */
        get height(): number;
        /** Specifies if the area can be scrolled horizontally. */
        get canScrollHorizontal(): boolean;
        /** Specifies if the area can be scrolled vertically. */
        get canScrollVertical(): boolean;
        /** Specifies if the area can be scrolled up. */
        get canScrollLeft(): boolean;
        /** Specifies if the area can be scrolled down. */
        get canScrollRight(): boolean;
        /** Specifies if the area can be scrolled up. */
        get canScrollUp(): boolean;
        /** Specifies if the area can be scrolled down. */
        get canScrollDown(): boolean;
        /** Retrieves if the scroll area can be zoomed in. */
        get canZoomIn(): boolean;
        /** Retrieves if the scroll area can be zoomed out. */
        get canZoomOut(): boolean;
        /** Retrieves if the scroll area can be zoomed. */
        get canZoom(): boolean;
        /** Retrieves if the zoom fits horizontally. */
        get isZoomFitHorizontal(): boolean;
        /** Retrieves if the zoom fits vertically. */
        get isZoomFitVertical(): boolean;
        /**
         * Contains the horizontal bounce size. A negative value specifies the
         * left bounce and a positive value specifies the right bounce.
         */
        get bounceHorizontal(): number;
        /**
         * Contains the vertical bounce size. A negative value specifies the
         * top bounce and a positive value specifies the bottom bounce.
         */
        get bounceVertical(): number;
        /** Retrieves if a bounce is active. */
        get isBouncing(): boolean;
        /** Retrieves if horizontal bouncing is enabled. */
        get isBounceHorizontal(): "no" | "yes" | "always";
        /** Sets the horizontal bounce. */
        set isBounceHorizontal(sBounce: "no" | "yes" | "always");
        /** Retrieves if vertical bouncing is enabled. */
        get isBounceVertical(): "no" | "yes" | "always";
        /** Sets the vertical bounce. */
        set isBounceVertical(sBounce: "no" | "yes" | "always");
        /** Retrieves the current zoom factor. */
        get zoom(): number;
        /** Sets the current zoom factor. */
        set zoom(nZoom: number);
        /** Retrieves the minimal zoom. */
        get zoomMin(): number;
        /** Retrieves the maximum zoom. */
        get zoomMax(): number;
        /** Retrieves the zoom factor to fit all of the content. */
        get zoomFit(): number;
        /** Retrieves the zoom factor to fit the horizontal content. */
        get zoomFitHorizontal(): number;
        /** Retrieves the zoom factor to fit the vertical content. */
        get zoomFitVertical(): number;
        /** Retrieves the viewport rectangle. */
        get viewport(): Rectangle;
        /** Retrieves the viewport spacing. */
        get spacing(): Spacing;
        /** Retrieves the bounding rectangle which is the viewport including the spacing. */
        get boundingRectangle(): Rectangle;
        /** Retrieves the parent asset of the scroll area which can be used to draw scrollbars. */
        get parent(): Asset | undefined;

        /** Emits the `OnScrollStart` event. */
        protected scrollStart(): void;
        /** Emits the `OnScrollEnd` event. */
        protected scrollEnd(): void;
        /**
         * Applies a horizontal scroll.
         * @param nLeft Specifies the left scroll position.
         * @param bSynchronous Perform synchronous scroll or not.
         */
        protected scrollHorizontal(nLeft: number, bSynchronous?: boolean): void;
        /**
         * Applies a vertical scroll.
         * @param bTop Specifies the top scroll position.
         * @param bSynchronous Perform synchronous scroll or not.
         */
        protected scrollVertical(nTop: number, bSynchronous?: boolean): void;
        /**
         * Invoked when the scroll controller is initialized.
         * @event
         */
        protected onScrollInit(): void;
        /**
         * Invoked when the scroll dimensions are requested.
         * @return Returns the dimensions of the scroll content.
         * @event
         */
        protected onScrollDimensions(): Dimensions | undefined;
        /**
         * Invoked when the rectangle of the scroll viewport is requested.
         * @return Returns the rectangle.
         * @event
         */
        protected onScrollViewport(): Rectangle | undefined;
        /**
         * Invoked when the scroll area is resized.
         * @event
         */
        protected onScrollResize(): void;
        /**
         * Invoked when the scroll direction (lock) is changed.
         * @event
         */
        protected onScrollDirection(): void;
        /**
         * Invoked when the focus is gained or blurred.
         * @event
         */
        protected onScrollFocus(): void;
        /**
         * Invoked when the scrolling or zooming starts.
         * @event
         */
        protected onScrollActivate(): void;
        /**
         * Invoked when a pointing device hovers in or out the scroll area.
         * @event
         */
        protected onScrollHover(): void;
        /**
         * Invoked when the scrolling starts.
         * @event
         */
        protected onScrollStart(): void;
        /**
         * Invoked when the scroll position changes.
         * @event
         */
        protected onScrollChange(): void;
        /**
         * Invoked when the scroll position is updated.
         * @param nLeft Specifies the left position.
         * @param nTop Specifies the top position.
         * @event
         */
        protected onScrollMove(nLeft: number, nTop: number): void;
        /**
         * Invoked when the scrolling ends.
         * @event
         */
        protected onScrollEnd(): void;
        /**
         * Invoked when the zoom bounderies are requested.
         * @param nZoom Specifies the desired zoom.
         * @return Returns the allowed zoom.
         */
        protected onScrollZoomBounderies(nZoom: number): number;
        /**
         * Invoked when a zoom is started.
         * @event
         */
        protected onScrollZoomStart(): void;
        /**
         * Invoked when the zoom factor needs to be applied.
         * @param nZoom Specifies the zoom factor.
         * @event
         */
        protected onScrollZoom(nZoom?: number): void;
        /**
         * Invoked when the zoom factor changes.
         * @param nZoom Specifies the zoom factor.
         * @event
         */
        protected onScrollZoomChange(nZoom?: number): void;
        /**
         * Invoked when a zoom is ended.
         * @event
         */
        protected onScrollZoomEnd(): void;
        /**
         * Invoked when the wheel zoom is invoked.
         * @param sZoom Specifies the zoom action.
         * @return Returns the zoom step size.
         */
        protected onScrollZoomWheel(sZoom: "in" | "out"): number;
        /**
         * Initializes the controller. Normally the scroll controller is intialized
         * automatically when the user starts scrolling. But in some cases you want
         * to force the initialization of the controller. When the controller is
         * initalized the `OnInit` event is fired.
         */
        init(): void;
        /**
         * Updates the controller.
         * @param bAnimations Specifies if animations should be used.
         * @param nTimeout Specifies the timeout in milliseconds.
         */
        update(bAnimations?: boolean, nTimeout?: number): void;
        /** Resets the scroll controller. */
        reset(): void;
        /**
         * Scrolls to the specified position.
         * @param nLeft Specifies the left position.
         * @param nTop Specifies the top position.
         * @param bAnimate Specifies if a scroll animation should be used.
         * @param bAnimateContinuous Use scroll animation for continuous scrolling.
         * @param bSynchronous Scroll in synchronous mode (no animation).
         * @param bBouncing Specifies if bouncing is enabled.
         * @return Returns `true` if a scroll update occurred.
         */
        scrollTo(
            nLeft: number,
            nTop: number,
            bAnimate?: boolean,
            bAnimateContinuous?: boolean,
            bSynchronous?: boolean,
            bBouncing?: boolean
        ): boolean;
        /**
         * Applies a scroll shift.
         * @param nLeft Specifies the left shift.
         * @param nTop Specifies the top shift.
         * @param bAnimate Specifies if a scroll animation should be used.
         * @param bAnimateContinuous Use scroll animation for continuous scrolling.
         * @param bSynchronous Scroll in synchronous mode (no animation).
         * @param bBouncing Specifies if bouncing is enabled.
         * @return Returns `true` if a scroll update occurred.
         */
        scrollShift(
            nLeft: number,
            nTop: number,
            bAnimate?: boolean,
            bAnimateContinuous?: boolean,
            bSynchronous?: boolean,
            bBouncing?: boolean
        ): boolean;
        /**
         * Scrolls to the specified asset.
         * @param pAsset Specifies the asset to scroll to. Should be a child
         * of the scroll area.
         * @param bAnimate Specifies if a scroll animation should be used.
         * @param bCenter Specifies is the center of the element is used when the
         * element is larger than the viewport.
         * @param nSpacingLeft Specifies an optional left border space.
         * @param nSpacingTop Specifies an optional top border space.
         * @param nSpacingRight Specifies an optional right border space.
         * @param nSpacingBottom Specifies an optional bottom border space.
         * @param bOnlyWhenInvisible Specifies that scrolling only occurs if the asset is invisible (out of picture).
         */
        scrollToAsset(
            pAsset: Asset,
            bAnimate?: boolean,
            nSpacingLeft?: number,
            nSpacingTop?: number,
            nSpacingRight?: number,
            nSpacingBottom?: number,
            bOnlyWhenInvisible?: boolean
        ): void;
        /** Scrolls to the top. */
        scrollToTop(): boolean;
        /** Scrolls to the bottom. */
        scrollToBottom(): boolean;
        /**
         * Scrolls to the top if the scroll position is not at the top or scrolls to
         * the bottom if the list is at the top.
         */
        scrollToTopOrBottom(): boolean;
        /** Scrolls to the left. */
        scrollToLeft(): boolean;
        /** Scrolls to the right. */
        scrollToRight(): boolean;
        /**
         * Scrolls to the left if the scroll position is not at the left or scrolls
         * to the right if the list is at the left.
         */
        scrollToLeftOrRight(): boolean;
        /** Scrolls one page up. */
        scrollPageUp(): boolean;
        /** Scrolls one page down. */
        scrollPageDown(): boolean;
        /** Scrolls one page left. */
        scrollPageLeft(): boolean;
        /** Scrolls one page right. */
        scrollPageRight(): boolean;
        /** Scrolls one inch up. */
        scrollInchUp(): boolean;
        /** Scrolls one inch down. */
        scrollInchDown(): boolean;
        /** Scrolls one inch left. */
        scrollInchLeft(): boolean;
        /** Scrolls one inch right. */
        scrollInchRight(): boolean;
        /**
         * Zooms to the specified zoom factor.
         * @param nZoom Specifies the zoom factor.
         * @param bAnimation Specifies if a zoom animation should be used.
         * @param bAnimationDuration Specifies the duration of the zoom animation.
         * @param bAnimationEase Specifies if an ease or linear animation should be used.
         * @param pPoint Specifies the optional focal point to focus on.
         * @return Returns `true` if the zoom factor is changed.
         */
        zoomTo(nZoom: number, bAnimation?: boolean, nAnimationDuration?: number, bAnimationEase?: boolean, pPoint?: IPoint): boolean;
        /**
         * Zooms to the specified zoom percentage.
         * @param nPercentage Specifies the zoom percentage.
         * @param bAnimation Specifies if a zoom animation should be used.
         * @param bAnimationDuration Specifies the duration of the zoom animation.
         * @param bAnimationEase Specifies if an ease or linear animation should be used.
         * @param pPoint Specifies the optional focal point to focus on.
         * @return Returns `true` if the zoom factor is changed.
         */
        zoomToPercentage(
            nPercentage: number,
            bAnimation?: boolean,
            nAnimationDuration?: number,
            bAnimationEase?: boolean,
            pPoint?: IPoint
        ): boolean;
        /**
         * Zooms to the maximum zoom.
         * @param bAnimation Specifies if a zoom animation should be used.
         * @param bAnimationDuration Specifies the duration of the zoom animation.
         * @param bAnimationEase Specifies if an ease or linear animation should be used.
         * @param pPoint Specifies the optional focal point to focus on.
         * @return Returns `true` if the zoom factor is changed.
         */
        zoomToMax(bAnimation?: boolean, nAnimationDuration?: number, bAnimationEase?: boolean, pPoint?: IPoint): boolean;
        /**
         * Zooms to the minimal zoom.
         * @param bAnimation Specifies if a zoom animation should be used.
         * @param bAnimationDuration Specifies the duration of the zoom animation.
         * @param bAnimationEase Specifies if an ease or linear animation should be used.
         * @param pPoint Specifies the optional focal point to focus on.
         * @return Returns `true` if the zoom factor is changed.
         */
        zoomToMin(bAnimation?: boolean, nAnimationDuration?: number, bAnimationEase?: boolean, pPoint?: IPoint): boolean;
        /**
         * Adjusts the zoom factor to fit all of the content.
         * @param bAnimation Specifies if a zoom animation should be used.
         * @param bAnimationDuration Specifies the duration of the zoom animation.
         * @param bAnimationEase Specifies if an ease or linear animation should be used.
         * @return Returns `true` if the zoom factor is changed.
         */
        zoomToFit(bAnimation?: boolean, nAnimationDuration?: number, bAnimationEase?: boolean): boolean;
        /**
         * Adjusts the zoom factor to fit the horizontal content.
         * @param bAnimation Specifies if a zoom animation should be used.
         * @param bAnimationDuration Specifies the duration of the zoom animation.
         * @param bAnimationEase Specifies if an ease or linear animation should be used.
         * @return Returns `true` if the zoom factor is changed.
         */
        zoomToFitHorizontal(bAnimation?: boolean, nAnimationDuration?: number, bAnimationEase?: boolean): boolean;
        /**
         * Adjusts the zoom factor to fit the vertical content.
         * @param bAnimation Specifies if a zoom animation should be used.
         * @param bAnimationDuration Specifies the duration of the zoom animation.
         * @param bAnimationEase Specifies if an ease or linear animation should be used.
         * @return Returns `true` if the zoom factor is changed.
         */
        zoomToFitVertical(bAnimation?: boolean, nAnimationDuration?: number, bAnimationEase?: boolean): boolean;
        /**
         * Zooms to the actual content size (zoom factor is 1).
         * @param bAnimation Specifies if a zoom animation should be used.
         * @param bAnimationDuration Specifies the duration of the zoom animation.
         * @param bAnimationEase Specifies if an ease or linear animation should be used.
         * @param pPoint Specifies the optional focal point to focus on.
         * @return Returns `true` if the zoom factor is changed.
         */
        zoomToActual(bAnimation?: boolean, nAnimationDuration?: number, bAnimationEase?: boolean, pPoint?: IPoint): boolean;
        /**
         * Toggles the zoom between fit and actual.
         * @param bAnimation Specifies if a zoom animation should be used.
         * @param bAnimationDuration Specifies the duration of the zoom animation.
         * @param bAnimationEase Specifies if an ease or linear animation should be used.
         * @param pPoint Specifies the optional focal point to focus on.
         * @return Returns `true` if the zoom factor is changed.
         */
        zoomToggle(bAnimation?: boolean, nAnimationDuration?: number, bAnimationEase?: boolean, pPoint?: IPoint): boolean;
        /**
         * Zoom in with one step (10%).
         * @param bAnimation Specifies if a zoom animation should be used.
         * @param bAnimationDuration Specifies the duration of the zoom animation.
         * @param bAnimationEase Specifies if an ease or linear animation should be used.
         * @param pPoint Specifies the optional focal point to focus on.
         * @return Returns `true` if the zoom factor is changed.
         */
        zoomIn(bAnimation?: boolean, nAnimationDuration?: number, bAnimationEase?: boolean, pPoint?: IPoint): boolean;
        /**
         * Zoom out with one step (10%).
         * @param bAnimation Specifies if a zoom animation should be used.
         * @param bAnimationDuration Specifies the duration of the zoom animation.
         * @param bAnimationEase Specifies if an ease or linear animation should be used.
         * @param pPoint Specifies the optional focal point to focus on.
         * @return Returns `true` if the zoom factor is changed.
         */
        zoomOut(bAnimation?: boolean, nAnimationDuration?: number, bAnimationEase?: boolean, pPoint?: IPoint): boolean;
        /**
         * Crawls the zoom in or out.
         * @param sCrawl Specifies the crawl direction.
         * @param nCrawlDuration Specifies the crawl duration in milliseconds.
         */
        zoomCrawl(sCrawl: "in" | "out" | "stop", nCrawlDuration: number): void;
        /** Stops the zoom crawl. */
        zoomCrawlStop(): void;
        /** Cancels a hover. */
        cancelHover(): void;
        /** Focus the scroll area. */
        focus(): void;
        /** Blurs the focus. */
        blur(): void;
        /**
         * Invoked when the controller is destroyed.
         * @return Returns `true` if the controller is detached.
         * @event
         */
        onDestroy(): boolean;
    }

    export {
        DELAY_RESIZE as SCROLL_RESIZE_DELAY,
        SENSITIVITY_MOUSE as SCROLL_SENSITIVITY_MOUSE,
        SENSITIVITY_TOUCH as SCROLL_SENSITIVITY_TOUCH,
        TIMEOUT as SCROLL_TIMEOUT,
    };
}

declare module "tripetto/module/touch-tap" {
    import { Asset, Stylesheet } from "tripetto/module/dom";
    import { Coordinate, IPoint } from "tripetto/module/metrics";
    import { Buttons, Controller, Events, Priorities, Types } from "tripetto/module/touch";

    export type TTapEvents = "OnTap" | "OnTapStart" | "OnTapEnd";
    export interface ITapEvents {
        /** Reference to the tap instance. */
        readonly tap: Tap;
        /** Reference to the asset being tapped. */
        readonly asset: Asset;
        /** Specifies the tap offset in pixels. */
        readonly offset: IPoint;
        /** Specifies if the tap occurred using mouse input. */
        readonly isMouse: boolean;
        /** Specifies if the tap occurred using touch input. */
        readonly isTouch: boolean;
        /** Specifies if the tap occurred using pen input. */
        readonly isPen: boolean;
        /** Specifies the keyboard buttons which were pressed. */
        readonly buttons: Buttons;
    }
    export interface ITapEvent extends ITapEvents {}
    export interface ITapStartEvent extends ITapEvents {}
    export interface ITapEndEvent extends ITapEvents {}
    const TIMEOUT_TAP = 300;
    const TIMEOUT_GAP = 200;
    const TIMEOUT_DOUBLETAP = 300;
    /** Type alias for the callback functions. */
    export type TTap<T> = (pTapEvent: T) => void;
    export class Tap extends Controller<TTapEvents> {
        /**
         * Contains the function which is invoked when the event occurs.
         * @event
         */
        on: TTap<ITapEvent> | undefined;
        /**
         * Contains the function which is invoked when a tap starts.
         * @event
         */
        onStart: TTap<ITapStartEvent> | undefined;
        /**
         * Contains the function which is invoked when a tap ends.
         * @event
         */
        onEnd: TTap<ITapEndEvent> | undefined;

        /** Retrieves the name of the controller. */
        static get id(): string;
        /** Retrieves the controller types. */
        static get types(): Types;
        /** Retrieves the controller priority. */
        static get priority(): Priorities;

        /**
         * The one and only processor function for the controller. This function
         * is **automatically** invoked by the controller host.
         * ***Do not invoke this method manually as it can disrupt the controller!***
         * @param nEvent Specifies the event type.
         */
        static processor(nEvent: Events): void;
        /**
         * The one and only terminate function for the controller. This function is
         * **automatically** invoked by the controller host.
         * ***Do not invoke this method manually as it can disrupt the controller!***
         */
        static terminate(): void;
        /**
         * Registers a new tap controller.
         * @param pAsset Reference to the asset.
         * @param fnTap Specifies the function which is called when a tap event occurs.
         * @param fnTapStart Invoked when the tap starts.
         * @param fnTapEnd Invoked when the tap ends.
         * @param bDoubleTap Specifies if a single or double tap is requested.
         * @param pArea Specifies an optional area for the controller.
         * @param pStylesheet Specifies the stylesheet to write styles to.
         * @return Returns a reference to the tap controller.
         */
        static on(
            pAsset: Asset,
            fnTap?: TTap<ITapEvent>,
            fnTapStart?: TTap<ITapStartEvent>,
            fnTapEnd?: TTap<ITapEndEvent>,
            bDoubleTap?: boolean,
            pArea?: Coordinate,
            pStylesheet?: Stylesheet
        ): Tap;
        /**
         * Registers a new single tap controller.
         * @param pAsset Reference to the asset.
         * @param fnTap Specifies the function which is called when a tap event occurs.
         * @param fnTapStart Invoked when the tap starts.
         * @param fnTapEnd Invoked when the tap ends.
         * @param pArea Specifies an optional area for the controller.
         * @param pStylesheet Specifies the stylesheet to write styles to.
         * @return Returns a reference to the tap controller.
         */
        static single(
            pAsset: Asset,
            fnTap?: TTap<ITapEvent>,
            fnTapStart?: TTap<ITapStartEvent>,
            fnTapEnd?: TTap<ITapEndEvent>,
            pArea?: Coordinate,
            pStylesheet?: Stylesheet
        ): Tap;
        /**
         * Registers a new double tap controller.
         * @param pAsset Reference to the asset.
         * @param fnTap Specifies the function which is called when a tap event occurs.
         * @param fnTapStart Invoked when the tap starts.
         * @param fnTapEnd Invoked when the tap ends.
         * @param pArea Specifies an optional area for the controller.
         * @param pStylesheet Specifies the stylesheet to write styles to.
         * @return Returns a reference to the tap controller.
         */
        static double(
            pAsset: Asset,
            fnTap?: TTap<ITapEvent>,
            fnTapStart?: TTap<ITapStartEvent>,
            fnTapEnd?: TTap<ITapEndEvent>,
            pArea?: Coordinate,
            pStylesheet?: Stylesheet
        ): Tap;
        /**
         * Constructs a new tap controller.
         * @param pAsset Reference to the asset.
         * @param fnTap Specifies the function which is called when a tap event occurs.
         * @param fnTapStart Invoked when the tap starts.
         * @param fnTapEnd Invoked when the tap ends.
         * @param bDoubleTap Specifies if a single or double tap is requested.
         * @param pArea Specifies an optional area for the controller.
         * @param pStylesheet Specifies the stylesheet to write styles to.
         */
        protected constructor(
            pAsset: Asset,
            fnTap?: TTap<ITapEvent>,
            fnTapStart?: TTap<ITapStartEvent>,
            fnTapEnd?: TTap<ITapEndEvent>,
            bDoubleTap?: boolean,
            pArea?: Coordinate,
            pStylesheet?: Stylesheet
        );
        /** Returns `true` if the tap is allowed. */
        get isAllowed(): boolean;
        /** Retrieves the tap count. */
        get count(): number;

        /**
         * Invoked when a tap occurs.
         * @param pEvent Reference to the event.
         * @event
         */
        protected onTap(pEvent: ITapEvent): void;
        /**
         * Invokes the `OnTapStart` event which indicates when a tap starts.
         * @param pEvent Reference to the event.
         * @event
         */
        protected onTapStart(pEvent: ITapStartEvent): void;
        /**
         * Invokes the `OnTapEnd` event which indicates when a tap ends.
         * @param pEvent Reference to the event.
         * @event
         */
        protected onTapEnd(pEvent: ITapEndEvent): void;
    }

    export { TIMEOUT_DOUBLETAP as TAP_DOUBLE_TIMEOUT, TIMEOUT_GAP as TAP_SINGLE_DOUBLE_GAP, TIMEOUT_TAP as TAP_SINGLE_TIMEOUT };
}

declare module "tripetto/module/ui-cards" {
    import { Callback } from "tripetto/module/callback";
    import { Element, IStyles, Stylesheet } from "tripetto/module/dom";
    import { IHookPayload, THooks } from "tripetto/module/hookup";
    import { IItemPopEvent, Item, Matrix, StrictItem, StrictMatrix } from "tripetto/module/matrix";
    import { Spacing } from "tripetto/module/metrics";
    import { Layer } from "tripetto/module/ui-layers";
    import { IScrollbarsStyle } from "tripetto/module/ui-scrollbars";

    /** Describes the features style. */
    export interface IFeaturesStyle {
        /** Specifies the width of the features layer. */
        width: number;
        /** Specifies the feature spacing properties. */
        spacing?: {
            /** Left spacing. */
            left?: number;
            /** Right spacing. */
            right?: number;
            /** Top spacing. */
            top?: number;
            /** Bottom spacing. */
            bottom?: number;
        };
        /** Features list appearance. */
        appearance?: IStyles;
        /** Toggle appearance. */
        toggle: {
            /** Normal state. */
            appearance: IStyles;
            /** Hover styles. */
            hover?: IStyles;
            /** Focus styles. */
            focus?: IStyles;
            /** Activated state. */
            activated?: {
                /** Normal state. */
                appearance: IStyles;
                /** Hover styles. */
                hover?: IStyles;
                /** Focus styles. */
                focus?: IStyles;
            };
            /** Option appearance */
            option?: {
                /** Styles for the option remove button. */
                button: {
                    /** Width of thebutton. */
                    width: number;
                    /** Hover button style. */
                    hover?: IStyles;
                };
                /** Normal option state. */
                appearance: IStyles;
                /** Hover option state. */
                hover?: IStyles;
                /** Focus option state. */
                focus?: IStyles;
            };
            /** Locked state. */
            locked?: IStyles;
            /** Passed state. */
            passed?: IStyles;
            /** Failed state. */
            failed?: IStyles;
            /** Awaiting state. */
            awaiting?: IStyles;
            /** First feature. */
            first?: IStyles;
            /** Last feature. */
            last?: IStyles;
        };
        /** Static appearance. */
        static?: IStyles;
        /** Visible state. */
        visible?: IStyles;
        /** Disabled state. */
        disabled?: IStyles;
        /** Specifies scrollbar styles for features. */
        scrollbars?: IScrollbarsStyle;
        /** Specifies if scroll bouncing is enabled. */
        bounce?: "no" | "yes" | "always";
        /** Specifies if the scrollbars needs to blink. */
        blink?: boolean;
    }
    export class Features extends StrictMatrix<Features, Feature, void, IFeature> {
        /**
         * Constructs a new feature stack.
         * @param pCards Reference to the cards parent.
         */
        constructor(pCards: Cards<THooks>);
        /** Retrieves a reference to the cards parent. */
        get cards(): Cards<THooks>;
        /** Retrieves the features visibility. */
        get isVisible(): boolean;
        /** Sets the features visibility. */
        set isVisible(bVisible: boolean);

        /**
         * Draws the features.
         * @param pStyle Contains the features styles.
         * @param pLayer Reference to the parent layer.
         */
        draw(pStyle: IFeaturesStyle, pLayer: Layer): void;
        /**
         * Adds a card. These cards are not visible in the feature list.
         * @param pCard Reference to the card constructor.
         * @param bActivated Specifies if the card is activated.
         * @return Returns a reference to the feature.
         */
        card<T extends Card<THooks>>(pCard: T, bActivated?: boolean): Feature<T>;
        /**
         * Adds a card. These cards are not visible in the feature list.
         * @param pProps Specifies the properties for the card.
         * @return Returns a reference to the feature.
         */
        card<T extends Card<THooks>>(pProps: {
            card: T;
            visible?: boolean;
            activated?: boolean;
            disabled?: boolean;
            locked?: boolean;
            on?: (feature: Feature<T>) => void;
            onVisible?: (feature: Feature<T>) => void;
            onDisable?: (feature: Feature<T>) => void;
            onLock?: (feature: Feature<T>) => void;
        }): Feature<T>;
        /**
         * Adds a feature card switch to the list.
         * @param sName Contains the name of the feature.
         * @param pCard Reference to the card constructor.
         * @param bActivated Specifies if the feature is initially activated.
         * @return Returns a reference to the feature.
         */
        feature<T extends Card<THooks>>(sName: string, pCard: T, bActivated?: boolean): Feature<T>;
        /**
         * Adds a feature card switch to the list.
         * @param pProps Specifies the properties for the feature.
         * @return Returns a reference to the feature.
         */
        feature<T extends Card<THooks>>(pProps: {
            name: string;
            card: T;
            visible?: boolean;
            activated?: boolean;
            disabled?: boolean;
            locked?: boolean;
            on?: (feature: Feature<T>) => void;
            onVisible?: (feature: Feature<T>) => void;
            onDisable?: (feature: Feature<T>) => void;
            onLock?: (feature: Feature<T>) => void;
        }): Feature<T>;
        /**
         * Adds a option feature card to the list.
         * @param sName Contains the name of the feature.
         * @param pCard Reference to the card constructor.
         * @param bActivated Specifies if the option is initially activated.
         * @return Returns a reference to the feature.
         */
        option<T extends Card<THooks>>(sName: string, pCard?: T, bActivated?: boolean): Feature<T>;
        /**
         * Adds a option feature card to the list.
         * @param pProps Specifies the properties for the option.
         * @return Returns a reference to the feature.
         */
        option<T extends Card<THooks>>(pProps: {
            name: string;
            card?: T;
            visible?: boolean;
            activated?: boolean;
            disabled?: boolean;
            locked?: boolean;
            on?: (feature: Feature<T>) => void;
            onVisible?: (feature: Feature<T>) => void;
            onDisable?: (feature: Feature<T>) => void;
            onLock?: (feature: Feature<T>) => void;
        }): Feature<T>;
        /**
         * Adds a toggle to the feature list.
         * @param sName Contains the name of the feature.
         * @param bActivated Specifies if the toggle is initially activated.
         * @return Returns a reference to the feature.
         */
        toggle(sName: string, bActivated?: boolean): Feature;
        /**
         * Adds a toggle to the feature list.
         * @param pProps Specifies the properties for the toggle.
         * @return Returns a reference to the feature.
         */
        toggle(pProps: {
            name: string;
            visible?: boolean;
            activated?: boolean;
            disabled?: boolean;
            locked?: boolean;
            on?: (feature: Feature) => void;
            onVisible?: (feature: Feature) => void;
            onDisable?: (feature: Feature) => void;
            onLock?: (feature: Feature) => void;
        }): Feature;
        /**
         * Adds a static feature to the feature list.
         * @param sName Contains the name of the feature.
         * @return Returns a reference to the feature.
         */
        static(sName: string): Feature;
        /**
         * Adds a static feature to the feature list.
         * @param pProps Specifies the properties for the static feature.
         * @return Returns a reference to the feature.
         */
        static(pProps: {
            name: string;
            visible?: boolean;
            disabled?: boolean;
            onVisible?: (feature: Feature) => void;
            onDisable?: (feature: Feature) => void;
        }): Feature;
        scrollIntoView(pFeature: Feature): void;
        /**
         * Scrolls to the top if the scroll position is not at the top or scrolls to
         * the bottom if the list is at the top.
         */
        scrollToTopOrBottom(): void;
        /** Destroys the features. */
        destroy(): void;
    }
    export type TFeatureEvents = "OnVisible" | "OnLock" | "OnDisable" | "OnToggle";
    export interface IFeatureEvents<Hook extends THooks> extends IHookPayload<Hook> {
        readonly feature: Feature;
    }
    export interface IFeatureVisibleEvent extends IFeatureEvents<"OnVisible"> {}
    export interface IFeatureLockEvent extends IFeatureEvents<"OnLock"> {}
    export interface IFeatureDisableEvent extends IFeatureEvents<"OnDisable"> {}
    export interface IFeatureToggleEvent extends IFeatureEvents<"OnToggle"> {}
    type TValidation = "unknown" | "fail" | "invalid" | "pass" | "await";
    /** Specifies the feature types. */
    export type TFeatureType = "card" | "toggle" | "static";
    /** Type alias for the feature callback. */
    export type TFeature<T extends Card<THooks>> = (pFeature: Feature<T>) => void;
    /** Describes the feature interface. */
    export interface IFeature<T extends Card<THooks> = Card<THooks>> {
        /** Specifies the feature type. */
        type: TFeatureType;
        /** Specifies if the feature is an option. */
        option: boolean;
        /** Specifies the feature name. */
        name: string;
        /** Reference to the card. */
        card?: T;
    }
    export class Feature<T extends Card<THooks> = Card<THooks>> extends StrictItem<Features, TFeatureEvents, IFeature<T>> {
        constructor(pList: Features, pFeature: IFeature<T>);
        /** Retrieves a reference to the features. */
        get features(): Features;
        /** Retrieves the card. */
        get card(): T | undefined;
        /** Retrieves a reference to the feature element. */
        get element(): Element | undefined;
        /** Retrieves the feature type. */
        get type(): TFeatureType;
        /** Retrieves if the feature is visible. */
        get isVisible(): boolean;
        /** Specifies if the feature is visible. */
        set isVisible(bVisible: boolean);
        /** Retrieves if the feature is locked. */
        get isLocked(): boolean;
        /** Specifies if the feature is locked. */
        set isLocked(bLocked: boolean);
        /** Retrieves if the feature is disabled. */
        get isDisabled(): boolean;
        /** Specifies if the feature is disabled. */
        set isDisabled(bDisabled: boolean);
        /** Retrieves if the feature is activated. */
        get isActivated(): boolean;
        /** Specifies if the feature is activated. */
        set isActivated(bActivated: boolean);
        /** Retrieves the validation state of the feature. */
        get validation(): TValidation;
        /** Sets the validation state of the feature. */
        set validation(sValidation: TValidation);
        /** Retrieves if the feature validation is invalid. */
        get isInvalid(): boolean;
        /** Specifies if the feature validation is invalid. */
        set isInvalid(bInvalid: boolean);
        /** Retrieves if the feature validation has passed. */
        get isPassed(): boolean;
        /** Specifies if the feature validation has passed. */
        set isPassed(bPassed: boolean);
        /** Retrieves if the feature validation has failed. */
        get isFailed(): boolean;
        /** Specifies if the feature validation has failed. */
        set isFailed(bFailed: boolean);
        /** Retrieves if the feature validation is awaiting. */
        get isAwaiting(): boolean;
        /** Specifies if the feature validation is awaiting. */
        set isAwaiting(bAwaiting: boolean);
        /** Retrieves the feature name. */
        get name(): string;
        /** Sets the name of the feature. */
        set name(sName: string);

        /**
         * Draws a feature.
         * @param pElement Element to draw to.
         */
        draw(pElement: Element | undefined): void;
        /**
         * Attaches an `OnVisible` function to the feature. This function is invoked
         * when the visibility of the feature changes.
         * @param fnVisible Specifies the callback function.
         * @param sMode Specifies the callback mode (`synchronous` or `asynchronous`, default is `synchronous`).
         * @return Returns a reference to the feature to allow chaining.
         */
        onVisible(fnVisible: TFeature<T>, sMode?: "synchronous" | "asynchronous"): this;
        /**
         * Attaches an `OnToggle` function to the feature. This function is invoked
         * when the toggle state of the feature changes.
         * @param fnState Specifies the callback function.
         * @param sMode Specifies the callback mode (`synchronous` or `asynchronous`, default is `synchronous`).
         * @return Returns a reference to the feature to allow chaining.
         */
        onToggle(fnState: TFeature<T>, sMode?: "synchronous" | "asynchronous"): this;
        /**
         * Attaches an `OnLock` function to the feature. This function is invoked
         * when the lock state of the feature changes.
         * @param fnLock Specifies the callback function.
         * @param sMode Specifies the callback mode (`synchronous` or `asynchronous`, default is `synchronous`).
         * @return Returns a reference to the feature to allow chaining.
         */
        onLock(fnLock: TFeature<T>, sMode?: "synchronous" | "asynchronous"): this;
        /**
         * Attaches an `OnDisable` function to the feature. This function is invoked
         * when the disabled state of the feature changes.
         * @param fnDisable Specifies the callback function.
         * @param sMode Specifies the callback mode (`synchronous` or `asynchronous`, default is `synchronous`).
         * @return Returns a reference to the feature to allow chaining.
         */
        onDisable(fnDisable: TFeature<T>, sMode?: "synchronous" | "asynchronous"): this;
        /**
         * Sets the feature visibility.
         * @param bVisible Specifies if the feature is visible.
         * @return Returns a reference to the feature to allow chaining.
         */
        visible(bVisible?: boolean): this;
        /**
         * Shows the feature.
         * @return Returns a reference to the feature to allow chaining.
         */
        show(): this;
        /**
         * Hides the feature.
         * @return Returns a reference to the feature to allow chaining.
         */
        hide(): this;
        /**
         * Sets the feature locking state.
         * @param bLocked Specifies if the feature is locked.
         * @return Returns a reference to the feature to allow chaining.
         */
        locked(bLocked?: boolean): this;
        /**
         * Locks the feature.
         * @return Returns a reference to the feature to allow chaining.
         */
        lock(): this;
        /**
         * Unlocks the feature.
         * @return Returns a reference to the feature to allow chaining.
         */
        unlock(): this;
        /**
         * Sets the feature disabled state.
         * @param bDisabled Specifies if the feature is disabled.
         * @return Returns a reference to the feature to allow chaining.
         */
        disabled(bDisabled?: boolean): this;
        /**
         * Disables the feature.
         * @return Returns a reference to the feature to allow chaining.
         */
        disable(): this;
        /**
         * Enables the feature.
         * @return Returns a reference to the feature to allow chaining.
         */
        enable(): this;
        /**
         * Sets the feature state.
         * @param bActivated Specifies if the feature is activated.
         * @return Returns a reference to the feature to allow chaining.
         */
        activated(bActivated?: boolean): this;
        /**
         * Activates the feature.
         * @return Returns a reference to the feature to allow chaining.
         */
        activate(): this;
        /**
         * Deactivate the feature.
         * @return Returns a reference to the feature to allow chaining.
         */
        deactivate(): this;
        /**
         * Applies styles to the feature.
         * @param pStyle Specifies the styles.
         */
        style(pStyle: IStyles): this;
        /**
         * Sets focus to the feature.
         * @return Returns `true` if the feature gained focus.
         */
        focus(): boolean;
        /** Scrolls the feature into view. */
        scrollIntoView(): void;
    }
    export type TCardEvents =
        | "OnReady"
        | "OnMode"
        | "OnActivate"
        | "OnDeactivate"
        | "OnShow"
        | "OnHide"
        | "OnValidated"
        | "OnResize"
        | "OnResized"
        | "OnDestroy";
    export interface ICardEvents<Hook extends THooks> extends IHookPayload<Hook> {
        readonly card: Card<THooks>;
    }
    export interface ICardReadyEvent extends ICardEvents<"OnReady"> {}
    export interface ICardModeEvent extends ICardEvents<"OnMode"> {}
    export interface ICardActivateEvent extends ICardEvents<"OnActivate"> {}
    export interface ICardDeactivateEvent extends ICardEvents<"OnDeactivate"> {}
    export interface ICardShowEvent extends ICardEvents<"OnShow"> {}
    export interface ICardHideEvent extends ICardEvents<"OnHide"> {}
    export interface ICardValidatedEvent extends ICardEvents<"OnValidated"> {}
    export interface ICardResizeEvent extends ICardEvents<"OnResize"> {}
    export interface ICardResizedEvent extends ICardEvents<"OnResized"> {}
    export interface ICardDestroyEvent extends ICardEvents<"OnDestroy"> {}
    const enum Mode {
        Normal = 1,
        Compact = 2,
        Both = 3,
    }
    export abstract class Card<T extends THooks = void> extends Item<TCardEvents | T> {
        /**
         * Creates a new card.
         * @param nModes Specifies the supported modes for the card.
         */
        constructor(nModes?: Mode);

        /** Retrieves a reference to the cards. */
        get cards(): Cards<THooks> | undefined;
        /** Retrieves a reference to the feature. */
        get feature(): Feature | undefined;
        /** Sets the feature reference. */
        set feature(pFeature: Feature | undefined);
        /** Retrieves a reference to the stylesheet. */
        get stylesheet(): Stylesheet;
        /** Retrieves a reference to the card element. */
        get element(): Element | undefined;
        /** Retrieves a reference to the card context. */
        get context(): Element | undefined;
        /** Returns the position of the card. */
        get position(): number;
        /** Returns the tail for the card. */
        get tail(): number;
        /** Retrieves the supported modes for the card. */
        get modes(): Mode;
        /** Retrieves the mode. */
        get mode(): Mode;
        /** Retrieves if the normal mode is active. */
        get isModeNormal(): boolean;
        /** Retrieves if the compact mode is active. */
        get isModeCompact(): boolean;
        /** Retrieves if the card is drawn. */
        get isDrawn(): boolean;
        /** Retrieves if the card is initialized. */
        get isInitialized(): boolean;
        /** Retrieves if the card is ready. */
        get isReady(): boolean;
        /** Retrieves if the card is measured. */
        get isMeasured(): boolean;
        /** Retrieves if the card is measurable. */
        get isMeasurable(): boolean;
        /** Retrieves if the card is observable. */
        get isObservable(): boolean;
        /** Retrieves if this card is the first observable card. */
        get isFirstObservable(): boolean;
        /** Retrieves if this card is the first observable card. */
        get isLastObservable(): boolean;
        /** Retrieves if the card is activated. */
        get isActivated(): boolean;
        /** Retrieves if the card is visible. */
        get isVisible(): boolean;
        /** Specifies if the card is visible. */
        set isVisible(bVisible: boolean);
        /** Retrieves if the card is empty (has no visible content). */
        get isEmpty(): boolean;
        /** Specifies if the card is empty. */
        set isEmpty(bEmpty: boolean);
        /** Retrieves the validation state of the card. */
        get validation(): TValidation;
        /** Retrieves if the card validation has passed. */
        get isPassed(): boolean;
        /** Retrieves if the card validation is invalid. */
        get isInvalid(): boolean;
        /** Retrieves if the card validation has failed. */
        get isFailed(): boolean;
        /** Retrieves if the card validation is awaiting. */
        get isAwaiting(): boolean;

        /**
         * Draws the card.
         * @param pContext Reference to the element to draw to.
         * @event
         */
        protected abstract onDraw(pContext: Element): void;
        /**
         * Invoked when the card is shown.
         * @event
         */
        protected onShow(): void;
        /**
         * Invoked when the card is hidden.
         * @event
         */
        protected onHide(): void;
        /**
         * Invoked when the card is activated.
         * @event
         */
        protected onActivate(): void;
        /**
         * Invoked when the card is deactivated.
         * @event
         */
        protected onDeactivate(): void;
        /**
         * Invoked when the card is destroyed.
         * @event
         */
        protected onDestroy(): void;
        /**
         * Invoked when the card is measured. A measure correction in pixels can
         * be supplied in the return value.
         * @return Returns the measure correction for the card.
         * @event
         */
        protected onMeasure(): number;
        /**
         * Invoked when the card layer is resized.
         * @event
         */
        protected onResize(): void;
        /**
         * Invoked when the card itself is resized.
         * @event
         */
        protected onResized(): void;
        /**
         * Invoked when the card needs to be validated.
         * @param pCallback Reference to the callback. Pass this object as return
         * value to enable the asynchronous validation callback.
         * @return Returns the validation state.
         * @event
         */
        protected onValidate(pCallback: Callback<TValidation>): TValidation | Callback<TValidation>;
        /**
         * Invoked when the card is validated.
         * @event
         */
        protected onValidated(): void;
        /**
         * Invoked when the card is ready.
         * @event
         */
        protected onReady(): void;
        /**
         * Invoked when the card is initialized.
         * @return Returns the initialization state. If `true` is returned this
         * indicates the card is initialized. If you return `false` the system waits
         * for a call to the `Initialized` method.
         * @event
         */
        onInit(): boolean;
        /**
         * Invoked when the mode of the card is changed.
         * @event
         */
        onMode(): void;
        /**
         * Invoked when the card receives a focus request.
         * @return Returns `true` if the card accepted the focus request.
         * @event
         */
        onRequestFocus(): boolean;
        /**
         * Invoked when the card receives an auto-focus request.
         * @return Returns `true` if the card accepted the auto-focus request.
         */
        onRequestAutoFocus(): boolean;
        /**
         * Invoked when a card is popped.
         * @param pEvent Contains the event information.
         * @event
         */
        onPop(pEvent: IItemPopEvent<Card<T>>): void;
        /** Marks the card as initialized. */
        initialized(): void;
        /**
         * Measures the size of the card.
         * @param nSize Specifies the size.
         * @return Returns `true` if the size is changed.
         */
        measure(nSize?: number): boolean;
        /** Card is measured. */
        measured(): void;
        /** Resizes the card. */
        resize(): void;
        /** Marks the card as ready. */
        ready(): void;
        /**
         * Activates the card.
         * @param pCards Reference to the cards stack.
         * @param bScrollIntoView Specifies if the card should scroll into view.
         */
        activate(pCards: Cards<THooks>, bScrollIntoView?: boolean): this;
        /** Deactivates the card. */
        deactivate(): this;
        /** Shows the card. */
        show(): this;
        /** Hides the card. */
        hide(): this;
        /** Shows or hides the card. */
        visible(bVisible: boolean, bScrollIntoView?: boolean): this;
        /** Validates the card. */
        validate(): this;
        /**
         * Captures focus to the card.
         * @param sTo Specifies if the focus is set to the first or last item in
         * the card.
         * @return Returns `true` if the focus is captured.
         */
        focus(sTo?: "first" | "last"): boolean;
        /** Scrolls the card (or an specific element of the card) into view. */
        scrollIntoView(pElement?: Element, bOnlyWhenInvisible?: boolean): this;
        /** Destroys the card. */
        destroy(): void;
    }
    /** Describes the card style. */
    export interface ICardStyle {
        /** Card appearance. */
        appearance?: IStyles;
        /** Specifies the card spacing properties. */
        spacing?: {
            /** Top spacing. */
            top?: number;
            /** Between spacing. */
            between?: number;
            /** Bottom spacing. */
            bottom?: number;
            /** Left spacing. */
            left?: number;
            /** Right spacing. */
            right?: number;
        };
        /** Normal mode. */
        normal?: IStyles;
        /** Compact mode. */
        compact?: IStyles;
        /** Passed state. */
        passed?: IStyles;
        /** Failed state. */
        failed?: IStyles;
        /** Awaiting state. */
        awaiting?: IStyles;
        /** Specifies the animations. */
        animations?: {
            /** Specifies the shift animations. */
            shift?: IStyles;
            /** Specifies the animations for cards that are activated. */
            activate?: IStyles;
            /** Specifies a delay in milliseconds for the activate animation. */
            activateDelay?: number;
            /** Specifies the animations for cards that are deactivated. */
            deactivate?: IStyles;
            /** Specifies a delay in milliseconds for the deactivate animation. */
            deactivateDelay?: number;
        };
    }
    /** Describes the cards style. */
    export interface ICardsStyle {
        /** Contains the layer spacing. */
        spacing?: Spacing;
        /** Cards appearance. */
        appearance?: IStyles;
        /** Specifies the feature style. */
        features?: IFeaturesStyle;
        /** Specifies the card style. */
        cards?: ICardStyle;
        /** Specifies scrollbar styles for features. */
        scrollbars?: IScrollbarsStyle;
        /** Specifies if scroll bouncing is enabled. */
        bounce?: "no" | "yes" | "always";
        /** Specifies if the scrollbars needs to blink. */
        blink?: boolean;
    }
    /** Describes the toolbar properties. */
    export interface ICardsProperties {
        /**
         * Specifies the stylesheet to write the cards styles to. If omitted
         * the default application global stylesheet will be used.
         */
        stylesheet?: Stylesheet;
        /** Specifies the cards style. */
        style?: ICardsStyle;
        /** Specifies the layer for the cards. */
        layer?: Layer;
        /** Specifies the initial mode. */
        mode?: "normal" | "compact" | Mode;
    }
    export type TCardsEvents =
        | "OnMode"
        | "OnValidated"
        | "OnDestroy"
        | "OnCardActivate"
        | "OnCardDeactivate"
        | "OnCardShow"
        | "OnCardHide"
        | "OnCardDestroy";
    export interface ICardsEvents<Hook extends THooks> extends IHookPayload<Hook> {
        readonly cards: Cards<THooks>;
    }
    export interface ICardEvents<Hook extends THooks> extends ICardsEvents<Hook> {
        readonly card: Card<THooks>;
    }
    export interface ICardsModeEvent extends ICardsEvents<"OnMode"> {}
    export interface ICardsValidatedEvent extends ICardsEvents<"OnValidated"> {}
    export interface ICardsDestroyEvent extends ICardsEvents<"OnDestroy"> {}
    export interface ICardsActivateCardEvent extends ICardEvents<"OnCardActivate"> {}
    export interface ICardsDeactivateCardEvent extends ICardEvents<"OnCardDeactivate"> {}
    export interface ICardsShowCardEvent extends ICardEvents<"OnCardShow"> {}
    export interface ICardsHideCardEvent extends ICardEvents<"OnCardHide"> {}
    export interface ICardsDestroyCardEvent extends ICardEvents<"OnCardDestroy"> {}
    export class Cards<T extends THooks = void> extends Matrix<Card<THooks>, TCardsEvents | T> {
        /** Contains the default stylesheet. */
        static stylesheet: Stylesheet;
        /** Contains the default style. */
        static style: ICardsStyle | undefined;

        /** Retrieves the next static tab index. */
        static get tab(): number;
        /**
         * Constructs a new cards host.
         * @param pPropertiesList Specifies the cards properties. Multiple
         * properties objects can be supplied. They will be combined to a single
         * immutable properties object.
         */
        constructor(...pPropertiesList: ICardsProperties[]);

        /** Retrieves a reference to the stylesheet. */
        get stylesheet(): Stylesheet;
        /** Retrieves a reference to the layer. */
        get layer(): Layer;
        /**
         * Retrieves a reference to the features. This will automatically activate
         * the features list when this property is requested during construction.
         */
        get features(): Features;
        /** Retrieves if the socket supports features. */
        get isFeaturesSupported(): boolean;
        /** Retrieves the top spacing of the first card. */
        get spacingTop(): number;
        /** Retrieves the spacing between cards. */
        get spacingBetween(): number;
        /** Retrieves the bottom spacing for the last card. */
        get spacingBottom(): number;
        /** Retrieves the deactivate delay. */
        get deactivateDelay(): number;
        /** Retrieves the next tab index. */
        get tab(): number;
        /** Retrieves the mode. */
        get mode(): Mode;
        /** Sets the mode. */
        set mode(nMode: Mode);
        /** Retrieves if the mode is swapped. */
        get isModeSwapping(): boolean;
        /** Retrieves the validation state. */
        get validation(): TValidation;
        /** Retrieves if the validation is invalid. */
        get isInvalid(): boolean;
        /** Retrieves if the validation has failed. */
        get isFailed(): boolean;
        /** Retrieves if the validation has passed. */
        get isPassed(): boolean;
        /** Retrieves if the validation is awaiting. */
        get isAwaiting(): boolean;
        /** Retrieves if the cards are drawn. */
        get isDrawn(): boolean;
        /** Retrieves if the cards are ready. */
        get isReady(): boolean;

        /**
         * Invoked when the mode changes.
         * @event
         */
        protected onMode(): void;
        /**
         * Invoked when the validation state changes.
         * @event
         */
        protected onValidated(): void;
        /**
         * Invoked when the cards are destroyed.
         * @event
         */
        protected onDestroy(): void;
        /** Verifies the initialization state of the cards. */
        initialize(): void;
        /**
         * Draws a card.
         * @param pCard Reference to the card.
         * @param fnDraw Specifies the draw function.
         * @return Returns a reference to the element.
         */
        drawCard(pCard: Card<THooks>, fnDraw: (pElement: Element) => void): Element | undefined;
        /**
         * Adds a card.
         * @param pCard Reference to the card.
         * @param nIndex Specifies the index.
         * @return Returns a reference to the card.
         */
        add<C extends Card<THooks>>(pCard: C, nIndex?: number): C;
        /** Updates the cards layer. */
        update(): void;
        /**
         * Validates the cards and returns the result.
         * @return Returns the validation state of the cards.
         */
        validate(): TValidation;
        /** Switches to the compact mode. */
        switchToCompactMode(): this;
        /** Switches to the normal mode. */
        switchToNormalMode(): this;
        /**
         * Invoked when a card is activated.
         * @param pCard Reference to the card.
         * @event
         */
        onCardActivate(pCard: Card<THooks>): void;
        /**
         * Invoked when a card is deactivated.
         * @param pCard Reference to the card.
         * @event
         */
        onCardDeactivate(pCard: Card<THooks>): void;
        /**
         * Invoked when a card is shown.
         * @param pCard Reference to the card.
         * @event
         */
        onCardShow(pCard: Card<THooks>): void;
        /**
         * Invoked when a card is hidden.
         * @param pCard Reference to the card.
         * @event
         */
        onCardHide(pCard: Card<THooks>): void;
        /**
         * Invoked when a card is destroyed.
         * @param pCard Reference to the card.
         * @event
         */
        onCardDestroy(pCard: Card<THooks>): void;
        /** Scrolls an element into view. */
        scrollElementIntoView(pElement: Element, nSpacingTop?: number, nSpacingBottom?: number, bOnlyWhenInvisible?: boolean): void;
        scrollCardIntoView(pCard: Card<THooks>): void;
        /**
         * Scrolls to the top if the scroll position is not at the top or scrolls to
         * the bottom if the list is at the top.
         */
        scrollToTopOrBottom(): void;
        /** Destroys the cards. */
        destroy(): void;
    }

    export { Mode as CardMode, TValidation as TCardValidation };
}

declare module "tripetto/module/ui-form-button" {
    import { Element, IStyles } from "tripetto/module/dom";
    import { IControlStyle, StaticControl } from "tripetto/module/ui-form";

    export interface IButtonStyle extends IControlStyle {
        /** Button appearance. */
        appearance?: IStyles;
        /** Button fused with form. */
        fused?: IStyles;
        /** Button disabled. */
        disabled?: IStyles;
        /** Button focus. */
        focus?: IStyles;
        /** Button hover. */
        hover?: IStyles;
        /** Button tapped. */
        tap?: IStyles;
        /** Normal button. */
        normal?: {
            /** Button appearance. */
            appearance?: IStyles;
            /** Button focus. */
            focus?: IStyles;
            /** Button hover. */
            hover?: IStyles;
            /** Button tapped. */
            tap?: IStyles;
        };
        /** Accept button. */
        accept?: {
            /** Button appearance. */
            appearance?: IStyles;
            /** Button focus. */
            focus?: IStyles;
            /** Button hover. */
            hover?: IStyles;
            /** Button tapped. */
            tap?: IStyles;
        };
        /** Warning button. */
        warning?: {
            /** Button appearance. */
            appearance?: IStyles;
            /** Button focus. */
            focus?: IStyles;
            /** Button hover. */
            hover?: IStyles;
            /** Button tapped. */
            tap?: IStyles;
        };
        /** Cancel button. */
        cancel?: {
            /** Button appearance. */
            appearance?: IStyles;
            /** Button focus. */
            focus?: IStyles;
            /** Button hover. */
            hover?: IStyles;
            /** Button tapped. */
            tap?: IStyles;
        };
    }
    type Types = "normal" | "accept" | "warning" | "cancel";
    export class Button extends StaticControl<IButtonStyle> {
        /** Contains the default style. */
        static style: IButtonStyle | undefined;

        /**
         * Creates a new button instance.
         * @param sLabel Specifies the label.
         * @param sType Specifies the type.
         * @param pStyle Specifies the optional style.
         */
        constructor(sLabel: string, sType?: Types, pStyle?: IButtonStyle);
        /** Retrieves the static element. */
        protected get static(): Element | undefined;
        /** Retrieves the type. */
        get buttonType(): Types;
        /** Specifies the type. */
        set buttonType(sType: Types);

        /**
         * Draws the control.
         * @param pForm Reference to the parent form element.
         * @event
         */
        protected onDraw(pForm: Element): Element;
        /**
         * Updates the control.
         * @event
         */
        protected onUpdate(): void;
        /**
         * Invoked when the enter key is pressed.
         * @return Returns `true` to cancel key bubbling.
         * @event
         */
        protected onEnter(): boolean;
        /**
         * Invoked when the focus state of the control is changed.
         * @event
         */
        protected onFocusOptions(): void;
        /**
         * Sets the focus to the control.
         * @return Returns `true` if the focus is set.
         */
        focus(): boolean;
        /** Blurs the focus of the control. */
        blur(): void;
        /**
         * Sets the type.
         * @param sType Specifies the type.
         * @return Returns a reference to the control to allow chaining.
         */
        type(sType: Types): this;
        /**
         * Sets the width of the control.
         * @param pWidth Specifies the control width in pixels or sets the width
         * to `auto` or `full`.
         * @return Returns a reference to the control to allow chaining.
         */
        width(pWidth: number | "auto" | "full"): this;
        /**
         * Specifies the tap function.
         * @param fnTap Specifies the tap function.
         * @return Returns a reference to the control to allow chaining.
         */
        on(fnTap: (pButton: Button) => void): this;
        /**
         * Specifies an URL for the button.
         * @param sURL Specifies the URL.
         * @return Returns a reference to the control to allow chaining.
         */
        url(sLink?: string, sTarget?: "blank" | "self"): this;
        /**
         * Specifies a function to execute on the click of the button.
         * @param fnAction Specifies the action function to invoke.
         * @return Returns a reference to the control to allow chaining.
         */
        onClick(fnAction: (pButton: Button) => void): this;
    }

    export { Types as ButtonTypes };
}

declare module "tripetto/module/ui-form-checkbox" {
    import { Element, IStyles } from "tripetto/module/dom";
    import { DataControl, IControlStyle, TBinding } from "tripetto/module/ui-form";

    export interface ICheckboxStyles {
        /** Checkbox appearance. */
        appearance?: IStyles;
        /** Checkbox label. */
        label?: IStyles;
        /** Checkbox description. */
        description?: IStyles;
        /** Checked state. */
        checked?: IStyles;
        /** Unchecked state. */
        unchecked?: IStyles;
    }
    export interface ICheckboxStyle extends IControlStyle, ICheckboxStyles {
        /** Checkbox disabled. */
        disabled?: ICheckboxStyles;
        /** Checkbox required. */
        required?: ICheckboxStyles;
        /** Checkbox locked. */
        locked?: ICheckboxStyles;
        /** Checkbox focus. */
        focus?: ICheckboxStyles;
        /** Checkbox hover. */
        hover?: ICheckboxStyles;
        /** Validation passed. */
        passed?: ICheckboxStyles;
        /** Validation failed. */
        failed?: ICheckboxStyles;
        /** Validation awaiting. */
        awaiting?: ICheckboxStyles;
        /** Fused with form card. */
        fused?: {
            /** Checkbox appearance. */
            appearance?: IStyles;
            /** Checkbox required. */
            required?: IStyles;
            /** Checkbox focus. */
            focus?: ICheckboxStyles;
            /** Checkbox hover. */
            hover?: ICheckboxStyles;
        };
    }
    export class Checkbox extends DataControl<boolean, ICheckboxStyle> {
        /** Contains the default style. */
        static style: ICheckboxStyle | undefined;

        /**
         * Creates a new checkbox instance.
         * @param sLabel Specifies the label.
         * @param bChecked Specifies if the checkbox is checked.
         * @param pStyle Specifies the optional style.
         */
        constructor(sLabel: string, bChecked?: TBinding<boolean>, pStyle?: ICheckboxStyle);
        /** Retrieves the static element. */
        protected get static(): Element | undefined;
        /** Retrieves if the checkbox is checked. */
        get isChecked(): boolean;
        /** Sets the checkbox state. */
        set isChecked(bChecked: boolean);
        /**
         * Draws the control.
         * @param pForm Reference to the parent form element.
         * @event
         */
        protected onDraw(pForm: Element): Element;
        /**
         * Updates the control.
         * @event
         */
        protected onUpdate(): void;
        /**
         * Invoked when the enter key is pressed.
         * @return Returns `true` to cancel key bubbling.
         * @event
         */
        protected onEnter(): boolean;
        /**
         * Invoked when the focus state of the control is changed.
         * @event
         */
        protected onFocusOptions(): void;
        /**
         * Invoked when the state of the checkbox changes.
         * @event
         */
        protected onData(): void;
        /**
         * Sets the checked state of the checkbox.
         * @param bChecked Specifies the state.
         */
        checked(bChecked?: boolean): this;
        /** Checks the checkbox. */
        check(): this;
        /** Unchecks the checkbox. */
        uncheck(): this;
        /** Toggles the checkbox. */
        toggle(): this;
        /**
         * Sets the focus to the checkbox.
         * @return Returns `true` if the focus is set.
         */
        focus(): boolean;
        /** Blurs the focus of the checkbox. */
        blur(): void;
        /**
         * Sets a description for a checkbox.
         * @param sDescription Specifies the description string.
         * @return Returns a reference to the control to allow chaining.
         */
        description(sDescription: string): this;
        /**
         * Sets the width of the control.
         * @param Width Specifies the control width in pixels.
         * @return Returns a reference to the control to allow chaining.
         */
        width(pWidth: number): this;
        /**
         * Specifies the function which is invoked when the checkbox is toggled.
         * @param fnToggle Specifies the toggle function.
         * @return Returns a reference to the control to allow chaining.
         */
        on(fnToggle: (pCheckbox: Checkbox) => void): this;
    }
}

declare module "tripetto/module/ui-form" {
    import { Callback } from "tripetto/module/callback";
    import { Element, IStyles, Stylesheet } from "tripetto/module/dom";
    import { TAny } from "tripetto/module/functional";
    import { Hooks, IHookPayload, THooks } from "tripetto/module/hookup";
    import { IMarkdownOptions } from "tripetto/module/markdown";
    import { IKeyboardEvent } from "tripetto/module/touch-keyboard";
    import { Card, CardMode, Feature, TCardValidation } from "tripetto/module/ui-cards";

    /** Describes the control base style. */
    export interface IControlStyle {}
    export interface IControlProperties<Style extends IControlStyle> {
        /** Specifies the control style. */
        style?: Style;
        /** Specifies the index name for the control styles in the form style object. */
        styleName?: string;
        /** Specifies the default control style. */
        styleDefault?: Style;
        /** Label for the control. */
        label?: string;
    }
    export type TControlEvents =
        | "OnExecute"
        | "OnChange"
        | "OnHover"
        | "OnFocus"
        | "OnFocusOptions"
        | "OnAutoFocus"
        | "OnBlur"
        | "OnResized"
        | "OnFormResize"
        | "OnFormActivate"
        | "OnFormDeactivate"
        | "OnFormEnable"
        | "OnFormDisable"
        | "OnShow"
        | "OnHide"
        | "OnEnable"
        | "OnDisable"
        | "OnRequire"
        | "OnOptional"
        | "OnLock"
        | "OnUnlock"
        | "OnMode"
        | "OnEnter"
        | "OnEscape"
        | "OnValidate";
    export interface IControlEvents<Hook extends THooks, T extends Control> extends IHookPayload<Hook> {
        readonly control: T;
    }
    export interface IControlExecuteEvent<T extends Control> extends IControlEvents<"OnExecute", T> {}
    export interface IControlHoverEvent<T extends Control> extends IControlEvents<"OnHover", T> {}
    export interface IControlFocusEvent<T extends Control> extends IControlEvents<"OnFocus", T> {}
    export interface IControlAutoFocusEvent<T extends Control> extends IControlEvents<"OnAutoFocus", T> {}
    export interface IControlBlurEvent<T extends Control> extends IControlEvents<"OnBlur", T> {}
    export interface IControlResizedEvent<T extends Control> extends IControlEvents<"OnResized", T> {}
    export interface IControlShowEvent<T extends Control> extends IControlEvents<"OnShow", T> {}
    export interface IControlHideEvent<T extends Control> extends IControlEvents<"OnHide", T> {}
    export interface IControlEnableEvent<T extends Control> extends IControlEvents<"OnEnable", T> {}
    export interface IControlDisableEvent<T extends Control> extends IControlEvents<"OnDisable", T> {}
    export interface IControlRequireEvent<T extends Control> extends IControlEvents<"OnRequire", T> {}
    export interface IControlOptionalEvent<T extends Control> extends IControlEvents<"OnOptional", T> {}
    export interface IControlLockEvent<T extends Control> extends IControlEvents<"OnLock", T> {}
    export interface IControlUnlockEvent<T extends Control> extends IControlEvents<"OnUnlock", T> {}
    export interface IControlModeEvent<T extends Control> extends IControlEvents<"OnMode", T> {}
    export interface IControlEnterEvent<T extends Control> extends IControlEvents<"OnEnter", T> {}
    export interface IControlEscapeEvent<T extends Control> extends IControlEvents<"OnEscape", T> {}
    export interface IControlValidateEvent<T extends Control> extends IControlEvents<"OnValidate", T> {}
    export type TControlChange = "visible" | "disabled" | "required" | "locked" | "focus" | "hover" | "validation";
    export type TControlValidationType =
        | "initial"
        | "revalidate"
        | "data"
        | "visible"
        | "disabled"
        | "required"
        | "locked"
        | "focus"
        | "blur";
    export type TControlValidation<T extends Control = Control> = (
        pControl: T,
        sType: TControlValidationType,
        pCallback: Callback<TCardValidation>
    ) => TCardValidation | Callback<TCardValidation>;
    export abstract class Control<Style extends IControlStyle = IControlStyle, H extends THooks = THooks> extends Hooks<
        TControlEvents | H
    > {
        /**
         * Creates a new control.
         * @param pProperties Specifies the control properties.
         */
        constructor(pProperties: IControlProperties<Style>);
        /** Retrieves a reference to the parent element. */
        protected get parent(): Element | undefined;
        /** Returns a reference to the control element. */
        protected get element(): Element | undefined;
        /** Retrieves the static element. */
        protected get static(): Element | undefined;
        /** Retrieves if the control is the only control in the form. */
        protected get isSingleControlInForm(): boolean;
        /**
         * Retrieves if the control is fused with the form card. This is only
         * possible with controls which have no separate label and are the one and
         * only control inside of the form.
         */
        get isFused(): boolean;
        /** Retrieves the parent form. */
        get form(): Form | undefined;
        /** Sets the parent form. */
        set form(pForm: Form | undefined);
        /** Retrieves if the form is ready. */
        get isFormReady(): boolean;
        /** Retrieves if the form is enabled. */
        get isFormEnabled(): boolean;
        /** Retrieves if the form is visible. */
        get isFormVisible(): boolean;
        /** Retrieves if the form group is visible. */
        get isGroupVisible(): boolean;
        /** Retrieves the control reference. */
        get ref(): string | undefined;
        /** Retrieves a reference to the feature of the form card. */
        get feature(): Feature | undefined;
        /** Retrieves if the control is attached to an enabled feature. */
        get isFeatureEnabled(): boolean;
        /** Retrieves if a label is set. */
        get hasLabel(): boolean;
        /** Retrieves the stylesheet for the control. */
        get stylesheet(): Stylesheet;
        /** Retrieves the control style. */
        get style(): Style | undefined;
        /** Retrieves the supported modes for the control. */
        get modes(): CardMode;
        /** Retrieves the tab index for the control. */
        get tab(): number;
        /** Retrieves if the control is visible. */
        get isVisible(): boolean;
        /** Sets the visibility of the control. */
        set isVisible(bVisible: boolean);
        /** Retrieves if the control is disabled. */
        get isDisabled(): boolean;
        /** Specifies if the control is disabled. */
        set isDisabled(bDisabled: boolean);
        /** Retrieves if the control is locked (readonly). */
        get isLocked(): boolean;
        /** Specifies if the control is locked (readonly). */
        set isLocked(bLocked: boolean);
        /** Retrieves if the control is required. */
        get isRequired(): boolean;
        /** Specifies if the control is required. */
        set isRequired(bRequired: boolean);
        /** Retrieves if the control is interactable. */
        get isInteractable(): boolean;
        /** Retrieves if the control is observable. */
        get isObservable(): boolean;
        /** Specifies it the control value is readable. */
        get isReadable(): boolean;
        /** Retrieves if the control is hovered. */
        get isHovered(): boolean;
        /** Retrieves if the control has input focus. */
        get hasFocus(): boolean;
        /** Retrieves the validation state of the control. */
        get validation(): TCardValidation;
        /** Sets the validation state of the control. */
        set validation(sValidation: TCardValidation);
        /** Retrieves if the control validation has passed. */
        get isPassed(): boolean;
        /** Specifies if the control validation has passed. */
        set isPassed(bPassed: boolean);
        /** Retrieves if the control validation is invalid. */
        get isInvalid(): boolean;
        /** Specifies if the control validation is invalid. */
        set isInvalid(bInvalid: boolean);
        /** Retrieves if the control validation has failed. */
        get isFailed(): boolean;
        /** Specifies if the control validation has failed. */
        set isFailed(bFailed: boolean);
        /** Retrieves if the control validation is awaiting. */
        get isAwaiting(): boolean;
        /** Specifies if the control validation is awaiting. */
        set isAwaiting(bAwaiting: boolean);

        /**
         * Updates the control state.
         * @param sChange Specifies what is changed.
         */
        protected updateControl(sChange: TControlChange): void;
        /**
         * Updates the focus state of a control.
         * @param bFocus Specifies if the control has captured focus.
         * @param bAutoBlur Specifies if the auto-blur should be used.
         * @param pVirtual Specifies the virtual focus subject.
         * @param pPhysical Specifies the physical focus subject.
         */
        protected updateFocus(bFocus: boolean, bAutoBlur: boolean, pVirtual?: Element, pPhysical?: Element): void;
        /**
         * Sets the hover state.
         * @param bHover Specifies if the hover is active.
         */
        protected hover(bHover: boolean): void;
        /**
         * Attach keyboard events to the control.
         * @param pElement Reference to the element to bind the events to.
         * @param fnEnter Specifies the function which is invoked when an enter is detected.
         * @param bEnterOverride Overrides the default enter behavior from an element (for example the textarea).
         * @param fnKeyPress Invoked when a key is pressed.
         */
        protected keyboard(
            pElement: Element,
            fnEnter?: () => boolean,
            bEnterOverride?: boolean,
            fnKeyPress?: (pKeyboardEvent: IKeyboardEvent) => boolean
        ): void;
        /** Marks the control as initialized. */
        protected initialized(): void;
        /**
         * Invoked when the control should be drawn.
         * @param pParent Reference to the parent form element.
         * @return Returns a reference to the control element.
         * @event
         */
        protected abstract onDraw(pParent: Element): Element;
        /**
         * Invoked when the control needs to be updated.
         * @event
         */
        protected onUpdate(): void;
        /**
         * Invoked when the control is executed.
         * @event
         */
        protected onExecute(): void;
        /**
         * Invoked when the control changed.
         * @event
         */
        protected onChange(sChange: TControlChange): void;
        /**
         * Invoked when the control is hovered.
         * @event
         */
        protected onHover(): void;
        /**
         * Invoked when the control captures focus.
         * @param bAutoFocus Specifies if an auto-focus was active.
         * @event
         */
        protected onFocus(bAutoFocus: boolean): void;
        /**
         * Invoked when the focus state of the control is changed.
         * @event
         */
        protected onFocusOptions(): void;
        /**
         * Invoked when the control loses focus.
         * @event
         */
        protected onBlur(): void;
        /**
         * Invoked when the enter (return) key is pressed.
         * @param pElement Reference to the element.
         * @return Return `true` if you want to cancel key bubbling.
         * @event
         */
        protected onEnter(pElement: Element): boolean;
        /**
         * Invoked when the escape key is pressed.
         * @param pElement Reference to the element.
         * @return Return `true` if you want to cancel key bubbling.
         * @event
         */
        protected onEscape(pElement: Element): boolean;
        /**
         * Invoked when the control is enabled.
         * @event
         */
        protected onEnable(): void;
        /**
         * Invoked when the control is disabled.
         * @event
         */
        protected onDisable(): void;
        /**
         * Invoked when the control is required.
         * @event
         */
        protected onRequire(): void;
        /**
         * Invoked when the control is optional.
         * @event
         */
        protected onOptional(): void;
        /**
         * Invoked when the control is locked.
         * @event
         */
        protected onLock(): void;
        /**
         * Invoked when the control is unlocked.
         * @event
         */
        protected onUnlock(): void;
        /**
         * Invoked when the control validation state is changed.
         * @event
         */
        protected onValidate(): void;
        /**
         * Invoked when the control is initialized.
         * @return Return `true` if the control is initialized.
         * @event
         */
        onInit(): boolean;
        /**
         * Invoked when the control is measured. A measure correction in pixels can
         * be supplied in the return value.
         * @return Returns the measure correction for the control.
         * @event
         */
        onMeasure(): number;
        /**
         * Invoked when the control is resized.
         * @event
         */
        onResized(): void;
        /**
         * Invoked when the parent form is resized.
         * @event
         */
        onFormResize(): void;
        /**
         * Invoked when the control form is activated.
         * @event
         */
        onFormActivate(): void;
        /**
         * Invoked when the control form is deactivated.
         * @event
         */
        onFormDeactivate(): void;
        /**
         * Invoked when the control form is enabled.
         * @event
         */
        onFormEnable(): void;
        /**
         * Invoked when the control form is disabled.
         * @event
         */
        onFormDisable(): void;
        /**
         * Invoked when the control is shown.
         * @event
         */
        onShow(): void;
        /**
         * Invoked when the control is hidden.
         * @event
         */
        onHide(): void;
        /**
         * Invoked when the control mode is changed.
         * @event
         */
        onMode(): void;
        /**
         * Fired when auto-focus is requested.
         * @return Returns `true` if the focus is set.
         */
        onRequestAutoFocus(): boolean;
        /**
         * Draws the control.
         * @param pParent Reference to the parent form element.
         */
        draw(pParent: Element): void;
        /** Redraws a control. */
        redraw(): this;
        /** Resizes the parent form. */
        resize(): void;
        /**
         * Specifies the visibility of the control group.
         * @param bVisible Specifies if the control group is visible.
         * @return Returns a reference to the control to allow chaining.
         */
        groupVisibility(bVisible: boolean): void;
        /**
         * Sets the label for the control.
         * @param sLabel Specifies the control label.
         * @return Returns a reference to the control to allow chaining.
         */
        label(sLabel: string): this;
        /**
         * Sets the compact label for the control.
         * @param sLabel Specifies the compact control label.
         * @return Returns a reference to the control to allow chaining.
         */
        labelCompact(sLabel: string): this;
        /**
         * Specifies if the label should support markdown formatting.
         * @param pOptions Specifies the markdown options.
         */
        markdown<T>(pOptions?: IMarkdownOptions<T>): this;
        /**
         * Specifies the visibility of the control.
         * @param bVisible Specifies if the control is visible.
         * @return Returns a reference to the control to allow chaining.
         */
        visible(bVisible?: boolean): this;
        /**
         * Shows the control.
         * @return Returns a reference to the control to allow chaining.
         */
        show(): this;
        /**
         * Hides the control.
         * @return Returns a reference to the control to allow chaining.
         */
        hide(): this;
        /**
         * Specifies the state of the control.
         * @param bDisable Specifies if the control is disabled.
         * @return Returns a reference to the control to allow chaining.
         */
        disabled(bDisabled?: boolean): this;
        /**
         * Disables the control.
         * @return Returns a reference to the control to allow chaining.
         */
        disable(): this;
        /**
         * Enables the control.
         * @return Returns a reference to the control to allow chaining.
         */
        enable(): this;
        /**
         * Specifies if the control is required.
         * @param bRequired Specifies if the control is required.
         * @return Returns a reference to the control to allow chaining.
         */
        required(bRequired?: boolean): this;
        /**
         * Makes the control required.
         * @return Returns a reference to the control to allow chaining.
         */
        require(): this;
        /**
         * Specifies if the control is locked (readonly).
         * @param bLocked Specifies if the control is locked (readonly).
         * @return Returns a reference to the control to allow chaining.
         */
        locked(bLocked?: boolean): this;
        /**
         * Makes the control readonly.
         * @return Returns a reference to the control to allow chaining.
         */
        readonly(): this;
        /**
         * Locks the control.
         * @return Returns a reference to the control to allow chaining.
         */
        lock(): this;
        /**
         * Unlocks the control.
         * @return Returns a reference to the control to allow chaining.
         */
        unlock(): this;
        /**
         * Sets the supported mode for the control.
         * @param sMode Specifies the desired mode.
         * @return Returns a reference to the control to allow chaining.
         */
        mode(sMode: "compact" | "normal" | "both"): this;
        /**
         * Sets the control mode to compact only.
         * @return Returns a reference to the control to allow chaining.
         */
        compactModeOnly(): this;
        /**
         * Sets the control mode to normal only.
         * @return Returns a reference to the control to allow chaining.
         */
        normalModeOnly(): this;
        /**
         * Enables control indentation. This can only be set during construction.
         * @param nSize Specifies the indent size in pixels.
         */
        indent(nSize: number): this;
        /**
         * Sets the validation state of the control or invokes a validation cycle if
         * automatic validation is activated.
         * @param sValidation Specifies the validation state or the validation type.
         * @return Returns a reference to the control to allow chaining.
         */
        validate(sValidation?: TCardValidation | TControlValidationType): this;
        /**
         * Enables automatic control validation.
         * @param fnValidation Specifies the validator.
         */
        autoValidate(fnValidation: TControlValidation): this;
        /**
         * Sets the control validation to passed.
         *
         */
        pass(): this;
        /**
         * Sets the control validation to invalid.
         *
         */
        invalid(): this;
        /**
         * Sets the control validation to failed.
         *
         */
        fail(): this;
        /**
         * Sets the control validation to waiting.
         *
         */
        await(): this;
        /**
         * Sets a control reference.
         * @param sReference Specifies the reference.
         * @return Returns a reference to the control to allow chaining.
         */
        reference(sReference: string): this;
        /**
         * Specifies a function which is invoked when the control is initialized.
         * @param fnExecute Specifies the function to execute.
         * @return Returns a reference to the control to allow chaining.
         */
        execute<T extends Control>(fnExecute: (pControl: T) => void): this;
        /**
         * Specifies a bind function (invoked when the control is initialized).
         * @param fnBind Specifies the function to execute.
         * @return Returns a reference to the control to allow chaining.
         */
        bind<T extends Control>(fnBind: (pControl: T) => void): this;
        /**
         * Specifies an unbind function (invoked when the control is destroyed).
         * @param fnUnbind Specifies the function to execute.
         * @return Returns a reference to the control to allow chaining.
         */
        unbind<T extends Control>(fnUnbind: (pControl: T) => void): this;
        /**
         * Enables auto-focus for the control.
         * @param bFocusAuto Specifies if auto-focus is enabled or not.
         * @return Returns a reference to the control to allow chaining.
         */
        autoFocus(bFocusAuto?: boolean): this;
        /**
         * Sets the focus to the control.
         * @param sTo Specifies if the focus should be set to the first or last
         * item in the control (in case a control has multiple items).
         * @return Returns `true` if the focus is set.
         */
        focus(sTo?: "first" | "last"): boolean;
        /**
         * Sets the focus to the previous or next item in the control. Override
         * this function if you need to shift focus within a control.
         * @param sTo Specifies if the focus is set to the previous or next control.
         * @return Returns `true` if the focus is captured by the control.
         */
        focusTo(sTo: "previous" | "next"): boolean;
        /** Blurs the focus of a control. */
        blur(): void;
        /** Destroys the control. */
        destroy(): void;
    }
    export type TFormEvents = "OnEnable" | "OnDisable" | "OnFocus" | "OnBlur" | "OnData";
    export interface IFormEvents<Hook extends THooks> extends IHookPayload<Hook> {
        readonly form: Form;
    }
    export interface IFormEnableEvent extends IFormEvents<"OnEnable"> {}
    export interface IFormDisableEvent extends IFormEvents<"OnDisable"> {}
    export interface IFormFocusEvent extends IFormEvents<"OnFocus"> {}
    export interface IFormBlurEvent extends IFormEvents<"OnBlur"> {}
    export interface IFormDataEvent extends IFormEvents<"OnData"> {}
    export type TGroupEvents = "OnShow" | "OnHide" | "OnEnable" | "OnDisable" | "OnLock" | "OnUnlock";
    export interface IGroupEvents<Hook extends THooks> extends IHookPayload<Hook> {
        readonly group: Group;
    }
    export interface IGroupShowEvent extends IGroupEvents<"OnShow"> {}
    export interface IGroupHideEvent extends IGroupEvents<"OnHide"> {}
    export interface IGroupEnableEvent extends IGroupEvents<"OnEnable"> {}
    export interface IGroupDisableEvent extends IGroupEvents<"OnDisable"> {}
    export interface IGroupLockEvent extends IGroupEvents<"OnLock"> {}
    export interface IGroupUnlockEvent extends IGroupEvents<"OnUnlock"> {}
    export class Group extends Hooks<TGroupEvents> {
        /**
         * Creates a new control group.
         * @param pControls Specifies the controls for the group.
         */
        constructor(pControls: Control[]);
        /** Retrieves if the group is visible. */
        get isVisible(): boolean;
        /** Sets the visibility of the group. */
        set isVisible(bVisible: boolean);
        /** Retrieves if the group is disabled. */
        get isDisabled(): boolean;
        /** Specifies if the group is disabled. */
        set isDisabled(bDisabled: boolean);
        /** Retrieves if the group is locked (readonly). */
        get isLocked(): boolean;
        /** Specifies if the group is locked (readonly). */
        set isLocked(bLocked: boolean);
        /** Retrieves the controls in the group. */
        get controls(): Control[];
        /**
         * Invoked when the group is shown.
         * @event
         */
        protected onShow(): void;
        /**
         * Invoked when the group is hidden.
         * @event
         */
        protected onHide(): void;
        /**
         * Invoked when the group is enabled.
         * @event
         */
        protected onEnable(): void;
        /**
         * Invoked when the group is disabled.
         * @event
         */
        protected onDisable(): void;
        /**
         * Invoked when the group is locked.
         * @event
         */
        protected onLock(): void;
        /**
         * Invoked when the group is unlocked.
         * @event
         */
        protected onUnlock(): void;
        /**
         * Specifies the visibility of the group.
         * @param bVisible Specifies if the group is visible.
         * @return Returns a reference to the group to allow chaining.
         */
        visible(bVisible: boolean): this;
        /**
         * Shows the group.
         * @return Returns a reference to the group to allow chaining.
         */
        show(): this;
        /**
         * Hides the group.
         * @return Returns a reference to the group to allow chaining.
         */
        hide(): this;
        /**
         * Specifies the state of the group.
         * @param bDisable Specifies if the group is disabled.
         * @return Returns a reference to the group to allow chaining.
         */
        disabled(bDisabled: boolean): this;
        /**
         * Disables the group.
         * @return Returns a reference to the group to allow chaining.
         */
        disable(): this;
        /**
         * Enables the group.
         * @return Returns a reference to the group to allow chaining.
         */
        enable(): this;
        /**
         * Specifies if the group is locked (readonly).
         * @param bLocked Specifies if the group is locked (readonly).
         * @return Returns a reference to the group to allow chaining.
         */
        locked(bLocked?: boolean): this;
        /**
         * Makes the group readonly.
         * @return Returns a reference to the group to allow chaining.
         */
        readonly(): this;
        /**
         * Locks the group.
         * @return Returns a reference to the group to allow chaining.
         */
        lock(): this;
        /**
         * Unlocks the group.
         * @return Returns a reference to the group to allow chaining.
         */
        unlock(): this;
    }
    /** Describes the form style. */
    export interface IFormStyle {
        /** Form appearance. */
        appearance?: IStyles;
        /** Form title. */
        title?: IStyles;
        /** Form disabled. */
        disabled?: IStyles;
        /** Form locked. */
        locked?: IStyles;
        /** Form required. */
        required?: IStyles;
        /** Form focus. */
        focus?: IStyles;
        /** Form validation passed. */
        passed?: IStyles;
        /** Form validation failed. */
        failed?: IStyles;
        /** Form validation awaiting. */
        awaiting?: IStyles;
        /** Form normal mode. */
        normal?: IStyles;
        /** Form Compact mode. */
        compact?: IStyles;
        /** Contains the number of indent pixels per level. */
        indentation?: number;
        /** Fused form. */
        fused?: {
            /** Fused form appearance. */
            appearance?: IStyles;
            /** Fused form title. */
            title?: IStyles;
        };
        /** Control styles. */
        controls?: {
            [control: string]: IControlStyle;
        };
    }
    export interface IFormProperties {
        /** Specifies the form style. */
        style?: IFormStyle;
        /** Contains the controls for the form. */
        controls: (Control | Group)[];
        /** Contains a form title. */
        title?: string;
        /** Specifies if markdown is supported in the form title. */
        markdown?: boolean | IMarkdownOptions<TAny>;
        /** Contains if the form is disabled. */
        disabled?: boolean;
        /** Specifies the supported modes for the form. */
        mode?: "normal" | "compact" | "both";
    }
    export class Form extends Card<TFormEvents> {
        /** Contains the default style. */
        static style: IFormStyle | undefined;

        /**
         * Constructs a new form.
         * @param pProperties Specifies the form properties.
         */
        constructor(pProperties: IFormProperties);
        /** Retrieves the number of controls in the form. */
        get count(): number;
        /** Retrieves the title. */
        get title(): string;
        /** Sets the title. */
        set title(sTitle: string);
        /** Retrieves if the form is disabled. */
        get isDisabled(): boolean;
        /** Sets the disabled state of the form. */
        set isDisabled(bDisabled: boolean);
        /** Retrieves if the form has focus. */
        get hasFocus(): boolean;
        /**
         * Draws the form.
         * @param pCard Reference to the card element.
         * @event
         */
        protected onDraw(pCard: Element): void;
        /**
         * Invoked when the form is measured. A measure correction in pixels can
         * be supplied in the return value.
         * @return Returns the measure correction for the form.
         * @event
         */
        protected onMeasure(): number;
        /**
         * Invoked when the form parent layer is resized.
         * @event
         */
        protected onResize(): void;
        /**
         * Invoked when the form is resized.
         * @event
         */
        protected onResized(): void;
        /**
         * Invoked when the form is activated.
         * @event
         */
        protected onActivate(): void;
        /**
         * Invoked when the form is deactivated.
         * @event
         */
        protected onDeactivate(): void;
        /**
         * Invoked when the control form is enabled.
         * @event
         */
        protected onEnable(): void;
        /**
         * Invoked when the control form is disabled.
         * @event
         */
        protected onDisable(): void;
        /**
         * Invoked when the form is shown.
         * @event
         */
        protected onShow(): void;
        /**
         * Invoked when the form is hidden.
         * @event
         */
        protected onHide(): void;
        /**
         * Invoked when the form captures focus.
         * @event
         */
        protected onFocus(): void;
        /**
         * Invoked when the form loses focus.
         * @event
         */
        protected onBlur(): void;
        /**
         * Validates the controls of the form.
         * @return Returns the validation state.
         * @event
         */
        protected onValidate(): TCardValidation;
        /**
         * Invoked when the form is destroyed.
         * @event
         */
        protected onDestroy(): void;
        /**
         * Invoked when the form is initialized.
         * @return Returns the initialization state of the form.
         * @event
         */
        onInit(): boolean;
        /**
         * Invoked when the form mode is changed.
         * @event
         */
        onMode(): void;
        /**
         * Invoked when the form receives a focus request.
         * @return Returns `true` if the form accepted the focus request.
         * @event
         */
        onRequestFocus(): boolean;
        /**
         * Invoked when the form receives an auto-focus request.
         * @return Returns `true` if the form accepted the focus request.
         */
        onRequestAutoFocus(): boolean;
        /**
         * Invoked when the data of a control is changed.
         * @event
         */
        onData(): void;
        /** Marks the form as initialized. */
        initialized(): void;
        /**
         * Iterates through all controls.
         * @param fnControl Contains the function which is invoked for each control.
         */
        each(fnControl: (pControl: Control) => void): void;
        /**
         * Retrieves the control at the specified index.
         * @param nIndex Specifies the control index.
         * @return Returns the control instance or `undefined` if the control is not found.
         */
        control<T extends Control>(nIndex: number): T | undefined;
        /**
         * Retrieves the control with the specified reference.
         * @param sReference Specifies the control reference.
         * @return Returns the control instance or `undefined` if the control is not found.
         */
        controlWithReference<T extends Control>(sReference: string): T | undefined;
        /**
         * Retrieves the control styles for the specified control.
         * @param sControl Specifies the style index.
         * @return Returns the styles or `undefined` if no styles are defined.
         */
        styles<T extends IControlStyle>(sControl: string): T | undefined;
        /** Verifies the visibility of the form. */
        verify(bDebounce?: boolean): void;
        /**
         * Sets focus to the first or last control in the form.
         * @param sTo Specifies if the focus is set to the first or last control.
         * @return Returns `true` if a control captured focus.
         */
        focus(sTo?: "first" | "last"): boolean;
        /**
         * Sets the focus to the previous or next control.
         * @param sTo Specifies if the focus is set to the previous or next control.
         * @return Returns `true` if the focus is shifted.
         */
        focusTo(sTo: "previous" | "next"): boolean;
        /** Updates the form focus. */
        focusUpdate(): void;
        /** Blurs the form. */
        blur(): void;
    }
    export type TBinding<T> = T | Binding<T | undefined>;
    export type TBindingModifier<T> = (pValue?: T) => T;
    export class Binding<T, Target extends {} = {}, Property extends keyof Target = TAny> {
        /** Contains if the binding is paused. */
        paused: boolean;
        /**
         * Creates a binding.
         * @param pTarget Reference to the target.
         * @param sProperty Specifies the property name.
         * @param pInactive Specifies the inactive value.
         * @param pDefault Specifies the default value.
         * @param fnModifier Specifies a modifier function for the data.
         */
        constructor(
            pTarget: Target,
            sProperty: Property,
            pInactive: Target[Property],
            pDefault?: Target[Property],
            fnModifier?: TBindingModifier<T>
        );
        /** Retrieves the inactive value. */
        get inactive(): Target[Property];
        /** Retrieves the default value. */
        get default(): Target[Property] | undefined;
        /** Retrieves the value. */
        get value(): T | undefined;
        /** Sets the value. */
        set value(pValue: T | undefined);
    }
    export abstract class DataControl<T, Style extends IControlStyle> extends Control<Style, "OnData"> {
        /**
         * Binds an object property allowing its value to update automatically
         * when the value of the control is changed. If the control is disabled or
         * invisible the supplied idle value will be set as property value.
         * @param pTarget Reference to the target object which contains the property.
         * @param sProperty Specifies the name of the property.
         * @param pValueWhenInactive Specifies the value which is set to the property
         * when the control is inactive (disabled or invisible).
         * @param pDefaultWhenActive Specifies the default value that will be
         * used when the control is active (enabled and visible).
         * @param fnModifier Specifies a modifier function for the data.
         */
        static bind<Target extends {}, P extends keyof Target>(
            pTarget: Target,
            sProperty: P,
            pValueWhenInactive: Target[P],
            pDefaultWhenActive?: Target[P],
            fnModifier?: TBindingModifier<Target[P]>
        ): Binding<Target[P], Target, P>;
        /**
         * Creates a new data control.
         * @param pBinding Specifies the initial data binding.
         * @param pDefault Specifies the default data value.
         * @param pProperties Specifies the control properties.
         */
        constructor(pBinding: TBinding<T>, pDefault: T, pProperties: IControlProperties<Style>);

        /**
         * Sets the input data for the control.
         * @param pData Specifies the input data.
         */
        protected input(pData: T): T;
        /** Retrieves the output data for the control. */
        protected output(): T;
        /**
         * Invoked when data is changed.
         * @event
         */
        protected onData(): void;
        /**
         * Invoked when the control is enabled.
         * @event
         */
        protected onEnable(): void;
        /**
         * Invoked when the control is disabled.
         * @event
         */
        protected onDisable(): void;
        /**
         * Invoked when the control form is activated.
         * @event
         */
        onFormActivate(): void;
        /**
         * Invoked when the control form is deactivated.
         * @event
         */
        onFormDeactivate(): void;
        /**
         * Invoked when the control form is enabled.
         * @event
         */
        onFormEnable(): void;
        /**
         * Invoked when the control form is disabled.
         * @event
         */
        onFormDisable(): void;
        /**
         * Invoked when the control is shown.
         * @event
         */
        onShow(): void;
        /**
         * Invoked when the control is hidden.
         * @event
         */
        onHide(): void;
        /** Pauses the data binding. */
        pauseBinding(): this;
        /** Resumes the data binding. */
        resumeBinding(): this;
        /** Forces a data refresh. */
        refresh(): this;
    }
    export abstract class StaticControl<Style extends IControlStyle> extends Control<Style, void> {
        /**
         * Creates a new control.
         * @param pControl Reference to the static control.
         */
        constructor(pProperties: IControlProperties<Style>);
    }
    export interface IControlDataEvent<T extends Control, D> extends IControlEvents<"OnData", T> {
        data: D;
    }
}

declare module "tripetto/module/ui-form-date" {
    import { Element, IStyles } from "tripetto/module/dom";
    import { DataControl, IControlStyle, TBinding, TControlChange } from "tripetto/module/ui-form";
    import { IMenuStyle } from "tripetto/module/ui-menu";

    export const enum DateTimeFeatures {
        /** Specifies if a date can be set. */
        Date = 1,
        /** Specifies if a time can be set. */
        Time = 2,
        /** Specifies if the minutes can be set. */
        TimeHoursOnly = 4,
        /** Specifies if the seconds can be set. */
        TimeHoursAndMinutesOnly = 8,
        /** Specifies if the control has a reset option. */
        NoResetOption = 16,
        /** Specifies if the control shows the weekday. */
        Weekday = 32,
        /** Specifies the default features. */
        Default = 35,
    }
    export interface IDateTimeStyle extends IControlStyle {
        /** Specifies the control height. */
        height: number;
        /** Date/time appearance. */
        appearance?: IStyles;
        /** Date appearance. */
        date?: IStyles;
        /** Time appearance. */
        time?: {
            /** Time appearance. */
            appearance?: IStyles;
            /** Hour-minute digit separator. */
            hourMinuteSeparator?: IStyles;
            /** Minute-second digit separator. */
            minuteSecondSeparator?: IStyles;
        };
        /** Date plane appearance. */
        plane?: {
            /** Idle appearance. */
            appearance: IStyles;
            /** Hover appearance. */
            hover?: IStyles;
            /** Selected appearance. */
            selected?: IStyles;
            /** Focus style. */
            focus?: IStyles;
            /** Selector menu style. */
            selector?: IMenuStyle;
        };
        /** Spacing in pixels between the date and time. */
        spacing?: number;
        /** Placeholder style. */
        placeholder?: {
            /** Base appearance. */
            appearance: IStyles;
            /** Text appearance. */
            text: IStyles;
        };
        /** Date label. */
        label?: IStyles;
        /** Date disabled. */
        disabled?: IStyles;
        /** Date required. */
        required?: IStyles;
        /** Date locked. */
        locked?: IStyles;
        /** Date focus. */
        focus?: IStyles;
        /** Date hover. */
        hover?: IStyles;
        /** Validation passed. */
        passed?: IStyles;
        /** Validation failed. */
        failed?: IStyles;
        /** Validation awaiting. */
        awaiting?: IStyles;
        /** Date appearance when fused with the form card. */
        fused?: {
            /** Date appearance. */
            appearance?: IStyles;
            /** Date label. */
            label?: IStyles;
            /** Date required. */
            required?: IStyles;
            /** Date locked. */
            locked?: IStyles;
            /** Date focus. */
            focus?: IStyles;
            /** Date hover. */
            hover?: IStyles;
            /** Validation passed. */
            passed?: IStyles;
            /** Validation failed. */
            failed?: IStyles;
            /** Validation awaiting. */
            awaiting?: IStyles;
        };
        /** Contains text labels. */
        labels: {
            /** Enable date. */
            enable: string;
            /** Disable date. */
            disable: string;
            /** Reset date. */
            reset?: string;
        };
    }
    type TDays =
        | 1
        | 2
        | 3
        | 4
        | 5
        | 6
        | 7
        | 8
        | 9
        | 10
        | 11
        | 12
        | 13
        | 14
        | 15
        | 16
        | 17
        | 18
        | 19
        | 20
        | 21
        | 22
        | 23
        | 24
        | 25
        | 26
        | 27
        | 28
        | 29
        | 30
        | 31;
    type TMonths = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
    export class DateTime extends DataControl<number | undefined, IDateTimeStyle> {
        /** Contains the default style. */
        static style: IDateTimeStyle | undefined;

        /**
         * Creates a new date instance.
         * @param nValue Specifies the initial value.
         * @param pStyle Specifies the optional style.
         */
        constructor(nValue?: TBinding<number>, pStyle?: IDateTimeStyle);

        /** Retrieves the static element. */
        protected get static(): Element | undefined;
        /** Retrieves if the selected value. */
        get value(): number | undefined;
        /** Sets the selected value. */
        set value(nValue: number | undefined);
        /** Retrieves if the control has a value. */
        get hasValue(): boolean;
        /** Retrieves the day of the month. */
        get dayOfMonth(): TDays;
        /** Sets the day. */
        set dayOfMonth(nDay: TDays);
        /** Retrieves the month. */
        get month(): TMonths;
        /** Sets the month. */
        set month(nMonth: TMonths);
        /** Retrieves the year. */
        get year(): number;
        /** Sets the year. */
        set year(nYear: number);
        /** Retrieves the hour. */
        get hour(): number;
        /** Sets the hour. */
        set hour(nHour: number);
        /** Retrieves the minute. */
        get minute(): number;
        /** Sets the minute. */
        set minute(nMinute: number);
        /** Retrieves the second. */
        get second(): number;
        /** Sets the second. */
        set second(nSecond: number);

        /**
         * Sets the input data for the control.
         * @param pData Specifies the input data.
         */
        protected input(nValue: number | undefined): number | undefined;
        /**
         * Draws the control.
         * @param pForm Reference to the parent form element.
         * @event
         */
        protected onDraw(pForm: Element): Element;
        /**
         * Invoked when the control changed.
         * @event
         */
        protected onChange(sChange: TControlChange): void;
        /**
         * Updates the control.
         * @event
         */
        protected onUpdate(): void;
        /**
         * Invoked when the control is disabled.
         * @event
         */
        protected onDisable(): void;
        /**
         * Invoked when the control is locked.
         * @event
         */
        protected onLock(): void;
        /**
         * Invoked when date is changed.
         * @event
         */
        protected onData(): void;
        /**
         * Invoked when the focus state of the control is changed.
         * @event
         */
        protected onFocusOptions(): void;
        /**
         * Sets the focus.
         * @param sTo Set focus to the first or last option.
         * @return Returns `true` if the focus is set.
         */
        focus(sTo?: "first" | "last"): boolean;
        /**
         * Sets the focus to the previous or next option
         * @param sTo Specifies if the focus is set to the previous or next option.
         * @return Returns `true` if the focus is captured by an option.
         */
        focusTo(sTo: "previous" | "next"): boolean;
        /** Blurs the focus. */
        blur(): void;
        /**
         * Sets the width of the control.
         * @param pWidth Specifies the control width in pixels or sets the width
         * to `auto` or `full`.
         * @return Returns a reference to the control to allow chaining.
         */
        width(pWidth: number | "auto" | "full"): this;
        /**
         * Sets a placeholder for the date/time control.
         * @param sPlaceholder Specifies the placeholder text.
         * @return Returns a reference to the control to allow chaining.
         */
        placeholder(sPlaceholder: string): this;
        /**
         * Specifies the function which is invoked when the date is changed.
         * @param fnChange Specifies the change function.
         * @return Returns a reference to the control to allow chaining.
         */
        on(fnChange: (pDate: DateTime) => void): this;
        /**
         * Specifies the date zone.
         * @param sZone Specifies the date zone (`local` or `UTC`).
         * @return Returns a reference to the control to allow chaining.
         */
        zone(sZone: "local" | "UTC"): this;
        /**
         * Specifies the date control features which should be enabled.
         * @param nFeatures Specifies the features which should be enabled.
         * @return Returns a reference to the control to allow chaining.
         */
        features(nFeatures: DateTimeFeatures): this;
        /**
         * Specifies the years range.
         * @param nFrom Specifies the from year.
         * @param nTo Specifies the to year.
         * @return Returns a reference to the control to allow chaining.
         */
        years(nFrom: number, nTo: number): this;
        /**
         * Specifies the minute/second interval.
         * @param nInterval Specifies the interval.
         * @return Returns a reference to the control to allow chaining.
         */
        interval(nInterval: number): this;
        /** Shows the options menu. */
        showOptions(): void;
        /** Shows the weekday selector. */
        showWeekdaySelector(): void;
        /** Shows the day of month selector. */
        showDayOfMonthSelector(): void;
        /** Shows the month selector. */
        showMonthSelector(): void;
        /** Shows the year selector. */
        showYearSelector(): void;
        /** Shows the hour selector. */
        showHourSelector(): void;
        /** Shows the minute selector. */
        showMinuteSelector(): void;
        /** Shows the seconds selector. */
        showSecondSelector(): void;
    }

    export { TDays as TDateTimeDays, TMonths as TDateTimeMonths };
}

declare module "tripetto/module/ui-form-dropdown" {
    import { Element, IStyles } from "tripetto/module/dom";
    import { DataControl, IControlStyle, TBinding } from "tripetto/module/ui-form";

    export interface IDropdownStyle extends IControlStyle {
        /** Dropdown appearance. */
        appearance?: IStyles;
        /** Options. */
        options?: IStyles;
        /** Option groups. */
        optGroups?: IStyles;
        /** Placeholder option. */
        placeholder?: IStyles;
        /** Dropdown label. */
        label?: IStyles;
        /** Dropdown disabled. */
        disabled?: IStyles;
        /** Dropdown required. */
        required?: IStyles;
        /** Dropdown locked. */
        locked?: IStyles;
        /** Dropdown focus. */
        focus?: IStyles;
        /** Dropdown hover. */
        hover?: IStyles;
        /** Validation passed. */
        passed?: IStyles;
        /** Validation failed. */
        failed?: IStyles;
        /** Validation awaiting. */
        awaiting?: IStyles;
        /** Dropdown when fused with form card. */
        fused?: {
            /** Dropdown appearance. */
            appearance?: IStyles;
            /** Dropdown label. */
            label?: IStyles;
            /** Dropdown required. */
            required?: IStyles;
            /** Dropdown locked. */
            locked?: IStyles;
            /** Dropdown focus. */
            focus?: IStyles;
            /** Dropdown hover. */
            hover?: IStyles;
            /** Validation passed. */
            passed?: IStyles;
            /** Validation failed. */
            failed?: IStyles;
            /** Validation awaiting. */
            awaiting?: IStyles;
        };
    }
    export interface IOption<T> {
        /** Label for the option. */
        readonly label: string;
        /** Value for the option. */
        readonly value: T;
        /** Specifies if the option is disabled. */
        readonly disabled?: boolean;
        /** Specifies an indentation level for an option. */
        readonly indent?: number;
    }
    export interface IOptionGroup {
        /** Label for the option groep. */
        readonly optGroup: string;
    }
    type TOption<T> = IOption<T> | IOptionGroup;
    export class Dropdown<T> extends DataControl<T | undefined, IDropdownStyle> {
        /** Contains the default style. */
        static style: IDropdownStyle | undefined;

        /**
         * Creates a new dropdown instance.
         * @param pOptions Specifies the options. This can be a callback function
         * which should return the options in a asynchronous matter.
         * @param pValue Specifies the initially selected value.
         * @param pStyle Specifies the optional style.
         */
        constructor(
            pOptions: TOption<T>[] | ((fnDone: (pOptions: TOption<T>[]) => void) => void),
            pValue: TBinding<T>,
            pStyle?: IDropdownStyle
        );
        /** Retrieves the static element. */
        protected get static(): Element | undefined;
        /** Retrieves the selected value. */
        get value(): T | undefined;
        /** Sets the selected value. */
        set value(pValue: T | undefined);

        /**
         * Draws the control.
         * @param pForm Reference to the parent form element.
         * @event
         */
        protected onDraw(pForm: Element): Element;
        /**
         * Updates the control.
         * @event
         */
        protected onUpdate(): void;
        /**
         * Invoked when the focus state of the control is changed.
         * @event
         */
        protected onFocusOptions(): void;
        /**
         * Invoked when the state of the dropdown changes.
         * @event
         */
        protected onData(): void;
        /**
         * Selects the specified option.
         * @param pValue Specifies the option value.
         */
        select(pValue: T): this;
        /**
         * Sets the focus to the dropdown.
         * @return Returns `true` if the focus is set.
         */
        focus(): boolean;
        /** Blurs the focus of the dropdown. */
        blur(): void;
        /**
         * Sets the width of the control.
         * @param pWidth Specifies the control width in pixels or sets the width
         * to `auto` or `full`.
         * @return Returns a reference to the control to allow chaining.
         */
        width(pWidth: number | "auto" | "full"): this;
        /**
         * Sets a placeholder for the dropdown.
         * @param sPlaceholder Specifies the placeholder text.
         * @return Returns a reference to the control to allow chaining.
         */
        placeholder(sPlaceholder: string): this;
        /**
         * Specifies the function which is invoked when the dropdown selection is changed.
         * @param fnChange Specifies the change function.
         * @return Returns a reference to the control to allow chaining.
         */
        on(fnChange: (pDropdown: Dropdown<T>) => void): this;
        /**
         * Sets or retrieves the label of the specified option or the current option
         * if no option value is specified.
         * @param pValue Specifies the option value.
         * @param sLabel Specifies a new label for the option.
         * @return Returns the label.
         */
        optionLabel(pValue?: T, sLabel?: string): string;
        /**
         * Sets or retrieves the disabled state of the specified option or the
         * current option if no option value is specified.
         * @param pValue Specifies the option value.
         * @param bDisabled Specifies the disabled state.
         */
        optionDisabled(pValue?: T, bDisabled?: boolean): boolean;
        /**
         * Sets the options for the dropdown.
         * @param pOptions Specifies an array of options.
         */
        options(pOptions: TOption<T>[]): this;
    }

    export { TOption as IDropdownOption };
}

declare module "tripetto/module/ui-form-email" {
    import { Callback } from "tripetto/module/callback";
    import { TCardValidation } from "tripetto/module/ui-cards";
    import { TBinding, TControlValidationType } from "tripetto/module/ui-form";
    import { ITextStyle, Text } from "tripetto/module/ui-form-text";

    export type TEmailValidation = (
        pControl: Email,
        sType: TControlValidationType,
        pCallback: Callback<TCardValidation>
    ) => TCardValidation | Callback<TCardValidation>;
    export class Email extends Text {
        /**
         * Creates a new email instance.
         * @param sValue Specifies the initial value.
         * @param pStyle Specifies the optional style.
         */
        constructor(sValue?: TBinding<string>, pStyle?: ITextStyle);
        /**
         * Enables automatic control validation.
         * @param fnValidation Specifies the validator.
         */
        autoValidate(fnValidation?: TEmailValidation): this;
    }
}

declare module "tripetto/module/ui-form-html" {
    import { Element, IStyles } from "tripetto/module/dom";
    import { IHookPayload } from "tripetto/module/hookup";
    import { Control, IControlStyle } from "tripetto/module/ui-form";

    export interface IHTMLStyle extends IControlStyle {
        /** HTML appearance. */
        appearance?: IStyles;
        /** HTML appearance when fused with form. */
        fused?: IStyles;
    }
    export class HTML extends Control<IHTMLStyle, "OnUpdate"> {
        /** Contains the default style. */
        static style: IHTMLStyle | undefined;

        /**
         * Creates a new HTML instance.
         * @param sHTML Specifies the HTML code for the control.
         * @param bInteractive Specifies if the HTML code is interactive. The touch
         * controller is disabled in that case.
         * @param pStyle Specifies the optional style.
         */
        constructor(sHTML: string, bInteractive?: boolean, pStyle?: IHTMLStyle);
        /** Retrieves the HTML code. */
        get HTML(): string;
        /** Sets the HTML code. */
        set HTML(sHTML: string);
        /**
         * Draws the HTML control.
         * @param pForm Reference to the parent form element.
         * @event
         */
        protected onDraw(pForm: Element): Element;
        /**
         * Indicates to the control something has changed and the control needs to
         * update its dimensions.
         */
        update(): void;
    }
    export interface IHTMLEvent extends IHookPayload<"OnUpdate"> {
        readonly HTML: HTML;
    }
}

declare module "tripetto/module/ui-form-notification" {
    import { Element, IStyles } from "tripetto/module/dom";
    import { IControlStyle, StaticControl } from "tripetto/module/ui-form";

    export interface INotificationStyle extends IControlStyle {
        /** Notification appearance. */
        appearance?: IStyles;
        /** Notification appearance when fused with the form card. */
        fused?: IStyles;
        /** Normal notification. */
        normal?: IStyles;
        /** Info notification. */
        info?: IStyles;
        /** Success notification. */
        success?: IStyles;
        /** Warning notification. */
        warning?: IStyles;
        /** Error notification. */
        error?: IStyles;
    }
    type Types = "normal" | "info" | "success" | "warning" | "error";
    export class Notification extends StaticControl<INotificationStyle> {
        /** Contains the default style. */
        static style: INotificationStyle | undefined;

        /**
         * Creates a new notification instance.
         * @param sLabel Specifies the label.
         * @param sType Specifies the type.
         * @param pStyle Specifies the optional style.
         */
        constructor(sLabel: string, sType?: Types, pStyle?: INotificationStyle);
        /** Retrieves the static element. */
        protected get static(): Element | undefined;
        /** Retrieves the notification type. */
        get notificationType(): Types;
        /** Specifies the notification type. */
        set notificationType(sType: Types);
        /**
         * Draws the control.
         * @param pForm Reference to the parent form element.
         * @event
         */
        protected onDraw(pForm: Element): Element;
        /**
         * Changes the notification type.
         * @param sType Specifies the type.
         */
        type(sType: Types): this;
    }

    export { Types as NotificationTypes };
}

declare module "tripetto/module/ui-form-numeric" {
    import { Element, IStyles } from "tripetto/module/dom";
    import { DataControl, IControlStyle, TBinding } from "tripetto/module/ui-form";

    export interface INumericStyle extends IControlStyle {
        /** Number input appearance. */
        appearance?: IStyles;
        /** Number input label. */
        label?: IStyles;
        /** Number input disabled. */
        disabled?: IStyles;
        /** Placeholder style. */
        placeholder?: IStyles;
        /** Contains the number selection styles. */
        selection?: IStyles;
        /** Number input required. */
        required?: IStyles;
        /** Number input locked. */
        locked?: IStyles;
        /** Number input focus. */
        focus?: IStyles;
        /** Number input hover. */
        hover?: IStyles;
        /** Validation passed. */
        passed?: IStyles;
        /** Validation failed. */
        failed?: IStyles;
        /** Validation awaiting. */
        awaiting?: IStyles;
        /** Number input when fused with form card. */
        fused?: {
            /** Number input appearance. */
            appearance?: IStyles;
            /** Number input label. */
            label?: IStyles;
            /** Number input required. */
            required?: IStyles;
            /** Number input locked. */
            locked?: IStyles;
            /** Number input focus. */
            focus?: IStyles;
            /** Number input hover. */
            hover?: IStyles;
            /** Validation passed. */
            passed?: IStyles;
            /** Validation failed. */
            failed?: IStyles;
            /** Validation awaiting. */
            awaiting?: IStyles;
        };
    }
    export class Numeric extends DataControl<number, INumericStyle> {
        /** Contains the default style. */
        static style: INumericStyle | undefined;

        /**
         * Creates a new number instance.
         * @param nValue Specifies the initial value.
         * @param pStyle Specifies the optional style.
         */
        constructor(nValue?: TBinding<number>, pStyle?: INumericStyle);

        /** Retrieves the static element. */
        protected get static(): Element | undefined;
        /** Retrieves if the input value. */
        get value(): number;
        /** Sets the input value. */
        set value(nValue: number);
        /** Retrieves the formatted value. */
        get string(): string;

        /**
         * Sets the input data for the control.
         * @param nValue Specifies the input data.
         */
        protected input(nValue: number): number;
        /**
         * Draws the control.
         * @param pForm Reference to the parent form element.
         * @event
         */
        protected onDraw(pForm: Element): Element;
        /**
         * Updates the control.
         * @event
         */
        protected onUpdate(): void;
        /**
         * Invoked when the input field captures focus.
         * @event
         */
        protected onFocus(bAutoFocus: boolean): void;
        /**
         * Invoked when the focus state of the control is changed.
         * @event
         */
        protected onFocusOptions(): void;
        /**
         * Invoked when the input field loses focus.
         * @event
         */
        protected onBlur(): void;
        /**
         * Invoked when the enter (return) key is pressed.
         * @param pElement Reference to the element.
         * @return Return `true` if you want to cancel key bubbling.
         * @event
         */
        protected onEnter(pElement: Element): boolean;
        /**
         * Invoked when the escape key is pressed.
         * @param pElement Reference to the element.
         * @return Return `true` if you want to cancel key bubbling.
         * @event
         */
        protected onEscape(pElement: Element): boolean;
        /**
         * Invoked when the input value changes.
         * @event
         */
        protected onData(): void;
        /**
         * Sets the focus to the control.
         * @return Returns `true` if the focus is set.
         */
        focus(): boolean;
        /** Blurs the focus of the control. */
        blur(): void;
        /**
         * Sets a fixed width for the control.
         * @param nWidth Specifies the control width in pixels.
         * @return Returns a reference to the control to allow chaining.
         */
        width(nWidth: number): this;
        /**
         * Sets the alignment of the control.
         * @param sAlign Specifies the alignment.
         * @return Returns a reference to the control to allow chaining.
         */
        align(sAlign: "left" | "center" | "right"): this;
        /**
         * Specifies if the alignment should be set to the left on focus.
         * @param bAlignLeftOnFocus Specifies if the alignment should be set to left on focus.
         * @return Returns a reference to the control to allow chaining.
         */
        alignLeftOnFocus(bAlignLeftOnFocus: boolean): this;
        /**
         * Sets a minimum value.
         * @param nMin Specifies the minimum value.
         * @return Returns a reference to the control to allow chaining.
         */
        min(nMin: number | undefined): this;
        /**
         * Sets a maximum value.
         * @param nMax Specifies the maximum value.
         * @return Returns a reference to the control to allow chaining.
         */
        max(nMax: number | undefined): this;
        /**
         * Specifies the precision.
         * @param nPrecision Specifies the number of precision digits.
         * @return Returns a reference to the control to allow chaining.
         */
        precision(nPrecision: number | "auto"): this;
        /**
         * Sets the decimal sign.
         * @param sDecimal Specifies the decimal sign.
         * @return Returns a reference to the control to allow chaining.
         */
        decimalSign(sDecimal: string): this;
        /**
         * Specify the number of digits for the numer.
         * @param nDigits Specifies the desired length.
         * @return Returns a reference to the control to allow chaining.
         */
        digits(nDigits: number): this;
        /**
         * Specifies if the thousands separator should be shown and which sign should
         * be used.
         * @param bThousands Specifies if the thousands separator should be shown.
         * @param sThousandsSign Specifies the thousands separator sign.
         * @return Returns a reference to the control to allow chaining.
         */
        thousands(bThousands: boolean, sThousandsSign?: string): this;
        /**
         * Specifies the prefix.
         * @param sPrefix Specifies the prefix string.
         * @return Returns a reference to the control to allow chaining.
         */
        prefix(sPrefix: string): this;
        /**
         * Specifies the plural prefix.
         * @param sPrefixPlural Specifies the prefix string.
         * @return Returns a reference to the control to allow chaining.
         */
        prefixPlural(sPrefixPlural: string | undefined): this;
        /**
         * Specifies the suffix.
         * @param sSuffix Specifies the suffix string.
         * @return Returns a reference to the control to allow chaining.
         */
        suffix(sSuffix: string): this;
        /**
         * Specifies the plural suffix.
         * @param sSuffixPlural Specifies the suffix string.
         * @return Returns a reference to the control to allow chaining.
         */
        suffixPlural(sSuffixPlural: string | undefined): this;
        /**
         * Specifies if the number needs to be selected automatically.
         * @param sSelect Specifies if the number needs to be selected.
         * @return Returns a reference to the control to allow chaining.
         */
        autoSelect(sSelect?: "no" | "focus" | "auto-focus"): this;
        /**
         * Specifies the function which is invoked when the user presses the enter key.
         * @param fnEnter Specifies the function to invoke. To cancel the normal
         * behavior return `true` within the function.
         * @return Returns a reference to the control to allow chaining.
         */
        enter(fnEnter: (pNumber: Numeric) => boolean): this;
        /**
         * Specifies the function which is invoked when the user presses the escape key.
         * @param fnEscape Specifies the function to invoke. To cancel the normal
         * behavior return `true` within the function.
         * @return Returns a reference to the control to allow chaining.
         */
        escape(fnEscape: (pNumber: Numeric) => boolean): this;
        /**
         * Specifies the function which is invoked when the input value changes.
         * @param fnChange Specifies the change function.
         * @return Returns a reference to the control to allow chaining.
         */
        on(fnChange: (pNumber: Numeric) => void): this;
        /**
         * Selects the number.
         * @return Returns a reference to the control to allow chaining.
         */
        select(): this;
    }
}

declare module "tripetto/module/ui-form-radiobutton" {
    import { Element, IStyles } from "tripetto/module/dom";
    import { TAny } from "tripetto/module/functional";
    import { IMarkdownOptions } from "tripetto/module/markdown";
    import { DataControl, IControlStyle, TBinding } from "tripetto/module/ui-form";

    interface IButton<T> {
        /** Value for the radio button option. */
        readonly value: T;
        /** Label for the radio button option. */
        readonly label: string;
        /** Specifies if the radio button option is disabled. */
        readonly disabled?: boolean;
        /** Specifies if the radio button option is visible. */
        readonly visible?: boolean;
        /** Specifies an additional description for the option. */
        readonly description?: string;
        /** Specifies if markdown is supported for the label and description. */
        readonly markdown?: boolean | IMarkdownOptions<TAny>;
    }
    export interface IRadiobuttonStyles {
        /** Checkbox label. */
        label?: IStyles;
        /** Checked state. */
        checked?: IStyles;
        /** Unchecked state. */
        unchecked?: IStyles;
    }
    export interface IRadiobuttonStyle extends IControlStyle {
        /** Control appearance. */
        appearance?: IStyles;
        /** Radiobutton appearance. */
        radiobutton?: {
            /** Radiobutton label. */
            label?: IStyles;
            /** Checked state. */
            checked?: IStyles;
            /** Unchecked state. */
            unchecked?: IStyles;
            /** Radiobutton disabled. */
            disabled?: IRadiobuttonStyles;
            /** Radiobutton focus. */
            focus?: IRadiobuttonStyles;
            /** Radiobutton hover. */
            hover?: IRadiobuttonStyles;
            /** Radiobutton description. */
            description?: IStyles;
        };
        /** Control label. */
        label?: IStyles;
        /** Control disabled. */
        disabled?: IStyles;
        /** Control required. */
        required?: IStyles;
        /** Control locked. */
        locked?: IStyles;
        /** Validation passed. */
        passed?: IStyles;
        /** Validation failed. */
        failed?: IStyles;
        /** Validation awaiting. */
        awaiting?: IStyles;
        /** Radiobutton when fused with form card. */
        fused?: {
            /** Control appearance. */
            appearance?: IStyles;
            /** Control label. */
            label?: IStyles;
            /** Control required. */
            required?: IStyles;
        };
    }
    export class Radiobutton<T> extends DataControl<T | undefined, IRadiobuttonStyle> {
        /** Contains the default style. */
        static style: IRadiobuttonStyle | undefined;

        /**
         * Creates a new radio button instance.
         * @param pButtons Specifies the radio buttons.
         * @param pValue Specifies the initially selected value.
         * @param pStyle Specifies the optional style.
         */
        constructor(pButtons: IButton<T>[], pValue: TBinding<T>, pStyle?: IRadiobuttonStyle);
        /** Retrieves the static element. */
        protected get static(): Element | undefined;
        /** Retrieves if the selected value. */
        get value(): T | undefined;
        /** Sets the selected value. */
        set value(sValue: T | undefined);

        /**
         * Draws the control.
         * @param pForm Reference to the parent form element.
         * @event
         */
        protected onDraw(pForm: Element): Element;
        /**
         * Updates the control.
         * @event
         */
        protected onUpdate(): void;
        /**
         * Invoked when the focus state of the control is changed.
         * @event
         */
        protected onFocusOptions(): void;
        /**
         * Invoked when the state of the checkbox changes.
         * @event
         */
        protected onData(): void;
        /**
         * Invoked when the control is disabled.
         * @event
         */
        protected onDisable(): void;
        /**
         * Invoked when the control is locked.
         * @event
         */
        protected onLock(): void;
        /**
         * Selects the specified button.
         * @param pValue Specifies the button value.
         */
        select(pValue: T): this;
        /**
         * Sets the focus.
         * @param sTo Set focus to the first or last button.
         * @return Returns `true` if the focus is set.
         */
        focus(sTo?: "first" | "last"): boolean;
        /**
         * Sets the focus to the previous or next button
         * @param sTo Specifies if the focus is set to the previous or next button.
         * @return Returns `true` if the focus is captured by an button.
         */
        focusTo(sTo: "previous" | "next"): boolean;
        /** Blurs the focus. */
        blur(): void;
        /**
         * Specifies the function which is invoked when the radiobutton selection is
         * changed.
         * @param fnChange Specifies the change function.
         * @return Returns a reference to the control to allow chaining.
         */
        on(fnChange: (pRadiobutton: Radiobutton<T>) => void): this;
        /**
         * Retrieves or sets the label of the specified button or the current button if no
         * button value is specified.
         * @param pValue Specifies the button value.
         * @param sLabel Specifies the new label.
         * @return Returns the label.
         */
        buttonLabel(pValue?: T, sLabel?: string): string;
        /**
         * Retrieves or sets the description of the specified button or the current button if no
         * button value is specified.
         * @param pValue Specifies the button value.
         * @param sDescription Specifies the new description.
         * @return Returns the label.
         */
        buttonDescription(pValue?: T, sDescription?: string): string;
        /**
         * Sets or retrieves the disabled state of the specified button (or
         * the current button if no button value is specified).
         * @param pValue Specifies the value of the button to get or set.
         * @param bDisabled Specifies the disabled state.
         * @return Returns the disabled state.
         */
        buttonDisabled(pValue?: T, bDisabled?: boolean): boolean;
        /**
         * Sets or retrieves the visibility of the specified button (or the
         * current button if no button value is specified).
         * @param pValue Specifies the value of the button to get or set.
         * @param bVisible Specifies the visibility.
         * @return Returns the visibility.
         */
        buttonVisible(pValue?: T, bVisible?: boolean): boolean;
    }

    export { IButton as IRadiobutton };
}

declare module "tripetto/module/ui-form-spacer" {
    import { Element } from "tripetto/module/dom";
    import { IControlStyle, StaticControl } from "tripetto/module/ui-form";

    export interface ISpacerStyle extends IControlStyle {
        /** Specifies the height of the large spacer. */
        large: number;
        /** Specifies the height of the small spacer. */
        small: number;
    }
    export class Spacer extends StaticControl<ISpacerStyle> {
        /** Contains the default style. */
        static style: ISpacerStyle | undefined;

        /**
         * Creates a new spacer instance.
         * @param pStyle Specifies the optional style.
         */
        constructor(sType?: "large" | "small", pStyle?: ISpacerStyle);
        /**
         * Draws the control.
         * @param pForm Reference to the parent form element.
         * @event
         */
        protected onDraw(pForm: Element): Element;
    }
}

declare module "tripetto/module/ui-form-static" {
    import { Element, IStyles } from "tripetto/module/dom";
    import { IControlStyle, StaticControl } from "tripetto/module/ui-form";

    export interface IStaticStyle extends IControlStyle {
        /** Static appearance. */
        appearance?: IStyles;
        /** Static appearance when fused with form card. */
        fused?: IStyles;
        /** Static disabled. */
        disabled?: IStyles;
    }
    export class Static extends StaticControl<IStaticStyle> {
        /** Contains the default style. */
        static style: IStaticStyle | undefined;
        /**
         * Creates a new static instance.
         * @param sLabel Specifies the label.
         * @param pStyle Specifies the optional style.
         */
        constructor(sLabel?: string, pStyle?: IStaticStyle);
        /** Retrieves the static element. */
        protected get static(): Element | undefined;
        /**
         * Draws the control.
         * @param pForm Reference to the parent form element.
         * @event
         */
        protected onDraw(pForm: Element): Element;
    }
}

declare module "tripetto/module/ui-form-text" {
    import { Element, IStyles } from "tripetto/module/dom";
    import { DataControl, IControlStyle, TBinding, TControlValidation } from "tripetto/module/ui-form";

    export interface ITextStyle extends IControlStyle {
        /** Text input appearance. */
        appearance?: IStyles;
        /** Text input label. */
        label?: IStyles;
        /** Text input disabled. */
        disabled?: IStyles;
        /** Placeholder style. */
        placeholder?: IStyles;
        /** Contains the text selection styles. */
        selection?: IStyles;
        /** Text input required. */
        required?: IStyles;
        /** Text input locked. */
        locked?: IStyles;
        /** Text input focus. */
        focus?: IStyles;
        /** Text input hover. */
        hover?: IStyles;
        /** Validation passed. */
        passed?: IStyles;
        /** Validation failed. */
        failed?: IStyles;
        /** Validation awaiting. */
        awaiting?: IStyles;
        /** Text input when fused with form card. */
        fused?: {
            /** Text input appearance. */
            appearance?: IStyles;
            /** Text input label. */
            label?: IStyles;
            /** Text input required. */
            required?: IStyles;
            /** Text input locked. */
            locked?: IStyles;
            /** Text input focus. */
            focus?: IStyles;
            /** Text input hover. */
            hover?: IStyles;
            /** Validation passed. */
            passed?: IStyles;
            /** Validation failed. */
            failed?: IStyles;
            /** Validation awaiting. */
            awaiting?: IStyles;
        };
    }
    type Transformations = "none" | "capitalize" | "capitalize-words" | "capitalize-sentences" | "uppercase" | "lowercase";
    type Types = "singleline" | "multiline" | "multiline-wo-crlf" | "password" | "email";
    type InputModes = "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
    export interface ITextSuggestion {
        readonly id?: string;
        readonly name: string;
    }
    export type TTextSuggestions = (ITextSuggestion | string)[];
    export class Text extends DataControl<string, ITextStyle> {
        /** Contains the default style. */
        static style: ITextStyle | undefined;

        /**
         * Creates a new text instance.
         * @param sType Specifies the input type.
         * @param sValue Specifies the initial value.
         * @param nLines Specifies the minimum number of lines for multi-line input.
         * @param pStyle Specifies the optional style.
         */
        constructor(sType?: Types, sValue?: TBinding<string>, nLines?: number, pStyle?: ITextStyle);

        /** Retrieves the static element. */
        protected get static(): Element | undefined;
        /** Retrieves the input type. */
        get type(): Types;
        /** Retrieves if the input value. */
        get value(): string;
        /** Sets the input value. */
        set value(sValue: string);
        /** Retrieves the current selected suggestion. */
        get suggestion(): ITextSuggestion | undefined;

        /**
         * Sets the input value and applies data sanitization.
         * @param sValue Specifies the new value.
         * @return Returns the data value.
         */
        protected input(sValue: string): string;
        /**
         * Draws the control.
         * @param pForm Reference to the parent form element.
         * @event
         */
        protected onDraw(pForm: Element): Element;
        /**
         * Updates the control.
         * @event
         */
        protected onUpdate(): void;
        /**
         * Invoked when the input field captures focus.
         * @event
         */
        protected onFocus(bAutoFocus: boolean): void;
        /**
         * Invoked when the focus state of the control is changed.
         * @event
         */
        protected onFocusOptions(): void;
        /**
         * Invoked when the input field loses focus.
         * @event
         */
        protected onBlur(): void;
        /**
         * Invoked when the enter (return) key is pressed.
         * @param pElement Reference to the element.
         * @return Return `true` if you want to cancel key bubbling.
         * @event
         */
        protected onEnter(pElement: Element): boolean;
        /**
         * Invoked when the escape key is pressed.
         * @param pElement Reference to the element.
         * @return Return `true` if you want to cancel key bubbling.
         * @event
         */
        protected onEscape(pElement: Element): boolean;
        /**
         * Invoked when the input value changes.
         * @event
         */
        protected onData(): void;
        /**
         * Invoked when the text control is first measured.
         * @return Returns the measure correction for the text control.
         * @event
         */
        onMeasure(): number;
        /**
         * Invoked when the control mode is changed.
         * @event
         */
        onMode(): void;
        /**
         * Sets the focus to the control.
         * @return Returns `true` if the focus is set.
         */
        focus(): boolean;
        /** Blurs the focus of the control. */
        blur(): void;
        /**
         * Sets a fixed width for the control.
         * @param nWidth Specifies the control width in pixels.
         * @return Returns a reference to the control to allow chaining.
         */
        width(nWidth: number): this;
        /**
         * Sets a fixed number of lines for the control (auto-sizing will be disabled).
         * @param nLines Specifies the number of lines.
         * @return Returns a reference to the control to allow chaining.
         */
        fixedLines(nLines: number): this;
        /**
         * Sets the alignment of the control.
         * @param sAlign Specifies the alignment.
         * @return Returns a reference to the control to allow chaining.
         */
        align(sAlign: "left" | "center" | "right"): this;
        /**
         * Specifies if string sanitizing should be applied.
         * @param bSanitize Specifies if string sanitizing should be applied.
         * @return Returns a reference to the control to allow chaining.
         */
        sanitize(bSanitize?: boolean): this;
        /**
         * Specifies if string trim should be applied.
         * @param bTrim Specifies if string trimming should be applied.
         * @return Returns a reference to the control to allow chaining.
         */
        trim(bTrim?: boolean): this;
        /**
         * Specifies the maximum text length.
         * @param nMaxLength Specifies the maximum text length (supply `0` to disable the maximum length).
         * @return Returns a reference to the control to allow chaining.
         */
        maxLength(nMaxLength: number): this;
        /**
         * Sets a name for the text control.
         * @param sName Specifies the name.
         * @return Returns a reference to the control to allow chaining.
         */
        name(sName: string): this;
        /**
         * Sets a placeholder for the text control.
         * @param sPlaceholder Specifies the placeholder text.
         * @return Returns a reference to the control to allow chaining.
         */
        placeholder(sPlaceholder: string): this;
        /**
         * Sets the input mode for the text control.
         * @param sMode Specifies the mode.
         * @return Returns a reference to the control to allow chaining.
         */
        inputMode(sMode: InputModes): this;
        /**
         * Specifies the text transformation.
         * @param sTransformation Specifies the transformation type.
         * @return Returns a reference to the control to allow chaining.
         */
        transformation(sTransformation: Transformations): this;
        /**
         * Specifies if the text needs to be selected automatically.
         * @param sSelect Specifies if the text needs to be selected.
         * @return Returns a reference to the control to allow chaining.
         */
        autoSelect(sSelect?: "no" | "focus" | "auto-focus"): this;
        /**
         * Enables automatic control validation.
         * @param fnValidation Specifies the validator.
         */
        autoValidate(fnValidation?: TControlValidation<Text>): this;
        /**
         * Specifies text suggestions for the text control.
         * @param pSuggestions Specifies the list of suggestions.
         */
        suggestions(pSuggestions?: TTextSuggestions): this;
        /**
         * Specifies the function which is invoked when the user presses the enter key.
         * @param fnEnter Specifies the function to invoke. To cancel the normal
         * behavior return `true` within the function.
         * @return Returns a reference to the control to allow chaining.
         */
        enter<T extends Text>(fnEnter: (pText: T) => boolean): this;
        /**
         * Specifies the function which is invoked when the user presses the escape key.
         * @param fnEscape Specifies the function to invoke. To cancel the normal
         * behavior return `true` within the function.
         * @return Returns a reference to the control to allow chaining.
         */
        escape<T extends Text>(fnEscape: (pText: T) => boolean): this;
        /**
         * Specifies the function which is invoked when the input value changes.
         * @param fnChange Specifies the change function.
         * @return Returns a reference to the control to allow chaining.
         */
        on<T extends Text>(fnChange: (pText: T) => void): this;
        /**
         * Selects the text.
         * @return Returns a reference to the control to allow chaining.
         */
        select(): this;
        /**
         * Attaches an key action to the control.
         * @param sKey Specifies the key to bind the action to.
         * @param fnAction Specifies the action function to execute.
         * @return Returns a reference to the control to allow chaining.
         */
        action(
            sKey: string,
            fnAction: (
                fnDone: (sText?: string) => void,
                pText: Element
            ) => ((sKey: string) => "capture" | "cancel" | "continue") | undefined | void
        ): this;
        /** Copies the contents of the input control to the clipboard. */
        copyToClipboard(): void;
        /** Destroys the control. */
        destroy(): void;
    }

    export { InputModes as TextInputModes, Transformations as TextTransformations, Types as TextTypes };
}

declare module "tripetto/module/ui-grid2layer" {
    import { Element, Stylesheet } from "tripetto/module/dom";
    import { GridLayout, GridRenderer, IGridLayout, TGrid, TGridResource } from "tripetto/module/grid";
    import { Coordinate, IPoint } from "tripetto/module/metrics";
    import { Layer } from "tripetto/module/ui-layers";

    export abstract class Renderer<Grid extends TGrid, Types extends TGridResource, Style> extends GridRenderer<Grid, Types> {
        /**
         * Constructs a new rendering.
         * @param pMappings Specifies an array of layout mappings. Each mapping specifies a layout for a certain type.
         * @param pLayer Reference to the layer.
         */
        constructor(pLayouts: IGridLayout<Grid, Types>[], pLayer: Layer, pStyle: Style | undefined);
        /** Retrieves a reference to the layer. */
        get layer(): Layer;
        /** Retrieves the stylesheet for the renderer. */
        get stylesheet(): Stylesheet;
        /** Retrieves the rendere styles. */
        get style(): Style;
        /** Retrieves if the rendering is zooming. */
        get isZooming(): boolean;
        /** Retrieves if the rendering is moving an item. */
        get isMoving(): boolean;

        /** Renders the rendering. */
        protected abstract render(): void;
        /**
         * Retrieves the layout for the specified type.
         * @param pType Reference to the type.
         * @return Returns the layout instance.
         */
        layout<Type extends Types>(pType: Type): Layout<Grid, Type, Style>;
        /**
         * Fired when the dimensions of the rendering are changed.
         * @param nWidth Specifies the width.
         * @param nHeight Specifies the height.
         * @param nZoom Contains the zoom factor.
         * @param sReason Specifies the reason for the resize.
         * @event
         */
        onResize(nWidth: number, nHeight: number, nZoom: number, sReason: "redraw" | "width" | "height" | "zoom"): void;
        /**
         * Fired when the zoom animation starts.
         * @param nZoom Specifies the zoom factor.
         * @event
         */
        onZoomStart(nZoom: number): void;
        /**
         * Fired when the zoom factor is changed.
         * @param nZoom Specifies the zoom factor.
         * @event
         */
        onZoom(nZoom: number): void;
        /**
         * Fired when the zoom animation ends.
         * @param nZoom Specifies the zoom factor.
         * @event
         */
        onZoomEnd(nZoom: number): void;
        /**
         * Fired when a move starts.
         * @event
         */
        onMoveStart(): void;
        /**
         * Fired when the moving ends.
         * @event
         */
        onMoveEnd(): void;
    }
    export abstract class Layout<Grid extends TGrid, Parent extends TGridResource, Style> extends GridLayout<Grid, Parent> {
        /**
         * Constructs a new layout.
         * @param pRenderer Reference to the renderer.
         * @param pParent Reference to the layout parent.
         * @param pLayer Reference to the layer.
         * @param bMovable Specifies if the layout is movable.
         */
        constructor(pRenderer: Renderer<Grid, TGridResource, Style>, pParent: Parent, pLayer: Layer, bMovable: boolean);
        /** Retrieves a reference to the parent. */
        protected get layer(): Layer;
        /** Retrieves the stylesheet for the renderer. */
        get stylesheet(): Stylesheet;
        /** Retrieves the renderer styles. */
        get style(): Style;
        /** Retrieves a reference to the element. */
        get element(): Element | undefined;
        /** Specifies the area in which a move can be initiated. */
        get moveArea(): Coordinate;
        /** Retrieves a reference to the guides element. */
        get guides(): Element | undefined;
        /** Retrieves if the layout is moved. */
        get isMoving(): boolean;
        /** Retrieves if the layout is following a movement. */
        get isFollowing(): boolean;
        /** Retrieves if the layout is ensuing. */
        get isEnsuing(): boolean;
        /** Retrieves if hover events are allowed. */
        get isHoverAllowed(): boolean;

        /**
         * Enables the rulers for the layout.
         * @param sColor Specifies a color for the rulers.
         * @param bVisible Specifies if the rulers are initial visible.
         */
        protected enableRulers(sColor?: string, bVisible?: boolean): void;
        /**
         * Draws the element body for the layout. This function is invoked when the
         * layout is rendered to the element.
         * @param nLeft Specifies the horizontal position.
         * @param nTop Specifies the vertical position.
         * @param nWidth Specifies the width.
         * @param nHeight Specifies the height.
         * @param nZoom Contains the zoom factor.
         * @param nZ Specifies the z-index.
         * @param bRedraw Specifies if the element is redrawn.
         */
        protected abstract draw(
            nLeft: number,
            nTop: number,
            nWidth: number,
            nHeight: number,
            nZoom: number,
            nZ: number,
            bRedraw: boolean
        ): void;
        /**
         * Renders the layout to an element.
         * @param sType Specifies the render type. Can be one of the following values:
         * - `render`: Do a complete render (the layout element is always (re)created);
         * - `refresh`: Refresh the rendering (the contents of the layout element is (re)created);
         * - `update`: Update the rendering (quick update of the the layout contents).
         */
        render(sType: "render" | "refresh" | "update"): void;
        /**
         * Sets the position of the layout element.
         * @param nLeft Specifies the horizontal position.
         * @param nTop Specifies the vertical position.
         * @param nZoom Contains the zoom factor.
         * @param sReason Specifies the reason for the position change.
         */
        position(nLeft: number, nTop: number, nZoom: number, sReason: "redraw" | "zoom"): void;
        /**
         * Sets the dimensions of the layout element.
         * @param nWidth Specifies the width.
         * @param nHeight Specifies the height.
         * @param nZoom Contains the zoom factor.
         * @param sReason Specifies the reason for the resize.
         */
        resize(nWidth: number, nHeight: number, nZoom: number, sReason: "redraw" | "width" | "height" | "zoom"): void;
        /**
         * Fired when the z-index is changed.
         * @param nZ Specifies the z-index.
         */
        zIndex(nZ: number): void;
        /**
         * Sets the moving state of a layout.
         * @param bMoving Specifies if the layout is moving.
         * @return Returns `true` if the state is changed.
         */
        moving(bMoving: boolean): boolean;
        /**
         * Sets the following state of a layout.
         * @param bFollowing Specifies if the layout is following.
         * @return Returns `true` if the state is changed.
         */
        following(bFollowing: boolean): boolean;
        /**
         * Sets the ensuing state of a layout.
         * @param bEnsuing Specifies if the layout is ensuing.
         * @return Returns `true` if the state is changed.
         */
        ensuing(bEnsuing: boolean): boolean;
        /**
         * Fired when the element should be elevated.
         * @param bElevate Specifies if the element is elevated.
         */
        onElevate(bElevate: boolean): void;
        /**
         * Fired when the system wants to know if the supplied mouse coordinates
         * are within the layout.
         * @param nX Specifies the horizontal mouse coordinate.
         * @param nY Specifies the vertical mouse coordinate.
         * @param pTarget Specifies the target resource.
         * @return Returns `true` if the mouse is within the layout.
         * @event
         */
        onIsMoveIn(nX: number, nY: number, pTarget: TGridResource): boolean;
        /**
         * Specifies the function which is invoked when the move starts.
         * @param pOffset Contains the touch/click offset relative to the layout.
         * @return Return `true` if the move should be continued.
         * @event
         */
        onMoveStart(pOffset: IPoint): boolean;
        /**
         * Specifies the function which is invoked when the move ends.
         * @param bDragging Specifies if the `MoveStart` event is fired and the
         * layout was in dragging mode.
         * @event
         */
        onMoveEnd(bDragging: boolean): void;
        /**
         * Invoked when the guides should be created.
         * @param pGuides Contains the guides element.
         * @param bFront Specifies if the guide should be displayed in the front.
         * @event
         */
        onGuides(pGuides?: Element | undefined, bFront?: boolean): void;
        /**
         * Invoked when the guides of a rendering are changed.
         * @param bVisible Indicates if the guides should be visible.
         * @param nLeft Specifies the left coordinate of the guides.
         * @param nTop Specifies the top coordinate of the guides.
         * @param nWidth Specifies the width of the guides.
         * @param nHeight Specifies the height of the guides.
         * @param nZoom Specifies the zoom factor of the guides.
         * @event
         */
        onGuidesChange(bVisible: boolean, nLeft: number, nTop: number, nWidth: number, nHeight: number, nZoom: number): void;
        /** Destroys the guides. */
        guidesDestroy(): void;
        /** Destroys the layout. */
        destroy(): void;
    }
}

declare module "tripetto/module/ui-layers" {
    import { Await } from "tripetto/module/callback";
    import { Asset, Element, IStyles, Stylesheet } from "tripetto/module/dom";
    import { IHookPayload, THooks } from "tripetto/module/hookup";
    import { IItemChangeEvent, IItemPopEvent, IItemPushEvent, StrictItem, StrictMatrix } from "tripetto/module/matrix";
    import { Dimensions, Rectangle } from "tripetto/module/metrics";
    import { IScrollProperties, Scroll } from "tripetto/module/touch-scroll";
    import { IScrollbarsProperties, IScrollbarsStyle, Scrollbars } from "tripetto/module/ui-scrollbars";

    enum Alignment {
        /** Fills the available space. */
        Fill = 0,
        /** Left alignment. */
        Left = 1,
        /** Top alignment. */
        Top = 2,
        /** Center alignment. */
        Center = 3,
        /** Right alignment. */
        Right = 4,
        /** Bottom alignment. */
        Bottom = 5,
    }
    /** Describes the layer and overlay animation style. */
    export interface ILayerAnimation {
        /** Specifies the layer animation. */
        layer?: {
            /** Animation when layer is ready. */
            ready: IStyles;
            /** Animation when layer is shown. */
            show: IStyles;
            /** Animation when layer is hidden. */
            hide: IStyles;
            /** Animation when layer is closed. */
            close: IStyles;
        };
        /** Specifies the overlay animation. */
        overlay?: {
            /** Animation when overlay is ready. */
            ready: IStyles;
            /** Animation when overlay is shown. */
            show: IStyles;
            /** Animation when overlay is hidden. */
            hide: IStyles;
            /** Animation when overlay is closed. */
            close: IStyles;
        };
    }
    /** Describes the layer style. */
    export interface ILayerStyle {
        /** Specifies the layer styles. */
        layer?: {
            /** Layer appearance. */
            appearance?: IStyles;
            /** Layer is loading. */
            loading?: IStyles;
            /** Layer is ready. */
            ready?: IStyles;
            /** Layer is active. */
            active?: IStyles;
            /** Layer is inactive. */
            inactive?: IStyles;
            /** Layer is hovered. */
            hover?: IStyles;
            /** Layer is hidden. */
            hide?: IStyles;
            /** Layer is shown. */
            show?: IStyles;
            /** Layer is showing. */
            showing?: IStyles;
            /** Layer is closed. */
            close?: IStyles;
            /** Styles per layer type. */
            type?: {
                /** Layer chain. */
                chain?: IStyles;
                /** Layer panel. */
                panel?: IStyles;
                /** Floating layer. */
                floating?: IStyles;
                /** Modal layer. */
                modal?: IStyles;
                /** Popup layer. */
                popup?: IStyles;
            };
            /** Layer alignment styles. */
            alignment?: {
                horizontal?: {
                    fill?: IStyles;
                    left?: IStyles;
                    center?: IStyles;
                    right?: IStyles;
                };
                vertical?: {
                    fill?: IStyles;
                    top?: IStyles;
                    center?: IStyles;
                    bottom?: IStyles;
                };
            };
            /** Layer layout styles. */
            layout?: {
                HABC?: IStyles;
                HCBA?: IStyles;
                HBCA?: IStyles;
                VABC?: IStyles;
                VCBA?: IStyles;
                VBCA?: IStyles;
            };
        };
        /** Specifies the overlay styles. */
        overlay?: {
            /** Overlay appearance. */
            appearance?: IStyles;
            /** Overlay is loading. */
            loading?: IStyles;
            /** Overlay is ready. */
            ready?: IStyles;
            /** Overlay is hidden. */
            hide?: IStyles;
            /** Overlay is shown. */
            show?: IStyles;
            /** Overlay is showing. */
            showing?: IStyles;
            /** Overlay is closed. */
            close?: IStyles;
        };
        /** Specifies the scrollbar styles. */
        scrollbars?: IScrollbarsStyle;
        /** Specifies if the layer style should be applied to child layers. */
        applyToChildren?: boolean;
    }
    /** Describes the layer rectangle. */
    export interface IRectangle {
        left: number | undefined;
        top: number | undefined;
        right: number;
        bottom: number;
        width: number | undefined;
        height: number | undefined;
        visible: boolean;
    }
    enum Layouts {
        /** No panel layout. */
        None = 0,
        /**
         * Panels are displayed horizontally aligned and subsequent panels are
         * displayed right from the previous panel.
         */
        HABC = 1,
        /**
         * Panels are displayed horizontally aligned and subsequent panels are
         * displayed left from the previous panel.
         */
        HCBA = 2,
        /**
         * Panels are displayed horizontally aligned and the second panel is
         * displayed on the left side of the chain. Subsequent panels are displayed
         * right from the second panel. The first panel is aligned at the right of
         * the other layers.
         */
        HBCA = 3,
        /**
         * Panels are displayed vertically aligned and subsequent panels are
         * displayed below the previous panel.
         */
        VABC = 4,
        /**
         * Panels are displayed vertically aligned and subsequent panels are
         * displayed above the previous panel.
         */
        VCBA = 5,
        /**
         * Panels are displayed vertically aligned and the second panel is displayed
         * on the top side of the chain. Subsequent panels are displayed below the
         * second panel. The first panel is aligned at the top of the other layers.
         */
        VBCA = 6,
    }
    type TLayouts = Layouts | "none" | "habc" | "hcba" | "hbca" | "vabc" | "vcba" | "vbca";
    export type TThreshold = (pConfiguration: LayerConfiguration, sEvent: "below" | "equal" | "above") => void;
    export class LayerConfiguration {
        /** Retrieves the layer style. */
        get layerStyle(): ILayerStyle | undefined;
        /** Retrieves the horizontal alignment. */
        get horizontalAlignment(): Alignment;
        /** Retrieves the vertical alignment. */
        get verticalAlignment(): Alignment;
        /** Retrieves if the horizontal panel layout is active. */
        get isHorizontalLayout(): boolean;
        /** Retrieves if the vertical panel layout is active. */
        get isVerticalLayout(): boolean;
        /** Retrieves the panel layout. */
        get panelLayout(): Layouts;
        /** Retrieves if the layer should be global. */
        get isGlobal(): boolean;
        /** Retrieves if the layer should be visible. */
        get isVisible(): boolean;
        /** Retrieves the animation styles. */
        get animationStyles(): ILayerAnimation | undefined;
        /** Retrieves if focus should be enabled. */
        get isFocusEnabled(): boolean;
        /** Retrieves if auto-activate on touch/mousedown is enabled. */
        get isAutoActivate(): boolean;
        /** Retrieves if user focus capturing is enabled. */
        get isCapturingEnabled(): boolean;
        /** Retrieves if the layer overlay should be visible or transparent. */
        get isOverlayVisible(): boolean;
        /** Retrieves if scrolling is enabled for the layer. */
        get isScrollingEnabled(): boolean;
        /** Retrieves if scrollbars are enabled for the layer. */
        get isScrollbarsEnabled(): boolean;
        /** Specifies if child panels need to be closed on tap. */
        get closeChildPanelsOnTap(): boolean;
        /** Specifies if child panels need to be closed on tap. */
        get closeChildPanelsOnStroke(): boolean;
        /** Retrieves if the role for the layer should be set to `application`. */
        get isApplicationRole(): boolean;
        /** Specifies if the touch framework is disabled for the layer. */
        get isTouchDisabled(): boolean;

        /**
         * Specifies the layer style.
         * @param pStyle Specifies the style.
         * @return Returns a reference to the class to allow chaining.
         */
        style(pStyle: ILayerStyle): this;
        /**
         * Specifies if the layer should be created globally.
         * @return Returns a reference to the class to allow chaining.
         */
        global(): this;
        /**
         * Specifies if the layer should be created locally.
         * @return Returns a reference to the class to allow chaining.
         */
        local(): this;
        /**
         * Specifies if a global layer is preferred.
         * @return Returns a reference to the class to allow chaining.
         */
        preferGlobal(): this;
        /**
         * Specifies if a local layer is preferred.
         * @return Returns a reference to the class to allow chaining.
         */
        preferLocal(): this;
        /**
         * Specifies if the layer should be visible.
         * @param bVisible Specifies if the layer should be visible.
         * @return Returns a reference to the class to allow chaining.
         */
        visible(bVisible?: boolean): this;
        /**
         * Shows the layer.
         * @return Returns a reference to the class to allow chaining.
         */
        show(): this;
        /**
         * Hides the layer.
         * @return Returns a reference to the class to allow chaining.
         */
        hide(): this;
        /**
         * Sets the horizontal alignment.
         * @param sAlign Specifies the horizontal alignment.
         * @return Returns a reference to the class to allow chaining.
         */
        alignHorizontal(sAlign: "fill" | "center" | "left" | "right"): this;
        /**
         * Sets the horizontal alignment to fill.
         * @return Returns a reference to the class to allow chaining.
         */
        alignFillHorizontal(): this;
        /**
         * Sets the horizontal alignment to center.
         * @return Returns a reference to the class to allow chaining.
         */
        alignCenterHorizontal(): this;
        /**
         * Sets the horizontal alignment to left.
         * @return Returns a reference to the class to allow chaining.
         */
        alignLeft(): this;
        /**
         * Sets the horizontal alignment to right.
         * @return Returns a reference to the class to allow chaining.
         */
        alignRight(): this;
        /**
         * Sets the vertical alignment.
         * @param sAlign Specifies the vertical alignment.
         * @return Returns a reference to the class to allow chaining.
         */
        alignVertical(sAlign: "fill" | "center" | "top" | "bottom"): this;
        /**
         * Sets the vertical alignment to fill.
         * @return Returns a reference to the class to allow chaining.
         */
        alignFillVertical(): this;
        /**
         * Sets the vertical alignment to center.
         * @return Returns a reference to the class to allow chaining.
         */
        alignCenterVertical(): this;
        /**
         * Sets the vertical alignment to top.
         * @return Returns a reference to the class to allow chaining.
         */
        alignTop(): this;
        /**
         * Sets the vertical alignment to bottom.
         * @return Returns a reference to the class to allow chaining.
         */
        alignBottom(): this;
        /**
         * Sets the left spacing for the layer.
         * @param nLeft Specifies the left spacing in pixels.
         * @return Returns a reference to the class to allow chaining.
         */
        left(nLeft: number): this;
        /**
         * Sets the top spacing for the layer.
         * @param nTop Specifies the top spacing in pixels.
         * @return Returns a reference to the class to allow chaining.
         */
        top(nTop: number): this;
        /**
         * Sets the right spacing for the layer.
         * @param nRight Specifies the right spacing in pixels.
         * @return Returns a reference to the class to allow chaining.
         */
        right(nRight: number): this;
        /**
         * Sets the bottom spacing for the layer.
         * @param nBottom Specifies the bottom spacing in pixels.
         * @return Returns a reference to the class to allow chaining.
         */
        bottom(nBottom: number): this;
        /**
         * Sets the width of the layer.
         * @param nWidth Specifies the width in pixels.
         * @return Returns a reference to the class to allow chaining.
         */
        width(nWidth: number): this;
        /**
         * Sets the minimum width of the layer.
         * @param nWidth Specifies the minimum width.
         * @return Returns a reference to the class to allow chaining.
         */
        minWidth(nWidth: number | undefined): this;
        /**
         * Sets the maximum width of the layer.
         * @param nWidth Specifies the maximum width.
         * @return Returns a reference to the class to allow chaining.
         */
        maxWidth(nWidth: number | undefined): this;
        /**
         * Sets the height of the layer.
         * @param nHeight Specifies the height in pixels.
         * @return Returns a reference to the class to allow chaining.
         */
        height(nHeight: number): this;
        /**
         * Sets the minimum height of the layer.
         * @param nHeight Specifies the minimum height.
         * @return Returns a reference to the class to allow chaining.
         */
        minHeight(nHeight: number | undefined): this;
        /**
         * Sets the maximum height of the layer.
         * @param nHeight Specifies the maximum height.
         * @return Returns a reference to the class to allow chaining.
         */
        maxHeight(nHeight: number | undefined): this;
        /**
         * Sets a width threshold configuration action.
         * @param nThreshold Specifies the width threshold.
         * @param fnThreshold Specifies the threshold function.
         * @return Returns a reference to the class to allow chaining.
         */
        widthThreshold(nThreshold: number, fnThreshold: TThreshold): this;
        /**
         * Sets a height threshold configuration action.
         * @param nThreshold Specifies the height threshold.
         * @param fnThreshold Specifies the threshold function.
         * @return Returns a reference to the class to allow chaining.
         */
        heightThreshold(nThreshold: number, fnThreshold: TThreshold): this;
        /**
         * Sets the animation of the layer.
         * @param pAnimation Specifies the animation.
         * @return Returns a reference to the class to allow chaining.
         */
        animation(pAnimation: ILayerAnimation | undefined): this;
        /**
         * Sets the panel layout.
         * @param nLayout Specifies the layout.
         * @return Returns a reference to the class to allow chaining.
         */
        layout(nLayout: TLayouts): this;
        /**
         * Sets the focus support.
         * @param bFocus Specifies if focus should be supported.
         * @return Returns a reference to the class to allow chaining.
         */
        focus(bFocus?: boolean): this;
        /**
         * Specifies if focus support is preferred.
         * @return Returns a reference to the class to allow chaining.
         */
        preferFocus(): this;
        /**
         * Enables or disables the auto-activate on touch/mousedown feature.
         * @param bAutoActivate Specifies if auto-activate is enabled.
         * @return Returns a reference to the class to allow chaining.
         */
        autoActivate(bAutoActivate?: boolean): this;
        /**
         * Sets the capture mode.
         * @param bCapture Specifies if the user focus should be captured.
         * @return Returns a reference to the class to allow chaining.
         */
        capture(bCapture?: boolean): this;
        /**
         * Sets the overlay visibility.
         * @param bOverlay Specifies if the overlay should be visible.
         * @return Returns a reference to the class to allow chaining.
         */
        overlay(bOverlay?: boolean): this;
        /**
         * Specifies if a overlay is preferred.
         * @return Returns a reference to the class to allow chaining.
         */
        preferOverlay(): this;
        /**
         * Enables scrolling for the layer and specifies the scroll properties.
         * @param pProperties Specifies the scroll properties.
         * @return Returns a reference to the class to allow chaining.
         */
        scrolling(pProperties?: IScrollProperties): this;
        /**
         * Retrieves the scroll properties and attaches the supplied asset.
         * @param pAsset Reference to the asset.
         * @return Returns the scrollbar properties.
         */
        scrollingProperties(pAsset: Asset): IScrollProperties;
        /**
         * Enables scrollbars for the layer and specifies the scroll directions
         * and scrollbar settings.
         * @param pProperties Specifies the scrollbar properties.
         * @return Returns a reference to the class to allow chaining.
         */
        scrollbars(pProperties?: IScrollbarsProperties): this;
        /**
         * Retrieves the scrollbar properties and attaches the supplied asset.
         * @param pAsset Reference to the asset.
         * @return Returns the scrollbar properties.
         */
        scrollbarsProperties(pAsset: Asset): IScrollbarsProperties;
        /**
         * Specifies if the layer should close child panels when tapped or stroked.
         * @param sCloseChildPanels Specifies if the layer should close child panels on tap or stroke.
         * @return Returns a reference to the class to allow chaining.
         */
        autoCloseChildPanels(sCloseChildPanels: "no" | "tap" | "stroke"): this;
        /**
         * Specifies if the role of the layer should be set to `application` to improve WAI-ARIA support.
         * @param bApplicationRole Specifies the state of the feature.
         * @return Returns a reference to the class to allow chaining.
         */
        applicationRole(bApplicationRole?: boolean): this;
        /**
         * Specifies if the touch framework is disabled for the layer.
         * @param bDisableTouch Specifies the state of the feature.
         * @return Returns a reference to the class to allow chaining.
         */
        disableTouch(bDisable?: boolean): this;
        /**
         * Calculates the layout for the specified width and height.
         * @param nWidth Specifies the available width.
         * @param nHeight Specifies the available height.
         * @param nLayout Specifies the panel layout.
         * @return Returns the rectangle.
         */
        rectangle(nWidth: number, nHeight: number, nLayout?: Layouts): IRectangle;
        /**
         * Attaches a layer to the configuration.
         */
        attach(pLayer: Layer): this;
        /**
         * Detaches a layer from the configuration.
         * @param pLayer Reference to the layer.
         */
        detach(pLayer: Layer): void;
    }
    export interface IComponent {
        render(pLayer: Layer, pAwait: Await): Await | void;
    }
    export abstract class LayerComponent implements IComponent {
        /** Retrieves a component configuration template. */
        protected static get configuration(): LayerConfiguration;
        /**
         * Constructs a new component.
         * @param pConfiguration Specifies the layer configuration for the component.
         */
        constructor(pConfiguration?: LayerConfiguration);
        /** Retrieves a reference to the component layer. */
        get layer(): Layer;
        /** Retrieves a reference to the component configuration. */
        get configuration(): LayerConfiguration;
        /**
         * Invoked when the component is rendered.
         * @param pLayer Reference to the layer.
         * @param pAwait Reference to the await.
         */
        protected abstract onRender(pLayer: Layer, pAwait: Await): Await | void;
        /**
         * Indicates the component should wait for the specified condition. Multiple
         * conditions (waits) can be set.
         * @param fnCondition Specifies a condition which should be evaluated.
         * @return Returns `true` if the component will wait.
         */
        protected wait(fnCondition?: () => boolean): boolean;
        /** Indicates the component is done (all wait conditions will be checked). */
        protected done(): void;
        /**
         * Renders the component.
         * @param pLayer Reference to the layer.
         * @param pAwait Reference to the await.
         */
        render(pLayer: Layer, pAwait: Await): Await | void;
    }
    /** Describes the layer event types. */
    export type TLayerEvents =
        | "OnDraw"
        | "OnCalculate"
        | "OnCalculated"
        | "OnReady"
        | "OnResize"
        | "OnActivate"
        | "OnDeactivate"
        | "OnFocus"
        | "OnBlur"
        | "OnHover"
        | "OnBeforeHide"
        | "OnHide"
        | "OnBeforeShow"
        | "OnShow"
        | "OnClose"
        | "OnBeforeShowPanel"
        | "OnShowPanel"
        | "OnClosePanel"
        | "OnDestroy";
    /** Describes the layer event. */
    export interface ILayerEvents<Hook extends THooks> extends IHookPayload<Hook> {
        /** Reference to the layer. */
        readonly layer: Layer;
    }
    export interface ILayerDrawEvent extends ILayerEvents<"OnDraw"> {}
    export interface ILayerCalculateEvent extends ILayerEvents<"OnCalculate"> {}
    export interface ILayerCalculatedEvent extends ILayerEvents<"OnCalculated"> {}
    export interface ILayerReadyEvent extends ILayerEvents<"OnReady"> {}
    export interface ILayerResizeEvent extends ILayerEvents<"OnResize"> {}
    export interface ILayerActivateEvent extends ILayerEvents<"OnActivate"> {}
    export interface ILayerDeactivateEvent extends ILayerEvents<"OnDeactivate"> {}
    export interface ILayerFocusEvent extends ILayerEvents<"OnFocus"> {}
    export interface ILayerBlurEvent extends ILayerEvents<"OnBlur"> {}
    export interface ILayerHoverEvent extends ILayerEvents<"OnHover"> {}
    export interface ILayerBeforeHideEvent extends ILayerEvents<"OnBeforeHide"> {}
    export interface ILayerHideEvent extends ILayerEvents<"OnHide"> {}
    export interface ILayerBeforeShowEvent extends ILayerEvents<"OnBeforeShow"> {}
    export interface ILayerShowEvent extends ILayerEvents<"OnShow"> {}
    export interface ILayerCloseEvent extends ILayerEvents<"OnClose"> {}
    export interface ILayerDestroyEvent extends ILayerEvents<"OnDestroy"> {}
    export interface ILayerBeforeShowPanelEvent extends ILayerEvents<"OnBeforeShowPanel"> {
        /** Reference to the panel. */
        readonly panel: Layer;
    }
    export interface ILayerShowPanelEvent extends ILayerEvents<"OnShowPanel"> {
        /** Reference to the panel. */
        readonly panel: Layer;
    }
    export interface ILayerClosePanelEvent extends ILayerEvents<"OnClosePanel"> {
        /** Reference to the panel. */
        readonly panel: Layer;
    }
    const enum Types {
        /** A simple layer. */
        Layer = 0,
        /** A child layer that gains focus over its parent layer. */
        Child = 1,
        /** A layer chain which can be used to display layer panels. */
        Chain = 2,
        /** A panel layer which can be displayed in a layer chain. */
        Panel = 3,
        /** A modal layer which captures user focus. */
        Modal = 4,
        /** A floating layer which is displayed above all other layers (except modal layers). */
        Floating = 5,
        /** A layer which captures user focus and is closed when it loses focus. */
        Popup = 6,
    }
    /**
     * Type alias for the layer function.
     * @param TLayerAwait.pLayer Reference to the layer.
     * @param TLayerAwait.pAwait Reference to the await.
     */
    export type TLayerAwait = (pLayer: Layer, pAwait: Await) => void | Await;
    /**
     * Type alias for the layer callback function.
     * @param TLayer.pLayer Reference to the layer.
     */
    export type TLayer = (pLayer: Layer) => void;
    /**
     * Type alias for the layer callback function.
     * @param TLayerPanel.pLayer Reference to the layer.
     * @param TLayerPanel.pPanel Reference to the panel.
     */
    export type TLayerPanel = (pLayer: Layer, pPanel: Layer) => void;
    /**
     * Type alias for the layer show event.
     * @param TLayerShow.pLayer Reference to the layer.
     */
    export type TLayerShow = (pLayer: Layer) => void;
    /**
     * Type alias for the layer close event.
     * @param TLayerClose.pLayer Reference to the layer.
     */
    export type TLayerClose = (pLayer: Layer) => void;
    /**
     * Type alias for the layer dimension function.
     * @param TDimension.pLayer Reference to the layer.
     */
    export type TDimension = (pLayer: Layer) => Dimensions;
    /** Describes the layer interface. */
    export interface ILayer {
        /** Contains the layer type. */
        type: Types;
        /** Contains the layer configuration. */
        configuration: LayerConfiguration;
        /** Contains the layer function. */
        layer: TLayerAwait | undefined;
    }
    export class Layer extends StrictItem<Stack, TLayerEvents, ILayer> {
        /**
         * Contains the callback function which is invoked when the
         * layer is resized.
         * @event
         */
        onResize: TLayer | undefined;
        /**
         * Contains the callback function which is invoked when the
         * layer is drawn.
         * @event
         */
        onDraw: TLayer | undefined;
        /**
         * Contains the function which is called when the scroll
         * controller needs to know the dimensions of the layer content.
         * @event
         */
        onDimensions: TDimension | undefined;
        /**
         * Contains the callback function which is invoked when the
         * layer is activated.
         * @event
         */
        onActivate: TLayer | undefined;
        /**
         * Contains the callback function which is invoked when the
         * layer is deactivated.
         * @event
         */
        onDeactivate: TLayer | undefined;
        /**
         * Contains the callback function which is invoked when the
         * layer gains focus.
         * @event
         */
        onFocus: TLayer | undefined;
        /**
         * Contains the callback function which is invoked when the
         * layer is blurred.
         * @event
         */
        onBlur: TLayer | undefined;
        /**
         * Contains the callback function which is invoked when a
         * pointing device enters or leaves the layer.
         * @event
         */
        onHover: TLayer | undefined;
        /**
         * Contains the callback function which is invoked just
         * before the layer is hidden.
         * @event
         */
        onBeforeHide: TLayer | undefined;
        /**
         * Contains the callback function which is invoked when the
         * layer is hidden.
         * @event
         */
        onHide: TLayer | undefined;
        /**
         * Contains the callback function which is invoked when the
         * layer is about to be shown
         * @event
         */
        onBeforeShow: TLayer | undefined;
        /**
         * Contains the callback function which is invoked when the
         * layer is shown.
         * @event
         */
        onShow: TLayer | undefined;
        /**
         * Contains the callback function which is invoked when the
         * layer is closed.
         * @event
         */
        onClose: TLayer | undefined;
        /**
         * Contains the callback function which is invoked when a
         * child panel layer is about to be shown.
         * @event
         */
        onBeforeShowPanel: TLayerPanel | undefined;
        /**
         * Contains the callback function which is invoked when a
         * child panel layer is shown.
         * @event
         */
        onShowPanel: TLayerPanel | undefined;
        /**
         * Contains the callback function which is invoked when a
         * child panel layer is closed.
         * @event
         */
        onClosePanel: TLayerPanel | undefined;
        /**
         * Contains the callback function which is invoked when the
         * layer is destroyed.
         * @event
         */
        onDestroy: TLayer | undefined;
        /** Retrieves the application layer. */
        static get app(): Layers;
        /**
         * Sets a function which is invoked when a layer is shown. Multiple
         * bindings are supported.
         * @event
         */
        static whenShown(fnOpen: TLayerShow): void;
        /**
         * Sets a function which is invoked when a layer is closed. Multiple
         * bindings are supported.
         * @event
         */
        static whenClosed(fnClose: TLayerClose): void;
        /**
         * Constructs a new layer.
         * @param pLayer Contains the layer properties.
         */
        constructor(pStack: Stack, pLayer: ILayer);
        /** Retrieves a reference to the parent stack. */
        get parent(): Stack;
        /** Retrieves a reference to the child layers of this layer. */
        get layers(): Stack;
        /** Retrieves a reference to the stylesheet. */
        get stylesheet(): Stylesheet;
        /** Retrieves a reference to the chain layer. */
        get chain(): Layer | undefined;
        /** Retrieves a configuration template for the layer configuration. */
        static get configuration(): LayerConfiguration;
        /** Retrieves the layer configuration. */
        get configuration(): LayerConfiguration;
        /** Updates the layer configuration. */
        set configuration(pConfiguration: LayerConfiguration);
        /** Retrieves the layer type. */
        get type(): Types;
        /** Retrieves a reference to the await controller. */
        get await(): Await | undefined;

        /** Retrieves if the layer is loading. */
        get isLoading(): boolean;
        /** Retrieves if the layer is ready. */
        get isReady(): boolean;
        /** Retrieves if the layer is drawn. */
        get isDrawn(): boolean;
        /** Retrieves if the layer is calculated. */
        get isCalculated(): boolean;
        /** Retrieves if the layer is visible. */
        get isVisible(): boolean;
        /** Specifies if the layer is visible. */
        set isVisible(bVisible: boolean);
        /** Retrieves if the layer is activated. */
        get isActivated(): boolean;
        /** Retrieves if the layer has focus. */
        get hasFocus(): boolean;
        /** Retrieves if the layer is hovered. */
        get isHovered(): boolean;
        /** Retrieves if the layer is closing. */
        get isClosing(): boolean;
        /** Retrieves if the layer is destroyed. */
        get isDestroyed(): boolean;
        /** Retrieves a reference to the layer element. */
        get element(): Element;
        /** Retrieves a reference to the layer context. */
        get context(): Element;
        /** Retrieves a reference to the layer overlay element. */
        get overlay(): Element | undefined;
        /** Retrieves the layer viewport. */
        get viewport(): Rectangle | undefined;
        /** Retrieves the left position of the layer. */
        get left(): number;
        /** Retrieves the top position of the layer. */
        get top(): number;
        /** Retrieves the right position of the layer. */
        get right(): number;
        /** Retrieves the bottom position of the layer. */
        get bottom(): number;
        /** Retrieves the width of the layer. */
        get width(): number;
        /** Retrieves the height of the layer. */
        get height(): number;
        /** Retrieves a reference to the scroll controller. */
        get scroll(): Scroll | undefined;
        /** Retrieves a reference to the scrollbar controller. */
        get scrollbars(): Scrollbars | undefined;
        /**
         * Retrieves the callback function which is invoked when
         * the layer calculation starts.
         * @event
         */
        get onCalculate(): TLayer;
        /**
         * Sets the callback function which is invoked when the
         * layer calculation starts.
         * @event
         */
        set onCalculate(fnCalculate: TLayer);
        /**
         * Retrieves the callback function which is invoked when
         * the layer dimensions are calculated.
         * @event
         */
        get onCalculated(): TLayer;
        /**
         * Sets the callback function which is invoked when the
         * layer dimensions are calculated.
         * @event
         */
        set onCalculated(fnCalculated: TLayer);
        /**
         * Retrieves the callback function which is invoked when the
         * layer is ready.
         * @event
         */
        get onReady(): TLayer;
        /**
         * Sets the callback function which is invoked when the layer
         * is ready.
         * @event
         */
        set onReady(fnReady: TLayer);

        /**
         * Invoked when a layer is pushed to the layer stack.
         * @param pEvent Contains the event data.
         * @event
         */
        protected onPush(pEvent: IItemPushEvent<Layer>): void;
        /**
         * Invoked when a layer is changed within the layer stack.
         * @param pEvent Contains the event data.
         * @event
         */
        protected onChange(pEvent: IItemChangeEvent<Layer>): void;
        /**
         * Invoked when a layer is popped from the layer stack.
         * @param pEvent Contains the event data.
         * @event
         */
        protected onPop(pEvent: IItemPopEvent<Layer>): void;
        /** Invoked when the layer calculation starts. */
        protected onLayerCalculate(): void;
        /** Invoked when the layer is calulcated. */
        protected onLayerCalculated(): void;
        /** Invoked when the layer is ready. */
        protected onLayerReady(): void;
        /** Invoked when the layer is resized. */
        protected onLayerResize(): void;
        /** Invoked when the layer is drawn. */
        protected onLayerDraw(): void;
        /** Invoked when the layer is activated. */
        protected onLayerActivate(): void;
        /** Invoked when the layer is deactivated. */
        protected onLayerDeactivate(): void;
        /** Invoked when the layer gains focus. */
        protected onLayerFocus(): void;
        /** Invoked when the layer is blurred. */
        protected onLayerBlur(): void;
        /** Invoked when when a pointing device enters or leaves the layer. */
        protected onLayerHover(): void;
        /** Invoked when the layer is about to hide. */
        protected onLayerBeforeHide(): void;
        /** Invoked when the layer is hidden. */
        protected onLayerHide(): void;
        /** Invoked when the layer is about to be shown. */
        protected onLayerBeforeShow(): void;
        /** Invoked when the layer is shown. */
        protected onLayerShow(): void;
        /** Invoked when the layer is closed. */
        protected onLayerClose(): void;
        /**
         * Invoked when a child panel layer is about to be shown.
         * @param pPanel Reference to the panel.
         */
        protected onLayerBeforeShowPanel(pPanel: Layer): void;
        /**
         * Invoked when a child panel layer is shown.
         * @param pPanel Reference to the panel.
         */
        protected onLayerShowPanel(pPanel: Layer): void;
        /**
         * Invoked when a child panel layer is closed.
         * @param pPanel Reference to the panel.
         */
        protected onLayerClosePanel(pPanel: Layer): void;
        /** Invoked when the layer is destroyed. */
        protected onLayerDestroy(): void;
        /** Invoked when the zoom factor of the layer is changed. */
        onLayerZoomEnd(): void;
        /** Validates the layer ready state. */
        validate(): void;
        /** Applies the layer configuration. */
        configure(): void;
        /**
         * Reconfigures a layer using the supplied configuration.
         * @param pConfiguration Specifies the layer configuration.
         */
        reconfigure(pConfiguration: LayerConfiguration): void;
        /** Invoked when the layer calculation starts. */
        calculate(): void;
        /**
         * Invoked when the layer is calculated.
         * @param bResize Indicates if the calculation was the result of a layer
         * resize.
         */
        calculated(bResize: boolean): void;
        /**
         * Indicates the layer should wait for the specified condition. Multiple
         * conditions (waits) can be set.
         * @param fnCondition Specifies a condition which should be evaluated.
         * @return Returns `true` if the layer will wait.
         */
        wait(fnCondition?: () => boolean): boolean;
        /** Indicates to the layer a wait is done. It will check all wait conditions. */
        done(): void;
        /**
         * Creates a layer.
         * @param fnLayer Specifies the make function which is invoked when the
         * layer is constructed.
         * @param pConfiguration Optional layer configuration.
         * @return Returns a reference to the new layer.
         */
        createLayer(fnLayer?: TLayerAwait, pConfiguration?: LayerConfiguration): Layer | undefined;
        /**
         * Creates a child layer.
         * @param fnLayer Specifies the make function which is invoked when the
         * layer is constructed.
         * @param pConfiguration Optional layer configuration.
         * @return Returns a reference to the new layer.
         */
        createChild(fnLayer?: TLayerAwait, pConfiguration?: LayerConfiguration): Layer | undefined;
        /**
         * Creates a layer chain. A layer chain is a stack for panel layers.
         * @param pConfiguration Optional layer configuration.
         * @return Returns a reference to the new layer.
         */
        createChain(pConfiguration?: LayerConfiguration): Layer | undefined;
        /**
         * Creates a new panel layer. There can only be one panel for each level in
         * the chain. When a new panel is created, all existing panels on the same
         * level in the chain are closed.
         * @param fnLayer Specifies the make function which is invoked when the
         * layer is constructed.
         * @param pConfiguration Optional layer configuration.
         * @return Returns a reference to the new layer.
         */
        createPanel(fnLayer?: TLayerAwait, pConfiguration?: LayerConfiguration): Layer | undefined;
        /**
         * Creates a modal layer.
         * @param fnLayer Specifies the make function which is invoked when the
         * layer is constructed.
         * @param pConfiguration Optional layer configuration.
         * @return Returns a reference to the new layer.
         */
        createModal(fnLayer?: TLayerAwait, pConfiguration?: LayerConfiguration): Layer | undefined;
        /**
         * Creates a floating layer.
         * @param fnLayer Specifies the make function which is invoked when the
         * layer is constructed.
         * @param pConfiguration Optional layer configuration.
         * @return Returns a reference to the new layer.
         */
        createFloating(fnLayer?: TLayerAwait, pConfiguration?: LayerConfiguration): Layer | undefined;
        /**
         * Creates a popup layer.
         * @param fnLayer Specifies the make function which is invoked when the
         * layer is constructed.
         * @param pConfiguration Optional layer configuration.
         * @return Returns a reference to the new layer.
         */
        createPopup(fnLayer?: TLayerAwait, pConfiguration?: LayerConfiguration): Layer | undefined;
        /**
         * Creates a component layer.
         * @param pComponent Specifies the component instance or constructor.
         * @param sType Specifies the optional layer type.
         * @param sMode Specifies the optional layer mode (`global` or `local`).
         * @return Returns a reference to the component.
         */
        component<T extends LayerComponent>(
            pComponent:
                | T
                | {
                      new (): T;
                  },
            sType?: "layer" | "child" | "modal" | "floating" | "panel" | "popup",
            sMode?: "global" | "local"
        ): T;
        /**
         * Activates the layer.
         * @return Returns `true` if the layer is activated.
         */
        activate(): boolean;
        /**
         * Deactivates the layer.
         * @return Returns `true` if the layer is deactivated.
         */
        deactivate(): boolean;
        /**
         * Focus the layer.
         * @return Returns `true` if the layer focus is set.
         */
        focus(): boolean;
        /**
         * Blurs the layer.
         * @return Returns `true` if the layer focus is blurred.
         */
        blur(): boolean;
        /**
         * Hides the layer (including all child layers).
         * @param bParentIsHiding Specifies if the layer hides due to a parent
         * layer that is hiding.
         */
        hide(bParentIsHiding?: boolean): void;
        /**
         * Shows the layer (including all child layers).
         * @param bActivate Specifies if the layer should be activated.
         */
        show(bActivate?: boolean): void;
        /**
         * Closes the layer and destroys it (and all of its child layers).
         * @param bParentIsClosing Specifies if the layer closes due to a parent
         * layer that is closing.
         */
        close(bParentIsClosing?: boolean): void;
        /** Closes the child panels of a layer. */
        closeChildPanels(): void;
        /** Destroys the layer (including all child layers). */
        destroy(): void;
    }
    /** Describes the layer properties. */
    export interface ILayerProperties {
        /**
         * Specifies the stylesheet to write the layer styles to. If omitted
         * the default application global stylesheet will be used.
         */
        readonly stylesheet?: Stylesheet;
        /** Specifies the layer style. */
        readonly style?: ILayerStyle;
        /**
         * Specifies an optional parent asset. If omitted the root layer will be
         * inserted into the document body.
         */
        readonly parent?: Asset | Layer;
    }
    /** Describes the stack event types. */
    export type TStackEvents = "OnResize" | "OnClose" | "OnDestroy";
    /** Describes the layers event. */
    export interface ILayersEvents<Hook extends THooks> extends IHookPayload<Hook> {
        /** Reference to the layer stack. */
        readonly layers: Stack;
    }
    export interface ILayersResizeEvent extends ILayersEvents<"OnResize"> {}
    export interface ILayersCloseEvent extends ILayersEvents<"OnClose"> {}
    export interface ILayersDestroyEvent extends ILayersEvents<"OnDestroy"> {}
    /**
     * Type alias for the stack callback function.
     * @param TStack.pStack Reference to the stack.
     */
    export type TStack = (pStack: Stack) => void;
    class Stack extends StrictMatrix<Stack, Layer, TStackEvents, ILayer> {
        /**
         * Contains the callback function which is invoked when the
         * stack is resized.
         * @event
         */
        onResize: TStack | undefined;
        /**
         * Contains the callback function which is invoked when the
         * stack is closed.
         * @event
         */
        onClose: TStack | undefined;
        /**
         * Contains the callback function which is invoked when the
         * stack is destroyed.
         * @event
         */
        onDestroy: TStack | undefined;
        /**
         * Constructs a new stack.
         * @param pProperties Specifies the layer properties.
         */
        constructor(pProperties?: ILayerProperties);
        /** Retrieves the root stack. */
        get root(): Stack;
        /** Retrieves a reference to the stylesheet. */
        get stylesheet(): Stylesheet;
        /** Retrieves a reference to the style. */
        get style(): ILayerStyle;
        /** Retrieves if the stack is initialized. */
        get isInitialized(): boolean;
        /** Retrieves if the layer stack is drawn. */
        get isDrawn(): boolean;
        /** Retrieves if the stack is calculated. */
        get isCalculated(): boolean;
        /** Retrieves if the stack or one of the child layers is calculating. */
        get isCalculating(): boolean;
        /** Indicates if the layer is intializing. */
        get isInitializing(): boolean;
        /** Retrieves if the stack is destroyed. */
        get isDestroyed(): boolean;
        /** Retrieves a reference to the parent layer of the stack. */
        get layer(): Layer | undefined;
        /** Retrieves a reference to the active layer. */
        get active(): Layer | undefined;
        /** Retrieves a reference to the stack element. */
        get element(): Element | undefined;
        /** Retrieves a reference to the stack context. */
        get context(): Element | undefined;
        /** Retrieves a reference to the overlay element. */
        get overlay(): Element | undefined;
        /** Retrieves a reference to the scroll controller. */
        get scroll(): Scroll | undefined;
        /** Retrieves a reference to the scrollbar controller. */
        get scrollbars(): Scrollbars | undefined;
        /** Retrieves the stack viewport. */
        get viewport(): Rectangle | undefined;
        /** Retrieves the left position of the stack. */
        get left(): number;
        /** Retrieves the top position of the stack. */
        get top(): number;
        /** Retrieves the right position of the stack. */
        get right(): number;
        /** Retrieves the bottom position of the stack. */
        get bottom(): number;
        /** Retrieves the width of the stack. */
        get width(): number;
        /** Retrieves the height of the stack. */
        get height(): number;
        /** Retrieves if the stack contains a panel. */
        get hasPanel(): boolean;

        /** Invoked when the layer stack is resized. */
        protected onLayersResize(): void;
        /** Invoked when the layer stack is closed. */
        protected onLayersClose(): void;
        /** Invoked when the layer stack is destroyed. */
        protected onLayersDestroy(): void;
        /** Initializes the layer stack. */
        init(): void;
        /** Validates the layer stack. */
        validate(): void;
        /**
         * Draws a layer element to the stack element.
         * @param fnDraw Specifies the draw function.
         */
        draw(fnDraw: () => void): void;
        /**
         * Applies the layer rectangle.
         * @param pRectangle Specifies the rectangle.
         */
        rectangle(pRectangle: IRectangle): void;
        /** Requests a layer stack update. */
        update(): void;
        /**
         * Creates a layer.
         * @param fnLayer Specifies the make function which is invoked when the
         * layer is constructed.
         * @param pConfiguration Optional layer configuration.
         * @return Returns a reference to the new layer.
         */
        createLayer(fnLayer?: TLayerAwait, pConfiguration?: LayerConfiguration): Layer | undefined;
        /**
         * Creates a child layer.
         * @param fnLayer Specifies the make function which is invoked when the
         * layer is constructed.
         * @param pConfiguration Optional layer configuration.
         * @return Returns a reference to the new layer.
         */
        createChild(fnLayer?: TLayerAwait, pConfiguration?: LayerConfiguration): Layer | undefined;
        /**
         * Creates a layer chain. A layer chain is a stack for panel layers.
         * @param pConfiguration Optional layer configuration.
         * @return Returns a reference to the new layer.
         */
        createChain(pConfiguration?: LayerConfiguration): Layer | undefined;
        /**
         * Creates a new panel layer. There can only be one panel for each level in
         * the chain. When a new panel is created, all existing panels on the same
         * level in the chain are closed.
         * @param fnLayer Specifies the make function which is invoked when the
         * layer is constructed.
         * @param pConfiguration Optional layer configuration.
         * @return Returns a reference to the new layer.
         */
        createPanel(fnLayer?: TLayerAwait, pConfiguration?: LayerConfiguration): Layer | undefined;
        /**
         * Creates a modal layer.
         * @param fnLayer Specifies the make function which is invoked when the
         * layer is constructed.
         * @param pConfiguration Optional layer configuration.
         * @return Returns a reference to the new layer.
         */
        createModal(fnLayer?: TLayerAwait, pConfiguration?: LayerConfiguration): Layer | undefined;
        /**
         * Creates a floating layer.
         * @param fnLayer Specifies the make function which is invoked when the
         * layer is constructed.
         * @param pConfiguration Optional layer configuration.
         * @return Returns a reference to the new layer.
         */
        createFloating(fnLayer?: TLayerAwait, pConfiguration?: LayerConfiguration): Layer | undefined;
        /**
         * Creates a popup layer.
         * @param fnLayer Specifies the make function which is invoked when the
         * layer is constructed.
         * @param pConfiguration Optional layer configuration.
         * @return Returns a reference to the new layer.
         */
        createPopup(fnLayer?: TLayerAwait, pConfiguration?: LayerConfiguration): Layer | undefined;
        /**
         * Creates a component layer.
         * @param pComponent Specifies the component instance or constructor.
         * @param sType Specifies the optional layer type.
         * @param sMode Specifies the optional layer mode (`global` or `local`).
         * @return Returns a reference to the component.
         */
        component<T extends LayerComponent>(
            pComponent:
                | T
                | {
                      new (): T;
                  },
            sType?: "layer" | "child" | "modal" | "floating" | "panel" | "popup",
            sMode?: "global" | "local"
        ): T;
        /** Hides all layers of the stack. */
        hide(): void;
        /** Shows all layers of the stack. */
        show(): void;
        /** Closes all layers of the stack. */
        close(): void;
        /** Destroys the stack and all the layers in the stack. */
        destroy(): void;
    }
    export class Layers extends Stack {
        /** Contains the default stylesheet. */
        static stylesheet: Stylesheet;
        /** Contains the default style. */
        static style: ILayerStyle | undefined;

        /** Retrieves the application layer. */
        static get app(): Layers;
        /**
         * Constructs a new layers instance.
         * @param pProperties Specifies the layer properties.
         */
        constructor(pProperties?: ILayerProperties);
        /** Requests a layer stack update. */
        update(): void;
        /** Destroys the layers instance. */
        destroy(): void;
    }
    export namespace LayerAnimations {
        /** Fade animation. */
        const Fade: ILayerAnimation;
        /** Zoom animation. */
        const Zoom: ILayerAnimation;
        /** Fall animation. */
        const Fall: ILayerAnimation;
    }
    /**
     * Implements the component event decorator (this binds a component event to a method member).
     * @param sEvent Specifies the event.
     * @param sType Specifies the optional hook type (default is `synchronous`).
     * @return Returns the decorator.
     */
    export function component(
        sEvent: TLayerEvents,
        sType?: "synchronous" | "asynchronous" | "framed"
    ): (pTarget: IComponent, sProperty: string, pDescriptor: PropertyDescriptor) => void;

    export { Alignment as LayerAlignment, Layouts as LayerLayouts, TLayouts as TLayerLayouts, Types as LayerTypes };
}

declare module "tripetto/module/ui-list" {
    import { Element, Fragment, IStyles, Stylesheet } from "tripetto/module/dom";
    import { TAny } from "tripetto/module/functional";
    import { Hooks, IHookPayload, THooks } from "tripetto/module/hookup";
    import { MarkdownFeatures, MarkdownParser } from "tripetto/module/markdown";
    import { IItemChangeEvent, IItemPopEvent, Item, Matrix, Reasons, StrictItem, StrictMatrix } from "tripetto/module/matrix";
    import { Dimensions, IPoint, Rectangle } from "tripetto/module/metrics";
    import { Layer, LayerComponent, LayerConfiguration } from "tripetto/module/ui-layers";
    import { IMenuStyle, MenuOption } from "tripetto/module/ui-menu";
    import { IScrollbarsStyle, Scrollbars } from "tripetto/module/ui-scrollbars";

    class Rows<T extends Row> extends Matrix<T, void> {
        /**
         * Creates a new rows instance.
         * @param pParent Reference to the parent list or row.
         */
        constructor(pParent: List<T> | T);
        /** Retrieves a reference to the list. */
        get list(): List<T> | undefined;
        /** Retrieves a reference to the parent row. */
        get row(): T | undefined;
        /** Recursively retrieve all rows in a flat array. */
        get all(): T[];
        /** Retrieves the rows as an array (exclusing child rows). */
        get children(): T[];
        /** Returns the total number of rows. */
        get countRecursive(): number;
        /** Returns the visible number of rows. */
        get countVisible(): number;
        /**
         * Fired when the matrix dimensions are changed.
         * @event
         */
        protected onRowsChange(): void;
        /**
         * Fired when the rows are invalidated.
         * @event
         */
        protected onRowsInvalidate(): void;
        /**
         * Fired when a row is pushed.
         * @param pRow Reference to the row.
         * @event
         */
        protected onRowPush(pRow: T): void;
        /**
         * Fired when a row is changed.
         * @param pRow Reference to the row.
         * @param nReason Specifies the reason for the change.
         * @param bAsynchronous Specifies if the event is invoked asynchronous.
         * @event
         */
        protected onRowChange(pRow: T, nReason: Reasons, bAsynchronous: boolean): void;
        /**
         * Fired when a row is popped.
         * @param pRow Reference to the row.
         * @event
         */
        protected onRowPop(pRow: T): void;
        /**
         * Invalidates rows between the specified coordinates.
         * @param nTop Specifies the top coordinate.
         * @param nBottom Specifies the bottom coordinates.
         * @param nExtend Specifies the number of extension pixels.
         * @return Returns `true` if a row is drawn.
         */
        invalidate(nTop: number, nBottom: number, nExtend: number): boolean;
        /** Invalidates the row count. */
        recount(): void;
        /**
         * Iterates recursively through all rows.
         * @param fnRow Specifies a function which is invoked for each row.
         * @param fnRow.pRow Reference to the row.
         * @param bReverse Reverses the iteration.
         * @return Returns `true` if the iteration was stopped.
         */
        recursiveEach(fnRow: (pRow: T) => boolean | void, bReverse: boolean): boolean;
        /**
         * Performs a recursive sort on the rows collection.
         * @param pColumn Specifies the column to sort on.
         * @param bDescending Specifies if the list should be sorted descending.
         * @return Returns `true` if the sort invoked a change in the row order.
         */
        recursiveSort(pColumn: Column<T>, bDescending: boolean): boolean;
        /**
         * Applies a filter and show only the rows which match the supplied match function.
         * @param fnMatch Specifies a match function which is invoked for each row.
         * This function should return `true` for each row which should be included.
         * @param fnMatch.pRow Reference to the row.
         * @return Returns the number of rows which match the filter.
         */
        recursiveFilter(fnMatch: (pRow: T) => boolean): number;
        /**
         * Retrieves the row at the specified index.
         * @param nIndex Specifies the zero-based index number.
         * @return Returns a reference to the row or `undefined` if the row is
         * not found.
         */
        rowAtIndex(nIndex: number): T | undefined;
        /**
         * Retrieves the row at the specified point.
         * @param pPoint Specifies the point.
         * @return Returns a reference to the row or `undefined` if the row is
         * not found.
         */
        rowFromPoint(pPoint: IPoint): T | undefined;
        /**
         * Adds a row to the end of the rows collection.
         * @param pRow Specifies the row.
         * @return Returns a reference to the row.
         */
        add<R extends T>(pRow: R): R;
        /**
         * Add an array of rows.
         * @param pRows Array with rows.
         * @return Returns the number of rows added to the rows collection.
         */
        addN(...pRows: T[]): number;
        /**
         * Inserts a row at the begin of the rows collection.
         * @param pRow Specifies the row.
         * @return Returns a reference to the row.
         */
        insert<R extends T>(pRow: R): R;
        /**
         * Inserts an array of rows.
         * @param pRows Array with rows.
         * @return Returns the number of rows added to the rows collection.
         */
        insertN(...pRows: T[]): number;
        /** Destroys the rows collection. */
        destroy(): void;
    }
    export type TListEvents =
        | "OnInit"
        | "OnReady"
        | "OnAdd"
        | "OnChange"
        | "OnIndex"
        | "OnDelete"
        | "OnRefresh"
        | "OnExpand"
        | "OnCollapse"
        | "OnTap"
        | "OnDoubleTap"
        | "OnEnter"
        | "OnSelect"
        | "OnDeselect"
        | "OnSelectionChange"
        | "OnSelectionMode"
        | "OnMoveStart"
        | "OnMove"
        | "OnMoveEnd"
        | "OnSort"
        | "OnResize"
        | "OnFocus"
        | "OnBlur"
        | "OnColumnsChange"
        | "OnLazyLoad"
        | "OnEditStart"
        | "OnEditEnd";
    export type TRowEvents =
        | "OnAdd"
        | "OnChange"
        | "OnIndex"
        | "OnDelete"
        | "OnRefresh"
        | "OnEnter"
        | "OnTap"
        | "OnDoubleTap"
        | "OnSelect"
        | "OnDeselect"
        | "OnEnable"
        | "OnDisable"
        | "OnExpand"
        | "OnCollapse"
        | "OnShow"
        | "OnHide"
        | "OnExclude"
        | "OnInclude"
        | "OnMoveStart"
        | "OnMove"
        | "OnMoveEnd"
        | "OnEditStart"
        | "OnEditEnd";
    export interface IListEvents<Hook extends THooks, T extends Row> extends IHookPayload<Hook> {
        readonly list: List<T>;
    }
    export interface IListInitEvent<T extends Row = Row> extends IListEvents<"OnInit", T> {}
    export interface IListReadyEvent<T extends Row = Row> extends IListEvents<"OnReady", T> {}
    export interface IListResizeEvent<T extends Row = Row> extends IListEvents<"OnResize", T> {}
    export interface IListFocusEvent<T extends Row = Row> extends IListEvents<"OnFocus", T> {}
    export interface IListBlurEvent<T extends Row = Row> extends IListEvents<"OnBlur", T> {}
    export interface IListColumnsChangeEvent<T extends Row = Row> extends IListEvents<"OnColumnsChange", T> {}
    export interface IListSelectionChangeEvent<T extends Row = Row> extends IListEvents<"OnSelectionChange", T> {}
    export interface IListSelectionModeEvent<T extends Row = Row> extends IListEvents<"OnSelectionMode", T> {}
    export interface IListLazyLoadEvent<T extends Row = Row> extends IListEvents<"OnLazyLoad", T> {}
    export interface IListSortEvent<T extends Row = Row> extends IHookPayload<"OnSort"> {
        readonly column: Column<T> | undefined;
    }
    export interface IListRowEvents<Hook extends THooks, T extends Row> extends IHookPayload<Hook> {
        readonly row: T;
    }
    export interface IListRowAddEvent<T extends Row = Row> extends IListRowEvents<"OnAdd", T> {}
    export interface IListRowIndexEvent<T extends Row = Row> extends IListRowEvents<"OnIndex", T> {}
    export interface IListRowDeleteEvent<T extends Row = Row> extends IListRowEvents<"OnDelete", T> {}
    export interface IListRowSelectEvent<T extends Row = Row> extends IListRowEvents<"OnSelect", T> {}
    export interface IListRowDeselectEvent<T extends Row = Row> extends IListRowEvents<"OnDeselect", T> {}
    export interface IListRowEnableEvent<T extends Row = Row> extends IListRowEvents<"OnEnable", T> {}
    export interface IListRowDisableEvent<T extends Row = Row> extends IListRowEvents<"OnDisable", T> {}
    export interface IListRowExpandEvent<T extends Row = Row> extends IListRowEvents<"OnExpand", T> {}
    export interface IListRowCollapseEvent<T extends Row = Row> extends IListRowEvents<"OnCollapse", T> {}
    export interface IListRowShowEvent<T extends Row = Row> extends IListRowEvents<"OnShow", T> {}
    export interface IListRowHideEvent<T extends Row = Row> extends IListRowEvents<"OnHide", T> {}
    export interface IListRowExcludeEvent<T extends Row = Row> extends IListRowEvents<"OnExclude", T> {}
    export interface IListRowIncludeEvent<T extends Row = Row> extends IListRowEvents<"OnInclude", T> {}
    export interface IListRowDataEvents<Hook extends THooks, T extends Row> extends IListRowEvents<Hook, T> {
        readonly property: string;
        readonly data: TData;
    }
    export interface IListRowChangeEvent<T extends Row = Row> extends IListRowDataEvents<"OnChange", T> {}
    export interface IListRowEditStartEvent<T extends Row = Row> extends IListRowDataEvents<"OnEditStart", T> {}
    export interface IListRowEditEndEvent<T extends Row = Row> extends IListRowDataEvents<"OnEditEnd", T> {}
    export interface IListRowTapEvent<T extends Row = Row> extends IListRowEvents<"OnTap", T> {
        readonly column: Column<T>;
    }
    export interface IListRowDoubleTapEvent<T extends Row = Row> extends IListRowEvents<"OnDoubleTap", T> {
        readonly column: Column<T>;
    }
    export interface IListRowMoveEvents<Hook extends THooks, T extends Row> extends IListRowEvents<Hook, T> {
        readonly row: T;
        readonly from: number;
        readonly to: number;
    }
    export interface IListRowMoveStartEvent<T extends Row = Row> extends IListRowEvents<"OnMoveStart", T> {}
    export interface IListRowMoveEvent<T extends Row = Row> extends IListRowMoveEvents<"OnMove", T> {}
    export interface IListRowMoveEndEvent<T extends Row = Row> extends IListRowMoveEvents<"OnMoveEnd", T> {}
    abstract class Row extends Item<TRowEvents> {
        /** Retireves if row editing is active. */
        static get isEditing(): boolean;
        /** Cancels an active row editor. */
        static cancelEditor(): void;
        /**
         * Constructs a new row.
         * @param pIdentifier Specifies the optional row identifier.
         */
        constructor(pIdentifier?: TIdentifier);
        /** Retrieves a reference to the list. */
        get list(): List<Row> | undefined;
        /** Retrieves a reference to the child rows (if indention is supported). */
        get rows(): Rows<Row>;
        /** Retrieves a reference to the parent rows. */
        get parent(): Rows<Row> | undefined;
        /** Retrieves the parent row. */
        get row(): Row | undefined;
        /** Sets the parent row. */
        set row(pRow: Row | undefined);
        /** Retrieves all child rows in an array (including child rows). */
        get all(): Row[];
        /** Retrieves the child rows as an array. */
        get children(): Row[];
        /** Retrieves the ancestor row. */
        get ancestor(): Row | undefined;
        /** Retrieves the visible predecessor. */
        get predecessorVisible(): Row | undefined;
        /** Retrieves the visible successor. */
        get successorVisible(): Row | undefined;
        /** Retrieves the first row of the rows list. */
        get first(): Row | undefined;
        /** Retrieves the last row of the rows list. */
        get last(): Row | undefined;
        /** Retrieves the predecessor of the row in the complete list. */
        get previous(): Row | undefined;
        /** Retrieves the successor of the row in the complete list. */
        get next(): Row | undefined;
        /** Retrieves the identifier for the row. */
        get identifier(): TIdentifier | undefined;
        /** Retrieves the number of child rows in the row. */
        get count(): number;
        /** Retrieves the total number of rows in the row. */
        get countRecursive(): number;
        /** Retrieves the total number of visible rows in the row. */
        get countVisible(): number;
        /** Retrieves if the row is the first visible row. */
        get isFirstVisible(): boolean;
        /** Retrieves if the row is the last visible row. */
        get isLastVisible(): boolean;
        /** Retrieves if the predecessor is visible and expanded. */
        get isPredecessorVisibleAndExpanded(): boolean;
        /** Retrieves the position of the row in the list. */
        get position(): number;
        /** Retrieves if the row is drawn. */
        get isDrawn(): boolean;
        /** Retrieves if the row is calculated. */
        get isCalculated(): boolean;
        /** Retrieves the row rectangle. */
        get rectangle(): Rectangle;
        /** Retrieves the top position of the row. */
        get top(): number;
        /** Retrieves the botom position of the row. */
        get bottom(): number;
        /** Retrieves the total height of the row including child rows. */
        get height(): number;
        /** Retrieves the tail position of the row. */
        get tail(): number;
        /** Retrieves the mean of the row. */
        get mean(): number;

        /** Retrieves the depth of the row. */
        get depth(): number;
        /** Retrieves the static label. */
        get label(): string;
        /** Sets the static label for static rows. */
        set label(sLabel: string);
        /** Retrieves if the row is a static label. */
        get isLabel(): boolean;
        /** Retrieves if the row is static. */
        get isStatic(): boolean;
        /** Specifies if the row is static. */
        set isStatic(bStatic: boolean);
        /** Retrieves if the row is hovered. */
        get isHovered(): boolean;
        /** Retrieves if the row is movable. */
        get isMovable(): boolean;
        /** Specifies if the row is movable. */
        set isMovable(bMovable: boolean);
        /** Retrieves if the row is moving. */
        get isMoving(): boolean;
        /** Specifies if the row is moving. */
        set isMoving(bMoving: boolean);
        /** Retrieves if the row is selected. */
        get isSelected(): boolean;
        /** Specifies the selected state of the row. */
        set isSelected(bSelected: boolean);
        /** Retrieves if the row is disabled. */
        get isDisabled(): boolean;
        /** Specifies if the row is disabled. */
        set isDisabled(bDisable: boolean);
        /** Retrieves if the row is visible. */
        get isVisible(): boolean;
        /** Specifies if the row is visible. */
        set isVisible(bVisible: boolean);
        /** Retrieves if the row is excluded. */
        get isExcluded(): boolean;
        /** Specifies if the row is excluded. */
        set isExcluded(bExclude: boolean);
        /** Retrieves if the row is collapsed. */
        get isCollapsed(): boolean;
        /** Specifies if the row is collapsed. */
        set isCollapsed(bCollapsed: boolean);
        /** Retrieves if the collapsed state is changed. */
        get isCollapsedChanged(): boolean;
        /** Retrieves if the list is expandable. */
        get isExpandable(): boolean;
        /** Retrieves if the row is observable. */
        get isObservable(): boolean;
        /** Retrieves if the row is hidden. */
        get isHidden(): boolean;
        /** Retrieves if the row is even. */
        get isEven(): boolean;
        /** Retrieves if the row is deleted. */
        get isDeleted(): boolean;
        /** Retrieves if the row is editable. */
        get isEditable(): boolean;
        /** Specifies if the row is editable. */
        set isEditable(bIsEditable: boolean);

        /**
         * Fired when a row is moved to another rows collection.
         * @param pEvent Contains the event payload.
         * @event
         */
        protected onChange(pEvent: IItemChangeEvent<Row>): void;
        /**
         * Fired when a row is destroyed.
         * @param pEvent Contains the event payload.
         * @event
         */
        protected onPop(pEvent: IItemPopEvent<Row>): void;
        /**
         * Fired when the data changes.
         * @param sProperty Specifies the property that changed.
         * @param pData Contains the data.
         * @event
         */
        protected onDataChange(sProperty: string, pData: TData): void;
        /** Draws the row. */
        draw(): Element | undefined;
        /**
         * Redraws a cell.
         * @param sProperty Specifies the column property name.
         * @param bForceRedraw Forces a complete redraw of the cell.
         */
        redraw(pProperty: string | Column, bForceRedraw?: boolean): void;
        /**
         * Retrieves the cell element for the supplied column.
         * @param pColumn Reference to the column.
         * @return Returns a reference to the element.
         */
        cellElement(pColumn: Column): Element;
        /**
         * Retrieves or writes the cell data for the supplied column.
         * @param pColumn Reference to the column.
         * @param pData Optional new data value.
         * @return Returns the data.
         */
        cell(pColumn: Column<Row>, pData?: TData): TData;
        /**
         * Creates a glyph for the row.
         * @param sStyles Specifies the glyph styles.
         * @param bIndent Specifies if the complete row needs to be indented.
         */
        glyphCreate(sStyles: string, nWidth: number, bIndent: boolean, bFollowing: boolean): void;
        /**
         * Moves the row gylph.
         * @param nX Specifies the horizontal movement.
         * @param nY Specifies the vertical movement.
         */
        glyphMove(nX: number, nY: number): void;
        /** Destroys the gylph. */
        glyphDestroy(): void;
        /** Updates the indentation level. */
        updateIndentation(): void;
        /**
         * Invoked when the row is initialized.
         * @return Returns a reference to the row.
         * @event
         */
        onInit(): this;
        /**
         * Fired when a row is changed.
         * @param nReason Specifies the reason for the change.
         * @event
         */
        onUpdate(nReason: Reasons): void;
        /**
         * Invoked when the row index is changed.
         * @event
         */
        onIndex(): void;
        /**
         * Invoked when a row is refreshed.
         * @event
         */
        onRefresh(): void;
        /**
         * Fired when the hover state of a row is changed.
         * @param bHover Specifies if the row is hovered.
         * @param bScrollEvent Indicates if the event is fired by a scroll event.
         * @event
         */
        onHover(bHover: boolean, bScrollEvent?: boolean): void;
        /**
         * Sets the `OnTap` callback.
         * @param fnTap Specifies the callback function.
         * @param fnTap.pRow Reference to the row.
         * @param fnTap.pColumn Reference to the column which is tapped.
         * @return Returns a reference to the row to allow chaining.
         * @event
         */
        onTap<T extends Row>(fnTap: (pRow: T, pColumn: Column) => void | boolean): this;
        /**
         * Sets the `OnDoubleTap` callback.
         * @param fnDoubleTap Specifies the callback function.
         * @param fnDoubleTap.pRow Reference to the row.
         * @param fnDoubleTap.pColumn Reference to the column which is tapped.
         * @return Returns a reference to the row to allow chaining.
         * @event
         */
        onDoubleTap<T extends Row>(fnDoubleTap: (pRow: T, pColumn: Column) => void | boolean): this;
        /**
         * Sets the `OnEnter` callback.
         * @param fnEnter Specifies the callback function.
         * @param fnEnter.pRow Reference to the row.
         * @return Returns a reference to the row to allow chaining.
         * @event
         */
        onEnter<T extends Row>(fnEnter: (pRow: T) => void | boolean): this;
        /**
         * Sets the `OnSelect` callback.
         * @param fnSelect Specifies the callback function.
         * @param fnSelect.pRow Reference to the row.
         * @return Returns a reference to the row to allow chaining.
         * @event
         */
        onSelect<T extends Row>(fnSelect: (pRow: T) => void): this;
        /**
         * Sets the `OnDeselect` callback.
         * @param fnDeselect Specifies the callback function.
         * @param fnDeselect.pRow Reference to the row.
         * @return Returns a reference to the row to allow chaining.
         * @event
         */
        onDeselect<T extends Row>(fnDeselect: (pRow: T) => void): this;
        /**
         * Writes row data.
         * @param sProperty Specifies the property that changed.
         * @param pData Contains the data.
         */
        write(sProperty: string, pData: TData): void;
        /**
         * Fires the tap event.
         * @param pColumn Reference to the column.
         * @return Returns `true` if the event is fired.
         */
        tap(pColumn: Column): boolean;
        /**
         * Fires the double tap event.
         * @param pColumn Reference to the column.
         * @return Returns `true` if the event resulted in an action.
         */
        doubleTap(pColumn: Column): boolean;
        /**
         * Fires the enter event.
         * @return Returns `true` if the `OnEnter` event has handled the event.
         */
        enter(): boolean;
        /**
         * Sets the static state of the row.
         * @param sLabel Specifies the static label.
         * @return Returns a reference to the row to allow chaining.
         */
        static(sLabel?: string): this;
        /**
         * Specifies if the row is movable.
         * @param bMovable Specifies if the row is movable.
         * @return Returns a reference to the row to allow chaining.
         */
        movable(bMovable: boolean): this;
        /**
         * Selects the row.
         * @return Returns a reference to the row to allow chaining.
         */
        select(): this;
        /**
         * Deselects the row.
         * @return Returns a reference to the row to allow chaining.
         */
        deselect(): this;
        /**
         * Enables the row.
         * @return Returns a reference to the row to allow chaining.
         */
        enable(): this;
        /**
         * Disables the row.
         * @return Returns a reference to the row to allow chaining.
         */
        disable(): this;
        /**
         * Shows the row.
         * @return Returns a reference to the row to allow chaining.
         */
        show(): this;
        /**
         * Hides the row.
         * @return Returns a reference to the row to allow chaining.
         */
        hide(): this;
        /**
         * Expands the row.
         * @return Returns a reference to the row to allow chaining.
         */
        expand(): this;
        /**
         * Collapses the row.
         * @return Returns a reference to the row to allow chaining.
         */
        collapse(): this;
        /**
         * Increases the row indentation.
         * @return Returns a reference to the row to allow chaining.
         */
        increase(): this;
        /**
         * Decreases the row indentation.
         * @return Returns a reference to the row to allow chaining.
         */
        decrease(): this;
        /**
         * Moves the row to another row.
         * @param pRow Specifies the row to move to.
         * @param sWhere Specifies where the row should be added.
         * @return Returns `true` if the row is moved.
         */
        move(pRow: Row, sWhere: "below" | "above" | "firstchild" | "lastchild"): boolean;
        /**
         * Makes the row the (last) child of the supplied row.
         * @param pRow Specifies the row which becomes the parent.
         * @return Returns `true` if the row is moved.
         */
        makeLastChildOf(pRow: Row): boolean;
        /**
         * Makes the row the (last) child of the supplied row.
         * @param pRow Specifies the row which becomes the parent.
         * @return Returns `true` if the row is moved.
         */
        makeFirstChildOf(pRow: Row): boolean;
        /**
         * Verifies if the supplied row is a parent of the row.
         * @param pRow Reference to the row.
         * @return Returns `true` if the row is a child of the supplied row.
         */
        isChildOf(pRow: Row): boolean;
        /**
         * Retrieves if the a column is being edited.
         * @param pColumn Specifies the column to check.
         * @return Returns `true` if the column is being edited.
         */
        isEditing(pColumn: Column): boolean;
        /**
         * Scrolls the row into view.
         * @return Returns a reference to the row to allow chaining.
         */
        scrollIntoView(): Row;
        /**
         * Deletes the row from the list.
         * @param bRecursive Specifies if child rows should be deleted.
         * @return Returns a reference to the row to allow chaining.
         */
        delete(bRecursive?: boolean): this;
        /**
         * Activates the editor for the specified column.
         * @param pColumn Specifies the column of the row to edit.
         * @return Returns `true` if the editing is started.
         */
        editor(pColumn: Column): boolean;
        /**
         * Activates the editor for the column with the specified name.
         * @param sProperty Specifies the property.
         * @return Returns `true` if the editing is started.
         */
        editorForColumn(sProperty: string): boolean;
        /** Closes the edtior. */
        closeEditor(): void;
        /**
         * Refreshes the data for a complete row or for one or more columns.
         * @param pColumns Specifies the columns to refresh. If omitted all columns
         * are refreshed.
         */
        refresh(...pColumns: (string | Column)[]): void;
        /** Destroys a row. */
        destroy(): void;
    }
    /** Type declaration for column types. */
    export type TColumnType =
        | "string"
        | "number"
        | "boolean"
        | "date"
        | "time"
        | "datetime"
        | "image"
        | "icon"
        | "checkbox"
        | "switch"
        | "selector"
        | "button"
        | "custom";
    interface IColumnTreeImage {
        /** Specifies an image URL. */
        URL: string;
        /** Specifies an image URL which is used when a row is moved. */
        URLWhileMoving?: string;
        /** Specifies the width of the image. */
        width: number;
        /** Specifies the height of the image. */
        height: number;
    }
    interface IColumnTreeImages {
        /** Contains the line image. */
        line: IColumnTreeImage;
        /** Contains the node image. */
        node: IColumnTreeImage;
        /** Contains the ending image. */
        ending: IColumnTreeImage;
        /** Contains the expand image. */
        expand?: IColumnTreeImage;
        /** Contains the collapse image. */
        collapse?: IColumnTreeImage;
    }
    interface IColumnProperties<T extends Row = Row> {
        /** Specifies the column property name. */
        property: string;
        /** Specifies the column type. */
        type: TColumnType;
        /** Specifies the visible column name. */
        name?: string;
        /** Specifies an icon for the column instead of a name. */
        icon?: {
            /** Icon URI. */
            URL: string;
            /** Icon width. */
            width: number;
            /** Icon height. */
            height: number;
        };
        /**
         * Specifies the width for the column as an absolute pixel value (number) or
         * a relative value (append % to the width string). Specify "auto" to let
         * the system automatically adjust the column width based on the content.
         */
        width?: number | string | "auto";
        /** Specifies the minimum width in pixels for the column. */
        minWidth?: number;
        /** Specifies the maximum width in pixels for the column. */
        maxWidth?: number;
        /** Specifies the column alignment. */
        alignment?: "left" | "center" | "right";
        /** Boolean value which specifies if the column is visible. */
        visible?: boolean;
        /** Boolean value which specifies if the column is resizable. */
        resizable?: boolean;
        /** Boolean value which specifies if the column is movable. */
        movable?: boolean;
        /**
         * Enables editing the content of a row for a column (when set to `auto`
         * the editing starts when the cell is double clicked).
         */
        editable?: "no" | "yes" | "auto";
        /** Boolean value which specifies if the column is sortable. */
        sortable?: boolean;
        /** Automatically resorts the list when a change has occured (default is `true`). */
        resortOnChange?: boolean;
        /** Specifies the indentation size in pixels. */
        indentation?: number;
        /**
         * Specifies if the root level rows needs to be indented if there is an
         * expand and collapse image supplied. If this value is `false` only rows
         * that are expandable are indented in order to show the expand or collapse
         * image.
         */
        indentAlways?: boolean;
        /**
         * Specifies an offset before the indentation is applied.
         */
        indentOffset?: number;
        /**
         * Specifies images which will be used to create a tree view for
         * indented rows.
         */
        treeImages?: IColumnTreeImages;
        /** Specifies a string which will be inserted before the cell value. */
        prefix?: string;
        /** Specifies a string which will be appended to the end of the cell value. */
        suffix?: string;
        /** Specifies a truth string for boolean columns (default is `Yes`). */
        labelForTrue?: string;
        /** Specifies a false string for boolean columns (default is `No`). */
        labelForFalse?: string;
        /** Specifies the number of decimals for numeric columns (default is `0`). */
        precision?: number;
        /** Specifies the formatting options for date/time fields. */
        format?: "short" | "medium" | "long" | "full";
        /** Specifies the icon size or image height. */
        size?: number;
        /**
         * Specifies a string to use as cell value when no cell value is applied.
         * In case of an icon column, this value specifies an alternate icon.
         */
        default?: string;
        /**
         * Specifies a decorator function which is invoked for each cell which is
         * drawn to the list. You can use it to apply specific styles or content.
         * If you supply a function which returns `true` the default cell draw
         * function will be overrided.
         */
        decorator?: TDecorator<T>;
        /**
         * Specifies a modifier function which allows modification of the displayed
         * column data just before it is rendered to the display.
         */
        modifier?: TModifier<T>;
        /** Specifies a function that returns the color for icons or buttons. */
        colorize?: TColorize<T>;
        /** Specifies a function that returns the markdown parser for the column. */
        markdown?: TMarkdown<T>;
        /** Specifies an `OnTap` event for the column. */
        onTap?: (pColumn: Column<T>) => void;
        /**
         * Enables a command for the column which is invoked when a row is clicked
         * within the column. You can use it to create cell/row buttons.
         */
        command?: TRowCallback<T>;
        /**
         * Implements a menu for the column which is invoked when a row is clicked
         * within the column. You can use it to create a row menu.
         */
        menu?: (pRow: T) => MenuOption[];
        /** Specifies if the menu is even displayed when a row is disabled. */
        menuAlways?: boolean;
        /** Specifies the menu style. */
        menuStyle?: IMenuStyle;
        /** Specifies if the row needs to be selected when the menu is opened. */
        selectOnMenu?: boolean;
    }
    interface IColumnSelector {
        type: "selector";
    }
    interface IColumnState {
        /** Contains the column property. */
        property: string;
        /** Contains the column index. */
        index: number;
        /** Contains the column width. */
        width: number;
        /** Contains the column sorting. */
        sorting: TColumnSorting;
    }
    interface IColumnHeaderStyle {
        /** Specifies the minimum column width. */
        width?: number;
        /** Column appearance. */
        appearance?: IStyles;
        /** Column is sortable. */
        sortable?: {
            /** Sortable appearance. */
            appearance?: IStyles;
            /** Column is sorted ascending */
            ascending?: IStyles;
            /** Column is sorted descending */
            descending?: IStyles;
        };
        /** Column is resizable. */
        resizable?: IStyles;
        /** Column is resizing. */
        resizing?: {
            /** Header style while resizing. */
            header: IStyles;
            /** Column style while resizing. */
            column?: IStyles;
        };
        /** Column is movable. */
        movable?: IStyles;
        /** Column is moving. */
        moving?: {
            /** Header style while moving. */
            header: IStyles;
            /** Column style while moving. */
            column?: IStyles;
        };
        /** Last column. */
        last?: IStyles;
        /** Column splitter. */
        splitter?: {
            /** Specifies the width of the splitter. */
            width: number;
            /** Splitter appearance. */
            appearance?: IStyles;
            /** Splitter of resizable column. */
            resizable?: IStyles;
            /** Splitter of resizing column. */
            resizing?: IStyles;
            /** Splitter of movable column. */
            movable?: IStyles;
            /** Splitter of moving column. */
            moving?: IStyles;
            /** Last column splitter. */
            last?: IStyles;
        };
        /** Column selector. */
        selector?: {
            /** Specifies the width of the selector. */
            width: number;
            /** Selector appearance. */
            appearance?: IStyles;
            /** Selector unchecked state. */
            unchecked?: IStyles;
            /** Selector checked state. */
            checked?: IStyles;
        };
    }
    interface IColumnsHeaderStyle {
        /** Specifies the height of the column header. */
        height: number;
        /** Specifies a spacing between the header and the rows. */
        spacing?: number;
        /** Header appearance. */
        appearance?: IStyles;
        /** Specifies the styles for each column. */
        column: IColumnHeaderStyle & {
            types?: {
                [type: string]: IColumnHeaderStyle;
            };
            properties?: {
                [property: string]: IColumnHeaderStyle;
            };
        };
    }
    class Columns<T extends Row> extends StrictMatrix<Columns<T>, Column<T>, void, IColumnProperties<T>> {
        /**
         * Constructs the columns matrix.
         * @param pList Reference to the list.
         * @param pProperties Reference to the list properties.
         * @param fnResize Specifies the resize callback function.
         */
        constructor(pList: List<T>, pColumns: (IColumnProperties<T> | IColumnSelector)[], fnResize: (nWidth?: number) => void);

        /** Retrieves a reference to the list. */
        get list(): List<T>;
        /** Retrieves the columns state. */
        get state(): IColumnState[];
        /** Restores the column state. */
        set state(pState: IColumnState[]);
        /** Contains if the columns are being calculated. */
        get isCalculating(): boolean;
        /** Retrieves the width of all columns. */
        get columnsWidth(): number;
        /** Retrieves the header width. */
        get headerWidth(): number;
        /**
         * Retrieves the row width which is the header width or the width of all
         * columns if their combined width if larger then the width of the header.
         */
        get rowWidth(): number;
        /** Retrieves if a column is sorting. */
        get isSorting(): boolean;
        /** Retrieves if a column is resizing. */
        get isResizing(): boolean;
        /** Retrieves if a column is moving or resizing. */
        get isMovingOrResizing(): boolean;
        /** Retrieves if a column is editable. */
        get isEditable(): boolean;
        /**
         * Retrieves the column for the specified property.
         * @param sProperty Specifies the property.
         * @return Returns a reference to the column or `undefined` if the column is
         * not found.
         */
        column(sProperty: string): Column<T> | undefined;
        /**
         * Retrieves the column at the specified point.
         * @param pPoint Specifies the point.
         * @return Returns a reference to the column or `undefined` if the column is
         * not found.
         */
        columnFromPoint(pPoint: IPoint): Column<T> | undefined;
        /**
         * Retrieves the minimum column width.
         * @param sProperty Specifies the column property.
         * @param sType Specifies the column type.
         */
        columnMinWidth(sType: TColumnType, sProperty: string): number;
        /**
         * Draws the column headers to the specified element.
         * @param pElement Reference to the parent element.
         * @param pStyle Specifies the column header style.
         * @return Returns a reference to the element.
         */
        drawHeader(pElement: Element, pStyle: IColumnsHeaderStyle): Element | undefined;
        /**
         * Initializes the column header.
         * @return Returns `true` if the header is initialized.
         */
        init(): boolean;
        /**
         * Calculates the column width.
         * @param nWidthAvailable Specifies the available visual width.
         */
        calculate(nWidthAvailable?: number): void;
        /**
         * Resizes the column header.
         * @param bSynchronous Specifies if the resize should be performed synchronously.
         */
        resize(bSynchronous?: boolean): void;
        /**
         * Updates the columns.
         * @param bSynchronous Specifies if the update should be performed synchronously.
         */
        update(bSynchronous: boolean): void;
        /** Invoked when the column are changed. */
        changed(): void;
        /** Marks the list as unsorted. */
        unsorted(): void;
        /** Resorts the list. */
        resort(): void;
        /** Markes the list as not sorted. */
        nosort(): void;
        /** Destroys the columns. */
        destroy(): void;
    }
    /** Type definition for sorting. */
    export type TColumnSorting = "no" | "ascending" | "descending";
    class Column<T extends Row = TAny> extends StrictItem<Columns<T>, void, IColumnProperties<T>> {
        /**
         * Constructs a new column.
         * @param pColumns Reference to the parent columns list.
         * @parem pProperties Contains the column properties.
         */
        constructor(pColumns: Columns<T>, pProperties: IColumnProperties<T>);
        /** Retrieves the column properties. */
        get properties(): IColumnProperties<T>;
        /** Retrieves a reference to the list. */
        get list(): List<T>;

        /** Retrieves if the column is sorting. */
        get isSorting(): boolean;
        /** Retrieves if a column is moving. */
        get isMoving(): boolean;
        /** Retrieves if a column is resizing. */
        get isResizing(): boolean;
        /** Retrieves if a column is moving or resizing. */
        get isMovingOrResizing(): boolean;
        /** Retrieves if the column is sorted ascending. */
        get isSortedAscending(): boolean;
        /** Retrieves if the column is sorted descending. */
        get isSortedDescending(): boolean;
        /** Retrieves if sorting is enabled for this column. */
        get isSorted(): boolean;
        /** Retrieves if the column is visible. */
        get isVisible(): boolean;
        /** Sets the column visibility. */
        set isVisible(bVisible: boolean);
        /** Retrieves the column indentation size. */
        get indentation(): number;
        /** Retrieves if indentation is always enabled. */
        get indentAlways(): boolean;
        /** Retrieves the indentation offset. */
        get indentOffset(): number;
        /** Retrieves if the column allows indentation. */
        get allowIndentation(): boolean;
        /** Retrieves if the column supports expanders. */
        get allowExpander(): boolean;

        /** Retrieves the left position of the column. */
        get left(): number;
        /** Retrieves the right position of the column. */
        get right(): number;
        /** Retrieves the current column width. */
        get width(): number;
        /** Sets the column width. */
        set width(nWidth: number);
        /** Retrieves if the column has an absolute width. */
        get hasAbsoluteWidth(): boolean;
        /** Retrieves the column class name. */
        get class(): string;
        /** Retrieves the column type. */
        get type(): TColumnType;
        /** Retrieves the column property name. */
        get property(): string;
        /** Retrieves the column offset. */
        get offset(): number;
        /** Retrieves the column state. */
        get state(): IColumnState;
        /** Restores the column state. */
        set state(pState: IColumnState);

        /** Positions the column. */
        position(): void;
        /**
         * Reflects the column position to the list.
         * @param bInstantly Writes the position change instantly.
         */
        reflectPosition(bInstantly?: boolean): void;
        /** Reflects the column width to the list. */
        reflectWidth(): void;
        /**
         * Draws a column glyph element.
         * @param pParent Reference to the parent glyph element.
         * @param nOffset Specifies the column offset.
         */
        drawGlyph(pParent: Element, nOffset: number): Element;
        /**
         * Draws the column header.
         * @param pElementColumns Reference to the columns element.
         * @param pResizing Specifies the column styles when resizing.
         * @param pMoving Specifies the column styles when moving.
         */
        drawHeader(pElementColumns: Element, pResizing?: IStyles, pMoving?: IStyles): void;
        /**
         * Initializes the column.
         * @return Returns `true` if the column is initialized.
         */
        init(): boolean;
        /**
         * Calculates the column width.
         * @return Returns the pixel width or `0` if the width is a percentage.
         */
        calculate(): number;
        /**
         * Calculates the column width from a percentage.
         * @param nWidthAvailable Specifies the available width.
         * @return Returns the pixel width or `0` if the width is a absolute.
         */
        calculateFromPercentage(nWidthAvailable: number): number;
        /**
         * Calculates the optimal column width where all column content is visible.
         * @param fnResult Callback function which is invoked when the width is calculated.
         * @param fnResult.nWidth Contains the optimal width in pixels.
         */
        calculateOptimalWidth(fnResult: (nWidth: number) => void): void;
        /**
         * Returns the column if the supplied point is within the column.
         * @param pPoint Specifies a point.
         * @return Returns a reference to the column.
         */
        inRange(pPoint: IPoint): this | undefined;
        /**
         * Expands the column with the specified amount.
         * @param nAmount Amount of expand in pixels.
         */
        expand(nAmount: number): void;
        /**
         * Shrinks the column with the specified amount.
         * @param nAmount Amount of expand in pixels.
         */
        shrink(nAmount: number): void;
        /** Expands or shrinks the column to fit the column contents. */
        fit(): void;
        /**
         * Fired when the column is pushed.
         * @event
         */
        onPush(): void;
        /**
         * Fired when the column is changed.
         * @event
         */
        onChange(): void;
        /**
         * Marks the list as unsorted.
         * @return Returns `true` if the column sorting is invalidated.
         */
        unsorted(): boolean;
        /**
         * Sorts the list using the column data.
         * @param sDirection Specifies the order direction.
         * @return Returns `true` if the sort invoked a change in the row order.
         */
        sort(sDirection: "ascending" | "descending"): boolean;
        /**
         * Resorts a column if sorting is enabled.
         * @return Returns `true` if the resort is applied.
         */
        resort(): boolean;
        /**
         * Disables column sorting if sorting is enabled for the column.
         * @return Returns 'true' if the column sorting is disabled.
         */
        nosort(): boolean;
        /** Refreshes the data for a column for all rows. */
        refresh(): void;
        /** Destroys the column. */
        destroy(): void;
    }
    /** Describes the list style. */
    export interface IListStyle {
        /** List appearance. */
        appearance?: IStyles;
        /** Styles for the list hover state. */
        hover?: IStyles;
        /** Specifies if a header is visible and how it looks. */
        header?: IColumnsHeaderStyle;
        /** Specifies the rows styles. */
        rows?: IStyles;
        /** Specifies the column styles. */
        column?: {
            /** Column appearance. */
            appearance?: IStyles;
            /** Column on odd rows. */
            odd?: IStyles;
            /** Column on even rows. */
            even?: IStyles;
            /** Column on row hover. */
            hover?: IStyles;
            /** Column on selected row. */
            selected?: IStyles;
            /** Column on disabled row. */
            disabled?: IStyles;
            /** Column on row moving. */
            moving?: IStyles;
            /** Column on row lagging. */
            lagging?: IStyles;
            /** Static column. */
            static?: {
                /** Static column appearance. */
                appearance?: IStyles;
                /** Static column moving. */
                moving?: IStyles;
                /** Static column lagging. */
                lagging?: IStyles;
            };
            /** Column glyph. */
            glyph?: {
                /** Glyph appearance. */
                appearance?: IStyles;
                /** Glyph which follow a parent glyph. */
                following?: IStyles;
                /** Static glyph. */
                static?: IStyles;
            };
        };
        /** Specifies the row styles. */
        row?: {
            /** Specifies the row height. */
            height: number;
            /** Specifies the spacing between rows. */
            spacing?: number;
            /** Specifies if the spacing should be applied after the last row. */
            spacingAfterLastRow?: boolean;
            /** Row appearance. */
            appearance?: IStyles;
            /** Odd rows. */
            odd?: IStyles;
            /** Even rows. */
            even?: IStyles;
            /** Row hover. */
            hover?: IStyles;
            /** Row selected. */
            selected?: IStyles;
            /** Row disabled. */
            disabled?: IStyles;
            /** Row moving. */
            moving?: IStyles;
            /** Row lagging. */
            lagging?: IStyles;
            /** Row hidden. */
            hidden?: IStyles;
            /** Static row. */
            static?: {
                /** Static row appearance. */
                appearance?: IStyles;
                /** Static row moving. */
                moving?: IStyles;
                /** Static row lagging. */
                lagging?: IStyles;
            };
            /** Row glyph. */
            glyph?: {
                /** Glyph appearance. */
                appearance?: IStyles;
                /** Glyph which follow a parent glyph. */
                following?: IStyles;
                /** Static glyph. */
                static?: IStyles;
            };
        };
        /** Specifies the cell styles. */
        cell?: {
            /** Cell appearance. */
            appearance?: IStyles;
            /** Odd rows. */
            odd?: IStyles;
            /** Even rows. */
            even?: IStyles;
            /** Cell hover. */
            hover?: IStyles;
            /** Cell selected. */
            selected?: IStyles;
            /** Cell disabled. */
            disabled?: IStyles;
            /** Cell moving. */
            moving?: IStyles;
            /** Cell lagging. */
            lagging?: IStyles;
            /** Static cell. */
            static?: {
                /** Static cell appearance. */
                appearance?: IStyles;
                /** Static cell moving. */
                moving?: IStyles;
                /** Static cell lagging. */
                lagging?: IStyles;
                /** Static label. */
                label?: {
                    /** Static label appearance. */
                    appearance?: IStyles;
                    /** Static label moving. */
                    moving?: IStyles;
                    /** Static label lagging. */
                    lagging?: IStyles;
                };
            };
            /** Cell glyph. */
            glyph?: {
                /** Glyph appearance. */
                appearance?: IStyles;
                /** Glyph which follow a parent glyph. */
                following?: IStyles;
                /** Static glyph. */
                static?: {
                    /** Static cell appearance. */
                    appearance?: IStyles;
                    /** Static label. */
                    label?: IStyles;
                };
            };
        };
        /** Selector styles. */
        selector?: {
            /** Specifies the width of the selector. */
            width: number;
            /** Selector appearance. */
            appearance?: IStyles;
            /** Selector unchecked state. */
            unchecked?: IStyles;
            /** Selector checked state. */
            checked?: IStyles;
        };
        /** Checkbox styles. */
        checkbox?: {
            /** Specifies the width of the checkbox. */
            width: number;
            /** Checkbox appearance. */
            appearance?: IStyles;
            /** Checkbox unchecked state. */
            unchecked?: IStyles;
            /** Checkbox checked state. */
            checked?: IStyles;
            /** Checkbox for selected rows. */
            selected?: {
                /** Unchecked state. */
                unchecked?: IStyles;
                /** Checked state. */
                checked?: IStyles;
            };
        };
        /** Switch styles. */
        switch?: {
            /** Specifies the width of the switch. */
            width: number;
            /** Switch appearance. */
            appearance?: IStyles;
            /** Switch off state. */
            off?: IStyles;
            /** Switch on state. */
            on?: IStyles;
            /** Switch for selected rows. */
            selected?: {
                /** Off state. */
                off?: IStyles;
                /** On state. */
                on?: IStyles;
            };
        };
        /** Icon styles. */
        icon?: {
            /** Specifies a class name to use for the color. */
            class: string;
            /** Default color for the icon. */
            default?: string;
            /** Hover color for the icon. */
            hover?: string;
            /** Selected color for the icon. */
            selected?: string;
            /** Moving color for the icon. */
            moving?: string;
            /** Glyph color for the icon. */
            glyph?: string;
        };
        /** Button styles. */
        button?: {
            /** Specifies a class name to use for the color. */
            class: string;
            /** Default color for the button. */
            default?: string;
            /** Hover color for the button. */
            hover?: string;
            /** Selected color for the button. */
            selected?: string;
            /** Moving color for the button. */
            moving?: string;
            /** Glyph color for the button. */
            glyph?: string;
        };
        /** Editor styles. */
        editor?: {
            /** Editor appearance. */
            appearance: IStyles;
            /** Text selections. */
            selection: IStyles;
            /** Selected row. */
            selected?: {
                /** Editor appearance. */
                appearance: IStyles;
                /** Text selections. */
                selection: IStyles;
            };
        };
        /** Specifies the empty state styles. */
        emptyState?: {
            /** Specifies a height for the empty state. */
            height?: number;
            /** Empty state appearance. */
            appearance?: IStyles;
        };
        /** Specifies scrollbar styles if scrolling is allowed. */
        scrollbars?: IScrollbarsStyle;
        /** Specifies the menu style. */
        menu?: IMenuStyle;
    }
    /** Describes the list properties. */
    export interface IListProperties<T extends Row = Row> {
        /**
         * Specifies the stylesheet to write the list styles to. If omitted
         * the default application global stylesheet will be used.
         */
        stylesheet?: Stylesheet;
        /** Specifies the list style. */
        style?: IListStyle;
        /** Specifies the parent layer or element for the list. */
        parent?: Layer | Element;
        /** Specifies the columns. */
        columns?: (IColumnProperties<T> | IColumnSelector)[];
        /** Enables or disables the lazy load mode (enabled by default). */
        lazy?: boolean;
        /**
         * Specifies if the list is scrollable. This can only be set for lists
         * which are not displayed inside a layer.
         */
        scrollable?: "no" | "yes" | "horizontal";
        /** Specifies if rows can be selected. */
        selectable?: boolean;
        /** Specifies if multiple rows can be selected. */
        multipleSelect?: boolean;
        /** Specifies if multiple rows can be selected using a mouse and the Ctrl-button. */
        multipleSelectUsingCtrl?: boolean;
        /**
         * Specifies if rows can be moved. When strict mode is enabled, items can
         * only be moved above or below items which are on the same indent level.
         */
        movable?: "strict" | "yes" | "no";
        /**
         * Specifies a maximum number of indentation levels. The number must be `1`
         * or higher. If you specify `1` this means there is one level allowed under
         * the root level (level 0).
         */
        indentationMaxDepth?: number;
        /** Specifies if child rows needs to be collapsed by default. */
        collapsed?: boolean;
        /** Specifies the default sorting. */
        sorting?: string;
        /** Specifies the sort direction of the default sort. */
        sortingDirection?: "ascending" | "descending";
        /** Specifies if double tapping is enabled. */
        doubleTappable?: boolean;
        /** Specifies if the list control should gain focus when stroked. */
        autoFocus?: boolean;
        /** Specifies a message which should be displayed in empty lists. */
        emptyStateMessage?:
            | string
            | {
                  readonly message: string;
                  readonly markdown?: boolean;
                  readonly height?: number;
              };
        /**
         * Specifies a decorator function which is invoked for each cell which is
         * drawn to the list. You can use it to apply specific styles or content.
         * If you supply a function which returns `true` the default cell draw
         * function will be overrided and not invoked.
         */
        decorator?: TDecorator<T>;
        /**
         * Specifies the `OnInit` callback which is invoked when the list is
         * initialized. If you want to add items to the list during initialization
         * this is the place to do that.
         * @event
         */
        onInit?: TListCallback<T> | undefined;
        /**
         * Specifies the `OnReady` callback which is invoked when the list is ready.
         * @event
         */
        onReady?: TListCallback<T> | undefined;
        /**
         * Specifies the `OnAdd` callback which is invoked when a row is added.
         * @event
         */
        onAdd?: TRowCallback<T> | undefined;
        /**
         * Specifies the `OnChange` callback which is invoked when a row is changed.
         * @event
         */
        onChange?: ((pRow: T, sProperty: string, pData: TData) => void) | undefined;
        /**
         * Specifies the `OnIndex` callback which is invoked when the index of a row changes.
         * @event
         */
        onIndex?: TRowCallback<T> | undefined;
        /**
         * Specifies the `OnDelete` callback which is invoked when a row is deleted.
         * @event
         */
        onDelete?: TRowCallback<T> | undefined;
        /**
         * Specifies the `OnRefresh` callback which is invoked when a row is refreshed.
         * @event
         */
        onRefresh?: TListCallback<T> | undefined;
        /**
         * Specifies the `OnExpand` callback which is invoked when a row is expanded.
         * @event
         */
        onExpand?: TRowCallback<T> | undefined;
        /**
         * Specifies the `OnCollapse` callback which is invoked when a row is collapsed.
         * @event
         */
        onCollapse?: TRowCallback<T> | undefined;
        /**
         * Specifies the `OnTap` callback which is invoked when a single tap occurs
         * on a row.
         * @event
         */
        onTap?: TTapCallback<T> | undefined;
        /**
         * Specifies the `OnDoubleTap` callback which is invoked when a double tap
         * occurs on a row.
         * @event
         */
        onDoubleTap?: TTapCallback<T> | undefined;
        /**
         * Specifies the `OnEnter` callback which is invoked when the enter key is
         * pressed on a row.
         * @event
         */
        onEnter?: TRowCallback<T> | undefined;
        /**
         * Specifies the `OnSelect` callback which is invoked when a row is selected.
         * @event
         */
        onSelect?: TRowCallback<T> | undefined;
        /**
         * Specifies the `OnDeselect` callback which is invoked when a row is
         * deselected.
         * @event
         */
        onDeselect?: TRowCallback<T> | undefined;
        /**
         * Specifies the `OnSelectionChange` callback which is invoked when the
         * selected state of a row or rows changes.
         * @event
         */
        onSelectionChange?: TListCallback<T> | undefined;
        /**
         * Specifies the `OnSelectionMode` callback which is invoked when the list
         * control selection mode is changed from single to multiple or vice versa.
         * @event
         */
        onSelectionMode?: TListCallback<T> | undefined;
        /**
         * Specifies the `OnMoveStart` callback which is invoked when a row in the
         * list is moved. Should return nothing or `true` if the move is allowed.
         * @event
         */
        onMoveStart?: ((pRow: T) => void | boolean) | undefined;
        /**
         * Specifies the `OnMove` callback which is invoked when a row in the
         * list is moving. This event is invoked for each move. If you only need
         * the final position, use the `OnMoved` event. Should return nothing or
         * `true` if the move is allowed.
         * @event
         */
        onMove?: ((pRow: T, pTo: T) => void | boolean) | undefined;
        /**
         * Specifies the `OnMoveEnd` callback which is invoked when a row in the
         * list is done moving.
         * @event
         */
        onMoveEnd?: TRowCallback<T> | undefined;
        /**
         * Specifies the `OnMoved` callback which is invoked when a row in the
         * list is moved.
         * @event
         */
        onMoved?: ((pRow: T, nOldIndex: number, nNewIndex: number) => void) | undefined;
        /**
         * Specifies the `OnSort` callback which is invoked when a list is sorted.
         * This event is also invoked when the sorting is canceled. In that case
         * the parameter `pColumn` will be undefined.
         * @event
         */
        onSort?: ((pColumn: Column<T> | undefined) => void) | undefined;
        /**
         * Specifies the `OnResize` callback which is invoked when the list
         * is resized.
         * @event
         */
        onResize?: TListCallback<T> | undefined;
        /**
         * Specifies the `OnFocus` callback which is invoked when the list gains focus.
         * @event
         */
        onFocus?: TListCallback<T> | undefined;
        /**
         * Specifies the `OnBlur` callback which is invoked when the list loses focus.
         * @event
         */
        onBlur?: TListCallback<T> | undefined;
        /**
         * Specifies the `OnColumnsChange` callback which is invoked when there is a
         * change in the width or ordering of the columns.
         * @event
         */
        onColumnsChange?: TListCallback<T> | undefined;
        /**
         * Specifies the `OnLazyLoad` callback which is invoked when the list
         * is scrolled to the end.
         * @event
         */
        onLazyLoad?: TListCallback<T> | undefined;
        /**
         * Specifies the `OnEditStart` callback which is invoked when the inline
         * editing starts.
         * @event
         */
        onEditStart?: ((pRow: T, pColumn: Column<T>, pData: TData) => void) | undefined;
        /**
         * Specifies the `OnEditEnd` callback which is invoked when the inline
         * editing ends.
         * @event
         */
        onEditEnd?: ((pRow: T, pColumn: Column<T>, pData: TData) => void) | undefined;
    }
    export interface IListState {
        /** Contains the columns state. */
        columns: IColumnState[];
        /** Contains the identifiers of the selected rows. */
        selected: TIdentifier[];
        /** Contains the rows which are collapsed. */
        collapsed: TIdentifier[];
        /** Contains the rows which are expanded. */
        expanded: TIdentifier[];
        /** Contains the scroll position. */
        scroll: IPoint;
    }
    /** Type definition for row identifiers. */
    export type TIdentifier = number | string;
    type TData = string | number | boolean | undefined;
    /** Type definition for the decorator function. */
    export type TDecorator<T extends Row> = (
        pData: TData,
        pCell: Element,
        pRow: T,
        pColumn: Column<T> | undefined,
        bIsGlyph: boolean
    ) => void | boolean;
    /** Type definition for the modifier function. */
    export type TModifier<T extends Row> = (pData: TData, pRow: T, pColumn: Column<T>) => TData;
    /** Type definition for the colorize function. */
    export type TColorize<T extends Row> = (sURI: string, pRow: T, pColumn: Column<T>) => string | undefined;
    /** Type defintion for the markdown function. */
    export type TMarkdown<T extends Row, Type = {}> = (
        sMarkdown: string,
        pRow: T,
        pColumn: Column<T>
    ) => {
        /** Specifies a markdown parser. */
        readonly parser: MarkdownParser<Type>;
        /** Specifies the features to emit. */
        features?: MarkdownFeatures;
        /** Specifies a `@`-mention handler. */
        readonly mentions?: (pParent: Element, pMention: Type | undefined, sContent: string) => Element | undefined;
        /** Specifies a `#`-reference handler. */
        readonly references?: (pParent: Element, pReference: Type | undefined, sContent: string) => Element | undefined;
        /** Specifies the target for hyperlinks. */
        readonly target?: "self" | "blank";
    };
    /** Type definition for the list callback. */
    export type TListCallback<T extends Row> = (pList: List<T>) => void;
    /** Type definition for the row callback. */
    export type TRowCallback<T extends Row> = (pRow: T) => void;
    /** Type definition for the row tap callback. */
    export type TTapCallback<T extends Row> = (pRow: T, pColumn: Column<T>) => void;
    export class List<T extends Row = Row> extends Hooks<TListEvents> {
        /** Contains the default stylesheet. */
        static stylesheet: Stylesheet;
        /** Contains the default style. */
        static style: IListStyle | undefined;

        /**
         * Contains the function which is invoked when the list is
         * initialized. If you want to add items to the list during initialization
         * this is the place to do that.
         * @event
         */
        onInit: TListCallback<T> | undefined;
        /**
         * Contains the function which is invoked when the list is ready.
         * @event
         */
        onReady: TListCallback<T> | undefined;
        /**
         * Contains the function which is invoked when a row is added.
         * @event
         */
        onAdd: TRowCallback<T> | undefined;
        /**
         * Contains the function which is invoked when a row is changed.
         * @event
         */
        onChange: ((pRow: T, sProperty: string, pData: TData) => void) | undefined;
        /**
         * Contains the function which is invoked when the index of a row changes.
         * @event
         */
        onIndex: TRowCallback<T> | undefined;
        /**
         * Contains the function which is invoked when a row is deleted.
         * @event
         */
        onDelete: TRowCallback<T> | undefined;
        /**
         * Contains the function which is invoked when a row is refreshed.
         * @event
         */
        onRefresh: TListCallback<T> | undefined;
        /**
         * Contains the function which is invoked when a row is expanded.
         * @event
         */
        onExpand: TRowCallback<T> | undefined;
        /**
         * Contains the function which is invoked when a row is collapsed.
         * @event
         */
        onCollapse: TRowCallback<T> | undefined;
        /**
         * Contains the function which is invoked when a single tap occurs
         * on a row.
         * @event
         */
        onTap: TTapCallback<T> | undefined;
        /**
         * Contains the function which is invoked when a double tap
         * occurs on a row.
         * @event
         */
        onDoubleTap: TTapCallback<T> | undefined;
        /**
         * Contains the function which is invoked when the enter key is pressed on a row.
         * @event
         */
        onEnter: TRowCallback<T> | undefined;
        /**
         * Contains the function which is invoked when a row is selected.
         * @event
         */
        onSelect: TRowCallback<T> | undefined;
        /**
         * Contains the function which is invoked when a row is
         * deselected.
         * @event
         */
        onDeselect: TRowCallback<T> | undefined;
        /**
         * Contains the function which is invoked when the
         * selected state of a row or rows changes.
         * @event
         */
        onSelectionChange: TListCallback<T> | undefined;
        /**
         * Contains the function which is invoked when the list
         * control selection mode is changed from single to multiple or vice versa.
         * @event
         */
        onSelectionMode: TListCallback<T> | undefined;
        /**
         * Contains the function which is invoked when a row in the
         * list is moved. Should return nothing or `true` if the move is allowed.
         * @event
         */
        onMoveStart: ((pRow: T) => void | boolean) | undefined;
        /**
         * Contains the function which is invoked when a row in the
         * list is moving. This event is invoked for each move. If you only need
         * the final position, use the `OnMoved` event. Should return nothing or
         * `true` if the move is allowed.
         * @event
         */
        onMove: ((pRow: T, pTo: T) => void | boolean) | undefined;
        /**
         * Contains the function which is invoked when a row in the
         * list is done moving.
         * @event
         */
        onMoveEnd: TRowCallback<T> | undefined;
        /**
         * Specifies the function which is invoked when a row in the
         * list is moved.
         * @event
         */
        onMoved: ((pRow: T, nOldIndex: number, nNewIndex: number) => void) | undefined;
        /**
         * Contains the function which is invoked when a list is sorted.
         * This event is also invoked when the sorting is canceled. In that case
         * the parameter `pColumn` will be undefined.
         * @event
         */
        onSort: ((pColumn: Column<T> | undefined) => void) | undefined;
        /**
         * Contains the function which is invoked when the list
         * is resized.
         * @event
         */
        onResize: TListCallback<T> | undefined;
        /**
         * Contains the function which is invoked when the list
         * gains focus.
         * @event
         */
        onFocus: TListCallback<T> | undefined;
        /**
         * Contains the function which is invoked when the list
         * loses focus.
         * @event
         */
        onBlur: TListCallback<T> | undefined;
        /**
         * Contains the function which is invoked when there is a
         * change in the width or ordering of the columns.
         * @event
         */
        onColumnsChange: TListCallback<T> | undefined;
        /**
         * Contains the function which is invoked when the list is
         * scrolled to the end.
         * @event
         */
        onLazyLoad: TListCallback<T> | undefined;
        /**
         * Contains the function which is invoked when the inline
         * editing starts.
         * @event
         */
        onEditStart?: ((pRow: T, pColumn: Column<T>, pData: TData) => void) | undefined;
        /**
         * Contains the function which is invoked when the inline
         * editing ends.
         * @event
         */
        onEditEnd?: ((pRow: T, pColumn: Column<T>, pData: TData) => void) | undefined;
        /**
         * Constructs a new list.
         * @param pPropertiesList Specifies the list properties. Multiple
         * properties objects can be supplied. They will be combined to a single
         * immutable properties object.
         */
        constructor(...pPropertiesList: IListProperties<T>[]);
        /** Retrieves a reference to the stylesheet. */
        get stylesheet(): Stylesheet;
        /** Retrieves the list style. */
        get style(): IListStyle;

        /** Retrieves a reference to the layer. */
        get layer(): Layer | undefined;
        /** Retrieves the scroll controller. */
        get scroll(): Scrollbars | undefined;
        /** Retrieves the list state. */
        get state(): IListState;
        /** Sets the list state. */
        set state(pState: IListState);
        /** Retrieves the dimensions of the list including the header. */
        get dimensions(): Dimensions;
        /** Retrieves a reference to the list element. */
        get element(): Element | undefined;
        /** Retrieves a reference to the rows. */
        get rows(): Rows<T>;
        /** Retrieves the rows element. */
        get rowsElement(): Fragment | Element | undefined;

        /** Retrieves the row height. */
        get rowHeight(): number;
        /** Retrieves the row spacing. */
        get rowSpacing(): number;
        /** Retrieves the current hovered row. */
        get rowHovered(): T | undefined;
        /** Sets the current hovered row. */
        set rowHovered(pRow: T | undefined);
        /** Retrieves the number of columns. */
        get columnsCount(): number;
        /** Retrieves the columns state. */
        get columnsState(): IColumnState[];
        /** Sets the columns settings. */
        set columnsState(pState: IColumnState[]);
        /** Retrieves the decorator function. */
        get decorator(): TDecorator<T> | undefined;
        /** Retrieves the total number of rows in the list. */
        get count(): number;
        /** Retrieves all rows in an array (including child rows). */
        get all(): T[];
        /** Retrieves the rows as an array. */
        get children(): T[];
        /** Retrieves all selected rows. */
        get selection(): T[];
        /** Retrieves the number of selected rows. */
        get selectionCount(): number;
        /**
         * Retrieves the selected row in case of a single selection. This property
         * is `undefined` when multiple items are selected.
         */
        get selectedRow(): T | undefined;
        /** Retrieves an array with the identifiers of all selected rows. */
        get selectionOfIdentifiers(): TIdentifier[];
        /** Sets the rows with the supplied identifiers. */
        set selectionOfIdentifiers(pIdentifiers: TIdentifier[]);
        /** Retrieves if multiple selections are allowed. */
        get isMultipleSelect(): boolean;
        /** Enables or disables multiple selection. */
        set isMultipleSelect(bMultipleSelect: boolean);
        /** Retrieves if all rows are selected. */
        get isAllSelected(): boolean;
        /** Retrieves the maximum numbe of indention levels. */
        get maxIndentionDepth(): number;
        /** Retrieves if the list is constructing. */
        get isConstructing(): boolean;
        /** Retrieves if the list is calculated. */
        get isCalculated(): boolean;
        /** Retrieves if the list is ready. */
        get isReady(): boolean;
        /** Retrieves if new rows are collapsed by default. */
        get isCollapsed(): boolean;
        /** Retrieves if the list has focus. */
        get hasFocus(): boolean;
        /** Retrieves if the list is scrolling. */
        get isScrolling(): boolean;
        /** Retrieves if a column is moving or resizing. */
        get isColumnMovingOrResizing(): boolean;
        /** Retrieves if a sorting is active. */
        get isSorting(): boolean;
        /** Retrieves if a row is moving. */
        get isMoving(): boolean;
        /** Retrieves if a filter is active. */
        get isFiltered(): boolean;
        /** Retrieves if the list is destroyed. */
        get isDestroyed(): boolean;
        /** Retrieves if hooks are allowed. */
        get isHookAllowed(): boolean;

        /**
         * Invalidates a row.
         * @param pRow Reference to the row.
         */
        invalidateRow(pRow: T): void;
        /** Invalidates the list control and draws the rows. */
        invalidate(): void;
        /**
         * Fired when the list dimensions are changed.
         * @event
         */
        dimensionsChanged(): void;
        /**
         * Notifies the list of a selection change.
         * @param pChanged Reference to the row.
         * @param bSelected State of the selection.
         */
        selectionChanged(pChanged: T, bSelected: boolean): void;
        /**
         * Initializes the list.
         * @param nWidth Optional width. If supplied the parent width is not calculated.
         * @param nHeight Optional height. If supplied the parent height is not calculated.
         */
        init(nWidth?: number, nHeight?: number): void;
        /**
         * Resize the list. Invoke this function when the parent element is resized.
         * @param nWidth Optional width. If supplied the width is not calculated.
         * @param nHeight Optional height. If supplied the parent height is not calculated.
         */
        resize(nWidth?: number, nHeight?: number): void;
        /**
         * Retrieves the column for the specified property.
         * @param sProperty Specifies the property.
         * @return Returns a reference to the column or `undefined` if the column is
         * not found.
         */
        column(sProperty: string): Column<T> | undefined;
        /**
         * Iterates through each column.
         * @param fnColumn Specifies a function which is invoked for each column.
         * @param fnColumn.pColumn  Contains a reference to the column.
         */
        eachColumn(fnColumn: (pColumn: Column<T>) => void): void;
        /**
         * Retrieves the row at the specified index. This function treats the list
         * as a flat list.
         * @param nIndex Specifies the zero-based index number.
         * @return Returns a reference to the row or `undefined` if the row is
         * not found.
         */
        rowAtIndex(nIndex: number): T | undefined;
        /**
         * Retrieves the row with the specified identifier.
         * @param pIdentifier Specifies the row identifier.
         * @return Returns a reference to the row or `undefined` if the row is
         * not found.
         */
        rowWithIdentifier(pIdentifier: TIdentifier): T | undefined;
        /**
         * Adds a row to the end of the list.
         * @param pRow Specifies the row.
         * @return Returns a reference to the row.
         */
        add<R extends T>(pRow: R): R;
        /**
         * Adds an array of rows.
         * @param pRows Array with rows.
         * @return Returns the number of rows added to the list.
         */
        addN(...pRows: T[]): number;
        /**
         * Inserts a row at the begin of the list.
         * @param pRow Specifies the row.
         * @return Returns a reference to the row.
         */
        insert<R extends T>(pRow: R): R;
        /**
         * Inserts an array of rows.
         * @param pRows Array with rows.
         * @return Returns the number of rows added to the list.
         */
        insertN(...pRows: T[]): number;
        /**
         * Iterates recursively through all items in the list.
         * @param fnRow Specifies a function which is invoked for each row.
         * @param fnRow.pRow Reference to the row.
         * @return Returns `true` if the iteration was stopped.
         */
        each(fnRow: (pRow: T) => boolean | void): boolean;
        /**
         * Iterates recursively through all items in the list beginning at the end.
         * @param fnRow Specifies a function which is invoked for each row.
         * @param fnRow.pRow Reference to the row.
         * @return Returns `true` if the iteration was stopped.
         */
        eachReverse(fnRow: (pRow: T) => boolean | void): boolean;
        /**
         * Enables the list buffer. Use the buffer when a large number of rows is
         * supplied at once. Invoke `Flush` when ready.
         */
        buffer(): void;
        /** Flushes the list buffer. */
        flush(): void;
        /** Clears all items in the list. */
        clear(): void;
        /**
         * Sorts on the column at the specified data-index.
         * @param sProperty Specifies the property to sort on.
         * @param sDirection Specifies the order direction.
         */
        sort(sProperty: string, sDirection?: "ascending" | "descending"): void;
        /** Disables list sorting. */
        nosort(): void;
        /** Resorts the list. */
        resort(): void;
        /** Marks the list as unsorted. */
        unsorted(): void;
        /** Selects all rows. */
        selectAll(): void;
        /** Deselects all selected rows. */
        deselectAll(): void;
        /**
         * Select matching rows.
         * @param fnMatch Specifies a match function which is invoked for each row.
         * This function should return `true` for each row which should be selected.
         * @param fnMatch.pRow Reference to the row.
         * @param bMultipleSelect Specifies if multiple selections can be made. If
         * `false` the first match is selected.
         * @return Returns the number of rows selected.
         */
        selectMatching(fnMatch: (pRow?: T) => boolean, bMultipleSelect?: boolean): number;
        /** Expands all rows. */
        expandAll(): void;
        /** Collapses all rows. */
        collapseAll(): void;
        /**
         * Applies a filter and show only the rows which match the supplied match function.
         * @param fnMatch Specifies a match function which is invoked for each row.
         * This function should return `true` for each row which should be included.
         * @param fnMatch.pRow Reference to the row.
         * @return Returns the number of rows which match the filter.
         */
        filter(fnMatch: (pRow: T) => boolean): number;
        /** Removes an active filter. */
        unfilter(): void;
        /** Sets the focus to the list. */
        focus(): void;
        /** Blurs the list focus. */
        blur(): void;
        /** Scrolls to the top of the list. */
        scrollToTop(): void;
        /** Scrolls to the bottom of the list. */
        scrollToBottom(): void;
        /**
         * Scrolls to the top if the list is scrolled or scrolls to the bottom if
         * the list is at the top.
         */
        scrollToTopOrBottom(): void;
        /**
         * Scrolls a row into view.
         * @param pRow Reference to the row.
         */
        scrollIntoView(pRow: T): void;
        /** Refreshes all data in the list. */
        refresh(): void;
        /** Specifies the list is refreshed. */
        refreshed(): void;
        /** Destroys the list. */
        destroy(): void;
    }
    export class ListComponent<T extends Row = Row> extends LayerComponent {
        /**
         * Constructs a new list component.
         * @param pProperties Specifies the list properties.
         * @param pConfiguration Specifies the layer configuration.
         */
        constructor(pProperties: IListProperties<T>, pConfiguration?: LayerConfiguration);
        /** Retrieves a reference to the list. */
        get list(): List<T>;
        /** Renders the component. */
        protected onRender(): void;
    }
    class RowTyped<T extends {}> extends Row {
        /**
         * Creates a new typed row instance.
         * @param pData Contains the data.
         * @param pIdentifier Contains the optional data identifier.
         */
        constructor(pData: T, pIdentifier?: TIdentifier);
        /** Retrieves the data. */
        get data(): T;
        /** Sets the data. */
        set data(pData: T);
        /**
         * Retrieves or writes the cell data for the supplied column.
         * @param pColumn Reference to the column.
         * @param pData Optional new data value.
         * @return Returns the data.
         */
        cell(pColumn: Column, pData?: TData): TData;
        /** Updates the row. */
        update(): void;
    }
    class RowArray extends Row {
        /**
         * Creates a new data row instance.
         * @param pIdentifier Contains the optional data identifier.
         * @param pData Contains the data.
         */
        constructor(pIdentifier?: TIdentifier, ...pData: TData[]);
        /** Retrieves the data. */
        get data(): TData[];
        /** Sets the data. */
        set data(pData: TData[]);
        /**
         * Retrieves or writes the cell data for the supplied column.
         * @param pColumn Reference to the column.
         * @param pData Optional new data value.
         * @return Returns the data.
         */
        cell(pColumn: Column, pData?: TData): TData;
        /** Updates the row. */
        update(): void;
    }
    class RowStatic extends Row {
        /**
         * Constructs a new static row.
         * @param sLabel Specifies the static label.
         * @param pIdentifier Optional identifier for the static row.
         * @param pSortColumns Specifies the columns on which the static row should
         * be included in a sort.
         */
        constructor(sLabel: string, pIdentifier?: TIdentifier, ...pSortColumns: string[]);
        /**
         * Retrieves the static label for the supplied column.
         * @param pColumn Reference to the column.
         * @return Returns the label.
         */
        cell(pColumn: Column): TData;
    }
    /**
     * Implements the column decorator. Use this decorator to specify column properties in a row class.
     * @param pTarget Reference to the row target.
     * @param sProperty Specifies the column property.
     * @param pDescriptor Reference to the property descriptor.
     */
    export function column<T extends Row>(pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor): void;
    /**
     * Implements the identifier decorator which is used to define the identifier field.
     * @param pTarget Reference to the row target.
     * @param sProperty Specifies the column property.
     * @param pDescriptor Reference to the property descriptor.
     */
    export function identifier<T extends Row>(pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor): void;
    /**
     * Pass updates to the decorated property to one or more other properties.
     * @param pColumns Specifies the column properties to update.
     */
    export function update<T extends Row>(...pColumns: string[]): (pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor) => void;
    /**
     * Requests a complete row refresh when the decorated property is changed.
     * @param pTarget Reference to the row target.
     * @param sProperty Specifies the column property.
     * @param pDescriptor Reference to the property descriptor.
     */
    export function refresh<T extends Row>(pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor): void;

    export {
        Column as ListColumn,
        IColumnHeaderStyle as IListColumnHeaderStyle,
        IColumnProperties as IListColumnProperties,
        IColumnSelector as IListColumnSelector,
        IColumnState as IListColumnState,
        IColumnTreeImage as IListColumnTreeImage,
        IColumnTreeImages as IListColumnTreeImages,
        IColumnsHeaderStyle as IListColumnsHeaderStyle,
        Row as ListRow,
        RowArray as ListRowArray,
        RowStatic as ListRowStatic,
        RowTyped as ListRowTyped,
        TData as TListData,
    };
}

declare module "tripetto/module/ui-menu" {
    import { Asset, Element, IStyles, Stylesheet } from "tripetto/module/dom";
    import { Rectangle, Spacing } from "tripetto/module/metrics";
    import { IScrollbarsStyle } from "tripetto/module/ui-scrollbars";

    export interface ILabelStyle {
        /** Label appearance. */
        appearance: IStyles;
        /** The label is disabled. */
        disabled?: IStyles;
        /** The label is hovered. */
        hover?: IStyles;
    }
    export interface ISeparatorStyle {
        /** Separator appearance. */
        appearance: IStyles;
        /** Separator line. */
        separator: IStyles;
        /** The separator is disabled. */
        disabled?: IStyles;
        /** The separator is hovered. */
        hover?: IStyles;
    }
    export interface IItemStyle extends ILabelStyle {
        /** The item is selected. */
        selected?: IStyles;
        /** The item is tapped. */
        tapped?: IStyles;
        /** The item badge. */
        badge?: IStyles;
    }
    export interface IImageStyle extends IItemStyle {
        /** Styles for the image. */
        image: IStyles;
        /** Path colors for the image. */
        paths?: {
            /** Specifies a class name to use for the color. */
            class: string;
            /** Normal color for the image. */
            normal: string;
            /** Hover color for the image. */
            hover?: string;
            /** Selected color for the image. */
            selected?: string;
            /** Disabled color for the image. */
            disabled?: string;
        };
    }
    export interface ISubmenuStyle extends ILabelStyle {
        /** The submenu is selected. */
        selected?: IStyles;
        /** Specifies margin settings for opening a submenu. */
        margin?: Spacing;
    }
    /** Describes the menu style. */
    export interface IMenuStyle {
        /** Specifies the styles for the menu. */
        menu?: {
            /** Styles for the outer menu element. */
            outer?: IStyles;
            /** Styles for the inner menu element. */
            inner?: IStyles;
            /** The menu is closed. */
            open?: IStyles;
            /** The menu is opened. */
            close?: IStyles;
            /** The menu is a submenu. */
            submenu?: IStyles;
            /** The menu is hovered. */
            hover?: IStyles;
            /** The menu is center aligned. */
            center?: IStyles;
            /** The menu is left/top aligned according to the context. */
            context?: IStyles;
            /** The menu is left aligned. */
            left?: IStyles;
            /** The menu is top aligned. */
            top?: IStyles;
            /** The menu is right aligned. */
            right?: IStyles;
            /** The menu is bottom aligned. */
            bottom?: IStyles;
        };
        /** Specifies the styles for menu options. */
        options?: {
            label?: ILabelStyle;
            separator?: ISeparatorStyle;
            item?: IItemStyle;
            submenu?: ISubmenuStyle;
            image?: IImageStyle;
        };
        /** Specifies the styles for the optional menu scroll indicators. */
        indicators?: {
            /** Scroll up indicator. */
            up: {
                /** Scroll up indicator appearance. */
                appearance: IStyles;
                /** A pointing device hovers the indicator. */
                hover?: IStyles;
                /** The menu is crawling up. */
                crawl?: IStyles;
            };
            /** Scroll down indicator. */
            down: {
                /** Scroll down indicator appearance. */
                appearance: IStyles;
                /** A pointing device hovers the indicator. */
                hover?: IStyles;
                /** The menu is crawling down. */
                crawl?: IStyles;
            };
        };
        /** Defines the styles for the overlay. */
        overlay?: {
            /** Overlay appearance. */
            appearance?: IStyles;
            /** The menu is opened. */
            open?: IStyles;
            /** The menu is closed. */
            close?: IStyles;
        };
        /**
         * Specifies if a `transform-origin` should be calculated for the
         * menu class. Only applies to menus which have one of the following
         * positions: `left`, `right`, `top` or `bottom`.
         */
        origin?: boolean;
        /** Specifies if scrollbars should be displayed and describes their styles. */
        scrollbars?: IScrollbarsStyle;
        /** Specifies if the scrollbars are interactable and can be used for scrolling (default is `false`). */
        scrollbarsInteractable?: boolean;
        /** Specifies the minimum menu width. */
        minWidth?: number;
        /** Specifies the maximum menu width. */
        maxWidth?: number;
        /** Specifies if the supplied minimum and maximum width also applies for submenus (default is `false`). */
        delegateWidths?: boolean;
    }
    type TPosition =
        | "left"
        | "left-from-center"
        | "right"
        | "right-from-center"
        | "top"
        | "top-from-center"
        | "bottom"
        | "bottom-from-center"
        | "center"
        | "context";
    /** Describes the scrollbar properties. */
    export interface IMenuProperties {
        /**
         * Specifies the stylesheet to write the menu styles to. If omitted
         * the default application global stylesheet will be used.
         */
        stylesheet?: Stylesheet;
        /** Specifies the menu style. */
        style?: IMenuStyle;
        /** Specifies the parent asset. If omitted `Menu.Parent` will be used. */
        parent?: Asset;
        /** Specifies if the overlay should be activated (default is `false`). */
        overlay?: boolean;
        /** Specifies if the menu should capture all controller events as long as the menu is active (default is `false`). */
        capture?: boolean;
        /** Specifies if the menu is modal. A modal menu won't close when it loses focus (default is `false`). */
        modal?: boolean;
        /** Specifies the minimum menu width. */
        minWidth?: number;
        /** Specifies the maximum menu width. */
        maxWidth?: number;
        /** Specifies if the supplied minimum and maximum width also applies for submenus (default is `false`). */
        delegateWidths?: boolean;
        /** Specifies if the menu should be destroyed when closed (default is `true`). */
        destroyOnClose?: boolean;
        /** Specifies the preferred position relative to the display rectangle. */
        position?: TPosition;
        /** Specifies an optional margin. */
        margin?: Spacing;
        /** Specifies if the menu gains focus automatically (default is `true`). */
        autoFocus?: boolean;
        /**
         * Fired when the menu is opened.
         * @event
         */
        onOpen?: TMenu;
        /**
         * Fired when the menu is closing.
         * @event
         */
        onClosing?: TMenu;
        /**
         * Fired when the menu is closed.
         * @event
         */
        onClose?: TMenu;
        /**
         * Fired after the menu is closed and the item tap event is invoked.
         * @event
         */
        onClosed?: TMenu;
        /**
         * Fired when the menu is destroyed.
         * @event
         */
        onDestroy?: TMenu;
    }
    /** Declares the menu callback type. */
    export type TMenu = (pMenu: MenuFactory) => void;
    class MenuFactory {
        /**
         * Fired when the menu is opened.
         * @event
         */
        onOpen: TMenu | undefined;
        /**
         * Fired when the menu is closing.
         * @event
         */
        onClosing: TMenu | undefined;
        /**
         * Fired when the menu is closed.
         * @event
         */
        onClose: TMenu | undefined;
        /**
         * Fired after the menu is closed and the item tap event is invoked.
         * @event
         */
        onClosed: TMenu | undefined;
        /**
         * Fired when the menu is destroyed.
         * @event
         */
        onDestroy: TMenu | undefined;
        /** Retrieves a reference to the current root menu. */
        protected static get root(): MenuFactory | undefined;
        /** Sets the reference to the root menu. */
        protected static set root(pRoot: MenuFactory | undefined);

        /**
         * Constructs a new menu.
         * @param pOptions Specifies the menu options.
         * @param pProperties Specifies the menu properties.
         * @param pAncestor Specifies if the ancestor menu.
         */
        constructor(pOptions: Option[], pProperties?: IMenuProperties, pAncestor?: MenuFactory);

        /** Retrieves the menu options array. */
        get options(): Option[];
        /** Retrieves the stylesheet for the menu. */
        get stylesheet(): Stylesheet;
        /** Retrieves the menu style. */
        get style(): IMenuStyle;
        /** Retrieves the menu parent. */
        get parent(): Asset | undefined;
        /** Retrieves if the menu is drawn. */
        get isDrawn(): boolean;
        /** Retrieves if the menu is destroyed. */
        get isDestroyed(): boolean;
        /** Retrieves if the menu is opened. */
        get isOpen(): boolean;
        /** Retrieves if the menu is a submenu. */
        get isSubmenu(): boolean;
        /** Retrieves if the menu is hovered. */
        get isHovered(): boolean;
        /** Retrieves a reference to the opened option. */
        get opened(): Option | undefined;
        /** Retrieves the minimum width. */
        get minWidth(): number;
        /** Retrieves the maximum width. */
        get maxWidth(): number;
        /** Retrieves the minimum submenu width. */
        get minSubmenuWidth(): number;
        /** Retrieves the maximum submenu width. */
        get maxSubmenuWidth(): number;
        /** Retrieves the tapped option. */
        get tappedOption(): Option | undefined;
        /** Retrieves if an option was tapped. */
        get isOptionTapped(): boolean;

        /**
         * Opens the menu at the specified position in the rectangle.
         * @param pRectangle Specifies the display rectangle.
         * @param sPosition Specifies the preferred position relative to the display rectangle.
         * @param pMargin Specifies an optional margin.
         * @return Returns a reference to the menu.
         */
        open(pRectangle: Rectangle, sPosition?: TPosition, pMargin?: Spacing): this;
        /**
         * Opens a submenu.
         * @param pParent Specifies the parent option,
         */
        openSubmenu(pParent: Option): void;
        /**
         * Opens the menu at the specified asset.
         * @param pAsset Specifies the asset.
         * @param sPosition Specifies the preferred menu position (default is `center`).
         * @param pMargin Specifies an optional margin.
         * @return Returns a reference to the menu.
         */
        openAtElement(pAsset: Asset, sPosition?: TPosition, pMargin?: Spacing): this;
        /**
         * Opens the menu at the specified position.
         * @param nX Specifies the horizontal position.
         * @param nY Specifies the vertical position.
         * @param sPosition Specifies the preferred menu position (default is `context`).
         * @return Returns a reference to the menu.
         */
        openAtPosition(nX: number, nY: number, sPosition?: TPosition): this;
        /**
         * Closes the menu.
         * @param bAnimate Specifies if an animation should be used.
         * @param fnCallback Optional callback function which is invoked when the
         * menu is closed.
         */
        close(bAnimate?: boolean, fnCallback?: TMenu): void;
        /**
         * Sets the focus to the first option of the menu.
         * @return Returns a reference to the menu instance.
         */
        focus(): this;
        /** Destroys the menu. */
        destroy(): void;
    }
    export type TOption = (pOption: Option) => void;
    abstract class Option {
        /**
         * Fired when an option is tapped.
         * @event
         */
        onTap: TOption | undefined;
        /**
         * Fired when an option is opened.
         * @event
         */
        onOpen: TOption | undefined;
        /**
         * Fired when an option is closed.
         * @event
         */
        onClose: ((pOption: Option, bAnimate: boolean) => void) | undefined;
        /**
         * Fired when the option is removed.
         * @event
         */
        onRemove: TOption | undefined;
        /**
         * Fired when the option is destroyed.
         * @event
         */
        onDestroy: TOption | undefined;
        /**
         * Constructs a new option.
         * @param bDisabled Specifies the disabled state.
         * @param bInteractable Specifies if the option is interactable.
         */
        constructor(bDisabled: boolean, bInteractable: boolean);
        /** Retrieves a reference to the menu. */
        get menu(): MenuFactory | undefined;
        /** Retrieves the option element. */
        get element(): Element | undefined;
        /** Returns the element type for the item. */
        get elementType(): string;
        /** Retrieves if the option is interactable. */
        get isInteractable(): boolean;
        /** Retrieves if the option is disabled. */
        get isDisabled(): boolean;
        /** Sets the state of the option. */
        set isDisabled(bDisabled: boolean);
        /** Retrieves if the option is hovered. */
        get isHovered(): boolean;
        /** Sets the hover state of the option. */
        set isHovered(bHover: boolean);
        /** Retrieves if the option is in the selected state. */
        get isSelected(): boolean;
        /** Sets the selected state of the option. */
        set isSelected(bSelected: boolean);
        /** Retrieves if an option is opened. */
        get isOpen(): boolean;
        /** Retrieves if the option can be opened. */
        get canOpen(): boolean;
        /** Retrieves if the menu should be closed when the option is tapped. */
        get closeOnTap(): boolean;
        /**
         * Updates the option.
         * @param bInstantly Applies the updates immediately.
         */
        protected update(bInstantly?: boolean): void;
        /**
         * Draws the option.
         * @param pMenu Reference to the parent menu.
         * @param pOption Reference to the option element.
         */
        draw(pMenu: MenuFactory, pOption: Element): void;
        /** Invoked when an option is tapped. */
        tap(): void;
        /**
         * Invoked when an option is opened.
         * @return Returns `true` if the option is opened.
         */
        open(): boolean;
        /**
         * Invoked when an option is closed.
         * @param Specifies if the option should close using an animation.
         * @return Returns `true` if the option is closed.
         */
        close(bAnimate?: boolean): boolean;
        /** Invoked when the option is removed. */
        remove(): void;
        /** Destroys the option. */
        destroy(): void;
    }
    export class Menu extends MenuFactory {
        /** Contains the default stylesheet. */
        static stylesheet: Stylesheet;
        /** Contains the default style. */
        static style: IMenuStyle | undefined;
        /** Retrieves the default parent element. */
        static get parent(): Asset | undefined;
        /** Sets the default parent element. */
        static set parent(pParent: Asset | undefined);
        /** Retrieves if there is a menu active. */
        static get isActive(): boolean;
        /**
         * Creates a new menu and opens it at the specified position in the
         * rectangle.
         * @param pOptions Specifies the menu options.
         * @param pRectangle Specifies the display rectangle.
         * @param pProperties Specifies the menu properties.
         * @return Returns a reference to the menu.
         */
        static open(pOptions: Option[], pRectangle: Rectangle, pProperties?: IMenuProperties): MenuFactory;
        /**
         * Creates a new menu and opens it at the specified asset.
         * @param pOptions Specifies the menu options.
         * @param pAsset Specifies the asset.
         * @param pProperties Specifies the menu properties.
         * @return Returns a reference to the menu.
         */
        static openAtElement(pOptions: Option[], pAsset: Asset, pProperties?: IMenuProperties): MenuFactory;
        /**
         * Creates a new menu and opens it at the specified position.
         * @param pOptions Specifies the menu options.
         * @param nX Specifies the horizontal position.
         * @param nY Specifies the vertical position.
         * @param pProperties Specifies the menu properties.
         * @return Returns a reference to the menu.
         */
        static openAtPosition(pOptions: Option[], nX: number, nY: number, pProperties?: IMenuProperties): MenuFactory;
        /**
         * Closes the current active menu.
         * @param bAnimate Specifies if an animation should be used.
         * @param fnCallback Optional callback function which is invoked when the
         * menu is closed.
         */
        static close(bAnimate?: boolean, fnCallback?: TMenu): void;
        /**
         * Constructs a new menu.
         * @param pOptions Specifies the menu options.
         * @param pProperties Specifies the menu properties.
         */
        constructor(pOptions: Option[], pProperties?: IMenuProperties);
    }
    class Label extends Option {
        /**
         * Constructs a new label.
         * @param sLabel Specifies the option label.
         * @param bDisabled Specifies if the label is disabled.
         */
        constructor(sLabel: string, bDisabled?: boolean, bInteractable?: boolean);
        /**
         * Draws the label.
         * @param pMenu Reference to the parent menu.
         * @param pElement Reference to the label element.
         * @param pStyle Contains the label style.
         */
        draw(pMenu: MenuFactory, pElement: Element, pStyle?: IStyles): void;
    }
    class Item extends Label {
        /**
         * Constructs a new item.
         * @param sLabel Specifies the option label.
         * @param fnCommand Specifies the command which is invoked when the item
         * is selected.
         * @param bDisabled Specifies if the label is disabled.
         */
        constructor(sLabel: string, fnCommand?: () => void, bDisabled?: boolean);
        /** Retrieves if the menu should be closed when the option is tapped. */
        get closeOnTap(): boolean;
        /**
         * Draws the item.
         * @param pMenu Reference to the parent menu.
         * @param pItem Reference to the item element.
         * @param pStyle Contains the label style.
         */
        draw(pMenu: MenuFactory, pItem: Element, pStyle?: IStyles): void;
        /**
         * Invoked when the item is tapped.
         * @event
         */
        tap(): void;
        /** Sets a badge for the item. */
        badge(sBadge: string): this;
    }
    class ItemWithImage extends Item {
        /**
         * Constructs a new image item.
         * @param sImage Specifies the image.
         * @param sLabel Specifies the label.
         * @param fnCommand Specifies the command which is invoked when the item
         * is selected.
         * @param bDisabled Specifies if the label is disabled.
         */
        constructor(sImage: string, sLabel: string, fnCommand?: () => void, bDisabled?: boolean);
        /**
         * Draws the item.
         * @param pMenu Reference to the parent menu.
         * @param pItem Reference to the item element.
         * @param pStyle Contains the label style.
         */
        draw(pMenu: MenuFactory, pItem: Element, pStyle?: IStyles): void;
    }
    class Separator extends Option {
        /** Constructs a new separator. */
        constructor();
        /**
         * Draws the separator.
         * @param pMenu Reference to the parent menu.
         * @param pSeparator Reference to the separator element.
         * @param pStyle Contains the label style.
         */
        draw(pMenu: MenuFactory, pSeparator: Element, pStyle?: IStyles): void;
    }
    class Submenu extends Item {
        /**
         * Constructs a new submenu.
         * @param sLabel Specifies the option label.
         * @param pOptions Specifies the submenu options.
         * @param bDisabled Specifies if the label is disabled.
         * @param bCollapse Specifies to collapse a single intermediate submenu.
         */
        constructor(sLabel: string, pOptions: Option[] | (() => Option[]), bDisabled?: boolean, bCollapse?: boolean);
        /** Retrieves a reference to the submenu. */
        get submenu(): MenuFactory | undefined;
        /** Retrieves if the option has a submenu. */
        get canOpen(): boolean;
        /** Retrieves if the menu should be closed when the option is tapped. */
        get closeOnTap(): boolean;

        /**
         * Updates the option.
         * @param bInstantly Applies the updates immediately.
         */
        protected update(bInstantly?: boolean): void;
        /**
         * Draws the option.
         * @param pMenu Reference to the parent menu.
         * @param pItem Reference to the item element.
         * @param pStyle Contains the label style.
         */
        draw(pMenu: MenuFactory, pItem: Element, pStyle?: IStyles): void;
        /** Invoked when the option is tapped. */
        tap(): void;
        /**
         * Invoked when the submenu needs to open.
         * @return Returns `true` if the menu is opened.
         */
        open(): boolean;
        /**
         * Invoked when the submenu needs to close.
         * @param Specifies if the option should close using an animation.
         * @return Returns `true` if the menu is closed.
         */
        close(bAnimate?: boolean): boolean;
        /** Invoked when the option is removed. */
        remove(): void;
        /**  Destroys the option. */
        destroy(): void;
    }
    class SubmenuWithImage extends Submenu {
        /**
         * Constructs a new image item.
         * @param sImage Specifies the image.
         * @param sLabel Specifies the option label.
         * @param pOptions Specifies the submenu options.
         * @param bDisabled Specifies if the label is disabled.
         * @param bCollapse Specifies to collapse a single intermediate submenu.
         */
        constructor(sImage: string, sLabel: string, pOptions: Option[] | (() => Option[]), bDisabled?: boolean, bCollapse?: boolean);
        /**
         * Draws the item.
         * @param pMenu Reference to the parent menu.
         * @param pItem Reference to the item element.
         * @param pStyle Contains the label style.
         */
        draw(pMenu: MenuFactory, pItem: Element, pStyle?: IStyles): void;
    }
    class Link extends Item {
        /**
         * Constructs a new link item.
         * @param sLabel Specifies the label.
         * @param sURL Specifies the URL.
         * @param sTarget Specifies the target of the link.
         * @param bDisabled Specifies if the label is disabled.
         */
        constructor(sLabel: string, sURL: string, sTarget?: "self" | "blank");
        /** Returns the element type for the item. */
        get elementType(): string;
        /** Retrieves the URL of the link. */
        get URL(): string;
        /** Sets the URL of the link. */
        set URL(sURL: string);
        /** Retrieves the target of the link. */
        get target(): "self" | "blank";
        /** Sets the target of the link. */
        set target(sTarget: "self" | "blank");
        /**
         * Updates the option.
         * @param bInstantly Applies the updates immediately.
         */
        protected update(bInstantly?: boolean): void;
        /**
         * Draws the item.
         * @param pMenu Reference to the parent menu.
         * @param pItem Reference to the item element.
         * @param pStyle Contains the label style.
         */
        draw(pMenu: MenuFactory, pElement: Element, pStyle?: IStyles): void;
    }
    class LinkWithImage extends Link {
        /**
         * Constructs a new image item.
         * @param sImage Specifies the image.
         * @param sLabel Specifies the label.
         * @param sURL Specifies the URL.
         * @param sTarget Specifies the target of the link.
         */
        constructor(sImage: string, sLabel: string, sURL: string, sTarget?: "self" | "blank");
        /**
         * Draws the item.
         * @param pMenu Reference to the parent menu.
         * @param pItem Reference to the item element.
         * @param pStyle Contains the label style.
         */
        draw(pMenu: MenuFactory, pItem: Element, pStyle?: IStyles): void;
    }

    export {
        Item as MenuItem,
        ItemWithImage as MenuItemWithImage,
        Label as MenuLabel,
        Link as MenuLink,
        LinkWithImage as MenuLinkWithImage,
        Option as MenuOption,
        Separator as MenuSeparator,
        Submenu as MenuSubmenu,
        SubmenuWithImage as MenuSubmenuWithImage,
        TPosition as TMenuPosition,
    };
}

declare module "tripetto/module/ui-scrollbars" {
    import { Asset, Element, IStyles, Stylesheet } from "tripetto/module/dom";
    import { Spacing } from "tripetto/module/metrics";
    import { IScrollProperties, Scroll } from "tripetto/module/touch-scroll";

    /** Describes the scrollbar style. */
    export interface IScrollbarsStyle {
        /** Specifies the track style. */
        track?: {
            /**
             * Contains the track size in pixels. This is the width of the track for
             * vertical scrollbars and the height of the track for horizontal scrollbars.
             */
            size?: number;
            /** Specifies the spacing of the track related to the scroll viewport. */
            spacing?: Spacing;
            /** Specifies the track appearance. */
            appearance?: IStyles;
            /** The track is hovered. */
            hover?: IStyles;
            /** The thumb is hovered. */
            focus?: IStyles;
            /** The thumb is dragged. */
            drag?: IStyles;
            /** The track is crawling. */
            crawl?: IStyles;
            /** Horizontal specific track styles. */
            horizontal?: IStyles;
            /** Vertical specific track styles. */
            vertical?: IStyles;
        };
        /** Specifies the thumb style. */
        thumb?: {
            /**
             * Contains the size of the thumb in pixels. This is the width of the thumb
             * for vertical scrollbars and the height of the thumb for horizontal
             * scrollbars.
             */
            size?: number;
            /**
             * Specifies the minimum height of the thumb for vertical scrollbars
             * or the minimum width for horizontal scrollbars.
             */
            min?: number;
            /** Specifies the spacing of the thumb related to the track. */
            spacing?: Spacing;
            /** Specifies the thumb appearance. */
            appearance?: IStyles;
            /** The track is hovered. */
            hover?: IStyles;
            /** The thumb is hovered. */
            focus?: IStyles;
            /** The thumb is dragged. */
            drag?: IStyles;
            /** The track is crawling. */
            crawl?: IStyles;
            /** Horizontal specific thumb styles. */
            horizontal?: IStyles;
            /** Vertical specific thumb styles. */
            vertical?: IStyles;
        };
        /** Specifies the styles for the corner. */
        corner?: {
            /** Specifies the corner appearance. */
            appearance?: IStyles;
            /** The thumb is dragged. */
            drag?: IStyles;
            /** The track is crawling. */
            crawl?: IStyles;
        };
        /**
         * Defines an additional offset for the scrollbar tracks. This can be used
         * if the position of the tracks needs to be corrected.
         */
        offset?: Spacing;
    }
    /** Describes the scrollbar properties. */
    export interface IScrollbarsProperties extends IScrollProperties {
        /** Specifies the scrollbar style. */
        style?: IScrollbarsStyle;
        /** Specifies if the scrollbars needs to blink on initialization. */
        blink?: boolean;
        /**
         * Specifies if the scrollbars operate in passive mode. Interaction with
         * the scrollbars is not possible. They are just a visual indication.
         */
        passive?: boolean;
    }
    export class Scrollbars extends Scroll {
        /** Contains the default stylesheet. */
        static stylesheet: Stylesheet;
        /** Contains the default style. */
        static style: IScrollbarsStyle | undefined;

        /**
         * Registers a new scrollbars controller.
         * @param pProperties Specifies the scrollbar properties.
         * @return Returns a reference to the scrollbars controller.
         */
        static on(pProperties: IScrollbarsProperties): Scrollbars;
        /**
         * Invalidates the scrollbars which are attached to the specified asset or
         * one of the child assets.
         * @param pAsset Specifies the asset. Supply `*` to target all scrollbars.
         * @param fnCondition Specifies the condition.
         * @param Specifies if the styles are updated instantly.
         * @return Returns `true` if a scrollbar is invalidated.
         */
        static invalidate(pAsset: Asset | "*", fnCondition?: (pScrollbars: Scrollbars) => boolean, bInstantly?: boolean): boolean;
        /**
         * Constructs a new scrollbars controller.
         * @param pProperties Specifies the scrollbar properties.
         */
        protected constructor(pProperties: IScrollbarsProperties);

        /** Retrieves if the scrollbars are shown. */
        get isShown(): boolean;
        /** Retrieves if the scrollbars are hidden. */
        get isHidden(): boolean;
        /** Retrieves if the scrollbars are visible. */
        get isVisible(): boolean;
        /** Retrieves if the horizontal scrollbar is currently visible. */
        get isHorizontalVisible(): boolean;
        /** Retrieves if the vertical scrollbar is currently visible. */
        get isVerticalVisible(): boolean;

        /**
         * Invoked when the scroll controller is initialized.
         * @event
         */
        protected onScrollInit(): void;
        /**
         * Invoked when the scroll area is resized.
         * @event
         */
        protected onScrollResize(): void;
        /**
         * Invoked when the scroll direction (lock) is changed.
         * @event
         */
        protected onScrollDirection(): void;
        /**
         * Invoked when a pointing device hovers in or out the scroll area.
         * @event
         */
        protected onScrollHover(): void;
        /**
         * Invoked when the scrolling starts.
         * @event
         */
        protected onScrollStart(): void;
        /**
         * Invoked when the scroll position is updated.
         * @param nLeft Specifies the left position.
         * @param nTop Specifies the top position.
         * @event
         */
        protected onScrollMove(nLeft: number, nTop: number): void;
        /**
         * Invoked when the scrolling ends.
         * @event
         */
        protected onScrollEnd(): void;
        /**
         * Invoked when a zoom is started.
         * @event
         */
        protected onScrollZoomStart(): void;
        /**
         * Invoked when a zoom is ended.
         * @event
         */
        protected onScrollZoomEnd(): void;
        /** Shows the scrollbars for a brief moment. */
        blink(): void;
        /**
         * Shows the scrollbars (if scrollbars are allowed).
         * @param bShow Specifies if the scrollbars should be showed.
         * @return Returns `true` if the scrollbars are showed.
         */
        show(bShow: boolean): boolean;
        /**
         * Hides the scrollbars.
         * @param bHide Specifies if the scrollbars should be hidden.
         * @return Returns `true` if the scrollbars are hidden.
         */
        hide(bHide: boolean): boolean;
        /**
         * Invalidates the scrollbar condition.
         * @param fnCondition Specifies the condition.
         * @param Specifies if the styles are updated instantly.
         */
        invalidate(fnCondition?: (pScrollbars: Scrollbars) => boolean, bInstantly?: boolean): void;
        /**
         * Invoked when the scrollbars instance is destroyed.
         * @event
         */
        onDestroy(): boolean;
    }
    /**
     * Creates a scroll button which can crawl the scrolling in the specified direction.
     * @param sDirection Specifies the direction.
     * @param sType Specifies the button type.
     * @param sHover Specifies the selector which is applied when the button is hovered.
     * @param sCrawl Specifies the selector which is applied when the button is crawling.
     * @param pStyles Specifies the styles to apply to the element.
     */
    export function scrollbarsButton(
        pScroll: Scroll | Scrollbars,
        sDirection: "left" | "up" | "right" | "down",
        sType: string,
        sHover: string,
        sCrawl: string,
        ...pStyles: IStyles[]
    ): Element;
}

declare module "tripetto/module/ui-toolbar" {
    import { Element, IStyles, Stylesheet } from "tripetto/module/dom";
    import { Hooks } from "tripetto/module/hookup";
    import { Spacing } from "tripetto/module/metrics";
    import { Scroll } from "tripetto/module/touch-scroll";
    import { Tap } from "tripetto/module/touch-tap";
    import { Layer, LayerComponent, LayerConfiguration } from "tripetto/module/ui-layers";
    import { IMenuStyle as IMenuBaseStyle, MenuOption, TMenuPosition } from "tripetto/module/ui-menu";
    import { IScrollbarsStyle, Scrollbars } from "tripetto/module/ui-scrollbars";

    interface IItemStyle {
        /** Specifies the item width. */
        width?: number | "auto" | "fill";
        /** Specifies the item height. */
        height?: number | "auto" | "fill";
        /** Item appearance. */
        appearance?: IStyles;
        /** Item hover style. */
        hover?: IStyles;
        /** Item tap style. */
        tap?: IStyles;
        /** Item disabled style. */
        disabled?: IStyles;
        /** Item selected style. */
        selected?: IStyles;
        /** Item animations. */
        animations?: {
            /** Item is shown. */
            show?: IStyles;
            /** Item is hidden. */
            hide?: IStyles;
            /** Item is selected. */
            select?: IStyles;
            /** Item is deselected. */
            deselect?: IStyles;
            /** Item is disabled. */
            disable?: IStyles;
            /** Item is enabled. */
            enable?: IStyles;
        };
    }
    export type TItem<Views = void> = (pItem: Item<Views>) => void;
    class Item<Views = void> {
        /**
         * Contains the function which is invoked when the item is shown.
         * @event
         */
        onShow: TItem<Views> | undefined;
        /**
         * Contains the function which is invoked when the item is hidden.
         * @event
         */
        onHide: TItem<Views> | undefined;
        /**
         * Contains the function which is invoked when the item is enabled.
         * @event
         */
        onEnable: TItem<Views> | undefined;
        /**
         * Contains the function which is invoked when the item is disabled.
         * @event
         */
        onDisable: TItem<Views> | undefined;
        /**
         * Contains the function which is invoked when the item is selected.
         * @event
         */
        onSelect: TItem<Views> | undefined;
        /**
         * Contains the function which is invoked when the item is deselected.
         * @event
         */
        onDeselect: TItem<Views> | undefined;
        /**
         * Contains the function which is invoked when the item is deleted.
         * @event
         */
        onDelete: TItem<Views> | undefined;
        /**
         * Contains the function event which is invoked when the item is destroyed.
         * @event
         */
        onDestroy: TItem<Views> | undefined;
        /**
         * Constructs a new item.
         * @param pStyle Specifies the item style.
         * @param sId Specifies the item identifier.
         * @param bTappable Specifies if the item is tappable.
         */
        constructor(pStyle?: IItemStyle, sId?: string, bTappable?: boolean);
        /** Retrieves the item style. */
        get style(): IItemStyle;
        /** Retrieves a reference to the toolbar. */
        get toolbar(): Toolbar<Views> | undefined;
        /** Retrieves the view of the toolbar. */
        get view(): Views | undefined;
        /** Retrieves a reference to the element. */
        get element(): Element | undefined;
        /** Returns the element type for the item. */
        get type(): string;
        /** Retrieves the identifier string of the item. */
        get id(): string;
        /** Sets the item identifier string. */
        set id(sId: string);
        /** Retrieves if the item is visible. */
        get isVisible(): boolean;
        /** Specifies if the item is visible. */
        set isVisible(bVisible: boolean);
        /** Retrieves if the item is disabled. */
        get isDisabled(): boolean;
        /** Specifies if the item is disabled. */
        set isDisabled(bDisabled: boolean);
        /** Retrieves if the item is selected. */
        get isSelected(): boolean;
        /** Specifies if the item is selected. */
        set isSelected(bSelected: boolean);
        /** Retrieves if the item is tappable. */
        get isTappable(): boolean;
        /** Retrieves the tap controller for the item. */
        get tap(): Tap | undefined;
        /** Retrieves if the item is excluded from the current view. */
        get isExcluded(): boolean;
        /**
         * Invoked when the user moves the mouse in the item.
         * @event
         */
        protected onMouseEnter(): void;
        /**
         * Invoked when the user moves the mouse out of the item.
         * @event
         */
        protected onMouseLeave(): void;
        /**
         * Invoked when the user taps the item.
         * @event
         */
        protected onTap(): void;
        /**
         * Invoked when the user starts tapping the item.
         * @event
         */
        protected onTapStart(): void;
        /**
         * Invoked when the user ends tapping the item.
         * @event
         */
        protected onTapEnd(): void;
        /**
         * Invoked when the visibility of an item changes.
         * @event
         */
        protected onVisibilityChange(): void;
        /**
         * Invoked when the state of an item changes.
         * @event
         */
        protected onStateChange(): void;
        /**
         * Invoked when the selected state of an item changes.
         * @event
         */
        protected onSelectChange(): void;
        /**
         * Invoked when the view of an item changes.
         * @param pView Specifies the view.
         * @return Should return `true` if the view change requires a toolbar update.
         * @event
         */
        protected onViewChange(pView: Views | undefined): boolean;
        /** Updates the item and the parent toolbar. */
        protected update(): void;
        /**
         * Chainable function which sets the visibility of the item.
         * @param bVisible Specifies if the item is visible.
         * @return Returns a reference to the item.
         */
        visible(bVisible: boolean): this;
        /**
         * Shows the item.
         * @return Returns a reference to the item.
         */
        show(): this;
        /**
         * Hides the item.
         * @return Returns a reference to the item.
         */
        hide(): this;
        /**
         * Chainable function which sets the state of the item.
         * @param bDisabled Specifies if the item is disabled.
         * @return Returns a reference to the item.
         */
        disabled(bDisabled: boolean): this;
        /**
         * Enables the item.
         * @return Returns a reference to the item.
         */
        enable(): this;
        /**
         * Disables the item.
         * @return Returns a reference to the item.
         */
        disable(): this;
        /**
         * Chainable function which sets the selected state of the item.
         * @param bSelected Specifies if the item is selected.
         * @return Returns a reference to the item.
         */
        selected(bSelected: boolean): this;
        /**
         * Selects the item.
         * @return Returns a reference to the item.
         */
        select(): this;
        /**
         * Deselects the item.
         * @return Returns a reference to the item.
         */
        deselect(): this;
        /**
         * Include an item in certain views.
         * @param pViews Specifies the views that include this item.
         * @return Returns a reference to the item.
         */
        includeInViews(...pViews: Views[]): this;
        /**
         * Exclude an item from certain views.
         * @param pViews Specifies the views that exclude this item.
         * @return Returns a reference to the item.
         */
        excludeInViews(...pViews: Views[]): this;
        /**
         * Draws the item.
         * @param pToolbar Reference to the toolbar.
         * @param pElement Reference to the element to draw on.
         * @event
         */
        onDraw(pToolbar: Toolbar<Views>, pElement: Element): void;
        /**
         * Deletes an item. An animation can be used to hide the item. Use `Destroy`
         * if you want to remove the item immediately.
         */
        delete(): void;
        /** Destroys the item. */
        destroy(): void;
    }
    /** Describes the toolbar style. */
    export interface IToolbarStyle {
        /** Toolbar appearance. */
        appearance?: IStyles;
        /** Specifies the toolbar orientation. */
        orientation?: TOrientation;
        /** Styles for the toolbar hover state. */
        hover?: IStyles;
        /** Specifies the spacing for the toolbar. */
        spacing?: Spacing;
        /** Specifies if the toolbar is scrollable. */
        scrollable?: boolean;
        /** Specifies if the scrollbars should blink (disabled by default). */
        blink?: boolean;
        /**
         * Specifies if the scrollbars operate in passive mode. Interaction with
         * the scrollbars is not possible. They are just a visual indication.
         */
        passive?: boolean;
        /** Specifies scrollbar styles if scrolling is allowed. */
        scrollbars?: IScrollbarsStyle;
        /** Specifies the styles for the optional scroll indicators. */
        indicators?: {
            /** Scroll left/up indicator. */
            begin: {
                /** Scroll left/up indicator appearance. */
                appearance: IStyles;
                /** A pointing device hovers the indicator. */
                hover?: IStyles;
                /** The toolbar is crawling left/up. */
                crawl?: IStyles;
            };
            /** Scroll right/down indicator. */
            end: {
                /** Scroll right/down indicator appearance. */
                appearance: IStyles;
                /** A pointing device hovers the indicator. */
                hover?: IStyles;
                /** The toolbar is crawling right/down. */
                crawl?: IStyles;
            };
        };
    }
    /** Describes the toolbar properties. */
    export interface IToolbarProperties<Views = void> {
        /**
         * Specifies the stylesheet to write the toolbar styles to. If omitted
         * the default application global stylesheet will be used.
         */
        stylesheet?: Stylesheet;
        /** Specifies the toolbar style. */
        style?: IToolbarStyle;
        /** Specifies the parent layer or element for the toolbar. */
        parent?: Layer | Element;
        /** Specifies items for the left region of the toolbar. */
        left?: Item<Views>[];
        /** Specifies items for the right region of the toolbar. */
        right?: Item<Views>[];
        /** Specifies items for the top region of the toolbar. */
        top?: Item<Views>[];
        /** Specifies items for the bottom region of the toolbar. */
        bottom?: Item<Views>[];
        /** Specifies the initial view for the toolbar. */
        view?: Views;
        /**
         * Invoked when the toolbar is ready.
         * @event
         */
        onReady?: (pToolbar: Toolbar<Views>) => void;
        /**
         * Invoked when the toolbar is resized.
         * @event
         */
        onResize?: (nWidth: number, nHeight: number, pToolbar: Toolbar<Views>) => void;
        /**
         * Invoked when a toolbar item is tapped.
         * @event
         */
        onTap?: (pItem: Item<Views>) => void;
        /**
         * Invoked when the visibility of a toolbar item is changed.
         * @event
         */
        onVisibility?: (pItem: Item<Views>) => void;
        /**
         * Invoked when the state of a toolbar item is changed.
         * @event
         */
        onState?: (pItem: Item<Views>) => void;
        /**
         * Invoked when the selected state of a toolbar item is changed.
         * @event
         */
        onSelect?: (pItem: Item<Views>) => void;
        /**
         * Invoked when the toolbar is destroyed.
         * @event
         */
        onDestroy?: (pToolbar: Toolbar<Views>) => void;
    }
    /** Specifies the orientations type literals. */
    export type TOrientation = "horizontal" | "vertical";
    /** Specifies the regions type literals. */
    export type TRegion = "left" | "top" | "right" | "bottom";
    /** Implements the toolbar. */
    export class Toolbar<Views = void> {
        /** Contains the default stylesheet. */
        static stylesheet: Stylesheet;
        /** Contains the default style. */
        static style: IToolbarStyle | undefined;

        /** Toolbar hook dispatcher. */
        readonly dispatcher: Hooks<"OnViewChange">;
        /**
         * Contains the function which is invoked when the toolbar is ready.
         * @event
         */
        onReady: ((pToolbar: Toolbar<Views>) => void) | undefined;
        /**
         * Contains the function which is invoked when the toolbar is resized.
         * @event
         */
        onResize: ((nWidth: number, nHeight: number, pToolbar: Toolbar<Views>) => void) | undefined;
        /**
         * Contains the function which is invoked when a item is tapped.
         * @event
         */
        onTap: TItem<Views> | undefined;
        /**
         * Contains the function which is invoked when the visibility of a toolbar item
         * is changed.
         * @event
         */
        onVisibility: TItem<Views> | undefined;
        /**
         * Contains the function which is invoked when the state of a toolbar item is
         * changed.
         * @event
         */
        onState: TItem<Views> | undefined;
        /**
         * Contains the function which is invoked when the selected state of a toolbar
         * item is changed.
         * @event
         */
        onSelect: TItem<Views> | undefined;
        /**
         * Contains the function which is invoked when the toolbar is destroyed.
         * @event
         */
        onDestroy: ((pToolbar: Toolbar<Views>) => void) | undefined;
        /**
         * Creates a new toolbar.
         * @param pPropertiesList Specifies the toolbar properties. Multiple
         * properties objects can be supplied. They will be combined to a single
         * immutable properties object.
         */
        static create<Views>(...pPropertiesList: IToolbarProperties<Views>[]): Toolbar<Views>;
        /**
         * Constructs a new toolbar.
         * @param pPropertiesList Specifies the toolbar properties. Multiple
         * properties objects can be supplied. They will be combined to a single
         * immutable properties object.
         */
        constructor(...pPropertiesList: IToolbarProperties<Views>[]);
        /** Retrieves a reference to the stylesheet. */
        get stylesheet(): Stylesheet;
        /** Retrieves a reference to the layer. */
        get layer(): Layer | undefined;
        /** Retrieves the toolbar orientation. */
        get orientation(): TOrientation;
        /** Retrieves a reference to the scroll controller. */
        get scroll(): Scroll | Scrollbars | undefined;
        /** Retrieves the current view of the toolbar. */
        get view(): Views | undefined;
        /** Sets the current view for the toolbar. */
        set view(pView: Views | undefined);

        /**
         * Push an item to the hash table.
         * @param pItem Reference to the item.
         */
        push<T extends Item<Views>>(pItem: T): T;
        /**
         * Pop an item from the hash table.
         * @param pItem Reference to the item.
         */
        pop(pItem: Item<Views>): void;
        /**
         * Retrieves an item from the hash table.
         * @param sId Specifies the item identifier.
         */
        get<T extends Item<Views>>(sId: string): T | undefined;
        /**
         * Invoked when an item is tapped.
         * @param pItem Reference to the item.
         * @event
         */
        onItemTap(pItem: Item<Views>): void;
        /**
         * Invoked when the visibility of an item changes.
         * @param pItem Reference to the item.
         * @event
         */
        onItemVisibilityChange(pItem: Item<Views>): void;
        /**
         * Invoked when the state of an item changes.
         * @param pItem Reference to the item.
         * @event
         */
        onItemStateChange(pItem: Item<Views>): void;
        /**
         * Invoked when the selected state of an item changes.
         * @param pItem Reference to the item.
         * @event
         */
        onItemSelectChange(pItem: Item<Views>): void;
        /**
         * Adds a new item to the end of the specified toolbar region.
         * @param pItem Reference to the item.
         * @param sRegion Specifies the region.
         * @return Returns a reference to the item.
         */
        add<T extends Item<Views>>(pItem: T, sRegion?: TRegion): T;
        /**
         * Inserts a new item to beginning of the specified toolbar region.
         * @param pItem Reference to the item.
         * @param sRegion Specifies the region.
         * @return Returns a reference to the item.
         */
        insert<T extends Item<Views>>(pItem: T, sRegion?: TRegion): T;
        /**
         * Inserts a new item before or after another item on the toolbar.
         * @param pItem Reference to the item to insert.
         * @param pExistingItem Specifies the item to use as reference point.
         * @param sWhere Specifies if the new item is inserted before or after the
         * other item.
         * @return Returns a reference to the item.
         */
        insertAtItem<T extends Item<Views>>(pItem: T, pExistingItem: Item<Views>, sWhere?: "before" | "after"): T;
        /**
         * Adds a new item to the left region of a horizontal toolbar.
         * @param pItem Reference to the item.
         * @return Returns a reference to the item.
         */
        addToLeft<T extends Item<Views>>(pItem: T): T;
        /**
         * Adds a new item to the right region of a horizontal toolbar.
         * @param pItem Reference to the item.
         * @return Returns a reference to the item.
         */
        addToRight<T extends Item<Views>>(pItem: T): T;
        /**
         * Adds a new item to the top region of a vertical toolbar.
         * @param pItem Reference to the item.
         * @return Returns a reference to the item.
         */
        addToTop<T extends Item<Views>>(pItem: T): T;
        /**
         * Adds a new item to the bottom region of a vertical toolbar.
         * @param pItem Reference to the item.
         * @return Returns a reference to the item.
         */
        addToBottom<T extends Item<Views>>(pItem: T): T;
        /**
         * Deletes the supplied item from the toolbar.
         * @param pItem Specifies the item to remove.
         */
        delete(pItem: Item<Views>): void;
        /** Updates the toolbar. */
        update(): void;
        /**
         * Changes the current view of the toolbar.
         * @param pView Specifies the view.
         */
        changeView(pView: Views): void;
        /** Destroys the toolbar. */
        destroy(): void;
    }
    export class ToolbarComponent<Views = void> extends LayerComponent {
        /**
         * Constructs a new toolbar component.
         * @param pProperties Specifies the toolbar properties.
         * @param pConfiguration Specifies the layer configuration.
         */
        constructor(pProperties: IToolbarProperties<Views>, pConfiguration?: LayerConfiguration);
        /** Retrieves a reference to the toolbar. */
        get toolbar(): Toolbar<Views>;
        /** Renders the component. */
        protected onRender(): void;
    }
    export type TTap<Views = void> = (pStatic: Static<Views>) => void;
    class Static<Views = void> extends Item<Views> {
        /**
         * Constructs a new static item.
         * @param pStyle Specifies the item style.
         * @param sLabel Specifies the label.
         * @param sId Specifies the identifier of the item.
         * @param fnTapped Specifies an optional tap callback function or a boolean
         * value which specifies if the static item is tappable.
         */
        constructor(pStyle: IItemStyle, sLabel?: string, sId?: string, fnTapped?: TTap<Views> | boolean);
        /** Retrieves the item label. */
        get label(): string;
        /** Sets the item label. */
        set label(sLabel: string);
        /**
         * Invoked when the user taps the item.
         * @event
         */
        protected onTap(): void;
        /**
         * Draws the item.
         * @param pToolbar Reference to the toolbar.
         * @param pElement Reference to the element to draw on.
         * @param pLabel Reference to the label.
         * @event
         */
        onDraw(pToolbar: Toolbar<Views>, pElement: Element, pLabel?: Element): void;
    }
    class Button<Views = void> extends Static<Views> {
        /**
         * Constructs a new button.
         * @param pStyle Specifies the button style.
         * @param sLabel Specifies the button label.
         * @param sId Specifies the identifier of the button.
         * @param fnTapped Specifies the tap callback function.
         */
        constructor(pStyle: IItemStyle, sLabel?: string, sId?: string, fnTapped?: (pButton: Button<Views>) => void);
    }
    interface IMenuStyle extends IItemStyle {
        /** Item opened style. */
        opened?: IStyles;
        /** Specifies the menu style. */
        menu?: IMenuBaseStyle;
    }
    class Menu<Views = void> extends Static<Views> {
        /**
         * Constructs a new menu.
         * @param pStyle Specifies the button style.
         * @param sLabel Specifies the button label.
         * @param pOptions Specifies an array with menu options.
         * @param sPosition Specifies the menu position.
         * @param sId Specifies the identifier of the button.
         */
        constructor(
            pStyle: IMenuStyle,
            sLabel: string | undefined,
            pOptions: MenuOption[] | ((pMenu: Menu<Views>) => MenuOption[]),
            sPosition?: TMenuPosition,
            sId?: string
        );
        /**
         * Invoked when the user taps the item.
         * @event
         */
        protected onTap(): void;
        /**
         * Invoked when the visibility of an item changes.
         * @event
         */
        protected onVisibilityChange(): void;
        /**
         * Invoked when the state of an item changes.
         * @event
         */
        protected onStateChange(): void;
        /**
         * Draws the item.
         * @param pToolbar Reference to the toolbar.
         * @param pElement Reference to the element to draw on.
         * @param pLabel Reference to the label.
         * @event
         */
        onDraw(pToolbar: Toolbar<Views>, pElement: Element, pLabel?: Element): void;
        /** Destroys the item. */
        destroy(): void;
    }
    class Link<Views = void> extends Static<Views> {
        /**
         * Constructs a new HTML hyperlink.
         * @param pStyle Specifies the button style.
         * @param sURL Specifies the URL.
         * @param sLabel Specifies the button label.
         * @param sTarget Specifies the target of the link.
         * @param sId Specifies the identifier of the button.
         * @param fnTapped Specifies the tap callback function.
         */
        constructor(
            pStyle: IItemStyle,
            sURL: string,
            sLabel?: string,
            sTarget?: "self" | "blank",
            sId?: string,
            fnTapped?: (pLink: Link<Views>) => void
        );
        /** Returns the element type for the item. */
        get type(): string;
        /** Retrieves the URL of the link. */
        get URL(): string;
        /** Sets the URL of the link. */
        set URL(sURL: string);
        /** Retrieves the target of the link. */
        get target(): "self" | "blank";
        /** Sets the target of the link. */
        set target(sTarget: "self" | "blank");
        /**
         * Invoked when the state of a link changes.
         * @event
         */
        protected onStateChange(): void;
        /**
         * Draws the item.
         * @param pToolbar Reference to the toolbar.
         * @param pElement Reference to the element to draw on.
         * @param pLabel Reference to the label.
         * @event
         */
        onDraw(pToolbar: Toolbar<Views>, pElement: Element, pLabel?: Element): void;
    }

    export {
        Button as ToolbarButton,
        IItemStyle as IToolbarItemStyle,
        IMenuStyle as IToolbarMenuStyle,
        Item as ToolbarItem,
        Link as ToolbarLink,
        Menu as ToolbarMenu,
        Static as ToolbarStatic,
    };
}

declare module "tripetto/module/ui-workspace" {
    import { Stack } from "tripetto/module/functional";
    import { Grid, GridCluster, GridClusters, GridNode, GridNodes, GridRenderer, IGridResource } from "tripetto/module/grid";
    import { IHookPayload } from "tripetto/module/hookup";
    import { ISerialize } from "tripetto/module/serializer";

    export interface ITileReference {
        type: string;
        data: string;
    }
    export interface ITile extends IGridResource {
        readonly ref?: ITileReference & ISerialize;
    }
    export interface ICollection extends IGridResource {
        readonly name: string;
        readonly tiles: ITile[];
    }
    export interface ICollectionConstructor {
        new (pCollections: Collections): Collection;
    }
    export interface ITileConstructor {
        new (pTiles: Tiles): Tile;
    }
    //@ts-ignore
    export class Tiles extends GridNodes<Tile> {
        constructor(pTileConstructor: ITileConstructor, pCollection: Collection, nDimensions: number);

        /**
         * Inserts a new tile.
         * @return Returns the new tile.
         */
        append(): Tile;
        /**
         * Inserts a new tile.
         * @return Returns the new tile.
         */
        insert(): Tile;
        /**
         * Inserts a new tile before the supplied tile.
         * @param pTile Specifies the reference tile.
         * @return Returns the new tile.
         */
        insertBefore(pTile: Tile): Tile;
        /**
         * Inserts a new tile after the supplied tile.
         * @param pTile Specifies the reference tile.
         * @return Returns the new tile.
         */
        insertAfter(pTile: Tile): Tile;
        /**
         * Deserializes the supplied serialized tiles to the tile dispatcher.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @param pTiles Specifies the tiles.
         * @return Returns a reference to the instance.
         */
        deserialize(pAfterwards: Stack, ...pTiles: ITile[]): this;
    }
    export interface IWorkspace extends IGridResource {
        /** Contains the workspace name. */
        readonly name: string;
        /** Contains the collections. */
        readonly collections: ICollection[];
    }
    //@ts-ignore
    export class Workspace extends Grid<Collections, Tile, "OnChange" | "OnRename"> {
        /**
         * Contains the `onChanged` event.
         * @event
         */
        onChanged?: (pWorkspace: Workspace) => void;
        /**
         * Creates a new workspace instance.
         * @param pRenderer Reference to a renderer for the workspace.
         */
        //@ts-ignore
        static create(pRenderer: GridRenderer<Workspace, Workspace | Collection | Tile>): Workspace;
        /**
         * Creates a new workspace instance.
         * @param pRenderer Reference to a renderer for the workspace.
         */
        //@ts-ignore
        constructor(pRenderer: GridRenderer<Workspace, Workspace | Collection | Tile>);
        /** Retrieves the collections. */
        get collections(): Collections;
        /** Retrieves the name. */
        get name(): string;
        /** Sets the name. */
        set name(sName: string);
        /** Marks the workspace as changed. */
        detectChange(): this;
        /**
         * Generates a serialized representation of a workspace.
         * @return Returns a reference to the serialized workspace.
         */
        serialize(): IWorkspace;
        /**
         * Deserializes to a workspace.
         * @param pWorkspace Specifies the serialized workspace.
         * @return Returns a reference to the instance.
         */
        deserialize(pWorkspace: IWorkspace): this;
        /**
         * Loads a workspace.
         * @param pWorkspace Specifies the workspace data to load.
         * @return Returns a reference to the instance.
         */
        load(pWorkspace: IWorkspace): this;
        /** Saves a workspace. */
        save(): IWorkspace;
        /** Destroys the workspace. */
        destroy(): void;
    }
    export class Tile extends GridNode {
        /**
         * Creates a new tile instance.
         * @param pTiles Reference to the tiles dispatcher.
         */
        constructor(pTiles: Tiles, pRef?: ITileReference);
        /** Retrieves the parent tiles dispatcher. */
        //@ts-ignore
        get parent(): Tiles | undefined;
        /** Retrieves the workspace. */
        get workspace(): Workspace | undefined;
        /** Retrieves the collection. */
        get collection(): Collection | undefined;
        /** Retrieves the tile reference. */
        get ref(): ITileReference | undefined;
        /** Sets the tile reference. */
        set ref(pRef: ITileReference | undefined);
        /**
         * Generates a serialized representation of a tile.
         * @return Returns a reference to the serialized tile.
         */
        serialize(): ITile;
        /**
         * Deserializes to a tile.
         * @param pTile Contains the serialized tile.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @return Returns a reference to the instance.
         */
        deserialize(pTile: ITile, pAfterwards: Stack): this;
        /** Deletes this tile from the workspace. */
        delete(): this;
    }
    //@ts-ignore
    export class Collections extends GridClusters<Collection, Tile> {
        constructor(pCollectionConstructor: ICollectionConstructor, pWorkspace: Workspace);
        /**
         * Appends a new collection.
         * @return Returns the new collection.
         */
        append(): Collection;
        /**
         * Inserts a new collection.
         * @return Returns the new collection.
         */
        insert(): Collection;
        /**
         * Inserts a new collection before the supplied collection.
         * @param pCollection Specifies the reference collection.
         * @return Returns the new collection.
         */
        insertBefore(pCollection: Collection): Collection;
        /**
         * Inserts a new collection after the supplied collection.
         * @param pCollection Specifies the reference collection.
         * @return Returns the new branch.
         */
        insertAfter(pCollection: Collection): Collection;
        /**
         * Deserializes the supplied serialized collections to the collection dispatcher.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @param pCollections Specifies the collections.
         * @return Returns a reference to the instance.
         */
        deserialize(pAfterwards: Stack, ...pCollections: ICollection[]): this;
    }
    //@ts-ignore
    export class Collection extends GridCluster<Tiles, Tile> {
        /**
         * Creates a new collection instance.
         * @param pCollections Reference to the collections dispatcher.
         */
        constructor(pCollections: Collections);
        /** Retrieves the parent collections dispatcher. */
        //@ts-ignore
        get parent(): Collections | undefined;
        /** Retrieves the workspace. */
        get workspace(): Workspace | undefined;
        /** Retrieves the tiles. */
        get tiles(): Tiles;
        /** Retrieves the collection name. */
        get name(): string;
        /** Sets the collection name. */
        set name(sName: string);
        /**
         * Invokes when a tile is pushed or popped.
         * @event
         */
        onPushOrPop(): void;
        /**
         * Generates a serialized representation of a collection.
         * @return Returns a reference to the serialized collection.
         */
        serialize(): ICollection;
        /**
         * Deserializes to a collection.
         * @param pCollection Contains the serialized collection.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @return Returns a reference to the instance.
         */
        deserialize(pCollection: ICollection, pAfterwards: Stack): this;
        /** Deletes this collection from the workspace. */
        delete(): this;
    }
    export interface IWorkspaceChangeEvent extends IHookPayload<"OnChange"> {
        workspace: Workspace;
    }
    export interface IWorkspaceRenameEvent extends IHookPayload<"OnRename"> {
        workspace: Workspace;
    }
}

declare module "tripetto/module/ui-zoombar" {
    import { IStyles, Stylesheet } from "tripetto/module/dom";
    import { Scroll } from "tripetto/module/touch-scroll";
    import { Layer, LayerComponent, LayerConfiguration } from "tripetto/module/ui-layers";

    /** Describes the zoombar style. */
    export interface IZoombarStyle {
        /** Width of the zoombar. */
        width: number;
        /** Height of the zoombar. */
        height: number;
        /** Zoombar appearance. */
        appearance?: IStyles;
        /** Hover appearance. */
        hover?: IStyles;
        /** Crawl appearance. */
        crawl?: IStyles;
        /** Track styles. */
        track: {
            /** Width of the track. */
            width: number;
            /** Height of the track. */
            height: number;
            /** Upper track styles. */
            upper?: {
                /** Track offset. */
                offset?: number;
                /** Track appeareance. */
                appearance: IStyles;
                /** Track crawling. */
                crawl?: IStyles;
            };
            /** Lower track styles. */
            lower?: {
                /** Track offset. */
                offset?: number;
                /** Track appeareance. */
                appearance: IStyles;
                /** Track crawling. */
                crawl?: IStyles;
            };
        };
        /** Thumb styles. */
        thumb: {
            /** Width of the thumb. */
            width: number;
            /** Height of the thumb. */
            height: number;
            /** Thumb appeareance. */
            appearance: IStyles;
            /** Thumb hover. */
            hover?: IStyles;
            /** Thumb grabbed. */
            grab?: IStyles;
            /** Thumb button styles. */
            buttons?: {
                /** Max button. */
                max?: {
                    /** Button appearance. */
                    appearance: IStyles;
                    /** Button hover. */
                    hover?: IStyles;
                    /** Button disabled. */
                    disabled?: IStyles;
                };
                /** Fit button. */
                fit?: {
                    /** Button appearance. */
                    appearance: IStyles;
                    /** Button hover. */
                    hover?: IStyles;
                    /** Button disabled. */
                    disabled?: IStyles;
                };
                /** Min buttons. */
                min?: {
                    /** Button appearance. */
                    appearance: IStyles;
                    /** Button hover. */
                    hover?: IStyles;
                    /** Button disabled. */
                    disabled?: IStyles;
                };
            };
        };
        /** Zoom-in button. */
        zoomIn?: {
            /** Button width. */
            width: number;
            /** Button height. */
            height: number;
            /** Button appearance. */
            appearance: IStyles;
            /** Button hover. */
            hover?: IStyles;
            /** Button crawl. */
            crawl?: IStyles;
            /** Button disabled. */
            disabled?: IStyles;
        };
        /** Zoom-out button. */
        zoomOut?: {
            /** Button width. */
            width: number;
            /** Button height. */
            height: number;
            /** Button appearance. */
            appearance: IStyles;
            /** Button hover. */
            hover?: IStyles;
            /** Button crawl. */
            crawl?: IStyles;
            /** Button disabled. */
            disabled?: IStyles;
        };
    }
    /** Describes the zoombar properties. */
    export interface IZoombarProperties {
        /**
         * Specifies the stylesheet to write the zoombar styles to. If omitted
         * the default application global stylesheet will be used.
         */
        stylesheet?: Stylesheet;
        /** Specifies the zoombar styles. */
        style?: IZoombarStyle;
        /** Specifies the layer for the zoombar. */
        layer?: Layer;
        /** Specifies the scroll target. */
        target?: Scroll | Layer;
    }
    export class Zoombar {
        /** Contains the default stylesheet. */
        static stylesheet: Stylesheet;
        /** Contains the default style. */
        static style: IZoombarStyle | undefined;

        /**
         * Creates a new zoombar.
         * @param pPropertiesList Specifies the zoombar properties. Multiple
         * properties objects can be supplied. They will be combined to a single
         * immutable properties object.
         */
        static create(...pPropertiesList: IZoombarProperties[]): Zoombar;
        /**
         * Constructs a new zoombar.
         * @param pPropertiesList Specifies the zoombar properties. Multiple
         * properties objects can be supplied. They will be combined to a single
         * immutable properties object.
         */
        constructor(...pPropertiesList: IZoombarProperties[]);

        /** Retrieves a reference to the stylesheet. */
        get stylesheet(): Stylesheet;
        /** Retrieves if the zoombar is visible. */
        get isVisible(): boolean;
        /** Specifies if the zoombar is visible. */
        set isVisible(bVisible: boolean);
    }
    export class ZoombarComponent extends LayerComponent {
        /**
         * Constructs a new zoombar component.
         * @param pProperties Specifies the zoombar properties.
         * @param pConfiguration Specifies the layer configuration.
         */
        constructor(pProperties: IZoombarProperties, pConfiguration?: LayerConfiguration);
        /** Retrieves a reference to the zoombar. */
        get zoombar(): Zoombar;
        /** Renders the component. */
        protected onRender(): void;
    }
}

declare module "tripetto/module/contracts" {
    import { TTranslation } from "tripetto/module/l10n";

    export interface IContract {
        /** Specifies contract information. */
        readonly contract?: {
            /** Specifies the contract name. */
            readonly name: string;
            /** Specifies the contract version. */
            readonly version: string;
        };
    }
    export interface IL10nContract {
        /** Specifies the language identifiers of the available translations. */
        readonly availableTranslations?: string[];
        /** Specifies if the locale can be changed. */
        readonly customLocale?: boolean;
        /** Contains the translatable strings table. */
        readonly strings?: (string | [string, string])[];
    }
    export interface IL10n {
        /** Specifies the language of the translation to use. */
        readonly language?: "auto" | string;
        /** Specifies the locale to use. */
        readonly locale?: "auto" | string;
        /** Contains the translations. */
        readonly translations?: TTranslation | TTranslation[];
    }
    export type TL10nContract = IContract & IL10nContract;
    export type TL10n = IContract & IL10n;
    export interface IStyleDependencyObserver {
        /** Specifies the property to observe. */
        readonly property: string;
        /** Specifies the value that should be evaluated. */
        readonly value?: string | string[] | number | number[] | boolean | boolean[];
        /** Specifies if the value is defined or not. */
        readonly defined?: boolean;
    }
    export interface IStyleDependency {
        /** Specifies the observers for the dependency (multiple observers are processed using logical AND). */
        readonly observe: IStyleDependencyObserver | IStyleDependencyObserver[];
        /** Specifies the action to perform. */
        readonly action: "enable" | "disable" | "show" | "hide";
    }
    export type TStyleTiers = "standard" | "premium";
    export interface IStyleStatic<Type extends string> {
        /** Specifies the style element type. */
        readonly type: Type;
        /** Specifies the variable and its value where the state of this style element depends on. */
        readonly dependency?: IStyleDependency;
        /** Specifies a label for the style element. */
        readonly label?: string;
        /** Specifies a optional description for the style element. */
        readonly description?: string;
        /** Specifies the required tier for using this style element. */
        readonly tier?: TStyleTiers;
    }
    export interface IStyleElement<Type extends string, T> extends IStyleStatic<Type> {
        /** Specifies the name of the style element property. */
        readonly name: string;
        /** Specifies the default value for the style element. */
        readonly default?: T;
    }
    export type TStyleDropdownOption =
        | {
              /** Label for the option. */
              readonly label: string;
              /** Value for the option. */
              readonly value: string | number;
          }
        | {
              /** Specifies an option group. */
              readonly optGroup: string;
          }
        | {
              /** Specifies a custom option that allows the user to specify a custom value. */
              readonly custom: string;
          };
    export interface IStyleDropdown extends IStyleElement<"dropdown", string> {
        /** Specifies the dropdown options. */
        readonly options: TStyleDropdownOption[];
        /** Specifies the width of the field. */
        readonly width?: number | "auto" | "full";
    }
    export interface IStyleRadiobutton {
        /** Label for the button. */
        readonly label: string;
        /** Value for the button. */
        readonly value: string | number;
        /** Optional description for the button. */
        readonly description?: string;
    }
    export interface IStyleRadiobuttons extends IStyleElement<"radiobuttons", string> {
        /** Specifies the radio buttons. */
        readonly buttons: IStyleRadiobutton[];
    }
    export interface IStyleNumber extends IStyleElement<"number", number> {
        /** Prefix for the number. */
        readonly prefix?: string;
        /** Suffix for the number. */
        readonly suffix?: string;
        /** Specifies the minimum value. */
        readonly min?: number;
        /** Specifies the maximum value. */
        readonly max?: number;
        /** Specifies the width of the field. */
        readonly width?: number;
    }
    export type TStyleElement =
        | IStyleStatic<"static">
        | IStyleElement<"label" | "color" | "image", string>
        | IStyleElement<"checkbox", boolean>
        | IStyleNumber
        | IStyleDropdown
        | IStyleRadiobuttons;
    export interface IStyleCollectionBase {
        /** Specifies a description for the collection of style elements. */
        readonly description?: string;
        /** Specifies a property name for the styles. */
        readonly name?: string;
        /** Specifies the variable and its value where the state of this collection depends on. */
        readonly dependency?: IStyleDependency;
        /** Specifies the required tier for using this collection. */
        readonly tier?: TStyleTiers;
        /** Specifies the style elements in this collection. */
        readonly elements: TStyleElement[];
    }
    export interface IStyleCollection extends IStyleCollectionBase {
        /** Specifies the title for the collection of style elements. */
        readonly title?: string;
        /** Specifies if the collection contains optional customizations (a checkbox will be shown before the collection to enable or disable it). */
        readonly optional?: false;
        /** Specifies if the collection contains additional options (they will be displayed at the end). */
        readonly additional?: boolean;
    }
    export interface IStyleCollectionOptional extends IStyleCollectionBase {
        /** Specifies the title for the collection of style elements. */
        readonly title: string;
        /** Specifies if the collection contains optional customizations (a checkbox will be shown before the collection to enable or disable it). */
        readonly optional: true;
        /** An optional collection cannot be additional. */
        readonly additional?: undefined | false;
    }
    export interface IStylesContract {
        /** Specifies the styles. */
        readonly styles: (IStyleCollection | IStyleCollectionOptional)[];
    }
    export interface IStylesProperties {
        readonly [property: string]: string | number | boolean | IStylesProperties | undefined;
    }
    export type TStylesContract = IContract & IStylesContract;
    export type TStyles = IContract & IStylesProperties;
    export interface IThemeContract<T extends TStyles = TStyles> {
        /** Contains the theme name. */
        readonly name: string;
        /** Contains an optional description for the theme. */
        readonly description?: string;
        /** Contains a preview image (as URL or base64 encoded data). */
        readonly preview?: string;
        /** Contains the styles for the theme. */
        readonly styles: T;
    }
    export type TThemesContract<T extends TStyles = TStyles> = IThemeContract<T>[];
}

declare module "tripetto/module/map" {
    import { Stack, TAny } from "tripetto/module/functional";
    import {
        Grid,
        GridBranch,
        GridBranches,
        GridCluster,
        GridClusters,
        GridNode,
        GridNodes,
        GridRenderer,
        IGridResource,
    } from "tripetto/module/grid";
    import { IHookPayload } from "tripetto/module/hookup";
    import { MarkdownParser } from "tripetto/module/markdown";
    import { IItemChangeEvent, IItemPopEvent } from "tripetto/module/matrix";
    import { IPoint } from "tripetto/module/metrics";
    import { ISerialize } from "tripetto/module/serializer";
    import { ISlot, Slot, Slots } from "tripetto/module/slots";

    export interface INodeBlock extends ISerialize {
        /** Contains the node block type. */
        readonly type: string;
        /** Contains the version of the block. */
        readonly version: string;
    }
    export interface INodeBlockCache {
        readonly timestamp: number;
        readonly block: INodeBlock;
        readonly slots?: ISlot[];
    }
    export interface INode extends IGridResource {
        readonly block?: INodeBlock;
        readonly slots?: ISlot[];
        readonly disabled?: boolean;
        readonly name?: string;
        readonly nameVisible?: boolean;
        readonly placeholder?: string;
        readonly description?: string;
        readonly explanation?: string;
    }
    export abstract class NodeBlock {
        /** Contains the type identifier of the block. */
        static readonly identifier: string;
        /** Contains the version of the block. */
        static readonly version: string;
        /** Contains the kind of block. */
        static readonly kind: "headless" | "ui";
        /** Contains the label localizer. */
        static readonly _: () => string;
        /** Verifies if the block has the specified flag. */
        static readonly flag: (sFlag: string) => boolean;
        /** Retrieves the localized label (name) of the block. */
        static get label(): string;
        /** Specifies an exchange handler for block migrations. */
        static exchanger?: (pSrc: {}[], pDest: {}) => void;

        /** Retrieves the block type. */
        readonly type: INodeBlockType<NodeBlock>;
        /** Specifies if markdown is supported. */
        readonly allowMarkdown?: boolean;
        /**
         * Creates a new block instance or verifies an existing instance.
         * @param pBlock Reference to the block constructor or instance.
         * @param pNode Reference to the parent node.
         * @param sType Specifies the block style.
         * @return Returns the block instance.
         */
        static create<Block extends NodeBlock>(
            pBlock: INodeBlockType<Block> | Block | string,
            pNode: Node,
            sType?: "existing" | "proxy"
        ): Block | undefined;
        /**
         * Constructs a new block.
         * @param pNode Reference to the node.
         */
        constructor(pNode: Node);
        /** Retrieves the identifier of the node. */
        get id(): string;
        /** Retrieves the parent map. */
        get map(): Map | undefined;
        /** Retrieves a reference to the node. */
        get node(): Node;
        /** Retrieves a reference to the slots. */
        get slots(): Slots;
        /** Retrieves the label of the node block. */
        get label(): string;
        /** Retrieves if the block is initialized. */
        get isInitialized(): boolean;

        /**
         * The block is assigned to a node.
         * @param pPrevious Reference to the previous block that was attached to the node.
         * @return Returns an initialization function.
         */
        assignedToNode(pPrevious?: NodeBlock): () => void;
        /** The block is unassigned from the node. */
        unassignedFromNode(): INodeBlockCache;
        /** Marks a change in the block. */
        detectChange(): void;
        /**
         * Rerenders the block.
         * @param bShouldRerender Specifies if the node should rerender.
         * @event
         */
        rerender(bShouldRerender?: boolean): void;
        /**
         * Serializes a block.
         * @param pProperties Specifies additional serialized properties.
         * @return Returns a reference to the serialized block.
         */
        serialize(pProperties?: ISerialize): INodeBlock;
        /**
         * Deserializes to a block instance.
         * @param pBlock Contains the serialized block.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @return Returns a reference to the instance.
         */
        deserialize(pBlock: INodeBlock, pAfterwards?: Stack): this;
        /** Destroys the block. */
        destroy(): void;
    }
    export type TNodeEvents = "OnBlockAssign" | "OnBlockUnassign" | "OnBlockChange" | "OnTypeChange" | "OnRename" | "OnDisable";
    export interface INodeBlockAssignEvent extends IHookPayload<"OnBlockAssign"> {
        readonly node: Node;
        readonly block: NodeBlock;
    }
    export interface INodeBlockUnassignEvent extends IHookPayload<"OnBlockUnassign"> {
        readonly node: Node;
        readonly block: NodeBlock;
    }
    export interface INodeBlockChangeEvent extends IHookPayload<"OnBlockChange"> {
        readonly node: Node;
        readonly block: NodeBlock | undefined;
    }
    export interface INodeConstructor {
        new (pNodes: Nodes): Node;
    }
    //@ts-ignore
    export class Nodes extends GridNodes<Node> {
        constructor(pNodeConstructor: INodeConstructor, pCluster: Cluster);
        /** Retrieves the cluster of the node dispatcher. */
        get cluster(): Cluster;
        /**
         * Invoked when the nodes dimensions are changed.
         * @event
         */
        onDimensions(): void;
        /**
         * Inserts a new node.
         * @return Returns the new node.
         */
        append(): Node;
        /**
         * Inserts a new node.
         * @return Returns the new node.
         */
        insert(): Node;
        /**
         * Inserts a new node before the supplied node.
         * @param pNode Specifies the reference node.
         * @return Returns the new node.
         */
        insertBefore(pNode: Node): Node;
        /**
         * Inserts a new node after the supplied node.
         * @param pNode Specifies the reference node.
         * @return Returns the new node.
         */
        insertAfter(pNode: Node): Node;
        /**
         * Deserializes the supplied serialized nodes to the node dispatcher.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @param pNodes Specifies the nodes.
         * @return Returns a reference to the instance.
         */
        deserialize(pAfterwards: Stack, ...pNodes: INode[]): this;
    }
    export interface IVariable {
        /** Contains the variable key. */
        key: string;
        /** Human readable label for the variable. */
        label: string;
        /** Reference to the node. */
        node: Node;
        /** Reference to the block. */
        block?: NodeBlock;
        /** Reference to the slot. */
        slot?: Slot;
        /** Reference to the slot pipe. */
        pipe?: Slot;
    }
    /**
     * Tries to find the variable for the given key.
     * @param pRef Reference to a node, condition or block.
     * @param sKey Specifies the key of the variable.
     */
    export const lookupVariable: (pRef: Node | NodeBlock | Condition | ConditionBlock, sKey: string) => IVariable | undefined;
    /**
     * Parses markdown variables.
     * @param pMap Specifies the source map.
     * @return Returns a parser object.
     */
    export const parseVariables: (pRef: Node | NodeBlock | Condition | ConditionBlock) => {
        numberOfChars: number;
        parser: (sKey: string) =>
            | {
                  shift: number;
                  markdown: string;
                  value: IVariable | undefined;
              }
            | undefined;
    };
    export type TNodeType = "undefined" | "static" | "note" | "error" | TNodeBlock;
    export class Node extends GridNode<TNodeEvents> {
        /** Contains the explanation for the node. */
        explanation?: string;
        /** Retrieves the identifier of the node. */
        get id(): string;
        /** Retrieves the parent node dispatcher. */
        //@ts-ignore
        get parent(): Nodes | undefined;
        /** Retrieves the predecessor of the node. */
        get predecessor(): Node | undefined;
        /** Retrieves the successor of the node. */
        get successor(): Node | undefined;
        /** Retrieves the parent map. */
        get map(): Map | undefined;
        /** Retrieves the parent cluster. */
        get cluster(): Cluster | undefined;
        /** Retrieves the block for the node. */
        get block(): NodeBlock | undefined;
        /** Retrieves the block type identifier as a string. */
        get blockTypeIdentifier(): string;
        /** Retrieves if the node has a block. */
        get hasBlock(): boolean;
        /** Retrieves if the block is invalid. */
        get isBlockInvalid(): boolean;
        /** Retrieves if the node is disabled. */
        get disabled(): boolean | undefined;
        /** Specifies if the node is disabled. */
        set disabled(bDisabled: boolean | undefined);
        /** Retrieves the node type. */
        get type(): TNodeType;
        /** Retrieves the name of the node. */
        get name(): string | undefined;
        /** Sets the name of the node. */
        set name(sName: string | undefined);
        /** Retrieves if the name of the node is visible. */
        get nameVisible(): boolean | undefined;
        /** Specifies if the name of the node should be visible. */
        set nameVisible(bNameVisible: boolean | undefined);
        /** Retrieves the description of the node. */
        get placeholder(): string | undefined;
        /** Sets the description of the node. */
        set placeholder(sPlaceholder: string | undefined);
        /** Returns the raw label including markdown formatting. */
        get labelRaw(): string;
        /** Retrieves a markdown instance for the label. */
        get labelMarkdown(): MarkdownParser<IVariable>;
        /**
         * Retrieves the node label in plain text (all markdown is removed). This
         * label is the name of the node or the placeholder if no name is specified.
         */
        get label(): string;
        /** Retrieves the alias for the node. */
        get alias(): string | undefined;
        /** Retrieves the description of the node. */
        get description(): string | undefined;
        /** Sets the description of the node. */
        set description(sDescription: string | undefined);

        /**
         * Fired when a node is changed.
         * @param pEvent Contains the event payload.
         * @event
         */
        protected onChange(pEvent: IItemChangeEvent<this>): void;
        /**
         * Calculates the dimensions of the node (only necessary when we are not moving).
         * @param nWidth Specifies the width of the node.
         * @param nHeight Specifies the height of the node.
         * @return Returns `true` if the node is resized.
         */
        resize(nWidth?: number, nHeight?: number): boolean;
        /**
         * Calculates the z-index of the resource.
         * @return Returns `true` if the z-index is changed.
         */
        zIndex(): boolean;
        /**
         * Assigns a block to the node.
         * @param pBlock Specifies the block type.
         * @return Returns a reference to the block instance.
         */
        assignBlock<T extends NodeBlock>(pBlock: INodeBlockType<T> | T): T | undefined;
        /**
         * Unassigns a block.
         * @return Returns the previously assigned block or `undefined` if there
         * was none.
         */
        unassignBlock(): NodeBlock | undefined;
        /**
         * Generates a serialized representation of a node.
         * @return Returns a reference to the serialized data.
         */
        serialize(): INode;
        /**
         * Deserializes to a node.
         * @param pNode Contains the serialized node.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @return Returns a reference to the instance.
         */
        deserialize(pNode: INode, pAfterwards?: Stack): this;
        /**
         * Retrieves a slot.
         * @param sReference Specifies the slot reference or identifier.
         * @param pBlockTypeIdentifier Specifies the block type identifier of the node.
         * @return Returns a reference to the slot.
         */
        slot<S extends Slot>(sReference: string, pBlockTypeIdentifier?: string | TNodeBlock): S | undefined;
        /** Refreshes the node (this will rerender the node and emit an `OnRename` event). */
        refresh(): this;
        /** Indicate the node is refreshed (this will emit an `OnRename` event). */
        refreshed(): this;
        /**
         * Inserts a new node before this node.
         * @return Returns a reference to the new node.
         */
        insertBefore(): Node;
        /**
         * Inserts a new node after this node.
         * @return Returns a reference to the new node.
         */
        insertAfter(): Node;
        /** Enables the node. */
        enable(): this;
        /** Disables the node. */
        disable(): this;
        /**
         * Duplicates the node.
         * @param pDest Specifies the destination node. If omitted a new node is inserted after this node.
         * @return Returns a reference to the new node.
         */
        duplicate(pDest?: Node): Node;
        /** Deletes this node from the map. */
        delete(): this;
        /** Destroys the node. */
        destroy(): void;
    }
    export interface INodeBlockType<T extends NodeBlock> {
        /** Contains the block type identifier. */
        readonly identifier: string;
        /** Contains the block label (name). */
        readonly label: string;
        /** Contains the block version. */
        readonly version: string;
        /** Contains the kind of block. */
        readonly kind: "headless" | "ui";
        /** Contains the label localizer. */
        readonly _: () => string;
        /** Verifies if the block has the specified flag. */
        readonly flag: (sFlag: string) => boolean;
        /**
         * Creates a new block instance.
         * @param pNode Reference to the node.
         */
        new (pNode: Node): T;
    }
    export type TNodeBlock<T extends NodeBlock = NodeBlock> = INodeBlockType<T>;
    export type TConditionBlockContext = "*" | "cluster" | "branch" | "node" | TNodeBlock;
    export interface IConditionBlockType<T extends ConditionBlock> {
        /** Contains the block type identifier. */
        readonly identifier: string;
        /** Contains the block label (name). */
        readonly label: string;
        /** Contains the block version. */
        readonly version: string;
        /** Contains the block context. */
        readonly context: TConditionBlockContext;
        /** Contains the label localizer. */
        readonly _: () => string;
        /** Verifies if the block has the specified flag. */
        readonly flag: (sFlag: string) => boolean;
        /**
         * Creates a new block instance.
         * @param pCondition Reference to the condition.
         */
        new (pCondition: Condition): T;
    }
    export type TConditionBlock<T extends ConditionBlock = ConditionBlock> = IConditionBlockType<T>;
    export interface IConditionBlock extends ISerialize {
        /** Contains the condition block type. */
        readonly type: string;
        /** Contains the version of the block. */
        readonly version: string;
        /** Contains the id of an attached branch. */
        readonly branch?: string;
        /** Contains the id of an attached cluster. */
        readonly cluster?: string;
        /** Contains the id of an attached node. */
        readonly node?: string;
        /** Contains the id of an attached slot. */
        readonly slot?: string;
    }
    class Labels {
        constructor(pBlock: ConditionBlock);
        /** Retrieves the branch label (if the branch is present). */
        get branch(): string;
        /** Retrieves the branch label (if the branch is present and an orphan). */
        get branchOrphan(): string;
        /** Retrieves the cluster label (if the cluster is present). */
        get cluster(): string;
        /** Retrieves the cluster label (if the cluster is present and an orphan). */
        get clusterOrphan(): string;
        /** Retrieves the node label (if the node is present). */
        get node(): string;
        /** Retrieves the node label (if the node is present and an orphan). */
        get nodeOrphan(): string;
    }
    export abstract class ConditionBlock {
        /** Contains the type identifier of the block. */
        static readonly identifier: string;
        /** Contains the version of the block. */
        static readonly version: string;
        /** Contains the block context. */
        static readonly context: TConditionBlockContext;
        /** Contains the label localizer. */
        static readonly _: () => string;
        /** Verifies if the block has the specified flag. */
        static readonly flag: (sFlag: string) => boolean;
        /** Retrieves the localized label (name) of the block. */
        static get label(): string;

        /** Retrieves the block type. */
        readonly type: IConditionBlockType<ConditionBlock>;
        /** Specifies if markdown is supported. */
        readonly allowMarkdown?: boolean;
        /** Contains the branch. */
        branch?: Branch;
        /** Contains the cluster. */
        cluster?: Cluster;
        /** Contains the node. */
        node?: Node;
        /** Contains the slot. */
        slot?: Slot;
        /**
         * Creates a new block instance or verifies an existing instance.
         * @param pBlock Reference to the block constructor or instance.
         * @param pCondition Reference to the parent condition.
         * @param bInitialize Specifies if the block should be initialized.
         * @return Returns the block instance.
         */
        static create<Block extends ConditionBlock>(
            pBlock: IConditionBlockType<Block> | Block | string,
            pCondition: Condition,
            bInitialize: boolean
        ): Block | undefined;
        /**
         * Constructs a new block.
         * @param pCondition Reference to the condition.
         */
        constructor(pCondition: Condition);
        /** Retrieves the identifier of the condition. */
        get id(): string;
        /** Retrieves the parent map. */
        get map(): Map | undefined;
        /** Retrieves a reference to the condition. */
        get condition(): Condition;
        /** Retrieves if the block is initialized. */
        get isInitialized(): boolean;
        /** Retrieves the name of the condition block. */
        get name(): string;
        /**
         * Retrieves the labels collection. This is a collection of labels that give
         * context to the condition.
         */
        get labels(): Labels;
        /**
         * Retrieves the label of the condition block. This label contains additional
         * context for the condition. For example, if a node is attached to the
         * condition, the label will contain the name of that node. Otherwise, the
         * name of the parent cluster will be used or the name of the parent branch.
         */
        get label(): string;

        /**
         * Block is assigned to a condition.
         * @param pPrevious Reference to the previous block that was attaced to the condition.
         * @return Returns an initialization function.
         */
        assignedToCondition(pPrevious?: ConditionBlock): () => void;
        /** Block is unassigned from the condition. */
        unassignedFromCondition(): IConditionBlock;
        /**
         * Invoked when the block of a node is unassigned. This may affect the
         * condition. This function verifies if the condition should be deleted.
         * @param pBlock Reference to the node block that is unassigned.
         * @return Should return `true` if the condition should be deleted.
         */
        shouldBeDeleted(pBlock: NodeBlock): boolean;
        /** Marks a change in the block. */
        detectChange(): void;
        /**
         * Rerenders the block.
         * @param bShouldRerender Specifies if the condition should rerender.
         * @event
         */
        rerender(bShouldRerender?: boolean): void;
        /**
         * Serializes a block.
         * @param pProperties Specifies additional serialized properties.
         * @return Returns a reference to the serialized block.
         */
        serialize(pProperties?: ISerialize): IConditionBlock;
        /**
         * Deserializes to a block instance.
         * @param pBlock Contains the serialized block.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @return Returns a reference to the instance.
         */
        deserialize(pBlock: IConditionBlock, pAfterwards?: Stack): this;
        /**
         * Deletes the condition.
         * @param sProperty Optional property causing the removal.
         */
        delete(sProperty?: keyof this): void;
        /** Destroys the block. */
        destroy(): void;
    }
    export interface ICondition extends IGridResource {
        readonly block?: IConditionBlock;
        readonly disabled?: boolean;
    }
    export interface IConditionConstructor {
        new (pConditions: Conditions): Condition;
    }
    //@ts-ignore
    export class Conditions extends GridNodes<Condition> {
        constructor(pConditionConstructor: IConditionConstructor, pBranch: Branch);
        /** Retrieves the branch of the condition dispatcher. */
        get branch(): Branch;
        /**
         * Invoked when the conditions dimensions are changed.
         * @event
         */
        onDimensions(): void;
        /**
         * Appends a new condition.
         * @return Returns the new condition.
         */
        append(): Condition;
        /**
         * Inserts a new condition.
         * @return Returns the new condition.
         */
        insert(): Condition;
        /**
         * Inserts a new condition before the supplied condition.
         * @param pCondition Specifies the reference condition.
         * @return Returns the new condition.
         */
        insertBefore(pCondition: Condition): Condition;
        /**
         * Inserts a new condition after the supplied condition.
         * @param pCondition Specifies the reference condition.
         * @return Returns the new condition.
         */
        insertAfter(pCondition: Condition): Condition;
        /**
         * Deserializes the supplied serialized conditions to the condition dispatcher.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @param pConditions Specifies the conditions.
         * @return Returns a reference to the instance.
         */
        deserialize(pAfterwards: Stack, ...pConditions: ICondition[]): this;
    }
    export type TConditionEvents = "OnBlockAssign" | "OnBlockUnassign" | "OnBlockChange" | "OnRename" | "OnDisable";
    export interface IConditionBlockAssignEvent extends IHookPayload<"OnBlockAssign"> {
        readonly condition: Condition;
        readonly block: ConditionBlock;
    }
    export interface IConditionBlockUnassignEvent extends IHookPayload<"OnBlockUnassign"> {
        readonly condition: Condition;
        readonly block: ConditionBlock;
    }
    export interface IConditionBlockChangeEvent extends IHookPayload<"OnBlockChange"> {
        readonly condition: Condition;
        readonly block: ConditionBlock | undefined;
    }
    export class Condition extends GridNode<TConditionEvents> {
        /**
         * Creates a new condition instance.
         * @param pConditions Reference to the condition dispatcher.
         */
        constructor(pConditions: Conditions);
        /** Retrieves the identifier of the condition. */
        get id(): string;
        /** Retrieves the parent condition dispatcher. */
        //@ts-ignore
        get parent(): Conditions | undefined;
        /** Retrieves the predecessor of the condition. */
        get predecessor(): Condition | undefined;
        /** Retrieves the successor of the condition. */
        get successor(): Condition | undefined;
        /** Retrieves the parent map. */
        get map(): Map | undefined;
        /** Retrieves the collection. */
        get branch(): Branch | undefined;
        /** Retrieves the parent cluster of the condition. */
        get cluster(): Cluster | undefined;
        /** Retrieves the block for the condition. */
        get block(): ConditionBlock | undefined;
        /** Retrieves the block type identifier as a string. */
        get blockTypeIdentifier(): string;
        /** Retrieves if the condition has a block. */
        get hasBlock(): boolean;
        /** Retrieves if the block is invalid. */
        get isBlockInvalid(): boolean;
        /** Retrieves if the condition is disabled. */
        get disabled(): boolean | undefined;
        /** Specifies if the condition is disabled. */
        set disabled(bDisabled: boolean | undefined);
        /** Retrieves the condition type. */
        get type(): IConditionBlockType<ConditionBlock> | undefined;
        /** Retrieves the condition name. */
        get name(): string;
        /** Retrieves a markdown instance for the name. */
        get nameMarkdown(): MarkdownParser<IVariable>;
        /** Retrieves the condition label. */
        get label(): string;

        /**
         * Fired when the condition is changed.
         * @param pEvent Specifies the event payload.
         * @event
         */
        protected onChange(pEvent: IItemChangeEvent<this>): void;
        /**
         * Fired when a condition move occurs.
         * @param nMoveX Specifies the horizontal movement.
         * @param nMoveY Specifies the vertical movement.
         * @param pOffset Specifies the offset of the touch point.
         * @event
         */
        onMove(nMoveX: number, nMoveY: number, pOffset: IPoint): void;
        /**
         * Invokes the condition layout renderer.
         * @param sType Specifies the rerender type. Can be one of the following values:
         * - `refresh`: Refresh the rendering;
         * - `update`: Update the rendering.
         */
        rerender(sType: "refresh" | "update"): void;
        /**
         * Assigns a block to the condition.
         * @param pBlock Specifies the block type.
         * @return Returns a reference to the block instance.
         */
        assignBlock<T extends ConditionBlock>(pBlock: IConditionBlockType<T> | T): T | undefined;
        /**
         * Unassigns a block.
         * @return Returns the previously assigned block or `undefined` if there
         * was none.
         */
        unassignBlock(): ConditionBlock | undefined;
        /**
         * Generates a serialized representation of a condition.
         * @return Returns a reference to the serialized condition.
         */
        serialize(): ICondition;
        /**
         * Deserializes to a condition.
         * @param pCondition Contains the serialized condition.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @return Returns a reference to the instance.
         */
        deserialize(pCondition: ICondition, pAfterwards?: Stack): this;
        /** Refreshes the condition (this will rerender the condition and emit an `OnRename` event). */
        refresh(): this;
        /** Indicate the condition is refreshed (this will emit an `OnRename` event). */
        refreshed(): this;
        /**
         * Inserts a new condition before this condition.
         * @return Returns a reference to the new condition.
         */
        insertBefore(): Condition;
        /**
         * Inserts a new condition after this condition.
         * @return Returns a reference to the new condition.
         */
        insertAfter(): Condition;
        /** Enables the condition. */
        enable(): this;
        /** Disables the condition. */
        disable(): this;
        /**
         * Duplicates the condition.
         * @param pDest Specifies the destination condition. If omitted a new condition is inserted after this condition.
         * @return Returns a reference to the new condition.
         */
        duplicate(pDest?: Condition): Condition;
        /** Deletes this condition from the map. */
        delete(): this;
        /** Destroys the condition. */
        destroy(): void;
    }
    export type TBranchCulling = "first" | "each" | "all" | "none";
    export interface IEpilogue {
        readonly title?: string;
        readonly description?: string;
        readonly image?: string;
        readonly video?: string;
        readonly button?: {
            readonly label: string;
            readonly url: string;
            readonly target: "self" | "blank";
        };
        readonly repeatable?: boolean;
        readonly redirectUrl?: string;
    }
    export interface IBranch extends IGridResource {
        readonly conditions?: ICondition[];
        readonly clusters?: ICluster[];
        readonly culling?: TBranchCulling;
        readonly jump?: string;
        readonly name?: string;
        readonly epilogue?: IEpilogue & ISerialize;
    }
    export interface ICluster extends IGridResource {
        readonly branches?: IBranch[];
        readonly nodes?: INode[];
        readonly name?: string;
    }
    export interface IBuilder {
        /** Builder name. */
        readonly name: string;
        /** Builder version. */
        readonly version: string;
    }
    export interface IPrologue {
        readonly title?: string;
        readonly description?: string;
        readonly image?: string;
        readonly video?: string;
        readonly button?: string;
    }
    export interface IDefinition {
        /** Contains the clusters. */
        readonly clusters: ICluster[];
        /** Contains information about the builder. */
        readonly builder: IBuilder;
        /** Contains the map name. */
        readonly name?: string;
        /** Contains the map description. */
        readonly description?: string;
        /** Contains the map keywords. */
        readonly keywords?: string[];
        /** Contains the language of the map. */
        readonly language?: string;
        /** Contains the prologue for the map. */
        readonly prologue?: IPrologue;
        /** Contains the epilogue for the map. */
        readonly epilogue?: IEpilogue;
        /**
         * Contains the preface for the map.
         * @deprecated
         */
        readonly preface?: IPrologue;
    }
    //@ts-ignore
    export class Map extends Grid<Clusters, Node, "OnRename" | "OnChange" | "OnError"> {
        /** Contains the name of the map. */
        name?: string;
        /** Contains the description of the map. */
        description?: string;
        /** Contains the language of the map. */
        language?: string;
        /** Contains the keywords for the map. */
        keywords?: string[];
        /** Contains the prologue for the map. */
        prologue?: IPrologue;
        /** Contains the epilogue for the map. */
        epilogue?: IEpilogue;
        /**
         * Creates a new map instance.
         * @param pRenderer Reference to a renderer for the map.
         * @param pBuilder Specifies information about the builder.
         */
        //@ts-ignore
        static create(pRenderer?: GridRenderer<Map>, pBuilder?: IBuilder): Map;
        /**
         * Creates a new map instance.
         * @param pRenderer Reference to a renderer for the map.
         * @param pBuilder Specifies information about the builder.
         */
        //@ts-ignore
        constructor(pRenderer?: GridRenderer<Map>, pBuilder?: IBuilder);
        /** Retrieves information about the builder application. */
        get application(): IBuilder;
        /** Retrieves information about the builder used to create the definition. */
        get builder(): IBuilder;
        /** Retrieves the clusters. */
        get clusters(): Clusters;
        /** Retrieves the map definition. */
        get definition(): IDefinition;
        /** Sets the map definition. */
        set definition(pMap: IDefinition);
        /** Retrieves if the map is deserializing. */
        get isDeserializing(): boolean;
        /**
         * Generates a serialized representation of a map.
         * @return Returns a reference to the serialized map.
         */
        serialize(): IDefinition & IGridResource;
        /**
         * Deserializes to a map.
         * @param pMap Specifies the serialized map.
         * @return Returns a reference to the instance.
         */
        deserialize(pMap: IDefinition & IGridResource): this;
        /**
         * Iterate recursively through each item in the map.
         * @param fnEach Callback which is invoked for each item.
         * @param sType Specifies the type of items.
         * @param pExclude Specifies an item that needs to be excluded from the iteration.
         * @param bFromExcluded Specifies if the iteration should start when the excluded item is found.
         * @return Returns `true` if the iteration was interrupted.
         */
        forEach(
            fnItem:
                | ((pItem: Branch, nDepth: number) => boolean | void)
                | ((pItem: Cluster, nDepth: number) => boolean | void)
                | ((pItem: Node, nDepth: number) => boolean | void)
                | ((pItem: Condition, nDepth: number) => boolean | void)
                | ((pItem: Branch | Cluster | Node | Condition, nDepth: number) => boolean | void),
            sType?: "branches" | "clusters" | "nodes" | "conditions" | "all",
            pExclude?: Branch | Cluster | Node | Condition,
            bFromExcluded?: boolean
        ): boolean;
        /** Complete reload of the map. */
        reload(): void;
        /** Resets the map. */
        reset(): void;
        /** Destroys the map. */
        destroy(): void;
    }
    export interface IClusterConstructor {
        new (pClusters: Clusters): Cluster;
    }
    //@ts-ignore
    export class Clusters extends GridClusters<Cluster, Node> {
        constructor(pClusterConstructor: IClusterConstructor, pBranch: Branch);
        /** Retrieves the map of the cluster dispatcher. */
        get map(): Map | undefined;
        /** Retrieves the branch of the cluster dispatcher. */
        get branch(): Branch | Map | undefined;
        /**
         * Invoked when the cluster dimensions are changed.
         * @event
         */
        onDimensions(): void;
        /**
         * Appends a new cluster.
         * @return Returns the new cluster.
         */
        append(): Cluster;
        /**
         * Inserts a new cluster.
         * @return Returns the new cluster.
         */
        insert(): Cluster;
        /**
         * Inserts a new cluster before the supplied cluster.
         * @param pCluster Specifies the reference cluster.
         * @return Returns the new cluster.
         */
        insertBefore(pCluster: Cluster): Cluster;
        /**
         * Inserts a new cluster after the supplied cluster.
         * @param pCluster Specifies the reference cluster.
         * @return Returns the new branch.
         */
        insertAfter(pCluster: Cluster): Cluster;
        /**
         * Deserializes the supplied serialized clusters to the cluster dispatcher.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @param pClusters Specifies the clusters.
         * @return Returns a reference to the instance.
         */
        deserialize(pAfterwards: Stack, ...pClusters: ICluster[]): this;
    }
    export interface IBranchConstructor {
        new (pBranches: Branches): Branch;
    }
    //@ts-ignore
    export class Branches extends GridBranches<Branch, Node> {
        constructor(pBranchConstructor: IBranchConstructor, pCluster: Cluster);
        /** Retrieves the cluster of the branch dispatcher. */
        get cluster(): Cluster;
        /**
         * Invoked when the branch dimensions are changed. This aligns the space
         * occupied by the conditions.
         * @event
         */
        onDimensions(): void;
        /**
         * Appends a new branch.
         * @return Returns the new branch.
         */
        append(): Branch;
        /**
         * Inserts a new branch.
         * @return Returns the new branch.
         */
        insert(): Branch;
        /**
         * Inserts a new branch before the supplied branch.
         * @param pBranch Specifies the reference branch.
         * @return Returns the new branch.
         */
        insertBefore(pBranch: Branch): Branch;
        /**
         * Inserts a new branch after the supplied branch.
         * @param pBranch Specifies the reference branch.
         * @return Returns the new branch.
         */
        insertAfter(pBranch: Branch): Branch;
        /**
         * Deserializes the supplied serialized branches to the branch dispatcher.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @param pBranches Specifies the branches.
         * @return Returns a reference to the instance.
         */
        deserialize(pAfterwards: Stack, ...pBranches: (IBranch & IGridResource)[]): this;
    }
    export type TClusterEvents = "OnRename";
    //@ts-ignore
    export class Cluster extends GridCluster<Nodes, Node, TClusterEvents> {
        /**
         * Creates a new cluster instance.
         * @param pClusters Reference to the cluster dispatcher.
         */
        constructor(pClusters: Clusters);
        /** Retrieves the identifier of the cluster. */
        get id(): string;
        /** Retrieves the parent cluster dispatcher. */
        //@ts-ignore
        get parent(): Clusters | undefined;
        /** Retrieves the predecessor of the cluster. */
        get predecessor(): Cluster | undefined;
        /** Retrieves the successor of the cluster. */
        get successor(): Cluster | undefined;
        /** Retrieves the parent map. */
        get map(): Map | undefined;
        /** Retrieves the parent branch. */
        get branch(): Branch | undefined;
        /** Retrieves the nodes. */
        get nodes(): Nodes;
        /** Retrieves the branches. */
        get branches(): Branches;
        /** Retrieves if the cluster has branches. */
        get hasBranches(): boolean;
        /** Retrieves the name of the cluster. */
        get name(): string | undefined;
        /** Sets the name of the cluster. */
        set name(sName: string | undefined);
        /** Retrieves a list of branches which have a jump to this cluster. */
        get jumps(): Branch[];
        /**
         * Fired when a cluster is changed.
         * @param pEvent Contains the event payload.
         * @event
         */
        protected onChange(pEvent: IItemChangeEvent<this>): void;
        /**
         * Invoked when the cluster is popped.
         * @param pEvent Contains the event payload.
         * @event
         */
        onPop(pEvent: IItemPopEvent<this>): void;
        /**
         * Iterate through each node and branch of the cluster.
         * @param fnResource Specifies the resource function.
         * @param fnResource.pResource Contains a reference to the resource.
         * @return Returns `true` if the iteration is stopped (break).
         */
        forEachDescendant(fnResource: (pResource: Node | Branch) => boolean | void): boolean;
        /**
         * Calculates the dimensions of the cluster (only necessary when we are not moving).
         * @param nWidth Specifies the width of the cluster.
         * @param nHeight Specifies the height of the cluster.
         * @return Returns `true` if the cluster is resized.
         */
        resize(nWidth?: number, nHeight?: number): boolean;
        /**
         * Generates a serialized representation of a cluster.
         * @return Returns a reference to the serialized cluster.
         */
        serialize(): ICluster;
        /**
         * Deserializes to a cluster.
         * @param pCluster Contains the serialized cluster.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @return Returns a reference to the instance.
         */
        deserialize(pCluster: ICluster, pAfterwards?: Stack): this;
        /**
         * Inserts a new cluster before this cluster.
         * @return Returns a reference to the new cluster.
         */
        insertBefore(): Cluster;
        /**
         * Inserts a new cluster after this cluster.
         * @return Returns a reference to the new cluster.
         */
        insertAfter(): Cluster;
        /**
         * Duplicates the cluster.
         * @param pDest Specifies the destination cluster. If omitted a new cluster is inserted after this cluster.
         * @return Returns a reference to the new cluster.
         */
        duplicate(pDest?: Cluster): Cluster;
        /** Deletes this cluster from the map. */
        delete(): this;
        /** Resets the cluster. */
        reset(): void;
        /** Destroys a cluster. */
        destroy(): void;
    }
    export type TBranchTerminator = "continuous" | "abort" | "jump" | "epilogue";
    export type TBranchEvents = "OnCullingChange" | "OnTerminatorChange" | "OnRename";
    export interface IBranchCullingEvent extends IHookPayload<"OnCullingChange"> {
        readonly branch: Branch;
        readonly culling: TBranchCulling;
    }
    export interface IBranchTerminatorEvent extends IHookPayload<"OnTerminatorChange"> {
        readonly branch: Branch;
        readonly terminator: TBranchTerminator;
        readonly jump: Cluster | undefined;
        readonly epilogue: IEpilogue | undefined;
    }
    //@ts-ignore
    export class Branch extends GridBranch<Clusters, Node, TBranchEvents> {
        /** Retrieves if the branch is validating. */
        static get isValidating(): boolean;
        /**
         * Creates a new branch instance.
         * @param pBranches Reference to the branch dispatcher.
         */
        constructor(pBranches: Branches);
        /** Retrieves the identifier of the branch. */
        get id(): string;
        /** Retrieves the parent branch dispatcher. */
        //@ts-ignore
        get parent(): Branches | undefined;
        /** Retrieves the predecessor of the branch. */
        get predecessor(): Branch | undefined;
        /** Retrieves the successor of the branch. */
        get successor(): Branch | undefined;
        /** Retrieves the parent map. */
        get map(): Map | undefined;
        /** Retrieves the parent cluster. */
        get cluster(): Cluster | undefined;
        /** Retrieves the conditions. */
        get conditions(): Conditions;
        /** Retrieves the clusters. */
        get clusters(): Clusters;
        /** Retrieves the branch spacing. */
        get spacing(): number;
        /** Retrieves the current offset for the branch. */
        get offset(): number;
        /** Sets the offset for the branch. */
        set offset(nOffset: number);
        /** Retrieves the culling mode. */
        get culling(): TBranchCulling;
        /** Sets the culling mode. */
        set culling(sCulling: TBranchCulling);
        /** Retrieves the termination mode. */
        get terminator(): TBranchTerminator;
        /** Sets the termination mode for the branch. */
        set terminator(sTerminator: TBranchTerminator);
        /** Retrieves the jump-to-cluster. */
        get jump(): Cluster | undefined;
        /** Sets the jump-to-cluster. */
        set jump(pTo: Cluster | undefined);
        /** Retrieves the jump-to-cluster. */
        get epilogue(): IEpilogue | undefined;
        /** Sets the jump-to-cluster. */
        set epilogue(pEpilogue: IEpilogue | undefined);
        /** Retrieves the name of the branch. */
        get name(): string | undefined;
        /** Sets the name of the branch. */
        set name(sName: string | undefined);
        /**
         * Fired when a branch is changed.
         * @param pEvent Contains the event payload.
         * @event
         */
        protected onChange(pEvent: IItemChangeEvent<this>): void;
        /**
         * Fired when a branch move occurs.
         * @param nMoveX Specifies the horizontal movement.
         * @param nMoveY Specifies the vertical movement.
         * @param pOffset Specifies the offset of the touch point.
         * @event
         */
        onMove(nMoveX: number, nMoveY: number, pOffset: IPoint): void;
        /**
         * Iterate through each cluster and condition of the branch.
         * @param fnResource Specifies the resource function.
         * @param fnResource.pResource Contains a reference to the resource.
         * @return Returns `true` if the iteration is stopped (break).
         */
        forEachDescendant(fnResource: (pResource: Condition | Cluster) => boolean | void): boolean;
        /**
         * Applies the spacing for the conditions.
         * @param nWidth Specifies the width of the resource.
         * @param nHeight Specifies the height of the resource.
         * @return Returns `true` if the resource is resized.
         */
        resize(nWidth?: number, nHeight?: number): boolean;
        /**
         * Generates a serialized representation of a branch.
         * @return Returns a reference to the serialized branch.
         */
        serialize(): IBranch;
        /**
         * Deserializes to a branch.
         * @param pBranch Contains the serialized data.
         * @param pAfterwards Stack with calls which are invoked after the
         * structural deserialization is done.
         * @return Returns a reference to the instance.
         */
        deserialize(pBranch: IBranch & IGridResource, pAfterwards?: Stack): this;
        /**
         * Inserts a new branch before this branch.
         * @return Returns a reference to the new branch.
         */
        insertBefore(): Branch;
        /**
         * Inserts a new branch after this branch.
         * @return Returns a reference to the new branch.
         */
        insertAfter(): Branch;
        /**
         * Duplicates the branch.
         * @param pDest Specifies the destination branch. If omitted a new branch is inserted after this branch.
         * @return Returns a reference to the new branch.
         */
        duplicate(pDest?: Branch): Branch;
        /** Deletes this branch from the map. */
        delete(): this;
        /** Resets the branch. */
        reset(): void;
        /** Destroys a branch. */
        destroy(): void;
    }
    export interface IConditionBlockDecorator {
        /** Specifies a namespace for the block */
        readonly namespace?: string;
        /** Specifies this block is a condition block. */
        readonly type: "condition";
        /** Specifies the block identifier. */
        readonly identifier: string;
        /** Specifies optional type aliases. */
        readonly alias?: string | string[];
        /** Specifies the localized block label (if you use `gettext`, return the localized string using a getter function). */
        readonly label: string;
        /**
         * Specifies the block context. Can be one of the following values:
         * - `*`: Conditions that can be used anywhere in the map;
         * - `cluster`: If the condition applies to clusters;
         * - `branch`: If the condition applies to branches;
         * - `node`: If the condition applies to nodes;
         * - A reference to a node block (the condition applies to nodes of that specific type);
         * - The type string identifier of a node block (the condition applies to nodes of that specific type).
         */
        readonly context: TConditionBlockContext | string;
        /** Specifies the version of the block in SemVer format (defaults to `0.0.0`). */
        readonly version?: string;
    }
    export interface INodeBlockDecorator {
        /** Specifies a namespace for the block */
        readonly namespace?: string;
        /** Specifies this block is a node block. */
        readonly type: "node";
        /** Specifies the type identifier. */
        readonly identifier: string;
        /** Specifies optional type aliases. */
        readonly alias?: string | string[];
        /** Specifies the localized block label (if you use `gettext`, return the localized string using a getter function). */
        readonly label: string;
        /** Specifies the version of the block in SemVer format (defaults to `0.0.0`). */
        readonly version?: string;
        /**
         * Specifies the kind of block. Can be one of the following values:
         * - `headless`: Specifies the block is headless (needs no user interface);
         * - `ui`: Specifies the block needs a user interface.
         */
        readonly kind?: "headless" | "ui";
    }
    function observe(map?: Map): void;
    /**
     * Verifies if a required property evaluates to `true`.
     * @param pTarget Reference to the target.
     * @return Returns `true` if the target has required condition.
     */
    export function isRequired<T extends NodeBlock>(pTarget: T): boolean;
    class NodeBlocksNamespace {
        /** Creates a new namespace instance. */
        constructor(sIdentifier: string);
        /** Retrieves the identifier for the namespace. */
        get identifier(): string;
        /** Retrieves a list of registered blocks. */
        get all(): TNodeBlock[];
        /** Retrieves the array of missing block types. */
        get missing(): string[];
        /** Contains the number of missed block types */
        get errors(): number;
        /**
         * Registers the supplied block.
         * @param pBlock Specifies the block.
         * @param sIdentifier Specifies the block type identifier.
         * @param pAliases Specifies type aliases for the block.
         * @param fnLabel Specifies the localized label for the block as a function.
         * @param sVersion Specifies the version of the block in SemVer format (defaults to `0.0.0`).
         * @param sKind Specifies the block kind. Can be one of the following values:
         * - `headless`: Specifies the block is headless (has no user interface);
         * - `ui`: Specifies the block implements a user interface.
         */
        register(
            pBlock: TNodeBlock,
            sIdentifier: string,
            pAliases: string[],
            fnLabel: () => string,
            sVersion: string,
            sKind: "headless" | "ui"
        ): TNodeBlock;
        /**
         * Retrieves the block constructor of the specified type identifier.
         * @param sIdentifier Specifies the block type identifier.
         * @return Returns the block constructor or `undefined` if the block
         * type is not available.
         */
        ofType<T extends TNodeBlock>(sIdentifier: string): T | undefined;
        /** Reset missing types. */
        resetMissing(): void;
    }
    class ConditionBlocksNamespace {
        /** Creates a new namespace. */
        constructor(sIdentifier: string);
        /** Retrieves the identifier for the namespace. */
        get identifier(): string;
        /** Retrieves a list of registered blocks. */
        get all(): TConditionBlock[];
        /** Retrieves the array of missing block types. */
        get missing(): string[];
        /** Contains the number of missed block types */
        get errors(): number;
        /**
         * Registers a block.
         * @param pBlock Specifies the block.
         * @param sIdentifier Specifies the block type identifier.
         * @param pAliases Specifies type aliases for the block.
         * @param fnLabel Specifies the localized label for the block as a function.
         * @param pContext Specifies the context.
         * @param sVersion Specifies the version of the block in SemVer format (defaults to `0.0.0`).
         */
        register(
            pBlock: TConditionBlock,
            sIdentifier: string,
            pAliases: string[],
            fnLabel: () => string,
            pContext: TConditionBlockContext | string,
            sVersion: string
        ): TConditionBlock;
        /**
         * Retrieves the registered blocks for the specified context.
         * @param pContext Specifies the context.
         */
        for<T extends TConditionBlock>(pContext: TConditionBlockContext | NodeBlock): T[];
        /**
         * Retrieves the block constructor with the specified type identifier.
         * @param sIdentifier Specifies the block type identifier.
         * @return Returns the block constructor or `undefined` if the block
         * type is not available.
         */
        ofType<T extends TConditionBlock>(sIdentifier: string): T | undefined;
        /** Reset missing types. */
        resetMissing(): void;
    }
    export interface INamespace {
        readonly identifier: string;
        readonly nodeBlocks: NodeBlocksNamespace;
        readonly conditionBlocks: ConditionBlocksNamespace;
    }
    export class Namespaces {
        /** Invoked when a block is registered. */
        static onRegister?: (identifier: string, block: TAny, type: "node" | "condition", version: string) => void;
        /** Retrieves the active namespace. */
        static get active(): INamespace;
        /** Retrieves a list of missing block type identifiers. */
        static get missingBlockTypes(): string[];
        /** Retrieves the total number of erroneous blocks due to missing block types. */
        static get erroneousBlocks(): number;
        /**
         * Retrieves the namespace for the specified identifier (or the active
         * namespace if the identifier is undefined).
         */
        static get(sIdentifier?: string): INamespace;
        /** Retrieves if the supplied namespace is available. */
        static isAvailable(sIdentifier: string): boolean;
        /**
         * Load an UMD namespace for the specified identifier.
         * @param sIdentifier Specifies the namespace identifier.
         * @param pContext Reference to a context to use.
         * @param sContext Specifies the UMD name of the context.
         * @param sUMD UMD code that is executed within the context.
         * @param bUnload Specifies if the namespace should unload if it is already available (default is `true`).
         * @return Returns a ref to the namespace.
         */
        static loadUMD(sIdentifier: string, pContext: {}, sContext: string, sUMD: string, bUnload?: boolean): INamespace | undefined;
        /**
         * Loads a namespace from an URL for the specified identifier.
         * @param sIdentifier Specifies the namespace identifier.
         * @param pContext Reference to a context to use.
         * @param sContext Specifies the UMD name of the context.
         * @param sPolicy Specifies the Trusted Types policy to use.
         * @param sURL Specifies the URL to load from.
         * @param fnCallback Invoked when the loading is done.
         * @param bUnload Specifies if the namespace should unload if it is already available (default is `true`).
         */
        static loadURL(
            sIdentifier: string,
            pContext: {},
            sContext: string,
            sPolicy: string,
            sURL: string,
            fnCallback?: (pNamespace?: INamespace) => void,
            bUnload?: boolean
        ): void;
        /** Unloads the specified namespace. */
        static unload(sIdentifier: string): boolean;
        /**
         * Mounts (activates) a namespace context.
         * @param sIdentifier Specifies the namespace identifier.
         */
        static mount(sIdentifier: string): INamespace;
        /** Unmounts (deactivates) the active namespace context. */
        static unmount(): void;
        /** Activates the namespace with the specified identifier. */
        static activate(sIdentifier: string): INamespace;
        /** Activates the default namespace. */
        static activateDefault(): INamespace;
        /**
         * Activate a namespace for the specified identifier (or tries to load it if it is not available).
         * @param sIdentifier Specifies the namespace identifier.
         * @param pContext Reference to a context to use.
         * @param sContext Specifies the UMD name of the context.
         * @param sUMD UMD code that is executed within the context.
         * @param bAlwaysLoad Specifies if the bundle should always load, even when there is already a
         * namespace available with the specified identifier (default is `true`).
         * @param bUnloadFirst Specifies if the namespace should unload if it is already available (default is `false`).
         * @return Returns a ref to the namespace.
         */
        static activateOrLoadUMD(
            sIdentifier: string,
            pContext: {},
            sContext: string,
            sUMD: string,
            bAlwaysLoad?: boolean,
            bUnloadFirst?: boolean
        ): INamespace | undefined;
        /**
         * Activate a namespace for the specified identifier (or tries to load it if it is not available).
         * @param sIdentifier Specifies the namespace identifier.
         * @param pContext Reference to a context to use.
         * @param sContext Specifies the UMD name of the context.
         * @param sPolicy Specifies the Trusted Types policy to use.
         * @param sURL Specifies the URL to load from.
         * @param fnCallback Invoked when the loading is done.
         * @param bAlwaysLoad Specifies if the bundle should always load, even when there is already a
         * namespace available with the specified identifier (default is `true`).
         * @param bUnloadFirst Specifies if the namespace should unload if it is already available (default is `false`).
         */
        static activateOrLoadURL(
            sIdentifier: string,
            pContext: {},
            sContext: string,
            sPolicy: string,
            sURL: string,
            fnCallback?: (pNamespace?: INamespace) => void,
            bAlwaysLoad?: boolean,
            bUnloadFirst?: boolean
        ): void;
        /** Resets all missing types. */
        static resetMissing(): void;
        /** Specifies block types to include. */
        static include(...sTypes: string[]): void;
        /** Specifies block types to exclude. */
        static exclude(...sTypes: string[]): void;
        /**
         * Retrieves if a block type is allowed.
         * @param sType Specifies the block type to check.
         * @returns Returns `true` if the block is allowed.
         */
        static isAllowed(sType: string): boolean;
        /**
         * Flags blocks.
         * @param sFlag Specifies the flag identifier.
         * @param sTypes Specifies the types to flag.
         */
        static flag(sFlag: string, ...sTypes: string[]): void;
        /**
         * Checks if a block has a flag.
         * @param sFlag Specifies the flag identifier to check.
         * @param sType Specifies the block type.
         * @returns Returns `true` if the block was flagged.
         */
        static hasFlag(sFlag: string, sType: string): boolean;
    }
    /**
     * Mounts (activates) a namespace context.
     * @param sIdentifier Specifies the namespace identifier.
     * @return Returns a ref to the namespace context.
     */
    export function mountNamespace(sIdentifier: string): INamespace;
    /** Unmounts (deactivates) the active namespace context. */
    export function unmountNamespace(): void;
    /** Marks a property that affects the name or label of a node or condition. */
    export function affects<T extends NodeBlock | ConditionBlock>(
        sTarget: "#name" | "#label"
    ): (pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor) => void;
    /** Marks a property that affects the state of the condition. */
    export function affects<T extends ConditionBlock>(
        sTarget: "#condition"
    ): (pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor) => void;
    /** Marks a property that affects the slots or the required condition of a node. */
    export function affects<T extends NodeBlock>(
        sTarget: "#slots" | "#required"
    ): (pTarget: T, sProperty: string, pDescriptor?: PropertyDescriptor) => void;
    /**
     * Marks the block assigned function that is invoked when the block is assigned
     * to a node or condition. The following arguments are passed to the function:
     * - `previous` (NodeBlock | ConditionBlock | undefined): Reference to any
     * previous block that was attached (could be undefined when there was none).
     */
    export function assigned<T extends NodeBlock | ConditionBlock>(pTarget: T, sMethod: keyof T, pDescriptor?: PropertyDescriptor): void;
    /**
     * Defines a node block.
     * @param pProperties Specifies the properties for the block.
     */
    export function block(pProperties: INodeBlockDecorator): (pBlock: TNodeBlock) => void;
    /**
     * Defines a condition block.
     * @param pProperties Specifies the properties for the block.
     */
    export function block(pProperties: IConditionBlockDecorator): (pBlock: TConditionBlock) => void;
    /**
     * Marks the block created function that is invoked when the block is created
     * (right after the instance is created and just before deserialization occurs).
     */
    export function created<T extends NodeBlock | ConditionBlock>(pTarget: T, sMethod: keyof T, pDescriptor?: PropertyDescriptor): void;
    /**
     * Include property in the definition.
     * @param sType Specifies the type of the property (`string`, `number`, `boolean` or a unique custom identifier).
     * @param sOptional Specifies if the property is `optional` or `required`. Optional properties can have `undefined` as value.
     * @param sMode Specifies the mode:
     * - `r`: Reads a property from the definition;
     * - `w`: Writes a property to the definition;
     * - `rw`: Reads and writes a property from/to the definition.
     */
    export function definition<T>(
        sType?: "string" | "number" | "boolean" | string,
        sOptional?: "optional" | "required",
        sMode?: "r" | "w" | "rw"
    ): (pTarget: T, sProperty: string, pPropertyDescriptor?: PropertyDescriptor) => void;
    /** Include property in the definition. */
    export function definition<T>(pTarget: T, sProperty: string, pPropertyDescriptor?: PropertyDescriptor): void;
    /** Retrieves the type of the specified property. */
    export function getDefinitionType<T>(
        pTarget: T,
        sProperty: string
    ):
        | {
              readonly type: "string" | "number" | "boolean" | string;
              readonly optional: boolean;
              readonly isPrimitive: boolean;
          }
        | undefined;
    /**
     * Marks the block destroyed function that is invoked when the block is
     * destroyed.
     */
    export function destroyed<T extends NodeBlock | ConditionBlock>(pTarget: T, sMethod: keyof T, pDescriptor?: PropertyDescriptor): void;
    /**
     * Marks a function that is invoked when the supplied property is detached.
     * If your function returns a callback, the removal of the condition
     * block is canceled and the callback is invoked after all pending a-sync
     * operations on the map are done. Example: You have a condition block that is
     * attached to a node using the `Node` property of the condition block. When
     * the attached node is deleted, it is detached from the condition block and the
     * function is invoked.
     * @param sProperty Specifies the property to monitor.
     */
    export function detached<T extends ConditionBlock>(
        sProperty: keyof T
    ): (pTarget: T, sFunction: string, pDescriptor?: PropertyDescriptor) => void;
    /**
     * Marks the slot function where you define the slots for a block. The following
     * arguments are passed to the function:
     * - `slots` (SlotsOrchestrator): Reference to the `Slots` orchestrator.
     */
    export function slots<T extends NodeBlock>(pTarget: T, sMethod: keyof T, pDescriptor?: PropertyDescriptor): void;
    /**
     * Marks the block unassigned function that is invoked when the block is
     * unassigned from a node.
     */
    export function unassigned<T extends NodeBlock | ConditionBlock>(pTarget: T, sMethod: keyof T, pDescriptor?: PropertyDescriptor): void;
    /**
     * Marks the upgraded function that is invoked when a block is loaded that was
     * created using an older version of the block implementation. You can use an
     * upgrade function to migrate older blocks to the new version of the block.
     * The following arguments are passed to the function:
     * - `prevVersion` (string): String that contains the previous version number of
     * the block.
     */
    export function upgraded<T extends NodeBlock | ConditionBlock>(pTarget: T, sMethod: keyof T, pDescriptor?: PropertyDescriptor): void;
    export interface IMapChangeEvent extends IHookPayload<"OnChange"> {
        readonly map: Map;
    }
    export interface IMapErrorEvent extends IHookPayload<"OnError"> {
        readonly map: Map;
        readonly erroneousBlocks: number;
        readonly missingBlockTypes: string[];
    }

    export { observe as detectChange };
}

declare module "tripetto/module/slots" {
    import { TAny } from "tripetto/module/functional";
    import { HookProps, IHookPayload, THooks } from "tripetto/module/hookup";
    import { IDimensionChangeEvent, IItemPopEvent, Item, Matrix } from "tripetto/module/matrix";
    import { ISerialize, TSerializeTypes } from "tripetto/module/serializer";

    export type TSlotEvents = "OnSlotRename" | "OnSlotRequired" | "OnSlotProperty";
    export interface ISlotEvent<H extends THooks, T extends Slot> extends IHookPayload<H> {
        /** Reference to the slot. */
        readonly slot: T;
    }
    export interface ISlotRenameEvent<T extends Slot> extends ISlotEvent<"OnSlotRename", T> {}
    export interface ISlotRequiredEvent<T extends Slot> extends ISlotEvent<"OnSlotRequired", T> {}
    export interface ISlotPropertyEvent<T extends Slot> extends ISlotEvent<"OnSlotProperty", T> {
        /** Specifies the changed property. */
        readonly property: keyof T;
    }
    /** Specifies the slot kinds. */
    export type Kinds = "meta" | "static" | "dynamic" | "feature";
    export type TPipeable =
        | boolean
        | {
              /** Optional name for the pipe. */
              readonly pipe?: string;
              /** Optional localized label for the pipe. */
              readonly label?: string;
              /** Optional alias for the pipe. */
              readonly alias?: string;
              /** Specifies the field or content that should be used as the pipe string (defaults to `value` which is the current value of the slot). */
              readonly content?:
                  | "value"
                  | "label"
                  | "name"
                  | {
                        /** Contains the content as a string without any markup or variables. */
                        readonly string: string;
                        /** Contains the content as text with support for variables. */
                        readonly text?: string;
                        /** Contains markdown content with support for basic formatting, hyperlinks and variables. */
                        readonly markdown?: string;
                    };
              /**
               * Specifies the name of a legacy pipe. Only here for backwards compatibility.
               * @deprecated
               */
              readonly legacy?: string;
          };
    export abstract class Slot<T extends TSerializeTypes = TSerializeTypes> extends Item<TSlotEvents> {
        /** Contains the static type identifier. */
        static readonly type: string;

        /** Contains the label of the slot. */
        label?: string;
        /** Contains the name of the slot. */
        name?: string;
        /** Contains the placeholder of the slot. */
        placeholder?: string;
        /** Contains an alias for the slot. */
        alias?: string;
        /** Contains if this slot is required. */
        required?: boolean;
        /** Contains if this slot is pipeable. */
        pipeable?: TPipeable;
        /** Contains the default slot data value. */
        default?: T;
        /** Contains if this slot is exportable. */
        exportable?: boolean;
        /** Contains if this slot is actionable. */
        actionable?: boolean;
        /** Contains if this slot is protected. */
        protected?: boolean;

        /**
         * Creates a new slot instance.
         * @param pType Reference to the type constructor.
         * @param sKind Specifies the kind.
         * @param sReference Specifies the reference for the slot.
         * @param nSequence Specifies the sequence number.
         * @param sPipe Specifies the pipe identifier of the slot.
         * @param pExchangables Specifies the exchangeable slot properties.
         * @param pSlotsOrId Contains a reference to the slots or the id for the slot.
         */
        constructor(
            pType: ISlotType,
            sKind: Kinds,
            sReference: string,
            nSequence?: number,
            sPipe?: string,
            pExchangables?: string[],
            pSlotsOrId?: Slots | string
        );
        /** Retrieves a reference to the slots. */
        get slots(): Slots | undefined;
        /** Retrieves the identifier of the slot. */
        get id(): string;
        /** Retrieves the slot type identifier. */
        get type(): string;
        /** Retrieves the slot kind. */
        get kind(): Kinds;
        /** Retrieves the sequence number. */
        get sequence(): number | undefined;
        /** Sets the sequence number. */
        set sequence(nSequence: number | undefined);
        /** Retrieves the slot reference. */
        get reference(): string;
        /** Retrieves the exchangeable slot properties. */
        get exchangeables(): {
            property: string;
            value: TAny;
        }[];

        /**
         * Fired when the slot is popped.
         * @param pEvent Specifies the event payload.
         * @event
         */
        protected onPop(pEvent: HookProps<IItemPopEvent<this>>): void;
        /**
         * Emits the `OnSlotProperty` event.
         * @param sProperty Specifies the changed property.
         * @event
         */
        propertyChange(sProperty: keyof this): void;
        /**
         * Serializes a slot.
         * @return Returns a reference to the serialized slot.
         */
        serialize(): ISlot<T>;
        /**
         * Deserializes to a slot instance.
         * @param pSlot Contains the serialized slot.
         * @return Returns a reference to the instance.
         */
        deserialize(pSlot: ISlot<T>): this;
        /**
         * Deprecates a slot.
         * @return Returns a reference to the instance.
         */
        deprecate(): this;
        /**
         * Deletes a slot.
         * @return Returns a reference to the instance.
         */
        delete(): this;
        /** Retrieves the pipe identifier for the slot. */
        pipe(pOrigin?: { readonly id: string }): string;
        /**
         * Retrieves the legacy pipe identifier for the slot.
         * @deprecated
         */
        legacyPipe(pOrigin?: { readonly id: string }): string | undefined;
        /**
         * Verifies if the supplied identifier is a pipe.
         * @param sId Specifies the identifier to check.
         * @return Returns `true` if the identifier is a pipe.
         */
        isPipe(sId: string | undefined): boolean;
        /** Specifies the exchangeable slot properties. */
        exchange(pExchangables: string[] | undefined): void;
        /**
         * Converts the supplied data to a valid value.
         * @param pData Specifies the data.
         * @return Returns the data value.
         */
        abstract toValue(pData: TSerializeTypes): T;
        /**
         * Converts the supplied data to a valid string.
         * @param pData Specifies the data.
         * @return Returns the data as a string.
         */
        abstract toString(pData: TSerializeTypes): string;
    }
    export interface ISlotType<T extends Slot = Slot> {
        /** Contains the slot type identifier. */
        readonly type: string;
        /**
         * Creates a new slot instance.
         * @param nSlotsId Contains the slots identifier.
         * @param pType Reference to the type constructor.
         * @param sKind Specifies the kind.
         * @param sReference Specifies the reference.
         * @param nSequence Specifies the sequence number.
         * @param sPipe Specifies the pipe identifier of the slot.
         * @param pExchangables Specifies the exchangeable slot properties.
         * @param pSlotsOrId Contains a reference to the slots or the id for the slot.
         */
        new (
            pType: ISlotType,
            sKind: Kinds,
            sReference: string,
            nSequence?: number,
            sPipe?: string,
            pExchangables?: (keyof T)[],
            pSlotsOrId?: Slots | string
        ): T;
    }
    export interface ISlotBase<T extends TSerializeTypes = TSerializeTypes> {
        /** Contains the id for the serialized slot. */
        readonly id: string;
        /** Contains the slot type. */
        readonly type: string;
        /** Contains the slot kind. */
        readonly kind: Kinds;
        /** Contains the slot reference. */
        readonly reference: string;
        /** Contains the slot sequence number. */
        readonly sequence?: number;
        /** Contains the label for the slot. */
        readonly label?: string;
        /** Contains the slot name. */
        readonly name?: string;
        /** Contains the slot placeholder. */
        readonly placeholder?: string;
        /** Contains the slot alias. */
        readonly alias?: string;
        /** Contains if the slot is required. */
        readonly required?: boolean;
        /** Contains if the slot is pipeable. */
        readonly pipeable?: TPipeable;
        /** Contains the default slot value. */
        readonly default?: T;
        /** Contains if this slot is exportable. */
        readonly exportable?: boolean;
        /** Contains if the slot is actionable. */
        readonly actionable?: boolean;
        /** Contains if the slot is protected. */
        readonly protected?: boolean;
    }
    export interface ISlotProperties<T extends Slot>
        extends Partial<Pick<T, Exclude<keyof ISlotBase, "id" | "type" | "kind" | "reference">>> {
        /** Contains the slot type. */
        readonly type: ISlotType<T>;
        /** Contains the slot reference. */
        readonly reference: string;
        /** Contains the label for the slot. */
        readonly label: string;
        /** Defines the pipe identifier of the slot. */
        readonly pipe?: string;
        /** Specifies the exchangeable slot properties. */
        readonly exchange?: (keyof T)[];
    }
    export interface ISlot<T extends TSerializeTypes = TSerializeTypes> extends ISlotBase<T>, ISerialize {}
    export class Slots extends Matrix<Slot, TSlotEvents> {
        /**
         * Registers a slot type.
         * @param pType Specifies the slot instance constructor.
         * @param sType Specifies the slot type.
         */
        static register<T extends Slot>(pType: ISlotType<T>, sType: string): void;
        /**
         * Retrieves the slot constructor of the specified type.
         * @param sType Specifies the slot type.
         * @return Returns the slot constructor or `undefined` if the slot type is not
         * available.
         */
        static ofType<T extends Slot>(sType: string): ISlotType<T> | undefined;
        /** Constructs a new slots instance. */
        constructor(pOrigin?: { readonly id: string });
        /** Retrieves the slots id. */
        get id(): string | undefined;
        /** Retrieves if the slots are being deserialized. */
        get isDeserializing(): boolean;
        /** Retrieves if multiple pipeable slots are present. */
        get hasMultiplePipeable(): boolean;

        /**
         * Fired when the amount of slots is changed.
         * @param pEvent Specifies the event payload.
         * @event
         */
        protected onDimensionChange(pEvent: IDimensionChangeEvent<this>): void;
        /**
         * Creates a new meta slot.
         * @param pProperties Specifies the properties for the slot.
         * @return Returns a reference to the slot.
         */
        meta<T extends Slot>(pProperties: ISlotProperties<T>): T;
        /**
         * Creates a new static slot.
         * @param pProperties Specifies the properties for the slot.
         * @return Returns a reference to the slot.
         */
        static<T extends Slot>(pProperties: ISlotProperties<T>): T;
        /**
         * Creates a new dynamic slot.
         * @param pProperties Specifies the properties for the slot.
         * @return Returns a reference to the slot.
         */
        dynamic<T extends Slot>(pProperties: ISlotProperties<T>): T;
        /**
         * Creates a new feature slot.
         * @param pProperties Specifies the properties for the slot.
         * @return Returns a reference to the slot.
         */
        feature<T extends Slot>(pProperties: ISlotProperties<T>): T;
        /**
         * Selects a slot.
         * @param sReferenceOrId Reference or identifier of the slot.
         * @param sKind Specifies the optional kind of the slot.
         * @return Returns the slot or `undefined` if no slot is found.
         */
        select<T extends Slot>(sReferenceOrId: string, sKind?: Kinds): T | undefined;
        /**
         * Selects a slot by the specified identifier.
         * @param sId Specifies the slot or pipe identifier to search for.
         * @return Returns the slot or `undefined` if no slot was found.
         */
        selectByIdentifier<T extends Slot>(sId: string): T | undefined;
        /**
         * Deprecates a slot.
         * @param sReferenceOrId Reference or identifier of the slot.
         * @param sKind Specifies the optional kind of the slot.
         * @return Returns the slot or `undefined` if no slot is found.
         */
        deprecate<T extends Slot>(sReferenceOrId: string, sKind?: Kinds): T | undefined;
        /**
         * Deletes a slot.
         * @param sReferenceOrId Reference or identifier of the slot.
         * @param sKind Specifies the optional kind of the slot.
         * @return Returns the slot or `undefined` if no slot is found.
         */
        delete<T extends Slot>(sReferenceOrId: string, sKind?: Kinds): T | undefined;
        /**
         * Removes all the slots from the collection except the supplied slots.
         * @param sKind Specifies the kind of slots to remove (or `undefined` to remove all).
         * @param pExclude Specifies the slots to exclude. Those are kept in the slots collection.
         */
        clean(sKind?: Kinds, ...pExclude: (Slot | undefined)[]): void;
        /**
         * Sorts the slots.
         * @return Returns `true` if the order of the slots is changed.
         */
        sort(): boolean;
        /**
         * Serializes the slots to an array.
         * @return Returns the slots array.
         */
        serialize(): ISlot[];
        /**
         * Deserializes slots.
         * @param pSlots Specifies the slots array.
         * @return Returns a reference to the instance.
         */
        deserialize(pSlots: ISlot[]): this;
        /** Destroys the slots instance. */
        destroy(): void;
    }
    export type Transformations = "none" | "capitalize" | "capitalize-words" | "capitalize-sentences" | "uppercase" | "lowercase";
    export type Precision = "years" | "months" | "days" | "hours" | "minutes" | "seconds" | "milliseconds";
    /**
     * Defines a slot type.
     * @param sType Specifies the slot type name.
     */
    export function slot<T extends Slot>(sType: string): (pType: ISlotType<T>) => void;
    /**
     * Marks a property as a slot property.
     * @param pTarget Reference to the slot.
     * @param sProperty Specifies the slot property.
     * @param pDescriptor Reference to the property descriptor.
     */
    export function property(pTarget: Slot, sProperty: string, pDescriptor?: PropertyDescriptor): void;
    class BooleanSlot extends Slot<boolean> {
        /** Contains the string label for false values. */
        labelForFalse?: string;
        /** Contains the string label for true values. */
        labelForTrue?: string;
        /**
         * Converts the supplied data to a valid boolean value.
         * @param pData Specifies the data.
         * @return Returns the boolean value.
         */
        toValue(pData: TSerializeTypes): boolean;
        /**
         * Converts the supplied data to a valid string.
         * @param pData Specifies the data.
         * @return Returns the data as a string.
         */
        toString(pData: TSerializeTypes): string;
    }
    class DateSlot extends Slot<number> {
        /** Specifies the date/time precision (defaults to `milliseconds`). */
        precision?: Precision;
        /** Contains the minimum date. */
        minimum?: Date | number | true;
        /** Contains the maximum date. */
        maximum?: Date | number | true;
        /** Retrieves if the slot supports time. */
        get supportsTime(): boolean;

        /**
         * Converts the supplied data to a date value.
         * @param pData Specifies the data.
         * @param sPrecision Specifies the precision to use.
         * @return Returns the date value.
         */
        toValue(pData: TSerializeTypes | Date, sPrecision?: Precision): number;
        /**
         * Converts the supplied data to a valid date object.
         * @param pData Specifies the data.
         * @param sPrecision Specifies the precision to use.
         * @return Returns the data as a date object.
         */
        toDate(pData: TSerializeTypes | Date, sPrecision?: Precision): Date;
        /**
         * Converts the supplied data to a valid string.
         * @param pData Specifies the data.
         * @param sPrecision Specifies the precision to use.
         * @return Returns the data as a string.
         */
        toString(pData: TSerializeTypes | Date, sPrecision?: Precision): string;
    }
    class NumberSlot extends Slot<number> {
        /**
         * Converts the supplied data to a valid number value.
         * @param pData Specifies the data.
         * @return Returns the number value.
         */
        toValue(pData: TSerializeTypes): number;
        /**
         * Converts the supplied data to a valid string.
         * @param pData Specifies the data.
         * @param fnFormatter Optional formatter function used when no separator, decimal or minus sign is specified.
         * @return Returns the data as a string.
         */
        toString(pData: TSerializeTypes, fnFormatter?: (nValue: number | string) => string): string;
    }
    export class Numeric extends Slot<number> {
        /** Contains the minimal value. */
        minimum?: number;
        /** Contains the maximum value. */
        maximum?: number;
        /** Contains the thousands separtor sign. */
        separator?: string;
        /** Contains the decimal sign. */
        decimal?: string;
        /** Contains the minus sign. */
        minus?: string;
        /** Contains the prefix. */
        prefix?: string;
        /** Contains the plural prefix. */
        prefixPlural?: string;
        /** Contains the suffix. */
        suffix?: string;
        /** Contains the plural suffix. */
        suffixPlural?: string;
        /** Contains the number of digits. */
        digits?: number;
        /** Retrieves the numeric precision. */
        get precision(): number | undefined;
        /** Sets the numeric precision. */
        set precision(nPrecision: number | undefined);
        /**
         * Converts the supplied data to a valid numeric value.
         * @param pData Specifies the data.
         * @return Returns the numeric value.
         */
        toValue(pData: TSerializeTypes): number;
        /**
         * Formats a string.
         * @param sNumber Specifies the number to format.
         * @param bPlural Specifies if the plural prefix and suffix should be used.
         * @return Returns the formatted string.
         */
        formatString(sNumber: string, bPlural: boolean): string;
        /**
         * Converts the supplied data to a valid string.
         * @param pData Specifies the data.
         * @param fnFormatter Optional formatter function used when no separator, decimal or minus sign is specified.
         * @return Returns the data as a string.
         */
        toString(pData: TSerializeTypes, fnFormatter?: (nValue: number | string, nPrecision?: number | "auto") => string): string;
    }
    class StringSlot extends Slot<string> {
        /**
         * Converts the supplied data to a valid string value.
         * @param pData Specifies the data.
         * @return Returns the string value.
         */
        toValue(pData: TSerializeTypes): string;
        /**
         * Converts the supplied data to a valid string.
         * @param pData Specifies the data.
         * @return Returns the data as a string.
         */
        toString(pData: TSerializeTypes): string;
    }
    export class Text extends Slot<string> {
        /** Retrieves the maximum text length. */
        get maxLength(): number | undefined;
        /** Sets the maximum text length. */
        set maxLength(nMaxLength: number | undefined);
        /** Specifies the transformation to apply. */
        transformation?: Transformations;
        /**
         * Converts the supplied data to a valid text value.
         * @param pData Specifies the data.
         * @return Returns the text value.
         */
        toValue(pData: TSerializeTypes): string;
        /**
         * Converts the supplied data to a valid string.
         * @param pData Specifies the data.
         * @return Returns the data as a string.
         */
        toString(pData: TSerializeTypes): string;
    }

    export { BooleanSlot as Boolean, DateSlot as Date, NumberSlot as Number, StringSlot as String };
}

declare module "*.svg" {
    const base64: string;
    export default base64;
}