// Type definitions for Tabris.js 3.8.0
/// <reference path="globals.d.ts" />

// General helper types
export interface Constructor<T> {new(...args: any[]): T; }
type Omit<T, K extends string | symbol | number> = Pick<T, Exclude<keyof T, K>>;
type ReadOnlyWidgetKeys<T> = T extends {readonly bounds: any}
  ? Extract<keyof T, 'bounds' | 'absoluteBounds' | 'cid' | 'jsxAttributes'>
  : never;
type MethodKeysOf<T> = { [K in keyof T]: T[K] extends Function ? K : never }[keyof T];
// Tabris.js Helper Types
type JSXDefaultChildren = Flatten<string|{cid?: never} & object>;
export type Properties<
  T extends {set?: any},
  U = Omit<T, 'set'> // prevent self-reference issues
> = Partial<Omit<U, MethodKeysOf<U> | ReadOnlyWidgetKeys<U>>>
  & {cid?: never, data?: any}; // prevent empty object type as possible result, would allow any object
type ListenersKeysOf<T> = { [K in keyof T]: T[K] extends Listeners<any> ? K : never }[keyof T];
export type UnpackListeners<T> = T extends Listeners<infer U> ? Listener<U> : T;
export type EventOfListeners<T extends Listeners<any>> = T extends Listeners<infer U> ? U : never;
type ListenersMap<T> = { [Key in ListenersKeysOf<T>]?: UnpackListeners<T[Key]>};
export type JSXShorthands<T> = T extends {layoutData?: LayoutDataValue}
  ? {center?: true, stretch?: true, stretchX?: true, stretchY?: true}
  : {};
export type JSXCandidate = {set: any; jsxAttributes: any}; // JSX.Element?
export type JSXAttributes<
  T extends JSXCandidate,
  U = Omit<T, 'set' | 'jsxAttributes'> // prevent self-reference issues
> = Properties<U> & ListenersMap<U> & JSXShorthands<U>;

/**
 * The attributes object for the given widget type, includes all properties,
 * events, children and shorthands. To be passed to a JSX element or new-less
 * widget constructor call.
 *
 * The optional second parameter is the type of the "data" property.
 */
export type Attributes<T extends JSXCandidate, TData = any> = T['jsxAttributes'] & {data?: TData};

export type JSXCompositeAttributes<T extends Composite, U extends Widget>
  = JSXAttributes<T> & {apply?: RuleSet<T>, children?: JSXChildren<U>};
type ExtendedEvent<EventData, Target = {}> = EventObject<Target> & EventData;
export type Listener<T = {}> = (ev: ExtendedEvent<T>) => any;
type ListenersTriggerParam<T> = Omit<T, keyof EventObject<any>>;
type MinimalEventObject<T extends object> = {target: T};
type TargetType<E extends object> = E extends MinimalEventObject<infer Target> ? Target : object;
export interface Listeners<EventData extends {target: object}> {
  // tslint:disable-next-line:callable-types
  (listener: Listener<ExtendedEvent<EventData>>): TargetType<EventData>;
}
export type JSXChildren<T extends Widget> = T|WidgetCollection<T>|Array<T|WidgetCollection<T>>|{cid?: never}|undefined;
export type SFC<T> = (attributes: object|null, children: any[]) => T;
type Flatten<T> = T|Array<T>|undefined;

export type Factory<
  OriginalConstructor extends Constructor<JSXCandidate> & {prototype: Instance},
  Instance extends JSXCandidate = InstanceType<OriginalConstructor>,
  Selector extends Function = (...args: any[]) => Widget
> = {
  
/**
 * Creates an instance of this type.
 *
 * The given attributes object may include properties,
 * event listener and children, if supported.
 *
 * The second parameter should be given if this is the
 * return value of a functional component. In this case the
 * component itself (factory function) must be given to make it
 * a valid selector for the widget selector API such as
 * "$()" or the composite "find()" method.
 */

  (attributes?: Attributes<Instance>, selector?: Selector): Instance
};

export type CallableConstructor<
  OriginalConstructor extends Constructor<JSXCandidate> & {prototype: Instance},
  Instance extends JSXCandidate = InstanceType<OriginalConstructor>,
  Selector extends Function = (...args: any[]) => Widget
> = {
  /** This constructor can be called as a factory, without "new". Doing so allows passing an attributes object which may include (in addition to the properties) children, event listeners and layout shorthands. */
  new (...args: ConstructorParameters<OriginalConstructor>): Instance,
  
/**
 * Creates an instance of this type.
 *
 * The given attributes object may include properties,
 * event listener and children, if supported.
 *
 * The second parameter should be given if this is the
 * return value of a functional component. In this case the
 * component itself (factory function) must be given to make it
 * a valid selector for the widget selector API such as
 * "$()" or the composite "find()" method.
 */

  (attributes?: Attributes<Instance>, selector?: Selector): Instance,
  prototype: Instance
};

export as namespace tabris;
export type BaseConstructor<T> = Function & { prototype: T };

/**
 * A plain object with following properties:
 *
 * **src**: *string*
 *    File system path, relative path or URL. The [data URI](https://en.wikipedia.org/wiki/Data_URI_scheme) scheme is also supported. Relative paths are resolved relative to 'package.json'. On Android the name of a bundled [drawable resource](https://developer.android.com/guide/topics/resources/drawable-resource.html) can be provided with the url scheme `android-drawable`, e.g. `android-drawable://ic_info_black`.
 *
 * **width**: *number | 'auto' (optional)*
 *    Image width in dip, extracted from the image file when missing or `'auto'`.
 *
 * **height**: *number | 'auto' (optional)*
 *    Image height in dip, extracted from the image file when missing or `'auto'`.
 *
 * **scale**: *number | 'auto' (optional)*
 *    Image scale factor, the image will be scaled down by this factor. The scale will be inferred from the image file name if it follows the pattern "@\<scale\>x", e.g. `"image@2x.jpg"`. The pattern is ignored if `scale`, `width` or `height` are set to a number or if `scale` is set to `"auto"`.
 */


export type ImageSource = string | ImageBitmap | Blob;

 export type ImageLikeObject = {src: ImageSource, scale?: number | "auto", width?: number | "auto", height?: number | "auto"};

/**
 * Images can be specified as strings or Image/ImageLikeObject.
 *
 * An **Image** instance can be created using the **Image** constructor or using **Image.from**.
 *
 * The string shorthand `"image.jpg"` equals `{src: "image.jpg"}`.
 *
 * The scale can be part of the file name in the pattern of "@\<scale\>x", e.g. `"image@2x.jpg"`. The pattern is ignored if `scale`, `width` or `height` are set to a number or if `scale` is set to `"auto"`.
 */

export type ImageValue = ImageLikeObject | Image | ImageSource | null;


export type ColorArray = [number, number, number, number]|[number, number, number];
export type ColorLikeObject = {red: number, green: number, blue: number, alpha?: number};

/**
 * Colors can be specified as strings, arrays or Color/Color-like objects.
 *
 * A **Color** instance can be created with the **Color** constructor or using **Color.from**.
 *
 * A **Color**-like object is a plain object with "red", "green", "blue" and optional "alpha" properties.
 * Example: **{red: 0, green: 127, blue: 255, alpha: 120}**
 *
 * A color array has consist of 3 or 4 numbers between (and including) 0 and 255,
 * i.e. **[red, green, blue, alpha]**. If omitted, alpha is 255.
 *
 * As a string the following formats can be used:
 * - **"#xxxxxx"**
 * - **"#xxx"**
 * - **"#xxxxxxxx"**
 * - **"#xxxx"**
 * - **"rgb(r, g, b)"** with **r**, **g** and **b** being numbers in the range 0..255.
 * - **"rgba(r, g, b, a)"** with **a** being a number in the range 0..1.
 * - a color name from the CSS3 specification.
 * - **"transparent"** sets a fully transparent color. This is a shortcut for **"rgba(0, 0, 0, 0)"**.
 * - **"initial"** resets the color to its (platform-dependent) default.
 *
 * Setting a ColorValue property to null also resets it to the default color.
 *
 * Type guards for `ColorValue` are available as **Color.isColorValue** and **Color.isValidColorValue**
 */
export type ColorValue = ColorLikeObject | ColorArray | string | 'initial' | null;

export type FontWeight = 'black' | 'bold' | 'medium' | 'thin' | 'light' | 'normal';
export type FontStyle = 'italic' | 'normal';
export type FontLikeObject = {size: number, family?: string[], weight?: FontWeight, style?: FontStyle};
/**
 * Fonts can be specified as strings or Font/Font-like objects.
 *
 * A **Font** instance can be created with the **Font** constructor or using **Font.from**.
 *
 * A **Font**-like object is a plain object with "size" and optional "family", "weight" and "style" properties.
 * Example: **{size: 16, family: ['serif'], weight: 'bold', style: 'italic'}**
 *
 * Generic font families supported across all platforms are **"serif"**, **"sans-serif"**, **"condensed"** and **"monospace"**.
 * Supported font weights are **"light"**, **"thin"**, **"normal"**, **"medium"**, **"bold"** and **"black"**.
 *
 * As a string, the shorthand syntax known from CSS is used: **"[font-style] [font-weight] font-size [font-family[, font-family]*]"**. The font family may be omitted, in this case the default system font will be used. The value **"initial"** represents the platform default.
 */
export type FontValue = FontLikeObject|string|'initial'|null;

export interface PercentLikeObject {
  percent: number;
}

export type PercentString = string;

/**
 *
 * Percents can be specified as strings or Percent/Percent-like objects.
 *
 * A **Percent** instance can be created with the **Percent** constructor or using **Percent.from**.
 *
 * A **Percent**-like object is a plain object with a *percent* property with a number between and including 0 and 100.
 *
 * A percent string contains a number between and including 0 and 100 and and ends with `%`.
 *
 */
export type PercentValue = PercentString | PercentLikeObject;

/**
 * Defines how the widget should be arranged. When setting the layout of a widget using **LayoutData**, all currently set layout attributes not in the new LayoutData object will be implicitly reset to null (i.e. "not specified").
 */
export type LayoutDataValue = LayoutDataLikeObject|'center'|'stretch'|'stretchX'|'stretchY';

export interface LayoutDataLikeObject {
    left?: 'auto' | ConstraintValue;
    right?: 'auto' | ConstraintValue;
    top?: 'auto' | ConstraintValue;
    bottom?: 'auto' | ConstraintValue;
    centerX?: 'auto' | Offset | true;
    centerY?: 'auto' | Offset | true;
    baseline?: 'auto' | SiblingReferenceValue |true;
    width?: 'auto' | Dimension;
    height?: 'auto' | Dimension;
}

export interface LayoutDataProperties {
    left?: 'auto' | Constraint;
    right?: 'auto' | Constraint;
    top?: 'auto' | Constraint;
    bottom?: 'auto' | Constraint;
    centerX?: 'auto' | Offset;
    centerY?: 'auto' | Offset;
    baseline?: 'auto' | SiblingReference;
    width?: 'auto' | Dimension;
    height?: 'auto' | Dimension;
}

export type LinearGradientLikeObject = {
  colorStops: Array<ColorValue | [ColorValue, PercentValue]>,
  direction?: number | 'left' | 'top' | 'right' | 'bottom'
}

/**
 * Linear gradients can be specified as strings or [LinearGradient](./LinearGradient.html) or
 * `LinearGradient`-like objects.
 *
 * An `LinearGradient` instance can be created using the `LinearGradient` constructor or using
 * `LinearGradient.from`.
 *
 * A `LinearGradient`-like object is a plain object with "colorStops" and optional "direction"
 * properties.
 * "colorStops" is an array containing atleast one `ColorValue` or `[ColorValue, PercentValue]`.
 * "direction" is a number in degrees or one of "left", "top", "right" and "bottom".
 *
 * As string, following CSS subset can be used:
 *
 * <color-stop> ::= <color> [ <number>% ]
 * <linear-gradient> ::= linear-gradient( [ <number>deg | to ( left | top | right | bottom ), ] <color-stop> { , <color-stop> } )
 */

export type LinearGradientValue = LinearGradientLikeObject | string | 'initial' | null;


/**
 * A Widget's bounds
 */
export interface Bounds {

  /**
   * the horizontal offset from the parent's left edge in dip
   */
  left: number;

  /**
   * the vertical offset from the parent's top edge in dip
   */
  top: number;

  /**
   * the width of the widget in dip
   */
  width: number;

  /**
   * the height of the widget in dip
   */
  height: number;

}

export interface Transformation {

  /**
   * Clock-wise rotation in radians. Defaults to \`0\`.
   */
   rotation?: number;

  /**
   * Horizontal scale factor. Defaults to \`1\`.
   */
  scaleX?: number;

  /**
   * Vertical scale factor. Defaults to \`1\`.
   */
  scaleY?: number;

  /**
   * Horizontal translation (shift) in dip. Defaults to \`0\`.
   */
  translationX?: number;

  /**
   * Vertical translation (shift) in dip. Defaults to \`0\`.
   */
  translationY?: number;

  /**
   * Z-axis translation (shift) in dip. Defaults to \`0\`. Android 5.0+ only.
   */
  translationZ?: number;

}

export type SelectorString = string;

export type SiblingSelectorString = string;

/**
 * An expression or a predicate function to select a set of widgets.
 */
export type Selector<
  Candidate extends Widget = Widget,
  Result extends Candidate = Candidate
> = SelectorString | SelectorFunction<Candidate> | Constructor<Result> | SFC<Result>;

export type SelectorFunction<Candidate extends Widget> = (widget: Candidate, index: number, collection: WidgetCollection<Candidate>) => boolean;

/**
 * A positive float, or 0, representing device independent pixels.
 */
export type Dimension = number;
/**
 * A positive or negative float, or 0, representing device independent pixels.
 */
export type Offset = number;

export type PrevString = 'prev()';
type NextString = 'next()';

export type SiblingReferenceSymbol = typeof LayoutData.next | typeof LayoutData.prev

export type SiblingReference = Widget | SiblingReferenceSymbol | SiblingSelectorString;

export type SiblingReferenceValue = Widget | SiblingReferenceSymbol | SiblingSelectorString;

export type ConstraintArray = [SiblingReferenceValue | PercentValue, Offset];

export type ConstraintArrayValue = [SiblingReference | PercentValue, Offset];

export type ConstraintLikeObject = {
  reference: SiblingReferenceValue | PercentValue;
  offset?: Offset;
}|{
  reference?: SiblingReferenceValue | PercentValue;
  offset: Offset;
};

/**
 * Distance to a parent's or sibling's opposing edge in one of these formats:
 * - **offset** the distance from the parent's opposing edge in device independent pixels
 * - **percentage** the distance from the parent's opposing edge in percent of the parent's width
 * - **Widget** attach this edge to the given siblings's opposing edge
 * - **"selector"**
 * - **"prev()"** Same as above, but as space-separated string list instead of array
 * - **"selector offset"**
 * - **"prev() offset"**
 * - **[Widget, offset]** the distance from the given widget's opposing edge in pixel
 * - **"Widget, offset"**Same as above, but as space-separated string list instead of array.
 * - **[percentage, offset]** the distance from the parent's opposing edge in percent of the parent's width plus a fixed offset in pixels
 * - **"percentage offset"** Same as above, but as space-separated string list instead of array
 * - **[selector, offset]**
 * - **["prev()", offset]**
 */
export type ConstraintValue = Constraint
  | ConstraintArrayValue
  | ConstraintLikeObject
  | Offset
  | PercentValue
  | SiblingReferenceValue
  | true;

  export interface AnimationOptions {

  /**
   * Time until the animation starts in ms, defaults to 0.
   */
  delay?: number;

  /**
   * Duration of the animation in ms.
   */
  duration?: number;

  /**
   *  Easing function applied to the animation.
   */
  easing?: "linear"|"ease-in"|"ease-out"|"ease-in-out";

  /**
   *  Number of times to repeat the animation, defaults to 0.
   */
  repeat?: number;

  /**
   *  If true, alternates the direction of the animation on every repeat.
   */
  reverse?: boolean;

  /**
   * no effect, but will be given in animation events.
   */
  name?: string;
}

/**
 * Represents dimensions on four edges of a box, as used for padding.
 */
export type BoxDimensions = number | string | [number, number?, number?, number?] |  {

  /**
   * The left part, in dip.
   */
  left?: number;

  /**
   * The right part, in dip.
   */
  right?: number;

  /**
   * The top part, in dip.
   */
  top?: number;

  /**
   * The bottom part, in dip.
   */
  bottom?: number;

}

export interface PropertyChangedEvent<T, U> extends EventObject<T>{
  readonly value: U
  originalEvent?: PropertyChangedEvent<object, unknown> | null;
}

export class JsxProcessor {

  public readonly jsxFactory: Symbol;
  public readonly jsxType: Symbol;

  createElement(type: {prototype: JSX.ElementClass, new(): object}|string, attributes: object, ...children: Array<JSX.ElementClass>): JSX.ElementClass | string;

  createIntrinsicElement(type: string, attributes: object): JSX.ElementClass | string;

  createCustomComponent(type: {prototype: JSX.ElementClass, new(): object}, attributes: object): JSX.ElementClass | string;

  createFunctionalComponent(type: ((param: object) => any), attributes: object): JSX.ElementClass | string;

  createNativeObject(Type: {prototype: JSX.ElementClass, new(): NativeObject}, attributes: object): NativeObject;

}

export function asFactory<
  OriginalConstructor extends Constructor<JSXCandidate> & {prototype: Instance},
  Instance extends JSXCandidate = InstanceType<OriginalConstructor>
> (constructor: OriginalConstructor): CallableConstructor<OriginalConstructor>;


export type ModuleLoader = (
  module: Module,
  exports: object,
  require: (fn: string) => object,
  __filename: string,
  __dirname: string
) => void;

export type ResourceData<Resources extends ResourceBaseData<any>, RawType = any> = Record<keyof Resources, Selectable<RawType>>;

export type ColorResourceData<Resources extends {[P in keyof Resources]: Color}> = Record<keyof Resources, Selectable<ColorValue>>;

export type FontResourceData<Resources extends {[P in keyof Resources]: Font}> = Record<keyof Resources, Selectable<FontValue>>;

export type TextResourceData<Resources extends {[P in keyof Resources]: string}> = Record<keyof Resources, Selectable<string>>;

export type RuleSetObject = ({[selectorOrAttribute: string]: any}) & {prototype?: never};

export type RuleSetStatic = RuleSetObject | Array<RuleSetObject>;

export type RuleSetCallback<Target> = ((widget: Target) => RuleSetStatic) | null;

export type RuleSet<Target = Widget> = RuleSetStatic | RuleSetCallback<Target> | null;

export type ApplyAttributes<WidgetConstructor extends BaseConstructor<Widget>> = ApplyAttributesTypedSetter<WidgetConstructor> | ApplyAttributesUntypedSetter | ApplyAttributesRuleSet;

export type ApplyAttributesTypedSetter<WidgetConstructor extends BaseConstructor<Widget>> = {
  target: WidgetConstructor,
  selector?: string,
  children?: Attributes<WidgetConstructor['prototype']>,
  attr?: Attributes<WidgetConstructor['prototype']>
};

export type ApplyAttributesUntypedSetter = {
  target?: never,
  selector?: string,
  children?: Attributes<Widget>,
  attr?: Attributes<Widget>
};

export type ApplyAttributesRuleSet = {
  children?: RuleSet
};

export namespace widgets {
  export class ObservableData {
    constructor(properties?: Record<string, any>);
    [Symbol.observable](): Observable<PropertyChangedEvent<this, unknown>>;
  }
}

export type ObservableData = widgets.ObservableData;
export type ObservableDataConstructor = typeof widgets.ObservableData;
export interface ObservableDataFactory extends ObservableDataConstructor {
  <T extends object>(properties?: T): ObservableData & T;
}
export const ObservableData: ObservableDataFactory;



declare var ImageDataConstructor: typeof ImageData;
declare var StorageConstructor: typeof Storage;
declare var WebSocketConstructor: typeof WebSocket;
declare var XMLHttpRequestConstructor: typeof XMLHttpRequest;
declare var CryptoConstructor: typeof Crypto;
declare var cryptoObject: Crypto;
declare var workerConstructor: typeof Worker;
declare var RequestConstructor: typeof Request;
declare var ResponseConstructor: typeof Response;
declare var HeadersConstructor: typeof Headers;
declare var fetchFunction: typeof fetch;
declare var $Function: typeof $;

export {
  ImageDataConstructor as ImageData,
  StorageConstructor as Storage,
  WebSocketConstructor as WebSocket,
  XMLHttpRequestConstructor as XMLHttpRequest,
  CryptoConstructor as Crypto,
  cryptoObject as crypto,
  RequestConstructor as Request,
  ResponseConstructor as Response,
  HeadersConstructor as Headers,
  fetchFunction as fetch,
  $Function as $,
  Setter as Set
};



type ResourcesConstructorOptions<ResourceType, RawType> = {
  data: ResourceRawData<RawType>,
  config?: ResourceConfig,
  base?: ResourceBaseData<ResourceType>,
  validator?: (value: any) => value is RawType,
  converter?: (raw: RawType) => ResourceType,
  type?: Constructor<ResourceType>
};

type ResourceBuildOptions<ResourceType> = {
  validator: (value: any) => value is ResourceType,
  type?: Constructor<ResourceType>
} | {
  validator?: (value: any) => value is ResourceType,
  type: Constructor<ResourceType>
};

type ResourceBuildConvertOptions<ResourceType, RawType> = {
  validator?: (value: any) => value is RawType,
  converter: (raw: RawType) => ResourceType,
  type?: Constructor<ResourceType>
};

type ResourceBuilderConstructorOptions<ResourceType, RawType> = {
  validator?: (value: any) => value is RawType,
  converter?: (raw: RawType) => ResourceType,
  type?: Constructor<ResourceType>
};

type ResourceRawData<RawType> = NeverResources
  & Selectable<RawType>
  & Partial<Record<keyof ResourceInlineConfig, never>>;

type ResourceDataWithConfig<RawType> = NeverResources
  & Selectable<RawType>
  & ResourceInlineConfig;

type ResourceConfig = {
  scaleFactor?: ScaleFactor,
  fallbackLanguage?: string
};

type ResourceInlineConfig = {
  $schema?: string,
  $scaleFactor?: ScaleFactor,
  $fallbackLanguage?: string
};

type ScaleFactor = 'nearest' | 'higher' | 'lower';

type Selectable<T> = T | {[key: string]: Selectable<T>} | undefined | {inherit: boolean} | {ref: string};

type ResourceBaseData<ResourceType> = NeverResources & {readonly [resourceName: string]: ResourceType | undefined};

type NamedResources<ResourceType, Keys extends string | symbol | number> = {
  [T in Exclude<Keys, ReservedResourceKeys>]: ResourceType
};

type ReservedResourceKeys = keyof ResourceInlineConfig | keyof NeverResources | 'toString' | 'valueOf' | symbol | number;

// TypeScript does now allow reg-ex checks,
// so these only catch the "worst" cases
type NeverResources = {
  _?: never,
  '#'?: never,
  '!'?: never,
  '*'?: never,
  '@'?: never,
  ' '?: never,
  'on'?: never
};

// This type needs to be less strict than FontLikeObject to satisfy tsc when using FontResources.from with JSON
type FontResourceValue = {size: number, family?: string[], weight?: string, style?: string} | string;


export type TeardownLogic = Function | {unsubscribe: Function} | void;

export type SubscriptionHandler<T> = (
  this: Observable<T>,
  subscriber: Subscriber<T>
) => TeardownLogic;

export interface Observer<T> {
  next: NextCb<T>;
  error: ErrorCb;
  complete: CompleteCb;
}

export type NextCb<T> = ((value: T) => void);
export type ErrorCb = ((value: any) => void);
export type CompleteCb = (() => void);

export interface PartialObserver<T> {
  next?: (value: T) => any;
  error?: (ex: any) => any
  complete?: () => any
}

export interface Subscription {
  readonly closed: boolean;
  unsubscribe: () => void;
}

export interface Subscriber<T> extends Observer<T> {
  readonly closed: boolean;
}

declare global {
  interface SymbolConstructor {
    readonly observable: symbol;
  }
}


// Action


export namespace widgets {

  /**
   * An executable item that is integrated in the application's navigation menu. Add a *select* listener
   * to react to action taps.
   */
  export class Action extends Widget {

    /**
     * An executable item that is integrated in the application's navigation menu. Add a *select* listener
     * to react to action taps.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<Action>);

    /**
     * Appends this widget to the given `NavigationView` instance.
     * @param parent
     */
    appendTo(parent: NavigationView): this;

    /**
     * Inserts this widget directly after the given Action.
     * @param widget
     */
    insertAfter(widget: Action): this;

    /**
     * Inserts this widget directly before the given Action.
     * @param widget
     */
    insertBefore(widget: Action): this;

    /**
     * Returns the `NavigationView` the `Action` is hosted in or `null` if it has no parent.
     */
    parent(): NavigationView;

    /**
     * Returns a (possibly empty) collection of all siblings of this widget that match the given selector.
     * @param selector A selector expression or a predicate function to filter the results.
     */
    siblings<Result extends Widget = Action | Page>(selector?: Selector<Widget, Result>): WidgetCollection<Result>;

    /**
     * Icon image for the action.
     * On iOS the `image` is tinted with the apps default accent color whereas on Android the `image` is
     * shown as is. When an action is placed into a `NavigationView`, the `NavigationView` property
     * `actionColor` can be used to adjust the action tint color.
     */
    image: ImageValue;

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & {children?: JSXDefaultChildren};

    /**
     * Actions with 'default' placement will be visible in the toolbar if enough space is available,
     * otherwise moved to the overflow section. Setting the property to 'overflow' makes the action appear
     * there exclusively. Lastly, 'navigation' puts the action in the position normally occupied by the
     * drawer/back button. When 'navigation' is used, only the `Action` image will be shown. If multiple
     * actions have this value only the first one is displayed.
     */
    placement: 'default' | 'navigation' | 'overflow';

    /**
     * The text to be displayed for the action.
     * When an action is placed into a `NavigationView`, the `NavigationView` property `actionTextColor` can
     * be used to adjust the action title color on Android.
     */
    title: string;

    /**
     * Fired when the action is invoked.
     */
    onSelect: Listeners<EventObject<this>>;

    /**
     * Fired when the [*image*](#image) property has changed.
     */
    onImageChanged: ChangeListeners<this, 'image'>;

    /**
     * Fired when the [*placement*](#placement) property has changed.
     */
    onPlacementChanged: ChangeListeners<this, 'placement'>;

    /**
     * Fired when the [*title*](#title) property has changed.
     */
    onTitleChanged: ChangeListeners<this, 'title'>;
  }
}


export type Action = widgets.Action;
export type ActionConstructor = typeof widgets.Action;
export interface ActionFactory extends Factory<ActionConstructor>, ActionConstructor {}
export const Action: ActionFactory;

// ActionSheet


export interface ActionSheetCloseEvent<Target = ActionSheet>
 extends EventObject<Target>
{
  readonly action: ActionSheetItem | null;
  readonly index: number | null;
}

export interface ActionSheetSelectEvent<Target = ActionSheet>
 extends EventObject<Target>
{
  readonly action: ActionSheetItem;
  readonly index: number;
}

/**
 * A pop up dialog that offers a selection. Is automatically disposed when closed.
 */
export class ActionSheet extends Popup {

  /**
   * A pop up dialog that offers a selection. Is automatically disposed when closed.
   * 
   * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
   * object which may include (in addition to the properties) children, event listeners and layout
   * shorthands.
   */
  public constructor(properties?: Properties<ActionSheet>);

  /**
   * Makes the given action sheet visible. Meant to be used with inline-JSX. In TypeScript it also casts
   * the given JSX element from `any` to an actual ActionSheet.
   * @param actionSheet The action sheet to open
   */
  static open(actionSheet: ActionSheet): ActionSheet;

  /**
   * An array of objects describing the actions to be displayed. The entries may be instances of
   * `ActionSheetItem` *or plain objects* with some or all of the same properties.
   */
  actions: Array<{title: string, image?: ImageValue, style?: 'default'|'cancel'|'destructive'}>;

  /**
   * @constant
   */
  readonly jsxAttributes: JSXAttributes<this> & {children?: Flatten<string|{title: string, image?: ImageValue, style?: 'default'|'cancel'|'destructive'}>};

  /**
   * A descriptive message for the available actions.
   */
  message: string;

  /**
   * The title of the action sheet.
   */
  title: string;

  /**
   * Fired when the action sheet was closed.
   */
  onClose: Listeners<ActionSheetCloseEvent<this>>;

  /**
   * Fired when an action was selected. Note: on iOS, tapping outside of an ActionSheet will also fire a
   * `select` event. Its parameter will be an index of a button with type `cancel`. This happens despite
   * the fact that no button has been pressed.
   */
  onSelect: Listeners<ActionSheetSelectEvent<this>>;

  /**
   * Fired when the [*actions*](#actions) property has changed.
   */
  onActionsChanged: ChangeListeners<this, 'actions'>;

  /**
   * Fired when the [*message*](#message) property has changed.
   */
  onMessageChanged: ChangeListeners<this, 'message'>;

  /**
   * Fired when the [*title*](#title) property has changed.
   */
  onTitleChanged: ChangeListeners<this, 'title'>;
}


// ActionSheetItem

/**
 * Describes an entry in an [`ActionSheet`](./ActionSheet.md).
 */
export class ActionSheetItem {

  /**
   * Describes an entry in an [`ActionSheet`](./ActionSheet.md).
   */
  public constructor(properties?: {title: string, image?: ImageValue, style?: 'default'|'cancel'|'destructive'});


  readonly [JSX.jsxFactory]: JSX.JsxFactory;

  /**
   * An image to be displayed for this item in the `ActionSheet`
   * @constant
   */
  image: ImageValue;

  /**
   * @constant
   */
  readonly jsxAttributes: {title?: string, image?: ImageValue, style?: 'default'|'cancel'|'destructive', children?: JSXDefaultChildren};

  /**
   * The style of presentation for this item in the `ActionSheet`. With the style `cancel` or
   * `destructive` are displayed in a special way.
   * Note: On iPad, an action with style `cancel` will not be shown in the ActionSheet as per [Apple's
   * design
   * approach](https://developer.apple.com/documentation/uikit/windows_and_screens/getting_the_user_s_attention_with_alerts_and_action_sheets).
   * If such button is added tapping outside of ActionSheet is equivalent to pressing the `cancel` action
   * on iPad. In case of tapping outside an appropriate event will be sent by the native side as if such
   * button was pressed
   * @constant
   */
  style: 'default' | 'cancel' | 'destructive';

  /**
   * The text to be displayed for this item in the `ActionSheet`.
   * @constant
   */
  title: string;
}


// ActivityIndicator


export namespace widgets {

  /**
   * A widget representing a spinning indicator for indeterminate loading / processing time.
   */
  export class ActivityIndicator extends Widget {

    /**
     * A widget representing a spinning indicator for indeterminate loading / processing time.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<ActivityIndicator>);

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & {children?: JSXDefaultChildren};

    /**
     * The color of the indicator.
     */
    tintColor: ColorValue;

    /**
     * Fired when the [*tintColor*](#tintColor) property has changed.
     */
    onTintColorChanged: ChangeListeners<this, 'tintColor'>;
  }
}


export type ActivityIndicator = widgets.ActivityIndicator;
export type ActivityIndicatorConstructor = typeof widgets.ActivityIndicator;
export interface ActivityIndicatorFactory extends Factory<ActivityIndicatorConstructor>, ActivityIndicatorConstructor {}
export const ActivityIndicator: ActivityIndicatorFactory;

// AlertDialog


export interface AlertDialogCloseEvent<Target = AlertDialog>
 extends EventObject<Target>
{
  readonly button: 'ok' | 'cancel' | 'neutral' | null;
  readonly texts: string[];
}

/**
 * An `AlertDialog` represents a native dialog pop-up showing a message and up to three buttons.  Is
 * automatically disposed when closed.
 */
export class AlertDialog extends Popup {

  /**
   * An `AlertDialog` represents a native dialog pop-up showing a message and up to three buttons.  Is
   * automatically disposed when closed.
   * 
   * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
   * object which may include (in addition to the properties) children, event listeners and layout
   * shorthands.
   */
  public constructor(properties?: Properties<Omit<AlertDialog, 'textInputs'>>);

  /**
   * Makes the given alert dialog visible. Meant to be used with inline-JSX. In TypeScript it also casts
   * the given JSX element from `any` to an actual AlertDialog.
   * @param alertDialog The alert dialog to open
   */
  static open(alertDialog: AlertDialog): AlertDialog;

  /**
   * Creates and opens an alert dialog with one 'OK' button and the given message.
   * @param message The message to display
   */
  static open(message: string): AlertDialog;

  /**
   * An object with the texts of the buttons to display. There are up to three buttons: `ok`, `cancel` and
   * `neutral`. If no text is given for a button it will not be displayed. Example: `{ok: 'Yes', cancel:
   * 'No'}` shows 'Yes' and 'No', but no 'neutral' button.
   */
  buttons: {ok?: string, cancel?: string, neutral?: string};

  /**
   * @constant
   */
  readonly jsxAttributes: JSXAttributes<this> & {children?: Flatten<string|TextInput|{cid?: never}>, textInputs?: never};

  /**
   * The message to display inside the dialog.
   */
  message: string;

  /**
   * A composite that may contain `TextInput` widgets to be displayed alongside the `title` and `message`.
   * The text values inserted by the user can be read in the dialogs `close` event via its `texts`
   * property. Eg.: `dialog.on('close', (e) => e.texts[0])`
   * In an AlertDialog JSX element the TextInput widgets may be given as child elements.
   * @constant
   */
  readonly textInputs: ContentView<TextInput>;

  /**
   * The title of the dialog.
   */
  title: string;

  /**
   * Fired when the dialog was closed for any reason.
   */
  onClose: Listeners<AlertDialogCloseEvent<this>>;

  /**
   * Fired when the dialog was closed by pressing the 'cancel' button.
   */
  onCloseCancel: Listeners<EventObject<this>>;

  /**
   * Fired when the dialog was closed by pressing the 'neutral' button.
   */
  onCloseNeutral: Listeners<EventObject<this>>;

  /**
   * Fired when the dialog was closed by pressing the 'ok' button.
   */
  onCloseOk: Listeners<EventObject<this>>;

  /**
   * Fired when the [*buttons*](#buttons) property has changed.
   */
  onButtonsChanged: ChangeListeners<this, 'buttons'>;

  /**
   * Fired when the [*message*](#message) property has changed.
   */
  onMessageChanged: ChangeListeners<this, 'message'>;

  /**
   * Fired when the [*title*](#title) property has changed.
   */
  onTitleChanged: ChangeListeners<this, 'title'>;
}


// Button


export namespace widgets {

  /**
   * A push button. Can contain a text or an image.
   */
  export class Button extends Widget {

    /**
     * A push button. Can contain a text or an image.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<Button>);

    /**
     * The horizontal alignment of the button text.
     */
    alignment: 'centerX' | 'left' | 'right';

    /**
     * Control how the button text is capitalized.
     * * `'default'` - The platform decides on the capitalization
     * * `'none'` - The text is displayed unaltered
     * * `'all'` - Every letter is capitalized
     */
    autoCapitalize: 'default' | 'none' | 'all';

    /**
     * The font used for the button text.
     */
    font: FontValue;

    /**
     * An image to be displayed on the button.
     */
    image: ImageValue;

    /**
     * A color to change the `image` appearance. All opaque parts of the image will be tinted with the given
     * color. Set to `initial` to remove the effect.
     */
    imageTintColor: ColorValue;

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & {children?: Flatten<string|object>};

    /**
     * Controls the line width of a button with the `style` _outline_.
     */
    strokeColor: ColorValue;

    /**
     * Controls the line color of a button with the `style` _outline_. Uses a platform-specific default if
     * set to `null`.
     */
    strokeWidth: number | null;

    /**
     * The `style` controls the appearance of a `Button` and has to be provided in its constructor. The
     * `default` style creates a platform specific button, which is flat on iOS and has an elevation and
     * shadow on Android. In addition the following specific style values can be used:
     * - `elevate` A button with a platform specific background color, elevation and a surrounding drop
     * shadow. Only supported on Android
     * - `flat` A button with no elevation and a platform specific background color
     * - `outline` A button with a transparent background and an outline stroke which can be controlled via
     * the properties `strokeWidth` and `strokeColor`
     * - `text` A button with no background and only consisting of its text label.
     * @constant
     */
    style: 'default' | 'elevate' | 'flat' | 'outline' | 'text';

    /**
     * The button's label text.
     */
    text: string;

    /**
     * The color of the text.
     */
    textColor: ColorValue;

    /**
     * Fired when the button is pressed.
     */
    onSelect: Listeners<EventObject<this>>;

    /**
     * Fired when the [*alignment*](#alignment) property has changed.
     */
    onAlignmentChanged: ChangeListeners<this, 'alignment'>;

    /**
     * Fired when the [*autoCapitalize*](#autoCapitalize) property has changed.
     */
    onAutoCapitalizeChanged: ChangeListeners<this, 'autoCapitalize'>;

    /**
     * Fired when the [*font*](#font) property has changed.
     */
    onFontChanged: ChangeListeners<this, 'font'>;

    /**
     * Fired when the [*image*](#image) property has changed.
     */
    onImageChanged: ChangeListeners<this, 'image'>;

    /**
     * Fired when the [*imageTintColor*](#imageTintColor) property has changed.
     */
    onImageTintColorChanged: ChangeListeners<this, 'imageTintColor'>;

    /**
     * Fired when the [*strokeColor*](#strokeColor) property has changed.
     */
    onStrokeColorChanged: ChangeListeners<this, 'strokeColor'>;

    /**
     * Fired when the [*strokeWidth*](#strokeWidth) property has changed.
     */
    onStrokeWidthChanged: ChangeListeners<this, 'strokeWidth'>;

    /**
     * Fired when the [*text*](#text) property has changed.
     */
    onTextChanged: ChangeListeners<this, 'text'>;

    /**
     * Fired when the [*textColor*](#textColor) property has changed.
     */
    onTextColorChanged: ChangeListeners<this, 'textColor'>;
  }
}


export type Button = widgets.Button;
export type ButtonConstructor = typeof widgets.Button;
export interface ButtonFactory extends Factory<ButtonConstructor>, ButtonConstructor {}
export const Button: ButtonFactory;

// Camera


/**
 * A `Camera` provides access to the device's camera. The `Camera` can be used as a source for a
 * `CameraView` to display a live preview feed or to capture a photo.
 * In order to capture an image or to show a camera preview image the app has to have the
 * [`'camera'`](../permissions.md#category-camera) [permission](./permission.md).
 */
export class Camera extends NativeObject {

  /**
   * A `Camera` provides access to the device's camera. The `Camera` can be used as a source for a
   * `CameraView` to display a live preview feed or to capture a photo.
   * In order to capture an image or to show a camera preview image the app has to have the
   * [`'camera'`](../permissions.md#category-camera) [permission](./permission.md).
   */
  private constructor();

  /**
   * Captures an image and returns a result object when the returned promise resolves successfully. The
   * `Camera` has to be in an `active` state to capture an image. The result object has an `image`
   * property of type `Blob` which contains the jpg encoded image, as well as a `width` and `height`
   * property describing the dimensions of the captured image.
   * @param options A set of capture options to apply when taking a picture. <br/><br/>If `flash` is set to `'auto'` the device will decide (based on the lighting conditions) whether to activate the flashlight.
   */
  captureImage(options?: {flash?: 'auto' | 'on' | 'off'}): Promise<{image: Blob, width: number, height: number}>;

  /**
   * Setting `active` to true activates the camera. If it is currently assigned to a `CameraView`, the
   * `CameraView` will now show the video feed from the `Camera`. It is then possible to capture an image
   * via the `captureImage()` method.
   * Setting `active` to false stops the camera and disables any video feed shown on a `CameraView`.
   * It is recommended to stop the `Camera` when not in use in order to preserve battery life.
   */
  active: boolean;

  /**
   * An array of resolutions supported by the camera. Each array entry is an object consisting of `width`
   * and `height`. Eg.: `{width: 4000, height: 3000}
   */
  readonly availableCaptureResolutions: Array<{width: number, height: number}>;

  /**
   * The id of the device camera given by the native platform.
   * @constant
   */
  readonly cameraId: string;

  /**
   * An object determining the pixel dimensions of the captured image. Has to be an object containing
   * `width` and `height` properties of type `number`. The list of natively available resolutions can be
   * obtained from the `availableCaptureResolutions` property.
   * If the given `captureResolution` is not in the list of `availableCaptureResolutions`, a closely
   * matching resolution larger than the given resolution is used. When no `captureResolution` is given
   * (value is `null`), the best possible match for the device is chosen automatically. The physical
   * dimensions of the captured image should be checked on the resolved result object of the
   * `captureImage()` method.
   * When setting the `captureResolution` on the iOS platform, a small grace period should pass before
   * capturing an image. Otherwise the image might turn out incorrectly exposed.
   */
  captureResolution: {width: number, height: number};

  /**
   * The position of the camera on the device. The `external` position is used for devices like usb
   * cameras.
   * @constant
   */
  readonly position: 'front' | 'back' | 'external';

  /**
   * Fired when the [*active*](#active) property has changed.
   */
  onActiveChanged: ChangeListeners<this, 'active'>;

  /**
   * Fired when the [*availableCaptureResolutions*](#availableCaptureResolutions) property has changed.
   */
  onAvailableCaptureResolutionsChanged: ChangeListeners<this, 'availableCaptureResolutions'>;

  /**
   * Fired when the [*captureResolution*](#captureResolution) property has changed.
   */
  onCaptureResolutionChanged: ChangeListeners<this, 'captureResolution'>;
}


// CameraView


export namespace widgets {

  /**
   * A widget to preview a `Camera` feed.
   * In order to show a camera preview image the app has to hold the `'camera'` permission.
   */
  export class CameraView extends Widget {

    /**
     * A widget to preview a `Camera` feed.
     * In order to show a camera preview image the app has to hold the `'camera'` permission.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<CameraView>);

    /**
     * The source video feed to display. In order to show a preview the `Camera` has to be in an active
     * state. When the `Camera` is inactive or no `Camera` is assigned the `CameraView` shows a blank
     * screen. 
     * It is recommended to deactivate the `Camera` when not in use in order to preserve battery life.
     */
    camera: Camera;

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & {children?: JSXDefaultChildren};

    /**
     * How to scale the camera preview image.
     * - `fit` will scale the image proportionally to fit into the view, possible leaving some empty space
     * at the edges. That is, the image will be displayed as large as possible while being fully contained
     * in the view.
     * - `fill` will scale the image proportionally to fill the entire view, possibly cutting off parts of
     * the image. That is, the image will be displayed as small as possible while covering the entire view.
     */
    scaleMode: 'fit' | 'fill';

    /**
     * Fired when the [*camera*](#camera) property has changed.
     */
    onCameraChanged: ChangeListeners<this, 'camera'>;

    /**
     * Fired when the [*scaleMode*](#scaleMode) property has changed.
     */
    onScaleModeChanged: ChangeListeners<this, 'scaleMode'>;
  }
}


export type CameraView = widgets.CameraView;
export type CameraViewConstructor = typeof widgets.CameraView;
export interface CameraViewFactory extends Factory<CameraViewConstructor>, CameraViewConstructor {}
export const CameraView: CameraViewFactory;

// Canvas


export namespace widgets {

  /**
   * Canvas is a widget that can be used to draw graphics using a [canvas context](./CanvasContext.md).
   */
  export class Canvas extends Composite {

    /**
     * Canvas is a widget that can be used to draw graphics using a [canvas context](./CanvasContext.md).
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<Canvas>);

    /**
     * Returns the drawing context with the given size.
     * @param contextType The context identifier. Only `"2d"` is supported.
     * @param width the width of the canvas context to create
     * @param height the height of the canvas context to create
     */
    getContext(contextType: string, width: number, height: number): CanvasContext;

    /**
     * Creates a Blob object representing the image contained in the canvas. This is a non-blocking
     * operation.
     * @param callback Callback that will be called with the resulting blob.
     * @param mimeType The expected image format. If `mimeType` is not specified or invalid, the image type is `image/png`. **On iOS the type `image/webp` is not supported. A png will be returned instead.**
     * @param quality A Number between 0 and 1 specifying the image quality. A lower number results in a smaller file size at the same resolution. If `quality` is not specified or invalid the value `0.92` is for `image/jpeg` and  `0.80` for `image/webp` respectively. The value has no effect for `image/png`.
     */
    toBlob(callback: ((blob:Blob) => void), mimeType?: 'image/png' | 'image/jpeg' | 'image/webp', quality?: number): void;
  }
}


export type Canvas = widgets.Canvas;
export type CanvasConstructor = typeof widgets.Canvas;
export interface CanvasFactory extends Factory<CanvasConstructor>, CanvasConstructor {}
export const Canvas: CanvasFactory;

// CanvasContext

/**
 * The CanvasContext is used for drawing onto the [canvas](./Canvas.md). It is a subset of the HTML5
 * [CanvasRenderingContext2D](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D).
 */
export class CanvasContext {

  /**
   * The CanvasContext is used for drawing onto the [canvas](./Canvas.md). It is a subset of the HTML5
   * [CanvasRenderingContext2D](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D).
   */
  private constructor();

  /**
   * Adds an arc to the path which is centered at *(x, y)* position with radius *r* starting at
   * *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to
   * clockwise).
   * @param x The x coordinate of the arc's center.
   * @param y The y coordinate of the arc's center.
   * @param radius The arc's radius.
   * @param startAngle The angle in radians at which the arc starts, measured clockwise from the positive x axis.
   * @param endAngle The angle in radians at which the arc ends, measured clockwise from the positive x axis.
   * @param anticlockwise if true, causes the arc to be drawn counter-clockwise between the two angles.
   */
  arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;

  /**
   * Starts a new path by emptying the list of sub-paths.
   */
  beginPath(): void;

  /**
   * Adds a cubic Bézier curve to the path. The starting point is the last point in the current path.
   * @param cp1x The x axis of the coordinate for the first control point.
   * @param cp1y The y axis of the coordinate for the first control point.
   * @param cp2x The x axis of the coordinate for the second control point.
   * @param cp2y The y axis of the coordinate for the second control point.
   * @param x The x axis of the coordinate for the end point.
   * @param y The y axis of the coordinate for the end point.
   */
  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;

  /**
   * Sets all pixels in the rectangle defined by starting point *(x, y)* and size *(width, height)* to
   * transparent, erasing any previously drawn content.
   * @param x The x axis of the rectangle's upper-left corner.
   * @param y The y axis of the rectangle's upper-left corner.
   * @param width The rectangle's width.
   * @param height The rectangles height.
   */
  clearRect(x: number, y: number, width: number, height: number): void;

  /**
   * Adds a straight line from the current point to the start of the current sub-path.
   */
  closePath(): void;

  /**
   * creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new
   * object are transparent black.
   * @param width The width of the new ImageData object.
   * @param height The height of the new ImageData object.
   */
  createImageData(width: number, height: number): ImageData;

  /**
   * creates a new, blank ImageData object with the same dimensions as the specified existing ImageData
   * object. All of the pixels in the new object are transparent black.
   * @param imageData An existing ImageData object from which to copy the width and height.
   */
  createImageData(imageData: ImageData): ImageData;

  /**
   * Draws the entire given ImageBitmap at the given coordinates (dx, dy) in its natural size.
   * @param image An ImageBitmap object that has not been closed yet.
   * @param dx Destination x-coordinate of the upper-left corner of the image
   * @param dy Destination y-coordinate of the upper-left corner of the image
   */
  drawImage(image: ImageBitmap, dx: number, dy: number): void;

  /**
   * Draws the entire given ImageBitmap at the given coordinates (dx, dy) in the given dimension (dWidth,
   * dHeight).
   * @param image An ImageBitmap object that has not been closed yet.
   * @param dx Destination x-coordinate of the upper-left corner of the image
   * @param dy Destination y-coordinate of the upper-left corner of the image
   * @param dWidth Destination width of the image
   * @param dHeight Destination height of the image
   */
  drawImage(image: ImageBitmap, dx: number, dy: number, dWidth: number, dHeight: number): void;

  /**
   * Draws a section (sx, sy, sWidth, sHeight) of the given ImageBitmap at the given coordinates (dx, dy)
   * in the given dimension (dWidth, dHeight).
   * @param image An ImageBitmap object that has not been closed yet.
   * @param sx Source x-coordinate of the upper-left corner of the image
   * @param sy Source y-coordinate of the upper-left corner of the image
   * @param sWidth Source width of the image
   * @param sHeight Source height of the image
   * @param dx Destination x-coordinate of the upper-left corner of the image
   * @param dy Destination y-coordinate of the upper-left corner of the image
   * @param dWidth Destination width of the image
   * @param dHeight Destination height of the image
   */
  drawImage(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number): void;

  /**
   * Fills the current or path with the current fill style.
   */
  fill(): void;

  /**
   * draws a filled rectangle at *(x, y)* position whose size is determined by *width* and *height*. and
   * whose color is determined by the fillStyle attribute.
   * @param x The x axis of the rectangle's upper-left corner.
   * @param y The y axis of the rectangle's upper-left corner.
   * @param width The rectangle's width.
   * @param height The rectangles height.
   */
  fillRect(x: number, y: number, width: number, height: number): void;

  /**
   * Fills a given text at the given *(x, y)* position using the current *textAlign* and *textBaseline*
   * values.
   * @param text The text to render.
   * @param x The x axis of the coordinate for the text starting point.
   * @param y The y axis of the coordinate for the text starting point.
   */
  fillText(text: string, x: number, y: number): void;

  /**
   * Returns an ImageData object representing the underlying pixel data for the area of the canvas denoted
   * by the given rectangle.
   * @param x The x axis of the rectangle's upper-left corner.
   * @param y The y axis of the rectangle's upper-left corner.
   * @param width The rectangle's width.
   * @param height The rectangle's height.
   */
  getImageData(x: number, y: number, width: number, height: number): ImageData;

  /**
   * Connects the last point in the sub-path to the *(x, y)* coordinates with a straight line.
   * @param x The x axis of the coordinate for the end of the line.
   * @param y The y axis of the coordinate for the end of the line.
   */
  lineTo(x: number, y: number): void;

  /**
   * Moves the starting point of a new sub-path to the *(x, y)* coordinates.
   * @param x The x axis of the point.
   * @param y The y axis of the point.
   */
  moveTo(x: number, y: number): void;

  /**
   * Paints data from the given ImageData object onto the bitmap at coordinates (x, y).
   * @param imageData An ImageData object containing the array of pixel values.
   * @param x x-coordinate of the upper-left corner of the image data rectangle
   * @param y y-coordinate of the upper-left corner of the image data rectangle
   */
  putImageData(imageData: ImageData, x: number, y: number): void;

  /**
   * Adds a quadratic Bézier curve to the path. The starting point is the last point in the current path.
   * @param cpx The x axis of the coordinate for the control point.
   * @param cpy The y axis of the coordinate for the control point.
   * @param x The x axis of the coordinate for the end point.
   * @param y The y axis of the coordinate for the end point.
   */
  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;

  /**
   * Creates a path for a rectangle with the top-left corner at *(x, y)*
   * @param x The x axis of the rectangle's upper-left corner.
   * @param y The y axis of the rectangle's upper-left corner.
   * @param width The rectangle's width.
   * @param height The rectangles height.
   */
  rect(x: number, y: number, width: number, height: number): void;

  /**
   * Restores the most recently saved canvas state by popping the top entry in the drawing state stack.
   */
  restore(): void;

  /**
   * Adds a rotation to the transformation matrix.
   * @param angle  The angle to rotate clockwise in radians.
   */
  rotate(angle: number): void;

  /**
   * Saves the entire state of the canvas by pushing the current state onto a stack.
   */
  save(): void;

  /**
   * Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
   * @param x Scaling factor in the horizontal direction.
   * @param y Scaling factor in the vertical direction.
   */
  scale(x: number, y: number): void;

  /**
   * resets (overrides) the current transformation to the identity matrix and then invokes a
   * transformation described by the arguments of this method. The matrix has the following format:
   * [[a, c, e],
   * [b, d, f],
   * [0, 0, 1]]
   * @param a Horizontal scaling.
   * @param b Horizontal skewing.
   * @param c Vertical skewing.
   * @param d Vertical scaling.
   * @param e Horizontal moving.
   * @param f Vertical moving.
   */
  setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;

  /**
   * Strokes the current path with the current stroke style.
   */
  stroke(): void;

  /**
   * draws the outline of a rectangle at *(x, y)* position whose size is determined by *width* and
   * *height* using the current stroke style.
   * @param x The x axis of the rectangle's upper-left corner.
   * @param y The y axis of the rectangle's upper-left corner.
   * @param width The rectangle's width.
   * @param height The rectangles height.
   */
  strokeRect(x: number, y: number, width: number, height: number): void;

  /**
   * Strokes a given text at the given *(x, y)* position using the current *textAlign* and *textBaseline*
   * values.
   * @param text The text to render.
   * @param x The x axis of the coordinate for the text starting point.
   * @param y The y axis of the coordinate for the text starting point.
   */
  strokeText(text: string, x: number, y: number): void;

  /**
   * Multiplies the current transformation with the matrix described by the arguments of this method. The
   * matrix has the following format:
   * [[a, c, e],
   * [b, d, f],
   * [0, 0, 1]]
   * @param a Horizontal scaling.
   * @param b Horizontal skewing.
   * @param c Vertical skewing.
   * @param d Vertical scaling.
   * @param e Horizontal moving.
   * @param f Vertical moving.
   */
  transform(a: number, b: number, c: number, d: number, e: number, f: number): void;

  /**
   * Adds a translation transformation by moving the canvas and its origin *x* horizontally and *y*
   * vertically on the grid.
   * @param x The distance to move in the horizontal direction.
   * @param y The distance to move in the vertical direction.
   */
  translate(x: number, y: number): void;

  /**
   * Specifies the color to use inside shapes.
   */
  fillStyle: ColorValue;

  /**
   * Specifies the current text style being used when drawing text.
   */
  font: FontValue;

  /**
   * Determines how the end points of every line are drawn.
   */
  lineCap: 'butt' | 'round' | 'square';

  /**
   * Determines how two connecting segments in a shape are joined together.
   */
  lineJoin: 'bevel' | 'miter' | 'round';

  /**
   * The thickness of lines in space units.
   */
  lineWidth: number;

  /**
   * Specifies the color to use for the lines around shapes.
   */
  strokeStyle: ColorValue;

  /**
   * Specifies the current text alignment being used when drawing text.
   */
  textAlign: 'center' | 'end' | 'left' | 'right' | 'start';

  /**
   * Specifies the current text baseline being used when drawing text.
   */
  textBaseline: 'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top';
}


// ChangeListeners

/**
 * Represents a collection of listeners for a property change event. Differs from its superclass in the
 * constructor signature and the additional [`values`](#values) property.
 */
export class ChangeListeners<Target extends object, Property extends keyof Target> extends Listeners<PropertyChangedEvent<Target, Target[Property]>> {

  /**
   * Represents a collection of listeners for a property change event. Differs from its superclass in the
   * constructor signature and the additional [`values`](#values) property.
   */
  public constructor(target: Target, property: Property);

  /**
   * An observable instance that directly provides the changed values instead of the event object. Also,
   * the current value will be emitted immediately upon subscription. Completes when the target is
   * disposed.
   * @constant
   */
  readonly values: Observable<Target[Property]>;
}


// CheckBox


export interface CheckBoxSelectEvent<Target = CheckBox>
 extends EventObject<Target>
{
  readonly checked: boolean;
}

export namespace widgets {

  /**
   * A check box widget.
   */
  export class CheckBox extends Widget {

    /**
     * A check box widget.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<CheckBox>);

    /**
     * The checked state of the check box.
     */
    checked: boolean;

    /**
     * The color of the selectable area in checked state. Will fall back to `tintColor` if not set.
     */
    checkedTintColor: ColorValue;

    /**
     * The font used for the text.
     */
    font: FontValue;

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & {children?: JSXDefaultChildren};

    /**
     * The label text of the check box.
     */
    text: string;

    /**
     * The color of the text.
     */
    textColor: ColorValue;

    /**
     * The color of the selectable area.
     */
    tintColor: ColorValue;

    /**
     * Fired when the check box is checked or unchecked by the user.
     */
    onSelect: Listeners<CheckBoxSelectEvent<this>>;

    /**
     * Fired when the [*checked*](#checked) property has changed.
     */
    onCheckedChanged: ChangeListeners<this, 'checked'>;

    /**
     * Fired when the [*checkedTintColor*](#checkedTintColor) property has changed.
     */
    onCheckedTintColorChanged: ChangeListeners<this, 'checkedTintColor'>;

    /**
     * Fired when the [*font*](#font) property has changed.
     */
    onFontChanged: ChangeListeners<this, 'font'>;

    /**
     * Fired when the [*text*](#text) property has changed.
     */
    onTextChanged: ChangeListeners<this, 'text'>;

    /**
     * Fired when the [*textColor*](#textColor) property has changed.
     */
    onTextColorChanged: ChangeListeners<this, 'textColor'>;

    /**
     * Fired when the [*tintColor*](#tintColor) property has changed.
     */
    onTintColorChanged: ChangeListeners<this, 'tintColor'>;
  }
}


export type CheckBox = widgets.CheckBox;
export type CheckBoxConstructor = typeof widgets.CheckBox;
export interface CheckBoxFactory extends Factory<CheckBoxConstructor>, CheckBoxConstructor {}
export const CheckBox: CheckBoxFactory;

// CollectionView


export interface CollectionViewScrollEvent<Target = CollectionView>
 extends EventObject<Target>
{
  readonly deltaX: number;
  readonly deltaY: number;
}

export namespace widgets {

  /**
   * A scrollable list that displays data items in cells, one per row. Cells are created on demand by the
   * *createCell* callback and reused on scrolling.
   */
  export class CollectionView<CellWidgetType extends Widget = Widget> extends Composite<CellWidgetType> {

    /**
     * A scrollable list that displays data items in cells, one per row. Cells are created on demand by the
     * *createCell* callback and reused on scrolling.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<Omit<CollectionView<CellWidgetType>, 'firstVisibleIndex' | 'lastVisibleIndex'>> & Partial<Pick<CollectionView<CellWidgetType>, 'cellHeight' | 'cellType' | 'createCell' | 'updateCell'>>);

    /**
     * Returns the cell currently associated with the given item index. Returns `null` if the item is not
     * currently displayed.
     * @param itemIndex The index of the item as given in `updateCell`.
     */
    cellByItemIndex(itemIndex: number): CellWidgetType | null;

    /**
     * Inserts one or more items at the given index. When no *count* is specified, a single item will be
     * added at the given *index*. New cells may be created if needed. The `updateCell` callback will only
     * be called for those new items that become immediately visible. Note that inserting new items changes
     * the index of all subsequent items. This operation will update the `itemCount` property.
     * @param index
     * @param count The position to insert the items at. A negative index is interpreted as relative to the end. If the given index is greater than the item count, new items will be appended at the end.
     */
    insert(index: number, count?: number): void;

    /**
     * Determines the item index currently associated with the given cell.
     * @param widget A widget instance created by `createCell`, or a child of that widget.
     */
    itemIndex(widget: Widget): number;

    /**
     * Loads a new model with the given *itemCount*. This operation will update the `itemCount` property.
     * @param itemCount The number of items in the model to load.
     */
    load(itemCount: number): void;

    /**
     * Triggers an update of the item at the given *index* by calling the `updateCell` callback of the
     * corresponding. If no *index* is given, all visible items will be updated.
     * @param index The index of the item that was changed.
     */
    refresh(index?: number): void;

    /**
     * Removes one or more items beginning with the given index. When no *count* is given, only the item at
     * *index* will be removed. Note that this changes the index of all subsequent items, however. This
     * operation will update the `itemCount` property.
     * @param index The index of the first item to remove. A negative value is interpreted as relative to the end.
     * @param count The number of items to remove.
     */
    remove(index: number, count?: number): void;

    /**
     * Scrolls the item with the given index into view.
     * @param index The index of the item to reveal. If this is negative, it is interpreted as relative to the end
     * @param options An additional object to control the animation.

    - `animate` allows to scroll to an item in an animated fashion. The `animate` property defaults to `true` when no options object is given.

    - `offset` shifts the targeted scroll position by a device independent pixel value. When `offset` is used the targeted reveal scroll position will start from the top of the `CollectionView`. Applying `offset` will perform the `reveal()` operation without an animation, ignoring the `animate` property.
     */
    reveal(index: number, options?: {animate?: boolean, offset?: number}): void;

    /**
     * Sets all key-value pairs in the properties object as widget properties.
     * **Important TypeScript note:** When called on `this` you may need to specify your custom type like
     * this: `this.set<MyComponent>({propA: valueA});`
     * @param properties
     */
    set<T extends NativeObject = this>(properties: Properties<T> & Partial<Pick<this, 'cellHeight' | 'cellType' | 'createCell'>>): this;

    /**
     * The height of a collection cell. If set to `'auto'`, the cell height will be calculated individually
     * for each cell. If set to a function, this function will be called for every item, providing the item
     * index and the cell type as parameters, and must return the cell height for the given item.
     * Note: On iOS `"auto"` may cause significant performance downgrade as it requires additional layouting
     * passes to calculate cell height internally. If possible please use a combination of fixed
     * `itemHeight` and `cellType` properties to specify different height for different cells.
     */
    cellHeight: number | 'auto' | ((index:number, cellType:string) => number | 'auto');

    /**
     * The name of the cell type to use for the item at the given index. This name will be passed to the
     * `createCell` and `cellHeight` callbacks. Cells will be reused only for those items that map to the
     * same cell type. If set to a function, this function will be called for every item, providing the item
     * index as a parameter, and must return a unique name for the cell type to use for the given item.
     */
    cellType: string | ((index:number) => string) | null;

    /**
     * The number of columns to display in the collection view. If set to a value `n > 1`, each row will
     * contain `n` items. The available space will be equally distributed between columns.
     */
    columnCount: number;

    /**
     * A callback used to create a new reusable cell widget for a given type. This callback will be called
     * by the framework and the created cell will be reused for different items. The created widget should
     * be populated in the `updateCell` function.
     */
    createCell: ((cellType:string) => CellWidgetType);

    /**
     * Enables the fast scroll thumb that can be dragged to quickly scroll through the list of items. The
     * feature is enabled by default in iOS devices starting from version 13 and cannot be disabled anymore.
     */
    fastScroll: boolean;

    /**
     * The index of the first item that is currently visible on screen.
     */
    readonly firstVisibleIndex: number;

    /**
     * The number of items to display. To add or remove items later, use the methods `insert()` and
     * `remove()` instead of setting the `itemCount`. To display a new list of items, use the `load()`
     * method.
     */
    itemCount: number;

    /**
     * @constant
     */
    readonly jsxAttributes: JSXCompositeAttributes<this, any> & Partial<Record<'firstVisibleIndex' | 'lastVisibleIndex', never>> & Partial<Pick<this, 'cellHeight' | 'cellType' | 'createCell' | 'updateCell'>> ;

    /**
     * The index of the last item that is currently visible on screen.
     */
    readonly lastVisibleIndex: number;

    /**
     * Enables the user to trigger a refresh by using the pull-to-refresh gesture.
     */
    refreshEnabled: boolean;

    /**
     * Whether the refresh indicator is currently visible. Will be set to `true` when a *refresh* event is
     * triggered. Reset it to `false` when the refresh is finished.
     */
    refreshIndicator: boolean;

    /**
     * The message text displayed together with the refresh indicator.
     */
    refreshMessage: string;

    /**
     * Allows to show or hide the scroll bar. When the scroll bar is hidden, it will be briefly visible
     * while scrolling.
     */
    scrollbarVisible: boolean;

    /**
     * A callback used to update a given cell widget to display the item with the given index. This callback
     * will be called by the framework.
     */
    updateCell: ((cell:CellWidgetType, index:number) => void);

    /**
     * Fired when the user requested a refresh. An event listener should reset the *refreshIndicator*
     * property when refresh is finished.
     */
    onRefresh: Listeners<EventObject<this>>;

    /**
     * Fired while the collection view is scrolling.
     */
    onScroll: Listeners<CollectionViewScrollEvent<this>>;

    /**
     * Fired when the [*cellHeight*](#cellHeight) property has changed.
     */
    onCellHeightChanged: ChangeListeners<this, 'cellHeight'>;

    /**
     * Fired when the [*cellType*](#cellType) property has changed.
     */
    onCellTypeChanged: ChangeListeners<this, 'cellType'>;

    /**
     * Fired when the [*columnCount*](#columnCount) property has changed.
     */
    onColumnCountChanged: ChangeListeners<this, 'columnCount'>;

    /**
     * Fired when the [*createCell*](#createCell) property has changed.
     */
    onCreateCellChanged: ChangeListeners<this, 'createCell'>;

    /**
     * Fired when the [*fastScroll*](#fastScroll) property has changed.
     */
    onFastScrollChanged: ChangeListeners<this, 'fastScroll'>;

    /**
     * Fired when the [*firstVisibleIndex*](#firstVisibleIndex) property has changed.
     */
    onFirstVisibleIndexChanged: ChangeListeners<this, 'firstVisibleIndex'>;

    /**
     * Fired when the [*itemCount*](#itemCount) property has changed.
     */
    onItemCountChanged: ChangeListeners<this, 'itemCount'>;

    /**
     * Fired when the [*lastVisibleIndex*](#lastVisibleIndex) property has changed.
     */
    onLastVisibleIndexChanged: ChangeListeners<this, 'lastVisibleIndex'>;

    /**
     * Fired when the [*refreshEnabled*](#refreshEnabled) property has changed.
     */
    onRefreshEnabledChanged: ChangeListeners<this, 'refreshEnabled'>;

    /**
     * Fired when the [*refreshIndicator*](#refreshIndicator) property has changed.
     */
    onRefreshIndicatorChanged: ChangeListeners<this, 'refreshIndicator'>;

    /**
     * Fired when the [*refreshMessage*](#refreshMessage) property has changed.
     */
    onRefreshMessageChanged: ChangeListeners<this, 'refreshMessage'>;

    /**
     * Fired when the [*scrollbarVisible*](#scrollbarVisible) property has changed.
     */
    onScrollbarVisibleChanged: ChangeListeners<this, 'scrollbarVisible'>;

    /**
     * Fired when the [*updateCell*](#updateCell) property has changed.
     */
    onUpdateCellChanged: ChangeListeners<this, 'updateCell'>;
  }
}


export type CollectionView<CellWidgetType extends Widget = Widget> = widgets.CollectionView<CellWidgetType>;
export type CollectionViewConstructor = typeof widgets.CollectionView;
export interface CollectionViewFactory extends Factory<CollectionViewConstructor>, CollectionViewConstructor {}
export const CollectionView: CollectionViewFactory;

// Color

/**
 * Represents a color. See also ${doc:ColorValue}
 */
export class Color {

  /**
   * Represents a color. See also ${doc:ColorValue}
   */
  public constructor(red: number, green: number, blue: number, alpha?: number);

  /**
   * Tests if the given value is a `Color` instance that is deeply equal to this one.
   * @param value
   */
  equals(value: Color): boolean;

  /**
   * Returns a array representation of the color in the format of `[red, green, blue, alpha]`. Each value
   * is a number between (and in including) 0 and 255.
   */
  toArray(): [number, number, number, number];

  /**
   * Returns a string representation of the color. Is either in `rgb(red, green, blue)` or `rgba(red,
   * green, blue, alpha)` format. Note that alpha is a value between 0 and 1 in the string representation,
   * but between 0 and 255 on the Color object.
   */
  toString(): string;

  /**
   * Creates a new instance of Color using any valid color expression. For any other value, including
   * `null` and `'initial'` the method throws.
   * @param colorValue The value to create a Color instance from
   */
  static from(colorValue: ColorValue): Color;

  /**
   * Returns true if value is a ColorValue. This includes `null` and `'initial'`. Use this to check if a
   * value will be accepted by a color property. This is also a valid TypeScript type guard function.
   * @param value The value to test
   */
  static isColorValue(value: any): value is ColorValue;

  /**
   * Returns true if value is a valid ColorValue. This excludes `null` and `'initial'`. Use this to check
   * if a value will be accepted by Color.from. This is also a valid TypeScript type guard function.
   * @param value The value to test
   */
  static isValidColorValue(value: any): value is ColorValue;

  /**
   * A number between and including 0 and 255
   * @constant
   */
  readonly alpha: number;

  /**
   * A number between and including 0 and 255
   * @constant
   */
  readonly blue: number;

  /**
   * A number between and including 0 and 255
   * @constant
   */
  readonly green: number;

  /**
   * A number between and including 0 and 255
   * @constant
   */
  readonly red: number;

  /**
   * @constant
   */
  static readonly aqua: Color;

  /**
   * @constant
   */
  static readonly black: Color;

  /**
   * @constant
   */
  static readonly blue: Color;

  /**
   * @constant
   */
  static readonly fuchsia: Color;

  /**
   * @constant
   */
  static readonly gray: Color;

  /**
   * @constant
   */
  static readonly green: Color;

  /**
   * @constant
   */
  static readonly lime: Color;

  /**
   * @constant
   */
  static readonly maroon: Color;

  /**
   * @constant
   */
  static readonly navy: Color;

  /**
   * @constant
   */
  static readonly olive: Color;

  /**
   * @constant
   */
  static readonly purple: Color;

  /**
   * @constant
   */
  static readonly red: Color;

  /**
   * @constant
   */
  static readonly silver: Color;

  /**
   * @constant
   */
  static readonly teal: Color;

  /**
   * @constant
   */
  static readonly transparent: Color;

  /**
   * @constant
   */
  static readonly white: Color;

  /**
   * @constant
   */
  static readonly yellow: Color;
}


// ColorResources

/**
 * This is the base class for all color resource dictionaries. Instances can be obtained via the `from`
 * method, or by subclassing. All members of a `ColorResources` (or subclass) instance will be of the
 * type `Color`.
 */
export class ColorResources extends Resources<Color, ColorValue> {

  /**
   * This is the base class for all color resource dictionaries. Instances can be obtained via the `from`
   * method, or by subclassing. All members of a `ColorResources` (or subclass) instance will be of the
   * type `Color`.
   */
  protected constructor(options: ResourcesConstructorOptions<Color, ColorValue>);

  /**
   * Creates a colors dictionary from the given raw "data" object. All colors from the given "base"
   * dictionary are inherited unless overwritten.
   * Entries in the "data" object starting with "$" are considered configuration options and will not
   * become entries in the final colors dictionary.
   * @param base A plain object or another `ColorResources` instance containing values to inherit by the new `ColorResources` dictionary.
   * @param data The raw data (plain object) to create the dictionary from. The format must match the [Tabris.js colors JSON schema](${doc:colors.json}).
   */
  static from<Base extends NamedResources<Color, keyof Base>, Data extends ResourceDataWithConfig<ColorValue>>(base: Base, data: Data): NamedResources<Color, keyof (Base & Data)>;

  /**
   * Creates a colors dictionary from the given raw "data" object. The format must match the [Tabris.js
   * colors JSON schema](${doc:colors.json}). Entries in the "data" object starting with "$" are
   * considered configuration options and will not become entries in the final colors dictionary.
   * @param data The raw data (plain object) to create the dictionary from. The format must match the [Tabris.js colors JSON schema](${doc:colors.json}).
   */
  static from<Data extends ResourceDataWithConfig<ColorValue>>(data: Data): NamedResources<Color, keyof Data>;
}


// Composite


export interface CompositeAddChildEvent<Target = Composite>
 extends EventObject<Target>
{
  readonly child: Widget;
  readonly index: number;
}

export interface CompositeRemoveChildEvent<Target = Composite>
 extends EventObject<Target>
{
  readonly child: Widget;
  readonly index: number;
}

export namespace widgets {

  /**
   * An empty widget that can contain other widgets.
   */
  export class Composite<ChildType extends Widget = Widget> extends Widget {

    /**
     * An empty widget that can contain other widgets.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<Composite>);


    private $flushChildren(): void;

    /**
     * Called by the framework with each widget that is about to be added as a child of this composite. May
     * be overwritten to reject some or all children by returning `false`.
     * @param child
     */
    protected _acceptChild(child: Widget): boolean;

    /**
     * Called by the framework with a child to be assigned to this composite. Triggers the 'addChild' event.
     * May be overwritten to run any code prior or after the child is inserted.
     * @param child
     * @param index
     */
    protected _addChild(child: Widget, index?: number): void;

    /**
     * Identical to the `apply(options, rules)` method, but intended to be used by subclasses in case the
     * `children` method was overwritten . See "[Encapsulation](../selector.md#encapsulation)"
     * @param options If mode is set to `'strict'` the function checks that all selector match at least one widget, and that id selector match exactly one widget. <br/>A `trigger` is string to be associated with the given rulset. If set to `'update'`, the ruleset will be applied once immediately and then again every time `apply('update')` is called. If set to any event-attribute name, such as `'onTap'`, it will automatically re-apply the ruleset when this event is triggered.
     * @param rules The ruleset to apply. May also be given as a callback which is passed to the widget instance and must return the actual ruleset.
     */
    protected _apply<Target = this>(options: {mode?: 'default'|'strict', trigger?: ListenersKeysOf<Target> | 'update' | '*' | symbol}, rules: RuleSet<this>): this;

    /**
     * Identical to the `apply(rules)` method, but intended to be used by subclasses in case the `children`
     * method was overwritten . See "[Encapsulation](../selector.md#encapsulation)"
     * @param rules The ruleset to apply. May also be given as a callback which is passed to the widget instance and must return the actual ruleset.
     */
    protected _apply(rules: RuleSet<this>): this;

    /**
     * Identical to the `apply(mode, rules)` method, but intended to be used by subclasses in case the
     * `children` method was overwritten . See "[Encapsulation](../selector.md#encapsulation)"
     * @param mode If this is set to `'strict'` the function checks that all selector match at least one widget, and that id selector match exactly one widget.
     * @param rules The ruleset to apply. May also be given as a callback which is passed to the widget instance and must return the actual ruleset.
     */
    protected _apply(mode: 'default' | 'strict', rules: RuleSet<this>): this;

    /**
     * Applies the ruleset from the last call with `trigger` set to `'update' or '*'`.
     * @param trigger
     */
    protected _apply(trigger: ListenersKeysOf<this> | 'update' | '*' | symbol): this;

    /**
     * Called by the framework with the layout about to be assigned to this composite. May be overwritten to
     * reject a layout by throwing an Error.
     * @param value
     */
    protected _checkLayout(value: Layout): void;

    /**
     * Identical to the `children` method, but intended to be used by subclasses in case the `children`
     * method was overwritten. See "[Encapsulation](../selector.md#encapsulation)".
     * @param selector A selector expression or a predicate function to filter the results.
     */
    protected _children<Result extends ChildType = ChildType>(selector?: Selector<ChildType, Result>): WidgetCollection<Result>;

    /**
     * Identical to the `find` method, but intended to be used only by subclasses (custom components) that
     * encapsulate their children. This is the case if the `children` method was overwritten or the
     * `@component` decorator is used on the subclass.
     * @param selector A selector expression or a predicate function to filter the results.
     */
    protected _find<Result extends Widget = Widget>(selector?: Selector<Widget, Result>): WidgetCollection<Result>;

    /**
     * Called with the constructor paramter (if any) to initialize the composite's layout manager. May be
     * overwritten to customize/replace the layout. The new implementation must make a super call to
     * initialize the layout.
     * @param props
     */
    protected _initLayout(props?: {layout?: Layout}): void;

    /**
     * Called by the framework with a child to be removed from this composite. Triggers the 'removeChild'
     * event. May be overwritten to run any code prior or after the child is removed.
     * @param child
     */
    protected _removeChild(child: Widget): void;


    private _scheduleRenderChildren(): void;

    /**
     * Adds the given widgets to the composite.
     * @param widgets
     */
    append(...widgets: ChildType[]): this;

    /**
     * Adds all widgets in the given array to the composite.
     * @param widgets
     */
    append(widgets: ChildType[]): this;

    /**
     * Adds all widgets in the given collection to the composite.
     * @param widgets
     */
    append(widgets: WidgetCollection<ChildType>): this;

    /**
     * See also the article ["Selector API"](../selector.md#compositeapply).<br/><br/>Applies the given
     * attributes to all descendants that match the associated selector(s). Each attributes object may
     * contain properties to be set and listeners to be registered. An entry will be treated as a listener
     * if it follows the naming scheme "onEventType". IMPORTANT: Listeners previously registered (for the
     * same type) via the `apply` method, a [JSX](../declarative-ui.md) element attribute or a [widget
     * factory](./utils.md#asfactoryconstructor) call will be de-registered. This means you can call apply
     * repeatedly and have a deterministic outcome. Listeners registered programmatically (e.g.
     * `widget.onTap(...)` are not affected by this.) <br/><br/>For better type safety enable [strict
     * mode](#applymode-rules) and use [`Setter`](./Setter.md) to create properties objects.
     * If you wish to always exclude specific "internal" children from this, overwrite the `children` method
     * on their parent. See "[Encapsulation](../selector.md#encapsulation)".<br/><br/>When using
     * [declarative UI](../declarative-ui.md) syntax "apply" is a special attribute that calls this
     * function.
     * @param options If mode is set to `'strict'` the function checks that all selector match at least one widget, and that id selector match exactly one widget. <br/>A `trigger` is string to be associated with the given rulset. If set to `'update'`, the ruleset will be applied once immediately and then again every time `apply('update')` is called. If set to any event-attribute name, such as `'onTap'`, it will automatically re-apply the ruleset when this event is triggered. If set to `'*'` if the widget mutates as described [here](./Observable.md#mutationssource).
     * @param rules The ruleset to apply. May also be given as a callback which is passed to the widget instance and must return the actual ruleset. This parameter can also be `null` if the `trigger` option is set. This will stop re-applying the ruleset previously associated with that trigger.
     */
    apply<Target = this>(options: {mode?: 'default'|'strict', trigger?: ListenersKeysOf<Target> | 'update' | '*' | symbol}, rules: RuleSet<this>): this;

    /**
     * Shorthand for `apply({mode: 'default'}, rules)`
     * @param rules The ruleset to apply. May also be given as a callback which is passed to the widget instance and must return the actual ruleset.
     */
    apply(rules: RuleSet<this>): this;

    /**
     * Shorthand for `apply({mode: mode}, rules})`
     * @param mode If this is set to `'strict'` the function checks that all selector match at least one widget, and that id selector match exactly one widget.
     * @param rules The ruleset to apply. May also be given as a callback which is passed to the widget instance and must return the actual ruleset.
     */
    apply(mode: 'default' | 'strict', rules: RuleSet<this>): this;

    /**
     * Applies the ruleset from the last call with `trigger` set to `'update' or '*'`.
     * @param trigger
     */
    apply(trigger: ListenersKeysOf<this> | 'update' | '*' | symbol): this;

    /**
     * Returns a (possibly empty) collection of all children of this widget that match the given selector.
     * When writing custom UI components it may be useful to overwrite this method to prevent access to the
     * internal children by external code. Doing so also affects `find` and `apply`, on this widget as well
     * as on all parents, thereby preventing accidental clashes of widget id or class values. See
     * "[Encapsulation](../selector.md#encapsulation)".
     * @param selector A selector expression or a predicate function to filter the results.
     */
    children<Result extends ChildType = ChildType>(selector?: Selector<ChildType, Result>): WidgetCollection<Result>;

    /**
     * Returns a collection containing all descendants of all widgets in this collection that match the
     * given selector.
     * If you wish to always exclude specific "internal" children from the result, overwrite the
     * [`children`](#childrenselector) method ([details](#childrenselector)) to return an empty
     * `WidgetCollection`, or use the [`@component`](../databinding/@component.md) decorator. **These
     * children will then only be visible via the protected `_find` method.** See
     * "[Encapsulation](../selector.md#encapsulation)"
     * @param selector A selector expression or a predicate function to filter the results.
     */
    find<Result extends Widget = Widget>(selector?: Selector<Widget, Result>): WidgetCollection<Result>;


    private $children: Widget[];


    private _layout: Layout;

    /**
     * @constant
     */
    readonly jsxAttributes: JSXCompositeAttributes<this, ChildType>;

    /**
     * The layout manager responsible for interpreting the [`layoutData`](./Widget.md#layoutdata) of the
     * child widgets of this Composite.
     * @constant
     */
    layout: Layout | null;

    /**
     * Fired when a child is added to this widget.
     */
    onAddChild: Listeners<CompositeAddChildEvent<this>>;

    /**
     * Fired when a child is removed from this widget.
     */
    onRemoveChild: Listeners<CompositeRemoveChildEvent<this>>;
  }
}


export type Composite<ChildType extends Widget = Widget> = widgets.Composite<ChildType>;
export type CompositeConstructor = typeof widgets.Composite;
export interface CompositeFactory extends Factory<CompositeConstructor>, CompositeConstructor {}
export const Composite: CompositeFactory;

// Constraint

/**
 * Represents a constraint on the layout of a widget that the parent uses to determine the position of
 * one of its edges. See also ${doc:ConstraintValue}
 */
export class Constraint {

  /**
   * Represents a constraint on the layout of a widget that the parent uses to determine the position of
   * one of its edges. See also ${doc:ConstraintValue}
   */
  public constructor(reference: Percent | SiblingReference, offset: Offset);

  /**
   * Tests if the given value is a `Constraint` instance that is deeply equal to this one.
   * @param value
   */
  equals(value: Constraint): boolean;

  /**
   * A tuple consisting of the values of the `reference` and `offset` properties, i.e. `[reference,
   * offset]`.
   */
  toArray(): ConstraintArray;

  /**
   * A string representation of the constraint as a space separated string in the pattern of `'reference
   * offset'`.
   */
  toString(): string;

  /**
   * Creates a new instance of Constraint using [any valid constraint
   * expression](${doc:ConstraintValueUrl}). For any other value, including `null` and `'auto'`, the
   * method throws.
   * @param constraintValue The value to create an Constraint instance from.
   */
  static from(constraintValue: ConstraintValue): Constraint;

  /**
   * An additional distance between the reference point and the edge of the widget itself.
   * @constant
   */
  offset: Offset;

  /**
   * A reference point from which the offset is added. Either a ${doc:SiblingReference} - indicating the
   * opposing edge of that widget - or a ${doc:Percent} instance, indicating a fraction of the
   * width/height (padding excluded) of the parent widget.
   * If the sibling reference is a string it will be a valid selector string and not contain any pseudo
   * selectors   (`'next()'`/`'prev()'`).
   * @constant
   */
  reference: Percent | SiblingReference;

  /**
   * A ${doc:SiblingReference} indicating the next widget in the list of children attached to the same
   * parent. Used by the [`reference`](#reference) property. Also available as `LayoutData.next`.
   */
  static readonly next: unique symbol;

  /**
   * A ${doc:SiblingReference} indicating the previous widget in the list of children attached to the same
   * parent. Used by the [`reference`](#reference) property. Also available as `LayoutData.prev`.
   */
  static readonly prev: unique symbol;
}


// ConstraintLayout

/**
 * The default, constraints-based layout.
 */
export class ConstraintLayout extends Layout {

  /**
   * The default, constraints-based layout.
   */
  public constructor(options?: {});

  /**
   * Instance of ConstraintLayout used as the default `layout` property value of `Composite`, `Page`,
   * `Tab` and `Canvas`. Equivalent to `new ConstraintLayout()`
   */
  static default: ConstraintLayout;
}


// ContentView


/**
 * A composite that does not require (or support) a parent to be visible. It also can not be disposed.
 * Every instance of `ContentView` is controlled by an associated non-widget object, either an instance
 * of `Popover` or the global `tabris` object.
 */
export class ContentView<ChildType extends Widget = Widget> extends Composite<ChildType> {

  /**
   * A composite that does not require (or support) a parent to be visible. It also can not be disposed.
   * Every instance of `ContentView` is controlled by an associated non-widget object, either an instance
   * of `Popover` or the global `tabris` object.
   * 
   * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
   * object which may include (in addition to the properties) children, event listeners and layout
   * shorthands.
   */
  protected constructor(properties?: Properties<ContentView>);
}


export const contentView: ContentView;

// DateDialog


export interface DateDialogCloseEvent<Target = DateDialog>
 extends EventObject<Target>
{
  readonly date: Date | null;
}

export interface DateDialogSelectEvent<Target = DateDialog>
 extends EventObject<Target>
{
  readonly date: Date;
}

/**
 * A `DateDialog` represents a native dialog pop-up allowing the user to pick a date. Properties can
 * only be set before open() is called. The dialog is automatically disposed when closed.
 */
export class DateDialog extends Popup {

  /**
   * A `DateDialog` represents a native dialog pop-up allowing the user to pick a date. Properties can
   * only be set before open() is called. The dialog is automatically disposed when closed.
   * 
   * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
   * object which may include (in addition to the properties) children, event listeners and layout
   * shorthands.
   */
  public constructor(properties?: Properties<DateDialog>);

  /**
   * Makes the given date dialog visible. Meant to be used with inline-JSX. In TypeScript it also casts
   * the given JSX element from `any` to an actual DateDialog.
   * @param dateDialog The date dialog to open
   */
  static open(dateDialog: DateDialog): DateDialog;

  /**
   * Creates and opens a date dialog.
   * @param date The date to be displayed in the dialog. The current date is used when no date is provided.
   */
  static open(date?: Date): DateDialog;

  /**
   * The date to be displayed in the dialog. The current date is used when no date is provided.
   */
  date: Date;

  /**
   * @constant
   */
  readonly jsxAttributes: JSXAttributes<this> & {children?: JSXDefaultChildren};

  /**
   * Limits the selectable date range to the given future date. No limit is applied when not set.
   */
  maxDate: Date;

  /**
   * Limits the selectable date range to the given past date. No limit is applied when not set.
   */
  minDate: Date;

  /**
   * Fired when the date dialog was closed.
   */
  onClose: Listeners<DateDialogCloseEvent<this>>;

  /**
   * Fired when a date was selected by the user.
   */
  onSelect: Listeners<DateDialogSelectEvent<this>>;

  /**
   * Fired when the [*date*](#date) property has changed.
   */
  onDateChanged: ChangeListeners<this, 'date'>;

  /**
   * Fired when the [*maxDate*](#maxDate) property has changed.
   */
  onMaxDateChanged: ChangeListeners<this, 'maxDate'>;

  /**
   * Fired when the [*minDate*](#minDate) property has changed.
   */
  onMinDateChanged: ChangeListeners<this, 'minDate'>;
}


// Drawer


/**
 * A drawer that can be swiped in from the left edge of the screen. There's only a single instance that
 * can be accessed via `tabris.drawer`. The drawer is locked by default. To use it in an application,
 * set the property `enabled` to `true`. The drawer can contain any kind of widgets.
 */
export class Drawer extends ContentView {

  /**
   * A drawer that can be swiped in from the left edge of the screen. There's only a single instance that
   * can be accessed via `tabris.drawer`. The drawer is locked by default. To use it in an application,
   * set the property `enabled` to `true`. The drawer can contain any kind of widgets.
   * 
   * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
   * object which may include (in addition to the properties) children, event listeners and layout
   * shorthands.
   */
  private constructor();

  /**
   * Closes the drawer.
   */
  close(): this;

  /**
   * Opens the drawer. It may be useful to call this method on first startup, so that users notice the
   * drawer and its contents.
   */
  open(): this;

  /**
   * Controls whether the drawer can be opened and closed. When set to `false`, the drawer cannot be
   * opened and calls to `drawer.open()` will be ignored.
   */
  enabled: boolean;

  /**
   * @constant
   */
  readonly jsxAttributes: never;

  /**
   * Fired when the drawer is closed and has reached its resting position.
   */
  onClose: Listeners<EventObject<this>>;

  /**
   * Fired when the drawer is opened and has reached its resting position.
   */
  onOpen: Listeners<EventObject<this>>;

  /**
   * Fired when the [*enabled*](#enabled) property has changed.
   */
  onEnabledChanged: ChangeListeners<this, 'enabled'>;
}


export const drawer: Drawer;

// EventObject

/**
 * Base class for all events fired by the framework. Instances may include additional properties, which
 * are documented together with the event type. Change events also have a `value` property. 
 * When the trigger method is called with a new instance of `EventObject`, `type`, `target` and
 * `timeStamp` are initialized automatically.
 */
export class EventObject<TargetType> {

  /**
   * Base class for all events fired by the framework. Instances may include additional properties, which
   * are documented together with the event type. Change events also have a `value` property. 
   * When the trigger method is called with a new instance of `EventObject`, `type`, `target` and
   * `timeStamp` are initialized automatically.
   */
  public constructor();

  /**
   * The object that fired the event.
   * @constant
   */
  readonly target: TargetType;

  /**
   * The time at which the event was created, in milliseconds.
   * @constant
   */
  readonly timeStamp: number;

  /**
   * The event type.
   * @constant
   */
  readonly type: string;
}


// Font

/**
 * Represents a font. See also ${doc:FontValue}
 */
export class Font {

  /**
   * Represents a font. See also ${doc:FontValue}
   */
  public constructor(size: number, family?: string[], weight?: 'black' | 'bold' | 'medium' | 'thin' | 'light' | 'normal', style?: 'italic' | 'normal');

  /**
   * Tests if the given value is a `Font` instance that is deeply equal to this one.
   * @param value
   */
  equals(value: Font): boolean;

  /**
   * Returns a string representation of the font using the CSS font shorthand syntax.
   */
  toString(): string;

  /**
   * Creates a new instance of Font using any valid font expression. For any other value, including `null`
   * and `'initial'` the method throws.
   * @param fontValue The value to create a Font instance from
   */
  static from(fontValue: FontValue): Font;

  /**
   * Returns true if value is a FontValue. This includes `null` and `'initial'`. Use this to check if a
   * value will be accepted by a font property. This is also a valid TypeScript type guard function.
   * @param value The value to test
   */
  static isFontValue(value: any): value is FontValue;

  /**
   * Returns true if value is a valid FontValue. This excludes `null` and `'initial'`. Use this to check
   * if a value will be accepted by Font.from. This is also a valid TypeScript type guard function.
   * @param value The value to test
   */
  static isValidFontValue(value: any): value is FontValue;

  /**
   * Prioritized list of font families
   * @constant
   */
  readonly family: string[];

  /**
   * Positive number in dip
   * @constant
   */
  readonly size: number;

  /**
   * Face of the font family to be used
   * @constant
   */
  readonly style: 'italic' | 'normal';

  /**
   * Boldness of the font
   * @constant
   */
  readonly weight: 'black' | 'bold' | 'medium' | 'thin' | 'light' | 'normal';


  static readonly condensed: "condensed";


  static readonly monospace: "monospace";


  static readonly sansSerif: "sans-serif";


  static readonly serif: "serif";
}


// FontResources

/**
 * This is the base class for all font resource dictionaries. Instances can be obtained via the `from`
 * method, or by subclassing. All members of a `FontResources` (or subclass) instance will be of the
 * type `Font`.
 */
export class FontResources extends Resources<Font, FontValue> {

  /**
   * This is the base class for all font resource dictionaries. Instances can be obtained via the `from`
   * method, or by subclassing. All members of a `FontResources` (or subclass) instance will be of the
   * type `Font`.
   */
  protected constructor(options: ResourcesConstructorOptions<Font, FontValue>);

  /**
   * Creates a fonts dictionary from the given raw "data" object. All fonts from the given "base"
   * dictionary are inherited unless overwritten.
   * Entries in the "data" object starting with "$" are considered configuration options and will not
   * become entries in the final fonts dictionary.
   * @param base A plain object or another `FontResources` instance containing values to inherit by the new `FontResources` dictionary.
   * @param data The raw data (plain object) to create the dictionary from. The format must match the [Tabris.js fonts JSON schema](${doc:fonts.json}).
   */
  static from<Base extends NamedResources<Font, keyof Base>, Data extends ResourceDataWithConfig<FontResourceValue>>(base: Base, data: Data): NamedResources<Font, keyof (Base & Data)>;

  /**
   * Creates a fonts dictionary from the given raw "data" object. The format must match the [Tabris.js
   * fonts JSON schema](${doc:fonts.json}). Entries in the "data" object starting with "$" are considered
   * configuration options and will not become entries in the final fonts dictionary.
   * @param data The raw data (plain object) to create the dictionary from. The format must match the [Tabris.js fonts JSON schema](${doc:fonts.json}).
   */
  static from<Data extends ResourceDataWithConfig<FontResourceValue>>(data: Data): NamedResources<Font, keyof Data>;
}


// Image

/**
 * This class represents an image source and optionally that image's dimension or the scale it should be
 * displayed at. **For convenience there are [various expressions](#imagevalue) that may be used in
 * place of an `Image` instance.** All API that accept these expressions will convert them to a `Image`
 * object.
 */
export class Image {

  /**
   * This class represents an image source and optionally that image's dimension or the scale it should be
   * displayed at. **For convenience there are [various expressions](#imagevalue) that may be used in
   * place of an `Image` instance.** All API that accept these expressions will convert them to a `Image`
   * object.
   */
  public constructor(imageLike: ImageLikeObject);

  /**
   * Tests if the given value is a `Image` instance that is deeply equal to this one.
   * @param value
   */
  equals(value: Image): boolean;

  /**
   * Creates a new instance of Image using any valid Image expression. For any other value, including
   * `null`, the method throws.
   * @param imageValue The value to create an Image instance from. See ${doc:ImageValue}
   */
  static from(imageValue: ImageValue): Image;

  /**
   * Returns true if value is an ImageValue. This includes `null`. Use this to check if a value will be
   * accepted by an image property. This is also a valid TypeScript type guard function.
   * @param value The value to test
   */
  static isImageValue(value: any): value is ImageValue;

  /**
   * Returns true if value is a valid ImageValue. This excludes `null`. Use this to check if a value will
   * be accepted by Image.from. This is also a valid TypeScript type guard function.
   * @param value The value to test
   */
  static isValidImageValue(value: any): value is ImageValue;

  /**
   * Image height in dip. Extracted from the image file when 'auto'.
   * @constant
   */
  readonly height: number | 'auto';

  /**
   * Image scale factor - the image will be scaled down by this factor. See ${doc:ImageLikeObject} for
   * details
   * @constant
   */
  readonly scale: number | 'auto';

  /**
   * As a string this is a file system path, relative path, full URL, a [`Blob`](./Blob.md) containing a
   * `jpg` or `png` file, or an [`ImageBitmap`](./ImageBitmap.md) instance. [Data
   * URIs](https://en.wikipedia.org/wiki/Data_URI_scheme) are also supported. Relative paths are resolved
   * **relative to ‘package.json’**. On Android the name of a bundled [drawable
   * resource](https://developer.android.com/guide/topics/resources/drawable-resource) can be provided
   * with the url scheme android-drawable, e.g. android-drawable://ic_info_black.
   * If a closed ImageBitmap is given the constructor will throw.
   * A given Blob must contain an encoded image.
   * @constant
   */
  readonly src: string | ImageBitmap | Blob;

  /**
   * Image width in dip. Extracted from the image file when 'auto'.
   * @constant
   */
  readonly width: number | 'auto';
}


// ImageBitmap

/**
 * Represents an in-memory Image. Unlike ImageData it is immutable, but can be created from a number of
 * sources via [createImageBitmap](#createimagebitmapimagesource-options).
 */
export class ImageBitmap {

  /**
   * Represents an in-memory Image. Unlike ImageData it is immutable, but can be created from a number of
   * sources via [createImageBitmap](#createimagebitmapimagesource-options).
   */
  private constructor();

  /**
   * Disposes the resources associated with this ImageBitmap. Should be called once the image is no longer
   * needed to free up memory.
   */
  close(): void;

  /**
   * Creates a promise that resolves to a new instance of ImageBitmap. Also available in global scope.
   * @param imageSource The data source to create an ImageBitmap instance from.
   * @param options Options for resizing the image.
   */
  static createImageBitmap(imageSource: Blob | ImageData | ImageBitmap | Canvas, options?: {resizeWidth?: number, resizeHeight?: number, resizeQuality?: 'pixelated' | 'low' | 'medium' | 'high'}): Promise<ImageBitmap>;

  /**
   * Creates a promise that resolves to a new instance of ImageBitmap. Also available in global scope.
   * @param imageSource The data source to create an ImageBitmap instance from.
   * @param sx The x coordinate of the reference point of the rectangle from which the ImageBitmap will be extracted.
   * @param sy The y coordinate of the reference point of the rectangle from which the ImageBitmap will be extracted.
   * @param sw The width of the rectangle from which the ImageBitmap will be extracted.
   * @param sh The height of the rectangle from which the ImageBitmap will be extracted.
   * @param options Options for resizing the image.
   */
  static createImageBitmap(imageSource: Blob | ImageData | ImageBitmap | Canvas, sx: number, sy: number, sw: number, sh: number, options?: {resizeWidth?: number, resizeHeight?: number, resizeQuality?: 'pixelated' | 'low' | 'medium' | 'high'}): Promise<ImageBitmap>;

  /**
   * Native image height in pixel
   * @constant
   */
  readonly height: number;

  /**
   * Native image width in pixel
   * @constant
   */
  readonly width: number;
}


// ImageView


export interface ImageViewLoadEvent<Target = ImageView>
 extends EventObject<Target>
{
  readonly error: boolean;
}

export interface ImageViewZoomEvent<Target = ImageView>
 extends EventObject<Target>
{
  readonly zoomLevel: number;
}

export namespace widgets {

  /**
   * A widget to display an image.
   */
  export class ImageView extends Widget {

    /**
     * A widget to display an image.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<ImageView>);

    /**
     * The image to display. Providing the `width` and `height` attributes on the image will resize it
     * internally. When no dimensions are given the image will be loaded with its original size. Since the
     * full size image might occupy a lot of memory, it's recommended to provide exact dimensions.
     */
    image: ImageValue;

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & {children?: JSXDefaultChildren};

    /**
     * The highest amount the image can be zoomed in to. Setting the `maxZoomLevel` to a level smaller than
     * the current `zoomLevel` changes the `zoomLevel` to be the same as the new `maxZoomLevel`.
     */
    maxZoomLevel: number;

    /**
     * The lowest amount the image can be zoomed out to. Setting the `minZoomLevel` to a level larger than
     * the current `zoomLevel` changes the `zoomLevel` to be the same as the new `minZoomLevel`. 
     */
    minZoomLevel: number;

    /**
     * How to scale the image.
     * - `fit` will scale the image proportionally to fit into the view, possible leaving some empty space
     * at the edges. That is, the image will be displayed as large as possible while being fully contained
     * in the view.
     * - `fill` will scale the image proportionally to fill the entire view, possibly cutting off parts of
     * the image. That is, the image will be displayed as small as possible while covering the entire view.
     * - `auto` will scale *down* the image to *fit* into the view if it is too large, but it won't scale up
     * a smaller image.
     * - `stretch` will resize the image to the actual bounds of the image view.
     * - `none` will not resize the image at all. The image will be displayed in its original size.
     */
    scaleMode: 'auto' | 'fill' | 'fit' | 'none' | 'stretch';

    /**
     * A color to change the image appearance. All opaque parts of the image will be tinted with the given
     * color. Set to `initial` to remove the effect.
     */
    tintColor: ColorValue;

    /**
     * Enables the pinch-to-zoom gesture on the `ImageView` and makes the properties `zoomLevel`,
     * `minZoomLevel` and `maxZoomLevel` available. Setting `zoomEnabled` to `false` also resets the
     * `zoomLevel`, `minZoomLevel`, `maxZoomLevel` to their respective defaults.
     */
    zoomEnabled: boolean;

    /**
     * The amount that the image is zoomed in or out. The default position without any zooming has the value
     * 1.0.
     */
    zoomLevel: number;

    /**
     * Fired when the image loading has finished.
     */
    onLoad: Listeners<ImageViewLoadEvent<this>>;

    /**
     * Fired when the user zooms the image in or out. The `zoom` event indicates a change to the `zoomLevel`
     * property.
     */
    onZoom: Listeners<ImageViewZoomEvent<this>>;

    /**
     * Fired when the [*image*](#image) property has changed.
     */
    onImageChanged: ChangeListeners<this, 'image'>;

    /**
     * Fired when the [*maxZoomLevel*](#maxZoomLevel) property has changed.
     */
    onMaxZoomLevelChanged: ChangeListeners<this, 'maxZoomLevel'>;

    /**
     * Fired when the [*minZoomLevel*](#minZoomLevel) property has changed.
     */
    onMinZoomLevelChanged: ChangeListeners<this, 'minZoomLevel'>;

    /**
     * Fired when the [*scaleMode*](#scaleMode) property has changed.
     */
    onScaleModeChanged: ChangeListeners<this, 'scaleMode'>;

    /**
     * Fired when the [*tintColor*](#tintColor) property has changed.
     */
    onTintColorChanged: ChangeListeners<this, 'tintColor'>;

    /**
     * Fired when the [*zoomEnabled*](#zoomEnabled) property has changed.
     */
    onZoomEnabledChanged: ChangeListeners<this, 'zoomEnabled'>;

    /**
     * Fired when the [*zoomLevel*](#zoomLevel) property has changed.
     */
    onZoomLevelChanged: ChangeListeners<this, 'zoomLevel'>;
  }
}


export type ImageView = widgets.ImageView;
export type ImageViewConstructor = typeof widgets.ImageView;
export interface ImageViewFactory extends Factory<ImageViewConstructor>, ImageViewConstructor {}
export const ImageView: ImageViewFactory;

// InactivityTimer


/**
 * A timer that triggers when the app has not been interacted with for a configurable interval.
 */
export class InactivityTimer extends NativeObject {

  /**
   * A timer that triggers when the app has not been interacted with for a configurable interval.
   */
  public constructor(properties?: Properties<InactivityTimer>);

  /**
   * Stops and resets the timer.
   */
  cancel(): void;

  /**
   * Starts the timer with the currently configured delay. After the first `timeout` event, the timer will
   * stop but it can be started again.
   */
  start(): void;

  /**
   * The interval of user inactivity that will trigger the timer. Given in milliseconds. Changes to this
   * property will not affect a running timer.
   */
  delay: number;

  /**
   * Fired when the app has not been interacted with since the configured delay.
   */
  onTimeout: Listeners<EventObject<this>>;

  /**
   * Fired when the [*delay*](#delay) property has changed.
   */
  onDelayChanged: ChangeListeners<this, 'delay'>;
}


// Layout

/**
 * Base class for all layout managers.
 */
export class Layout {

  /**
   * Base class for all layout managers.
   */
  protected constructor(options: {});

  /**
   * Callback used internally by widgets to register themselves as managed by this layout.
   * @param composite
   */
  add(composite: Composite): void;

  /**
   * Callback used internally by widgets to de-register themselves as managed by this layout.
   * @param composite
   */
  remove(composite: Composite): void;

  /**
   * Callback used internally by the framework to process layoutData.
   * @param composite
   */
  render(composite: Composite): void;
}


// LayoutData

/**
 * Provides layout information for a widget to be used by the parent widget when determining its size
 * and position. See also ${doc:LayoutDataValue}
 */
export class LayoutData {

  /**
   * Provides layout information for a widget to be used by the parent widget when determining its size
   * and position. See also ${doc:LayoutDataValue}
   */
  public constructor(parameters: LayoutDataProperties);

  /**
   * Tests if the given value is a `LayoutData` instance that is deeply equal to this one.
   * @param value
   */
  equals(value: LayoutData): boolean;

  /**
   * Returns a string representation of LayoutData.
   */
  toString(): string;

  /**
   * Creates a new instance of LayoutData using any valid layoutData expression. For any other value,
   * including `null`, the method throws.
   * @param layoutDataValue The value to create
   */
  static from(layoutDataValue: LayoutDataValue): LayoutData;

  /**
   * The vertical position of the widget's baseline relative to a sibling widget.
   * @constant
   */
  readonly baseline: SiblingReference | 'auto';

  /**
   * The position of the widget's bottom edge relative to the parent or a sibling widget. Must not be
   * negative.
   * @constant
   */
  readonly bottom: Constraint | 'auto';

  /**
   * The horizontal position of the widget's center relative to the parent's center.
   * @constant
   */
  readonly centerX: Offset | 'auto';

  /**
   * The vertical position of the widget's center relative to the parent's center.
   * @constant
   */
  readonly centerY: Offset | 'auto';

  /**
   * The height of the widget.
   * @constant
   */
  readonly height: Dimension | 'auto';

  /**
   * The position of the widget's left edge relative to the parent or a sibling widget. Must not be
   * negative.
   * @constant
   */
  readonly left: Constraint | 'auto';

  /**
   * The position of the widget's right edge relative to the parent or a sibling widget. Must not be
   * negative.
   * @constant
   */
  readonly right: Constraint | 'auto';

  /**
   * The position of the widget's top edge relative to the parent or a sibling widget. Must not be
   * negative.
   * @constant
   */
  readonly top: Constraint | 'auto';

  /**
   * The width of the widget.
   * @constant
   */
  readonly width: Dimension | 'auto';

  /**
   * An instance of LayoutData that centers a widget horizontally and vertically. Equivalent to
   * `LayoutData.from({centerX: 0, centerY: 0})`
   */
  static readonly center: LayoutData;

  /**
   * A ${doc:SiblingReference} indicating the next widget in the list of children attached to the same
   * parent. Used by the [`baseline`](#baseline) property. An alias of `Constraint.next`.
   */
  static readonly next: typeof Constraint.next;

  /**
   * A ${doc:SiblingReference} indicating the previous widget in the list of children attached to the same
   * parent. Used by the [`baseline`](#baseline) property. An alias of `Constraint.next`.
   */
  static readonly prev: typeof Constraint.prev;

  /**
   * An instance of LayoutData that makes a widget fill the inner width and height of its parent (padding
   * excluded). Equivalent to `LayoutData.from({left: 0, top: 0, right: 0, bottom: 0})`.
   */
  static readonly stretch: LayoutData;

  /**
   * An instance of LayoutData that makes a widget as wide as its parent (padding excluded). Equivalent to
   * `LayoutData.from({left: 0, right: 0})`.
   */
  static readonly stretchX: LayoutData;

  /**
   * An instance of LayoutData that makes a widget as high as its parent (padding excluded). Equivalent to
   * `LayoutData.from({top: 0, bottom: 0})`.
   */
  static readonly stretchY: LayoutData;
}


// LinearGradient

/**
 * Represents a linear gradient. See also ${doc:LinearGradientValue}
 */
export class LinearGradient {

  /**
   * Represents a linear gradient. See also ${doc:LinearGradientValue}
   */
  public constructor(colorStops: Array<Color | [Color, Percent]>, direction?: number);

  /**
   * Tests if the given value is a `LinearGradient` instance that is deeply equal to this one.
   * @param value
   */
  equals(value: LinearGradient): boolean;

  /**
   * Returns a CSS string representation of the linear gradient.
   */
  toString(): string;

  /**
   * Creates a new instance of LinearGradient using any valid linear gradient expression. For any other
   * value, including `null` and `'initial'` the method throws.
   * @param linearGradientValue The value to create a LinearGradient instance from
   */
  static from(linearGradientValue: LinearGradientValue): LinearGradient;

  /**
   * Returns true if value is a LinearGradientValue. This includes `null` and `'initial'`. Use this to
   * check if a value will be accepted by a linear gradient property. This is also a valid TypeScript type
   * guard function.
   * @param value The value to test
   */
  static isLinearGradientValue(value: any): value is LinearGradientValue;

  /**
   * Returns true if value is a valid LinearGradientValue. This excludes `null` and `'initial'`. Use this
   * to check if a value will be accepted by LinearGradient.from. This is also a valid TypeScript type
   * guard function.
   * @param value The value to test
   */
  static isValidLinearGradientValue(value: any): value is LinearGradientValue;

  /**
   * An array with the gradient color stops. Defines the position and the offset of the gradient color
   * stop.
   * @constant
   */
  readonly colorStops: Array<Color | [Color, Percent]>;

  /**
   * The direction of the gradient line in degrees.
   * @constant
   */
  readonly direction: number;
}


// Listeners

/**
 * Objects of the type `Listeners` provide methods to manage listeners and trigger events. They
 * encapsulate the tabris event system in a way that is more convenient to use with TypeScript,
 * `async`/`await` and RxJS.
 */
export class Listeners<EventData extends {target: object}> extends Observable<EventData> {

  /**
   * Objects of the type `Listeners` provide methods to manage listeners and trigger events. They
   * encapsulate the tabris event system in a way that is more convenient to use with TypeScript,
   * `async`/`await` and RxJS.
   */
  public constructor(target: TargetType<EventData>, type: string);

  /**
   * Registers a listener to be notified by new events. Each listener can only be added once. Returns the
   * target object. **Instances of  `Listeners` can also be called directly as a function to register a
   * new listener.** I.e. `widget.onResize(listener);` is the same as
   * `widget.onResize.addListener(listener);` It is also the same as `widget.on('resize', listener');`,
   * but with better TypeScript support. 
   * @param listener The listener function called with the [event object](./EventObject.md)
   */
  addListener(listener: Listener<EventData>): TargetType<EventData>;

  /**
   * Notifies the given listener the next time an event is issued, but not afterwards. Returns the target
   * object.
   * @param listener The listener function called with the [event object](./EventObject.md)
   */
  once(listener: Listener<EventData>): TargetType<EventData>;

  /**
   * Returns a promise that resolves the next time an event is issued. The dispatched event object will be
   * used as the resolved value.
   */
  promise(): Promise<ExtendedEvent<EventData>>;

  /**
   * Deregisters a listener, it will not be notified of future events. Returns the target object.
   * @param listener
   */
  removeListener(listener: Listener<EventData>): TargetType<EventData>;

  /**
   * Issues a plain event object to all registered listeners with a newly constructed event object.
   */
  trigger(): TargetType<EventData>;

  /**
   * Issues an event object to all registered listeners. If an _uninitialized_ (not previously issued)
   * instance of `EventObject` is given as the argument it will be issued directly as-is. Any other type
   * of object (including an already initialized/previously issued event object) will be copied to create
   * a new event object. This allows for simple event re-routing.
   * @param eventData
   */
  trigger(eventData?: ListenersTriggerParam<EventData>): TargetType<EventData>;

  /**
   * Like `trigger`, but returns a promise. The promise will resolve when all asynchronous listeners (if
   * any) have resolved. If none of the listeners are asynchronous (return a promise) this method works
   * just like `trigger()`. Useful for unit testing.
   * @param eventData
   */
  triggerAsync(eventData?: ListenersTriggerParam<EventData>): Promise<TargetType<EventData>>;


  static getListenerStore(target: object): Pick<NativeObject, 'on' | 'off' | 'once' | 'trigger'>;

  /**
   * The object that issues the events, e.g. a widget.
   */
  readonly target: TargetType<EventData>;

  /**
   * The event type. This value will be set in the `type` field of the event object given to the listener.
   * It is the same value used by the [on](${doc:NativeObjectUrl}#ontype-listener-context) and
   * [trigger](${doc:NativeObjectUrl}#triggertype) methods.
   */
  readonly type: string;
}


// Module

/**
 * Represents a JavaScript module as outlined in the commonJS standard.
 */
export class Module {

  /**
   * Represents a JavaScript module as outlined in the commonJS standard.
   */
  public constructor(id: string, parent: Module | null, content: ModuleLoader | object);

  /**
   * Finds a module relative to the id of this module and returns the exports object of that module.
   * Throws if no matching module can be found.
   * @param request
   */
  require(request: string): object;

  /**
   * Maps imports matching the given patterns to the associated paths. Patterns may contain exactly one
   * wildcard ('*') and must not start with '/' or '.'. Paths are relative to 'baseUrl', may contain one
   * wildcard and must start with '.'. The order of the paths determines the order of the path lookup. The
   * 'baseUrl' must start with '/', which refers to the project root directory.
   * @param options Contains the paths and baseUrl. If omitted, 'baseUrl' defaults to '/'.
   */
  static addPath(options: {baseUrl?: string, paths: {[pattern: string]: string[]}}): void;

  /**
   * Maps imports matching the given patterns to the associated paths. Short for `addPath({baseUrl: '/',
   * paths: {[pattern]: paths});
   * @param pattern That import pattern to match.
   * @param paths The module paths to look up for the given pattern
   */
  static addPath(pattern: string, paths: string[]): void;

  /**
   * Loads the given JavaScript file from the given (local or http) url and wraps it as a module loader
   * function.
   * @param url
   */
  static createLoader(url: string): ModuleLoader;

  /**
   * Creates a "require" function that finds a module relative to the given path. If found the exports are
   * returned. Throws if no matching module can be found.
   * @param path An absolute path, beginning with "/". The path does not have to point to an existing file.
   */
  static createRequire(path: string): ((request:string) => object);

  /**
   * Defines a module at the given path. It will be available for import as though there was a file at
   * that location. Can also be used to override an actual module if it was not imported yet.
   * @param path The path of the new module. Must start with a `/`, which is the directory of the project's `package.json`. Keep in mind that the source directory may not be the same at runtime if the code is pre-processed.
   * @param exports The exports of the new module. This can be any type, though typically it is an object.
   */
  static define(path: string, exports: any): void;

  /**
   * Evaluates the given JavaScript code and returns the result of the last expression. The url is used to
   * identify the source in stack traces.
   * @param code
   * @param url
   */
  static execute(code: string, url: string): unknown;

  /**
   * Returns the source map object (decoded from base64 and parsed from JSON) for the JavaScript file of
   * the given url. Returns `null` if no source map can be found. This method only works with code
   * side-loaded via the tabris CLI `serve` command.
   * @param url
   */
  static getSourceMap(url: string): unknown;

  /**
   * Loads a text from the given (local or http) url and returns its content. File is expected to be utf-8
   * encoded. This is a blocking operation, in almost all cases it is preferable to use `fetch()` or the
   * file system API to read a text file.
   * @param url
   */
  static load(url: string): string;

  /**
   * Loads the JSON file from the given (local or http) url, parses it and returns the result. This is a
   * blocking operation, in almost all cases it is preferable to use `fetch()` or the file system API to
   * obtain and parse a JSON file.
   * @param url
   */
  static readJSON(url: string): unknown;

  /**
   * @constant
   */
  readonly exports: object;

  /**
   * Full id (path) of the module
   * @constant
   */
  readonly id: string;

  /**
   * The module that first required this module
   * @constant
   */
  readonly parent: Module;
}


// NativeObject


/**
 * Base class for all objects with a native implementation.
 */
export class NativeObject {

  /**
   * Base class for all objects with a native implementation.
   */
  protected constructor(properties?: {[property: string]: any});


  private $getProperty(name: string): unknown;


  private $getPropertyGetter(propertyName: string): unknown;


  private $getPropertySetter(propertyName: string): unknown;


  private $setProperty(name: string, value: any): void;


  private $trigger(eventType: string, eventData?: object): void;

  /**
   * A helper function that throws if the instance has already been marked as disposed.
   */
  protected _checkDisposed(): void;


  private _decodeProperty(propertyName: string, value: any): unknown;

  /**
   * Called by the framework to dispose a `NativeObject` instance. (The `dispose` is only used by
   * application code.) The method should never be called directly, but it may be overwritten to prevent
   * dispose for objects that are not disposable.
   * @param skipNative
   */
  protected _dispose(skipNative?: boolean): void;


  private _encodeProperty(propertyName: string, value: any): unknown;


  private _getDefaultPropertyValue(propertyName: string): void;

  /**
   * Returns a value stored via `_storeProperty`, or undefined.
   * @param propertyName
   */
  protected _getStoredProperty(propertyName: string): unknown;


  private _getTypeDef(propertyName: string): unknown;

  /**
   * Used by `console.dirxml()` to produce part of the XML representation of this object. May be
   * overwritten to modify the output. The return value should be an array of tuples consisting of the
   * attribute name and string representation. The new implementation may make a super call to obtain the
   * default list of attributes printed for this object.
   */
  protected _getXMLAttributes(): Array<[string, any]>;

  /**
   * Used by `console.dirxml()` to produce part of the XML representation of this object. May be
   * overwritten to modify the output. The return value should be an array of strings each representing on
   * of the children of this instance.
   */
  protected _getXMLContent(): string[];

  /**
   * Used by `console.dirxml()` to produce part of the XML representation of this object. May be
   * overwritten to modify the output. The default implementation returns the name of the constructor of
   * this object.
   */
  protected _getXMLElementName(): string;

  /**
   * Used by `console.dirxml()` to produce part of the XML representation of this object. May be
   * overwritten to modify the output. The default implementation the closing tag if `hasChild` is true,
   * otherwise returns an empty string. The `hasChild` parameter is `true` if `_getXMLContent` returns a
   * non-empty array. It is usually not necessary to call or override this method.
   * @param hasChild
   */
  protected _getXMLFooter(hasChild: boolean): string;

  /**
   * Used by `console.dirxml()` to produce part of the XML representation of this object. May be
   * overwritten to modify the output. The default implementation crates the opening tag including the
   * element name given by `_getXMLElementName` and attributes given by `_getXMLAttributes`. The
   * `hasChild` parameter is `true` if `_getXMLContent` returns a non-empty array in which case the tag is
   * not self-closing. It is preferable to override these individual method instead of this one.
   * @param hasChild
   */
  protected _getXMLHeader(hasChild: boolean): string;

  /**
   * Returns `true` if there is currently one or more listeners registers for the given event type.
   * @param eventType
   */
  protected _isListening(eventType: string): boolean;

  /**
   * Called by the framework when the first listener of a given event type is registered on the instance
   * (`listening` is `true`), and when the last listener of a given event type is removed (`listening` is
   * `false`). Typically overwritten to make calls to `_nativeListen` when the given event type is issues
   * by native code. The new implementation must make a super call if it does not handle the given event
   * type itself.
   * @param eventName
   * @param listening
   */
  protected _listen(eventName: string, listening: boolean): void;

  /**
   * Sends a 'call' operation to the native client and returns the result.
   * @param methodName
   * @param parameters
   */
  protected _nativeCall(methodName: string, parameters: object): unknown;

  /**
   * Sends a 'create' operation to the native client. Called once by the constructor and should not be
   * called again. May be overwritten to check the constructor parameter or perform any kind of
   * initialization code prior to creating the native object. The new implementation must make a super
   * call.
   * @param param The first argument (if any) given in the constructor call. Will be forwarded to the `set` method after the native object was created.
   */
  protected _nativeCreate(param?: {[property: string]: any}): void;

  /**
   * Sends a 'get' operation to the native client and returns the result.
   * @param propertyName
   */
  protected _nativeGet(propertyName: string): unknown;

  /**
   * Sends a 'listen' operation to the native client.
   * @param eventType
   * @param listen
   */
  protected _nativeListen(eventType: string, listen: boolean): void;

  /**
   * Sends a 'set' operation to the native client.
   * @param propertyName
   * @param value
   */
  protected _nativeSet(propertyName: string, value: any): void;

  /**
   * A helper function that register the given listener if `listening` is true and de-registers it if
   * `listening` is false.
   * @param eventType
   * @param listening
   * @param listener
   */
  protected _onoff(eventType: string, listening: boolean, listener: Function): void;


  private _register(): void;

  /**
   * Called during the dispose process, after the 'dispose' event has fired, but before the native code
   * has be executed. Native operations (`_nativeSet`, `_nativeGet`, `_nativeCall`, `_nativeListen`) on
   * this object are still possible at this point. May be overwritten to perform any kind of clean-up
   * code. The new implementation must perform a super call at some point, typically at the last command.
   */
  protected _release(): void;

  /**
   * Used by the `set` method to determined in which order the given property values are applied. May be
   * overwritten, but the new implementation must pass the propertyNames through a super call at one
   * point.
   * @param propertyNames List of properties to be set to a new value
   */
  protected _reorderProperties(propertyNames: string[]): string[];

  /**
   * Stores the given value internally and triggers a matching change event.
   * @param propertyName
   * @param encodedValue
   */
  protected _storeProperty(propertyName: string, encodedValue: any): void;

  /**
   * Called by the native client to trigger a JavaScript event on this instance. May be overwritten to
   * pre-process the eventData object. The return value indicates whether `defaultPrevented` on the event
   * object was set to `true`. The new implementation must forward the parameters to a super call and
   * return that calls return value.
   * @param eventType
   * @param eventData
   */
  protected _trigger(eventType: string, eventData?: object): boolean;


  private _triggerChangeEvent(propertyName: string, newEncodedValue: any): void;

  /**
   * Returns `true` if _storeProperty was ever called with the given property propertyName
   * @param propertyName
   */
  protected _wasSet(propertyName: string): boolean;

  /**
   * Removes all occurrences of *listener* that are bound to *type* and *context* from this widget.
   * In TypeScript you should use the alternative `Listeners` API, e.g. `widget.onResize.off(listener);`
   * instead of `widget.off('resize', listener});` The former provides more type information.
   * @param type The type of events to remove listeners for.
   * @param listener The listener function to remove.
   * @param context The context of the bound listener to remove.
   */
  off(type: string, listener: (event: EventObject<NativeObject>) => void, context?: object): this;

  /**
   * Removes all listeners in the given object from the event type indicated by their key.
   * In TypeScript you should use the alternative `Listeners` API, e.g. `widget.onResize.off(listener);`
   * instead of `widget.off({resize: listener});` The former provides more type information.
   * @param listeners A key-value map where the keys are event types and the values are the listeners to deregister from these events, e.g. `{tap: onTap, scroll: onScroll}`.
   */
  off(listeners: {[event: string]: (event: EventObject<NativeObject>) => void}): this;

  /**
   * Registers a *listener* function to be notified of events of the given *type*.
   * @param type The type of events to listen for.
   * @param listener The listener function to register. This function will be called with an [event object](./EventObject.md).

  In TypeScript you should use the alternative `Listeners` API, e.g. `widget.onResize(listener);` instead of `widget.on({resize: listener});` The former provides more type information.
   * @param context In the listener function, `this` will point to this object. If not present, the listener will be called in the context of this object.
   */
  on(type: string, listener: (event: EventObject<NativeObject>) => any, context?: object): this;

  /**
   * Registers all listeners in the given object for the event type indicated by their key.
   * In TypeScript you should use the alternative `Listeners` API, e.g. `widget.onResize(listener);`
   * instead of `widget.on('resize', listener);` The former provides more type information.
   * @param listeners A key-value map where the keys are event types and the values are the listeners to register for these events, e.g. `{tap: onTap, scroll: onScroll}`.
   */
  on(listeners: {[event: string]: (event: EventObject<NativeObject>) => void}): this;

  /**
   * Same as `on`, but removes the listener after it has been invoked by an event.
   * In TypeScript you should use the alternative `Listeners` API, e.g. `widget.onResize.once(listener);`
   * instead of `widget.once('resize', listener);` The former provides more type information.
   * @param type The type of the event to listen for.
   * @param listener The listener function to register. This function will be called with an [event object](./EventObject.md).
   * @param context In the listener function, `this` will point to this object. If not present, the listener will be called in the context of this object.
   */
  once(type: string, listener: (event: EventObject<NativeObject>) => any, context?: object): this;

  /**
   * Same as `on`, but removes the listener after it has been invoked by an event.
   * In TypeScript you should use the alternative `Listeners` API, e.g. `widget.onResize.once(listener);`
   * instead of `widget.once({resize: listener});` The former provides more type information.
   * @param listeners A key-value map where the keys are event types and the values are the listeners to register for these events, e.g. `{tap: onTap, scroll: onScroll}`.
   */
  once(listeners: {[event: string]: (event: EventObject<NativeObject>) => void}): this;

  /**
   * Sets all key-value pairs in the properties object as widget properties.
   * **TypeScript note:** When called on `this` from within a subclass constructor (i.e. a custom
   * component/widget) you may have to use the generic version of this method:
   * `this.set<MySubclass>(...);`
   * @param properties
   */
  set<T extends NativeObject = this>(properties: Properties<T>): this;

  /**
   * Notifies all registered listeners for the given *type*.
   * In TypeScript you should use the alternative `Listeners` API, e.g. `widget.myEvent.trigger();`
   * instead of `widget.trigger('myEvent');` The former provides more type information.
   * @param type The type of event to trigger
   */
  trigger(type: string): this;

  /**
   * Passes the fields of the given *object* to all listeners registered for this event *type*.
   * In TypeScript you should use the alternative `Listeners` API, e.g.
   * `widget.myEvent.trigger(eventData);` instead of `widget.trigger('myEvent', eventData});` The former
   * provides more type information.
   * @param type The type of event to trigger
   * @param eventData The data to pass to listener functions.
   */
  trigger(type: string, eventData: object): this;

  /**
   * Initializes the given *eventObject* and passes it to all listeners registered for this event *type*.
   * If *eventObject* was already initialized its fields are copied to a new event object.
   * In TypeScript you should use the alternative `Listeners` API, e.g.
   * `widget.myEvent.trigger(eventObject);` instead of `widget.trigger('myEvent', eventObject});` The
   * former provides more type information.
   * @param type The type of event to trigger
   * @param eventObject An instance of `EventObject` (or a subclass) to pass to listener functions.
   */
  trigger(type: string, eventObject: EventObject<this>): this;

  /**
   * Like `trigger`, but returns a promise. The promise will resolve when all asynchronous listeners (if
   * any) have resolved. If none of the listeners are asynchronous (return a promise) this method works
   * just like `trigger()`. Useful for unit testing.
   * @param type The type of event to trigger
   */
  triggerAsync(type: string): Promise<this>;

  /**
   * Notifies all registered listeners for the given *type* with the given data. Unlike `trigger` each
   * asynchronous listener will be awaited, meaning that if a listener returns a promise that will pause
   * event processing until it resolves. Returns a promise that resolves once all listeners have been
   * notified. If any listener returns a rejecting promise the even processing is aborted and the returned
   * promise rejects with the error value. If none of the listeners return a promise this method works
   * just like `trigger()`. 
   * In TypeScript you should use `widget.myEvent.triggerAsync();` instead
   * @param type The type of event to trigger
   * @param object The data to pass to listener functions.
   */
  triggerAsync(type: string, object: object): Promise<this>;

  /**
   * Notifies all registered listeners for the given *type* with the given `EventObject`. Unlike `trigger`
   * each asynchronous listener will be awaited, meaning that if a listener returns a promise that will
   * pause event processing until it resolves. Returns a promise that resolves once all listeners have
   * been notified. If any listener returns a rejecting promise the even processing is aborted and the
   * returned promise rejects with the error value. If none of the listeners return a promise this method
   * works just like `trigger()`. 
   * In TypeScript you should use `widget.myEvent.triggerAsync();` instead
   * @param type The type of event to trigger
   * @param eventObject An instance of `EventObject` (or a subclass) to pass to listener functions.
   */
  triggerAsync(type: string, eventObject: EventObject<this>): Promise<this>;


  private static defineChangeEvent(target: object, propertyName: string): void;


  private static defineEvent(target: object, eventType: string, definition: object): void;


  private static defineEvents(target: object, definitions: object[]): void;


  private static defineProperties(target: object, definitions: object[]): void;


  private static defineProperty(target: object, propertyName: string, definition: object): void;


  private static extend(nativeType: string, superType?: Function): Function;


  private $props: unknown;


  protected _isDisposed: true | undefined;


  protected get _nativeType(): string;




  /**
   * An application-wide unique identifier automatically assigned to all native objects on creation. It
   * follows the pattern '$<number>', where the number is incremented for each new NativeObject instance.
   * @constant
   */
  readonly cid: string;

  /**
   * When using JSX with TypeScript (`.tsx` files), the type of this property determines which JSX
   * attributes are valid for this object.
   * @constant
   */
  readonly jsxAttributes: JSXAttributes<this>;
}


// NavigationBar


/**
 * The navigation bar is the onscreen area where *Back*, *Home* and similar buttons are displayed. The
 * singleton instance can be accessed via `navigationBar` and is only supported on Android.
 */
export class NavigationBar extends NativeObject {

  /**
   * The navigation bar is the onscreen area where *Back*, *Home* and similar buttons are displayed. The
   * singleton instance can be accessed via `navigationBar` and is only supported on Android.
   */
  private constructor(properties?: Properties<NavigationBar>);

  /**
   * Background color of the navigation bar.
   */
  background: ColorValue;

  /**
   * Controls how the navigation bar is positioned relative to the `contentView`. The value `default`
   * places the content above the navigation bar. The `hide` option lets the navigation bar disappear,
   * making room for the content. The `float` option lets the content flow underneath the navigation bar.
   */
  displayMode: 'default' | 'float' | 'hide';

  /**
   * The height of the navigation bar in device independent pixel. Can be used in conjunction with the
   * `displayMode` `float` to offset the content as to not have it covered by the navigation bar.
   * @constant
   */
  readonly height: number;

  /**
   * @constant
   */
  readonly jsxAttributes: JSXAttributes<this> & {children?: never};

  /**
   * Defines the appearance used on the navigation bar. A `dark` theme sets the foreground navigation
   * icons to be of a light color, whereas `light` sets the icons to a dark color. The theme should be set
   * in conjunction with the `background` property for contrast. The value `default` selects the default
   * theme that depends on the device and on the app. Available on Android 8+.
   */
  theme: 'dark' | 'default' | 'light';

  /**
   * Fired when the [*background*](#background) property has changed.
   */
  onBackgroundChanged: ChangeListeners<this, 'background'>;

  /**
   * Fired when the [*displayMode*](#displayMode) property has changed.
   */
  onDisplayModeChanged: ChangeListeners<this, 'displayMode'>;

  /**
   * Fired when the [*theme*](#theme) property has changed.
   */
  onThemeChanged: ChangeListeners<this, 'theme'>;
}


export const navigationBar: NavigationBar;

// NavigationView


export namespace widgets {

  /**
   * A widget that displays a stack of [pages](Page) with a toolbar that allows to navigate back. The
   * toolbar also displays the current page's title and the highest priority [actions](Action) that are
   * added to the NavigationView. Only children of type `Page`, `Action` and `SearchAction` are supported.
   * Since the NavigationView does not compute its own size, the width and height must be defined by the
   * respective layout properties (e.g. either `width` or `left` and `right` must be specified).
   */
  export class NavigationView<PageType extends Page = Page, ActionType extends Action = Action> extends Composite<PageType | ActionType> {

    /**
     * A widget that displays a stack of [pages](Page) with a toolbar that allows to navigate back. The
     * toolbar also displays the current page's title and the highest priority [actions](Action) that are
     * added to the NavigationView. Only children of type `Page`, `Action` and `SearchAction` are supported.
     * Since the NavigationView does not compute its own size, the width and height must be defined by the
     * respective layout properties (e.g. either `width` or `left` and `right` must be specified).
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<NavigationView>);

    /**
     * Returns the ordered list of pages on the page stack, with the bottommost page as the first and the
     * topmost page as the last element. Same as children(), but only returns children that are of type
     * `Page`.
     * @param selector A selector expression or a predicate function to filter the results.
     */
    pages(selector?: Selector): WidgetCollection<PageType>;

    /**
     * Returns the ordered list of pages on the page stack, with the bottommost page as the first and the
     * topmost page as the last element. Same as children(), but only accepts subclasses of `Page`.
     * @param constructor A class to filter the results.
     */
    pages<U extends Page>(constructor: { new (...args: any[]): U }): WidgetCollection<U>;

    /**
     * The color used for action icons.
     */
    actionColor: ColorValue;

    /**
     * The color used for action texts. Only applied on Android, IOS uses the `actionColor` to colorize the
     * action text.
     */
    actionTextColor: ColorValue;

    /**
     * Whether to display the so-called "Burger menu" to open the drawer.
     */
    drawerActionVisible: boolean;

    /**
     * Controls what animation to use when animating a page transition.
     */
    pageAnimation: 'default' | 'none';

    /**
     * The text color used for page titles.
     */
    titleTextColor: ColorValue;

    /**
     * The background color of the toolbar.
     */
    toolbarColor: ColorValue;

    /**
     * The height of the toolbar. Is 0 if not visible.
     */
    toolbarHeight: number;

    /**
     * Whether the toolbar is visible.
     */
    toolbarVisible: boolean;

    /**
     * Fired when the [*actionColor*](#actionColor) property has changed.
     */
    onActionColorChanged: ChangeListeners<this, 'actionColor'>;

    /**
     * Fired when the [*actionTextColor*](#actionTextColor) property has changed.
     */
    onActionTextColorChanged: ChangeListeners<this, 'actionTextColor'>;

    /**
     * Fired when the [*drawerActionVisible*](#drawerActionVisible) property has changed.
     */
    onDrawerActionVisibleChanged: ChangeListeners<this, 'drawerActionVisible'>;

    /**
     * Fired when the [*pageAnimation*](#pageAnimation) property has changed.
     */
    onPageAnimationChanged: ChangeListeners<this, 'pageAnimation'>;

    /**
     * Fired when the [*titleTextColor*](#titleTextColor) property has changed.
     */
    onTitleTextColorChanged: ChangeListeners<this, 'titleTextColor'>;

    /**
     * Fired when the [*toolbarColor*](#toolbarColor) property has changed.
     */
    onToolbarColorChanged: ChangeListeners<this, 'toolbarColor'>;

    /**
     * Fired when the height of the toolbar changes, e.g. if it changes visibility.
     */
    onToolbarHeightChanged: ChangeListeners<this, 'toolbarHeight'>;

    /**
     * Fired when the [*toolbarVisible*](#toolbarVisible) property has changed.
     */
    onToolbarVisibleChanged: ChangeListeners<this, 'toolbarVisible'>;
  }
}


export type NavigationView<PageType extends Page = Page, ActionType extends Action = Action> = widgets.NavigationView<PageType, ActionType>;
export type NavigationViewConstructor = typeof widgets.NavigationView;
export interface NavigationViewFactory extends Factory<NavigationViewConstructor>, NavigationViewConstructor {}
export const NavigationView: NavigationViewFactory;

// Observable

/**
 * An Observable represents a sequence of values which may be observed. API based on the proposed Ecma
 * TC39 Observable standard. It can be converted to an RxJS Observable via its
 * [`from`](https://rxjs.dev/api/index/function/from) function.
 */
export class Observable<T> {

  /**
   * An Observable represents a sequence of values which may be observed. API based on the proposed Ecma
   * TC39 Observable standard. It can be converted to an RxJS Observable via its
   * [`from`](https://rxjs.dev/api/index/function/from) function.
   */
  public constructor(subscribe: SubscriptionHandler<T>);


  [Symbol.observable](): this;

  /**
   * Subscribes to this observable.
   * @param observer Object with some or all of the callbacks of ${doc:Subscriber}.
   */
  subscribe(observer: PartialObserver<T>): Subscription;

  /**
   * Subscribes to this observable.
   * @param next Callback invoked whenever the observed value changes.
   * @param error Callback invoked when the subscription encounters an error.
   * @param complete Callback invoked once when the subscription closes, either by itself or by calling `unsubscribe`. No other callbacks will be invoked from then on.
   */
  subscribe(next: NextCb<T> | null, error?: ErrorCb | null, complete?: CompleteCb | null): Subscription;

  /**
   * Creates an observable emitting the given source object once and then again whenever it fires property
   * change events. It can be used with any widget, NativeObject instance, or object using @property or
   * @prop decorators.
   * Events are aggregated, meaning multiple subsequent property changes may result in only one
   * notification to the observer. It is guaranteed that this notification will occur before the next
   * frame is rendered on screen.
   * The observable completes if the source object is disposed.
   * Limitations: The observable will not detect property changes that do not trigger change events, so
   * plain objects, arrays, objects created by third-party libraries or instances of built-in ECMAScript
   * types (such as Map) are not supported. Also, changes of `bounds` or any built-in property giving
   * scroll offsets will *not* trigger the observable.
   * @param source
   */
  static mutations<T extends object>(source: T): Observable<T>;
}


// Page


export namespace widgets {

  /**
   * A container representing a single page of a NavigationView widget.
   */
  export class Page extends Composite {

    /**
     * A container representing a single page of a NavigationView widget.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<Page>);

    /**
     * Appends this widget to the given `NavigationView` instance.
     * @param parent
     */
    appendTo(parent: NavigationView): this;

    /**
     * Inserts this widget directly after the given `Action`.
     * @param widget
     */
    insertAfter(widget: Page): this;

    /**
     * Inserts this widget directly before the given `Page`.
     * @param widget
     */
    insertBefore(widget: Page): this;

    /**
     * Returns the `NavigationView` the `Page` is hosted in or `null` if it has no parent.
     */
    parent(): NavigationView;

    /**
     * Returns a (possibly empty) collection of all siblings of this widget that match the given selector.
     * @param selector A selector expression or a predicate function to filter the results.
     */
    siblings<Result extends Widget = Action | Page>(selector?: Selector<Widget, Result>): WidgetCollection<Result>;

    /**
     * Defines whether this page will be automatically disposed when popped from the NavigationView, e.g.
     * using native back navigation.
     */
    autoDispose: boolean;

    /**
     * An image to be displayed in the navigation bar
     */
    image: ImageValue;

    /**
     * The page title to be displayed in the navigation bar.
     */
    title: string;

    /**
     * Fired when the page is about to become visible, i.e. it has become the active page.
     */
    onAppear: Listeners<EventObject<this>>;

    /**
     * Fired when the page is no longer visible, i.e. another page has become the active page.
     */
    onDisappear: Listeners<EventObject<this>>;

    /**
     * Fired when the [*autoDispose*](#autoDispose) property has changed.
     */
    onAutoDisposeChanged: ChangeListeners<this, 'autoDispose'>;

    /**
     * Fired when the [*image*](#image) property has changed.
     */
    onImageChanged: ChangeListeners<this, 'image'>;

    /**
     * Fired when the [*title*](#title) property has changed.
     */
    onTitleChanged: ChangeListeners<this, 'title'>;
  }
}


export type Page = widgets.Page;
export type PageConstructor = typeof widgets.Page;
export interface PageFactory extends Factory<PageConstructor>, PageConstructor {}
export const Page: PageFactory;

// PdfView


export interface PdfViewLoadEvent<Target = PdfView>
 extends EventObject<Target>
{
  readonly error: boolean;
}

export namespace widgets {

  /**
   * A widget to display PDF documents.
   */
  export class PdfView extends Widget {

    /**
     * A widget to display PDF documents.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<PdfView>);

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & {children?: Flatten<object>};

    /**
     * Additional space to add inside the widgets bounds.
     * @constant
     */
    padding: BoxDimensions | null;

    /**
     * Determines the color visible in the transparent areas of a page.
     */
    pageBackground: ColorValue;

    /**
     * Setting this property determines the intensity of the shadow page on the widget background. On iOS
     * the shadow is either visible or not (property set to `0`), but always looks the same.
     */
    pageElevation: number;

    /**
     * The vertical spacing between the individual pages. The default is specific to the device and can not
     * be changed on iOS.
     */
    spacing: Dimension;

    /**
     * The source of the document. Can be a path on the local file system or a `Blob`/`File` object.
     */
    src: string | Blob | null;

    /**
     * Enables the pinch-to-zoom gesture. On iOS this will scale the entire document, while on Android each
     * page is scaled individually.
     */
    zoomEnabled: boolean;

    /**
     * Fired when the document loading has finished.
     */
    onLoad: Listeners<PdfViewLoadEvent<this>>;

    /**
     * Fired when the [*pageBackground*](#pageBackground) property has changed.
     */
    onPageBackgroundChanged: ChangeListeners<this, 'pageBackground'>;

    /**
     * Fired when the [*pageElevation*](#pageElevation) property has changed.
     */
    onPageElevationChanged: ChangeListeners<this, 'pageElevation'>;

    /**
     * Fired when the [*spacing*](#spacing) property has changed.
     */
    onSpacingChanged: ChangeListeners<this, 'spacing'>;

    /**
     * Fired when the [*src*](#src) property has changed.
     */
    onSrcChanged: ChangeListeners<this, 'src'>;

    /**
     * Fired when the [*zoomEnabled*](#zoomEnabled) property has changed.
     */
    onZoomEnabledChanged: ChangeListeners<this, 'zoomEnabled'>;
  }
}


export type PdfView = widgets.PdfView;
export type PdfViewConstructor = typeof widgets.PdfView;
export interface PdfViewFactory extends Factory<PdfViewConstructor>, PdfViewConstructor {}
export const PdfView: PdfViewFactory;

// Percent

/**
 * Represents a percentage. See also ${doc:PercentValue}
 */
export class Percent {

  /**
   * Represents a percentage. See also ${doc:PercentValue}
   */
  public constructor(value: number);

  /**
   * Returns a string representation of the percent (a number followed by '%').
   */
  toString(): string;

  /**
   * Returns the percent number
   */
  valueOf(): number;

  /**
   * Creates a new instance of Percent using any valid percent expression. For any other value, including
   * `null` the method throws.
   * @param percentValue The value to create a Percent instance from
   */
  static from(percentValue: PercentValue): Percent;

  /**
   * Returns true if value is a valid PercentValue. This excludes `null`. Use this to check if a value
   * will be accepted by Percent.from. This is also a valid TypeScript type guard function.
   * @param value The value to test
   */
  static isValidPercentValue(value: any): value is PercentValue;

  /**
   * A number between and including 0 and 100
   * @constant
   */
  readonly percent: number;
}


// Picker


export interface PickerSelectEvent<Target = Picker>
 extends EventObject<Target>
{
  readonly index: number;
}

export namespace widgets {

  /**
   * A widget with a drop-down list of items to choose from.
   */
  export class Picker extends Widget {

    /**
     * A widget with a drop-down list of items to choose from.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<Picker> & Partial<Pick<Picker, 'itemText'>>);

    /**
     * Sets all key-value pairs in the properties object as widget properties.
     * **Important TypeScript note:** When called on `this` you may need to specify your custom type like
     * this: `this.set<MyComponent>({propA: valueA});`
     * @param properties
     */
    set<T extends NativeObject = this>(properties: Properties<T> & Partial<Pick<this, 'itemText'>>): this;

    /**
     * The color of the Picker border. This can be the surrounding line or the underline of the Picker
     * depending on the `style` property.
     */
    borderColor: ColorValue;

    /**
     * Whether the hint message should float above the Picker when focus is gained.
     */
    floatMessage: boolean;

    /**
     * The font used for the text inside the Picker.
     */
    font: FontValue;

    /**
     * The number of items to display.
     */
    itemCount: number;

    /**
     * A function that returns the string to display for a given index.
     */
    itemText: ((index:number) => string);

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & Partial<Pick<Picker, 'itemText'>> & {children?: JSXDefaultChildren};

    /**
     * A hint text that is displayed when the picker has no selection.
     */
    message: string;

    /**
     * The index of the currently selected item.
     */
    selectionIndex: number;

    /**
     * The visual appearance of the `Picker` widget.
     * With the `style` _outline_, _fill_ or _underline_ the message hint will float above the `Picker` on
     * Android. This behavior can be controlled with the property `floatMessage`. The `style` _none_ will
     * remove any background visualization, allowing to create a custom background. 
     * @constant
     */
    style: 'default' | 'fill' | 'none' | 'outline' | 'underline';

    /**
     * The color of the text.
     */
    textColor: ColorValue;

    /**
     * Fired when an item was selected by the user.
     */
    onSelect: Listeners<PickerSelectEvent<this>>;

    /**
     * Fired when the [*borderColor*](#borderColor) property has changed.
     */
    onBorderColorChanged: ChangeListeners<this, 'borderColor'>;

    /**
     * Fired when the [*floatMessage*](#floatMessage) property has changed.
     */
    onFloatMessageChanged: ChangeListeners<this, 'floatMessage'>;

    /**
     * Fired when the [*font*](#font) property has changed.
     */
    onFontChanged: ChangeListeners<this, 'font'>;

    /**
     * Fired when the [*itemCount*](#itemCount) property has changed.
     */
    onItemCountChanged: ChangeListeners<this, 'itemCount'>;

    /**
     * Fired when the [*itemText*](#itemText) property has changed.
     */
    onItemTextChanged: ChangeListeners<this, 'itemText'>;

    /**
     * Fired when the [*message*](#message) property has changed.
     */
    onMessageChanged: ChangeListeners<this, 'message'>;

    /**
     * Fired when the [*selectionIndex*](#selectionIndex) property has changed.
     */
    onSelectionIndexChanged: ChangeListeners<this, 'selectionIndex'>;

    /**
     * Fired when the [*textColor*](#textColor) property has changed.
     */
    onTextColorChanged: ChangeListeners<this, 'textColor'>;
  }
}


export type Picker = widgets.Picker;
export type PickerConstructor = typeof widgets.Picker;
export interface PickerFactory extends Factory<PickerConstructor>, PickerConstructor {}
export const Picker: PickerFactory;

// Popover


/**
 * An `Popover` represents a modal ui container that is shown above the apps content. It provides the
 * root element of a new layout hierarchy in the form of its `contentView` property. User provided
 * widgets can be attached to the `contentView` similarly to the `tabris.contentView`. In order to close
 * the `Popover` the `close()` method can be used.
 * The appearance of the `Popover` depends on the device size: On larger devices (like tablets) the
 * `Popover` is shown as a floating window whereas on smaller devices it is shown as a fullscreen sheet
 * covering the entire app.
 */
export class Popover extends Popup {

  /**
   * An `Popover` represents a modal ui container that is shown above the apps content. It provides the
   * root element of a new layout hierarchy in the form of its `contentView` property. User provided
   * widgets can be attached to the `contentView` similarly to the `tabris.contentView`. In order to close
   * the `Popover` the `close()` method can be used.
   * The appearance of the `Popover` depends on the device size: On larger devices (like tablets) the
   * `Popover` is shown as a floating window whereas on smaller devices it is shown as a fullscreen sheet
   * covering the entire app.
   * 
   * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
   * object which may include (in addition to the properties) children, event listeners and layout
   * shorthands.
   */
  public constructor(properties?: Properties<Omit<Popover, 'contentView'>>);

  /**
   * Makes the given popover visible. Meant to be used with inline-JSX. In TypeScript it also casts the
   * given JSX element from `any` to an actual Popover.
   * @param popover The popover to open
   */
  static open(popover: Popover): Popover;

  /**
   * An anchor `Widget` the `Popover` should attach to. When the anchor is given the `Popover` is
   * positioned next to the anchor `Widget` and provides a visual indication of its relation. When omitted
   * the `Popover` is positioned centered on the screen.
   */
  anchor: Widget;

  /**
   * The root widget element containing all children of Popover.
   * @constant
   */
  readonly contentView: ContentView;

  /**
   * The height of the `Popover` when shown in windowed mode on large screen devices. Will be a platform
   * specific default if set to null.
   */
  height: Dimension;

  /**
   * @constant
   */
  readonly jsxAttributes: JSXAttributes<this> & {children?: JSXChildren<Widget>, contentView?: never};

  /**
   * The width of the `Popover` when shown in windowed mode on large screen devices. Will be a platform
   * specific default if set to null.
   */
  width: Dimension;

  /**
   * Fired when the `Popover` was closed.
   */
  onClose: Listeners<EventObject<this>>;

  /**
   * Fired when the [*anchor*](#anchor) property has changed.
   */
  onAnchorChanged: ChangeListeners<this, 'anchor'>;

  /**
   * Fired when the [*height*](#height) property has changed.
   */
  onHeightChanged: ChangeListeners<this, 'height'>;

  /**
   * Fired when the [*width*](#width) property has changed.
   */
  onWidthChanged: ChangeListeners<this, 'width'>;
}


// Popup


/**
 * Base class for all pop-up UI elements. Pop-ups are placed on top of all other UI, but are not
 * widgets. Some pop-ups can be opened only once.
 */
export class Popup extends NativeObject {

  /**
   * Base class for all pop-up UI elements. Pop-ups are placed on top of all other UI, but are not
   * widgets. Some pop-ups can be opened only once.
   * 
   * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
   * object which may include (in addition to the properties) children, event listeners and layout
   * shorthands.
   */
  protected constructor();

  /**
   * Hides the popup.
   */
  close(): this;

  /**
   * Makes the popup visible.
   */
  open(): this;

  /**
   * This function is called to create JSX popup elements. You may override it in your own subclass to
   * create custom JSX behavior. **The function is not called with any context, i.e. `this` is not
   * available.**
   * @constant
   */
  readonly [JSX.jsxFactory]: JSX.JsxFactory;
}


// ProgressBar


export namespace widgets {

  /**
   * A widget representing a numeric value as a horizontal bar with a growing indicator.
   */
  export class ProgressBar extends Widget {

    /**
     * A widget representing a numeric value as a horizontal bar with a growing indicator.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<ProgressBar>);

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & {children?: JSXDefaultChildren};

    /**
     * The value that represents a progress of 100%. May be negative.
     */
    maximum: number;

    /**
     * The value that represents a progress of 0%. May be negative.
     */
    minimum: number;

    /**
     * The actual progress to be displayed.
     */
    selection: number;

    /**
     * This property affects the color of the progress indicator. Not supported on iOS.
     */
    state: 'error' | 'normal' | 'paused';

    /**
     * The color used to display the current progress.
     */
    tintColor: ColorValue;

    /**
     * Fired when the [*maximum*](#maximum) property has changed.
     */
    onMaximumChanged: ChangeListeners<this, 'maximum'>;

    /**
     * Fired when the [*minimum*](#minimum) property has changed.
     */
    onMinimumChanged: ChangeListeners<this, 'minimum'>;

    /**
     * Fired when the [*selection*](#selection) property has changed.
     */
    onSelectionChanged: ChangeListeners<this, 'selection'>;

    /**
     * Fired when the [*state*](#state) property has changed.
     */
    onStateChanged: ChangeListeners<this, 'state'>;

    /**
     * Fired when the [*tintColor*](#tintColor) property has changed.
     */
    onTintColorChanged: ChangeListeners<this, 'tintColor'>;
  }
}


export type ProgressBar = widgets.ProgressBar;
export type ProgressBarConstructor = typeof widgets.ProgressBar;
export interface ProgressBarFactory extends Factory<ProgressBarConstructor>, ProgressBarConstructor {}
export const ProgressBar: ProgressBarFactory;

// RadioButton


export interface RadioButtonSelectEvent<Target = RadioButton>
 extends EventObject<Target>
{
  readonly checked: boolean;
}

export namespace widgets {

  /**
   * A radio button. Selecting a radio button de-selects all its siblings (i.e. all radio buttons within
   * the same parent).
   */
  export class RadioButton extends Widget {

    /**
     * A radio button. Selecting a radio button de-selects all its siblings (i.e. all radio buttons within
     * the same parent).
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<RadioButton>);

    /**
     * The checked state of the radio button.
     */
    checked: boolean;

    /**
     * The color of the selectable area in checked state. Will fall back to `tintColor` if not set.
     */
    checkedTintColor: ColorValue;

    /**
     * The font used for the text.
     */
    font: FontValue;

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & {children?: JSXDefaultChildren};

    /**
     * The label text of the radio button.
     */
    text: string;

    /**
     * The color of the text.
     */
    textColor: ColorValue;

    /**
     * The color of the selectable area.
     */
    tintColor: ColorValue;

    /**
     * Fired when the radio button is selected or deselected by the user.
     */
    onSelect: Listeners<RadioButtonSelectEvent<this>>;

    /**
     * Fired when the [*checked*](#checked) property has changed.
     */
    onCheckedChanged: ChangeListeners<this, 'checked'>;

    /**
     * Fired when the [*checkedTintColor*](#checkedTintColor) property has changed.
     */
    onCheckedTintColorChanged: ChangeListeners<this, 'checkedTintColor'>;

    /**
     * Fired when the [*font*](#font) property has changed.
     */
    onFontChanged: ChangeListeners<this, 'font'>;

    /**
     * Fired when the [*text*](#text) property has changed.
     */
    onTextChanged: ChangeListeners<this, 'text'>;

    /**
     * Fired when the [*textColor*](#textColor) property has changed.
     */
    onTextColorChanged: ChangeListeners<this, 'textColor'>;

    /**
     * Fired when the [*tintColor*](#tintColor) property has changed.
     */
    onTintColorChanged: ChangeListeners<this, 'tintColor'>;
  }
}


export type RadioButton = widgets.RadioButton;
export type RadioButtonConstructor = typeof widgets.RadioButton;
export interface RadioButtonFactory extends Factory<RadioButtonConstructor>, RadioButtonConstructor {}
export const RadioButton: RadioButtonFactory;

// RefreshComposite


export namespace widgets {

  /**
   * A composite allowing to use a pull-to-refresh gesture to trigger and visualize a long running
   * operation.
   */
  export class RefreshComposite extends Composite {

    /**
     * A composite allowing to use a pull-to-refresh gesture to trigger and visualize a long running
     * operation.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<RefreshComposite>);

    /**
     * Whether the pull-to-refresh gesture can be performed by the user. When disabled, the
     * `RefreshComposite` behaves like a regular `Composite`.
     */
    refreshEnabled: boolean;

    /**
     * Whether to visualize a long running operation. After the user has triggered a manual refresh, this
     * property is `true` and should be set to `false` when the operation ended.
     */
    refreshIndicator: boolean;

    /**
     * A message to show to the user during the refresh operation.
     */
    refreshMessage: string;

    /**
     * Fired when a refresh is triggered by the user.
     */
    onRefresh: Listeners<EventObject<this>>;

    /**
     * Fired when the [*refreshEnabled*](#refreshEnabled) property has changed.
     */
    onRefreshEnabledChanged: ChangeListeners<this, 'refreshEnabled'>;

    /**
     * Fired when the [*refreshIndicator*](#refreshIndicator) property has changed.
     */
    onRefreshIndicatorChanged: ChangeListeners<this, 'refreshIndicator'>;

    /**
     * Fired when the [*refreshMessage*](#refreshMessage) property has changed.
     */
    onRefreshMessageChanged: ChangeListeners<this, 'refreshMessage'>;
  }
}


export type RefreshComposite = widgets.RefreshComposite;
export type RefreshCompositeConstructor = typeof widgets.RefreshComposite;
export interface RefreshCompositeFactory extends Factory<RefreshCompositeConstructor>, RefreshCompositeConstructor {}
export const RefreshComposite: RefreshCompositeFactory;

// ResourceBuilder

/**
 * A factory for generic resource dictionaries. Instances can be obtained from `Resource.build()` or by
 * invoking the constructor.
 * Do not use for resource dictionaries of the types `Color`, `Font` and `string`. Instead use the
 * respective factories `ColorResources.from()`, `FontResources.from()` and `TextResources.from()`.
 */
export class ResourceBuilder<ResourceType, RawType = ResourceType> {

  /**
   * A factory for generic resource dictionaries. Instances can be obtained from `Resource.build()` or by
   * invoking the constructor.
   * Do not use for resource dictionaries of the types `Color`, `Font` and `string`. Instead use the
   * respective factories `ColorResources.from()`, `FontResources.from()` and `TextResources.from()`.
   */
  public constructor(options: ResourceBuilderConstructorOptions<ResourceType, RawType>);

  /**
   * Creates a resource dictionary from the given raw "data" object. All values from the given "base"
   * dictionary are inherited unless overwritten.
   * Entries in the "data" object starting with "$" are considered configuration options and will not
   * become part of the final resource dictionary.
   * @param base
   * @param data
   */
  from<Base extends NamedResources<ResourceType, keyof Base>, Data extends ResourceDataWithConfig<RawType>>(base: Base, data: Data): NamedResources<ResourceType, keyof (Base & Data)>;


  from<Data extends ResourceDataWithConfig<RawType>>(data: Data): NamedResources<ResourceType, keyof Data>;
}


// Resources

/**
 * This is the base class for all typed resource dictionaries. Instances can be obtained from one of its
 * subclasses, or via the `build` method, which crates an intermediate `ResourceBuilder` object.  All
 * members of a `Resources` (or subclass) instance must be of the same type (`ResourceType`).
 */
export class Resources<ResourceType, RawType = ResourceType> {

  /**
   * This is the base class for all typed resource dictionaries. Instances can be obtained from one of its
   * subclasses, or via the `build` method, which crates an intermediate `ResourceBuilder` object.  All
   * members of a `Resources` (or subclass) instance must be of the same type (`ResourceType`).
   */
  protected constructor(options: ResourcesConstructorOptions<ResourceType, RawType>);


  static build<ResourceType>(options: ResourceBuildOptions<ResourceType>): ResourceBuilder<ResourceType, ResourceType>;

  /**
   * Generates a `ResourceBuilder`, which is a factory for resource dictionaries. The options given here
   * determine the type of the resource, as well as the "raw" type from which to create the resource
   * values from.
   * * The validator function receives a "raw" resource value (unconverted, as provided in the input data
   * object) and must return a boolean indicating whether it is accepted. This means it either is a value
   * that will be accepted by the converter, or if no converter is present it must be the final format of
   * the resource value.
   * * The converter if a function that receives the raw input value and returns the value as it will be
   * present on the final resource dictionary. If no converter is given this is the same type as the
   * resource type.
   * * The "type" may be a constructor of the type of the final resource value as returned by the
   * converter. For primitives this option must not be given.
   * @param options The configuration of the new `ResourceBuilder`. Requires either a validator or a converter function, or both.
   */
  static build<ResourceType, RawType>(options: ResourceBuildConvertOptions<ResourceType, RawType>): ResourceBuilder<ResourceType, RawType>;
}


// Row


export namespace widgets {

  /**
   * A composite with the `layout` property initialized with a `RowLayout`. All children are automatically
   * arranged in one horizontal row, starting from the left.
   */
  export class Row extends Composite {

    /**
     * A composite with the `layout` property initialized with a `RowLayout`. All children are automatically
     * arranged in one horizontal row, starting from the left.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<Row>);

    /**
     * Determines the vertical placement of the children.
     * For `stretchY` to work correctly the `Row` needs to be given a height either by setting `height` or
     * by setting `top` and `bottom`.
     * If `baseline` is set the first widget in the row will determine where that baseline is. By setting
     * `top`, `bottom` or `centerY` on that widget the baseline can be shifted.
     * @constant
     */
    alignment: 'top' | 'centerY' | 'stretchY' | 'bottom' | 'baseline';

    /**
     * The row layout manager responsible for interpreting the [`layoutData`](./Widget.md#layoutdata) of the
     * child widgets of this Composite.
     * @constant
     */
    layout: RowLayout;

    /**
     * The space between the children in device independent pixel.
     * @constant
     */
    spacing: number;
  }
}


export type Row = widgets.Row;
export type RowConstructor = typeof widgets.Row;
export interface RowFactory extends Factory<RowConstructor>, RowConstructor {}
export const Row: RowFactory;

// RowLayout

/**
 * Row based layout manager. Can be set on the `layout` property of any `Composite` or widget extending
 * `Composite` like `Page` or `Tab` widget. The `Row` uses it as the default `layout`. <br/><br/> All
 * children of the composite are automatically arranged in one horizontal row, starting from the left.
 */
export class RowLayout extends Layout {

  /**
   * Row based layout manager. Can be set on the `layout` property of any `Composite` or widget extending
   * `Composite` like `Page` or `Tab` widget. The `Row` uses it as the default `layout`. <br/><br/> All
   * children of the composite are automatically arranged in one horizontal row, starting from the left.
   */
  public constructor(options?: {spacing?: number, alignment?: 'top' | 'centerY' | 'stretchY' | 'bottom' | 'baseline'});

  /**
   * Determines the vertical placement of the children.
   * For `stretchY` to work correctly the `Row` needs to be given a height either by setting `height` or
   * by setting `top` and `bottom`.
   * If `baseline` is set the first widget in the row will determine where that baseline is. By setting
   * `top`, `bottom` or `centerY` on that widget the baseline can be shifted.
   * @constant
   */
  readonly alignment: 'top' | 'centerY' | 'stretchY' | 'bottom' | 'baseline';

  /**
   * The Space between the children in device independent pixel.
   * @constant
   */
  readonly spacing: number;

  /**
   * Instance of RowLayout used as the default `layout` property value of `Row` widgets. Equivalent to
   * `new RowLayout()`
   */
  static default: RowLayout;
}


// ScrollView


export interface ScrollViewScrollEvent<Target = ScrollView>
 extends EventObject<Target>
{
  readonly offset: number;
}

export namespace widgets {

  /**
   * A composite that allows its content to overflow either vertically (default) or horizontally. Since
   * the ScrollView does not compute its own size, the width and height must be defined by the respective
   * layout properties (e.g. either `width` or `left` and `right` must be specified).
   */
  export class ScrollView extends Composite {

    /**
     * A composite that allows its content to overflow either vertically (default) or horizontally. Since
     * the ScrollView does not compute its own size, the width and height must be defined by the respective
     * layout properties (e.g. either `width` or `left` and `right` must be specified).
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<ScrollView>);

    /**
     * Scrolls to the given horizontal offset. Give `{animate: false}` as the second parameter to suppress
     * the animation.
     * @param offset The offset to scroll to in dip.
     * @param options An additional parameter object to control the animation.
     */
    scrollToX(offset: number, options?: {animate?: boolean}): this;

    /**
     * Scrolls to the given vertical offset. Give `{animate: false}` as the second parameter to suppress the
     * animation.
     * @param offset The offset to scroll to in dip.
     * @param options An parameter object to control the animation.
     */
    scrollToY(offset: number, options?: {animate?: boolean}): this;

    /**
     * Specifies the scrolling direction of the scroll composite.
     * @constant
     */
    direction: 'horizontal' | 'vertical';

    /**
     * The horizontal scrolling position in dip.
     */
    readonly offsetX: number;

    /**
     * The vertical scrolling position in dip.
     */
    readonly offsetY: number;

    /**
     * The scroll state of the `ScrollView` in horizontal direction. The following states are supported:
     * * `rest` - no scrolling
     * * `drag` the user moves the `ScrollView` content with his finger
     * * `scroll` the user has flinged the content with his finger or the `ScrollView` is scrolling
     * programmatically
     */
    readonly scrollXState: 'drag' | 'rest' | 'scroll';

    /**
     * The scroll state of the `ScrollView` in vertical direction. The following states are supported:
     * * `rest` - no scrolling
     * * `drag` the user moves the `ScrollView` content with his finger
     * * `scroll` the user has flinged the `ScrollView` content with his finger or the `ScrollView` is
     * scrolling programmatically
     */
    readonly scrollYState: 'drag' | 'rest' | 'scroll';

    /**
     * Allows to show or hide scroll bar for current direction.
     */
    scrollbarVisible: boolean;

    /**
     * Fired while scrolling horizontally.
     */
    onScrollX: Listeners<ScrollViewScrollEvent<this>>;

    /**
     * Fired while scrolling vertically.
     */
    onScrollY: Listeners<ScrollViewScrollEvent<this>>;

    /**
     * Fired when the [*offsetX*](#offsetX) property has changed.
     */
    onOffsetXChanged: ChangeListeners<this, 'offsetX'>;

    /**
     * Fired when the [*offsetY*](#offsetY) property has changed.
     */
    onOffsetYChanged: ChangeListeners<this, 'offsetY'>;

    /**
     * Fired when the [*scrollXState*](#scrollXState) property has changed.
     */
    onScrollXStateChanged: ChangeListeners<this, 'scrollXState'>;

    /**
     * Fired when the [*scrollYState*](#scrollYState) property has changed.
     */
    onScrollYStateChanged: ChangeListeners<this, 'scrollYState'>;

    /**
     * Fired when the [*scrollbarVisible*](#scrollbarVisible) property has changed.
     */
    onScrollbarVisibleChanged: ChangeListeners<this, 'scrollbarVisible'>;
  }
}


export type ScrollView = widgets.ScrollView;
export type ScrollViewConstructor = typeof widgets.ScrollView;
export interface ScrollViewFactory extends Factory<ScrollViewConstructor>, ScrollViewConstructor {}
export const ScrollView: ScrollViewFactory;

// SearchAction


export interface SearchActionAcceptEvent<Target = SearchAction>
 extends EventObject<Target>
{
  readonly text: string;
}

export interface SearchActionInputEvent<Target = SearchAction>
 extends EventObject<Target>
{
  readonly text: string;
}

export namespace widgets {

  /**
   * An action that displays a search text field with dynamic proposals when selected. Add a listener on
   * *select* to implement the action. On *input*, you may set a list of *proposals*.
   */
  export class SearchAction extends Action {

    /**
     * An action that displays a search text field with dynamic proposals when selected. Add a listener on
     * *select* to implement the action. On *input*, you may set a list of *proposals*.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<SearchAction>);

    /**
     * Invokes the search action, i.e. displays the UI to perform a search.
     */
    open(): void;

    /**
     * A hint text that is displayed when the search input is empty.
     */
    message: string;

    /**
     * The list of proposals to display.
     */
    proposals: string[];

    /**
     * The text in the search input field.
     */
    text: string;

    /**
     * Fired when a text input has been submitted by pressing the keyboard's search key.
     */
    onAccept: Listeners<SearchActionAcceptEvent<this>>;

    /**
     * Fired when the user inputs text.
     */
    onInput: Listeners<SearchActionInputEvent<this>>;

    /**
     * Fired when the [*message*](#message) property has changed.
     */
    onMessageChanged: ChangeListeners<this, 'message'>;

    /**
     * Fired when the [*proposals*](#proposals) property has changed.
     */
    onProposalsChanged: ChangeListeners<this, 'proposals'>;

    /**
     * Fired when the [*text*](#text) property has changed.
     */
    onTextChanged: ChangeListeners<this, 'text'>;
  }
}


export type SearchAction = widgets.SearchAction;
export type SearchActionConstructor = typeof widgets.SearchAction;
export interface SearchActionFactory extends Factory<SearchActionConstructor>, SearchActionConstructor {}
export const SearchAction: SearchActionFactory;

// Setter


/**
 * A setter for the `"apply"` attribute.
 * @param attr
 */
export function Apply<WidgetConstructor extends BaseConstructor<Widget>>(attr: ApplyAttributes<WidgetConstructor>): {apply: object};

/**
 * Creates a attributes object for the given widget type. This is meant to be used to creates rule sets
 * for the [`apply`](./Composite.md#applyoptions-rules) method. The benefit of using this method as
 * opposed to passing the object directly is twofold: <br/><br/>1. The IDE and/or TypeScript compiler
 * can check that the properties are matching the given widget type.
 * 2. The `apply` method will only set the properties if the selected widget matches the type given
 * here. If there is a mismatch an error will be thrown.
 * @param target The type of the target widget.
 * @param attributes A set of properties for the given widget type.
 */
export function Setter<WidgetConstructor extends BaseConstructor<Widget>>(target: WidgetConstructor, attributes: Attributes<WidgetConstructor['prototype']>): Attributes<WidgetConstructor['prototype']>;

/**
 * Creates a type-safe ${doc:RuleSet} targeting widgets given the selector. Can be passed to the
 * [`apply`](./Composite.md#applyoptions-rules) function or attribute directly or as in an array of
 * rules sets.
 * @param target The type of the target widget.
 * @param selector Selector matching the target widget(s).
 * @param attributes A set of properties for the given widget type.
 */
export function Setter<WidgetConstructor extends BaseConstructor<Widget>>(target: WidgetConstructor, selector: SelectorString, attributes: Attributes<WidgetConstructor['prototype']>): RuleSet;

/**
 * Creates a attributes object for the given widget type. This is meant to be used to creates rule sets
 * for the [`apply`](./Composite.md#applyoptions-rules) method. The benefit of using this method as
 * opposed to passing the object directly is twofold: <br/><br/1. The IDE and/or TypeScript compiler can
 * check that the properties are matching the given widget type.
 * 2. The `apply` method will only set the properties if the selected widget matches the type given
 * here. If there is a mismatch an error will be thrown.
 * @param attr
 */
export function Setter<TargetConstructor extends BaseConstructor<NativeObject>, ResultType = Attributes<TargetConstructor['prototype']>, AttrName extends keyof ResultType = keyof ResultType>(attr: {target: TargetConstructor, attribute: AttrName, children: ResultType[AttrName]}): ResultType;

// Slider


export interface SliderSelectEvent<Target = Slider>
 extends EventObject<Target>
{
  readonly selection: number;
}

export namespace widgets {

  /**
   * A widget representing a numeric value as an movable indicator on a horizontal line.
   */
  export class Slider extends Widget {

    /**
     * A widget representing a numeric value as an movable indicator on a horizontal line.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<Slider>);

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & {children?: JSXDefaultChildren};

    /**
     * The maximum value.
     */
    maximum: number;

    /**
     * The minimum value.
     */
    minimum: number;

    /**
     * The actual value.
     */
    selection: number;

    /**
     * The color used to display the current selection.
     */
    tintColor: ColorValue;

    /**
     * Fired when the selection property is changed by the user.
     */
    onSelect: Listeners<SliderSelectEvent<this>>;

    /**
     * Fired when the [*maximum*](#maximum) property has changed.
     */
    onMaximumChanged: ChangeListeners<this, 'maximum'>;

    /**
     * Fired when the [*minimum*](#minimum) property has changed.
     */
    onMinimumChanged: ChangeListeners<this, 'minimum'>;

    /**
     * Fired when the [*selection*](#selection) property has changed.
     */
    onSelectionChanged: ChangeListeners<this, 'selection'>;

    /**
     * Fired when the [*tintColor*](#tintColor) property has changed.
     */
    onTintColorChanged: ChangeListeners<this, 'tintColor'>;
  }
}


export type Slider = widgets.Slider;
export type SliderConstructor = typeof widgets.Slider;
export interface SliderFactory extends Factory<SliderConstructor>, SliderConstructor {}
export const Slider: SliderFactory;

// Stack


export namespace widgets {

  /**
   * A composite with the `layout` property initialized with a `StackLayout`. All children are
   * automatically arranged in one vertical stack, starting from the top. The `layoutData` on the children
   * is ignored.
   */
  export class Stack extends Composite {

    /**
     * A composite with the `layout` property initialized with a `StackLayout`. All children are
     * automatically arranged in one vertical stack, starting from the top. The `layoutData` on the children
     * is ignored.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<Stack>);

    /**
     * Determines the horizontal placement of the children. For the `stretchX` value to work correctly the
     * `Stack` needs to be given a width either by setting `width` or by setting `left` and `right`.
     * @constant
     */
    alignment: 'left' | 'centerX' | 'stretchX' | 'right';

    /**
     * The stack layout manager responsible for interpreting the [`layoutData`](./Widget.md#layoutdata) of
     * the child widgets of this Composite.
     * @constant
     */
    layout: StackLayout;

    /**
     * Additional space to add between the children in device independent pixel.
     * @constant
     */
    spacing: number;
  }
}


export type Stack = widgets.Stack;
export type StackConstructor = typeof widgets.Stack;
export interface StackFactory extends Factory<StackConstructor>, StackConstructor {}
export const Stack: StackFactory;

// StackLayout

/**
 * Stack based layout manager. Can be set on the `layout` property of any `Composite` or widget
 * extending `Composite` like `Page` or `Tab` widget. The `Stack` uses it as the default `layout`.
 * <br/><br/> All children of the composite are automatically arranged in one vertical stack, starting
 * from the top.
 */
export class StackLayout extends Layout {

  /**
   * Stack based layout manager. Can be set on the `layout` property of any `Composite` or widget
   * extending `Composite` like `Page` or `Tab` widget. The `Stack` uses it as the default `layout`.
   * <br/><br/> All children of the composite are automatically arranged in one vertical stack, starting
   * from the top.
   */
  public constructor(options?: {spacing?: number, alignment?: 'left' | 'centerX' | 'stretchX' | 'right'});

  /**
   * Determines the horizontal placement of the children. For the `stretchX` value to work correctly the
   * composite needs to be given a width either by setting `width` or by setting `left` and `right`.
   * @constant
   */
  readonly alignment: 'left' | 'centerX' | 'stretchX' | 'right';

  /**
   * The space between the children in device independent pixel.
   * @constant
   */
  readonly spacing: number;

  /**
   * Instance of StackLayout used as the default `layout` property value of `Stack` widgets. Equivalent to
   * `new StackLayout()`
   */
  static default: StackLayout;
}


// StatusBar


export interface StatusBarTapEvent<Target = StatusBar>
 extends EventObject<Target>
{
  readonly touches: {x: number, y: number}[];
}

/**
 * The status bar is the area where notifications, status icons and device time are displayed. The
 * singleton instance can be accessed via `statusBar`.
 */
export class StatusBar extends NativeObject {

  /**
   * The status bar is the area where notifications, status icons and device time are displayed. The
   * singleton instance can be accessed via `statusBar`.
   */
  private constructor(properties?: Properties<StatusBar>);

  /**
   * Background color of the status bar. Should be used in conjunction with the `theme` property to keep
   * the status bar icons legible.
   */
  background: ColorValue;

  /**
   * Controls how the status bar is positioned relative to the `contentView`. The value `default` places
   * the content below the status bar. The `hide` option lets the status bar disappear, making more room
   * for the content. The `float` option lets the content flow underneath the status bar.
   */
  displayMode: 'default' | 'float' | 'hide';

  /**
   * The height of the status bar in device independent pixel. Can be used in conjunction with the
   * `displayMode` `'float'` to offset the content as to not have it covered by the status bar.
   * @constant
   */
  readonly height: number;

  /**
   * @constant
   */
  readonly jsxAttributes: JSXAttributes<this> & {children?: never};

  /**
   * Defines the shade used on the status bar. A `dark` theme sets the foreground icons to be of a light
   * color, whereas `light` sets the icons to a dark color. The theme should be set in conjunction with
   * the `background` property for contrast. The value `default` selects the default theme that depends on
   * the device and on the app. Available on iOS and Android 6+.
   */
  theme: 'dark' | 'default' | 'light';

  /**
   * Fired when status bar is tapped.
   */
  onTap: Listeners<StatusBarTapEvent<this>>;

  /**
   * Fired when the [*background*](#background) property has changed.
   */
  onBackgroundChanged: ChangeListeners<this, 'background'>;

  /**
   * Fired when the [*displayMode*](#displayMode) property has changed.
   */
  onDisplayModeChanged: ChangeListeners<this, 'displayMode'>;

  /**
   * Fired when the [*theme*](#theme) property has changed.
   */
  onThemeChanged: ChangeListeners<this, 'theme'>;
}


export const statusBar: StatusBar;

// Switch


export interface SwitchSelectEvent<Target = Switch>
 extends EventObject<Target>
{
  readonly checked: boolean;
}

export namespace widgets {

  /**
   * A switch widget that can be toggled.
   */
  export class Switch extends Widget {

    /**
     * A switch widget that can be toggled.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<Switch>);

    /**
     * The checked state of the switch.
     */
    checked: boolean;

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & {children?: JSXDefaultChildren};

    /**
     * The color of the movable thumb, when switched *off*.
     */
    thumbOffColor: ColorValue;

    /**
     * The color of the movable thumb, when switched *on*.
     */
    thumbOnColor: ColorValue;

    /**
     * The color of the track that holds the thumb, when switched *off*.
     */
    trackOffColor: ColorValue;

    /**
     * The color of the track that holds the thumb, when switched *on*.
     */
    trackOnColor: ColorValue;

    /**
     * Fired when the switch is toggled by the user.
     */
    onSelect: Listeners<SwitchSelectEvent<this>>;

    /**
     * Fired when the [*checked*](#checked) property has changed.
     */
    onCheckedChanged: ChangeListeners<this, 'checked'>;

    /**
     * Fired when the [*thumbOffColor*](#thumbOffColor) property has changed.
     */
    onThumbOffColorChanged: ChangeListeners<this, 'thumbOffColor'>;

    /**
     * Fired when the [*thumbOnColor*](#thumbOnColor) property has changed.
     */
    onThumbOnColorChanged: ChangeListeners<this, 'thumbOnColor'>;

    /**
     * Fired when the [*trackOffColor*](#trackOffColor) property has changed.
     */
    onTrackOffColorChanged: ChangeListeners<this, 'trackOffColor'>;

    /**
     * Fired when the [*trackOnColor*](#trackOnColor) property has changed.
     */
    onTrackOnColorChanged: ChangeListeners<this, 'trackOnColor'>;
  }
}


export type Switch = widgets.Switch;
export type SwitchConstructor = typeof widgets.Switch;
export interface SwitchFactory extends Factory<SwitchConstructor>, SwitchConstructor {}
export const Switch: SwitchFactory;

// Tab


export namespace widgets {

  /**
   * A container representing a single tab of a TabFolder widget.
   */
  export class Tab extends Composite {

    /**
     * A container representing a single tab of a TabFolder widget.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<Tab>);

    /**
     * Appends this widget to the given `TabFolder` instance.
     * @param parent
     */
    appendTo(parent: TabFolder): this;

    /**
     * Inserts this widget directly after the given `Tab`.
     * @param widget
     */
    insertAfter(widget: Tab): this;

    /**
     * Inserts this widget directly before the given `Tab`.
     * @param widget
     */
    insertBefore(widget: Tab): this;

    /**
     * Returns the `TabFolder` the `Tab` is hosted in or `null` if it has no parent.
     */
    parent(): TabFolder;

    /**
     * Returns a (possibly empty) collection of all siblings of this widget that match the given selector.
     * @param selector A selector expression or a predicate function to filter the results.
     */
    siblings<Result extends Widget = Tab>(selector?: Selector<Widget, Result>): WidgetCollection<Result>;

    /**
     * A badge to attach on the tab. Setting the `badge` to `0` hides the badge. The background color of the
     * badge can be controlled with the `badgeColor` property.
     * On iOS the property only has an effect when the parent `TabFolder` has its `tabBarLocation` set to
     * `bottom`.
     */
    badge: number;

    /**
     * The background color used for the `badge` indicator.
     */
    badgeColor: ColorValue;

    /**
     * An image to be displayed on the tab.  Will not be shown on iOS if the `TabFolder`'s `tabBarLocation`
     * is set to `top`
     */
    image: ImageValue;

    /**
     * An image to be displayed on the currently active tab.
     */
    selectedImage: ImageValue;

    /**
     * The title to be displayed on the tab.
     */
    title: string;

    /**
     * Fired when the tab will become visible, i.e. the selection of its TabFolder.
     */
    onAppear: Listeners<EventObject<this>>;

    /**
     * Fired when the tab is no longer visible, i.e. it no longer is the selection of its TabFolder.
     */
    onDisappear: Listeners<EventObject<this>>;

    /**
     * Fired when the tab is tapped by the user while it is already visible.
     */
    onReselect: Listeners<EventObject<this>>;

    /**
     * Fired when the tab is tapped by the user. The event is fired either when the tab is first selected or
     * when it is already visible and tapped.
     */
    onSelect: Listeners<EventObject<this>>;

    /**
     * Fired when the [*badge*](#badge) property has changed.
     */
    onBadgeChanged: ChangeListeners<this, 'badge'>;

    /**
     * Fired when the [*badgeColor*](#badgeColor) property has changed.
     */
    onBadgeColorChanged: ChangeListeners<this, 'badgeColor'>;

    /**
     * Fired when the [*image*](#image) property has changed.
     */
    onImageChanged: ChangeListeners<this, 'image'>;

    /**
     * Fired when the [*selectedImage*](#selectedImage) property has changed.
     */
    onSelectedImageChanged: ChangeListeners<this, 'selectedImage'>;

    /**
     * Fired when the [*title*](#title) property has changed.
     */
    onTitleChanged: ChangeListeners<this, 'title'>;
  }
}


export type Tab = widgets.Tab;
export type TabConstructor = typeof widgets.Tab;
export interface TabFactory extends Factory<TabConstructor>, TabConstructor {}
export const Tab: TabFactory;

// TabFolder


export interface TabFolderScrollEvent<Target = TabFolder>
 extends EventObject<Target>
{
  readonly offset: number;
  readonly selection: Target extends TabFolder<any> ? Target['selection'] : Tab;
}

export interface TabFolderSelectEvent<Target = TabFolder>
 extends EventObject<Target>
{
  readonly selection: Target extends TabFolder<any> ? Target['selection'] : Tab;
}

export namespace widgets {

  /**
   * A widget that can switch between [tabs](Tab). Only children of type `Tab` are supported. Since the
   * TabFolder does not compute its own size, the width and height must be defined by the respective
   * layout properties (e.g. either `width` or `left` and `right` must be specified).
   */
  export class TabFolder<TabType extends Tab = Tab> extends Composite<TabType> {

    /**
     * A widget that can switch between [tabs](Tab). Only children of type `Tab` are supported. Since the
     * TabFolder does not compute its own size, the width and height must be defined by the respective
     * layout properties (e.g. either `width` or `left` and `right` must be specified).
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<TabFolder>);

    /**
     * Enables swiping through tabs.
     */
    paging: boolean;

    /**
     * The color used for the indicator of the selected tab. Only applies when the `tabBarLocation` is
     * `top`. Available on Android and iOS 13+.
     */
    selectedTabIndicatorTintColor: ColorValue;

    /**
     * The color used for the text and icon of a selected tab.
     */
    selectedTabTintColor: ColorValue;

    /**
     * The currently selected tab.
     */
    selection: TabType;

    /**
     * The index of the currently selected tab.
     */
    selectionIndex: number;

    /**
     * The color used for the background of the bar containing the tabs.
     */
    tabBarBackground: ColorValue;

    /**
     * The elevation of the tab bar. Depending on the `tabBarLocation` different defaults are applied.
     */
    tabBarElevation: number;

    /**
     * The placement of the tab titles. When set to `"hidden"`, the tab bar will not be visible. When set to
     * `"auto"`, the position is platform dependent.
     * @constant
     */
    tabBarLocation: 'auto' | 'bottom' | 'hidden' | 'top';

    /**
     * Controls how the tabs make use of the available horizontal space. Setting the `tabMode` to `"fixed"`
     * makes the tabs span the entire available space. In case of a very wide `TabFolder` the `"fixed"` mode
     * centers the tabs. The mode `"scrollable"` left aligns the tabs and allows to scroll the tabs if there
     * are more tabs than would fit in the available space. Available on Android only.
     * @constant
     */
    tabMode: 'fixed' | 'scrollable';

    /**
     * The color used for the text and icon of a tab.
     * When the `tabBarLocation` is `top` on iOS, this property affects the entire appearance of the bar. No
     * other color properties have an effect in that configuration.
     */
    tabTintColor: ColorValue;

    /**
     * Fired when `paging` is enabled and a tab is scrolled. The `event` parameter contains position
     * information relative to the currently selected `Tab`. Eg.: scrolling a 500px wide tab 10% to the left
     * sets `offset` to `50`. Scrolling 10% to the right sets `offset` to `-50`.
     */
    onScroll: Listeners<TabFolderScrollEvent<this>>;

    /**
     * Fired when the user taps on a tab. The event also fires when the same tab is tapped multiple times.
     */
    onSelect: Listeners<TabFolderSelectEvent<this>>;

    /**
     * Fired when the [*paging*](#paging) property has changed.
     */
    onPagingChanged: ChangeListeners<this, 'paging'>;

    /**
     * Fired when the [*selectedTabIndicatorTintColor*](#selectedTabIndicatorTintColor) property has
     * changed.
     */
    onSelectedTabIndicatorTintColorChanged: ChangeListeners<this, 'selectedTabIndicatorTintColor'>;

    /**
     * Fired when the [*selectedTabTintColor*](#selectedTabTintColor) property has changed.
     */
    onSelectedTabTintColorChanged: ChangeListeners<this, 'selectedTabTintColor'>;

    /**
     * Fired when the [*selection*](#selection) property has changed.
     */
    onSelectionChanged: ChangeListeners<this, 'selection'>;

    /**
     * Fired when the [*selectionIndex*](#selectionIndex) property has changed.
     */
    onSelectionIndexChanged: ChangeListeners<this, 'selectionIndex'>;

    /**
     * Fired when the [*tabBarBackground*](#tabBarBackground) property has changed.
     */
    onTabBarBackgroundChanged: ChangeListeners<this, 'tabBarBackground'>;

    /**
     * Fired when the [*tabBarElevation*](#tabBarElevation) property has changed.
     */
    onTabBarElevationChanged: ChangeListeners<this, 'tabBarElevation'>;

    /**
     * Fired when the [*tabTintColor*](#tabTintColor) property has changed.
     */
    onTabTintColorChanged: ChangeListeners<this, 'tabTintColor'>;
  }
}


export type TabFolder<TabType extends Tab = Tab> = widgets.TabFolder<TabType>;
export type TabFolderConstructor = typeof widgets.TabFolder;
export interface TabFolderFactory extends Factory<TabFolderConstructor>, TabFolderConstructor {}
export const TabFolder: TabFolderFactory;

// Tabris


export interface TabrisLogEvent<Target = Tabris>
 extends EventObject<Target>
{
  readonly level: 'debug' | 'info' | 'log' | 'warn' | 'error';
  readonly message: string;
}

/**
 * The main object exported by the `tabris` module hosting all the classes and singletons it provides
 * (not listed here). It also provides low-level framework API required for bootstrapping and for some
 * extensions/plug-ins. <b>Caution!</b>: These APIs interact with the internals of the framework. Only
 * use them if you know what you are doing.
 * This object is also available in the global namespace as `tabris`. For technical reasons the
 * low-level API is available in TypeScript only when the object is explicitly imported.
 */
export class Tabris extends NativeObject {

  /**
   * The main object exported by the `tabris` module hosting all the classes and singletons it provides
   * (not listed here). It also provides low-level framework API required for bootstrapping and for some
   * extensions/plug-ins. <b>Caution!</b>: These APIs interact with the internals of the framework. Only
   * use them if you know what you are doing.
   * This object is also available in the global namespace as `tabris`. For technical reasons the
   * low-level API is available in TypeScript only when the object is explicitly imported.
   */
  private constructor();

  /**
   * Adds a module to the internal module registry with an id relative to the app directory.
   * @param id
   * @param loaderFunction
   */
  _defineModule(id: string, loaderFunction: ModuleLoader): Module;

  /**
   * Initializes the framework and triggers the 'start' event.
   * @param client The client bridge provided by the native client.
   * @param options
   */
  _init(client: any, options?: {headless?: boolean}): void;

  /**
   * Callback for the native client to issue JavaScript events to the `NativeObject` with the given `cid`.
   * Triggers a flush event afterwards. Errors are caught and logged to the console. Returns true if the
   * event object has a `defaultPrevented` field set to true.
   * @param cid
   * @param eventType
   * @param eventData
   */
  _notify(cid: string, eventType: string, eventData: object): boolean;


  private _start(client: object): void;

  /**
   * Sends all queued native operations to the native client and triggers the 'flush' event.
   */
  flush(): void;

  /**
   * Set this property to a positive number to see the log output from the current worker on a connected
   * [CLI](../tabris-cli.md). Has no effect in the main UI thread.
   * Defines the maximum delay (in milliseconds) between the call of a ${doc:Console} function (e.g.
   * `console.log()`) <em>from inside a ${doc:Worker}</em> and the matching [log event](#log) in the
   * parent thread. Since this interrupts the UI thread smaller values could impact UI responsiveness.
   * The feature is disabled by default (value `-1`), except for debug builds, where the default is
   * `2000`.
   * <b>Note:</b> You do <em>not</em> need to set this property to see the console output on the built-in
   * developer console, this is only for the CLI, or in cases where you record the log events in the UI
   * thread. It also has <em>no</em> effect on the log output of the main thread.
   */
  get logPushInterval(): number;






  set logPushInterval(value: number);

  /**
   * Indicates that the framework has been fully initialized. This happens before the main application
   * module is parsed and executed, so it is only relevant for framework and plug-in developers.
   * @constant
   */
  readonly started: boolean;

  /**
   * @constant
   */
  symbols: {[symbol: string]: Symbol};

  /**
   * The version of the tabris module.
   * @constant
   */
  readonly version: string;

  /**
   * Fired after a native event has been processed.
   */
  onFlush: Listeners<EventObject<this>>;

  /**
   * Fired before certain native operations to render all modified layoutData objects.
   */
  onLayout: Listeners<EventObject<this>>;

  /**
   * Fired when a message is about to be printed to the console.
   */
  onLog: Listeners<TabrisLogEvent<this>>;

  /**
   * Fired after the client bridge has been installed but before `started` has been set to `true`.
   */
  onStart: Listeners<EventObject<this>>;
}


export const tabris: Tabris;

// TextInput


export interface TextInputAcceptEvent<Target = TextInput>
 extends EventObject<Target>
{
  readonly text: string;
}

export interface TextInputBeforeTextChangeEvent<Target = TextInput>
 extends EventObject<Target>
{
  readonly newValue: string;
  readonly oldValue: string;
  readonly preventDefault: Function;
}

export interface TextInputInputEvent<Target = TextInput>
 extends EventObject<Target>
{
  readonly text: string;
}

export interface TextInputSelectEvent<Target = TextInput>
 extends EventObject<Target>
{
  readonly selection: number[];
}

export namespace widgets {

  /**
   * A widget that allows to enter text.
   */
  export class TextInput extends Widget {

    /**
     * A widget that allows to enter text.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<TextInput>);

    /**
     * The horizontal alignment of the text.
     */
    alignment: 'centerX' | 'left' | 'right';

    /**
     * Control how text input is capitalized.
     * * `none` - Do not change any text input
     * * `sentence` - Capitalize the first word of a sentence
     * * `word` - Capitalize every word
     * * `all` - Capitalize every letter
     * The boolean value `false` maps to `none` whereas `true` is equal to `all`.
     */
    autoCapitalize: 'all' | false | 'none' | 'sentence' | true | 'word';

    /**
     * Enables the spell checker and auto-correction feature.
     */
    autoCorrect: boolean;

    /**
     * The color of the border of the TextInput. On iOS this is a rectangular border around the TextInput,
     * on Android it is a single line below the TextInput.
     */
    borderColor: ColorValue;

    /**
     * The color of the cursor in the `TextInput`.
     */
    cursorColor: ColorValue;

    /**
     * Whether the text can be edited or not.
     */
    editable: boolean;

    /**
     * Label or icon to display on the keyboard 'confirmation' key. The key press can be captured via the
     * `accept` event. Setting an `enterKeyType` other than `default` will change the key behavior to not
     * close the keyboard automatically. The developer is able close the keyboard by removing the focus from
     * the `TextInput`.
     */
    enterKeyType: 'default' | 'done' | 'go' | 'next' | 'search' | 'send';

    /**
     * Should the hint message float above the TextInput when focus is gained.
     */
    floatMessage: boolean;

    /**
     * Reflects whether this widget has the keyboard focus. Setting this property to `true` will focus the
     * widget and open the virtual keyboard, setting it to `false` will remove the focus and hide the
     * virtual keyboard.
     */
    focused: boolean;

    /**
     * The font used for the text.
     */
    font: FontValue;

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & {children?: JSXDefaultChildren};

    /**
     * When `true` the `TextInput` will keep its focus, even when tapped outside of the widget bounds.
     */
    keepFocus: boolean;

    /**
     * Selects the keyboard type to use for editing this widget. Has no effect when `type` is set to
     * `multiline`.
     */
    keyboard: 'ascii' | 'decimal' | 'default' | 'email' | 'number' | 'numbersAndPunctuation' | 'phone' | 'url';

    /**
     * Allows to control when to show the virtual keyboard.
     * - `'never'` - The keyboard is never shown when focus is gained.
     * - `'ontouch'` - The keyboard is not shown when the `focused` property is set to `true`
     * programmatically. Only the blinking cursor will be shown. Touching the `TextInput` will show the
     * keyboard.
     * - `'onfocus'` - The keyboard is always shown when the `TextInput` gains focus.
     */
    keyboardAppearanceMode: 'never' | 'ontouch' | 'onfocus';

    /**
     * The maximum number of characters that can be entered into a `TextInput`.
     */
    maxChars: number;

    /**
     * A hint text that is displayed when the input field is empty. Does not apply on iOS when `type` is set
     * to `multiline`.
     */
    message: string;

    /**
     * Color of the `message` text.
     */
    messageColor: ColorValue;

    /**
     * Makes the text visible when the `TextInput` has the type `password`.
     */
    revealPassword: boolean;

    /**
     * The `selection` is a two element number array representing the text selections start and end
     * position. The native platform usually shows selection handles so that the selection can be changed by
     * the user. A `selection` array where both numbers are the same represent a single cursor at the given
     * position. The selection start is the index of the first character where as the end is the index of
     * the last character + 1. E.g. to select the word "ok" the selection would be `[0, 2]`.
     * To make a selection visible the `TextInput` has to be in focus. Consequently the selection is
     * preserved when the focus is lost and regained. When the user gives the `TextInput` focus by tapping
     * on it, the selection is changed to represent his touch position.
     * Getting the `selection` upon user interaction (e.g. a button press) the focus would be lost and
     * possibly the `selection` altered due to user interaction. In such a scenario it is recommended to set
     * the [`keepFocus`](#keepfocus) property to `true`.
     */
    selection: number[];

    /**
     * The visual appearance of the text widget.
     * With the `style` _outline_, _fill_ or _underline_ the message hint will float above the `TextInput`
     * on Android. This behavior can be controlled with the property `floatMessage`. The `style` _none_ will
     * remove any background visualization, allowing to create a custom background. 
     * @constant
     */
    style: 'default' | 'fill' | 'none' | 'outline' | 'underline';

    /**
     * The text in the input field.
     */
    text: string;

    /**
     * The color of the text.
     */
    textColor: ColorValue;

    /**
     * The type of the text widget.
     * @constant
     */
    type: 'default' | 'multiline' | 'password' | 'search';

    /**
     * Fired when a text input has been finished by pressing the keyboard's Enter key. The label of this key
     * may vary depending on the platform and locale.
     */
    onAccept: Listeners<TextInputAcceptEvent<this>>;

    /**
     * Fired when the text value is about to change due to a user action.
     */
    onBeforeTextChange: Listeners<TextInputBeforeTextChangeEvent<this>>;

    /**
     * Fired when the widget lost focus.
     */
    onBlur: Listeners<EventObject<this>>;

    /**
     * Fired when the widget gains focus.
     */
    onFocus: Listeners<EventObject<this>>;

    /**
     * Fired when the text was changed by the user.
     */
    onInput: Listeners<TextInputInputEvent<this>>;

    /**
     * The `select` event is fired when the user alters the text [`selection`](#selection). Either by
     * dragging the selection handles of a text selection, by moving the cursor inside the text or by typing
     * which also advances the cursor.
     * The event also fires when the user taps inside a `TextInput` since this involves to set the cursor to
     * the tapped position.
     */
    onSelect: Listeners<TextInputSelectEvent<this>>;

    /**
     * Fired when the [*alignment*](#alignment) property has changed.
     */
    onAlignmentChanged: ChangeListeners<this, 'alignment'>;

    /**
     * Fired when the [*autoCapitalize*](#autoCapitalize) property has changed.
     */
    onAutoCapitalizeChanged: ChangeListeners<this, 'autoCapitalize'>;

    /**
     * Fired when the [*autoCorrect*](#autoCorrect) property has changed.
     */
    onAutoCorrectChanged: ChangeListeners<this, 'autoCorrect'>;

    /**
     * Fired when the [*borderColor*](#borderColor) property has changed.
     */
    onBorderColorChanged: ChangeListeners<this, 'borderColor'>;

    /**
     * Fired when the [*cursorColor*](#cursorColor) property has changed.
     */
    onCursorColorChanged: ChangeListeners<this, 'cursorColor'>;

    /**
     * Fired when the [*editable*](#editable) property has changed.
     */
    onEditableChanged: ChangeListeners<this, 'editable'>;

    /**
     * Fired when the [*enterKeyType*](#enterKeyType) property has changed.
     */
    onEnterKeyTypeChanged: ChangeListeners<this, 'enterKeyType'>;

    /**
     * Fired when the [*floatMessage*](#floatMessage) property has changed.
     */
    onFloatMessageChanged: ChangeListeners<this, 'floatMessage'>;

    /**
     * Fired when the [*focused*](#focused) property has changed.
     */
    onFocusedChanged: ChangeListeners<this, 'focused'>;

    /**
     * Fired when the [*font*](#font) property has changed.
     */
    onFontChanged: ChangeListeners<this, 'font'>;

    /**
     * Fired when the [*keepFocus*](#keepFocus) property has changed.
     */
    onKeepFocusChanged: ChangeListeners<this, 'keepFocus'>;

    /**
     * Fired when the [*keyboard*](#keyboard) property has changed.
     */
    onKeyboardChanged: ChangeListeners<this, 'keyboard'>;

    /**
     * Fired when the [*keyboardAppearanceMode*](#keyboardAppearanceMode) property has changed.
     */
    onKeyboardAppearanceModeChanged: ChangeListeners<this, 'keyboardAppearanceMode'>;

    /**
     * Fired when the [*maxChars*](#maxChars) property has changed.
     */
    onMaxCharsChanged: ChangeListeners<this, 'maxChars'>;

    /**
     * Fired when the [*message*](#message) property has changed.
     */
    onMessageChanged: ChangeListeners<this, 'message'>;

    /**
     * Fired when the [*messageColor*](#messageColor) property has changed.
     */
    onMessageColorChanged: ChangeListeners<this, 'messageColor'>;

    /**
     * Fired when the [*revealPassword*](#revealPassword) property has changed.
     */
    onRevealPasswordChanged: ChangeListeners<this, 'revealPassword'>;

    /**
     * Fired when the [*selection*](#selection) property has changed.
     */
    onSelectionChanged: ChangeListeners<this, 'selection'>;

    /**
     * Fired when the [*text*](#text) property has changed.
     */
    onTextChanged: ChangeListeners<this, 'text'>;

    /**
     * Fired when the [*textColor*](#textColor) property has changed.
     */
    onTextColorChanged: ChangeListeners<this, 'textColor'>;
  }
}


export type TextInput = widgets.TextInput;
export type TextInputConstructor = typeof widgets.TextInput;
export interface TextInputFactory extends Factory<TextInputConstructor>, TextInputConstructor {}
export const TextInput: TextInputFactory;

// TextResources

/**
 * This is the base class for all text resource dictionaries. Instances can be obtained via the `from`
 * method, or by subclassing. All members of a `TextResources` (or subclass) instance will be of the
 * type `string`.
 */
export class TextResources extends Resources<string, string> {

  /**
   * This is the base class for all text resource dictionaries. Instances can be obtained via the `from`
   * method, or by subclassing. All members of a `TextResources` (or subclass) instance will be of the
   * type `string`.
   */
  protected constructor(options: ResourcesConstructorOptions<string, string>);

  /**
   * Creates a texts dictionary from the given raw "data" object. All texts from the given "base"
   * dictionary are inherited unless overwritten.
   * Entries in the "data" object starting with "$" are considered configuration options and will not
   * become entries in the final texts dictionary.
   * @param base A plain object or another `TextResources` instance containing values to inherit by the new `TextResources` dictionary.
   * @param data The raw data (plain object) to create the dictionary from. The format must match the [Tabris.js texts JSON schema](${doc:texts.json}).
   */
  static from<Base extends NamedResources<string, keyof Base>, Data extends ResourceDataWithConfig<string>>(base: Base, data: Data): NamedResources<string, keyof (Base & Data)>;

  /**
   * Creates a texts dictionary from the given raw "data" object. The format must match the [Tabris.js
   * texts JSON schema](${doc:texts.json}). Entries in the "data" object starting with "$" are considered
   * configuration options and will not become entries in the final texts dictionary.
   * @param data The raw data (plain object) to create the dictionary from. The format must match the [Tabris.js texts JSON schema](${doc:texts.json}).
   */
  static from<Data extends ResourceDataWithConfig<string>>(data: Data): NamedResources<string, keyof Data>;
}


// TextView


export interface TextViewTapLinkEvent<Target = TextView>
 extends EventObject<Target>
{
  readonly url: string;
}

export namespace widgets {

  /**
   * A widget to display a text. For images, use ImageView.
   */
  export class TextView extends Widget {

    /**
     * A widget to display a text. For images, use ImageView.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<TextView>);

    /**
     * The horizontal alignment of the text.
     */
    alignment: 'centerX' | 'left' | 'right';

    /**
     * The font used for the text.
     */
    font: FontValue;

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & {children?: JSXDefaultChildren};

    /**
     * The amount of space between each line of text. The `lineSpacing` property is a factor with a default
     * value of `1.0`.
     */
    lineSpacing: number;

    /**
     * Allows for a subset of HTML tags in the text. Supported tags are: `a`, `del`, `ins`, `b`, `i`,
     * `strong`, `em`, `big`, `small`, `br`.
     * All tags except `<br/>` support the attributes "font" and "textColor" with the same values as the
     * `TextView` itself. IOS does not support to colorize links (`<a>`) with the `textColor` attribute.
     * All tags must be closed (e.g. use `<br/>` instead of `<br>`). Nesting tags is not supported on iOS. A
     * platform might allow to use additional tags but cross-platform compatibility is only guaranteed for
     * the tags listed above.
     * When the text is given as the content of a `<TextView>` JSX element, `markupEnabled` will parse the
     * text more like HTML, i.e. consecutive white spaces will be merged.
     */
    markupEnabled: boolean;

    /**
     * Limit the number of lines to be displayed to the given maximum. `null` disables this limit.
     */
    maxLines: number | null;

    /**
     * Whether the text can be selected or not.
     */
    selectable: boolean;

    /**
     * The text to display.
     */
    text: string;

    /**
     * The color of the text.
     */
    textColor: ColorValue;

    /**
     * Fires when the user clicks on a link in an html text. Requires to set `markupEnabled` to true and to
     * provide a text containing an anchor (`<a>`) with an `href` attribute. Eg. `textView.text = 'Website:
     * <a href="http://example.com>example.com</a>'`. The event object contains a property `url` which
     * provides the anchors `href` url.
     */
    onTapLink: Listeners<TextViewTapLinkEvent<this>>;

    /**
     * Fired when the [*alignment*](#alignment) property has changed.
     */
    onAlignmentChanged: ChangeListeners<this, 'alignment'>;

    /**
     * Fired when the [*font*](#font) property has changed.
     */
    onFontChanged: ChangeListeners<this, 'font'>;

    /**
     * Fired when the [*lineSpacing*](#lineSpacing) property has changed.
     */
    onLineSpacingChanged: ChangeListeners<this, 'lineSpacing'>;

    /**
     * Fired when the [*markupEnabled*](#markupEnabled) property has changed.
     */
    onMarkupEnabledChanged: ChangeListeners<this, 'markupEnabled'>;

    /**
     * Fired when the [*maxLines*](#maxLines) property has changed.
     */
    onMaxLinesChanged: ChangeListeners<this, 'maxLines'>;

    /**
     * Fired when the [*selectable*](#selectable) property has changed.
     */
    onSelectableChanged: ChangeListeners<this, 'selectable'>;

    /**
     * Fired when the [*text*](#text) property has changed.
     */
    onTextChanged: ChangeListeners<this, 'text'>;

    /**
     * Fired when the [*textColor*](#textColor) property has changed.
     */
    onTextColorChanged: ChangeListeners<this, 'textColor'>;
  }
}


export type TextView = widgets.TextView;
export type TextViewConstructor = typeof widgets.TextView;
export interface TextViewFactory extends Factory<TextViewConstructor>, TextViewConstructor {}
export const TextView: TextViewFactory;

// TimeDialog


export interface TimeDialogCloseEvent<Target = TimeDialog>
 extends EventObject<Target>
{
  readonly date: Date | null;
}

export interface TimeDialogSelectEvent<Target = TimeDialog>
 extends EventObject<Target>
{
  readonly date: Date;
}

/**
 * A `TimeDialog` represents a native dialog pop-up allowing the user to pick a time of day. Properties
 * can only be set before open() is called. The dialog is automatically disposed when closed.
 */
export class TimeDialog extends Popup {

  /**
   * A `TimeDialog` represents a native dialog pop-up allowing the user to pick a time of day. Properties
   * can only be set before open() is called. The dialog is automatically disposed when closed.
   * 
   * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
   * object which may include (in addition to the properties) children, event listeners and layout
   * shorthands.
   */
  public constructor(properties?: Properties<TimeDialog>);

  /**
   * Makes the given time dialog visible. Meant to be used with inline-JSX. In TypeScript it also casts
   * the given JSX element from `any` to an actual TimeDialog.
   * @param timeDialog The time dialog to open
   */
  static open(timeDialog: TimeDialog): TimeDialog;

  /**
   * Creates and opens a time dialog.
   * @param date The time to be displayed in the dialog. The current time is used when no date object is provided.
   */
  static open(date?: Date): TimeDialog;

  /**
   * The time to be displayed in the dialog. The current time is used when no date object is provided.
   */
  date: Date;

  /**
   * @constant
   */
  readonly jsxAttributes: JSXAttributes<this> & {children?: JSXDefaultChildren};

  /**
   * Fired when the time dialog was closed.
   */
  onClose: Listeners<TimeDialogCloseEvent<this>>;

  /**
   * Fired when a time was selected by the user.
   */
  onSelect: Listeners<TimeDialogSelectEvent<this>>;

  /**
   * Fired when the [*date*](#date) property has changed.
   */
  onDateChanged: ChangeListeners<this, 'date'>;
}


// ToggleButton


export interface ToggleButtonSelectEvent<Target = ToggleButton>
 extends EventObject<Target>
{
  readonly checked: boolean;
}

export namespace widgets {

  /**
   * A push button that "snaps in", i.e. it is selected when pressed and deselected when pressed again.
   */
  export class ToggleButton extends Widget {

    /**
     * A push button that "snaps in", i.e. it is selected when pressed and deselected when pressed again.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<ToggleButton>);

    /**
     * The horizontal alignment of the button text.
     */
    alignment: 'centerX' | 'left' | 'right';

    /**
     * The checked state of the toggle button.
     */
    checked: boolean;

    /**
     * The font used for the text.
     */
    font: FontValue;

    /**
     * An image to be displayed on the button.
     */
    image: ImageValue;

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & {children?: JSXDefaultChildren};

    /**
     * The button's label text.
     */
    text: string;

    /**
     * The color of the text.
     */
    textColor: ColorValue;

    /**
     * Fired when the toggle button is selected or deselected by the user.
     */
    onSelect: Listeners<ToggleButtonSelectEvent<this>>;

    /**
     * Fired when the [*alignment*](#alignment) property has changed.
     */
    onAlignmentChanged: ChangeListeners<this, 'alignment'>;

    /**
     * Fired when the [*checked*](#checked) property has changed.
     */
    onCheckedChanged: ChangeListeners<this, 'checked'>;

    /**
     * Fired when the [*font*](#font) property has changed.
     */
    onFontChanged: ChangeListeners<this, 'font'>;

    /**
     * Fired when the [*image*](#image) property has changed.
     */
    onImageChanged: ChangeListeners<this, 'image'>;

    /**
     * Fired when the [*text*](#text) property has changed.
     */
    onTextChanged: ChangeListeners<this, 'text'>;

    /**
     * Fired when the [*textColor*](#textColor) property has changed.
     */
    onTextColorChanged: ChangeListeners<this, 'textColor'>;
  }
}


export type ToggleButton = widgets.ToggleButton;
export type ToggleButtonConstructor = typeof widgets.ToggleButton;
export interface ToggleButtonFactory extends Factory<ToggleButtonConstructor>, ToggleButtonConstructor {}
export const ToggleButton: ToggleButtonFactory;

// Video


export namespace widgets {

  /**
   * A widget that plays a video from an URL.
   */
  export class Video extends Widget {

    /**
     * A widget that plays a video from an URL.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<Omit<Video, 'speed' | 'position' | 'duration' | 'state'>>);

    /**
     * Pauses the video. *[state](#state)* changes to `pause` and `speed` to `0`. Has no effect when
     * *[state](#state)* is not `play`.
     */
    pause(): void;

    /**
     * Starts playing the video, *[state](#state)* changes to `play`. Has no effect unless the current state
     * is either `pause` or `ready`.
     * @param speed Desired playback speed. If the given speed is not supported by the platform or video, the actual playback speed will be `1` - i.e. the natural speed of the video.
     */
    play(speed?: number): void;

    /**
     * Attempts to change the `position` to the given time index. Success depends on the currently loaded
     * video. Has no effect if the current *[state](#state)* is `empty` or `fail`.
     * @param position Desired position in milliseconds.
     */
    seek(position: number): void;

    /**
     * If set to `true`, starts playing the video as soon as the state changes from `open` to `ready`.
     */
    autoPlay: boolean;

    /**
     * If set to `true`, overlays the video with a native UI for controlling playback.
     */
    controlsVisible: boolean;

    /**
     * Returns the full length of the current video in milliseconds.
     */
    readonly duration: number;

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & Partial<Record<'speed' | 'position' | 'duration' | 'state' | 'children', never>> & {children?: JSXDefaultChildren};

    /**
     * Returns the current playback position in milliseconds. This property does not trigger any change
     * events.
     */
    readonly position: number;

    /**
     * Returns the current playback speed. The value `1` represents the natural speed of the video. When the
     * *[state](#state)* of the widget is not `play` this property always has the value `0`.
     */
    readonly speed: number;

    /**
     * The current video playback state of the widget.
     * ![Video widget states](./img/Video-state.png)
     * - `'empty'` -  No `url` has been set.
     * - `'open'` - The `url` has been set to a valid value but the widget is not yet ready to play.
     * - `'ready'` - The widget has loaded enough content to be ready to play, but is not yet playing.
     * - `'play'` - A video is currently playing.
     * - `'stale'` - The video is paused because it is buffering more content and will resume playback once
     * it has enough content.
     * - `'pause'` - Playback is paused because of user input or `pause()` has been called.
     * - `'finish'` - Playback stopped at the end of the video.
     * - `'fail'` - An error occurred preventing video playback.
     */
    readonly state: 'empty' | 'fail' | 'finish' | 'open' | 'pause' | 'play' | 'ready' | 'stale';

    /**
     * The URL of the video to play. Setting this property to any non-empty string changes the
     * *[state](#state)* to `open` and the video starts loading. Setting this property to an empty string
     * unloads the current video and the *[state](#state)* returns to `empty`.
     */
    url: string;

    /**
     * Fired when the [*autoPlay*](#autoPlay) property has changed.
     */
    onAutoPlayChanged: ChangeListeners<this, 'autoPlay'>;

    /**
     * Fired when the [*controlsVisible*](#controlsVisible) property has changed.
     */
    onControlsVisibleChanged: ChangeListeners<this, 'controlsVisible'>;

    /**
     * Fired when the [*duration*](#duration) property has changed.
     */
    onDurationChanged: ChangeListeners<this, 'duration'>;

    /**
     * Fired when the [*position*](#position) property has changed.
     */
    onPositionChanged: ChangeListeners<this, 'position'>;

    /**
     * Fired when the [*speed*](#speed) property has changed.
     */
    onSpeedChanged: ChangeListeners<this, 'speed'>;

    /**
     * Fired when the [*state*](#state) property has changed.
     */
    onStateChanged: ChangeListeners<this, 'state'>;

    /**
     * Fired when the [*url*](#url) property has changed.
     */
    onUrlChanged: ChangeListeners<this, 'url'>;
  }
}


export type Video = widgets.Video;
export type VideoConstructor = typeof widgets.Video;
export interface VideoFactory extends Factory<VideoConstructor>, VideoConstructor {}
export const Video: VideoFactory;

// WebView


export interface WebViewDownloadEvent<Target = WebView>
 extends EventObject<Target>
{
  readonly contentDisposition: string;
  readonly contentLength: number;
  readonly mimeType: string;
  readonly url: string;
}

export interface WebViewMessageEvent<Target = WebView>
 extends EventObject<Target>
{
  readonly data: string;
}

export interface WebViewNavigateEvent<Target = WebView>
 extends EventObject<Target>
{
  readonly preventDefault: Function;
  readonly url: string;
}

export namespace widgets {

  /**
   * A widget that can display a web page. Since this widget requires a lot of resources it's recommended
   * to have no more than one instance at a time.
   */
  export class WebView extends Widget {

    /**
     * A widget that can display a web page. Since this widget requires a lot of resources it's recommended
     * to have no more than one instance at a time.
     * 
     * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
     * object which may include (in addition to the properties) children, event listeners and layout
     * shorthands.
     */
    public constructor(properties?: Properties<Omit<WebView, 'canGoBack' | 'canGoForward'>>);

    /**
     * Navigate the `WebView` to the previous page if possible.
     */
    goBack(): void;

    /**
     * Navigate the `WebView` to the next page if possible.
     */
    goForward(): void;

    /**
     * Posts a web message to the underlying `window` object of the WebView. The website in the `WebView`
     * can register for the message in the following fashion: `window.addEventListener('message',
     * callbackFunction)`. For more information see
     * [`Window.postMessage()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) API.
     * @param message The message to send. Supports only strings.
     * @param targetOrigin The URL of the page that receives the message. The message is only sent if the current document URL has the same scheme, domain and path. Use `*` to send to any URL.
     */
    postMessage(message: string, targetOrigin: string): this;

    /**
     * Whether there is a previous to navigated to via `goBack()`.
     */
    readonly canGoBack: boolean;

    /**
     * Whether there is a next page to navigate to via `goForward()`.
     */
    readonly canGoForward: boolean;

    /**
     * A complete HTML document to display. Always returns the last set value.
     * Note: `htmlChanged` event will not be fired on iOS when a page is using `history.pushState()` to
     * navigate between pages.
     */
    html: string;

    /**
     * JavaScript code to be executed before page begins loading.
     * @constant
     */
    initScript: string;

    /**
     * @constant
     */
    readonly jsxAttributes: JSXAttributes<this> & Partial<Record<'canGoBack' | 'canGoForward' | 'children', never>>;

    /**
     * The URL of the web page to display. Relative URLs are resolved relative to 'package.json'. Returns
     * empty string when content from *html* property is displayed.
     * Note: `urlChanged` event will not be fired on iOS when a page is using `history.pushState()` to
     * navigate between pages.
     */
    url: string;

    /**
     * Fired when the WebView requests a download. The download event provides the properties `url`,
     * `mimeType`, `contentLength` and `contentDisposition`. Supported only on Android.
     */
    onDownload: Listeners<WebViewDownloadEvent<this>>;

    /**
     * Fired when the url has been loaded.
     * Note: This event will not be fired on iOS when a page is using `history.pushState()` to navigate
     * between pages.
     */
    onLoad: Listeners<EventObject<this>>;

    /**
     * Fired when a web message has been sent via `window.parent.postMessage(message, targetOrigin)` from
     * inside the `WebView`.
     */
    onMessage: Listeners<WebViewMessageEvent<this>>;

    /**
     * Fired when the WebView is about to navigate to a new URL.
     * Note: This event will not be fired on iOS when a page is using `history.pushState()` to navigate
     * between pages.
     */
    onNavigate: Listeners<WebViewNavigateEvent<this>>;

    /**
     * Fired when the [*canGoBack*](#canGoBack) property has changed.
     */
    onCanGoBackChanged: ChangeListeners<this, 'canGoBack'>;

    /**
     * Fired when the [*canGoForward*](#canGoForward) property has changed.
     */
    onCanGoForwardChanged: ChangeListeners<this, 'canGoForward'>;

    /**
     * Fired when the [*html*](#html) property has changed.
     */
    onHtmlChanged: ChangeListeners<this, 'html'>;

    /**
     * Fired when the [*url*](#url) property has changed.
     */
    onUrlChanged: ChangeListeners<this, 'url'>;
  }
}


export type WebView = widgets.WebView;
export type WebViewConstructor = typeof widgets.WebView;
export interface WebViewFactory extends Factory<WebViewConstructor>, WebViewConstructor {}
export const WebView: WebViewFactory;

// Widget


export interface WidgetLongPressEvent<Target = Widget>
 extends EventObject<Target>
{
  readonly state: 'start' | 'end' | 'cancel';
  readonly touches: [{x: number, y: number}];
}

export interface WidgetPanEvent<Target = Widget>
 extends EventObject<Target>
{
  readonly state: 'start' | 'change' | 'end' | 'cancel';
  readonly touches: [{x: number, y: number}];
  readonly translationX: number;
  readonly translationY: number;
  readonly velocityX: number;
  readonly velocityY: number;
}

export interface WidgetResizeEvent<Target = Widget>
 extends EventObject<Target>
{
  readonly height: number;
  readonly left: number;
  readonly top: number;
  readonly width: number;
}

export interface WidgetSwipeEvent<Target = Widget>
 extends EventObject<Target>
{
  readonly touches: [{x: number, y: number}];
}

export interface WidgetTapEvent<Target = Widget>
 extends EventObject<Target>
{
  readonly touches: [{x: number, y: number}];
}

export interface WidgetTouchEvent<Target = Widget>
 extends EventObject<Target>
{
  readonly touches: [{x: number, y: number, absoluteX: number, absoluteY: number}];
}

/**
 * Base class for all widgets
 */
export class Widget<TData extends object = any> extends NativeObject {

  /**
   * Base class for all widgets
   * 
   * This constructor can be called as a factory, without "new". Doing so allows passing an attributes
   * object which may include (in addition to the properties) children, event listeners and layout
   * shorthands.
   */
  protected constructor(properties?: Properties<Widget>);

  /**
   * This function is called to create JSX widget elements. You may override it in your own subclass to
   * create custom JSX behavior. **The function is called with the JSXProcessor as the context (`this`).**
   * @param this
   * @param type
   * @param attributes
   */
  [JSX.jsxFactory](this: tabris.JsxProcessor, type: {new (...args: any[]): any }, attributes: object): any;

  /**
   * Sets the parent of the widget. If an index is given the widget will be inserted at that position.
   * @param parent
   * @param index
   */
  protected _setParent(parent: Composite, index?: number): void;

  /**
   * Starts an animation that transforms the given properties from their current values to the given ones.
   * Supported properties are *transform* and *opacity*. Returns a promise that is resolved once the
   * animation is completed and is rejected if the animation is aborted.
   * @param properties The properties and target values to animate.
   * @param options Configures the animation itself.
   */
  animate(properties: {transform?: Transformation, opacity?: number}, options: AnimationOptions): Promise<void>;

  /**
   * Appends this widget to the given parent. The parent widget must support children (extending
   * *Composite*). If the widget already has a parent, it is removed from the old parent.
   * @param parent
   */
  appendTo(parent: Composite): this;

  /**
   * Removes this widget from its parent.
   */
  detach(): this;

  /**
   * Removes this widget from its parent and destroys it. Also disposes of all its children. Triggers a
   * `remove` event on the parent and a `dispose` event on itself. The widget can no longer be used.
   */
  dispose(): void;

  /**
   * Inserts this widget directly after the given widget. If the widget already has a parent, it is
   * removed from the old parent.
   * @param widget
   */
  insertAfter(widget: Widget): this;

  /**
   * Inserts this widget directly before the given widget. If the widget already has a parent, it is
   * removed from the old parent.
   * @param widget
   */
  insertBefore(widget: Widget): this;

  /**
   * Returns `true` if the widget has been disposed, otherwise `false`.
   */
  isDisposed(): boolean;

  /**
   * Returns the parent of this widget or `null` if this widget is not appended to a parent.
   */
  parent(): Composite;

  /**
   * Returns the first (nearest) parent of this widget that matches the given selector, or `null` if no
   * parent matches.
   * @param selector A selector expression or a predicate function to filter the results.
   */
  parent<Result extends Composite = Composite>(selector: Selector<Composite, Result>): Result;

  /**
   * Returns a (possibly empty) collection of all siblings of this widget that match the given selector.
   * @param selector A selector expression or a predicate function to filter the results.
   */
  siblings<Result extends Widget = Widget>(selector?: Selector<Widget, Result>): WidgetCollection<Result>;

  /**
   * The actual location and size of the widget, relative to contentView.
   */
  readonly absoluteBounds: Bounds;

  /**
   * The background of the widget. If given a plain string it is interpreted first as a gradient, then as
   * a color, and finally as an image path, whichever passes first. Use object literals or instances of
   * `LinearGradient`, `Color` or `Image` to avoid any ambiguity.
   */
  background: LinearGradientValue | ColorValue | ImageValue;

  /**
   * The vertical position of the widget's baseline relative to a sibling widget. Value `true` is treated
   * like `'prev()'` and aligns it with the previous sibling.
   */
  baseline: SiblingReferenceValue | 'auto' | true;

  /**
   * The position of the widget's bottom edge relative to the parent or a sibling widget.
   */
  bottom: ConstraintValue;

  /**
   * The actual location and size of the widget, relative to its parent.
   */
  readonly bounds: Bounds;

  /**
   * The horizontal position of the widget's center relative to the parent's center. Value `true` is
   * treated like `0` and puts it at the exact center without offset.
   */
  centerX: Offset | 'auto' | true;

  /**
   * The vertical position of the widget's center relative to the parent's center. Value `true` is treated
   * like `0` and puts it at the exact center without offset.
   */
  centerY: Offset | 'auto' | true;

  /**
   * A class name or a whitespace separated list of class names to identify the widget. Class names are
   * arbitrary strings that describe a state or a category and help to select widgets using a selector
   * expression. A class name may only contain alphanumeric characters, `_` and `-`. Class names can also
   * be added or removed using the field `classList`.
   */
  class: string;

  /**
   * Provides convenient access to the list of class names set to this widget. Class names can either be
   * set using the `class` property or by modifying the `classList` directly.
   */
  classList: string[];

  /**
   * Configure a widget to have equally rounded corners. The widget content is clipped by the rounded
   * corners.
   */
  cornerRadius: number;

  /**
   * A general-purpose property that may be set to any object. Unlike other properties, `data` forwards
   * change events from the object it contains. As it is initialized with an empty instance of
   * ${doc:ObservableData}, modifying this initial `data` object also causes a ${doc:PropertyChangedEvent}
   * for `data` to be fired.
   * **Important:** If `data` is assigned a plain object, that object will be converted to an
   * ${doc:ObservableData} instance, *so the original object will not be identical with the new `data`
   * value*. If set to any other object the new value will be the same instance.
   * When set as an attribute (via JSX or a widget factory) it has a special treatment: Unlike other
   * properties it is set *after* the listeners have been registered. This is so to allow passing a data
   * change listener (via 'onDataChanged' attribute) that will be invoked for the initial data value
   * immediately.
   */
  data: TData;

  /**
   * The position of the widget on the z-axis. Setting an `elevation` casts a shadow in the shape of the
   * widget.
   * To have the shadow properly applied on Android it is required to set the `background` on the widget
   * as well.
   */
  elevation: number;

  /**
   * Whether the widget can be interacted with.
   */
  enabled: boolean;

  /**
   * If set to true the widget will be invisible and ignored in the layout of the parent. Visually it is
   * treated like it was not attached to its parent, but it will still included in the return value of
   * `children()`.
   */
  excludeFromLayout: boolean;

  /**
   * The height of the widget.
   */
  height: Dimension | 'auto';

  /**
   * Whether the widget should show visual feedback while touched. Enabling `highlightOnTouch` will not
   * prevent the touch event from being propagated to the parent widget.
   */
  highlightOnTouch: boolean;

  /**
   * A string to identify the widget by using selectors. IDs are optional. It is strongly recommended that
   * they are unique within any component.
   */
  id: string;

  /**
   * Provides information for a widget to be used by the parent when determining its size and position.
   * While this property accepts any valid LayoutData expression (see ${doc:LayoutDataValue}), it will
   * always return an instance of the class [LayoutData](./LayoutData.md).
   * Widget provides an alias property for each property of LayoutData. Setting these properties will
   * change the value of the `layoutData` property, while getting them is the same as accessing them via
   * the `layoutData` property. I.e. `widget.left === widget.layoutData.left`.
   * There are multiple presets for layoutData available as static properties on the `LayoutData` class:
   * [center](./LayoutData.md#center)`, [stretch](./LayoutData.md#stretch)`,
   * [stretchX](./LayoutData.md#stretchx)` and [stretchY](./LayoutData.md#stretchy)`. They may be set
   * directly (`new TextView({layoutData: LayoutData.stretch});`), via string (e.g. `new
   * TextView({layoutData: 'stretch'});`), or in JSX via a special shorthand syntax: `<TextView
   * stretch/>`. The presets can be merged with widget properties, e.g. `<TextView stretch left={10}/>` or
   * `<TextView stretchX centerY/>`
   */
  layoutData: LayoutDataValue;

  /**
   * The position of the widget's left edge relative to the parent or a sibling widget.
   */
  left: ConstraintValue;

  /**
   * Opacity of the entire widget, in the range `[0..1]`. Can be used for fade animations.
   */
  opacity: number;

  /**
   * Additional space to add inside the widgets bounds.
   * @constant
   */
  padding: BoxDimensions | null;

  /**
   * The position of the widget's right edge relative to the parent or a sibling widget.
   */
  right: ConstraintValue;

  /**
   * The position of the widget's top edge relative to the parent or a sibling widget.
   */
  top: ConstraintValue;

  /**
   * Modifications to the widget's shape, size, or position. Can be used for animations. **Note:** In
   * Android the *transform* property does not affect the *bounds* property, while it does so in iOS.
   */
  transform: Transformation;

  /**
   * If set to false the widget will be invisible, but still occupy space in the parents layout. Visually
   * it is treated like a widget with an `opacity` of `0`, but in addition the widget can also not be
   * interacted with anymore.
   */
  visible: boolean;

  /**
   * The width of the widget.
   */
  width: Dimension | 'auto';

  /**
   * Fired when the widget is about to be disposed. At this point the widget and its children are still
   * accessible.
   */
  onDispose: Listeners<EventObject<this>>;

  /**
   * Fired after pressing a widget for a specific amount of time (about a second), and again on lifting
   * the finger.
   */
  onLongPress: Listeners<WidgetLongPressEvent<this>>;

  /**
   * Fired continuously after a finger touching the widget moved for a certain distance.
   */
  onPan: Listeners<WidgetPanEvent<this>>;

  /**
   * Fired when a finger starts moving down.
   */
  onPanDown: Listeners<WidgetPanEvent<this>>;

  /**
   * Fired when a finger starts moving left or right.
   */
  onPanHorizontal: Listeners<WidgetPanEvent<this>>;

  /**
   * Fired when a finger starts moving left.
   */
  onPanLeft: Listeners<WidgetPanEvent<this>>;

  /**
   * Fired when a finger starts moving right.
   */
  onPanRight: Listeners<WidgetPanEvent<this>>;

  /**
   * Fired when a finger starts moving up.
   */
  onPanUp: Listeners<WidgetPanEvent<this>>;

  /**
   * Fired when a finger starts moving up or down.
   */
  onPanVertical: Listeners<WidgetPanEvent<this>>;

  /**
   * Fired when the widget's size has changed.
   */
  onResize: Listeners<WidgetResizeEvent<this>>;

  /**
   * Fired when a finger moves down quickly.
   */
  onSwipeDown: Listeners<WidgetSwipeEvent<this>>;

  /**
   * Fired when a finger moves left quickly.
   */
  onSwipeLeft: Listeners<WidgetSwipeEvent<this>>;

  /**
   * Fired when a finger moves right quickly.
   */
  onSwipeRight: Listeners<WidgetSwipeEvent<this>>;

  /**
   * Fired when a finger moves up quickly.
   */
  onSwipeUp: Listeners<WidgetSwipeEvent<this>>;

  /**
   * Fired once when a finger briefly touched the widget.
   */
  onTap: Listeners<WidgetTapEvent<this>>;

  /**
   * Fired instead of touchEnd when the touch ends on another widget than it started on.
   */
  onTouchCancel: Listeners<WidgetTouchEvent<this>>;

  /**
   * Fired when a touch ends on the same widget than it started on.
   */
  onTouchEnd: Listeners<WidgetTouchEvent<this>>;

  /**
   * Fired repeatedly while swiping across the screen.
   */
  onTouchMove: Listeners<WidgetTouchEvent<this>>;

  /**
   * Fired when a widget is touched. See [Touch Events](../touch.md).
   */
  onTouchStart: Listeners<WidgetTouchEvent<this>>;

  /**
   * Fired when the [*background*](#background) property has changed.
   */
  onBackgroundChanged: ChangeListeners<this, 'background'>;

  /**
   * Fired when the [*baseline*](#baseline) property has changed.
   */
  onBaselineChanged: ChangeListeners<this, 'baseline'>;

  /**
   * Fired when the [*bottom*](#bottom) property has changed.
   */
  onBottomChanged: ChangeListeners<this, 'bottom'>;

  /**
   * Fired when the [*bounds*](#bounds) property has changed.
   */
  onBoundsChanged: ChangeListeners<this, 'bounds'>;

  /**
   * Fired when the [*centerX*](#centerX) property has changed.
   */
  onCenterXChanged: ChangeListeners<this, 'centerX'>;

  /**
   * Fired when the [*centerY*](#centerY) property has changed.
   */
  onCenterYChanged: ChangeListeners<this, 'centerY'>;

  /**
   * Fired when the [*class*](#class) property has changed.
   */
  onClassChanged: ChangeListeners<this, 'class'>;

  /**
   * Fired when the [*classList*](#classList) property has changed.
   */
  onClassListChanged: ChangeListeners<this, 'classList'>;

  /**
   * Fired when the [*cornerRadius*](#cornerRadius) property has changed.
   */
  onCornerRadiusChanged: ChangeListeners<this, 'cornerRadius'>;

  /**
   * Fired when the [*data*](#data) property has changed.
   */
  onDataChanged: ChangeListeners<this, 'data'>;

  /**
   * Fired when the [*elevation*](#elevation) property has changed.
   */
  onElevationChanged: ChangeListeners<this, 'elevation'>;

  /**
   * Fired when the [*enabled*](#enabled) property has changed.
   */
  onEnabledChanged: ChangeListeners<this, 'enabled'>;

  /**
   * Fired when the [*excludeFromLayout*](#excludeFromLayout) property has changed.
   */
  onExcludeFromLayoutChanged: ChangeListeners<this, 'excludeFromLayout'>;

  /**
   * Fired when the [*height*](#height) property has changed.
   */
  onHeightChanged: ChangeListeners<this, 'height'>;

  /**
   * Fired when the [*highlightOnTouch*](#highlightOnTouch) property has changed.
   */
  onHighlightOnTouchChanged: ChangeListeners<this, 'highlightOnTouch'>;

  /**
   * Fired when the [*id*](#id) property has changed.
   */
  onIdChanged: ChangeListeners<this, 'id'>;

  /**
   * Fired when the [*layoutData*](#layoutData) property has changed.
   */
  onLayoutDataChanged: ChangeListeners<this, 'layoutData'>;

  /**
   * Fired when the [*left*](#left) property has changed.
   */
  onLeftChanged: ChangeListeners<this, 'left'>;

  /**
   * Fired when the [*opacity*](#opacity) property has changed.
   */
  onOpacityChanged: ChangeListeners<this, 'opacity'>;

  /**
   * Fired when the [*right*](#right) property has changed.
   */
  onRightChanged: ChangeListeners<this, 'right'>;

  /**
   * Fired when the [*top*](#top) property has changed.
   */
  onTopChanged: ChangeListeners<this, 'top'>;

  /**
   * Fired when the [*transform*](#transform) property has changed.
   */
  onTransformChanged: ChangeListeners<this, 'transform'>;

  /**
   * Fired when the [*visible*](#visible) property has changed.
   */
  onVisibleChanged: ChangeListeners<this, 'visible'>;

  /**
   * Fired when the [*width*](#width) property has changed.
   */
  onWidthChanged: ChangeListeners<this, 'width'>;
}


// WidgetCollection

/**
 * A `WidgetCollection` is an array-like object representing a set of widgets, as returned by the widget
 * methods `children` and `find`. It combines a subset of the JavaScript Array API with a subset of the
 * Tabris.js Widget API. Like an array, the widgets within the collection may be accessed directly using
 * the `[index]` syntax. The number of widgets is stored in the `length` field. Instances of
 * *WidgetCollection* are immutable.
 * Calls to `set` or `animate` change the given properties for all widgets in the collection. Similarly,
 * the `on`, `off` and `once` methods will add/remove the given listener to/from all widgets. When `get`
 * is used, the value of the first widget in the collection is returned.
 * WidgetCollection can also in JSX as a means of creating a group of widgets to append to the same
 * parent. To shorten this common use case the `WidgetCollection` is also available as the alias
 * ["$"](./$.md). This alias still needs to be imported from the tabris module though.
 */
export class WidgetCollection<WidgetType extends Widget = Widget> {

  /**
   * A `WidgetCollection` is an array-like object representing a set of widgets, as returned by the widget
   * methods `children` and `find`. It combines a subset of the JavaScript Array API with a subset of the
   * Tabris.js Widget API. Like an array, the widgets within the collection may be accessed directly using
   * the `[index]` syntax. The number of widgets is stored in the `length` field. Instances of
   * *WidgetCollection* are immutable.
   * Calls to `set` or `animate` change the given properties for all widgets in the collection. Similarly,
   * the `on`, `off` and `once` methods will add/remove the given listener to/from all widgets. When `get`
   * is used, the value of the first widget in the collection is returned.
   * WidgetCollection can also in JSX as a means of creating a group of widgets to append to the same
   * parent. To shorten this common use case the `WidgetCollection` is also available as the alias
   * ["$"](./$.md). This alias still needs to be imported from the tabris module though.
   */
  public constructor(widgets?: Widget[]);

  /**
   * Animates all widgets in this collection.
   * @param properties The properties and target values to animate.
   * @param options Configures the animation itself.
   */
  animate(properties: {transform?: Transformation, opacity?: number}, options: AnimationOptions): void;

  /**
   * Appends all widgets in this collection to the given parent widget.
   * @param parent The parent widget to append to.
   */
  appendTo(parent: Composite): this;

  /**
   * Returns a collection containing all children of all widgets in this collection that match the given
   * selector.
   * @param selector A selector expression or a predicate function to filter the results.
   */
  children<Result extends Widget = Widget>(selector?: Selector<Widget, Result>): WidgetCollection<Result>;

  /**
   * Returns a clone of this *WidgetCollection* containing all widgets in this collection.
   */
  concat(): WidgetCollection<WidgetType>;

  /**
   * Returns a new *WidgetCollection* containing all widgets in this collection and those given as
   * arguments.
   * @param items
   */
  concat<AddedType extends Widget = Widget>(...items: Array<AddedType|AddedType[]|WidgetCollection<AddedType>>): WidgetCollection<AddedType | WidgetType>;

  /**
   * Detaches all widgets in this collection from their parent.
   */
  detach(): void;

  /**
   * Disposes all widgets in this collection.
   */
  dispose(): void;

  /**
   * Returns a new *WidgetCollection* containing all widgets in this collection that match the given
   * selector.
   * @param selector A selector expression or a predicate function to filter the results.
   */
  filter<Result extends WidgetType = WidgetType>(selector: Selector<WidgetType, Result>): WidgetCollection<Result>;

  /**
   * Returns the first widget in the collection that is matched by the selector. Without selector, it is
   * the same as `collection[0]`.
   * @param selector A selector expression or a predicate function to filter the results.
   */
  first<Result extends WidgetType = WidgetType>(selector?: Selector<WidgetType, Result>): Result|undefined;

  /**
   * Calls the given callback function once for each widget in the collection.
   * @param callback The function to call.
   */
  forEach(callback: ((widget:WidgetType, index:number, collection:WidgetCollection<WidgetType>) => void)): void;

  /**
   * Returns `true` if the given widget is included in the collection, `false` otherwise.
   * @param widget The widget to search in the collection.
   */
  includes(widget: WidgetType): boolean;

  /**
   * Returns the index of the given widget within the collection, or `-1` if the widget is not present.
   * @param widget The widget to locate in the collection.
   */
  indexOf(widget: WidgetType): number;

  /**
   * Returns the last widget in the collection that is matched by the selector. Without selector, it is
   * the same as `collection[collection.length - 1]`.
   * @param selector A selector expression or a predicate function to filter the results.
   */
  last<Result extends WidgetType = WidgetType>(selector?: Selector<WidgetType, Result>): Result | undefined;

  /**
   * Returns the last widget in the collection that is an instance of the given class.
   * @param constructor A class to filter the results.
   */
  last<U extends Widget>(constructor: { new (...args: any[]): U } | undefined): U;

  /**
   * Calls the given callback function once for each widget in the collection and returns an array with
   * the return values of each call.
   * @param callback The function to call for each widget.
   */
  map(callback: ((widget:WidgetType, index:number, collection:WidgetCollection<WidgetType>) => any)): any[];

  /**
   * Calls the given callback function once for each widget in the collection and returns an array with
   * the return values of each call.
   * @param callback The function to call for each widget. The arguments are: *widget*, *index*, *collection*
   */
  map<U>(callback: (widget: WidgetType, index: number, collection: WidgetCollection<WidgetType>) => U): U[];

  /**
   * Removes the given listener from all widgets in this collection. See also `Widget.off()`.
   * @param event
   * @param listener
   * @param context
   */
  off(event: string, listener: Function, context?: this): this;

  /**
   * Adds the given listener to all widgets in this collection. See also `Widget.on()`.
   * @param event
   * @param listener
   * @param context In the listener function, `this` will point to this object.
   */
  on(event: string, listener: Function, context?: this): this;

  /**
   * Adds the given listener for single execution on all widgets in this collection. See also
   * `Widget.once()`.
   * @param event
   * @param listener
   * @param context In the listener function, `this` will point to this object.
   */
  once(event: string, listener: Function, context?: this): this;

  /**
   * Returns the only widget in the collection that is matched by the selector. If there is more or less
   * than one match the method throws en Error. Without a selector the widget collection needs to have
   * exactly one entry.
   * @param selector A selector expression or a predicate function to filter the results.
   */
  only<Result extends WidgetType = WidgetType>(selector?: Selector<WidgetType, Result>): Result;

  /**
   * Returns a collection containing all direct parents of the widgets in this collection.
   */
  parent(): WidgetCollection<Widget>;

  /**
   * Sets all key-value pairs in the properties object on all widgets in this collection. See also
   * `Widget.set()`.
   * @param properties
   */
  set(properties: Properties<WidgetType>): this;

  /**
   * Returns a new *WidgetCollection* containing a section of this collection.
   * @param start The beginning of the specified portion of the collection.
   * @param end The end of the specified portion of the collection.
   */
  slice(start?: number, end?: number): WidgetCollection<WidgetType>;

  /**
   * Returns an Array containing all widgets in the collection.
   */
  toArray(): WidgetType[];

  /**
   * Triggers an event of the given type on all widgets in this collection and passes the fields of the
   * given *object* to all listeners`
   * @param type The type of event to trigger
   * @param eventData The data to pass to listener functions.
   */
  trigger(type: string, eventData?: object): this;

  /**
   * This function is called by the framework to create JSX elements from the WidgetCollection class.
   * @constant
   */
  readonly [JSX.jsxFactory]: JSX.JsxFactory;

  /**
   * @constant
   */
  readonly [key: number]: WidgetType;

  /**
   * The widget this WidgetCollection was created from. Corresponds to the ':host' selector.
   * @constant
   */
  readonly host: Widget;

  /**
   * @constant
   */
  readonly jsxAttributes: {children?: JSXChildren<WidgetType>};

  /**
   * Contains the number of widgets in the collection.
   * @constant
   */
  readonly length: number;
}


// App


export interface AppBackNavigationEvent<Target = App>
 extends EventObject<Target>
{
  readonly preventDefault: () => void;
}

export interface AppKeyPressEvent<Target = App>
 extends EventObject<Target>
{
  readonly action: 'up' | 'down';
  readonly altKey: boolean;
  readonly character: string;
  readonly ctrlKey: boolean;
  readonly deviceId: number;
  readonly functionKey: boolean;
  readonly keyCode: number;
  readonly preventDefault: () => void;
  readonly shiftKey: boolean;
  readonly time: number;
}

/**
 * Provides information about the application and allows to handle global application ui events.
 */
export class App extends NativeObject {

  /**
   * Provides information about the application and allows to handle global application ui events.
   */
  private constructor();

  /**
   * Shuts down the running application and closes the UI.
   */
  close(): void;

  /**
   * Returns the URL for a given resource that is bundled with the app. Can be used to access app
   * resources like images, videos, etc. Note that these resources can only be accessed in read-only mode.
   * @param path The path of a resource relative to the application root.
   */
  getResourceLocation(path: string): string;

  /**
   * Asks the operating system to open the given URL in an external app. Operating systems usually support
   * a variety of URL schemes including `http`, `https`, `mailto`, `tel`, and `sms`. Apps can also
   * register for custom URL schemes.
   * @param url The URL to launch.
   */
  launch(url: string): Promise<void>;

  /**
   * Allows to register a font to use throughout the app. Once a font is registered its alias can be used
   * to apply the font where ever a font can be configured, e.g. in `TextView` or `GraphicalContext`.
   * Tabris.js supports TrueType fonts (*.ttf) and OpenType fonts (*.otf).
   * @param alias An identifier for the registered font. The alias can be used as a font family, e.g. in the `font` properties of `TextView` and `Button`.
   * @param file The font file to register for later use. Similar to images paths, the file path can be absolute, relative or an URL.
   */
  registerFont(alias: string, file: string): void;

  /**
   * Closes the running application and either loads a different app at the given `url` or reloads the
   * current app when no `url` is given.
   * @param url An optional url to an app to launch
   */
  reload(url?: string): void;

  /**
   * Asks the operating system to share data with another installed app. The returned promise resolves
   * successfully when the data was shared with another app. The resolved promise contains a string
   * providing platform specific information about the share target. In case sharing was not possible or
   * the share operation has been canceled by the user, the promise is rejected with an appropriate error
   * message.
   * The behavior of this API follows the [W3C Web Share API](https://www.w3.org/TR/web-share/).
   * In order to be able to share an image to the photo app on iOS, the Tabris.js app has to include the
   * text string `NSPhotoLibraryAddUsageDescription` in its plist file. The string is used in the native
   * permission dialog. See the [`'camera' permissions`](../permissions.md#category-camera) docs for
   * examples on how to configure the string.
   * @param data The data to share. The object must contain at least one of the properties: `title`, `text`, `url` or `files`. The files need to have a `name` and mime `type` set. <br/><br/>On iOS the content of the `url` is previewed in the native share dialog. On Android it is treated as regular text. When both `text` and `url` are given on Android the two strings are concatenated with a blank space as defined in the [W3C Web Share API](https://www.w3.org/TR/web-share/).
   */
  share(data: {title?: string, text?: string, url?: string, files?: File[]}): Promise<string>;

  /**
   * Returns `false` if this app was build build in production mode, otherwise `true`. In production mode
   * no debugger can be attached to the JavaScript VM or native runtime.
   * @constant
   */
  readonly debugBuild: boolean;

  /**
   * Uniquely identifies the app.
   * @constant
   */
  readonly id: string;

  /**
   * Allows to control the device idle timout. When disabled the device will not go into sleep mode and
   * turn off the screen to safe battery power.
   * The `idleTimeoutEnabled` will disable any system wide enabled idle settings while the app is in the
   * foreground.
   */
  idleTimeoutEnabled: boolean;

  /**
   * @constant
   */
  readonly jsxAttributes: never;

  /**
   * Enables certificate pinning for HTTP requests. When pinned certificates are defined for a host,
   * connections to this host will only be permitted if the server provides a matching certificate.
   * Connections to hosts that are not in the list are not affected.
   * Certificate pinning affects the following components: XHR/fetch, WebSockets and image loading. It
   * does *not* affect WebViews.
   * The list of pinned certificates has to be in the form of `[{host: <string>, hash: <string>,
   * algorithm: <RSA2048|RSA4096|ECDSA256>}, ..]`.
   * - The `host` attribute denotes the host name (including subdomain) of the host to be pinned
   * ([wildcards allowed](https://en.wikipedia.org/wiki/Wildcard_DNS_record)).
   * - The `hash` attribute is the base64 encoded sha256 fingerprint of the _subjectPublicKeyInfo_,
   * prefixed with `sha256/`.
   * - The `algorithm` attribute denotes the public key algorithm of the SSL certificate and can have the
   * values `RSA2048`, `RSA4096` or `ECDSA256`. This attribute is only required on iOS.
   * Example: `[{host: 'freegeoip.net', hash: 'sha256/+SVYjThgePRQxQ0e8bWTQDRtPYR/xBRufqyMoeaWteo=',
   * algorithm: 'ECDSA256'}]`
   * For further details see https://www.owasp.org/index.php/Certificate_and_Public_Key_Pinning.
   */
  pinnedCertificates: any[];

  /**
   * Adds a set of certificates to validated ssl connections against. The certificates are applied in
   * addition to the system wide default certificates.
   * The `ArrayBuffer` entries of the `trustedCertificates` array consist of the bytes of the certificate
   * files. On Android the certificate file has to be a _*.pem_ (Privacy Enhanced Mail) file whereas on
   * iOS  it has to be _*.der_ (Distinguished Encoding Rules) file.
   */
  trustedCertificates: ArrayBuffer[];

  /**
   * The user facing version number of the app.
   * @constant
   */
  readonly version: string;

  /**
   * An alternative version number used in app stores to identify different versions of an app. Usually
   * incremented with each release. This property reflects the `versionCode` on Android and
   * `CFBundleVersion` on iOS.
   * @constant
   */
  readonly versionCode: number;

  /**
   * Fired when a back navigation is invoked by the user.
   */
  onBackNavigation: Listeners<AppBackNavigationEvent<this>>;

  /**
   * Fired when the app becomes invisible. Either because another app is in the foreground or the user has
   * returned to the home screen.
   */
  onBackground: Listeners<EventObject<this>>;

  /**
   * The event is fired when the app starts or when it returns from the background.
   */
  onForeground: Listeners<EventObject<this>>;

  /**
   * Fired when a hardware key is pressed. Note that these events stem from physical hardware, not from
   * the virtual keyboard.
   * When invoking `event.preventDefault()` the key event is not propagated to the widget hierarchy.
   * However, a `TextInput` with focus will still receive the key event.
   */
  onKeyPress: Listeners<AppKeyPressEvent<this>>;

  /**
   * Fired when the app is not the interaction target of the user anymore. Usually preceded by `resume`.
   */
  onPause: Listeners<EventObject<this>>;

  /**
   * Fired when the app is visible and ready to interact with the user. The event is preceded by either
   * `foreground` (the app becomes visible again) or `pause` (the app regains ability to interact with
   * user).
   */
  onResume: Listeners<EventObject<this>>;

  /**
   * Fired when the app is being destroyed. After this callback no more interaction with the app is
   * possible.
   * On Android the terminate event is fired when closing the app via the back navigation or when the
   * system shuts down the app to reclaim memory. In case the app is hard killed by eg. clearing it from
   * the app switcher, the event is not fired.
   * On iOS the event might not always be fired reliably due to the scheduling behavior of the underlying
   * operating system.
   * It is therefore recommended to use the event to clean up resources but not to rely on it for mission
   * critical operations.
   */
  onTerminate: Listeners<EventObject<this>>;

  /**
   * Fired when the [*idleTimeoutEnabled*](#idleTimeoutEnabled) property has changed.
   */
  onIdleTimeoutEnabledChanged: ChangeListeners<this, 'idleTimeoutEnabled'>;

  /**
   * Fired when the [*pinnedCertificates*](#pinnedCertificates) property has changed.
   */
  onPinnedCertificatesChanged: ChangeListeners<this, 'pinnedCertificates'>;

  /**
   * Fired when the [*trustedCertificates*](#trustedCertificates) property has changed.
   */
  onTrustedCertificatesChanged: ChangeListeners<this, 'trustedCertificates'>;
}


export const app: App;

// Authentication


/**
 * Allows to request authentication from the user. The means of authentication depends on the device
 * configuration. For example, the authentication could be performed via credentials like pin or
 * password or via a biometric authentication like fingerprint or face.
 */
export class Authentication extends NativeObject {

  /**
   * Allows to request authentication from the user. The means of authentication depends on the device
   * configuration. For example, the authentication could be performed via credentials like pin or
   * password or via a biometric authentication like fingerprint or face.
   */
  private constructor();

  /**
   * Request the user to authenticate using the device default mechanism. The resolved promise returns a
   * result object with `'status'` and optionally `'message'`. The `'status'` Informs about the result of
   * the authentication operation. In case of non-authentication flow errors like a incorrectly configured
   * client, the promise is rejected.
   * @param options A set of options to apply when authenticating.
   */
  authenticate(options?: {title?: string, subtitle?: string, message?: string, allowCredentials?: boolean, confirmationRequired?: boolean}): Promise<{status: 'success' | 'canceled' | 'userCanceled' | 'limitExceeded' | 'lockout' | 'biometricsNotEnrolled' | 'credentialsNotEnrolled' | 'error', message: string}>;

  /**
   * Checks whether the device has any authentication mechanism configured. If the device does not require
   * any authentication `false` is returned.
   * @param options A set of options to apply when authenticating.
   */
  canAuthenticate(options?: {allowCredentials?: boolean}): boolean;

  /**
   * Closes a potentially open authentication ui.
   */
  cancel(): void;

  /**
   * The biometric authentication mechanisms available on the device. Currently supported values are
   * `'fingerprint'` and `'face'`.
   */
  readonly availableBiometrics: Array<'fingerprint' | 'face'>;

  /**
   * Fired when the [*availableBiometrics*](#availableBiometrics) property has changed.
   */
  onAvailableBiometricsChanged: ChangeListeners<this, 'availableBiometrics'>;
}


export const authentication: Authentication;

// DevTools


/**
 * The `devTools` object provides methods that can assist in App development.
 */
export class DevTools extends NativeObject {

  /**
   * The `devTools` object provides methods that can assist in App development.
   */
  private constructor();

  /**
   * Hides the developer tools UI if currently visible. Note that this can cause a re-layout since the
   * [`contentView`](./ContentView.md) grows.
   */
  hideUi(): void;

  /**
   * Returns `true` if the developer tools UI is currently visible.
   */
  isUiVisible(): boolean;

  /**
   * Shows the developer tools UI if available and not already visible. Returns `true` if the UI is now
   * visible. Returns `false` if the UI can not be shown [because `EnableDeveloperConsole` is not set to
   * `true` in `config.xml`](../build.md#preferences).
   * Note this causes a re-layout since the [`contentView`](./ContentView.md) shrinks.
   */
  showUi(): boolean;
}


export const devTools: DevTools;

// Device


/**
 * Provides information about the device that executes the application.
 */
export class Device extends NativeObject {

  /**
   * Provides information about the device that executes the application.
   */
  private constructor();

  /**
   * Sets all key-value pairs in the properties object.
   * @param properties
   */
  set(properties: never): this;

  /**
   * An array of `Camera` objects ordered by priority. The first entry is considered the primary camera of
   * the device.
   * @constant
   */
  readonly cameras: Camera[];

  /**
   * The user language configured on the device as an [RFC 4646](http://tools.ietf.org/html/rfc4646)
   * compliant string. For example `"de"`, `"es-ES"`, etc. This property is also available globally as
   * `navigator.language`.  Note: On iOS ≥ 11 it will only return languages declared in
   * [CFBundleLocalizations](https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html#//apple_ref/doc/uid/TP40009249-109552-TPXREF111).
   * @constant
   */
  readonly language: string;

  /**
   * The name of the device model. For example `"iPad4,1"` or `"Nexus 7"`. This property is also available
   * globally as `device.model`.
   * @constant
   */
  readonly model: string;

  /**
   * The name of the device set by owner. For example `"John's phone"`. This property is also available
   * globally as `device.name`.
   * **Note:** On Android `name` is only available on Android 7.1+.
   * @constant
   */
  readonly name: string;

  /**
   * The device orientation. One of `portrait-primary`, `portrait-secondary`, `landscape-primary`, and
   * `landscape-secondary`.
   */
  readonly orientation: 'landscape-primary' | 'landscape-secondary' | 'portrait-primary' | 'portrait-secondary';

  /**
   * The name of the platform. Either `"Android"` or `"iOS"`. This property is also available globally as
   * `device.platform`.
   * @constant
   */
  readonly platform: 'Android' | 'iOS';

  /**
   * The ratio between physical pixels and device independent pixels. This property is also available
   * globally as
   * [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window.devicePixelRatio).
   * @constant
   */
  readonly scaleFactor: number;

  /**
   * The entire height of the device's screen in device independent pixel. Depends on the current device
   * orientation. This property is also available globally as
   * [screen.height](https://developer.mozilla.org/en-US/docs/Web/API/Screen.height).
   * @constant
   */
  readonly screenHeight: number;

  /**
   * The entire width of the device's screen in device independent pixel. Depends on the current device
   * orientation. This property is also available globally as
   * [screen.width](https://developer.mozilla.org/en-US/docs/Web/API/Screen.width).
   * @constant
   */
  readonly screenWidth: number;

  /**
   * The name of the device manufacture. For example `"Samsung"` or `"Apple"`. This property is also
   * available globally as `device.vendor`.
   * @constant
   */
  readonly vendor: string;

  /**
   * The platform version. On iOS it looks like this: `"8.1.1"`. On Android, the [version
   * code](https://developer.android.com/reference/android/os/Build.VERSION_CODES.html) is returned. This
   * property is also available globally as `device.version`.
   * @constant
   */
  readonly version: string;

  /**
   * Fired when the `orientation` property has changed and the rotation animation has finished.
   */
  onOrientationChanged: ChangeListeners<this, 'orientation'>;
}


export const device: Device;

// FileSystem


/**
 * The `fs` object provides methods to read and write files. All methods are asynchronous and return a
 * promise.
 */
export class FileSystem extends NativeObject {

  /**
   * The `fs` object provides methods to read and write files. All methods are asynchronous and return a
   * promise.
   */
  private constructor();

  /**
   * Writes the given binary content to the given file. If the file exists, it is appended, otherwise it
   * is created. Returns a promise that resolves with `true` if a new file was created, or with `false` if
   * the file already existed. It rejects with an Error if the path points to a directory.
   * @param path The path of the file to append.
   * @param data The content to append to the file.
   */
  appendToFile(path: string, data: ArrayBuffer | Blob): Promise<boolean>;

  /**
   * Writes the given text to the given file using the given encoding or `utf-8` if no encoding is
   * specified. If the file exists, it is appended, otherwise it is created. Returns a promise that
   * resolves with `true` if a new file was created, or with `false` if the file already existed. It
   * rejects with an Error if the path points to a directory.
   * @param path The path of the file to append.
   * @param text The text to write to the file.
   * @param encoding The encoding to use to write a text file. When omitted, `utf-8` will be used.
   */
  appendToFile(path: string, text: string, encoding?: string): Promise<boolean>;

  /**
   * Creates a directory on the given path, including intermediate directories. Returns a promise that
   * resolves with `true` if the directory was created, or with `false` if it  already existed. If the
   * path points to a file the promise rejects.
   * @param path The path of the directory to create.
   */
  createDir(path: string): Promise<boolean>;

  /**
   * Returns `true` if there is a directory at the given path. Otherwise (no directory, or is a file) it
   * returns `false`.
   * @param path The path of the directory.
   */
  isDir(path: string): boolean;

  /**
   * Returns `true` if there is a file at the given path. Otherwise (no file, or is a directory) it
   * returns `false`.
   * @param path The path of the file.
   */
  isFile(path: string): boolean;

  /**
   * Allows to select a file via a native file picker ui. The supplied `options` object provides
   * additional configuration parameters to adjust the picker behavior.
   * Once the picker ui is closed the returned promise resolves with an array of `File` objects or an
   * empty array if no file has been selected.
   * @param options An optional set of configuration parameters.
   */
  openFile(options?: {type?: string, quantity?: 'single' | 'multiple'}): Promise<File[]>;

  /**
   * Reads the contents of a given directory. Returns a promise that resolves on success to an array of
   * the names of the files in the directory excluding '.' and '..'. If no directory exists at that path
   * the Promise rejects with an error object.
   * @param path The path of the directory to read.
   */
  readDir(path: string): Promise<string[]>;

  /**
   * Reads the given file and returns a promise that resolves to the contents of the file on success and
   * rejects with an error object if no file exists at that path. The file contents are returned as an
   * ArrayBuffer.
   * @param path The path of the file to read.
   */
  readFile(path: string): Promise<ArrayBuffer>;

  /**
   * Reads the given text file and returns a promise that resolves to the contents of the file on success
   * and rejects with an Error if no file exists at that path. The file contents are returned as a string.
   * @param path The path of the file to read.
   * @param encoding The encoding to use to read text files.
   */
  readFile(path: string, encoding: string): Promise<string>;

  /**
   * Removes the given file or directory. If the directory is not empty all its contents will also be
   * deleted. If there is no file or directory at the given path nothing will happen. Returns a promise
   * that resolves with `true` if something was deleted, otherwise `false`. Rejects with an error object
   * only in case of an access error.
   * @param path The path to the file or directory to remove.
   */
  remove(path: string): Promise<boolean>;

  /**
   * Removes the given directory if it exists. If the directory is not empty all its contents will also be
   * deleted. Returns a promise that resolves if the directory was deleted or none existed at that path.
   * If the path points to a file the promise rejects.
   * @param path The path of the directory to remove. Must be empty.
   */
  removeDir(path: string): Promise<void>;

  /**
   * Removes the given file if it exists. Returns a promise that resolves with `true` on success or with
   * `false` if no directory exists at that path. If the path points to a directory the promise rejects.
   * @param path The path of the file to remove.
   */
  removeFile(path: string): Promise<void>;

  /**
   * Sets all key-value pairs in the properties object.
   * @param properties
   */
  set(properties: never): this;

  /**
   * Writes the given binary contents to the given file. If the file exists, it is overwritten, otherwise
   * it is created. Returns a promise that resolves on success and rejects with an Error in case of a
   * failure.
   * @param path The path of the file to write.
   * @param data The contents to write to the file.
   */
  writeFile(path: string, data: ArrayBuffer | Blob): Promise<void>;

  /**
   * Writes the given text to the given file using the given encoding or `utf-8` if no encoding is
   * specified. If the file exists, it is overwritten, otherwise it is created. Returns a promise that
   * resolves on success and rejects with an Error in case of a failure.
   * @param path The path of the file to write.
   * @param text The text to write to the file.
   * @param encoding The encoding to use to write a text file. When omitted, `utf-8` will be used.
   */
  writeFile(path: string, text: string, encoding?: string): Promise<void>;

  /**
   * An external path of a directory that the app may use to store cached files. External storage may be
   * any type like permanent internal disc storage, sd-card or a usb stick. The OS may delete files in
   * this directory when the device runs low on storage. Only use this location for data that can easily
   * be re-created.
   * @constant
   */
  readonly cacheDir: string;

  /**
   * An list of external paths that the app may use to store cached files. External storage may be any
   * type storage type like permanent internal disc storage, sd-card or a usb stick. In case no type of
   * external storage is available the list will be empty.
   * The OS may delete files in this directory when the device runs low on storage. Only use this location
   * for data that can easily be re-created.
   * @constant
   */
  readonly externalCacheDirs: string[];

  /**
   * A list of external paths that the app may use to store persistent files. External storage may be any
   * storage type like permanent internal disc storage, sd-card or a usb stick. In case no type of
   * external storage is available the list will be empty.
   * This is *not* the directory that contains the files bundled with the project, e.g. images, js files,
   * `package.json`. You can access these files using the `fetch` or `XMLHttpRequest` APIs.
   * @constant
   */
  readonly externalFileDirs: string[];

  /**
   * The path of a directory that the app may use to store persistent files. This is *not* the directory
   * that contains the files bundled with the project, e.g. images, js files, `package.json`. You can
   * access these files using the `fetch` or `XMLHttpRequest` APIs.
   * @constant
   */
  readonly filesDir: string;
}


export const fs: FileSystem;

// Input


export interface PointerEvent<Target = Input>
 extends EventObject<Target>
{
  readonly touches: [{x: number, y: number}];
}

export interface InputResizeEvent<Target = Input>
 extends EventObject<Target>
{
  readonly height: number;
  readonly left: number;
  readonly top: number;
  readonly width: number;
}

/**
 * The `input` object is supposed to fire global touch events with coordinates relative to the app
 * window.
 */
export class Input extends NativeObject {

  /**
   * The `input` object is supposed to fire global touch events with coordinates relative to the app
   * window.
   */
  private constructor();

  /**
   * Fired instead of 'pointerUp' when the touch ends on another app window than it started on.
   */
  onPointerCancel: Listeners<PointerEvent<this>>;

  /**
   * Fired when the app window is touched.
   */
  onPointerDown: Listeners<PointerEvent<this>>;

  /**
   * Fired repeatedly while swiping across the app window.
   */
  onPointerMove: Listeners<PointerEvent<this>>;

  /**
   * Fired when a touch ends on the app window than it started on.
   */
  onPointerUp: Listeners<PointerEvent<this>>;

  /**
   * Fired when the app window size has changed.
   */
  onResize: Listeners<InputResizeEvent<this>>;
}


export const input: Input;

// Permission


/**
 * Allows to request runtime permissions which are required to access certain device features. Trying to
 * access a Tabris.js API without a required permission will throw an `Error`.
 * A permission can be either a category (supported on Android and iOS) or a specific Android permission
 * name.
 * See the [permissions documentation](../permissions.md) for full details on how to handle runtime
 * permissions.
 */
export class Permission extends NativeObject {

  /**
   * Allows to request runtime permissions which are required to access certain device features. Trying to
   * access a Tabris.js API without a required permission will throw an `Error`.
   * A permission can be either a category (supported on Android and iOS) or a specific Android permission
   * name.
   * See the [permissions documentation](../permissions.md) for full details on how to handle runtime
   * permissions.
   */
  private constructor();

  /**
   * Checks the authorization status for a given set of permissions.
   * Since an app permission can change during the apps lifecycle or when it is changed in the app
   * settings, it is recommended to check the permissions status before making API calls that require a
   * granted permission.
   * @param permissions A list of permissions to get the authorization status for.
   */
  getAuthorizationStatus(...permissions: string[]): string;

  /**
   * Checks if any of the given permissions allow to request authorization. A permission is regarded as
   * allowed to authorize when its status is either `'undetermined'` or `'declined'`.
   * @param permissions A list of permissions to check if authorization is possible.
   */
  isAuthorizationPossible(...permissions: string[]): boolean;

  /**
   * Checks whether the given set of permissions is authorized. A set of permissions is regarded as
   * authorized when the status of all permissions is `'granted'`.
   * @param permissions A list of permissions to check its authorization status.
   */
  isAuthorized(...permissions: string[]): boolean;

  /**
   * Request authorization for a set of permissions.
   * If any of the permissions allow to request authorization, the method call will prompt the user to
   * grant the permission and returns the result in the resolved promise. If the status can not be
   * changed, the current status is returned by the resolved promise.
   * @param permissions A list of permissions to request authorization for.
   */
  requestAuthorization(...permissions: string[]): Promise<'undetermined' | 'granted' | 'declined' | 'denied' | 'rejected'>;

  /**
   * Tries to authorize access to the given permissions, either by already holding the permissions or by
   * requesting authorization for the given permissions. When the result is `'granted'` the `onAuthorized`
   * callback will be invoked. If any other state is determined the `onUnauthorized` callback will be
   * invoked. In case of an `Error` the `onError` callback will be invoked.
   * @param permissions An individual permission or a list of permissions to gain authorization for.
   * @param onAuthorized A callback to be invoked if the desired permissions could be granted. The permissions will have the status `'granted`'.
   * @param onUnauthorized A callback to be invoked when the desired permissions could not be granted.
   * @param onError A callback to be invoked if the request failed.
   */
  withAuthorization(permissions: string | string[], onAuthorized: () => any, onUnauthorized: () => any, onError: (error: Error) => any): void;
}


export const permission: Permission;

// Printer


/**
 * Allows to print PDF documents or images from the device. A printer object is always available from
 * tabris.printer.
 */
export class Printer extends NativeObject {

  /**
   * Allows to print PDF documents or images from the device. A printer object is always available from
   * tabris.printer.
   */
  private constructor();

  /**
   * Prints a PDF document using the native printing capabilities of the device. The data has to be
   * provided as an `ArrayBuffer` or typed array. The method returns a promise which resolves to an event
   * object with the property `result`. The `result` can either be `completed` or `canceled`. When
   * printing fails the promise is rejected with an `Error` parameter containing additional information
   * about the error. Supported on iOS and Android 4.4+.
   * @param data The bytes of the document to print. The value can either be an ArrayBuffer or a typed array containing the bytes of a PDF document or image.
   * @param options An optional set of configuration parameters.
   */
  print(data: any, options?: {jobName?: string, contentType?: string}): Promise<void>;
}


export const printer: Printer;

// SizeMeasurement


/**
 * Allows to measure Text.
 */
export class SizeMeasurement extends NativeObject {

  /**
   * Allows to measure Text.
   */
  private constructor();

  /**
   * Measures the given text. The method returns a `Promise` which resolves to an array of `{width:
   * number, height: number}`.
   * @param configs The text configurations to measure. A text configuration has to provide at least a `text` and `fontSize` property.
   * @provisional
   */
  measureTexts(configs: Array<{text: string, font: FontValue, maxWidth?: number, markupEnabled?: boolean}>): Promise<{width: number, height: number}>;

  /**
   * Measures the given text. The method returns an array of `{width: number, height: number}`.
   * @param configs The text configurations to measure. A text configuration has to provide at least a `text` and `fontSize` property.
   * @provisional
   */
  measureTextsSync(configs: Array<{text: string, font: FontValue, maxWidth?: number, markupEnabled?: boolean}>): Array<{width: number, height: number}>;
}


export const sizeMeasurement: SizeMeasurement;

// Utility Functions


/**
 * Checks that the given value is of the expected type. If the check fails a `TypeError` will be thrown.
 * The `name` option may be used to change how the error message refers to the value.
 * If the given value is of the expected type the function will simply return the value. In TypeScript
 * files and some JavaScript editors the IDE will recognize the return value as being of the expected
 * type.
 * Some values will never pass the check regardless of given type: `NaN`, `Infinity`, `-Infinity` and
 * any boxed primitive. The values `null` and `undefined` will pass only if the `nullable` option is
 * explicitly set to true.
 * @param value The value to check the type of.
 * @param type The constructor function (class) of the expected type. May also be a subclass. Primitive types are represented by their respective boxed type constructors `String`, `Number` and `Boolean`.
 * @param options `name` is the name of the value to be used in the error message
.`nullable` determines whether or not `null` and `undefined` will pass the type check.
 */
export function checkType(value: any, type: BaseConstructor<String>, options?: {name?: string, nullable?: boolean}): string;

/**
 * Checks that the given value is of the expected type. If the check fails a `TypeError` will be thrown.
 * The `name` option may be used to change how the error message refers to the value.
 * If the given value is of the expected type the function will simply return the value. In TypeScript
 * files and some JavaScript editors the IDE will recognize the return value as being of the expected
 * type.
 * Some values will never pass the check regardless of given type: `NaN`, `Infinity`, `-Infinity` and
 * any boxed primitive. The values `null` and `undefined` will pass only if the `nullable` option is
 * explicitly set to true.
 * @param value The value to check the type of.
 * @param type The constructor function (class) of the expected type. May also be a subclass. Primitive types are represented by their respective boxed type constructors `String`, `Number` and `Boolean`.
 * @param options
 */
export function checkType(value: any, type: BaseConstructor<Number>, options?: {name?: string, nullable?: boolean}): number;

/**
 * Checks that the given value is of the expected type. If the check fails a `TypeError` will be thrown.
 * The `name` option may be used to change how the error message refers to the value.
 * If the given value is of the expected type the function will simply return the value. In TypeScript
 * files and some JavaScript editors the IDE will recognize the return value as being of the expected
 * type.
 * Some values will never pass the check regardless of given type: `NaN`, `Infinity`, `-Infinity` and
 * any boxed primitive. The values `null` and `undefined` will pass only if the `nullable` option is
 * explicitly set to true.
 * @param value The value to check the type of.
 * @param type The constructor function (class) of the expected type. May also be a subclass. Primitive types are represented by their respective boxed type constructors `String`, `Number` and `Boolean`.
 * @param options
 */
export function checkType(value: any, type: BaseConstructor<Boolean>, options?: {name?: string, nullable?: boolean}): boolean;

/**
 * Checks that the given value is of the expected type. If the check fails a `TypeError` will be thrown.
 * The `name` option may be used to change how the error message refers to the value.
 * If the given value is of the expected type the function will simply return the value. In TypeScript
 * files and some JavaScript editors the IDE will recognize the return value as being of the expected
 * type.
 * Some values will never pass the check regardless of given type: `NaN`, `Infinity`, `-Infinity` and
 * any boxed primitive. The values `null` and `undefined` will pass only if the `nullable` option is
 * explicitly set to true.
 * @param value The value to check the type of.
 * @param type The constructor function (class) of the expected type. May also be a subclass. Primitive types are represented by their respective boxed type constructors `String`, `Number` and `Boolean`.
 * @param options
 */
export function checkType<T>(value: any, type: BaseConstructor<T>, options?: {name?: string, nullable?: boolean}): T;

/**
 * Checks that the given value is of the expected type. If the check fails a `TypeError` will be thrown.
 * If the value is of the expected type the given callback will be called (synchronously) with the
 * checked value as the only argument. In TypeScript files and some JavaScript editors the IDE will
 * recognize that argument being of the expected type.
 * Some values will never pass the check regardless of given type: `NaN`, `Infinity`, `-Infinity`, boxed
 * primitives, `null` and `undefined`.
 * @param value The value to check the type of.
 * @param type The constructor function (class) of the expected type. May also be a subclass. Primitive types are represented by their respective boxed type constructors `String`, `Number` and `Boolean`.
 * @param callback A callback called with the value if it is of the expected type.
 */
export function checkType(value: any, type: BaseConstructor<String>, callback: ((value:string) => any)): void;

/**
 * Checks that the given value is of the expected type. If the check fails a `TypeError` will be thrown.
 * If the value is of the expected type the given callback will be called (synchronously) with the
 * checked value as the only argument. In TypeScript files and some JavaScript editors the IDE will
 * recognize that argument being of the expected type.
 * Some values will never pass the check regardless of given type: `NaN`, `Infinity`, `-Infinity`, boxed
 * primitives, `null` and `undefined`.
 * @param value The value to check the type of.
 * @param type The constructor function (class) of the expected type. May also be a subclass. Primitive types are represented by their respective boxed type constructors `String`, `Number` and `Boolean`.
 * @param callback A callback called with the value if it is of the expected type.
 */
export function checkType(value: any, type: BaseConstructor<Number>, callback: ((value:number) => any)): void;

/**
 * Checks that the given value is of the expected type. If the check fails a `TypeError` will be thrown.
 * If the value is of the expected type the given callback will be called (synchronously) with the
 * checked value as the only argument. In TypeScript files and some JavaScript editors the IDE will
 * recognize that argument being of the expected type.
 * Some values will never pass the check regardless of given type: `NaN`, `Infinity`, `-Infinity`, boxed
 * primitives, `null` and `undefined`.
 * @param value The value to check the type of.
 * @param type The constructor function (class) of the expected type. May also be a subclass. Primitive types are represented by their respective boxed type constructors `String`, `Number` and `Boolean`.
 * @param callback A callback called with the value if it is of the expected type.
 */
export function checkType(value: any, type: BaseConstructor<Boolean>, callback: ((value:boolean) => any)): void;

/**
 * Checks that the given value is of the expected type. If the check fails a `TypeError` will be thrown.
 * If the value is of the expected type the given callback will be called (synchronously) with the
 * checked value as the only argument. In TypeScript files and some JavaScript editors the IDE will
 * recognize that argument being of the expected type.
 * Some values will never pass the check regardless of given type: `NaN`, `Infinity`, `-Infinity`, boxed
 * primitives, `null` and `undefined`.
 * @param value The value to check the type of.
 * @param type The constructor function (class) of the expected type. May also be a subclass. Primitive types are represented by their respective boxed type constructors `String`, `Number` and `Boolean`.
 * @param callback A callback called with the value if it is of the expected type.
 */
export function checkType<T>(value: any, type: BaseConstructor<T>, callback: ((value:T) => any)): void;

/**
 * Formats the given value(s) in the same manner the [console](./Console.md) does.
 * @param data
 */
export function format(...data: any[]): string;

/**
 * Formats the given value(s) in the same manner the [console](./Console.md) does.
 * The any placeholders in the message are replaced by the additional data parameters. Valid
 * placeholders are "%d" for decimals, "%i" for integers, "%f" for floats, "%j" for any number, "%j" for
 * any objects (including arrays) and "%s" for strings. To print the percentage sign itself use "%%".
 * @param message The main message.
 * @param data Data to be inserted in to the main message.
 */
export function format(message: string, ...data: any[]): string;