Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Icons

FAQ

Aqua Basis

Aqua Composition

Aqua Types

This section documents globally shared types that serves as utility definitions that simplify component logic and promote consistency in dynamic behavior and style application.

Trigger

Represents the set of elements that can act as activators for a component (e.g., tooltips or dropdowns).

It supports either a direct array of Element[] or a NodeList, providing flexibility when working with DOM selections.

Useful when initializing popovers or binding behavior to multiple triggers dynamically.

Element[] | NodeList;

StyleClassMap

Describes a dynamic object where the keys represent CSS class names and the values determine whether the class should be applied (true|false). Used to conditionally style rendering.

 {
	 [className: string]: boolean
 };

AlignType

Represents the set of valid alignment values that can be applied to the pagination component.

It excludes the unset value, ensuring only concrete alignment options are allowed.

[ALIGNMENT](<https://masivapp.notion.site/Enums-2401de3976b980b0b29fde297aa6c4ad>) | `${[ALIGNMENT](<https://masivapp.notion.site/Enums-2401de3976b980b0b29fde297aa6c4ad>)}`

AlignTypeUnsetted

Represents all possible alignment values, including both the defined positions and the unset state.

Useful for scenarios where the alignment may be intentionally left unspecified.

Exclude<[ALIGNMENT](<https://masivapp.notion.site/Enums-2401de3976b980b0b29fde297aa6c4ad>), UNSET> | `${Exclude<[ALIGNMENT](<https://masivapp.notion.site/Enums-2401de3976b980b0b29fde297aa6c4ad>), UNSET>}`

DisplayFormat

Represents the valid values for configuring the display format of a component.

This type accepts either a DISPLAY_FORMATenum value or its string literal equivalent, allowing flexibility when defining formats in code.

DISPLAY_FORMAT | `${DISPLAY_FORMAT}`

StateStyle

Represents the valid values for configuring the visual state style of a component.

This type accepts either a STATE_STYLE enum value or its string literal equivalent, enabling consistent and standardized styling across components.

STATE_STYLE | `${STATE_STYLE}`

StepOption

Defines all the properties that describe the configuration and state of a step in the component. It manages the step’s identification, title, state, additional information, associated buttons, and visual status.

{
  id: string;
  title: string;
  state: string;
  subtitle?: string;
  info?: string;
  stepStatus?: 'default' | 'active' | 'complete' | 'error' | 'activeWithError';
  buttonEdit?: string;
  buttonPrimary?: string;
  contentState?: string;
  buttonTertiary?: string;
  buttonSecondary?: string;
}
Key Description Example
id Unique identifier for the step. "step-1"
title Step title, displayed to identify it visually. "Settings"
state Current state of the step, used to control its behavior or rendering. "active"
subtitle (Optional) Subtitle that complements the main title. "Optional setup"
info (Optional) Extra information or details related to the step. "Some details"
stepStatus (Optional) Visual status of the step. Can be 'default', 'active', 'complete', 'error', or 'activeWithError'. "complete"
buttonEdit (Optional) Text or label for the edit button. "Edit"
buttonPrimary (Optional) Text or label for the primary button. "Save"
contentState (Optional) State or additional content associated with the step. "draft"
buttonTertiary (Optional) Text or label for the tertiary button. "Cancel"
buttonSecondary (Optional) Text or label for the secondary button. "Back"

IStepOptionItem

This type is a reduced version of StepOption, created with Pick to include only the properties needed when the full step data is not required.

Pick<StepOption, 'id' | 'contentState' | 'buttonPrimary' | 'buttonSecondary' | 'buttonTertiary'>;

VariantType

Represents a simplified version of the Variant enum. It is a utility type that narrows down the possible values to the specific variant keys, ensuring that only valid variant strings can be used.

This type is especially useful when you don’t need the full Variant definition or its additional metadata, but only the literal values that define the style or state of a component.

Variant | `${Variant}`