> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/webmap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/webmap/general/frontend/documentation/base-components/components/control.md).

# Control

## Implementation Details

> **Component Selector:** 'Base component without template and selector'

## PME Support

### Properties

| Property                             | Get/Set | Notify Changes | Details                                                                                                            |
| ------------------------------------ | ------- | -------------- | ------------------------------------------------------------------------------------------------------------------ |
| top: number                          | Yes     | No             | Gets or sets the distance, in pixels, between the top edge of the control and the top edge of its container.       |
| bottom: number                       | Yes     | No             | Gets or sets the distance, in pixels, between the bottom edge of the control and the top edge of its container.    |
| right: number                        | Yes     | No             | Gets or sets the distance, in pixels, between the right edge of the control and the left edge of its container.    |
| left: number                         | Yes     | No             | Gets or sets the the distance, in pixels, between the left edge of the control and the left edge of its container. |
| model: any                           | Yes     | No             | Gets or sets the data model of the control.                                                                        |
| id: string                           | Yes     | No             | Gets or sets the ID of the control.                                                                                |
| events: { \[name: string]: boolean } | Yes     | No             | Gets or sets the collection of events that the control has binded.                                                 |
| name: string                         | Yes     | No             | Gets or sets the name of the control.                                                                              |
| text: string                         | Yes     | Yes            | Gets or sets the text associated with this control.                                                                |
| enabled: boolean                     | Yes     | No             | Gets or sets a value indicating whether the control can respond to user interaction.                               |
| disabled: boolean                    | Get     | No             | Gets true value if the control can respond to user interaction and `null` if the control can not.                  |
| visible: boolean                     | Yes     | No             | Gets or sets a value indicating whether the control is displayed.                                                  |
| width: number                        | Yes     | No             | Gets or sets the width of the control.                                                                             |
| height: number                       | Yes     | No             | Gets or sets the height of the control.                                                                            |
| tooltip: string                      | Yes     | No             | Gets or sets the text that is going to be displayed when the control is overed.                                    |
| allowDrop: boolean                   | Get     | No             | Gets the allowdrop property that enables the control to receive data that is dropped in it.                        |

### Methods

| Method        | Supported | Details                                                       |
| ------------- | --------- | ------------------------------------------------------------- |
| isBindedEvent | Yes       | Returns true if the event name passed as parameter is binded. |
| setMyStyle    | Yes       | Applies an dictionary of style properties to the control.     |

### Events

| Event       | Supported | Parameter       | Details                                                                                                    |
| ----------- | --------- | --------------- | ---------------------------------------------------------------------------------------------------------- |
| GotFocus    | Yes       | **$event**: any | Triggers `GotFocus` Event when the control receives focus.                                                 |
| LostFocus   | Yes       | **$event**: any | Triggers `LostFocus` Event when the control loses focus.                                                   |
| TextChanged | Yes       | **$event**: any | Triggers `TextChanged` Event when the Text property value changes.                                         |
| KeyPress    | Yes       | **$event**: any | Triggers `KeyPress` Event when a character. space or backspace key is pressed while the control has focus. |
| KeyDown     | Yes       | **$event**: any | Triggers `KeyDown` Event key is pressed while the control has focus.                                       |
| Leave       | Yes       | **$event**: any | Triggers `Leave` Event when the input focus leaves the control.                                            |
| Enter       | Yes       | **$event**: any | Triggers `Enter` Event when the control is entered.                                                        |
| ContextMenu | Yes       | **$event**: any | Triggers `ContextMenu` Event when the ContextMenu is going to be shown.                                    |
| DragDrop    | Yes       | **$event**: any | Triggers `DragDrop` Event when some content is dropped inside the control.                                 |