# 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.                                 |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gapvelocity.ai/webmap/general/frontend/documentation/base-components/components/control.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.