seatyjs/dist/seatyjs.bundle.d.ts

Event seating interactive map component. Dynamically loads the SVG event map and renders available seats on it

// Generated by dts-bundle v0.7.3
// Dependencies for this module:
//   ../backbone
//   ../when
//   ../svg.js
//   ../leaflet

import * as Backbone from 'backbone';
import * as When from 'when';
import * as SVG from 'svg.js';
import { Element as SVGElement } from 'svg.js';
import * as L from 'leaflet';
import { Doc as SVGDoc } from 'svg.js';

/**
    * The id of the DOM element, that will contain the SVG Document element (a must for svg.js)
    * Normally this element should be a hidden <div>
    */
export let SVG_DOC_ROOT_ID: string;
export const MIN_MAP_ZOOM = 0, MAX_MAP_ZOOM = 3, DEFAULT_MAP_ZOOM = 1, 
/**
    * The width of the stroke in pixels on seats that has the ticket type attributes with stroke defined
    * @type {number}
    */
SEAT_STROKE_WIDTH = 3, 
/**
    * The opacity of the stroke above
    * @type {number}
    */
SEAT_STROKE_OPACITY = 1, 
/**
    * The opacity of checked seat
    * @type {number}
    */
SEAT_CHECKED_OPACITY = 1, 
/**
    * The opacity of unchecked seat
    * @type {number}
    */
SEAT_UNCHECKED_OPACITY = 0.2, 
/**
    * This coefficient describes the visual ratio of seat enlargement when it is being hovered by mouse
    * @type {number}
    */
ON_HOVER_SEAT_ENLARGE = 1.3, 
/**
    * Defauting currency to Ukrainian Hryvnia
    * @type {string}
    */
DEFAULT_CURRENCY = "UAH";
/**
    * @class Seaty
    * Main module class, defines generic constants
    */
export class Map {
        readonly eventId: string | number;
        readonly rootTierId: string | number;
        mapper: IMetadataMapper;
        /**
            * References the container view, that is the main view controller of the seating plan
            */
        containerView: ContainerView;
        /**
            * Main application entry point
            * @param config
            */
        constructor(config: ISeatyConfig);
        /**
            * Destructor method. Cleans up internal data, event listeners DOM and data bindings
            */
        destroy(): void;
        /**
            * Updates given seat with the new status
            * @param seatId
            * @param newStatusId
            * @see SEAT_STATUS_ID
            */
        updateSeatStatus(seatId: string | number, newStatusId: number): boolean;
        /**
            * Sets the new ticket type to given seat and returns true if the seat was found and set
            * @param {string | number} seatId
            * @param {number} newTicketTypeId
            * @return {boolean}
            */
        updateSeatTicketType(seatId: string | number, newTicketTypeId: number): boolean;
        /**
            * Sets the new ticket type to given fan zone and returns true if the seat was found and set
            * @param {string | number} fanZoneId
            * @param {string | number | null} newTicketTypeId Should the Fan Zone valuation be void pass `null` as a value
            * @param {string} newTitle Sets the FanZone's new title (optional)
            * @return {boolean}
            */
        updateFanZoneTicketType(fanZoneId: string | number, newTicketTypeId: number | string | null, newTitle?: string): boolean;
        /**
            * Adds a new ticket type to metadata collection
            * @param {ITicketTypeRawModel} rawTicketType
            * @return TicketTypeModel
            */
        addTicketType(rawTicketType: ITicketTypeRawModel): TicketTypeModel;
        /**
            * Finds and returns ticket type model by its id, otherwise returns undefined
            * @return TicketTypeModel | undefined
            */
        updateTicketTypeModel(id: string | number, ...props: Array<{
                [key: string]: string;
        }>): TicketTypeModel | undefined;
        /**
            * Finds and returns a seat model by its id within the collection of tiers
            * Returns undefined if no seat model was found
            * @param seatId
            */
        findSeatModel(seatId: string | number): SeatElementModel | undefined;
        /**
            * Finds and returns a fan zone model by its id within the collection of tiers
            * Returns undefined if no fan zone model was found
            * @param fanZoneId
            */
        findFanZoneModel(fanZoneId: string | number): FanZoneModel | undefined;
        /**
            * Looks up the metadata collection for a seat model with given attributes and returns the model
            * Returns undefined if no seat model was found
            * @param seat
            * @param row
            * @param sectorName
            * @return {SeatElementModel}
            */
        findSeatModelByAttributes(seat: string | number, row: string | number, sectorName: string): SeatElementModel | undefined;
        /**
            * Finds all models by given ticket type and returns it as an Array
            * @param ticketTypeId ticket type to find seats by
            */
        findSeatModelsByTicketType(ticketTypeId: string | number): SeatElementModel[];
}

/**
    * Interface for the initial configuration of the SeatingPlanBuilder class
    */
export interface ISeatyConfig {
        /**
            * The id of the DOM container element or the reference to the DOM Element seating plan should be attached to
            */
        seatyContainer: string | HTMLElement;
        /**
            * The id of the current event. Must be specified to get the metadata from the backend
            */
        eventId: string | number;
        /**
            * The id of the SVG tier we're getting from the backend
            */
        rootTierId: string | number;
        /**
            * Metadata mapper, used to translate metadata from raw API response
            */
        metadataMapper: IMetadataMapper;
        /**
            * Service that loads all needed data for the tier to display
            */
        tierDataProvider: ITierDataProvider;
        /**
            * The optional DOM container id of the seating plan legend
            */
        legendContainerElementEl?: string | HTMLElement;
        /**
            * The optional id of the DOM container, that will be used as a loader during the plan loading and processing
            */
        loaderIndicatorElementEl?: string | HTMLElement;
        /**
            * The optional loader component that show 'please wait' during map loading and processing
            */
        loaderComponent?: ILoaderComponent;
        /**
            * The optional legend component for the seating map
            */
        legendComponent?: ILegendComponent;
        /**
            * Mediator acts as a gateway, that transits events between SeatyJS and outer objects
            * and provides references to extra services like hints
            * @see IMediatorService
            */
        mediatorService: IMediatorService;
        /**
            * If this value will be passed, it will be used as a root DOM element for all svg.js operations with SVG images
            * Most probably you will want this element to have 'display: none' set
            * If this property is omitted default 'svg-doc-root' id of the DOM element will be used
            */
        svgDocRootId?: string;
}

export const SEAT_STATUS_ID: {
    undefined: number;
    available: number;
    inCart: number;
    sold: number;
    reserved: number;
    outToRetail: number;
    paymentPending: number;
    booked: number;
};
export let METADATA_DICTIONARY: IDictionary;
/**
  * Describes possible values for ZoneType inside FanZone model
  */
export enum FanZoneType {
    fanZone = 1,
    box = 6,
    table = 7
}

/**
    * @class HintView
    * @extends Backbone.View
    * @implements IHintComponent
    * Class describes the default behavior of a map element hint view, that floats beside the mouse pointer
    */
export class HintComponent extends Backbone.View<any> implements IHintComponent {
        /**
            * Initializes the view upon creation
            * Called automatically from constructor()
            * @param options
            */
        initialize(options?: Backbone.ViewOptions<any>): void;
        /**
            * Checks whether the DOM element exists and creates one if not
            * @return {HintComponent}
            */
        render(): HintComponent;
        /**
            * Sets the position of the hintView element to the given coordinates in pixels,
            * adding hintView's offsetX and offsetY
            * @param x
            * @param y
            * @returns {HintView}
            */
        setPosition(x: number, y: number): IHintComponent;
        /**
            * Set's hint's innerHTML with the given contents
            * @param content
            */
        setContent(content: string): IHintComponent;
        /**
            * @inheritDoc
            */
        show(): IHintComponent;
        /**
            * @inheritDoc
            */
        hide(): IHintComponent;
}

/**
    * @interface IHintView
    * Interface describes a hintView view object, displaying hints on a SeatyJS map
    */
export interface IHintComponent {
        /**
            * Called upon insertion of the hint to the SeatyJS map
            * @param map
            */
        onAdd?(map: Map): void;
        /**
            * Displays the hintView view
            */
        show(): IHintComponent;
        /**
            * Hides the hintView view
            */
        hide(): IHintComponent;
        /**
            * Sets hintView view's screen position to given screen coordinates
            * @param x
            * @param y
            */
        setPosition(x: number, y: number): IHintComponent;
        /**
            * Sets hintView's content
            * @param content
            */
        setContent(content: string): IHintComponent;
}

/**
    * @class LegendComponent
    * @implements ILegendComponent
    * Component for map legend for SeatyJS
    */
export class LegendComponent implements ILegendComponent {
        language: LanguageCode;
        readonly showStatusCheckboxes?: boolean;
        constructor(language: LanguageCode, showStatusCheckboxes?: boolean);
        /**
            * @inheritDoc
            */
        onAdd(map: Map): ILegendComponent;
        /**
            * @inheritDoc
            */
        getControl(): L.Control;
        /**
            * @inheritDoc
            */
        updateLegend(metadataContainer: MetadataContainer): void;
        /**
            * Returns HTML that represents the view for visible ticket types
            * @param metadataContainer
            * @return {string}
            */
        protected getTicketTypesHTML(metadataContainer: MetadataContainer): string;
        /**
            * Returns HTML that represents the view for visible seat statuses
            * @param metadataContainer
            * @return {string}
            */
        protected getVisibleSeatStatusesHTML(metadataContainer: MetadataContainer): string;
        /**
            * Returns true if given ticket type is present in supplied containers of fan zones or seats.
            * Fan zone must be active and seats status must be visible for it to return true.
            * @param ticketTypeId
            * @param metadataContainer
            * @return {boolean}
            */
        protected isTicketTypePresentInContainer(ticketTypeId: string, metadataContainer: MetadataContainer): boolean;
}

/**
    * @interface ILegendComponent
    * Describes an object displaying legend on the map
    */
export interface ILegendComponent {
        /**
            * Called from the constructor of the Map object
            * @param map
            */
        onAdd(map: Map): ILegendComponent;
        /**
            * Returns instance of L.Control that will be inserted into the map
            */
        getControl(): L.Control;
        /**
            * Called from the Map upon a successful tier load with metadata received
            * @param metadataContainer
            */
        updateLegend(metadataContainer: MetadataContainer): void;
}

/**
  * @class LoaderComponent
  * @implements ILoaderComponent
  * Simple loader that is used to display background activity to user
  */
export class LoaderComponent extends ElementBaseView<any> implements ILoaderComponent {
    className: string;
    constructor(containerId: string, className?: string);
    onAdd(map: Map): void;
}

/**
    * @interface ILoaderComponent
    * Describes component that displays the 'please wait'-like messages to user, during long operations
    */
export interface ILoaderComponent {
        /**
            * Called from the constructor of the Map object
            * @param map
            */
        onAdd?(map: Map): void;
        /**
            * Displays the 'please wait' message
            * @return Returns this
            */
        show(): ILoaderComponent;
        /**
            * Hides the 'please wait' message
            * @return Returns this
            */
        hide(): ILoaderComponent;
}

/**
    * @class VTicketAttributeMapper
    * @implements IAttributeMapper
    *
    * Class that maps raw attributes received from the API to internal attribute names
    * using the supplied dictionary
    */
export class AttributeMapper implements IAttributeMapper {
        constructor(dictionary: IDictionary);
        /**
            * Updates all metadata values
            */
        sync(): void;
        /**
            * @inheritDoc
            */
        getDictionary(): Object;
}

/**
    * @interface IAttributeMapper
    * Describes an object used to map metadata attributes from raw API response to internal structure naming
    */
export interface IAttributeMapper {
        /**
            * Returns a key:value dictionary to translate the raw metadata to internal structure
            */
        getDictionary(): Object;
}

export class CssEmbedFactory {
    static create(metadataContainer: MetadataContainer): CssEmbedService;
}

/**
    * @class CssHelperService
    * Helper class, has various CSS related methods
    */
export class CssEmbedService {
        /**
            * Adds a new CSS rule to the style buffer
            * You will need to finish off the style creation with cssClassBlockEnd()
            * to flush the buffer into the DOM
            * @param name Name of the new class, including '.' or other precursor
            * @param rules Rules for the new class, ending with semicolon ';'
            */
        static cssClassBlockAdd(name: string, rules: string): void;
        /**
            * Begins the CSS style block in <head> part of the DOM or in the past container
            * @param container
            * @param append
            */
        static cssClassBlockBegin(container?: HTMLStyleElement, append?: boolean): void;
        /**
            * Flushes the CSS buffer to the DOM
            */
        static cssClassBlockEnd(): HTMLStyleElement;
        static getCssTicketTypeRenderer(): (model: TicketTypeModel, styleEl: HTMLStyleElement) => HTMLStyleElement;
        /**
            * Creates all CSS classes needed to display the leaflet
            * @param metadataContainer
            */
        constructor(metadataContainer: MetadataContainer);
        /**
            * Adds global CSS from the mapper to the DOM
            * @public
            * @assets
            */
        applyGlobalCssStyles(): void;
        addOpacityToSeatStatuses(seatStatusesVisibility: SeatStatusVisibilityInterface[]): void;
        /**
            * Processes this.ticketTypeCollection, creating css styles from it
            * @protected
            */
        protected createCssFromTicketTypes(): void;
        /**
            * Processes this.seatStatusCollection, creating CSS styles from it
            * @protected
            */
        protected createCssFromSeatStatuses(seatStatusesVisibility?: SeatStatusVisibilityInterface[]): void;
        /**
            * Processes this.sectorMetadataCollection, creating CSS styles from it
            * @protected
            */
        protected createCssFromSectorIds(): void;
}

/**
    * @interface IHintTextProvider
    * Defines an interface for an object that provides texts for HintComponent of a SeatyJS leaflet
    */
export interface IHintTextProvider {
        /**
            * Returns text for floating hint
            * @param metadataModel
            */
        getHintText(metadataModel: AbstractMetadataModel): string;
}

/**
    * @interface IMediatorService
    * Describes an object tha mediates on actions and data between SeatyJS internals and outer components
    */
export interface IMediatorService {
        /**
            * Floating hint view
            * @see IHintComponent
            */
        hintView?: IHintComponent;
        /**
            * Text provider for the floating hint view above
            * @see IHintTextProvider
            */
        hintTextProvider?: IHintTextProvider;
        /**
            * This method is being called once by SeatyJS upon construction
            * @param map
            */
        onAdd(map: Map): void;
        /**
            * Destroys all internal data structures, preventing memory leaks
            */
        destroy(): void;
        /**
            * Action called upon every valid leaflet element click or tap
            * @param {AbstractPlanElementView<AbstractMetadataModel>} element
            */
        onElementClick(element: AbstractPlanElementView<AbstractMetadataModel>): void;
        /**
            * Action called upon every tier load success event
            * @param tier
            */
        onTierLoadSuccess(tier: TierModel): void;
        /**
            * Action called upon any tier image and/or metadata loading error
            * @param error
            */
        onTierLoadError(error: any): void;
        /**
            * An optional helper method that returns localized text description for given seatId
            * i.e. "Sector 4, row 5, seat 17"
            * @param seatId
            * @param language
            */
        getSeatTextDescription?(seatId: string, language: LanguageCode): string;
}

/**
    * @interface IMetadataMapper
    * Interface for a metadata mapper object, used to adapt raw metadata received from API
    * to our internal structure
    */
export interface IMetadataMapper {
        /**
            * Object, containing seat statuses options
            * Defines which seat statuses should be displayed and options for them
            */
        seatStatusOpts: ISeatStatusOptsStorage;
        /**
            * Reference to an object that handles all rendering peculiarities
            * @see IRenderHook
            */
        renderHook: IRenderHook;
        /**
            * Mapper method, that receives an object with key:value pairs,
            * where values are fan zones and keys are their ids and converts it
            * to an Array, adding original object keys as 'id' property to every
            * object.
            * @param rawData Source object with ticket types
            * @returns {Object[]} Returns Array of objects to feed to collection constructor
            */
        mapFanZoneMetadata(rawData: any): Array<Object>;
        /**
            * Prepares an arrays of object to SeatMetadataCollection instantiation.
            * We need to repack the internal object into an Array to be able to instantiate
            * the collection with it.
            * @param rawData Source object of objects with seat metadata
            * @returns {Object[]} Returns Array of objects to feed to collection constructor
            */
        mapSeatMetadata(rawData: any): Array<Object>;
        /**
            * Prepares an array of objects to SeatStatusCollection instantiation, adding 'id' property to objects,
            * using the cStatusObj global constant and the 'mapper' as a dictionaries
            * @param rawData Array of objects that will form models upon collection initialization
            * @returns {Object[]} Returns Array of objects to feed to collection constructor
            */
        mapSeatStatuses(rawData: any): Array<Object>;
        /**
            * Prepares an array of objects to SectorContentCollection instantiation.
            * Every model here will consist of two attributes:
            * 'id' attribute, which needs no explanation and is equal to respectful sector id
            * 'content' attribute, which will contain an array of objects describing the sector content
            * @param rawData
            * @returns {Object[]}
            */
        mapSectorContent(rawData: any): Array<Object>;
        /**
            * Prepares an arrays of object to SectorMetadataCollection instantiation.
            * We need to repack the internal object into an Array to be able to instantiate
            * the collection with it.
            * @param rawData Source object of objects with sector metadata
            * @returns {Object[]} Returns Array of objects to feed to collection constructor
            */
        mapSectorMetadata(rawData: any): Array<Object>;
        /**
            * Mapper method, that receives an object with key:value pairs,
            * where values are ticket types and keys are their ids and flattens it to an Array,
            * adding keys as 'id' field to every ticket type object.
            * It also synthesizes the css class names to the 'class' attribute.
            * @param rawData Source object with ticket types
            * @returns {Object[]} Returns Array of objects to feed to collection constructor
            */
        mapTicketTypes(rawData: any): Array<Object>;
}

export interface IMetadataTransport {
    /**
      * Asynchronously loads raw metadata object, using given params
      * @param {string} eventId id of the event
      * @param {string} rootTier id of the root tier of the event map (event scheme)
      * @param {string} nestedTier optional id of the nested tier, if we're loading the nested tier
      */
    loadMetadata(eventId: string | number, rootTier: string | number, nestedTier?: string): When.Promise<Object>;
}

export interface IRenderHook {
        /**
            * This dummy method should be replaced with a sector name processor
            * Typically it trims the name by the colon sign (':')
            * @param sectorName Name of the sector to process
            * @returns {string} Returns processed sector name
            */
        trimSectorName(sectorName: string): string;
        /**
            * This dummy function should be replaced with a sector constructor
            * It should mock a string that identifies a row in an SVG.
            * Something like 'sector-1:row-2' is a typical example.
            * @param sectorName Name of sector, used for construction
            * @param seatContainer Name of the row. Normally this is just 'row', but there're special cases, i.e. 'box'
            * @param rowNumber Number of row
            * @returns {string} Returns row names
            */
        rowNameConstructor(sectorName: string, seatContainer: string, rowNumber: string): string;
        /**
            * Passes the container of the sear to the given handler, that should extract the seat itself if needed
            * @param seatContainer The outer container that has the nested elements
            * @returns {SVG.Element} Returns the seat part only
            * @see IRenderHook
            */
        extractSeatSvgElement(seatContainer: SVG.Element): SVG.Element;
        /**
            * Pre-processes the seat's SVG element before further processing by the view
            * @param seatView
            */
        seatWillRender?(seatView: SeatElementView): void;
        /**
            * Post-processes the seat's SVG element before further processing by the view
            * @param seatView
            */
        seatDidRender?(seatView: SeatElementView): void;
        /**
            * Pre-processes the seat's SVG element before further processing by the view
            * @param fanZoneView
            */
        fanZoneWillRender?(fanZoneView: FanZoneView): void;
        /**
            * Post-processes the seat's SVG element before further processing by the view
            * @param fanZoneView
            */
        fanZoneDidRender?(fanZoneView: FanZoneView): void;
        /**
            * Pre-processes the seat's SVG element before further processing by the view
            * @param sectorView
            */
        sectorWillRender?(sectorView: SectorView): void;
        /**
            * Post-processes the seat's SVG element before further processing by the view
            * @param sectorView
            */
        sectorDidRender?(sectorView: SectorView): void;
        /**
            * Returns an array of global CSS styles for SVG plan
            * @returns {ICssStyleRule[]}
            */
        getGlobalCssStyles(): ICssStyleRule[];
        /**
            * Returns the CSS class name composed from the ticket type id
            * @param id
            * @returns {string}
            */
        getTicketTypeCssClassName(id: string): string;
        /**
            * Forms the CSS class name getting the status name by given attribute
            * @param status The status name
            * @returns {string} Return CSS class name (without a starting '.')
            */
        getSeatStatusCssClassName(status: string): string;
        /**
            * Forms the CSS class name from the sector id
            * @param sectorId
            * @returns {string} Return CSS class name (without a starting '.')
            */
        getSectorCssClassName(sectorId: string): string;
        /**
            * Returns the CSS class name composed from the ticket type id
            * @param id
            * @returns {string}
            */
        getTicketTypeCssClassName(id: string): string;
        /**
            * Forms the CSS class name getting the status name by given attribute
            * @param status The status name
            * @returns {string} Return CSS class name (without a starting '.')
            */
        getSeatStatusCssClassName(status: string): string;
        /**
            * Forms the CSS class name from the sector id
            * @param sectorId
            * @returns {string} Return CSS class name (without a starting '.')
            */
        getSectorCssClassName(sectorId: string): string;
}

/**
  * @interface ISeatStatusOptsObject
  * describes an object that contains display options for all possible seat statuses
  *
  * @see ISeatStatusDisplayOptions
  */
export interface ISeatStatusOptsStorage {
    getSeatStatusCursorStyle(statusId: number): string | Array<string>;
    getSeatStatusVisibility(statusId: number | string): boolean;
}

export interface ISvgTransport {
    /**
      * Asynchronously loads SVG image, using given SVG tier id
      * @param {string} rootTierId optional parameter, if the tier is a nested one,
      * specify the root tier's id here
      * @param nestedTierId
      */
    loadImage(rootTierId: string | number, nestedTierId?: string | number): When.Promise<string>;
}

/**
  * @interface ITierDataProvider
  * Defines interface that loads the leaflet tier's SVG image and its data, using the tier id
  *
  * @see TierModel
  */
export interface ITierDataProvider {
    getTierData(tierId: string | number): When.Promise<TierModel>;
}

export class TierPainterFactory {
    /**
      * Creates and returns tier painter object, that automatically paints the given tier image with metadata
      * @param tier
      * @param mediatorService
      * @return {TierPainterService}
      */
    static create(tier: TierModel, mediatorService: IMediatorService): TierPainterService;
}

/**
    * @class TierPainterService
    * Utility class that paints a tier image with the supplied metadata
    *
    * Please use via factory:
    * @see TierPainterServiceFactory.create()
    */
export class TierPainterService {
        /**
            * @constructor
            * Doest all jobs of the class
            * @param tier
            * @param mediatorService
            */
        constructor(tier: TierModel, mediatorService: IMediatorService);
        /**
            * Paints the whole tier with given metadata, including seats, fan-zones and sectors
            * @protected
            */
        protected paintSeats(): void;
        /**
            * Paints all fan zones of the tier, using data from given metadata
            * @protected
            */
        protected paintFanZones(): void;
        /**
            * Paints all sectors of the tier, using data from given metadata
            * @protected
            */
        protected paintSectors(): void;
        /**
            * Looks up the supplied element container for the element that has specified text in itself
            * or one of its children. Then if the RenderHook object is present, pass the element through it.
            * @param elementCont SVG.Element container to look up
            * @param text The search string
            * @returns {SVG.Element} Returns SVG.Element which contains the text or null if none found
            */
        protected findElementByTextContent(elementCont: SVG.Element, text: string): SVG.Element;
}

/**
    * The base class for all components of the seating plan, such as seats, fan-zones, etc
    */
export abstract class AbstractPlanElementView<TModel extends AbstractMetadataModel> extends ElementBaseView<TModel> {
        /**
            * Reference to mediator service, that contains action gateway and references to hint view
            */
        readonly mediatorService: IMediatorService;
        model: TModel;
        el: SVGElement;
        /**
            * This property will be true if the element has been rendered on screen at least once
            * @type {boolean}
            */
        rendered: boolean;
        /**
            * Property indicating if the view has been rendered.
            * 'True' if the view has been rendered to a visible state
            * 'False' if the view has been rendered to a hidden state (the element is rendered to a 'default' state)
            * @type {boolean}
            */
        visible: boolean;
        constructor(
        /**
            * Reference to mediator service, that contains action gateway and references to hint view
            */
        mediatorService: IMediatorService, viewOptions?: Backbone.ViewOptions<TModel>);
        /**
            * Initialize is being called at the last stage from the class constructor
            * @param options
            */
        initialize(options?: Backbone.ViewOptions<TModel>): void;
        /**
            * Renders the seat element according to its current status defined in the bind model
            * By default this method is not being called by constructor or initializer
            * @returns {SeatElementView} Returns the seat element object for chained calls
            */
        render(): AbstractPlanElementView<TModel>;
        /**
            * This method defines if the element should be displayed (painted) or not
            * @returns {boolean}
            */
        protected shouldDisplay(): boolean;
        /**
            * Stab for method that adds needed CSS classes to the view
            */
        protected addCssClasses(): void;
        /**
            * This stab is for adding default CSS styles in case we've removed any useful CSS styles from the element
            */
        protected addCssDefaults(): void;
        /**
            * Removes all CSS classes from the view
            */
        protected resetCssClasses(): void;
        /**
            * Pre-render life-cycle hook
            * Called as the first step in render()
            */
        protected elementWillRender(): void;
        /**
            * Post-render life-cycle hook
            * Called at the last step in render()
            */
        protected elementDidRender(): void;
        /**
            * Sets view handler that is called upon a model change
            */
        protected listenToModel(): void;
        /**
            * Removes the model listener from the view
            */
        protected stopListenToModel(): void;
        /**
            * This action is being executed upon a click or tap on a concrete element
            */
        actionClick(event: MouseEvent): void;
        /**
            * Attaches all needed event handlers to the view
            */
        protected attachEventHandlers(): void;
        /**
            * Detaches all registered event handlers from the view
            */
        protected detachEventHandlers(): void;
        /**
            * Invoked upon a mouseover event on the view
            * @param {MouseEvent} event
            */
        protected actionMouseOver(event: MouseEvent): void;
        /**
            * This action is being called upon a mouseover event on this view
            * @param event
            */
        protected actionMouseMove(event: MouseEvent): void;
        /**
            * This action is being called upon a mouseout event on this view
            * @param event
            */
        protected actionMouseOut(event: MouseEvent): void;
        protected animateMouseMove(event: MouseEvent): void;
        protected animateMouseOver(event: MouseEvent): void;
        protected animateMouseOut(event: MouseEvent): void;
        /**
            * Returns metadata container
            * @returns {MetadataContainer}
            */
        protected getMetadataContainer(): MetadataContainer;
        /**
            * Returns the metadata mapper bind to model's collection
            * @returns {IMetadataMapper}
            */
        protected getMapper(): IMetadataMapper;
        /**
            * Returns the attribute value of bind model, using its collection's mapper
            * to translate the attribute name if the mapper exists.
            * @param attrName The name of the attribute to get from model
            * @returns {any} Returns the value of the attribute
            */
        protected getFromModel(attrName: string): string;
}

export type LatLngBounds = L.LatLngBounds;
export type LatLng = L.LatLng;
export type Point = L.Point;
/**
    * @class ContainerView
    * @extends ElementBaseView
    * This is a view for the container, that contains one or more TierView
    */
export class ContainerView extends ElementBaseView<Backbone.Model> {
        tierDataProvider: ITierDataProvider;
        mapper: IMetadataMapper;
        mediatorService: IMediatorService;
        legendComponent: ILegendComponent;
        loaderComponent: ILoaderComponent;
        tierCollection: SimpleCollection<TierModel>;
        protected svgRoot: SVG.Doc;
        leaflet: L.Map;
        constructor(tierDataProvider: ITierDataProvider, mapper: IMetadataMapper, mediatorService: IMediatorService, legendComponent: ILegendComponent, loaderComponent: ILoaderComponent, options?: Backbone.ViewOptions<Backbone.Model>);
        /**
            * Destructor method
            */
        destroy(): void;
        /**
            * Default initializer method, called from inside constructor()
            * @param options
            */
        initialize(options?: Backbone.ViewOptions<Backbone.Model>): void;
        /**
            * Used to switch leaflet to another layer
            * If given layer is not yet loaded, we're loading it with loadTier()
            * If optional zoomTo parameter is given the view will zoom to the new tier to this coordinates
            * @param tierId
            * @param zoomTo
            * @return (When.Promise<boolean>) Returns boolean promise, which will resolves to true if the load was successful
            */
        switchToTier(tierId: string | number, zoomTo?: LatLngBounds): When.Promise<boolean>;
        /**
            * A wrapper for the switchToTier() to be called from Backbone.trigger()
            * If we have a second argument passed along, we're doing a zoom-in to the new tier
            * @param args
            * @public
            * @see switchToTier()
            */
        triggerTierSwitch(args: Array<any>): void;
        /**
            * Error handler for errors related to tier loading
            * @public
            */
        onTierLoadError(error: any): void;
        /**
            * Switches leaflet to tier that was displayed prior the current nested tier
            * @public
            */
        onBackFromNestedTier(): void;
        /**
            * Renders all visible nested SeatPlanTierViews
            * @returns {ContainerView} Returns this
            */
        render(): ContainerView;
        /**
            * Sets container size to the specified width and height.
            * If height is not specified, it is set equal to width.
            * @param width Should include units (e.g. '%' or 'px')
            * @param height can be omitted
            * @public
            */
        setSizeTo(width: string, height?: string): void;
        /**
            * Sets parent DOM element's size to 100% width and height
            * @public
            */
        adaptToParentSize(): void;
        /**
            * Fits the leaflet to given bounds
            * @param bounds
            * @param options
            * @public
            */
        fitMapToBounds(bounds: LatLngBoundsExpression, options?: L.FitBoundsOptions): void;
        /**
            * Returns size of current leaflet in pixels
            * @return {any}
            * @public
            */
        getMapSize(): Point;
        /**
            * Sends show() message to an optional ILoaderComponent
            */
        showLoader(): void;
        /**
            * Sends hide() message to an optional ILoaderComponent
            */
        hideLoader(): void;
        /**
            * Converts on-screen point to an on-leaflet Lat-Long coordinate
            * @return {LatLngBounds}
            * @param x
            * @param y
            */
        screenPointToLatLng(x: number, y: number): LatLng;
        /**
            * Converts on-screen rectangle to an on-leaflet Lat-Long bounds rectangle
            * @param rect
            * @return {LatLngBounds}
            */
        screenRectToLatLngBounds(rect: ClientRect): LatLngBounds;
        /**
            * Triggers a redraw of Legend Control if one is present
            */
        redrawLegend(): void;
        /**
            * Adds the given layer to the leaflet
            * @param {TierModel} tier
            * @param presetBounds
            * @protected
            */
        protected addTierToMap(tier: TierModel, presetBounds?: LatLngBoundsExpression): void;
        /**
            * Removes given tier from leaflet
            * @param tier
            * @protected
            */
        protected removeTierFromMap(tier: TierModel): void;
        /**
            * Initializes LeafletJS leaflet view
            * @protected
            */
        protected initializeMap(): void;
        /**
            * Registers listeners, that handle all leaflet events
            * @protected
            */
        protected registerListeners(): void;
        /**
            * Un registers listeners, handling all leaflet events
            * @protected
            */
        protected unRegisterListeners(): void;
}

/**
  * Base class that has common properties and methods for all derived views
  */
export abstract class ElementBaseView<TModel extends Backbone.Model> extends Backbone.View<TModel> {
    get display(): boolean;
    set display(visible: boolean);
    show(): ElementBaseView<TModel>;
    hide(): ElementBaseView<TModel>;
}

/**
    * @class FanZoneView
    * @extends AbstractPlanElementView
    * Represents a view controller for the fan zones inside event leaflet
    */
export class FanZoneView extends AbstractPlanElementView<FanZoneModel> {
        /**
            * @inheritDoc
            */
        protected shouldDisplay(): boolean;
        /**
            * @inheritDoc
            */
        protected addCssClasses(): void;
        /**
            * Returns the name of the ticket type CSS class for this.model
            * @returns {string}
            */
        protected getTicketTypeCssClassFromModel(): string;
        /**
            * @inheritDoc
            */
        protected elementWillRender(): void;
        /**
            * @inheritDoc
            */
        protected elementDidRender(): void;
}

/**
    * @class LayerBackControl
    * @extends L.Control
    * Back button class for the Leaflet leaflet
    */
export class LayerBackControl extends L.Control {
        /**
            * Constructs the control
            * @param map Map to add control to
            * @param handler Function that will handle clicks
            */
        constructor(map: L.Map, handler: () => void);
        /**
            * Initializes the control, called automatically from the constructor()
            * @param map
            * @param options
            */
        initialize(map: L.Map, options?: Object): void;
        /**
            * Called upon the control being added to a leaflet
            * @param map
            * @return {any|_Chain<T>|HTMLImageElement|string|TModel|HTMLOptionElement}
            */
        onAdd(map: L.Map): HTMLElement;
}

/**
  * @class LayerResetControl
  * @extends L.Control
  * Layer reset button for Leaflet leaflet
  */
export class LayerResetControl extends L.Control {
    initialize(map: L.Map, options?: Object): void;
    onAdd(map: L.Map): HTMLElement;
}

/**
    * @class LegendControl
    * @extends L.Control
    * A flexible LeafletJS control designed to host a map legend
    */
export class LegendControl extends L.Control {
        seatStatusesVisibility: SeatStatusVisibilityInterface[];
        constructor(title: string, map: L.Map, options?: Object);
        initialize(map: L.Map, options?: Object): void;
        /**
            * @param map
            * @returns {HTMLElement}
            */
        onAdd(map: L.Map): HTMLElement;
        setTicketTypesContent(content: string): void;
        setSeatStatusesContent(content: string): void;
        setSeatStatusesListeners(metadataContainer: MetadataContainer): void;
        redrawSeatStatuses(): void;
        addOpacityToSeatStatuses(element: HTMLInputElement): void;
        get seatStatusesCheckboxes(): HTMLInputElement[];
}

/**
    * @class SeatElementView
    * @extends AbstractPlanElementView
    * The view controller that describes the behaviour behind a seat element
    */
export class SeatElementView extends AbstractPlanElementView<SeatElementModel> {
        /**
            * Sets view handler that is called upon a model change
            */
        protected listenToModel(): void;
        /**
            * @inheritDoc
            */
        protected addCssClasses(): void;
        /**
            * @inheritDoc
            */
        protected addCssDefaults(): void;
        /**
            * @inheritDoc
            */
        protected animateMouseOver(event: MouseEvent): void;
        /**
            * @inheritDoc
            */
        protected animateMouseOut(event: MouseEvent): void;
        /**
            * Returns the SeatStatusCollection from the metadata container
            * @returns {MetadataCollection<SeatStatusModel>}
            */
        protected getSeatStatuses(): MetadataCollection<SeatStatusModel>;
        /**
            * Returns the name of the seat status CSS class for this.model
            * @returns {any}
            */
        protected getSeatStatusCssClassFromModel(): string;
        /**
            * Returns the name of the ticket type CSS class for this.model
            * or empty string, if the model has no associated ticket type.
            * @returns {string}
            */
        protected getTicketTypeCssClassFromModel(): string;
        /**
            * @inheritdoc
            */
        protected shouldDisplay(): boolean;
        /**
            * @inheritDoc
            */
        protected elementWillRender(): void;
        /**
            * @inheritDoc
            */
        protected elementDidRender(): void;
}

/**
    * @class SectorView
    * @extends AbstractPlanElementView
    * View class for a sector on a leaflet
    * A sector includes rows of seats and can lead to another tier of leaflet
    */
export class SectorView extends AbstractPlanElementView<SectorElementModel> {
        /**
            * @inheritdoc
            */
        shouldDisplay(): boolean;
        /**
            * @inheritDoc
            */
        actionClick(): void;
        /**
            * @inheritdoc
            */
        protected addCssClasses(): void;
        /**
            * @inheritdoc
            */
        protected resetCssClasses(): void;
        /**
            * Returns the name of the sector CSS class for this.model
            * @returns {string}
            */
        protected getSectorCssClassFromModel(): string;
        /**
            * @inheritDoc
            */
        protected elementWillRender(): void;
        /**
            * @inheritDoc
            */
        protected elementDidRender(): void;
}

export class SvgImageOverlayFactory {
    /**
      * Creates and returns the LeafletJS layer object using given parameters
      * @param image
      * @param bounds
      * @param options
      * @return {SvgImageOverlayView}
      */
    static create(image: string | SVG.Doc, bounds?: LatLngBoundsExpression, options?: Object): SvgImageOverlayView;
}

/**
    * Represents bounds of an image in pixels
    * NOTE: due to LeafletJS convention the X and Y of both points are reversed, i.e. [[y, x], [y, x]]
    */
export type LatLngBoundsExpression = L.LatLngBoundsExpression;
/**
    * @class SvgImageOverlay
    * @extends L.ImageOverlay
    * A class representing an SVG overlay for LeafletJS
    */
export class SvgImageOverlayView extends L.ImageOverlay {
        /**
            * Initiates the layer with given params
            * @param image A string or SVG.Element representation of the image
            * @param bounds Bounds of the layer. If omitted, bounds will be calculated from the bounds of the image
            * @param options Object, describing options of the layer
            */
        initialize(image: string | SVG.Doc, bounds?: LatLngBoundsExpression, options?: Object): void;
        /**
            * Stub for the parent method
            * @param url
            */
        setUrl(url: string): this;
        /**
            * Initiates the SVG image from received parameters
            * @protected
            */
        protected _initImage(): void;
        /**
            * Resets the position of the SVG element after move or zoom
            * @private
            */
        protected _reset(): void;
}

export class TicketTypeView<TModel extends TicketTypeModel> extends Backbone.View<TModel> {
        model: TModel;
        /**
            * Fabric method, that returns a new initialized TicketTypeView object from TicketTypeModel
            * @param ticketTypeModel
            */
        static initFromTicketTypeModel(ticketTypeModel: TicketTypeModel): TicketTypeView<TicketTypeModel>;
        constructor(model: TModel, cssRenderer: (model: TModel, styleEl: HTMLStyleElement) => HTMLStyleElement);
        render(): this;
        /**
            * Sets view handler that is called upon a model change
            */
        protected listenToModel(): void;
}

export abstract class AbstractMetadataModel extends Backbone.Model {
    collection: MetadataCollection<this>;
    /**
      * Returns the value from this model by translated attribute name
      * @param attr
      * @returns {any}
      */
    getByAttribute(attr: string): any;
}

/**
    * Interface describes a single CSS rule
    */
export interface ICssStyleRule {
        /**
            * The selector for the rule, i.e. 'div .centered'
            */
        selector: string;
        /**
            * The full style definition, including semicolons ';', but excluding the curly braces '{' and '}'
            */
        style: string;
}

export class FanZoneModel extends AbstractMetadataModel {
        collection: MetadataCollection<this>;
        /**
            * Returns the ticket type model
            * @return {TicketTypeModel}
            * @see TicketTypeModel
            */
        get ticketTypeModel(): TicketTypeModel;
        /**
            * Convenience getter for the TicketType id
            * @return {string|number|null}
            */
        getTicketTypeId(): string | number | null;
        /**
            * Convenience setter of the seat's TicketType id
            * @param {string | number} id
            */
        setTicketTypeId(id: string | number): void;
        /**
            * Returns model's title as received in metadata
            * @return {string}
            */
        getTitle(): string;
        /**
            * Sets the fan zone title to given string
            * @param title
            */
        setTitle(title: string): void;
        /**
            * Returns zone type for this fan zone
            * Zone type defines if the zone is a regular fan-zone or it is box (=6) or table (=7) or maybe something else
            * @see FanZoneType FanZoneType enum in seatyjs.ts
            * @return {string | number | null}
            */
        getZoneType(): string | number | null;
        /**
            * Returns sectorId for this fan zone
            * Please note, that if the sectorId is null, most probably this is a nested ticket type and should not be displayed
            * @return {string | number}
            */
        getSectorId(): string | number;
}

export class MetadataCollection<TModel extend