@serenity-is/corelib / Fluent

Interface: Fluent<TElement>

Represents a Fluent object, which is similar to jQuery but works for only one element. It implements the ArrayLike interface and can have 0 (null) or 1 element.

Typeparam

TElement The type of the underlying HTML element.

Type parameters

Name	Type
`TElement`	extends `HTMLElement` = `HTMLElement`

Hierarchy

ArrayLike<TElement>

↳ Fluent

Indexable

▪ [n: number]: TElement

Gets the element at the specified index.

Param

The index of the element.

Constructors

constructor

Properties

Methods

Constructors

constructor

• constructor: Object

Inherited from

ArrayLike<TElement>.constructor

Properties

[iterator]

• [iterator]: TElement[]

Gets an iterator for the elements in the Fluent object.

Defined in

src/base/fluent.ts:219

length

• Readonly length: number

Gets the number of elements in the Fluent object. Can only be 1 or 0.

Overrides

ArrayLike.length

Defined in

src/base/fluent.ts:232

Methods

addClass

▸ addClass(value): this

Adds one or more classes to the element. Any falsy value is ignored.

Parameters

Name	Type	Description
`value`	`string` \| `boolean` \| (`string` \| `boolean`)[]	The class or classes to add. It can be a string, boolean, or an array of strings or booleans.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:19

after

▸ after(content): this

Inserts content after the element.

Parameters

Name	Type	Description
`content`	`string` \| `Node` \| `Fluent`<`any`>	The content to insert. It can be a string, a Node object, or another Fluent object.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:35

append

▸ append(child): this

Appends content to the element.

Parameters

Name	Type	Description
`child`	`string` \| `Node` \| `Fluent`<`any`>	The content to append. It can be a string, a Node object, or another Fluent object.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:27

appendTo

▸ appendTo(parent): this

Appends the element to the specified parent element.

Parameters

Name	Type	Description
`parent`	`Element` \| `Fluent`<`any`>	The parent element to append to. It can be an Element object or another Fluent object.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:43

attr

▸ attr(name): string

Gets the value of the specified attribute.

Parameters

Name	Type	Description
`name`	`string`	The name of the attribute.

Returns

string

The value of the attribute.

Defined in

src/base/fluent.ts:51

▸ attr(name, value): this

Sets the value of the specified attribute.

Parameters

Name	Type	Description
`name`	`string`	The name of the attribute.
`value`	`string` \| `number` \| `boolean`	The value of the attribute. If the value is falsy the attribute is removed.

Returns

this

The Fluent object itself if a value is provided.

Defined in

src/base/fluent.ts:60

before

▸ before(content): this

Inserts content before the element.

Parameters

Name	Type	Description
`content`	`string` \| `Node` \| `Fluent`<`any`>	The content to insert. It can be a string, a Node object, or another Fluent object.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:68

children

▸ children(selector?): HTMLElement[]

Gets the children of the element as an array (not Fluent)

Parameters

Name	Type	Description
`selector?`	`string`	Optional. A CSS selector to filter the children.

Returns

HTMLElement[]

An array of HTMLElement objects representing the children.

Defined in

src/base/fluent.ts:76

class

▸ class(value): this

Sets (overrides) the class attribute of the element. Any falsy value is ignored.

Parameters

Name	Type	Description
`value`	`string` \| `boolean` \| (`string` \| `boolean`)[]	The class or classes to add. It can be a string, boolean, or an array of strings or booleans.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:84

click

▸ click(): this

Triggers a click event on the element.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:91

▸ click(listener): this

Adds a click event listener on the element.

Parameters

Name	Type	Description
`listener`	(`e`: `MouseEvent`) => `void`	A callback function to execute when the click event is triggered.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:98

closest

▸ closest(selector): Fluent<HTMLElement>

Gets the closest ancestor of the element that matches the specified selector.

Parameters

Name	Type	Description
`selector`	`string`	A CSS selector to match against.

Returns

Fluent<HTMLElement>

A Fluent object representing the closest ancestor element.

Defined in

src/base/fluent.ts:106

data

▸ data(name): string

Gets or sets the value of the specified data attribute.

Parameters

Name	Type	Description
`name`	`string`	The name of the data attribute.

Returns

string

The value of the data attribute if no value is provided, or the Fluent object itself if a value is provided.

Defined in

src/base/fluent.ts:114

▸ data(name, value): this

Parameters

Name	Type
`name`	`string`
`value`	`string`

Returns

this

Defined in

src/base/fluent.ts:115

each

▸ each(callback): this

Executes a callback function for the element in the Fluent object if it is not null.

Parameters

Name	Type	Description
`callback`	(`el`: `TElement`) => `void`	The callback function to execute for each element.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:123

empty

▸ empty(): this

Removes all child nodes from the element. It also clears event handlers attached via Fluent, and disposes any attached widgets.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:137

findAll

▸ findAll<TElement>(selector): TElement[]

Finds all elements that match the specified selector within the element.

Type parameters

Name	Type
`TElement`	extends `HTMLElement` = `HTMLElement`

Parameters

Name	Type	Description
`selector`	`string`	A CSS selector to match against.

Returns

TElement[]

An array of elements that match the selector.

Typeparam

TElement The type of the found elements.

Defined in

src/base/fluent.ts:146

findEach

▸ findEach<TElement>(selector, callback): Fluent<HTMLElement>

Finds each element that matches the specified selector within the element and executes a callback function for each found element as a Fluent object.

Type parameters

Name	Type
`TElement`	extends `HTMLElement` = `HTMLElement`

Parameters

Name	Type	Description
`selector`	`string`	A CSS selector to match against.
`callback`	(`el`: `Fluent`<`TElement`>) => `void`	The callback function to execute for each found element. It receives a Fluent object for each element.

Returns

Fluent<HTMLElement>

The Fluent object itself.

Typeparam

TElement The type of the found elements.

Defined in

src/base/fluent.ts:156

findFirst

▸ findFirst<TElement>(selector): Fluent<TElement>

Finds the first element that matches the specified selector within the element.

Type parameters

Name	Type
`TElement`	extends `HTMLElement` = `HTMLElement`

Parameters

Name	Type	Description
`selector`	`string`	A CSS selector to match against.

Returns

Fluent<TElement>

A Fluent object representing the first element that matches the selector.

Typeparam

TElement The type of the found element.

Defined in

src/base/fluent.ts:165

focus

▸ focus(): this

Sets focus on the element.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:172

getNode

▸ getNode(): TElement

Gets the underlying HTML element.

Returns

TElement

The underlying HTML element.

Defined in

src/base/fluent.ts:130

getWidget

▸ getWidget<TWidget>(type?): TWidget

Gets the widget associated with the element.

Type parameters

Name
`TWidget`

Parameters

Name	Type	Description
`type?`	(...`args`: `any`[]) => `TWidget`	Optional. The constructor function of the widget.

Returns

TWidget

The widget associated with the element.

Typeparam

TWidget The type of the widget.

Defined in

src/base/fluent.ts:196

hasClass

▸ hasClass(klass): boolean

Checks if the element has the specified class.

Parameters

Name	Type	Description
`klass`	`string`	The class to check for.

Returns

boolean

true if the element has the class, false otherwise.

Defined in

src/base/fluent.ts:180

hide

▸ hide(): this

Hides the element by setting its display property to "none".

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:187

insertAfter

▸ insertAfter(referenceNode): this

Inserts the element after the specified reference element.

Parameters

Name	Type	Description
`referenceNode`	`HTMLElement` \| `Fluent`<`HTMLElement`>	The reference element to insert after. It can be an HTMLElement object or another Fluent object.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:204

insertBefore

▸ insertBefore(referenceNode): this

Inserts the element before the specified reference element.

Parameters

Name	Type	Description
`referenceNode`	`HTMLElement` \| `Fluent`<`HTMLElement`>	The reference element to insert before. It can be an HTMLElement object or another Fluent object.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:212

matches

▸ matches(selector): boolean

Checks if the element matches the specified selector.

Parameters

Name	Type	Description
`selector`	`string`	A CSS selector to match against.

Returns

boolean

true if the element matches the selector, false otherwise.

Defined in

src/base/fluent.ts:277

nextSibling

▸ nextSibling(selector?): Fluent<any>

Gets the next sibling element that matches the specified selector, or the first sibling if no selector is provided..

Parameters

Name	Type	Description
`selector?`	`string`	Optional. A CSS selector to filter the next sibling.

Returns

Fluent<any>

A Fluent object representing the next sibling element.

Defined in

src/base/fluent.ts:285

off

▸ off<K>(type, listener): this

Removes an event listener from the element.

Type parameters

Name	Type
`K`	extends keyof `HTMLElementEventMap`

Parameters

Name	Type	Description
`type`	`K`	The type of the event. It can include a ".namespace" similar to jQuery.
`listener`	(`this`: `HTMLElement`, `ev`: `HTMLElementEventMap`[`K`]) => `any`	The event listener to remove.

Returns

this

The Fluent object itself.

Typeparam

K The type of the event.

Defined in

src/base/fluent.ts:242

▸ off(type): this

Parameters

Name	Type
`type`	`string`

Returns

this

Defined in

src/base/fluent.ts:243

▸ off(type, listener): this

Parameters

Name	Type
`type`	`string`
`listener`	`EventListener`

Returns

this

Defined in

src/base/fluent.ts:244

▸ off(type, selector, delegationHandler): this

Parameters

Name	Type
`type`	`string`
`selector`	`string`
`delegationHandler`	`Function`

Returns

this

Defined in

src/base/fluent.ts:245

on

▸ on<K>(type, listener): this

Adds an event listener to the element. It is possible to use delegated events like jQuery.

Type parameters

Name	Type
`K`	extends keyof `HTMLElementEventMap`

Parameters

Name	Type	Description
`type`	`K`	The type of the event. It can include a ".namespace" similar to jQuery.
`listener`	(`this`: `HTMLElement`, `ev`: `HTMLElementEventMap`[`K`]) => `any`	The event listener to add.

Returns

this

The Fluent object itself.

Typeparam

K The type of the event.

Defined in

src/base/fluent.ts:255

▸ on(type, listener): this

Parameters

Name	Type
`type`	`string`
`listener`	`EventListener`

Returns

this

Defined in

src/base/fluent.ts:256

▸ on(type, selector, delegationHandler): this

Parameters

Name	Type
`type`	`string`
`selector`	`string`
`delegationHandler`	`Function`

Returns

this

Defined in

src/base/fluent.ts:257

one

▸ one<K>(type, listener): this

Adds a one-time event listener to the element. It is possible to use delegated events like jQuery.

Type parameters

Name	Type
`K`	extends keyof `HTMLElementEventMap`

Parameters

Name	Type	Description
`type`	`K`	The type of the event. It can include a ".namespace" similar to jQuery.
`listener`	(`this`: `HTMLElement`, `ev`: `HTMLElementEventMap`[`K`]) => `any`	The event listener to add.

Returns

this

The Fluent object itself.

Typeparam

K The type of the event.

Defined in

src/base/fluent.ts:267

▸ one(type, listener): this

Parameters

Name	Type
`type`	`string`
`listener`	`EventListener`

Returns

this

Defined in

src/base/fluent.ts:268

▸ one(type, selector, delegationHandler): this

Parameters

Name	Type
`type`	`string`
`selector`	`string`
`delegationHandler`	`Function`

Returns

this

Defined in

src/base/fluent.ts:269

parent

▸ parent(): Fluent<HTMLElement>

Gets the parent element of the element.

Returns

Fluent<HTMLElement>

A Fluent object representing the parent element.

Defined in

src/base/fluent.ts:292

prepend

▸ prepend(child): this

Prepends content to the element.

Parameters

Name	Type	Description
`child`	`string` \| `Node` \| `Fluent`<`any`>	The content to prepend. It can be a string, a Node object, or another Fluent object.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:300

prependTo

▸ prependTo(parent): this

Prepends the element to the specified parent element.

Parameters

Name	Type	Description
`parent`	`Element` \| `Fluent`<`any`>	The parent element to prepend to. It can be an Element object or another Fluent object.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:308

prevSibling

▸ prevSibling(selector?): Fluent<any>

Gets the previous sibling element that matches the specified selector, or the first sibling if no selector is provided.

Parameters

Name	Type	Description
`selector?`	`string`	Optional. A CSS selector to filter the previous sibling.

Returns

Fluent<any>

A Fluent object representing the previous sibling element.

Defined in

src/base/fluent.ts:316

remove

▸ remove(): this

Removes the element from the DOM. It also removes event handlers and disposes widgets by calling "remove" event handlers.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:323

removeAttr

▸ removeAttr(name): this

Removes the specified attribute from the element.

Parameters

Name	Type	Description
`name`	`string`	The name of the attribute to remove.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:331

removeClass

▸ removeClass(value): this

Removes one or more classes from the element. Any falsy value is ignored.

Parameters

Name	Type	Description
`value`	`string` \| `boolean` \| (`string` \| `boolean`)[]	The class or classes to remove. It can be a string, boolean, or an array of strings or booleans.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:339

show

▸ show(): this

Shows the element by setting its display property to empty string.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:346

style

▸ style(callback): this

Executes a callback function to modify the inline style of the element.

Parameters

Name	Type	Description
`callback`	(`css`: `CSSStyleDeclaration`) => `void`	The callback function to modify the inline style.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:354

text

▸ text(): string

Gets or sets the text content of the element.

Returns

string

The text content of the element if no value is provided, or the Fluent object itself if a value is provided.

Defined in

src/base/fluent.ts:361

▸ text(value): this

Parameters

Name	Type
`value`	`string`

Returns

this

Defined in

src/base/fluent.ts:362

toggle

▸ toggle(flag?): this

Toggles the visibility of the element.

Parameters

Name	Type	Description
`flag?`	`boolean`	Optional. A flag indicating whether to show or hide the element. If not provided, the visibility will be toggled.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:370

toggleClass

▸ toggleClass(value, add?): this

Toggles one or more classes on the element. If the class exists, it is removed; otherwise, it is added.

Parameters

Name	Type	Description
`value`	`string` \| `boolean` \| (`string` \| `boolean`)[]	The class or classes to toggle. It can be a string, boolean, or an array of strings or booleans.
`add?`	`boolean`	-

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:378

trigger

▸ trigger(type, args?): this

Triggers a specified event on the element.

Parameters

Name	Type	Description
`type`	`string`	The type of the event to trigger.
`args?`	`any`	Optional. An object that specifies event-specific initialization properties.

Returns

this

The Fluent object itself.

Defined in

src/base/fluent.ts:387

tryGetWidget

▸ tryGetWidget<TWidget>(type?): TWidget

Tries to get the widget associated with the element.

Type parameters

Name
`TWidget`

Parameters

Name	Type	Description
`type?`	(...`args`: `any`[]) => `TWidget`	Optional. The constructor function of the widget.

Returns

TWidget

The widget associated with the element, or null if no widget is found.

Typeparam

TWidget The type of the widget.

Defined in

src/base/fluent.ts:396

val

▸ val(value): this

Gets or sets the value of the element.

Parameters

Name	Type	Description
`value`	`string`	The value to set. If no value is provided, returns the current value of the element.

Returns

this

The value of the element if no value is provided, or the Fluent object itself if a value is provided.

Defined in

src/base/fluent.ts:404

▸ val(): string

Returns

string

Defined in

src/base/fluent.ts:405

byId

▸ byId<TElement>(id): Fluent<TElement>

Finds the first element having the specified ID within the document.

Type parameters

Name	Type
`TElement`	extends `HTMLElement`

Parameters

Name	Type	Description
`id`	`string`	The ID

Returns

Fluent<TElement>

A Fluent instance representing the first matching element, or null if no match is found.

Defined in

src/base/fluent.ts:982

findAll

▸ findAll<TElement>(selector): TElement[]

Finds all elements matching the specified selector within the document.

Type parameters

Name	Type
`TElement`	extends `HTMLElement`

Parameters

Name	Type	Description
`selector`	`string`	The CSS selector to search for.

Returns

TElement[]

An array of HTML elements matching the selector.

Defined in

src/base/fluent.ts:992

findEach

▸ findEach<TElement>(selector, callback): void

Iterates over all elements matching the specified selector within the document.

Type parameters

Name	Type
`TElement`	extends `HTMLElement`

Parameters

Name	Type	Description
`selector`	`string`	The CSS selector to search for.
`callback`	(`el`: `Fluent`<`TElement`>) => `void`	A function to execute for each matching element. Receives a Fluent object.

Returns

void

Defined in

src/base/fluent.ts:1002

findFirst

▸ findFirst<TElement>(selector): Fluent<TElement>

Finds the first element matching the specified selector within the document.

Type parameters

Name	Type
`TElement`	extends `HTMLElement`

Parameters

Name	Type	Description
`selector`	`string`	The CSS selector to search for.

Returns

Fluent<TElement>

A Fluent instance representing the first matching element, or null if no match is found.

Defined in

src/base/fluent.ts:1013

ready

▸ ready(callback): void

Parameters

Name	Type
`callback`	() => `void`

Returns

void

Defined in

src/base/fluent.ts:955

Interface: Fluent<TElement>

Type parameters

Hierarchy

Indexable

Table of contents

Constructors

Properties

Methods

Constructors

constructor

Inherited from

Properties

[iterator]

Defined in

length

Overrides

Defined in

Methods

addClass

Parameters

Returns

Defined in

after

Parameters

Returns

Defined in

append

Parameters

Returns

Defined in

appendTo

Parameters

Returns

Defined in

attr

Parameters

Returns

Defined in

Parameters

Returns

Defined in

before

Parameters

Returns

Defined in

children

Parameters

Returns

Defined in

class

Parameters

Returns

Defined in

click

Returns

Defined in

Parameters

Returns

Defined in

closest

Parameters

Returns

Defined in

data

Parameters

Returns

Defined in

Parameters

Returns

Defined in

each

Parameters

Returns

Defined in

empty

Returns

Defined in

findAll

Type parameters

Parameters