miro.d.ts

/**
 * Start here
 */
 declare const miro: SDK.Root

 /**
  * Here you will find a full reference to all publicly available methods in
  * the Miro SDK for web plugins development.
  *
  * The [[Root]] interface contains the SDK main commands and is a good starting point.
  *
  */
 declare namespace SDK {
   /**
    * This is the same **`window.miro`** Object and will be your main entry point to the SDK methods.
    *
    * @meta-title The `window.miro` Object
    * @category General
    */
   interface Root {
     /**
      * Callback executed when everything is loaded and ready to use SDK methods.
      * @param callback Function to be executed
      * @returns
      *
      * **Example**
      * ```javascript
      * miro.onReady(() => {
      *  console.log("Ready to call SDK methods")
      * }
      * ```
      */
     onReady(callback: () => void): void
     /**
      * Accepts a configuration to initialize the plugin.
      *
      * Available only on a board. Not available in iframes from [Container Entry points](https://developers.miro.com/docs/extension-points-for-miro-apps)
      *
      * **Example**
      * ```javascript
      * miro.onReady(() => {
      *   miro.initialize({
      *     //plugin configuration
      *   });
      * }
      * ```
      */
     initialize(config?: IPluginConfig): Promise<void>
 
     /**
      * Accepts a configuration to initialize the plugin in the settings page.
      * Available only in the setting page.
      *
      * **Example**
      * ```javascript
      * miro.onReady(() => {
      *   miro.initializeSettings({
      *     //plugin configuration
      *   });
      * }
      * ```
      *
      */
     initializeSettings(config?: IPluginSettingsConfig): Promise<void>
 
     /**
      * The current board the user is watching.
      * Contains commands (functions) to access to the board information.
      *
      * Available only when the Web-plugin runs in a board
      *
      */
     board: IBoardCommands
 
     /**
      * Contains commands (functions) to access to the Account (Team)
      * where the Web-plugin was installed
      *
      * *Note*: this is not the current user
      */
     account: IAccountCommands
 
     /**
      * The current user.
      * Contains commands (functions) to access to the current user information.
      */
     currentUser: ICurrentUserCommands
 
     /**
      * Contains constants like events and style that can be used with other SDK methods
      */
     enums: IEnums
 
     /**
      * Subscribe to an event in the board.
      * Go to [[EventType]] to see a list of possible events.
      *
      * *Note*: Available only when the Web plugin runs on a board page.
      * @param event A string with an event as defined in [[EventType]]
      * @param listener A function to handle the [[Event]]
      * @return void
      *
      * **Example**
      * ```javascript
      * function handleSelectionUpdated(event) {
      *   // Your event handler
      * }
      * miro.addListener('SELECTION_UPDATED', handleSelectionUpdated)
      * ```
      * *Related: See [[removeListener]] to remove a listener*
      */
     addListener(event: EventType, listener: (e: Event) => void): void
 
     /**
      * Unsubscribe from an event in the board.
      * Go to [[EventType]] to see a list of possible events.
      *
      * *Note*: Available only when the Web plugin runs on a board page.
      * @param event A string with an event as defined in [[EventType]]
      * @param listener The function originally passed in [[addListener]] to handle the event
      * @return void
      *
      *
      * **Example**
      *
      * ```javascript
      * miro.removeListener('SELECTION_UPDATED', handleSelectionUpdated)
      * ```
      * *Related: See [[addListener]] to add a listener*
      */
     removeListener(event: EventType, listener: (e: Event) => void): void
 
     /**
      * Broadcast some data to iframes from your plugin in [Container Entry Points](https://developers.miro.com/docs/extension-points-for-miro-apps)
      *
      * You can subscribe to the `DATA_BROADCASTED` event to receive this data.
      * See [[addListener]] and [[EventType]]
      *
      * @param data The payload you wish to broadcast
      * @returns void
      *
      * **Example**
      * ```javascript
      * miro.broadcastData({
      *  value: 1
      * })
      * ```
      */
     broadcastData(data: any): void
 
     /**
      * Shows a notification to the user
      * @param text The text to show in the notification
      * @returns A Promise, fulfilled when the notification is displayed to the user
      *
      * **Example**
      * ```javascript
      * miro.showNotification('Hello world')
      * ```
      */
     showNotification(text: string): Promise<void>
 
     /**
      * Similar to [[showNotification]] with additional style to indicate error
      * @param text The text to show in the notification
      * @returns A Promise, fulfilled when the notification is displayed to the user
      * **Example**
      * ```javascript
      * miro.showErrorNotification('This is an error notification')
      * ```
      */
     showErrorNotification(text: string): Promise<void>
 
     /**
      * Check if the current user has authorized the Web-plugin to make API requests
      * on their behalf
      * @returns True if the web plugin is authorized, false when not.
      *
      * **Example**
      *
      * ```javascript
      * miro.isAuthorized().then( (isAuthorized) => {
      *   if (isAuthorized) {
      *     console.log('Web plugin authorized');
      *   } else {
      *     console.log('Unauthorized');
      *   }
      * })
      * ```
      */
     isAuthorized(): Promise<boolean>
 
     /**
      * The `getIdToken()` method returns a [JSON Web Token (JWT)](http://tools.ietf.org/html/draft-ietf-oauth-json-web-token-11), an encoded form of JSON data, signed by the application secret. You can use JWTs to authenticate requests from your Miro web-plugin to your backend services. You can use an existing [JWT library to decode](https://jwt.io/) the token and establish the communication between your Miro web-plugin and your backend services.
      * If you are migrating from `getToken()` to `getIdToken()`, [see the migration guide.](https://developers.miro.com/docs/gettoken-migration-guide)
      *
      * @returns a JWT token
      *
      * **Example**
      * ```javascript
      * miro.getIdToken().then((jwt) =>{
      *   console.log('jwt token', jwt);
      * })
      * ```
      */
     getIdToken(): Promise<string>
 
     /**
      * Opens a modal to follow the authorization process for your App.
      *
      * @param options Options for the authorization process. See [[AuthorizationOptions]]
      * @returns A promise fulfilled if the app has been authorized.
      *
      */
     requestAuthorization(options?: AuthorizationOptions): Promise<void>
 
     /**
      * Returns the clientId from the web plugin.
      * This is the same clientId from the App settings dashboard.
      * @returns The web plugin clientId.
      */
     getClientId(): string
 
     /**
      * Saves a state (any) that can will be accessible across all
      * the container extension points (iframes) from your plugin.
      *
      * You can retrieve this state with [[__getRuntimeState]]
      *
      * *Note: This state is not persisted between boards or page reloads.*
      *
      * @experimental
      *
      * @returns A promise resolving into the previously saved state. Defaults to an empty object.
      *
      */
     __setRuntimeState<T = any>(data: T): Promise<T>
     /**
      * Gets a previously set state from any container extension point (iframe) from your plugin.
      *
      * You can set this state with [[__setRuntimeState]]
      *
      * *Note: This state is not persisted between boards or page reloads.*
      *
      * @experimental
      *
      * @returns A promise resolving into the stored state.
      */
     __getRuntimeState<T = any>(): Promise<T>
   }
 
   /**
    * Constant defining different events that can be triggered by the main application.
    *
    * The following events are experimental and can be unstable:
    *
    * * ESC_PRESSED
    * * ALL_WIDGETS_LOADED
    * * COMMENT_CREATED
    * * CANVAS_CLICKED
    * * DATA_BROADCASTED
    * * RUNTIME_STATE_UPDATED
    * * METADATA_CHANGED
    * * ONLINE_USERS_CHANGED
    * @category General
    */
   type EventType =
     | 'SELECTION_UPDATED'
     | 'WIDGETS_CREATED'
     | 'WIDGETS_DELETED'
     | 'WIDGETS_TRANSFORMATION_UPDATED'
     | 'ESC_PRESSED' //Experimental event
     | 'ALL_WIDGETS_LOADED' //Experimental event
     | 'COMMENT_CREATED' //Experimental event
     | 'CANVAS_CLICKED' //Experimental event
     | 'DATA_BROADCASTED' //Experimental event
     | 'RUNTIME_STATE_UPDATED' //Experimental event
     | 'METADATA_CHANGED' //Experimental event
     | 'ONLINE_USERS_CHANGED' //Experimental event
 
   /**
    * An Event generated by the main application.
    *
    * You can subscribe to events using [[addListener]]
    * @category General
    */
   interface Event {
     /**
      * The type of event as in [[EventIBoardCommentsCommandspe]]
      */
     type: string | EventType
     /**
      * Payload with data related to the event
      */
     data: any
   }
 
   /**
    * Authorization options for the [authorization flow](https://developers.miro.com/docs/webplugin_authorization).
    * See [[requestAuthorization]]
    * @category Account and User
    */
   interface AuthorizationOptions {
     /**
      * The url the user will be redirected after the authorization.
      * This url must be registered in your app "Redirect URLs" list.
      */
     redirect_uri?: string
     /**
      * oAuth state parameter. It will be send back to the defined `redirect_uri`.
      */
     state?: string
   }
 
   /**
    * Options to initialize the plugin in the settings page.
    * @category General
    *
    */
   interface IPluginSettingsConfig {
     /**
      * Height for your plugin iframe
      */
     iframeHeight: number
   }
 
   /**
    * Defines the configuration to initialize the web plugin
    * See [`IPluginConfigExtensionPoints`] for further information.
    * @category General
    */
   interface IPluginConfig {
     /**
      * Configuration options
      * @inline
      */
     extensionPoints: IPluginConfigExtensionPoints
   }
 
   /**
    * Extensions points allow you to enhance the user interface with buttons.
    *
    * You can define your own buttons using these extensions points, each extension
    * points accepts a specific configuration and has its own limitations.
    *
    * Some extensions points only allow you to add up to one button.
    *
    *
    * Read more about [Extension Points](https://developers.miro.com/docs/extension-points-for-miro-apps)
    * @category Extension Points
    */
   interface IPluginConfigExtensionPoints {
     /**
      * The toolbar seen on the left side of the board
      *
      * You can directly define a [[ToolbarButton]] or a function returning a
      * promise that resolves on one.
      *
      * **Example**
      * ```javascript
      * miro.onReady(() => {
      *   miro.initialize({
      *     extensionPoints: {
      *       toolbar: {
      *         title: "The button title",
      *         librarySvgIcon:
      *           '<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
      *         toolbarSvgIcon:
      *           '<circle cx="12" cy="12" r="9" fill="red" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
      *         onClick: () => {
      *           miro.showNotification("You clicked a toolbar item!");
      *         },
      *       },
      *     },
      *   });
      * });
      *
      * ```
      */
     toolbar?: ButtonExtensionPoint<ToolbarButton>
     /**
      * The toolbar seen on the bottom left side of the board
      *
      * You can directly define a [[BottomBarButton]] or a function returning a
      * promise that resolves on one.
      *
      * **Example**
      * ```javascript
      * miro.onReady(() => {
      *   miro.initialize({
      *     extensionPoints: {
      *       bottomBar: {
      *         title: "The button title",
      *         svgIcon:
      *           '<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
      *         onClick: () => {
      *           miro.showNotification("You clicked a bottom bar item!");
      *         },
      *       },
      *     },
      *   });
      * });
      * ```
      */
     bottomBar?: ButtonExtensionPoint<BottomBarButton>
     /**
      * The toolbar seen when the user opens the export menu.
      *
      * You can directly define a [[ExportMenuButton]] or a function returning a
      * promise that resolves on one.
      *
      * **Example**
      * ```javascript
      * miro.onReady(() => {
      *   miro.initialize({
      *     extensionPoints: {
      *       exportMenu: {
      *         title: "The button title",
      *         svgIcon:
      *           '<circle cx="12" cy="12" r="9" fill="red" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
      *         onClick: () => {
      *           miro.showNotification("You clicked a export menu item!");
      *         },
      *       },
      *     },
      *   });
      * });
      *
      * ```
      *
      */
     exportMenu?: ButtonExtensionPoint<ExportMenuButton>
 
     /**
      *
      * **Deprecated**
      * This method is deprecated.
      *
      * @deprecated
      */
     getWidgetMenuItems?: (widgets: IWidget[], editMode: boolean) => Promise<IWidgetMenuItem | IWidgetMenuItem[]>
   }
 
   /**
    * @category Extension Points
    */
   type ButtonExtensionPoint<T> = T | (() => Promise<T | void>)
 
   /**
    * Defines a button in the toolbar extension point.
    * The toolbar is displayed on the left side of the board.
    *
    * By default your icon will be only displayed on the library.
    *
    * See [[IPluginConfigExtensionPoints]] for examples.
    *
    * Read more about [Extension Points](https://developers.miro.com/docs/extension-points-for-miro-apps)
    *
    * @category Extension Points
    */
   interface ToolbarButton {
     /**
      * The title of the button, It will be displayed on mouse over.
      */
     title: string
     /**
      * The icon that will be displayed on the library (when clicking the dots `...` icon
      * in the toolbar).
      * Must be an [SVGElement](https://developer.mozilla.org/en-US/docs/Web/SVG/Element)
      *
      * By default your button will be displayed here.
      * The user must drag and drop you plugin icon from the library into the toolbar to display it directly in
      * the toolbar.
      */
     librarySvgIcon: string
     /**
      * The icon that will be displayed in the toolbar after the user drag it from the library.
      * Must be an [SVG Element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element)
      */
     toolbarSvgIcon: string
     /**
      * A handler to be executed when the user clicks the button
      */
     onClick: () => void
   }
 
   /**
    * Defines a button in the bottom bar extension point.
    * The bottom bar is displayed on the bottom left side of the board.
    *
    * See [[IPluginConfigExtensionPoints]] for examples.
    *
    * Read more about [Extension Points](https://developers.miro.com/docs/extension-points-for-miro-apps)
    * @category Extension Points
    */
   interface BottomBarButton {
     /**
      * The title of the button, It will be displayed  on mouse over.
      */
     title: string
     /**
      * The icon that will be displayed.
      * Must be an [SVGElement](https://developer.mozilla.org/en-US/docs/Web/SVG/Element)
      */
     svgIcon: string
     /**
      * A handler to be executed when the user clicks the button
      */
     onClick: () => void
   }
 
   /**
    * Defines a button in the export menu extension point.
    * The export buttons appears after the user click the "export" button in a board.
    *
    * See [[IPluginConfigExtensionPoints]] for examples.
    *
    * Read more about [Extension Points](https://developers.miro.com/docs/extension-points-for-miro-apps)
    * @category Extension Points
    */
   interface ExportMenuButton {
     /**
      * The title of the button., It will be displayed  on mouse over.
      *
      * See [[IPluginConfigExtensionPoints]] for examples.
      *
      */
     title: string
     /**
      * The icon that will be displayed.
      * Must be an [SVGElement](https://developer.mozilla.org/en-US/docs/Web/SVG/Element)
      */
     svgIcon: string
     /**
      * A handler to be executed when the user clicks the button
      */
     onClick: () => void
   }
 
   /**
    * **Deprecated**
    * This method is deprecated.
    * @deprecated
    */
   interface IWidgetMenuItem {
     tooltip: string
     svgIcon: string
     onClick: () => void
   }
 
   /**
    * Possible functions (commands) that you can execute
    * on the current board.
    *
    * The specific commands and examples are defined on its own section.
    * @category Board Manipulation
    */
   interface IBoardCommands {
     /**
      * Command related to the board information
      */
     info: IBoardInfoCommands
     /**
      * Commands related to widgets like create, update, delete and metadata.
      */
     widgets: IBoardWidgetsCommands
     /**
      * Commands related to tags
      */
     tags: IBoardTagsCommands
     /**
      * Commands related to the user interface control
      */
     ui: IBoardUICommands
     /**
      * Commands related to the board viewport
      */
     viewport: IBoardViewportCommands
     /**
      * Commands related to the selection of widgets in the board
      */
     selection: IBoardSelectionCommands
 
     /**
      * Utilities to work with the board
      */
     utils: IBoardUtils
 
     /**
      * Returns the deserialized parameters contained in the `miro_sdk` address (location.href) query parameter.
      * @returns A promise resolving into the deserialized data in the `miro_sdk` query parameter.
      * @experimental
      */
     __getParamsFromURL(): Promise<any>
     /**
      * Enables the usage of the mouse left button on the board.
      * It has no effect if the left button was not previously disabled.
      * @experimental
      */
     __enableLeftClickOnCanvas(): void
     /**
      * Disable the usage of the mouse left button on the board.
      * @experimental
      */
     __disableLeftClickOnCanvas(): void
   }
 
   /**
    * Options to define the conditions and behavior of draggable items
    * @category Extension Points
    */
   interface DraggableItemsContainerOptions {
     /**
      * Allows to block the device (e.g. a tablet or smartphone) scrolling while the dragging takes place.
      * This option will have no effect on mouse-enabled devices like a desktop PC.
      *
      * Possible values: `horizontal` and `vertical`
      * Defaults to `horizontal`
      */
     dragDirection?: string
 
     /**
      * A CSS selector. HTMLElement inside the container matching this selector will be draggable.
      */
     draggableItemSelector: string
 
     /**
      * A callback executed when the user starts dragging.
      */
     getDraggableItemPreview: (targetElement: HTMLElement) => {
       /**
        * defaults to 100
        */
       width?: number
       /**
        * defaults to 100
        */
       height?: number
       /**
        * An image following the cursor while the dragging takes place.
        * Supported schemas: 'https://', 'data:image/svg+xml', 'data:image/png;base64'
        */
       url: string
     }
 
     /**
      * A callback executed when a draggable item is clicked.
      * This callback will be executed regardless of the item being dragged or not.
      */
     onClick?: (targetElement: HTMLElement) => void
 
     /**
      * A callback executed when an item was dropped in the board canvas.
      * targetElement is the dragged and dropped item.
      */
     onDrop: (canvasX: number, canvasY: number, targetElement: HTMLElement) => void
 
     /**
      * A callback executed when an item was dragged but not dropped in the board canvas.
      */
     onCancel?: () => void
   }
 
   /**
    * Commands related to the account (team) on which the plugin
    * was installed.
    *
    * *Note*: this is not the current user.
    * @category Account and User
    */
   interface IAccountCommands {
     /**
      * Get information [[IAccountInfo]] about the account.
      * @returns a promise that resolves into the account information.
      *
      * Requires scope: `TEAM:READ`
      */
     get(): Promise<IAccountInfo>
   }
 
   /**
    * Commands related to the current user
    * @category Account and User
    */
   interface ICurrentUserCommands {
     /**
      * Gets the user id
      * @returns a promise resolving in the current user id
      *
      */
     getId(): Promise<string>
     /**
      * Returns if the user is logged in.
      *
      * @returns a promise resolved into the login status of the current user (true or false)
      */
     isSignedIn(): Promise<boolean>
     /**
      * Gets the current scopes the user has authorized the plugin
      * @returns a promise resolving into an array of scopes (strings) the user has authorized the plugin.
      */
     getScopes(): Promise<string[]>
 
     /**
      * Gets the permissions of the current user over the current board.
      *
      * Requires scope: `IDENTITY:READ`
      *
      * @returns a promise resolving into an array of [[BoardPermission]](strings)
      */
     getCurrentBoardPermissions(): Promise<BoardPermission[]>
 
     /**
      * Gets the permissions of the current user over the account (team).
      *
      * Requires scope: `IDENTITY:READ`
      *
      * @returns a promise resolving into an array of [[AccountPermission]](strings)
      */
     getCurrentAccountPermissions(): Promise<AccountPermission[]>
 
     /**
      * Returns if the current user is a member of the account (team) owner of the board
      *
      * Requires scope: IDENTITY:READ
      *
      * @returns a promise resolving into the membership status of the current user (boolean)
      *
      */
     isMemberOfCurrentAccount(): Promise<boolean>
   }
 
   /**
    * Representation of one widget by id
    * @category Widgets Manipulation
    */
   type InputWidget = string | {id: string}
   /**
    * Representation of one or multiple widgets by id
    * @category Widgets Manipulation
    */
   type InputWidgets = string | string[] | {id: string} | {id: string}[]
 
   /**
    * Commands to get information about the board
    * @category Board Manipulation
    */
   interface IBoardInfoCommands {
     /**
      * @returns a promise resolving into information ([[IBoardInfo]]) about the board
      */
     get(): Promise<IBoardInfo>
   }
 
   /**
    * Commands to manipulate the user interface of the current board and make use of
    * container extension points.
    *
    * When a container extension point is opened (e.g. the sidebar) an iframe will be created
    * and loaded based on the options you use to open it. There are different mechanism to communicate
    * between these iframes, such events and states.
    *
    * Read more about [Extension Points](https://developers.miro.com/docs/extension-points-for-miro-apps)
    * @category Extension Points
    */
   interface IBoardUICommands {
     /**
      * Opens the left sidebar and loads an iframe with the `iframeURL`.
      *
      * You can communicate with this iframe by using the [[broadcastData]] method.
      *
      * @param iframeURL the url that will be open in the iframe. If a relative url is used, it will be relative
      * to the defined web plugin url.
      * @returns A promise that will be resolved once the left sidebar is closed.
      *
      * **Example**
      * ```javascript
      * miro.onReady(async () => {
      *   miro.initialize({
      *     extensionPoints: {
      *       // create a button on the bottom bar
      *       bottomBar: {
      *         title: "Open a sidebar",
      *         svgIcon:
      *           '<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
      *         onClick: () => {
      *           // open the sidebar when clicked
      *           // `/sidebar.html` will be relative to the plugin url
      *           miro.board.ui.openLeftSidebar("/sidebar.html");
      *
      *           // send a message to the sidebar after 5 seconds
      *           setTimeout(() => {
      *             miro.broadcastData("Hello from the bottom bar");
      *           }, 5000);
      *         },
      *       },
      *     },
      *   });
      * });
      * ```
      */
     openLeftSidebar(iframeURL: string): Promise<any>
 
     /**
      * Opens the library extension point and loads an iframe with the `iframeURL`.
      *
      * You can communicate with this iframe by using the [[broadcastData]] method.
      *
      * @param iframeURL the url that will be open in the iframe. If a relative url is used, it will be relative
      * to the defined web plugin url.
      * @param options Options for the library. Current only `title` is available.
      * @returns A promise that will be resolved once the library is closed.
      *
      * **Example**
      * ```javascript
      * miro.onReady(async () => {
      *   miro.initialize({
      *     extensionPoints: {
      *       // create a button on the bottom bar
      *       bottomBar: {
      *         title: "Open the library",
      *         svgIcon:
      *           '<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
      *         onClick: () => {
      *           // `/library.html` will be relative to the plugin url
      *           miro.board.ui.openLibrary("/library.html", { title: "The library!" });
      *         },
      *       },
      *     },
      *   });
      * });
      * ```
      */
     openLibrary(iframeURL: string, options: {title: string}): Promise<any>
 
     /**
      * Opens the modal extension point and loads an iframe with the `iframeURL`.
      *
      * You can communicate with this iframe by using the [[broadcastData]] method.
      *
      * @param iframeURL the url that will be open in the iframe. If a relative url is used, it will be relative
      * to the defined web plugin url.
      * @param options Options for the modal. You can define specific dimensions or make it fullscreen.
      * @returns A promise that will be resolved once the modal is closed.
      *
      * **Example**
      * ```javascript
      * miro.onReady(async () => {
      *   miro.initialize({
      *     extensionPoints: {
      *       // create a button on the bottom bar
      *       bottomBar: {
      *         title: "Open a modal",
      *         svgIcon:
      *           '<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
      *         onClick: () => {
      *           miro.board.ui.openModal("/modal.html", { width: 400, height: 400 }).then(() => {
      *             miro.showNotification("modal closed");
      *           });
      *         },
      *       },
      *     },
      *   });
      * });
      * ```
      */
     openModal(iframeURL: string, options?: {width?: number; height?: number} | {fullscreen: boolean}): Promise<any>
 
     /**
      * Opens the bottom panel extension point and loads an iframe with the `iframeURL`.
      *
      * You can communicate with this iframe by using the [[broadcastData]] method.
      *
      * @param iframeURL the url that will be open in the iframe. If a relative url is used, it will be relative
      * to the defined web plugin url.
      * @param options Options for the bottomPanel.
      *
      * options.width: default 120px, min value: 80px; max: value 320px
      *
      * options.height: default 48px, min value: 48px; max: value 200px
      *
      * @returns A promise that will be resolved once the bottomPanel is closed.
      *
      * **Example**
      * ```javascript
      * miro.onReady(async () => {
      *   miro.initialize({
      *     extensionPoints: {
      *       // create a button on the bottom bar
      *       bottomBar: {
      *         title: "Open a modal",
      *         svgIcon:
      *           '<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
      *         onClick: () => {
      *           miro.board.ui.openBottomPanel("/sidebar.html", {
      *             width: 200,
      *             height: 200,
      *           });
      *         },
      *       },
      *     },
      *   });
      * });
      * ```
      *
      */
     openBottomPanel(iframeURL: string, options?: {width?: number; height?: number}): Promise<any>
 
     /**
      * Closes the left sidebar.
      * Throws error if the sidebar was not opened by the plugin
      *
      * @param data Ignored for now.
      */
     closeLeftSidebar(data?: any): void
 
     /**
      * Closes the library.
      * Throws error if the library was not opened by the plugin
      * @param data Ignored for now.
      */
     closeLibrary(data?: any): void
 
     /**
      * Closes the modal.
      * Throws error if the modal was not opened by the plugin
      * @param data Ignored for now.
      */
     closeModal(data?: any): void
 
     /**
      * Closes the bottom panel.
      * Throws error if the bottom panel was not opened by the plugin
      * @param data Ignored for now.
      */
     closeBottomPanel(data?: any): void
 
     /**
      * Resizes the current iframe inside the bottom-panel.
      * @TODO this method does not exist
      * resizeToInner does exist
      *
      * The left sidebar and the modal are not yet supported.
      */
     resizeTo(value: HTMLElement | string | {width?: number; height?: number}): void
     /**
      * Enables a container (HTMLElement) to have draggable elements (items).
      *
      * *Note: Not all items inside the container will be draggable.
      * See [[DraggableItemsContainerOptions]] to know how to define them.*
      *
      * Items dynamically added to the container will be draggable if matching the conditions defined in [[DraggableItemsContainerOptions]]
      * @TODO add link to a guide with a full working example
      *
      * @param container An HTMLElement containing the draggable items.
      * @param options Define the conditions and behavior of the draggable items.
      * @returns
      *
      * **Example**
      * ```javascript
      * //This example code should run in a container extension point like the left sidebar or the library.
      * miro.onReady(() => {
      *   // Contains the draggable elements
      *   const draggable = document.getElementById("draggables-container");
      *   miro.board.ui.initDraggableItemsContainer(draggable, {
      *     // matching elements will be draggable
      *     draggableItemSelector: ".drag-me",
      *     getDraggableItemPreview: function () {
      *       return {
      *         url: "https://dummyimage.com/600x400/000000/ffffff&text=Drag+Me",
      *       };
      *     },
      *     onDrop: function () {
      *       miro.showNotification("You dropped something");
      *     },
      *   });
      * });
      * ```
      *
      */
     initDraggableItemsContainer(container: HTMLElement, options: DraggableItemsContainerOptions): void
 
     /**
      * Selects the board default tool
      * @experimental
      */
     __selectDefaultTool(): void
 
     /**
      * Hides interface panels [[UIPanel]]
      * @experimental
      */
     __hideButtonsPanels(panels: 'all' | UIPanel | UIPanel[]): void
 
     /**
      * Shows interface panels [[UIPanel]]
      */
     __showButtonsPanels(panels: 'all' | UIPanel | UIPanel[]): void
 
     /**
      * Sets the toolbar mode. Some modes show more options than other. Example: the `viewer` can only see the default tool.
      *
      * *Note: this will not limit the ability of the current user to interact with the board widgets.*
      */
     __limitToolbarMode(mode: 'editor' | 'commentor' | 'viewer'): void
 
     /**
      * Removes any limitation set with [[__limitToolbarMode]].
      *
      * *Note: this will not allow a non-authorized user to modify the board*
      */
     __clearToolbarModeLimit(): void
   }
 
   /**
    * The available panels in the board.
    * @category Extension Points
    */
   type UIPanel = 'toolbar' | 'top' | 'bottomBar' | 'map'
 
   /**
    * Utilities to work with a board.
    * @category Board Manipulation
    */
   interface IBoardUtils {
     /**
      * Calculates the union boundaries of several widgets.
      */
     unionWidgetBounds(widgets: {bounds: IBounds}[]): IBounds
   }
 
   /**
    * Commands to get information and manipulate the board viewport.
    * @category Board Manipulation
    */
   interface IBoardViewportCommands {
     /**
      * Returns information about the current viewport position
      */
     get(): Promise<IRect>
     /**
      * Allows to set the board viewport
      */
     set(viewport: IRect, options?: IViewportOptions): Promise<IRect>
     /**
      * Returns the viewport scale (zoom level)
      */
     getScale(): Promise<number>
 
     /**
      * Zooms to a specific Widget on the board
      */
     zoomToObject(widget: InputWidget): Promise<void>
 
     /**
      * Adds a black mask over the canvas.
      * @experimental
      */
     __mask(viewport: IRect, padding?: IOffset): void
 
     // [Experimental feature] Remove mask
     /**
      * Removes any mask set over the canvas.
      * @experimental
      */
     __unmask(): void
   }
 
   /**
    * Options to set the board viewport
    * @category Board Manipulation
    */
   interface IViewportOptions {
     /**
      * Padding between the target viewport and the final result
      * Defaults to 0
      */
     padding?: IOffset
     /**
      * Time in milliseconds for an animation effect.
      * Defaults to no animation.
      */
     animationTimeInMS?: number // No animation by default
   }
 
   /**
    * Commands related to the selection and selected widgets in the board
    * @category Board Manipulation
    */
   interface IBoardSelectionCommands {
     /**
      * Requires scope: BOARDS:READ
      *
      * @returns The currently selected widgets
      *
      */
     get(): Promise<IWidget[]>
 
     /**
      * Selects an specific widget.
      *
      * Requires scope: BOARDS:READ
      *
      * @returns The selected widgets
      *
      */
     selectWidgets(widgetIds: InputWidgets): Promise<IWidget[]>
 
     /**
      * Unselect all widgets in the board
      *
      * @returns A promised fulfilled if the action can be performed.
      */
     clear(): Promise<void>
 
     /**
      * Creates a dark mask and prompts the current user to select a widget in the board (widget selection mode).
      *
      * The user can only select one widget at the time.
      *
      * *Note: This command is not available in container extension points.*
      *
      * @returns A promise resolving into the selected widgets.
      * If the user cancels the selection the array of selected widgets will be empty
      */
     enterSelectWidgetsMode(): Promise<{selectedWidgets: IWidget[]}>
   }
 
   /**
    * Commands related to widgets such creation, modification and metadata.
    * @category Widgets Manipulation
    */
   interface IBoardWidgetsCommands {
     /**
      * Creates a widget in the board.
      * A `type` is required.
      *
      * See [[IWidget]] for more information about the different type of widgets and their properties.
      *
      * Requires scope: BOARDS:WRITE
      * Requires BoardPermission.EDIT_CONTENT for the current user
      *
      * **Example**
      * ```javascript
      * miro.board.widgets.create({type: "sticker", text: "Hello world"})
      * ```
      *
      * @returns A promise resolving into an array containing the newly created widgets.
      */
     create<T extends IWidget>(widgets: OneOrMany<WidgetToBeCreated>): Promise<T[]>
 
     /**
      * Get all the board widgets matching a filter `filterBy`.
      * filterBy uses https://lodash.com/docs/4.17.11#filter
      *
      * See [[IWidget]] for more information about the different type of widgets and their properties.
      *
      * Requires scope: BOARDS:READ
      *
      * **Example**
      * ```javascript
      * const stickers = miro.board.widgets.get({type: "sticker"})
      * ```
      * @returns A promise resolving into an array of widgets matching the filter
      *
      */
     get<T extends IWidget>(filterBy?: Record<string, unknown>): Promise<T[]>
 
     /**
      * Modify one or many widgets in the board.
      * An `id` is mandatory.
      *
      * See [[IWidget]] for more information about the different type of widgets and their properties.
      *
      * Requires scope: BOARDS:WRITE
      * Requires BoardPermission.EDIT_CONTENT for current user
      *
      * @returns A promise resolving into an array with the modified widgets.
      */
     update<T extends IWidget>(widgets: OneOrMany<{id: string; [index: string]: any}>): Promise<T[]>
 
     /**
      * Modifies the widgets position and rotation based on the passed parameters.
      *
      * @param widgetId Widgets to be affected
      * @param deltaX Translation on the X axis.
      * @param deltaY Translation on the Y axis
      * @param deltaRotation Rotation of the widget
      *
      * Requires scope: BOARDS:WRITE
      * Requires BoardPermission.EDIT_CONTENT for current user
      *
      * @returns A promise resolving into an array with the modified widgets.
      */
     transformDelta(
       widgetIds: InputWidgets,
       deltaX?: number,
       deltaY?: number,
       deltaRotation?: number,
     ): Promise<IWidget[]>
 
     /**
      * Deletes a single widget from the board
      *
      * Requires scope: BOARDS:WRITE
      * Requires BoardPermission.EDIT_CONTENT for current user
      *
      * @param widgetIds Widget to be deleted
      * @returns A promise resolving after the widget was deleted.
      */
     deleteById(widgetIds: InputWidgets): Promise<void>
 
     /**
      * Brings a widget forward in the board (above other widgets)
      *
      * Requires scope: BOARDS:WRITE
      * Requires BoardPermission.EDIT_CONTENT for current user
      *
      * @param widgetIds Widget to be affected.
      * @returns A promise resolving after the widget was brought forward.
      */
     bringForward(widgetId: InputWidgets): Promise<void>
 
     /**
      * Send a widget to the back (below other widgets).
      *
      * Requires scope: BOARDS:WRITE
      * Requires BoardPermission.EDIT_CONTENT for current user
      *
      * @param widgetIds Widget to be affected.
      * @returns A promise resolving after the widget was sent forward.
      */
     sendBackward(widgetId: InputWidgets): Promise<void>
 
     /**
      * Checks if all widgets on the board had been loaded.
      *
      * @returns A promise resolving after all the widgets in the board had been loaded.
      *
      */
     areAllWidgetsLoaded(): Promise<boolean>
 
     /**
      * Finds all widgets intersected in a specific area.
      *
      * Requires scope: BOARDS:READ
      *
      * @experimental
      *
      * @returns A Promise resolving with the widgets found in the requested area.
      */
     __getIntersectedObjects(pointOrRect: IPoint | IRect): Promise<IWidget[]>
 
     /**
      * Makes a widget perform a "blink" animation in the board.
      * @experimental
      *
      * @returns A promise resolving if the widget was found.
      */
     __blinkWidget(widgets: InputWidgets): Promise<void>
   }
 
   /**
    * Commands to interact and manipulate tags
    * @category Widgets Manipulation
    */
   type InputTags = string | string[] | {id: string} | {id: string}[]
   /**
    * Commands to interact and manipulate tags
    * @category Widgets Manipulation
    */
   type CreateTagRequest = {title: string; color: number | string; widgetIds?: InputWidgets}
   /**
    * Commands to interact and manipulate tags
    * @category Widgets Manipulation
    */
   type UpdateTagRequest = {id: string; title?: string; color?: number | string; widgetIds?: InputWidgets}
 
   /**
    * Commands to interact and manipulate tags
    * @category Widgets Manipulation
    */
   interface IBoardTagsCommands {
     /**
      * Gets all tags in the board, optionally filtered as specific in `filterBy`
      *
      * Requires scope: BOARDS:READ
      *
      * @param filterBy Conditions to filter tags.
      * @returns A promise resolving into the found tags.
      *
      */
     get(filterBy?: Record<string, unknown>): Promise<ITag[]>
 
     /**
      * Creates one or many tags as defined in the [[CreateTagRequest]].
      *
      * Requires scope: BOARDS:WRITE
      * Requires BoardPermission.EDIT_CONTENT for current user
      *
      * @param tags Details of the tag being created. It may include what widgets will have the tag. A `title` is always required.
      * @returns A promise resolving into the created tags.
      */
     create(tags: OneOrMany<CreateTagRequest>): Promise<ITag[]>
 
     /**
      * Update one or many tags as defined in the [[UpdateTagRequest]]
      *
      * Requires scope: BOARDS:WRITE
      * Requires BoardPermission.EDIT_CONTENT for current user
      *
      * @param tags The tags to be updated. An `id` is always required.
      * @returns A promise resolving into the updated tags.
      */
     update(tags: OneOrMany<UpdateTagRequest>): Promise<ITag[]>
 
     /**
      * Deletes one or many tags.
      *
      * Requires scope: BOARDS:WRITE
      * Requires BoardPermission.EDIT_CONTENT for current user
      *
      * @param tags The tags to be deleted.
      * @returns A promise resolving when the tags are deleted.
      */
     delete(tags: InputTags): Promise<void>
   }
 
   /**
    * @category Board Manipulation
    */
   interface IBoardCommentsCommands {
     /**
      * Requires scope: BOARDS:READ
      */
     get(): Promise<IComment[]>
   }
 
   /**
    * @category Board Manipulation
    */
   interface IBoardGroupsCommands {
     /**
      * Requires scope: BOARDS:READ
      */
     get(): Promise<IGroup[]>
   }
 
   /**
    * @category Board Manipulation
    */
   interface IGroup {
     id: string
     bounds: IBounds
     childrenIds: string[]
   }
 
   /**
    * Defines a tag and its properties
    * @category Widgets Manipulation
    */
   interface ITag {
     id: string
     title: string
     /**
      * The color of the tag
      */
     color: string | number
     /**
      * A list of ids with the assigned tag.
      */
     widgetIds: string[]
   }
 
   ////////////////////////////////////////////////////////////////////////
   // Widget data types
   ////////////////////////////////////////////////////////////////////////
 
   /**
    * @category Widgets Manipulation
    */
   type OneOrMany<T> = T | T[]
 
   /**
    * @category Widgets Manipulation
    */
   type WidgetMetadata = {[x: string]: any}
 
   /**
    * @category Widgets Manipulation
    */
   type WidgetCapabilities = {editable: boolean}
 
   /**
    * @category Widgets Manipulation
    */
   interface IWidgetNamespaces {
     metadata: WidgetMetadata
     capabilities: WidgetCapabilities
     clientVisible: boolean
   }
 
   /**
    * @category Widgets Manipulation
    */
   type WidgetNamespacesKeys = keyof IWidgetNamespaces
 
   /**
    * Defines a basic widget and its properties
    * @category Widgets Manipulation
    */
   interface IWidget extends IWidgetNamespaces {
     readonly id: string
     readonly type: string
     readonly bounds: IBounds
     readonly groupId?: string
     readonly createdUserId: string
     readonly lastModifiedUserId: string
   }
 
   /**
    * @category Widgets Manipulation
    */
   interface ITextWidget extends IWidget {
     type: 'TEXT'
     x: number
     y: number
     width: number
     scale: number
     rotation: number
     text: string
     style: {
       backgroundColor: BackgroundColorStyle
       backgroundOpacity: BackgroundOpacityStyle
       /**
        * @deprecated
        */
       borderColor: BorderColorStyle
       /**
        * @deprecated
        */
       borderWidth: BorderWidthStyle
       /**
        * @deprecated
        */
       borderStyle: BorderStyle
       /**
        * @deprecated
        */
       borderOpacity: BorderOpacityStyle
       fontFamily: FontFamily
       textColor: TextColorStyle
       textAlign: TextAlign
       highlighting: HighlightingStyle
       italic: ItalicStyle
       strike: StrikeStyle
       underline: UnderlineStyle
       bold: BoldStyle
       /**
        * @deprecated
        */
       padding: PaddingStyle
     }
   }
 
   /**
    * @category Widgets Manipulation
    */
   interface IImageWidget extends IWidget {
     type: 'IMAGE'
     x: number
     y: number
     rotation: number
     scale: number
     title: string
     url: string
   }
 
   /**
    * @category Widgets Manipulation
    */
   interface IStickerWidget extends IWidget {
     type: 'STICKER'
     x: number
     y: number
     scale: number
 
     /**
      * This text will include HTML characters if present.
      */
     text: string
 
     /**
      * This text does not include HTML characters.
      */
     plainText: string
     style: {
       stickerBackgroundColor: BackgroundColorStyle
       fontSize: FontSizeStyle
       textAlign: TextAlign
       textAlignVertical: TextAlignVertical
       stickerType: StickerType
       fontFamily: FontFamily
     }
 
     readonly tags: ITag[]
   }
 
   /**
    * @category Widgets Manipulation
    */
   interface IShapeWidget extends IWidget {
     type: 'SHAPE'
     x: number
     y: number
     width: number
     height: number
     rotation: number
 
     /**
      * This text will include HTML characters if present.
      */
     text: string
 
     /**
      * This text does not include HTML characters.
      */
     plainText: string
     style: {
       shapeType: ShapeType
       backgroundColor: BackgroundColorStyle
       backgroundOpacity: BackgroundOpacityStyle
       borderColor: BorderColorStyle
       borderWidth: BorderWidthStyle
       borderStyle: BorderStyle
       borderOpacity: BorderOpacityStyle
       fontSize: FontSizeStyle
       fontFamily: FontFamily
       textColor: TextColorStyle
       textAlign: TextAlign
       textAlignVertical: TextAlignVertical
       highlighting: HighlightingStyle
       italic: ItalicStyle
       strike: StrikeStyle
       underline: UnderlineStyle
       bold: BoldStyle
     }
   }
 
   /**
      * Defines a widget of type `LINE`.
      *
      * Currently line widgets can only be created between two widgets.
     // The `startWidgetId` and `endWidgetId` fields are required to create a line widget.
      * @category Widgets Manipulation
      */
   interface ILineWidget extends IWidget {
     type: 'LINE'
     /**
      * Mandatory field
      */
     startWidgetId: string | undefined
     /**
      * Mandatory field
      */
     endWidgetId: string | undefined
     readonly startPosition: IPoint
     readonly endPosition: IPoint
     readonly captions: {text: string}[]
     style: {
       lineColor: LineColorStyle
       lineThickness: LineThicknessStyle
       lineStyle: LineStyle
       lineType: LineType
       lineStartStyle: LineArrowheadStyle
       lineEndStyle: LineArrowheadStyle
     }
   }
 
   /**
    * @category Widgets Manipulation
    */
   interface IWebScreenshotWidget extends IWidget {
     type: 'WEBSCREEN'
     x: number
     y: number
     scale: number
     readonly url: string
   }
 
   /**
    * @category Widgets Manipulation
    */
   interface IFrameWidget extends IWidget {
     type: 'FRAME'
     x: number
     y: number
     width: number
     height: number
     title: string
     readonly frameIndex: number
     readonly childrenIds: string[]
     style: {
       backgroundColor: BackgroundColorStyle
     }
   }
 
   /**
    * @category Widgets Manipulation
    */
   interface ICurveWidget extends IWidget {
     type: 'CURVE'
     x: number
     y: number
     scale: number
     rotation: number
     points: IPoint[]
     style: {
       lineColor: LineColorStyle
       lineWidth: LineThicknessStyle
     }
   }
 
   /**
    * @category Widgets Manipulation
    */
   interface IEmbedWidget extends IWidget {
     type: 'EMBED'
     x: number
     y: number
     scale: number
     html: string
   }
 
   /**
    * @category Widgets Manipulation
    */
   interface IPreviewWidget extends IWidget {
     type: 'PREVIEW'
     x: number
     y: number
     scale: number
     readonly url: string
   }
 
   /**
    * @category Widgets Manipulation
    */
   interface IEmojiWidget extends IWidget {
     type: 'EMOJI'
     x: number
     y: number
     scale: number
     rotation: number
     readonly code: string
   }
 
   /**
    * @category Widgets Manipulation
    */
   interface ICardWidget extends IWidget {
     type: 'CARD'
     x: number
     y: number
     scale: number
     rotation: number
     title: string
     description: string
     /**
      * Date format: `YYYY-mm-dd`
      */
     date?: string
     assignee?: {
       userId: string
     }
     card: {
       customFields?: {
         value?: string
         mainColor?: string
         fontColor?: string
         iconUrl?: string
         roundedIcon?: boolean
       }[]
       logo?: {
         iconUrl: string
       }
     }
     style: {
       backgroundColor: BackgroundColorStyle
     }
 
     readonly tags: ITag[]
   }
 
   /**
    * @category Widgets Manipulation
    */
   interface IDocumentWidget extends IWidget {
     type: 'DOCUMENT'
     x: number
     y: number
     rotation: number
     scale: number
     title: string
   }
 
   /**
    * @category Widgets Manipulation
    */
   interface IMockupWidget extends IWidget {
     type: 'MOCKUP'
     x: number
     y: number
     rotation: number
     readonly mockupType: string
   }
 
   /**
    * @category Widgets Manipulation
    */
   interface IComment extends IWidget {
     type: 'COMMENT'
     color: number
     resolved: boolean
   }
 
   /**
    * @category Widgets Manipulation
    */
   interface IWidgetShortData {
     id: string
     type?: string
     metadata?: any
   }
 
   ////////////////////////////////////////////////////////////////////////
   // Helpers data
   ////////////////////////////////////////////////////////////////////////
 
   /**
    * @category Account and User
    */
   type BoardPermission = 'EDIT_INFO' | 'EDIT_CONTENT' | 'EDIT_COMMENTS'
   /**
    * @category Account and User
    */
   type AccountPermission = 'MANAGE_APPS'
 
   /**
    * @category Board Manipulation
    */
   interface IBoardInfo {
     id: string
     title: string
     description: string
     owner?: IUserInfo
     picture: IPictureInfo
     currentUserPermissions: BoardPermission[]
     lastModifyingUser: IUserInfo
     lastViewedByMeDate: string
     modifiedByMeDate: string
     createdAt: string
     updatedAt: string
   }
 
   /**
    * @category Account and User
    */
   interface IUserInfo {
     id: string
     name: string
     email: string
     picture: IPictureInfo
   }
 
   /**
    * @category Account and User
    */
   interface IAccountInfo {
     id: string
     title: string
     currentUserPermissions: AccountPermission[]
     createdAt: string
     picture: IPictureInfo
   }
 
   /**
    * @category Account and User
    */
   interface IPictureInfo {
     big: string
     medium: string
     small: string
     image: string //original picture
   }
 
   /**
    * @category General
    */
   interface IRect {
     x: number
     y: number
     width: number
     height: number
   }
 
   /**
    * @category General
    */
   interface IOffset {
     top: number
     left: number
     bottom: number
     right: number
   }
 
   /**
    * @category General
    */
   interface IPoint {
     x: number
     y: number
   }
 
   /**
    * @category General
    */
   interface IBounds {
     x: number
     y: number
     top: number
     left: number
     bottom: number
     right: number
     width: number
     height: number
   }
 
   /////////////////////////////////////////////
   // Style types
   /////////////////////////////////////////////
   /**
    * @category Styling
    */
   type BackgroundColorStyle = string | number
   /**
    * @category Styling
    */
   type BackgroundOpacityStyle = number
   /**
    * @category Styling
    */
   type BorderColorStyle = string | number
   /**
    * @category Styling
    */
   type BorderWidthStyle = number
   /**
    * @category Styling
    */
   type BorderOpacityStyle = number
   /**
    * @category Styling
    */
   type FontSizeStyle = number
   /**
    * @category Styling
    */
   type TextColorStyle = string | number
   /**
    * @category Styling
    */
   type HighlightingStyle = string | number
   /**
    * @category Styling
    */
   type ItalicStyle = 0 | 1
   /**
    * @category Styling
    */
   type StrikeStyle = 0 | 1
   /**
    * @category Styling
    */
   type UnderlineStyle = 0 | 1
   /**
    * @category Styling
    */
   type PaddingStyle = 0 | 8
   /**
    * @category Styling
    */
   type BoldStyle = 0 | 1
   /**
    * @category Styling
    */
   type LineColorStyle = string | number
   /**
    * @category Styling
    */
   type LineThicknessStyle = number
   /**
    * @category Styling
    */
 
   /**
    * @category Styling
    */
   enum ShapeType {
     RECTANGLE = 3,
     CIRCLE = 4,
     TRIANGLE = 5,
     BUBBLE = 6,
     ROUNDER = 7,
     RHOMBUS = 8,
     PARALL = 10,
     STAR = 11,
     ARROW_RIGHT = 12,
     ARROW_LEFT = 13,
     TEXT_RECT = 14,
     PILL = 15,
     PENTAGON = 16,
     HEXAGON = 17,
     OCTAGON = 18,
     TRAPEZE = 19,
     PREDEFINED_PROCESS = 20,
     ARROW_LEFT_RIGHT = 21,
     CLOUD = 22,
     BRACE_LEFT = 23,
     BRACE_RIGHT = 24,
     CROSS = 25,
     BARREL = 26,
   }
 
   /**
    * @category Styling
    */
   enum StickerType {
     SQUARE = 0,
     RECTANGLE = 1,
   }
 
   /**
    * @category Styling
    */
   enum BorderStyle {
     DOTTED = 0,
     DASHED = 1,
     NORMAL = 2,
   }
 
   /**
    * @category Styling
    */
   enum FontFamily {
     ARIAL = 0,
     CURSIVE = 1,
     ABRIL_FATFACE = 2,
     BANGERS,
     EB_GARAMOND,
     GEORGIA,
     GRADUATE,
     GRAVITAS_ONE,
     FREDOKA_ONE,
     NIXIE_ONE,
     OPEN_SANS,
     PERMANENT_MARKER,
     PT_SANS,
     PT_SANS_NARROW,
     PT_SERIF,
     RAMMETTO_ONE,
     ROBOTO,
     ROBOTO_CONDENSED,
     ROBOTO_SLAB,
     CAVEAT,
     TIMES_NEW_ROMAN,
     TITAN_ONE,
     LEMON_TUESDAY,
     ROBOTO_MONO,
     NOTO_SANS,
     PLEX_SANS,
     PLEX_SERIF,
     PLEX_MONO,
   }
 
   /**
    * @category Styling
    */
   enum TextAlign {
     LEFT = 'l',
     CENTER = 'c',
     RIGHT = 'r',
   }
 
   /**
    * @category Styling
    */
   enum TextAlignVertical {
     TOP = 't',
     MIDDLE = 'm',
     BOTTOM = 'b',
   }
 
   /**
    * @category Styling
    */
   enum LineStyle {
     DASHED = 1,
     NORMAL = 2,
     STRONG = 3,
     DOTTED = 4,
   }
 
   /**
    * @category Styling
    */
   enum LineType {
     LINE = 1,
     ARROW = 2,
     ARROW_SKETCH = 9,
   }
 
   /**
    * @category Styling
    */
   enum LineArrowheadStyle {
     NONE = 0,
     ARC_ARROW = 1,
     RHOMBUS = 2,
     FILLED_RHOMBUS = 3,
     CIRCLE = 4,
     FILLED_CIRCLE = 5,
     ARROW = 6,
     OPEN_ARROW = 7,
     FILLED_ARROW = 8,
   }
 
   /**
    * @category Styling
    */
   interface IEnums {
     shapeType: typeof ShapeType
     stickerType: typeof StickerType
     borderStyle: typeof BorderStyle
     fontFamily: typeof FontFamily
     textAlign: typeof TextAlign
     textAlignVertical: typeof TextAlignVertical
     lineStyle: typeof LineStyle
     lineType: typeof LineType
     lineArrowheadStyle: typeof LineArrowheadStyle
   }
   /**
    * > **Note**: when creating a widget that requires a URL, if the URL has special characters. Make sure the URL is encoded properly.
    * @category Widgets Manipulation
    */
   type WidgetToBeCreated = {type: string; [index: string]: any}
 }