Class GirafeHTMLElement`Abstract`

Hierarchy (View Summary)

HTMLElement
- GirafeHTMLElement

Constructors

constructor

new GirafeHTMLElement(name: string, context?: IGirafeContext): GirafeHTMLElement
Parameters
- name: string
- Optionalcontext: IGirafeContext
Returns GirafeHTMLElement
Overrides HTMLElement.constructor
- Defined in src/base/GirafeHTMLElement.ts:29

Properties

`Readonly`name

name: string

`Protected`rendered

rendered: boolean = false

`Protected`shadow

shadow: ShadowRoot

`Protected`styleUrl

styleUrl: string | null = null

`Protected`styleUrls

styleUrls: string[] | null = null

`Protected`template

template: Hole | (() => Hole)

`Protected`templateUrl

templateUrl: string | null = null

Accessors

`Protected`context

get context(): IGirafeContext
Returns IGirafeContext
- Defined in src/base/GirafeHTMLElement.ts:22

`Protected`state

get state(): State
Returns State
- Defined in src/base/GirafeHTMLElement.ts:38

Methods

`Protected`canExecute

canExecute(eventName: GgUserInteractionEvent): boolean
Parameters
- eventName: GgUserInteractionEvent
Returns boolean
- Defined in src/base/GirafeHTMLElement.ts:285

`Protected`connectedCallback

connectedCallback(): void
Returns void
- Defined in src/base/GirafeHTMLElement.ts:250

`Protected`disconnectedCallback

disconnectedCallback(): void
When the component is disconnected from the DOM all the callbacks will be unregistered

Returns void
- Defined in src/base/GirafeHTMLElement.ts:261

`Protected`getById

getById<T = HTMLElement>(id: string): T
Type Parameters
- T = HTMLElement
Parameters
- id: string
Returns T
- Defined in src/base/GirafeHTMLElement.ts:42

`Protected`getChildElement

getChildElement<T = HTMLElement>(selector: string): T
Type Parameters
- T = HTMLElement
Parameters
- selector: string
Returns T
- Defined in src/base/GirafeHTMLElement.ts:46

`Protected`getInheritedContext

getInheritedContext(): IGirafeContext
Returns IGirafeContext
- Defined in src/base/GirafeHTMLElement.ts:289

`Protected`getParentOfType

getParentOfType(
    parentNodeName: string,
    elem: Node | null,
    initialElem?: Node | null,
): Node | null
Parameters
- parentNodeName: string
- elem: Node | null
- initialElem: Node | null = elem
Returns Node | null
- Defined in src/base/GirafeHTMLElement.ts:77

`Protected`girafeTranslate

girafeTranslate(): void
Returns void
- Defined in src/base/GirafeHTMLElement.ts:50

`Protected`hide

hide(): void
Hide the component (display: none).

Returns void
- Defined in src/base/GirafeHTMLElement.ts:207

`Protected`htmlUnsafe

htmlUnsafe(str: string): Hole
Convert the string in parameter with uHtml and return it. This allows to convert a string with html in a right html object. For example, htmlUnsafe('
') will return an html div object.
Parameters
- str: string
Returns Hole
- Defined in src/base/GirafeHTMLElement.ts:155

`Protected`isNullOrUndefined

isNullOrUndefined(val: unknown): boolean
NOTE REG: We cannot just use truthy here, because javascript comparaison table is really problematic. For example: 0 == false [] == false "" == false And there are cases where we want to check null or undefined, because 0 can be a right value. More here : https://dorey.github.io/JavaScript-Equality-Table/
Parameters
- val: unknown
Returns boolean
- Defined in src/base/GirafeHTMLElement.ts:69

`Protected`isNullOrUndefinedOrBlank

isNullOrUndefinedOrBlank(val: unknown): boolean
Parameters
- val: unknown
Returns boolean
- Defined in src/base/GirafeHTMLElement.ts:73

`Protected`refreshRender

refreshRender(): void
Re-Render the component. The method should be called when the component has already been rendered and needs to be updated.

Returns void
- Defined in src/base/GirafeHTMLElement.ts:119

`Protected`registerInteractionListener

registerInteractionListener(
eventName: GgUserInteractionEvent,
isExclusive: boolean,
): boolean
Parameters
- eventName: GgUserInteractionEvent
- isExclusive: boolean
Returns boolean
- Defined in src/base/GirafeHTMLElement.ts:269

`Protected`render

render(): void
Render the component's template.

Returns void
- Defined in src/base/GirafeHTMLElement.ts:97

`Protected`renderEmpty

renderEmpty(): void
Renders a hidden span with the name of the component. Useful to render a placeholder for not visible component.

Returns void
- Defined in src/base/GirafeHTMLElement.ts:143

`Protected`show

show(): void
Show the component (display: block).

Returns void
- Defined in src/base/GirafeHTMLElement.ts:215

`Protected`simulateClick

simulateClick(e: KeyboardEvent): void
In the templates, sometimes for accessibility reasons, we have to support the KeyDown Event In those case, we often juste want to do the same as the click event when Enter or Space is pressed Then this method can be used : it just calls the click event on the same element
Parameters
- e: KeyboardEvent
Returns void
- Defined in src/base/GirafeHTMLElement.ts:194

`Protected`subscribe

subscribe(path: string, callback: Callback): Callback
Subscribes with to the state changes made on
Parameters
- path: string
- callback: Callback
Returns Callback
- Defined in src/base/GirafeHTMLElement.ts:224
subscribe(path: RegExp, callback: Callback): Callback
Subscribes with to the state changes made on
Parameters
- path: RegExp
- callback: Callback
Returns Callback
- Defined in src/base/GirafeHTMLElement.ts:225

`Protected`unregisterInteractionListeners

unregisterInteractionListeners(
eventNames?: GgUserInteractionEvent | GgUserInteractionEvent[],
): void
Parameters
- OptionaleventNames: GgUserInteractionEvent | GgUserInteractionEvent[]
Returns void
- Defined in src/base/GirafeHTMLElement.ts:273

`Protected`unsubscribe

unsubscribe(callback: Callback): void
Parameters
- callback: Callback
  Unsubscribe all callbacks
Returns void
- Defined in src/base/GirafeHTMLElement.ts:238
unsubscribe(callbacks: Callback[]): void
Parameters
- callbacks: Callback[]
Returns void
- Defined in src/base/GirafeHTMLElement.ts:239