Aqua Basis

Aqua Enums

Enums provide a standardized and type-safe way to define constant values such as alignment rules or custom event names. They improve consistency, avoid magic strings, and help developers quickly identify allowed values when configuring components.

Aligment

Defines the possible values for horizontal content alignment within a component.

Used commonly in table cells, dropdowns, headers, or layout configurations.

{
  LEFT = 'left',
  CENTER = 'center',
  RIGHT = 'right',
  UNSET = 'unset',
}

Enum	Description
`LEFT`	Aligns content to the left edge of the container.
`CENTER`	Aligns content to the center of the container.
`RIGHT`	Aligns content to the right edge of the container.
`UNSET`	Works like a null value for the container.

Events

These string constants help standardize communication between components via CustomEvent dispatching and listeners.

{
  EVENT_NAME_OPEN = 'open',
  EVENT_NAME_CLOSE = 'close',
  EVENT_NAME_TOGGLE = 'toggle',
  EVENT_NAME_OPEN_GLOBAL_COLLAPSE = 'aq:open:collapse',
  EVENT_NAME_HIDE_GLOBAL_COLLAPSE = 'aq:hide:collapse',
  EVENT_NAME_TOGGLE_GLOBAL_COLLAPSE = 'aq:toggle:collapse',
}

Enum	Description
`EVENT_NAME_OPEN`	Emits an `open` event. Typically used to open a dropdown, modal, or popover.
`EVENT_NAME_CLOSE`	Emits a `close` event. Used to close UI elements like dropdowns or banners.
`EVENT_NAME_TOGGLE`	Emits a `toggle` event. Switches the visibility or active state of a component.
`EVENT_NAME_OPEN_GLOBAL_COLLAPSE`	Triggers the global open of an `aq-collapse` component. Event: `'aq:open:collapse'`.
`EVENT_NAME_HIDE_GLOBAL_COLLAPSE`	Triggers the global hide of a collapse element. Event: `'aq:hide:collapse'`.
`EVENT_NAME_TOGGLE_GLOBAL_COLLAPSE`	Triggers the global toggle of a collapse element. Event: `'aq:toggle:collapse'`.

PopoverWidths

Defines the available width options for popover-based components such as dropdowns, menus, and tooltips.

{
  'FULL' = 'full',
  'AUTO' = 'auto',
  'DEFAULT' = 'default',
}

Enum	Description
`FULL`	Sets the popover width to match the width of its activator element.
`AUTO`	Allows the popover width to adapt to its content.
`DEFAULT`	Applies the default width defined by the component’s internal logic.

DisplayFormat

Specifies the available display styles for rendering certain UI elements, defining whether content is hidden, numbered, or displayed as text.

{
  NONE = 'is-none',
  NUMBERED = 'is-number',
  TEXT = 'is-text',
}

Enum	Description
`NONE`	Hides any display format, rendering no additional markers or labels.
`NUMBERED`	Displays a numeric format, typically for steps or ordered sequences.
`TEXT`	Displays a text-based format, useful for labels or descriptive indicators.

StateStyle

Defines a set of visual state classes that represent the current status of a component.

These states can be applied to communicate progress, results, or activity conditions through standardized CSS classes.

{
  ACTIVE = 'is-active',
  SUCCESS = 'is-success',
  ERROR = 'is-error',
  PAUSED = 'is-paused',
}

Enum	Description
`ACTIVE`	Indicates that the component is currently active or running.
`SUCCESS`	Represents a successful state or completion of a process.
`ERROR`	Signals an error state or a failed process.
`PAUSED`	Indicates that the component is currently paused or on hold.

Variant

Defines a set of visual variants and classes that indicate the current status of a component. These are based on the extended colour paletter and helps to communicate progress, results, or activity states through standardized CSS classes.

{
  ACCENT = 'accent',
  ALERT = 'alert',
  HIGHLIGHT = 'highlight',
  INFO = 'info',
  POSITIVE = 'positive',
  SUPPORT = 'support',
  DEFAULT = 'default'
}

| --- | --- |

Directives

Defines the mapping of directive identifiers to their corresponding Aqua components. These identifiers are used internally by the directive system to recognize and apply the correct behavior when directives are registered and bound to HTML elements.

{
  SPINNER = 'aq-spinner',
  DIALOG = 'aq-dialog',
  DRAWER = 'aq-drawer',
  TOOLTIP = 'aq-tooltip',
}

| --- | --- |