# UI & Widgets

## Configuration <a href="#configuration" id="configuration"></a>

Widgets are included in `appmixer.ui` instances made with **Appmixer** constructor:

```javascript
const appmixer = new Appmixer(/* ... */)
const widget = appmixer.ui.FlowManager(config)
```

#### `config.el` <a href="#config-el" id="config-el"></a>

Type: `String|Element` | Default: `null`

HTML DOM element to serve as a container of the widget.

#### `config.theme` <a href="#config-theme" id="config-theme"></a>

Type: `Object` | Default: `DefaultTheme`

Custom theme definition.

#### `config.l10n` <a href="#config-l10n" id="config-l10n"></a>

Type: `Object` | Default: `DefaultL10N`

Custom localization texts.

#### `config.lang` <a href="#config-lang" id="config-lang"></a>

Type: `String` | Default: `en`

Language code for localization of components.

#### `config.api` <a href="#config-api" id="config-api"></a>

Type: `Object` | Default: `DefaultAPI`

Custom API methods.

## Instance <a href="#instance" id="instance"></a>

#### `widget.open` <a href="#widget-open" id="widget-open"></a>

```javascript
widget.open()
```

Mount the `widget` instance and render it inside the `el` container.

#### `widget.close` <a href="#widget-close" id="widget-close"></a>

```javascript
widget.close()
```

Unmount the `widget` instance and hide the `el` container.

#### `widget.reload` <a href="#widget-reload" id="widget-reload"></a>

```javascript
widget.reload()
```

Reload the entire `widget`.

#### `widget.reset` <a href="#widget-reset" id="widget-reset"></a>

```javascript
widget.reset()
```

Reset the state of the widget to defaults.

#### `widget.state` <a href="#widget-state" id="widget-state"></a>

Use `state` for properties that may change at any time when the `widget` is active.

```javascript
widget.state(path, value) // setter
widget.state(path) // getter
```

<details>

<summary>Example</summary>

```json
{
  "foo": false,
  "bar": { "counter": 1 }
}
```

```javascript
// set properties by key or path
widget.state('foo', true)
widget.state('bar', { counter: 2 })
widget.state('bar/counter', 3)

// get properties by key or path
widget.state('foo') // true
widget.state('bar') // { counter: 3 }
widget.state('bar/counter') // 3

// get the entire state
widget.state() // { foo: true, bar: { counter: 3 } }

// reset the state to defaults
widget.reset() // { foo: false, bar: { counter: 1 } }
```

</details>

#### `widget.set` <a href="#widget-set" id="widget-set"></a>

```javascript
widget.set(key, value)
```

Set `config` property.

#### `widget.get` <a href="#widget-get" id="widget-get"></a>

```javascript
widget.get(key, value)
```

Get `config` property.

#### `widget.on` <a href="#widget-on" id="widget-on"></a>

```javascript
widget.on(name, handler)
```

Add a new event listener and disable the default handler of the event.

#### `widget.off` <a href="#widget-off" id="widget-off"></a>

```javascript
widget.off(name)
```

Remove an event listener and enable the default handler of the event.