@brokerize/elements 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,11 +1,30 @@
 # Changelog
 
+
+# 1.2.0 (released 2025-04-24)
+
+- `ADDED` the option to pass a `reportingTag` for `createOrderForm`, `createChangeOrderForm` and `createCancelOrderForm`
+- `FIXED` a wrong label in order receipts for trailing stops
+- `CHANGED` the OrderForm label for "legalHint" has been changed to "Rechtliche Hinweise"
+
+# 1.1.1 (released 2025-03-31)
+
+-   `FIXED` cost label in OrderForm was wrong in some cases
+-   `FIXED` issues with number parsing in some environments
+-   `FIXED` formatting of staking positions information in portfolio tables
+-   `FIXED` validity date changes in ChangeOrder
+-   `CHANGED` support for strict content security policies by removing usages of `eval`
+-   `CHANGED` better looking countdown for quote trading
+-   `CHANGED` buying power in OrderForm now selects the cash account based on selected exchange
+-   `ADDED` order fees in order receipts
+
 # 1.1.0 (released 2024-12-06)
-- `CHANGED` opening a sessionTanForm now automatically requests the TAN from the API if there is exactly one method available with `flow=DECOUPLED`.
-- `ADDED` support for switching between the brokerize and DonauCapital order endpoints via the `tradingViaCryptoService` flag. If your client supports crypto trading, you have to add a `basePathCryptoService` option next to `basePath` in the `BrokerizeConfig`. The URLs will be provided to you. The elements will then automatically direct createTrade, changeOrder and cancelOrder requests to that service and display the corresponding provider logo in the UI.
-- `FIXED` hide cash account select when there is actually nothing to choose for the user.
-- `FIXED` number input behavior if the input is restricted to have 0 decimal places.
-- `CHANGED` `getQuote` is now called with the selected `sellPositionId`, if applicable.
+
+-   `CHANGED` opening a sessionTanForm now automatically requests the TAN from the API if there is exactly one method available with `flow=DECOUPLED`.
+-   `ADDED` support for switching between the brokerize and DonauCapital order endpoints via the `tradingViaCryptoService` flag. If your client supports crypto trading, you have to add a `basePathCryptoService` option next to `basePath` in the `BrokerizeConfig`. The URLs will be provided to you. The elements will then automatically direct createTrade, changeOrder and cancelOrder requests to that service and display the corresponding provider logo in the UI.
+-   `FIXED` hide cash account select when there is actually nothing to choose for the user.
+-   `FIXED` number input behavior if the input is restricted to have 0 decimal places.
+-   `CHANGED` `getQuote` is now called with the selected `sellPositionId`, if applicable.
 
 # 1.0.4 (released 2024-10-28)
 

package/README.md

@@ -1,12 +1,10 @@
 # brokerize elements
 
-`brokerize elements` is the official UI elements library for the brokerize API. Together with `@brokerize/client` it provides drop-in brokerage UI elements for various trading use cases.
+`@brokerize/elements` is the official UI library for the brokerize API. Together with `@brokerize/client` it provides drop-in brokerage UI elements for various trading use cases.
 
 # how to install
 
-The brokerize client libraries are publicly available, so you can just install them like any other npm package:
-
-Once you have the token, this is how you add it to a project:
+The brokerize client libraries are publicly available, so you can install them like any other npm package:
 
 ```
 $ npm init -y
@@ -24,26 +22,36 @@ const brokerizeClient = new Brokerize({
 	// API configuration
 	basePath: BROKERIZE_API_URL /* https://api-preview.brokerize.com for our preview environment */,
 	clientId: '<YOUR-API-CLIENT-ID>',
-	cognito: {
-		Endpoint: '<PROVIDED-COGNITO-ENDPOINT>',
-		ClientId: '<PROVIDED-COGNITO-CLIENT-ID>',
-		UserPoolId: '<PROVIDED-COGNITO-USERPOOL-ID>'
-	},
 	// provide global dependencies
-	fetch: globalThis.fetch.bind(globalThis),
-	createAbortController: () => new AbortController(),
-	createWebSocket: (url, protocol) => new WebSocket(url, protocol)
+	fetch: globalThis.fetch.bind(globalThis), // optionally, a custom fetch implementation can be used
+	createAbortController: () => new AbortController(), // optionally, a custom AbortController can be used
+	createWebSocket: (url, protocol) => new WebSocket(url, protocol) // optionally, a custom WebSocket implementation can be used
 });
 ```
 
-| Property              | Description                                                                                                            | optional |
-| :-------------------- | ---------------------------------------------------------------------------------------------------------------------- | :------: |
-| basePath              | The API base path                                                                                                      | &#10060; |
-| clientId              | Your Client ID for the brokerize API                                                                                   | &#10060; |
-| cognito               | Configuration for logging in brokerize users (not relevant for most clients)                                           | &#9989;  |
-| fetch                 | Optional custom implementation of `fetch`                                                                              | &#9989;  |
-| createAbortController | Optional create function (should return an instance of `AbortController` that is compatible with the provided `fetch`) | &#9989;  |
-| createWebSocket       | Optional create function for WebSockets                                                                                | &#9989;  |
+Applications create temporary brokerize guest users for accessing the API. This code creates a guest user with the API and a corresponding `AuthorizedApiContext`:
+
+```typescript
+const user = await brokerizeClient.createGuestUser();
+const apiCtx = brokerizeClient.createAuthorizedContext(user);
+```
+
+`apiCtx` can now be used to interact with the API in the scope if the newly created user (you can also use that instance directly in your application code). The `user` object can be stored as JSON in order to authenticate as the same user again. Note that the created credentials' lifetime depends on the client configuration. By default, those temporary users are deleted at night.
+
+Now that you have a brokerize client instance as well as an `AuthorizedApiContext`, you can show the list of available brokers (or any other view) like this:
+
+```
+createBrokerList({
+	authorizedApiContext,
+	theme,
+	addFrame,
+	renderTo,
+	onLogin({ brokerName }) {
+		// show the login process for broker `brokerName` here
+	},
+	openExternalLink
+});
+```
 
 ## theming
 
@@ -138,6 +146,8 @@ createBrokerList({
 
 ## BrokerLoginForm
 
+**NOTE**: `createBrokerLoginForm` does not actually present a login form directly in most cases but rather triggers an OAuth redirect. This depends on the client configuration and specific demands of brokers and/or partners. By default, all brokers use an OAuth-style login flow.
+
 ```typescript
 createBrokerLoginForm({
     authorizedApiContext,
@@ -190,66 +200,6 @@ createBrokerLoginForm({
 | login    | is fired when the user has successfully logged in                   |
 | redirect | is fired when a redirect to the broker login page should take place |
 
-## Brokerize Login
-
-As described in the OpenAPI specification, users can either log in with their brokerize account or create a guest user. This will create a guest user with the API and a corresponding `AuthorizedApiContext`:
-
-```typescript
-const user = await brokerizeClient.createGuestUser();
-const apiCtx = brokerizeClient.createAuthorizedContext(user);
-```
-
-`apiCtx` can now be used to interact with the API (you can also use that instance directly in your application code).
-
-If you want to support users to choose between logging in with their brokerize credentials or using a guest account, use `LoginForm` to retrieve either `AuthorizedApiContext` like this:
-
-```javascript
-Brokerize.Elements.createLoginForm({
-	renderTo: $el,
-	theme,
-	addFrame,
-	client: brokerizeClient,
-	onGuestLogin() {
-		client.createGuestUser().then(
-			(authCtxCfg) => {
-				setLogin(authCtxCfg);
-			},
-			(err) => showError(err)
-		);
-	},
-	onLogin(authCtxCfg) {
-		setLogin(authCtxCfg);
-	},
-	openExternalLink
-});
-
-function setLogin(authCtxCfg) {
-	apiCtx = client.createAuthorizedContext(cfg);
-}
-```
-
-<img src="example-screenshots/brokerize-login.png" width="500"/>
-
-### web component
-
-```html
-<brokerize-login ... />
-```
-
-### properties
-
-| Property | Description                                                                                                    | optional |
-| :------- | -------------------------------------------------------------------------------------------------------------- | :------: |
-| client   | Instance of the `@brokerize/client`                                                                            | &#10060; |
-| theme    | You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON | &#9989;  |
-
-### events
-
-| event | Description                                       |
-| :---- | ------------------------------------------------- |
-| guest | is fired when the user clicks the guest login     |
-| login | is fired when the user has successfully logged in |
-
 ## Brokerize Main
 
 The main component is the default goto component for the simplest and quickest brokerize experience, as all the default behavior is already interconnected and ready to use. You just need to integrate this one component and can use all of brokerize's features.

package/dist/bundle.d.ts

@@ -54,7 +54,6 @@ export declare type BrokerizeElement = {
 export declare type BrokerizeElements = {
     	createBrokerizeMain: (cfg: BrokerizeMainConfig) => BrokerizeMainElement;
     	createBrokerList: (cfg: BrokerListConfig) => BrokerizeElement;
-    	createLoginForm: (cfg: LoginFormConfig) => BrokerizeElement;
     	createBrokerLoginForm: (cfg: BrokerLoginFormConfig) => BrokerizeElement;
     	createOrderForm: (cfg: OrderFormConfig) => BrokerizeElement;
     	createPortfolioTable: (cfg: PortfolioTableConfig) => BrokerizeElement;
@@ -67,6 +66,7 @@ export declare type BrokerizeElements = {
     	createSessionsTable: (cfg: SessionsTableConfig) => BrokerizeElement;
     	createPortfolioView: (cfg: PortfolioViewConfig) => BrokerizeElement;
     	createModalHost: (cfg: ModalHostConfig) => BrokerizeElement;
+    	createStylingUIExample: (cfg: StylingUIExampleConfig) => BrokerizeElement;
     	modalService: ModalService;
     	/**
      	 * Configure global settings for Brokerize Elements. The global configuration is shared across all instances of Brokerize Elements.
@@ -164,11 +164,19 @@ export declare type CancelOrderFormConfig = {
     	orderId: string;
     	onExit: () => void;
     	onNavigate: (linkTarget: LinkTarget) => void;
+    	/**
+     	 * Optional `reportingTag` to send with order creates. ReportingTags appear in order reports.
+     	 */
+    	reportingTag?: string;
 } & BrokerizeBaseConfig;
 
 export declare type ChangeOrderFormConfig = {
     	orderId: string;
     	onExit: () => void;
+    	/**
+     	 * Optional `reportingTag` to send with order creates. ReportingTags appear in order reports.
+     	 */
+    	reportingTag?: string;
 } & BrokerizeBaseConfig;
 
 export { Client }
@@ -306,6 +314,31 @@ export declare type DataCellValueString = {
     	cssConfig?: any;
 };
 
+/**
+ * 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.
+ */
+export declare type DialogConfig = {
+    	title?: string;
+    	content?: string;
+    	inputConfigs: InputConfig[];
+};
+
+/**
+ * Result of a `ModalService.showDialog(...)` operation.
+ */
+export declare type DialogResult = DialogResultCancel | DialogResultOk;
+
+/**
+ * For generic dialogs: the result when the user has canceled the dialog.
+ */
+export declare type DialogResultCancel = { response: 'cancel' };
+
+/**
+ * For generic dialogs: the result when user has entered data and confirmed the dialog.
+ */
+export declare type DialogResultOk = { response: 'ok'; inputs: InputConfig[] };
+
 export declare type DownloadedFile = {
     	blob: Blob;
     	filename: string;
@@ -335,6 +368,15 @@ declare type Image_2 = {
 };
 export { Image_2 as Image }
 
+export declare type InputConfig = {
+    	id?: string;
+    	defaultValue?: string;
+    	inputLabel: string;
+    	placeholder?: string;
+    	required?: boolean;
+    	value?: string;
+};
+
 export declare type LinkTarget = {
     	type: 'portfolio';
     	portfolioId: string;
@@ -350,20 +392,32 @@ export declare type ModalHostConfig = { showToast?: ShowToast } & BrokerizeBaseC
 
 export declare interface ModalService {
     	showSecurityInformation(title: string, content: string): void;
+
     	showConfirm(msg: string): Promise<boolean>;
+
+    	showDialog(dialogConfig: DialogConfig): Promise<DialogResult>;
+
     	showSessionTanModal(sessionId: string): void;
+
     	activate(): void;
+
     	deactivate(): void;
+
     	override(overrides: Partial<ModalService>): void;
+
     	showReceipt(data: ReceiptData, showActions: boolean, handleOrderTableAction: (e: any) => void): void;
+
     	showDetailedTable(table: Models.GenericTable): void;
+
     	showPositionDetail(
     		position: Models.Position,
     		row?: TableRow,
     		header?: Header,
     		handleTableAction?: (actionId: string, rowId: string) => void
     	): void;
+
     	showLoginForm(brokerName: any, returnToUrl: string, redirect: (redirecTo: string) => void): void;
+
     	showToast(opts: ToastOptions): void;
 }
 
@@ -421,6 +475,10 @@ export declare type OrderFormConfig = {
      	 * If custom quotes should be shown in the order form, provide an implementation of `SecurityQuotesProvider`.
      	 */
     	quotesProvider?: SecurityQuotesProvider;
+    	/**
+     	 * Optional `reportingTag` to send with order creates. ReportingTags appear in order reports.
+     	 */
+    	reportingTag?: string;
 } & BrokerizeBaseConfig;
 
 export declare type OrderFormInitialOrder = Partial<
@@ -542,6 +600,10 @@ export declare type SessionTanFormConfig = {
 
 export declare type ShowToast = (opts: ToastOptions) => void;
 
+export declare type StylingUIExampleConfig = {
+    	theme: Theme;
+} & BrokerizeBaseConfig;
+
 export declare type SupportLink = {
     	emailSubject: string;
 };
@@ -602,7 +664,6 @@ export declare type ThemeTokens = {
     	'zl-btn-border-radius'?: string;
     	'zl-btn-border-style'?: string;
     	'zl-btn-border-width'?: string;
-    	'zl-btn-countdown-bar-color'?: string;
     	'zl-btn-default-color'?: string;
     	'zl-btn-focus-background-image'?: string;
     	'zl-btn-focus-color'?: string;
@@ -618,7 +679,6 @@ export declare type ThemeTokens = {
     	'zl-btn-md-padding-y'?: string;
     	'zl-btn-muted-color'?: string;
     	'zl-btn-outlined-color'?: string;
-    	'zl-btn-progessbar-height'?: string;
     	'zl-btn-sm-font-size'?: string;
     	'zl-btn-sm-padding-x'?: string;
     	'zl-btn-sm-padding-y'?: string;