Skip to main content

Card class

📖 Description​

The Card class is an abstract class for creating feature cards for the Tripetto builder. Feature cards are used to define (groups of) UI elements that control a certain feature. For example, the Forms.Form card is used to define a collection of input controls.

🆕 constructor​

Creates a new Card instance.

Signature​

constructor(
  modes?: Mode
): Card

Parameters​

NameTypeOptionalDescription
modesModeYesSpecifies the supported modes for the card (default is Both).

Return value​

Returns a reference to the new Card instance.

🗃️ Fields​

🏷️ context​

Retrieves a reference to the card context.

Type​

Element | undefined

🏷️ element​

Retrieves a reference to the card element.

Type​

Element | undefined

🏷️ feature​

Sets or retrieves a reference to the feature.

Type​

Feature | undefined

🏷️ isActivated​

Retrieves if the card is activated.

Type​

boolean

🏷️ isAwaiting​

Retrieves if the card validation is awaiting.

Type​

boolean

🏷️ isDrawn​

Retrieves if the card is drawn.

Type​

boolean

🏷️ isEmpty​

Sets or retrieves if the card is empty (has no visible content).

Type​

boolean

🏷️ isFailed​

Retrieves if the card validation has failed.

Type​

boolean

🏷️ isFirstObservable​

Retrieves if this card is the first observable card.

Type​

boolean

🏷️ isInitialized​

Retrieves if the card is initialized.

Type​

boolean

🏷️ isInvalid​

Retrieves if the card validation is invalid.

Type​

boolean

🏷️ isLastObservable​

Retrieves if this card is the last observable card.

Type​

boolean

🏷️ isMeasurable​

Retrieves if the card is measurable.

Type​

boolean

🏷️ isMeasured​

Retrieves if the card is measured.

Type​

boolean

🏷️ isModeCompact​

Retrieves if the compact mode is active.

Type​

boolean

🏷️ isModeNormal​

Retrieves if the normal mode is active.

Type​

boolean

🏷️ isObservable​

Retrieves if the card is observable.

Type​

boolean

🏷️ isPassed​

Retrieves if the card validation has passed.

Type​

boolean

🏷️ isReady​

Retrieves if the card is ready.

Type​

boolean

🏷️ isVisible​

Sets or retrieves if the card is visible.

Type​

boolean

🏷️ mode​

Retrieves the mode.

Type​

Mode

🏷️ modes​

Retrieves the supported modes for the card.

Type​

Mode

🏷️ position​

Returns the position of the card.

Type​

number

🏷️ stylesheet​

Retrieves a reference to the stylesheet.

Type​

Stylesheet

🏷️ tail​

Returns the tail for the card.

Type​

number

🏷️ validation​

Retrieves the validation state of the card.

Type​

"unknown" | "fail" | "invalid" | "pass" | "await"

▶️ Methods​

🔧 deactivate​

Deactivates the card.

Signature​

deactivate(): this

Return value​

Returns a reference to the Card instance to allow chaining.

🔧 destroy​

Destroys the card.

Signature​

destroy(): void

🔧 focus​

Captures focus to the card.

Signature​

focus(to?: "first" | "last"): boolean

Parameters​

NameTypeOptionalDescription
to"first" | "last"YesSpecifies if the focus is set to the first or last item in the card.

Return value​

Returns true if the focus is captured.

🔧 hide​

Hides the card.

Signature​

hide(): this

Return value​

Returns a reference to the Card instance to allow chaining.

🔧 initialized​

Marks the card as initialized.

Signature​

initialized(): void

🔧 measure​

Measures the size of the card.

Signature​

measure(size?: number): boolean

Parameters​

NameTypeOptionalDescription
sizenumberYesSpecifies the size.

Return value​

Returns true if the size is changed.

🔧 measured​

Card is measured.

Signature​

measured(): void

🔧 onActivate​

Invoked when the card is activated.

Signature​

onActivate(): void

🔧 onDeactivate​

Invoked when the card is deactivated.

Signature​

onDeactivate(): void

🔧 onDestroy​

Invoked when the card is destroyed.

Signature​

onDestroy(): void

🔧 onDraw​

Draws the card.

Signature​

onDraw(context: Element): void

Parameters​

NameTypeOptionalDescription
contextElementNoReference to the element to draw to.

🔧 onHide​

Invoked when the card is hidden.

Signature​

onHide(): void

🔧 onInit​

Invoked when the card is initialized.

Signature​

onInit(): void

Return value​

Returns the initialization state. If true is returned this indicates the card is initialized. If you return false the system waits for a call to the Initialized method.

🔧 onMeasure​

Invoked when the card is measured. A measure correction in pixels can be supplied in the return value.

Signature​

onMeasure(): number

Return value​

Returns the measure correction for the card.

🔧 onMode​

Invoked when the mode of the card is changed.

Signature​

onMode(): void

🔧 onPop​

Invoked when a card is popped.

Signature​

onPop(): void

🔧 onReady​

Invoked when the card is ready.

Signature​

onReady(): void

🔧 onRequestAutoFocus​

Invoked when the card receives an auto-focus request.

Signature​

onRequestAutoFocus(): void

Return value​

Returns true if the card accepted the auto-focus request.

🔧 onRequestFocus​

Invoked when the card receives a focus request.

Signature​

onRequestFocus(): void

Return value​

Returns true if the card accepted the focus request.

🔧 onResize​

Invoked when the card layer is resized.

Signature​

onResize(): void

🔧 onResized​

Invoked when the card itself is resized.

Signature​

onResized(): void

🔧 onShow​

Invoked when the card is shown.

Signature​

onShow(): void

🔧 onValidate​

Invoked when the card needs to be validated.

Signature​

onValidate(callback: Callback): "unknown" | "fail" | "invalid" | "pass" | "await" | Callback

Parameters​

NameTypeOptionalDescription
callbackCallbackNoReference to the callback. Pass this object as return value to enable the asynchronous validation callback.

Return value​

Returns the validation state.

🔧 onValidated​

Invoked when the card is validated.

Signature​

onValidated(): void

🔧 ready​

Marks the card as ready.

Signature​

ready(): void

🔧 resize​

Resizes the card.

Signature​

resize(): void

🔧 scrollIntoView​

Scrolls the card (or an specific element of the card) into view.

Signature​

scrollIntoView(element?: Element, onlyWhenInvisible?: boolean): this

Parameters​

NameTypeOptionalDescription
elementElementYesSpecifies an optional element of the card to scroll into view.
onlyWhenInvisiblebooleanYesSpecifies if the scroll into view is only done when the element is invisible.

Return value​

Returns a reference to the Card instance to allow chaining.

🔧 show​

Shows the card.

Signature​

show(): this

Return value​

Returns a reference to the Card instance to allow chaining.

🔧 validate​

Validates the card.

Signature​

validate(): this

Return value​

Returns a reference to the Card instance to allow chaining.

🔧 visible​

Shows or hides the card.

Signature​

visible(visible: boolean, scrollIntoView?: boolean): this

Parameters​

NameTypeOptionalDescription
visiblebooleanNoSpecifies if the card is visible.
scrollIntoViewbooleanYesSpecifies if the card should scroll into view.

Return value​

Returns a reference to the Card instance to allow chaining.

📇 Enums​

🔗 Mode​

Describes the enum for the modes.

Type declaration​

enum Mode {
  /* Card can only be used in normal mode. */
  Normal = 1,

  /* Card can only be used in compact mode. */
  Compact = 2,

  /* Card can be used in both modes. */
  Both = 3,
}