# Widget Web Component

This is a web component that resembles a widget in the CMS. It can be set whether or not it can be collapsed.

## Properties

| Name           | Type    | Description                                                                                      |
| -------------- | ------- | ------------------------------------------------------------------------------------------------ |
| `collapsible`  | boolean | Determines whether or not the widget can be collapsed.                                           |
| `heading`      | string  | The text used for the component's heading.                                                       |
| `internalname` | string  | Used for constructing the key for local storage to maintain stickiness of the collapsible state. |
| `widgetid`     | string  | Used for constructing the key for local storage to maintain stickiness of the collapsible state. |
| `collapsed`    | boolean | Determines whether the widget is collapsed or expanded.                                          |

## Methods

| Name                         | Params                 | Description                                                                                      |
| ---------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------ |
| `get collapsed()`            | none                   | Retrieves the value of the collapsible state.                                                    |
| `set collapsed(isCollapsed)` | `isCollapsed`: boolean | Updates the collapsible state of the widget as well as the local storage to maintain stickiness. |

## Lifecyle Methods Used

| Name                | Purpose                                                                                                                                                                                                            |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `connectedCallback` | When called, the logic inside the method ensures that when the web component is rendered, collapsible widget maintain their previous collapsed state.                                                              |
| `firstUpdated`      | When called, the logic inside the method ensures that any elements inserted after the component has rendered gets appended inside the widget and any errors inside the widget sets the `invalid` property to true. |
