# Class TypedBasicWidget<T>

Abstract class for all components in the Trilium's frontend.

Contains also event implementation with following properties:

- event / command distribution is synchronous which among others mean that events are well-ordered - event which was sent out first will also be processed first by the component
- execution of the event / command is asynchronous - each component executes the event on its own without regard for other components.
- although the execution is async, we are collecting all the promises, and therefore it is possible to wait until the event / command is executed in all components - by simply awaiting the `triggerEvent()`.

#### Type Parameters

- T extends TypedComponent <any>

#### Hierarchy (View Summary)

- TypedComponent < T >
  - TypedBasicWidget
    - BasicWidget

- Defined in src/public/app/widgets/basic_widget.ts:6

##### Index

### Constructors

constructor

### Properties

_noteId
_position
$widget
attrs
children
componentId
initialized
parent?

### Accessors

position
sanitizedClassName

### Methods

callMethod
canBeShown
child
class
cleanup
collapsible
contentSized
css
cssBlock
doRender
filling
getClosestNtxId
getPosition
handleEvent
handleEventInChildren
id
isEnabled
isHiddenExt
isHiddenInt
isVisible
logRenderingError
optChild
optCss
remove
render
setParent
toggleExt
toggleInt
triggerCommand
triggerEvent

## Constructors

### constructor

- new TypedBasicWidget< T extends TypedComponent <any>>(): TypedBasicWidget < T >

  #### Type Parameters

  - T extends TypedComponent <any>

  #### Returns TypedBasicWidget < T >

  Overrides TypedComponent.constructor

  - Defined in src/public/app/widgets/basic_widget.ts:13

## Properties

### _noteId

_noteId: string

- Defined in src/public/app/widgets/basic_widget.ts:11

### _position

_position: number

Inherited from TypedComponent._position

- Defined in src/public/app/components/component.ts:21

### $widget

$widget: JQuery<HTMLElement>

Inherited from TypedComponent.$widget

- Defined in src/public/app/components/component.ts:16

### `Protected` attrs

attrs: Record <string, string>

- Defined in src/public/app/widgets/basic_widget.ts:7

### children

children: T []

Inherited from TypedComponent.children

- Defined in src/public/app/components/component.ts:18

### componentId

componentId: string

Inherited from TypedComponent.componentId

- Defined in src/public/app/components/component.ts:17

### initialized

initialized: null | Promise<void>

Inherited from TypedComponent.initialized

- Defined in src/public/app/components/component.ts:19

### `Optional` parent

parent?: TypedComponent <any>

Inherited from TypedComponent.parent

- Defined in src/public/app/components/component.ts:20

## Accessors

### position

- get position(): number

  #### Returns number

  Inherited from TypedComponent.position

  - Defined in src/public/app/components/component.ts:34
- set position(newPosition: number): void

  #### Parameters

  - newPosition: number

  #### Returns void

  Inherited from TypedComponent.position

  - Defined in src/public/app/components/component.ts:38

### sanitizedClassName

- get sanitizedClassName(): string

  #### Returns string

  Inherited from TypedComponent.sanitizedClassName

  - Defined in src/public/app/components/component.ts:29

## Methods

### callMethod

- callMethod(
  fun: (arg: unknown) => Promise<unknown>,
  data: unknown,
  ): undefined | Promise<unknown>

  #### Parameters

  - fun: (arg: unknown) => Promise<unknown>
  - data: unknown

  #### Returns undefined | Promise<unknown>

  Inherited from TypedComponent.callMethod

  - Defined in src/public/app/components/component.ts:105

### canBeShown

- canBeShown(): boolean

  #### Returns boolean

  - Defined in src/public/app/widgets/basic_widget.ts:226

### child

- child(...components: T []): TypedBasicWidget < T >

  #### Parameters

  - ...components: T []

  #### Returns TypedBasicWidget < T >

  Overrides TypedComponent.child

  - Defined in src/public/app/widgets/basic_widget.ts:25

### class

- class(className: string): TypedBasicWidget < T >

  #### Parameters

  - className: string

  #### Returns TypedBasicWidget < T >

  - Defined in src/public/app/widgets/basic_widget.ts:64

### cleanup

- cleanup(): void

  #### Returns void

  - Defined in src/public/app/widgets/basic_widget.ts:252

### collapsible

- collapsible(): TypedBasicWidget < T >

  #### Returns TypedBasicWidget < T >

  - Defined in src/public/app/widgets/basic_widget.ts:103

### contentSized

- contentSized(): TypedBasicWidget < T >

  #### Returns TypedBasicWidget < T >

  - Defined in src/public/app/widgets/basic_widget.ts:97

### css

- css(name: string, value: string): TypedBasicWidget < T >

  Sets the CSS attribute of the given name to the given value.

  #### Parameters

  - name: string

    the name of the CSS attribute to set (e.g. `padding-left`).

  - value: string

    the value of the CSS attribute to set (e.g. `12px`).

  #### Returns TypedBasicWidget < T >

  self for chaining.

  - Defined in src/public/app/widgets/basic_widget.ts:76

### cssBlock

- cssBlock(block: string): TypedBasicWidget < T >

  Accepts a string of CSS to add with the widget.

  #### Parameters

  - block: string

  #### Returns TypedBasicWidget < T >

  for chaining

  - Defined in src/public/app/widgets/basic_widget.ts:118

### doRender

- doRender(): void

  Method used for rendering the widget.

  Your class should override this method. The method is expected to create a this.$widget containing jQuery object

  #### Returns void

  - Defined in src/public/app/widgets/basic_widget.ts:206

### filling

- filling(): TypedBasicWidget < T >

  #### Returns TypedBasicWidget < T >

  - Defined in src/public/app/widgets/basic_widget.ts:109

### getClosestNtxId

- getClosestNtxId(): undefined | null | string

  #### Returns undefined | null | string

  - Defined in src/public/app/widgets/basic_widget.ts:244

### getPosition

- getPosition(): number

  #### Returns number

  - Defined in src/public/app/widgets/basic_widget.ts:234

### handleEvent

- handleEvent< T extends EventNames >(
  name: T ,
  data: EventData < T >,
  ): undefined | null | Promise<unknown>

  #### Type Parameters

  - T extends EventNames

  #### Parameters

  - name: T
  - data: EventData < T >

  #### Returns undefined | null | Promise<unknown>

  Inherited from TypedComponent.handleEvent

  - Defined in src/public/app/components/component.ts:57

### handleEventInChildren

- handleEventInChildren< T extends EventNames >(
  name: T ,
  data: EventData < T >,
  ): null | Promise<unknown>

  #### Type Parameters

  - T extends EventNames

  #### Parameters

  - name: T
  - data: EventData < T >

  #### Returns null | Promise<unknown>

  Inherited from TypedComponent.handleEventInChildren

  - Defined in src/public/app/components/component.ts:76

### id

- id(id: string): TypedBasicWidget < T >

  #### Parameters

  - id: string

  #### Returns TypedBasicWidget < T >

  - Defined in src/public/app/widgets/basic_widget.ts:59

### isEnabled

- isEnabled(): undefined | null | boolean

  Indicates if the widget is enabled. Widgets are enabled by default. Generally setting this to `false` will cause the widget not to be displayed, however it will still be available on the DOM but hidden.

  #### Returns undefined | null | boolean

  whether the widget is enabled.

  - Defined in src/public/app/widgets/basic_widget.ts:196

### isHiddenExt

- isHiddenExt(): boolean

  #### Returns boolean

  - Defined in src/public/app/widgets/basic_widget.ts:222

### isHiddenInt

- isHiddenInt(): boolean

  #### Returns boolean

  - Defined in src/public/app/widgets/basic_widget.ts:213

### isVisible

- isVisible(): boolean

  #### Returns boolean

  - Defined in src/public/app/widgets/basic_widget.ts:230

### logRenderingError

- logRenderingError(e: Error): void

  #### Parameters

  - e: Error

  #### Returns void

  - Defined in src/public/app/widgets/basic_widget.ts:163

### optChild

- optChild(condition: boolean, ...components: T []): TypedBasicWidget < T >

  Conditionally adds the given components as children to this component.

  #### Parameters

  - condition: boolean

    whether to add the components.

  - ...components: T []

    the components to be added as children to this component provided the condition is truthy.

  #### Returns TypedBasicWidget < T >

  self for chaining.

  - Defined in src/public/app/widgets/basic_widget.ts:51

### optCss

- optCss(condition: boolean, name: string, value: string): TypedBasicWidget < T >

  Sets the CSS attribute of the given name to the given value, but only if the condition provided is truthy.

  #### Parameters

  - condition: boolean

    `true` in order to apply the CSS, `false` to ignore it.

  - name: string

    the name of the CSS attribute to set (e.g. `padding-left`).

  - value: string

    the value of the CSS attribute to set (e.g. `12px`).

  #### Returns TypedBasicWidget < T >

  self for chaining.

  - Defined in src/public/app/widgets/basic_widget.ts:89

### remove

- remove(): void

  #### Returns void

  - Defined in src/public/app/widgets/basic_widget.ts:238

### render

- render(): JQuery<HTMLElement>

  #### Returns JQuery<HTMLElement>

  - Defined in src/public/app/widgets/basic_widget.ts:123

### setParent

- setParent(parent: TypedComponent <any>): TypedBasicWidget < T >

  #### Parameters

  - parent: TypedComponent <any>

  #### Returns TypedBasicWidget < T >

  Inherited from TypedComponent.setParent

  - Defined in src/public/app/components/component.ts:42

### toggleExt

- toggleExt(show: undefined | null | boolean | ""): void

  #### Parameters

  - show: undefined | null | boolean | ""

  #### Returns void

  - Defined in src/public/app/widgets/basic_widget.ts:217

### toggleInt

- toggleInt(show: undefined | null | boolean): void

  #### Parameters

  - show: undefined | null | boolean

  #### Returns void

  - Defined in src/public/app/widgets/basic_widget.ts:208

### triggerCommand

- triggerCommand< K extends keyof CommandMappings >(
  name: K ,
  data?: CommandMappings [ K ],
  ): undefined | null | Promise<unknown>

  #### Type Parameters

  - K extends keyof CommandMappings

  #### Parameters

  - name: K
  - `Optional` data: CommandMappings [ K ]

  #### Returns undefined | null | Promise<unknown>

  Inherited from TypedComponent.triggerCommand

  - Defined in src/public/app/components/component.ts:91

### triggerEvent

- triggerEvent< T extends EventNames >(
  name: T ,
  data: EventData < T >,
  ): undefined | null | Promise<unknown>

  #### Type Parameters

  - T extends EventNames

  #### Parameters

  - name: T
  - data: EventData < T >

  #### Returns undefined | null | Promise<unknown>

  Inherited from TypedComponent.triggerEvent

  - Defined in src/public/app/components/component.ts:72