@brokerize/elements

Interfaces

ModalService

Service interface for managing modal dialogs and user interactions.

The ModalService provides a centralized way to display various types of modal dialogs including security information, confirmation prompts, custom dialogs, and session TAN authentication modals. It supports activation/deactivation and method overriding for customization.

Methods

activate()

activate(): void;

Activates the modal service for use.

Returns

void

deactivate()

deactivate(): void;

Deactivates the modal service.

Returns

void

override()

override(overrides): void;

Overrides methods of the modal service with custom implementations.

Parameters

Parameter	Type	Description
overrides	Partial<ModalService>	Partial object containing methods to override.

Returns

void

showConfirm()

showConfirm(msg): Promise<boolean>;

Shows a confirmation dialog and returns a promise that resolves to the user's choice.

Parameters

Parameter	Type	Description
msg	string	The confirmation message to display.

Returns

Promise<boolean>

A promise that resolves to true if confirmed, false otherwise.

showDetailedTable()

showDetailedTable(table): void;

Shows a detailed table modal.

Parameters

Parameter	Type	Description
table	GenericTable	The generic table data to display.

Returns

void

showDialog()

showDialog(dialogConfig): Promise<DialogResult>;

Shows a custom dialog based on the provided configuration.

Parameters

Parameter	Type	Description
dialogConfig	DialogConfig	Configuration for the dialog to display.

Returns

Promise<DialogResult>

A promise that resolves with the dialog result.

showLoginForm()

showLoginForm(
   brokerName, 
   returnToUrl, 
   redirect): void;

Shows a login form modal for a specific broker.

Parameters

Parameter	Type	Description
brokerName	any	The name of the broker.
returnToUrl	string	The URL to return to after login.
redirect	(redirecTo) => void	Optional callback for handling redirects.

Returns

void

showPositionDetail()

showPositionDetail(
   position, 
   row?, 
   header?, 
   handleTableAction?): void;

Shows position details in a modal.

Parameters

Parameter	Type	Description
position	Position	The position data to display.
row?	TableRow	Optional table row data.
header?	Header	Optional table header data.
handleTableAction?	(actionId, rowId) => void	Optional callback for table actions.

Returns

void

showReceipt()

showReceipt(
   data, 
   showActions, 
   handleOrderTableAction): void;

Shows an order receipt modal.

Parameters

Parameter	Type	Description
data	ReceiptData	The receipt data to display.
showActions	boolean	Whether to show action buttons in the receipt.
handleOrderTableAction	(e) => void	Callback for handling order table actions.

Returns

void

showSecurityInformation()

showSecurityInformation(title, content): void;

Shows security information in a modal dialog.

Parameters

Parameter	Type	Description
title	string	The title of the security information dialog.
content	string	The content to display in the dialog.

Returns

void

showSessionTanModal()

showSessionTanModal(sessionId): void;

Shows a session TAN modal for two-factor authentication.

Parameters

Parameter	Type	Description
sessionId	string	The ID of the session requiring TAN input.

Returns

void

showToast()

showToast(opts): void;

Shows a toast notification.

Parameters

Parameter	Type	Description
opts	ToastOptions	Options for the toast notification.

Returns

void

Type Aliases

BrokerizeBaseConfig

type BrokerizeBaseConfig = object;

Properties

Property	Type	Description
addFrame?	boolean	If true, a frame with some "powered by brokerize" information and links will be added to the component.
authorizedApiContext	AuthorizedApiContext	‐
openExternalLink?	openExternalLinkCallback	If provided, the function will be used to open external links (e.g. for cost estimation documents). If not provided, this will default to creating a window using window.open. Param the URL to open
renderConfig?	BrokerizeRenderConfig	Deprecated just provide the theme in config objects directly
renderTo	HTMLElement	‐
saveDownloadedFile?	SaveDownloadedFile	If provided, overrides the "save to disk" behavior. Defaults to creating an a HTML element and issuing a click event on that, which works fine in browsers but not in mobile apps. Param the downloaded file to save
supportLink?	SupportLink	If provided, a support link will be added to footers (only if addFrame is used),
theme?	Theme	Optionally provide a theme, otherwise a default theme will be used.

---

BrokerizeElement

type BrokerizeElement = object;

Represents a brokerize UI component instance. Provides methods to manage the component's lifecycle and appearance.

Properties

Property	Type	Description
destroy	() => void	Destroys the component and cleans up all resources. Must be called when the component is no longer needed to prevent memory leaks.
theme	Theme	The current theme applied to the component. Can be modified to dynamically change the component's styling.

---

BrokerizeElements

type BrokerizeElements = object;

Properties

Property	Type	Description
configure	(config) => void	Configure global settings for Brokerize Elements. The global configuration is shared across all instances of Brokerize Elements. All configuration parameters are optional.
createBrokerizeMain	(cfg) => BrokerizeMainElement	Creates the main brokerize component providing a complete trading interface. This is the primary entry point for full-featured trading applications.
createBrokerList	(cfg) => BrokerizeElement	Creates a broker list component for selecting and managing broker connections.
createBrokerLoginForm	(cfg) => BrokerizeElement	Creates a broker login form for authenticating with specific brokers.
createCancelOrderForm	(cfg) => BrokerizeElement	Creates a cancel order form for cancelling pending orders.
createChangeOrderForm	(cfg) => BrokerizeElement	Creates a change order form for modifying existing orders.
createLoader	(cfg) => BrokerizeElement	Creates a loader component for displaying loading states.
createModalHost	(cfg) => BrokerizeElement	Creates a modal host for displaying dialogs and modals.
createOrderForm	(cfg) => BrokerizeElement	Creates an order form for placing new trading orders.
createOrderReceipt	(cfg) => BrokerizeElement	Creates an order receipt component for displaying order execution details.
createOrderTable	(cfg) => BrokerizeElement	Creates an order table for viewing and managing trading orders.
createOverview	(cfg) => BrokerizeElement	Creates an overview component for high-level portfolio and account information.
createPortfolioTable	(cfg) => BrokerizeElement	Creates a portfolio table displaying user's investment portfolios.
createPortfolioView	(cfg) => BrokerizeElement	Creates a comprehensive portfolio view with integrated trading capabilities.
createPositionsTable	(cfg) => BrokerizeElement	Creates a positions table showing current portfolio positions.
createSessionsTable	(cfg) => BrokerizeElement	Creates a sessions table for managing active broker sessions.
createSessionTanForm	(cfg) => BrokerizeElement	Creates a session TAN form for two-factor authentication during broker sessions.
createStylingUIExample	(cfg) => BrokerizeElement	Creates a styling UI example component for theme development and testing.
modalService	ModalService	Service for managing modal dialogs across the application.
themingTokenDefaults	ThemeTokens	The default theming token values. This can be used for building theme designers or inspecting themes together with createStylingUIExample.

---

BrokerizeElementsGlobalConfiguration

type BrokerizeElementsGlobalConfiguration = object;

Properties

Property	Type	Description
assetsPath?	string	Optionally provide a path where static assets (image files) can be loaded from. If it is not provided, assets will be included from https://assets.brokerize.com, so make sure your Content-Security-Policy allows this. If you bundle the assets yourself (have a look at the @brokerize/elements assets subdirectory), you can change this path. This makes sense if you are building a mobile app where you can bundle the assets together with other app resources.

---

BrokerizeLoaderVariant

type BrokerizeLoaderVariant = "brokerize" | "spinner" | "order" | "loading";

Variants for the brokerize loader component.

---

BrokerizeMainConfig

type BrokerizeMainConfig = BrokerizeBaseConfig & object;

Type Declaration

Name	Type	Description
onNavigationStateChange()?	(state) => void	‐
preferredExchangeId?	number	Can be provided to pick a default exchange from the known brokerize exchanges. Note that it may be ignored depending on broker's preferences.
returnToUrl?	string	If provided, OAuth broker logins will return to this URL. Defaults to window.location.href.
useNavigation?	boolean	‐

---

BrokerizeMainElement

type BrokerizeMainElement = BrokerizeElement & object;

Represents the main brokerize component with navigation capabilities. Extends BrokerizeElement with navigation functionality for complex trading interfaces.

Type Declaration

Name	Type	Description
navigation	BrokerizeNavigation	Navigation object providing methods to navigate within the brokerize interface.

---

BrokerizeNavigation

type BrokerizeNavigation = object;

Properties

Property	Type	Description
NavigateToChangeBroker	() => void	Deprecated use NavigateToOverview instead
NavigateToDepot	() => void	Deprecated use NavigateToOverview instead
NavigateToOrderForm	(_isin, _initialOrderCreateValues) => void	Deprecated will be removed in a later version. Please us startOrderFlow instead.
navigateToOverview	() => void	Shows the overview over current portfolios and sessions of the user. From there, they can navigate into one portfolio or add new broker logins.
navigateToPortfolio	(portfolioId) => void	‐
NavigateToPortfolio	(portfolioId) => void	Deprecated will be removed in a later version. Please us navigateToPortfolio instead.
NavigateToSessions	() => void	Deprecated use NavigateToOverview instead
startOrderFlow	(orderFlowParams) => void	Initiates the desired order flow. This may trigger a login redirect or directly show an order form, depending on which state the session is currently in. If the user is logged in to a broker, that one will be used and the brokerName parameter is ignored. If the user is logged in to a broker, but the desired portfolioId is not part of the list, a different portfolio may be used etc.

---

BrokerizeRenderConfig

type BrokerizeRenderConfig = object;

Deprecated

Properties

Property	Type
assetsPath?	string
theme	Theme

---

BrokerizeSummaryData

type BrokerizeSummaryData = object & any;

Summary data for brokerize elements, containing a title and additional arbitrary data.

Type Declaration

Name	Type
title	string

---

BrokerListConfig

type BrokerListConfig = object & BrokerizeBaseConfig;

Type Declaration

Name	Type	Description
brokerName?	string	Optional: pre-selected broker name to highlight or filter.
confirmationStorage?	ConfirmationStorage	Optional storage for user confirmations and agreements.
disclaimerPrefixHtml?	string	brokerize-internal
infoPreamble?	string	brokerize-internal
onLogin()	(data) => void	Callback triggered when user initiates login to a broker.

---

BrokerLoginFormConfig

type BrokerLoginFormConfig = object & BrokerizeBaseConfig;

Type Declaration

Name	Type	Description
brokerName	string	‐
credentialsStore?	CredentialsStore	If provided, the store will be used to try load and store broker credentials. Note that this MUST be a safe storage, as it contains the user's full broker login data (username and password). This is designed to be only used in native apps, where those credentials can be stored safely (e.g. encrypted in the Secure Encalve). If in doubt, DO NOT provide a CredentialsStore. Deprecated credentials will only be interacted with on external OAuth pages
env?	string	If this is given, only this env will be available. Clients may choose to store the environment after a successful login so that users may skip the env selection.
onExit()	(loggedIn) => void	Callback triggered when user exits the login form.
onRedirect()?	(url) => void	If provided, this function will be called to start a broker OAuth login. Defaults to setting window.location.href to the url.
returnToUrl?	string	If provided, OAuth broker logins will return to this URL. Defaults to window.location.href.

---

CancelOrderFormConfig

type CancelOrderFormConfig = object & BrokerizeBaseConfig;

Type Declaration

Name	Type	Description
onExit()	() => void	Callback triggered when user exits the cancel order form.
onNavigate()	(linkTarget) => void	Callback for navigation events.
orderId	string	ID of the order to be cancelled.
reportingTag?	string	Optional reportingTag to send with order creates. ReportingTags appear in order reports.

---

ChangeOrderFormConfig

type ChangeOrderFormConfig = object & BrokerizeBaseConfig;

Type Declaration

Name	Type	Description
onExit()	() => void	Callback triggered when user exits the change order form.
orderId	string	ID of the order to be changed.
reportingTag?	string	Optional reportingTag to send with order creates. ReportingTags appear in order reports.

---

ConfirmationStorage

type ConfirmationStorage = object;

Methods

getTermsAccepted()

getTermsAccepted(termsId): ConfirmItemAcceptanceEntry;

Retrieves the acceptance entry for specific terms.

Parameters

Parameter	Type	Description
termsId	string	Unique identifier for the terms.

Returns

ConfirmItemAcceptanceEntry

The acceptance entry or null/undefined if not accepted.

setTermsAccepted()

setTermsAccepted(termsId, entry): any;

Sets or removes the acceptance entry for specific terms.

Parameters

Parameter	Type	Description
termsId	string	Unique identifier for the terms.
entry	ConfirmItemAcceptanceEntry	The acceptance entry to set, or null to remove.

Returns

any

---

ConfirmItemAcceptanceEntry

type ConfirmItemAcceptanceEntry = object;

Properties

Property	Type	Description
acceptedAt	number	Timestamp when the terms were accepted.

---

CredentialsStore

type CredentialsStore = object;

Properties

Property	Type	Description
loadCredentials	(brokerName) => Promise<string | null>	Loads stored credentials for a specific broker.
storeCredentials	(displayLabel, brokerName, value) => Promise<void>	Stores user credentials for a specific broker.

---

DataCellValue

type DataCellValue = 
  | DataCellValueString
  | DataCellValueBrokerName
  | DataCellValueDateTime
  | DataCellValueDate
  | DataCellValueAmount
  | DataCellValueLink
  | DataCellValueActions
  | DataCellValueOrderValidity
  | DataCellValueOrderTrailingDistance
  | DataCellValueProfitLossRel
  | DataCellValueProfitLossAbs
  | DataCellValueImage
  | DataCellValueHtml
  | DataCellValueDebug
  | DataCellValueOrderModelBadge
  | DataCellValuePlainText;

---

DataCellValueActions

type DataCellValueActions = object;

Properties

Property	Type
type	"actions"
value	TableRowAction[]

---

DataCellValueAmount

type DataCellValueAmount = object;

Properties

Property	Type
tooltip?	string
type	"amount"
value	Models.Amount

---

DataCellValueBrokerName

type DataCellValueBrokerName = object;

Properties

Property	Type
type	"brokerName"
value	string

---

DataCellValueDate

type DataCellValueDate = object;

Properties

Property	Type
type	"date"
value	Date

---

DataCellValueDateTime

type DataCellValueDateTime = object;

Properties

Property	Type
type	"datetime"
value	Date

---

DataCellValueDebug

type DataCellValueDebug = object;

Properties

Property	Type
type	"debug"
value	any

---

DataCellValueHtml

type DataCellValueHtml = object;

Properties

Property	Type
type	"html"
value	string

---

DataCellValueImage

type DataCellValueImage = object;

Properties

Property	Type
type	"image"
value	Image

---

DataCellValueLink

type DataCellValueLink = object;

Properties

Property	Type
type	"link"
value	| Models.GenericTableRowValueLinkPortfolio | Models.GenericTableRowValueLinkUrl

---

DataCellValueOrderTrailingDistance

type DataCellValueOrderTrailingDistance = object;

Properties

Property	Type
currency	string
type	"orderTrailingDistance"
value	Models.TrailingDistance

---

DataCellValueOrderValidity

type DataCellValueOrderValidity = object;

Properties

Property	Type
type	"orderValidity"
value	Models.OrderValidity

---

DataCellValueProfitLossAbs

type DataCellValueProfitLossAbs = object;

Properties

Property	Type
type	"profitLossAbs"
value	Models.Amount

---

DataCellValueProfitLossRel

type DataCellValueProfitLossRel = object;

Properties

Property	Type
type	"profitLossRel"
value	number

---

DataCellValueString

type DataCellValueString = object;

Properties

Property	Type	Description
clipboard?	boolean	If true, a "copy to clipboard" button is shown
cssConfig?	any	‐
navigate?	boolean	If true, dispatch a "rowNavigate" event when the text is clicked
type	"text"	‐
value	string	‐

---

DialogConfig

type DialogConfig = object;

For generic application dialogs: a configuration for the dialog, including a headline title, a content text and a list of input boxes where users may enter data.

Properties

Property	Type	Description
content?	string	Optional content text for the dialog.
inputConfigs	InputConfig[]	List of input configurations for the dialog.
title?	string	Optional title for the dialog.

---

DialogResult

type DialogResult = 
  | DialogResultCancel
  | DialogResultOk;

Result of a ModalService.showDialog(...) operation.

---

DialogResultCancel

type DialogResultCancel = object;

For generic dialogs: the result when the user has canceled the dialog.

Properties

Property	Type
response	"cancel"

---

DialogResultOk

type DialogResultOk = object;

For generic dialogs: the result when user has entered data and confirmed the dialog.

Properties

Property	Type
inputs	InputConfig[]
response	"ok"

---

DownloadedFile

type DownloadedFile = object;

Properties

Property	Type	Description
blob	Blob	The file blob to be saved.
filename	string	The filename for the downloaded file.

---

Header

type Header = HeaderItem[];

Array of header items defining table columns.

---

HeaderItem

type HeaderItem = object;

Properties

Property	Type	Description
align?	"left" | "right" | "center"	Text alignment for the column ('left', 'right', or 'center').
defaultDirection?	OrderDirection	Default sort direction for the column.
id	string	Unique identifier for the header column.
label	string	Display label for the header column.
sortable?	boolean	Whether the column is sortable.
visuallyHidden?	boolean	Whether the column should be visually hidden.
width?	number | string	Width of the column (number in pixels or string with CSS units).

---

Image

type Image = object;

Properties

Property	Type
height	string
url	string

---

InputConfig

type InputConfig = object;

Properties

Property	Type	Description
defaultValue?	string	Default value for the input field.
id?	string	Optional unique identifier for the input field.
inputLabel	string	Label text for the input field.
placeholder?	string	Placeholder text for the input field.
required?	boolean	Whether the input field is required.
value?	string	Current value of the input field.

---

LinkTarget

type LinkTarget = object;

Properties

Property	Type
portfolio?	Models.Portfolio
portfolioId	string
type	"portfolio"

---

LoaderConfig

type LoaderConfig = object & BrokerizeBaseConfig;

Type Declaration

Name	Type	Description
alignment?	string	Text alignment for the loader.
overlay?	boolean	Whether to display the loader as an overlay.
repeat?	boolean	Whether the loader animation should repeat.
size?	number	Size of the loader in pixels.
variant?	BrokerizeLoaderVariant	Visual variant of the loader animation.

---

LoginFormConfig

type LoginFormConfig = object & BrokerizeBaseConfig;

Type Declaration

Name	Type	Description
client	Brokerize	The brokerize client instance for authentication.
onGuestLogin()	() => void	Callback triggered when user chooses guest login.
onLogin()	(authCtxConfiguration) => void	Callback triggered when user successfully logs in.

---

ModalHostConfig

type ModalHostConfig = object & BrokerizeBaseConfig;

Type Declaration

Name	Type	Description
showToast?	ShowToast	Optional function to display toast notifications.

---

openExternalLinkCallback()

type openExternalLinkCallback = (url, target?, windowfeatures?) => void;

Callback function for opening external links, allowing customization of link opening behavior.

Parameters

Parameter	Type	Description
url	string	The URL to open.
target?	string	Optional target attribute for the link (e.g., '_blank').
windowfeatures?	string	Optional window features for new windows.

Returns

void

---

OrderDirection

type OrderDirection = "asc" | "desc";

Direction for table column sorting.

---

OrderFlowParameters

type OrderFlowParameters = object;

Properties

Property	Type	Description
brokerName?	string	The broker to prefer, if it is available.
initialOrderCreateValues?	OrderFormInitialOrder	The initial order values to show.
portfolioId?	string	The portfolioId to prefer, if it is available.
security?	Models.Security	The security to open the order form for.

---

OrderFormConfig

type OrderFormConfig = object & BrokerizeBaseConfig;

Type Declaration

Name	Type	Description
allowChangePortfolio?	boolean	Set this to true to allow users select a different portfolio inside the widget.
hideOrderDirection?	boolean	If true, the order direction toggle button is hidden. It should be used in combination with lockOrderDirection=true.
initialOrder?	OrderFormInitialOrder	Some initial order parameters may be provided here optionally (direction, size, orderModel, limit, stop, stopLimit, stopLoss and validity). Note that the OrderForm may ignore some or all of the desired parameters, depending on whether the values can be set for the given broker / portfolio / ISIN combination.
isin?	string	The ISIN to show the OrderForm. Deprecated
lockOrderDirection?	boolean	If true, users cannot change the order direction. A direction must be provided in initialOrder.direction in this case.
onAddBrokerLogin()?	() => void	Called if the user wants to add a new broker login. This should navigate to the overview. Only available if allowChangePortfolio is true.
onChangedPreparedTrade()?	(preparedTrade) => void	‐
onNavigate()?	(linkTarget) => void	‐
onOrderCreated()	(response) => void	‐
onOrderError()?	(details) => void	If order creation is unsucessful, this callback will be called with the error response.
overrideBrokerExchangeId?	string	‐
portfolioId	string	ID of the portfolio to place the order in.
preferredExchangeId?	number	Can be provided to pick a default exchange from the known brokerize exchanges. Note that it may be ignored depending on broker's preferences.
quotesProvider?	SecurityQuotesProvider	If custom quotes should be shown in the order form, provide an implementation of SecurityQuotesProvider.
reportingTag?	string	Optional reportingTag to send with order creates. ReportingTags appear in order reports.
security	Models.Security	The security to show the OrderForm.

---

OrderFormInitialOrder

type OrderFormInitialOrder = Partial<Pick<Models.OrderCreate, 
  | "direction"
  | "intent"
  | "orderModel"
  | "limit"
  | "stop"
  | "stopLimit"
  | "stopLoss"
  | "takeProfit"
  | "validity"
  | "size"
  | "trailingDistance"
| "trailingLimitTolerance">>;

---

OrderReceiptConfig

type OrderReceiptConfig = object & BrokerizeBaseConfig;

Type Declaration

Name	Type	Description
isOrderConfirmation?	boolean	true if the receipt is shown in response to an order creation.
onNavigate()?	(linkTarget) => void	Optional callback for navigation events.
orderData?	ReceiptData	Optional order data for the receipt.
orderId?	string	Optional ID of the order for the receipt.

---

OrderTableConfig

type OrderTableConfig = object & BrokerizeBaseConfig;

Type Declaration

Name	Type	Description
onCancelOrder()	({ orderId }) => void	Callback triggered when user wants to cancel an order.
onEditOrder()	({ orderId }) => void	Callback triggered when user wants to edit an order.
onShowReceipt()	({ orderId }) => void	Callback triggered when user wants to view order receipt.
portfolioId	string	ID of the portfolio to display orders for.

---

OverviewConfig

type OverviewConfig = BrokerizeBaseConfig & object;

Type Declaration

Name	Type	Description
onLogin()	(data) => void	Callback triggered when user initiates login to a broker.
onNavigate()	(portfolio) => void	Callback triggered when user navigates to a specific portfolio.

---

PortfolioTableConfig

type PortfolioTableConfig = object & BrokerizeBaseConfig;

Type Declaration

Name	Type	Description
hideInactivePortfolios?	boolean	If true, inactive portfolios will be hidden from the table.
onNavigate()	(portfolio) => void	Callback triggered when user navigates to a specific portfolio.

---

PortfolioViewConfig

type PortfolioViewConfig = object & BrokerizeBaseConfig;

Type Declaration

Name	Type	Description
allowChangePortfolio?	boolean	Set this to true to allow users select a different portfolio inside the widget.
onAddBrokerLogin()?	() => void	Called if the user wants to add a new broker login. This should navigate to the overview. Only available if allowChangePortfolio is true.
onBuy()	(opts) => void	Callback for buy orders.
onCancelOrder()	(opts) => void	Callback for cancelling orders.
onChangeOrder()	(opts) => void	Callback for changing orders.
onSell()	(opts) => void	Callback for sell orders.
onShowReceipt()	(opts) => void	Callback for showing order receipts.
portfolioId	string	ID of the portfolio to display.

---

PositionsTableConfig

type PositionsTableConfig = object & BrokerizeBaseConfig;

Type Declaration

Name	Type	Description
onTradeInstrument()	(opts) => void	Callback triggered when user wants to trade an instrument.
portfolioId	string	ID of the portfolio to display positions for.

---

ReceiptData

type ReceiptData = object;

Properties

Property	Type	Description
order	Models.Order	The order data for the receipt.
portfolio	Models.Portfolio	The portfolio data for the receipt.

---

SaveDownloadedFile()

type SaveDownloadedFile = (download) => Promise<void>;

Callback function to save a downloaded file.

Parameters

Parameter	Type	Description
download	DownloadedFile	The downloaded file to save.

Returns

Promise<void>

A promise that resolves when the file is saved.

---

SecurityQuote

type SecurityQuote = object;

Properties

Property	Type
date	Date
quote	number

---

SecurityQuoteCallback()

type SecurityQuoteCallback = (err, quote) => void;

Parameters

Parameter	Type
err	Error
quote	SecurityQuoteContainer

Returns

void

---

SecurityQuoteContainer

type SecurityQuoteContainer = object;

Properties

Property	Type
ask?	SecurityQuote
bid?	SecurityQuote

---

SecurityQuoteMeta

type SecurityQuoteMeta = object;

Properties

Property	Type
currency	string
decimals	number
quoteSourceName	string

---

SecurityQuotes

type SecurityQuotes = object;

Properties

Property	Type
loadMeta	(abortSignal?) => Promise<SecurityQuoteMeta>
subscribe	(cb) => SecurityQuoteSubscription

---

SecurityQuotesProvider()

type SecurityQuotesProvider = (opts) => SecurityQuotes;

Parameters

Parameter	Type
opts	SecurityQuotesProviderOpts

Returns

SecurityQuotes

---

SecurityQuotesProviderOpts

type SecurityQuotesProviderOpts = object;

Properties

Property	Type	Description
exchangeId?	number	The (brokerize) exchangeId that is currently selected. Note that it may be empty if the exchange is not mapped to a brokerize exchange.
isin?	string	The ISIN of the security. Deprecated
security?	Models.Security	‐
securityQuotesToken?	string	If provided by the brokerize API, the token that can be used to access the quotes via brokerize.

---

SecurityQuoteSubscription

type SecurityQuoteSubscription = object;

Properties

Property	Type
unsubscribe	() => void

---

SessionsTableConfig

type SessionsTableConfig = BrokerizeBaseConfig;

---

SessionTanFormConfig

type SessionTanFormConfig = object & BrokerizeBaseConfig;

Type Declaration

Name	Type	Description
onExit()	(details) => void	Called when the SessionTanForm is ended.
sessionId	string	ID of the session requiring TAN authentication.

---

ShowToast()

type ShowToast = (opts) => void;

Callback function to display a toast notification.

Parameters

Parameter	Type	Description
opts	ToastOptions	Options for the toast notification.

Returns

void

---

StylingUIExampleConfig

type StylingUIExampleConfig = object;

Properties

Property	Type	Description
renderTo	HTMLElement	DOM element where the styling example should be rendered.
theme	Theme	Theme configuration for the styling example.

---

SupportLink

type SupportLink = object;

Properties

Property	Type	Description
emailSubject	string	Email subject line for support requests.

---

TableData

type TableData = TableRow[];

Array of table rows representing the data for a table.

---

TableOrder

type TableOrder = object;

Properties

Property	Type	Description
direction	OrderDirection	Sort direction ('asc' or 'desc').
field	string	Field name to sort by.

---

TableRow

type TableRow = object;

Properties

Property	Type	Description
id	string	Unique identifier for the table row.
map	Record<string, DataCellValue>	Map of column IDs to cell values.
showFaded?	boolean	Whether the row should be displayed with reduced opacity.

---

TableRowAction

type TableRowAction = object;

Properties

Property	Type
id	string
label	string

---

Theme

type Theme = object;

Properties

Property	Type	Description
layout	"block" | "columns"	Layout mode for the theme ('block' or 'columns').
logoStyle	"dark" | "light"	Logo style variant ('dark' or 'light').
tokens	ThemeTokens	CSS custom property tokens for styling.

---

ThemeTokens

type ThemeTokens = object;

Theme tokens define CSS custom properties for styling brokerize elements. These tokens control colors, spacing, typography, and other visual aspects. All properties are optional and will fall back to default values if not provided.

Properties

Property	Type
zl-app-background-color?	string
zl-app-background-image?	string
zl-app-frame-border-color?	string
zl-app-frame-border-radius?	string
zl-app-frame-border-style?	string
zl-app-frame-border-width?	string
zl-app-frame-box-shadow?	string
zl-app-frame-padding?	string
zl-app-min-height?	string
zl-app-padding?	string
zl-border-radius-2xl?	string
zl-border-radius-3xl?	string
zl-border-radius-full?	string
zl-border-radius-lg?	string
zl-border-radius-md?	string
zl-border-radius-none?	string
zl-border-radius-sm?	string
zl-border-radius-xl?	string
zl-box-shadow-2xl?	string
zl-box-shadow-lg?	string
zl-box-shadow-md?	string
zl-box-shadow-sm?	string
zl-box-shadow-xl?	string
zl-broker-select-background-color?	string
zl-broker-select-border-color?	string
zl-brokerlist-checkbox-font-size?	string
zl-brokerlist-font-size?	string
zl-btn-active-background-color?	string
zl-btn-active-background-image?	string
zl-btn-background-color?	string
zl-btn-background-image?	string
zl-btn-border-color?	string
zl-btn-border-radius?	string
zl-btn-border-style?	string
zl-btn-border-width?	string
zl-btn-default-color?	string
zl-btn-error-active-background-color?	string
zl-btn-error-background-color?	string
zl-btn-error-border-color?	string
zl-btn-error-color?	string
zl-btn-error-focus-color?	string
zl-btn-error-hover-background-color?	string
zl-btn-error-hover-color?	string
zl-btn-error-muted-color?	string
zl-btn-error-outlined-color?	string
zl-btn-focus-background-image?	string
zl-btn-focus-color?	string
zl-btn-hover-background-color?	string
zl-btn-hover-background-image?	string
zl-btn-hover-box-shadow?	string
zl-btn-hover-color?	string
zl-btn-lg-font-size?	string
zl-btn-lg-padding-x?	string
zl-btn-lg-padding-y?	string
zl-btn-md-font-size?	string
zl-btn-md-padding-x?	string
zl-btn-md-padding-y?	string
zl-btn-muted-color?	string
zl-btn-outlined-color?	string
zl-btn-sm-font-size?	string
zl-btn-sm-padding-x?	string
zl-btn-sm-padding-y?	string
zl-btn-success-active-background-color?	string
zl-btn-success-background-color?	string
zl-btn-success-border-color?	string
zl-btn-success-color?	string
zl-btn-success-focus-color?	string
zl-btn-success-hover-background-color?	string
zl-btn-success-hover-color?	string
zl-btn-success-muted-color?	string
zl-btn-success-outlined-color?	string
zl-btn-warning-active-background-color?	string
zl-btn-warning-background-color?	string
zl-btn-warning-border-color?	string
zl-btn-warning-color?	string
zl-btn-warning-focus-color?	string
zl-btn-warning-hover-background-color?	string
zl-btn-warning-hover-color?	string
zl-btn-warning-muted-color?	string
zl-btn-warning-outlined-color?	string
zl-card-background-color?	string
zl-card-border-color?	string
zl-card-border-radius?	string
zl-card-border-style?	string
zl-card-border-width?	string
zl-card-logo-max-width?	string
zl-card-logo-size?	string
zl-card-min-height?	string
zl-checkbox-border-radius?	string
zl-checkbox-border-width?	string
zl-checkbox-check-size?	string
zl-checkbox-color?	string
zl-checkbox-contrast-color?	string
zl-checkbox-label-color?	string
zl-checkbox-label-font-size?	string
zl-color-black?	string
zl-color-buy-base?	string
zl-color-dark?	string
zl-color-error-base?	string
zl-color-error-dark?	string
zl-color-error-decent?	string
zl-color-error-light?	string
zl-color-error-text?	string
zl-color-gray-base?	string
zl-color-gray-dark?	string
zl-color-gray-darker?	string
zl-color-gray-darkest?	string
zl-color-gray-light?	string
zl-color-gray-lighter?	string
zl-color-gray-lightest?	string
zl-color-light?	string
zl-color-outline?	string
zl-color-primary-base?	string
zl-color-primary-dark?	string
zl-color-primary-decent?	string
zl-color-primary-light?	string
zl-color-primary-text?	string
zl-color-sell-base?	string
zl-color-success-base?	string
zl-color-success-dark?	string
zl-color-success-decent?	string
zl-color-success-light?	string
zl-color-success-text?	string
zl-color-warning-base?	string
zl-color-warning-dark?	string
zl-color-warning-decent?	string
zl-color-warning-light?	string
zl-color-warning-text?	string
zl-color-white?	string
zl-cost-item-background-color?	string
zl-cost-item-border-radius?	string
zl-cost-item-box-shadow?	string
zl-cost-item-label-color?	string
zl-cost-item-label-font-size?	string
zl-cost-item-value-color?	string
zl-cost-item-value-font-size?	string
zl-cost-item-value-font-weight?	string
zl-countdown-duration?	string
zl-countdown-duration-static?	string
zl-default-base-rem?	string
zl-default-border-color?	string
zl-default-border-radius?	string
zl-default-border-width?	string
zl-default-box-shadow?	string
zl-default-font-size?	string
zl-default-line-height?	string
zl-default-link-color?	string
zl-default-link-decoration?	string
zl-default-padding-x?	string
zl-default-padding-y?	string
zl-default-text-color?	string
zl-font-family?	string
zl-font-size-2xl?	string
zl-font-size-2xs?	string
zl-font-size-3xl?	string
zl-font-size-4xl?	string
zl-font-size-5xl?	string
zl-font-size-6xl?	string
zl-font-size-base?	string
zl-font-size-lg?	string
zl-font-size-md?	string
zl-font-size-sm?	string
zl-font-size-xl?	string
zl-font-size-xs?	string
zl-font-weight-bold?	string
zl-font-weight-extrabold?	string
zl-font-weight-light?	string
zl-font-weight-medium?	string
zl-font-weight-normal?	string
zl-font-weight-semibold?	string
zl-footer-color?	string
zl-footer-font-size?	string
zl-form-item-background-color?	string
zl-form-item-border?	string
zl-form-item-border-radius?	string
zl-form-item-first-border-radius?	string
zl-form-item-focus-within-outline-blur?	string
zl-form-item-focus-within-outline-color?	string
zl-form-item-focus-within-outline-position?	string
zl-form-item-focus-within-outline-width?	string
zl-form-item-gap?	string
zl-form-item-gap-x?	string
zl-form-item-gap-y?	string
zl-form-item-last-border-radius?	string
zl-form-item-margin?	string
zl-form-item-padding-x?	string
zl-form-item-padding-y?	string
zl-form-label-margin?	string
zl-gap-2xl?	string
zl-gap-3xl?	string
zl-gap-4xl?	string
zl-gap-base?	string
zl-gap-form?	string
zl-gap-lg?	string
zl-gap-md?	string
zl-gap-sm?	string
zl-gap-xl?	string
zl-gap-xs?	string
zl-input-background-color?	string
zl-input-border-color?	string
zl-input-border-radius?	string
zl-input-border-style?	string
zl-input-border-width?	string
zl-input-color?	string
zl-input-focus-border-color?	string
zl-input-focus-error-border-color?	string
zl-input-font-size?	string
zl-input-font-size-mobile?	string
zl-input-padding-x?	string
zl-input-padding-x-mobile?	string
zl-input-padding-y?	string
zl-input-padding-y-mobile?	string
zl-input-placeholder-color?	string
zl-input-with-dropdown-background-color?	string
zl-input-with-dropdown-border-bottom-left-radius?	string
zl-input-with-dropdown-border-bottom-right-radius?	string
zl-input-with-dropdown-border-top-left-radius?	string
zl-input-with-dropdown-border-top-right-radius?	string
zl-kebab-menu-box-shadow?	string
zl-kebab-menu-max-width?	string
zl-kebab-menu-padding?	string
zl-keyfigures-font-size?	string
zl-keyfigures-gap-x?	string
zl-keyfigures-gap-y?	string
zl-keyfigures-key-color?	string
zl-keyfigures-key-font-weight?	string
zl-keyfigures-padding-x?	string
zl-keyfigures-padding-y?	string
zl-keyfigures-value-font-weight?	string
zl-label-color?	string
zl-label-font-size?	string
zl-label-font-weight?	string
zl-line-height-base?	string
zl-line-height-lg?	string
zl-line-height-md?	string
zl-line-height-sm?	string
zl-line-height-xs?	string
zl-link-underline-offset?	string
zl-listbox-background-color?	string
zl-listbox-border-color?	string
zl-listbox-border-radius?	string
zl-listbox-border-style?	string
zl-listbox-border-width?	string
zl-listbox-max-width?	string
zl-listbox-padding?	string
zl-loader-color?	string
zl-loader-contrast-color?	string
zl-logo-margin?	string
zl-logo-max-width?	string
zl-modal-background-color?	string
zl-modal-background-image?	string
zl-modal-close-offset?	string
zl-modal-margin?	string
zl-modal-max-height?	string
zl-modal-max-width?	string
zl-modal-padding?	string
zl-notification-border-color?	string
zl-notification-error-background-color?	string
zl-notification-error-border-color?	string
zl-notification-error-color?	string
zl-notification-font-size?	string
zl-notification-font-weight?	string
zl-notification-info-background-color?	string
zl-notification-info-color?	string
zl-notification-success-background-color?	string
zl-notification-success-border-color?	string
zl-notification-success-color?	string
zl-notification-warning-background-color?	string
zl-notification-warning-border-color?	string
zl-notification-warning-color?	string
zl-order-shortview-background-color?	string
zl-order-shortview-background-gradient-end?	string
zl-order-shortview-background-gradient-start?	string
zl-order-shortview-background-gradient-stop?	string
zl-order-shortview-background-image?	string
zl-order-shortview-border-radius?	string
zl-order-shortview-color?	string
zl-order-shortview-color-prio-one?	string
zl-order-shortview-color-prio-two?	string
zl-order-shortview-padding?	string
zl-order-shortview-position-isin-font-size?	string
zl-order-shortview-position-name-font-size?	string
zl-order-shortview-tile-background-color?	string
zl-order-shortview-tile-border-radius?	string
zl-order-shortview-tile-box-shadow?	string
zl-order-shortview-tile-description-font-size?	string
zl-order-shortview-tile-price-font-size?	string
zl-order-toggle-background-color?	string
zl-order-toggle-buy-background-color?	string
zl-order-toggle-buy-border-left-radius?	string
zl-order-toggle-buy-border-right-radius?	string
zl-order-toggle-buy-color?	string
zl-order-toggle-buy-selected-background-color?	string
zl-order-toggle-buy-selected-color?	string
zl-order-toggle-container-background-color?	string
zl-order-toggle-container-border-radius?	string
zl-order-toggle-container-padding-x?	string
zl-order-toggle-container-padding-y?	string
zl-order-toggle-padding-x?	string
zl-order-toggle-padding-y?	string
zl-order-toggle-selected-box-shadow?	string
zl-order-toggle-sell-background-color?	string
zl-order-toggle-sell-border-left-radius?	string
zl-order-toggle-sell-border-right-radius?	string
zl-order-toggle-sell-color?	string
zl-order-toggle-sell-selected-background-color?	string
zl-order-toggle-sell-selected-color?	string
zl-order-toggle-text-align?	string
zl-overlay-backdrop-opacity?	string
zl-panel-background-color?	string
zl-panel-border-color?	string
zl-panel-color?	string
zl-panel-disbled-color?	string
zl-panel-error-background-color?	string
zl-panel-error-border-color?	string
zl-panel-error-color?	string
zl-panel-info-background-color?	string
zl-panel-info-border-color?	string
zl-panel-info-color?	string
zl-panel-success-background-color?	string
zl-panel-success-border-color?	string
zl-panel-success-color?	string
zl-panel-warning-background-color?	string
zl-panel-warning-border-color?	string
zl-panel-warning-color?	string
zl-popup-background-color?	string
zl-popup-color?	string
zl-popup-font-weight?	string
zl-popup-title-color?	string
zl-popup-title-font-size?	string
zl-primary-background-color?	string
zl-select-background-color?	string
zl-select-border-color?	string
zl-select-border-radius?	string
zl-select-border-style?	string
zl-select-border-width?	string
zl-select-color?	string
zl-select-font-size?	string
zl-select-font-size-mobile?	string
zl-select-padding-x?	string
zl-select-padding-x-mobile?	string
zl-select-padding-y?	string
zl-select-padding-y-mobile?	string
zl-size-2xl?	string
zl-size-3xl?	string
zl-size-lg?	string
zl-size-md?	string
zl-size-sm?	string
zl-size-xl?	string
zl-size-xs?	string
zl-spacing-2xl?	string
zl-spacing-3xl?	string
zl-spacing-4xl?	string
zl-spacing-base?	string
zl-spacing-lg?	string
zl-spacing-md?	string
zl-spacing-sm?	string
zl-spacing-xl?	string
zl-spacing-xs?	string
zl-state-border-color?	string
zl-state-error-background-color?	string
zl-state-error-border-color?	string
zl-state-error-color?	string
zl-state-font-size?	string
zl-state-font-weight?	string
zl-state-info-background-color?	string
zl-state-info-color?	string
zl-state-success-background-color?	string
zl-state-success-border-color?	string
zl-state-success-color?	string
zl-state-warning-background-color?	string
zl-state-warning-border-color?	string
zl-state-warning-color?	string
zl-summary-border-color?	string
zl-summary-border-style?	string
zl-summary-border-width?	string
zl-summary-key-color?	string
zl-summary-key-font-weight?	string
zl-summary-key-value-gap?	string
zl-summary-padding-x?	string
zl-summary-padding-y?	string
zl-summary-row-gap?	string
zl-summary-title-color?	string
zl-summary-title-font-size?	string
zl-summary-title-font-weight?	string
zl-summary-value-alignment?	string
zl-summary-value-color?	string
zl-summary-value-font-weight?	string
zl-table-background-color?	string
zl-table-border?	string
zl-table-box-shadow?	string
zl-table-color?	string
zl-table-empty-icon-color?	string
zl-table-padding-x?	string
zl-table-padding-y?	string
zl-table-scroll-overflow-color-fade-base?	string
zl-table-scroll-overflow-color-solid-base?	string
zl-table-th-background-color?	string
zl-table-th-color?	string
zl-tabs-container-border-color?	string
zl-tabs-container-border-radius?	string
zl-tabs-container-border-style?	string
zl-tabs-container-border-width?	string
zl-tabs-container-padding?	string
zl-tabs-item-border-color?	string
zl-tabs-item-border-width?	string
zl-tabs-link-active-background-color?	string
zl-tabs-link-active-border-color?	string
zl-tabs-link-active-color?	string
zl-tabs-link-hover-color?	string
zl-tabs-link-padding-x?	string
zl-tabs-link-padding-y?	string
zl-tabs-list-border-color?	string
zl-tabs-list-border-width?	string
zl-tooltip-background-color?	string
zl-tooltip-border-color?	string
zl-tooltip-border-style?	string
zl-tooltip-border-width?	string
zl-tooltip-box-shadow?	string
zl-tooltip-color?	string
zl-tooltip-font-size?	string
zl-tooltip-max-width?	string
zl-tooltip-padding?	string
zl-tooltip-text-align?	string
zl-z-index?	string
zl-z-index-content?	string
zl-z-index-header?	string
zl-z-index-modal?	string
zl-z-index-popup?	string

Variables

cognitoFacade

const cognitoFacade: Client.CognitoFacade;

Wrapper for AWS Cognito, which can be provided to @brokerize/client (given a proper configuration).

---

Elements

const Elements: BrokerizeElements;

Entry-point for creating all available brokerize elements.