### Install @combeenation/client with npm

Source: https://public-packages.docs.combeenation.com/configurator-client/

Install the Combeenation client library using npm. Run this command in your project directory to add the dependency.

```bash
npm install @combeenation/client

```

--------------------------------

### Install @combeenation/custom-code-sdk via npm

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/index.html

Install the custom code SDK as an npm package. Run this command in your project directory.

```bash
npm install @combeenation/custom-code-sdk

```

--------------------------------

### React usage example for Combeenation client

Source: https://public-packages.docs.combeenation.com/configurator-client/

Demonstrates basic usage with React, showing how to connect to a configurator, subscribe to component value changes, and update component inputs. Requires generated type definitions from the Combeenation docs. The example uses Amount and TotalPrice components and a ConfiguratorClient instance.

```typescript
// See our docs for information on what this is and where to get this file from:
// https://docs.combeenation.com/docs/custom-code#update-component-typings
import { Amount, TotalPrice } from './generated/cfgr-defs.generated';
import { CombeenationClient } from '@combeenation/client';

function Configurator() {
  const cfgrClient = useRef<ConfiguratorClient>();

  const [amount, setAmount] = useState<number>();
  const [totalPrice, setTotalPrice] = useState<number>();

  useEffect(() => {
    if (!cfgrClient.current) {
      const client = new ConfiguratorClient();
      cfgrClient.current = client;

      const connectionOptions = {
        companyName: 'YourCompanyName',
        configuratorName: 'YourConfiguratorName',
      };

      client.connect(connectionOptions).then(() => {
        Amount.onValueChanged(setAmount, true);
        TotalPrice.onValueChanged(setTotalPrice, true);
      });
    }
  }, []);

  const onAmountChanged = (e: React.ChangeEvent<HTMLInputElement>, updateComponentInput: boolean) => {
    const value = parseInt(e.target.value);
    if (!isNaN(value)) {
      setAmount(value);
      if (updateComponentInput) {
        Amount.setInput(value);
      }
    }
  };

  return (
    <main>
      <label>
        Amount:
        <input value={amount ?? ''} onChange={e => onAmountChanged(e, false)} onBlur={e => onAmountChanged(e, true)} />
      </label>

      <div>Total price: {totalPrice}</div>
    </main>
  );
}

```

--------------------------------

### Finish a configuration with finishConfiguration

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/index.html

Shows how to finish a configuration using the finishConfiguration function. Note the example contains a syntax error: missing comma between the options object properties.

```typescript
import { finishConfiguration } from '@combeenation/custom-code-sdk';

const result = await finishConfiguration({ input: 'MyFinishAction' sendDataToParentPage: false });

```

--------------------------------

### createPdfFromAssets example

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.createPdfFromAssets.html

Example usage of createPdfFromAssets with a bundle alias, asset tasks, and file names. The function returns a URL to the generated cfgn file if successful.

```typescript
const resultUrl = await createPdfFromAssets(
  'MyBundle',
  [
    {
      type: 'PdfAsset',
      assetPath: 'quotePdfAsset',
      context: {
        subject: 'MySubject',
      },
    },
    {
      type: 'Asset',
      assetPath: 'Pdf2',
    },
  ],
  'QuotePdf',
  `Your_quote_${new Date().toISOString()}`
);
```

--------------------------------

### convertDocument example with PdfAsset and OutputToCfgnFile tasks

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.convertDocument.html

Shows how to create a PDF from an asset and output it as a cfgn file. The tasks are linked by setting 'inputTaskName' to the name of the previous task. The function returns a URL to the generated cfgn file.

```typescript
const resultUrl = await convertDocument([
  {
    type: DocumentConvertTaskTypes.PdfAsset,
    name: 'HtmlToPdfTask',
    bundleAliasName: 'MyBundle',
    assetPath: 'quotePdfAsset',
    context: {
      subject: 'MySubject',
    },
  },
  {
    type: DocumentConvertTaskTypes.OutputToCfgnFile,
    name: 'OutputPdfTask',
    inputTaskName: 'HtmlToPdfTask',
    cfgnFileName: 'QuotePdf',
    cfgnFileExtension: 'pdf',
    cfgnFileDisplayName: `Your_quote_${new Date().toISOString()}`,
  },
]);
```

--------------------------------

### Import and use CbnSdk barrel object

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/index.html

Shows how to import the SDK directly from the package or via the CbnSdk barrel object. The example imports CbnSdk and onAnyCmpValueChanged, then calls CbnSdk.onAnyCmpValueChanged.

```typescript
import { CbnSdk, onAnyCmpValueChanged } from '@combeenation/custom-code-sdk';

CbnSdk.onAnyCmpValueChanged(/* ... */);

```

--------------------------------

### render(renderFn?)

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.CustomControl.html

Forces a re-render of the control. Optionally accepts a render function that will be permanently installed and used for the render.

```APIDOC
## render(renderFn?)

### Description
Forces a re-render of the control. Optionally accepts a render function that will be permanently installed and used for the render.

### Method
render(renderFn?: CustomCtrlRenderFn): Promise<void>

### Parameters
- **renderFn** (CustomCtrlRenderFn) - Optional - A render function to set and use for this render. It will override any previously set renderFn.

### Returns
- **Promise<void>** - A promise that resolves when the render is complete.
```

--------------------------------

### getAssetPaths

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/modules/index.CbnSdk.html

Function to get asset paths.

```APIDOC
## getAssetPaths

### Description
Gets asset paths.

### Method
Function

### Signature
`getAssetPaths()`

```

--------------------------------

### redirectParentPage(url: string): Promise<ParentPageComResult<void>>

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.redirectParentPage.html

Sets window.location.href to the given url on the parent page. Requires the Configurator plugin to be installed correctly on the parent page.

```APIDOC
## redirectParentPage(url: string): Promise<ParentPageComResult<void>>

### Description
Sets `window.location.href` to the given `url` on the parent page. Requires the Configurator plugin to be installed correctly on the parent page. See embedding instructions for details.

### Parameters
- **url** (string) - Required - The URL to redirect the parent page to.

### Returns
`Promise<ParentPageComResult<void>>`
```

--------------------------------

### Access and manipulate components via generated definitions

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/index.html

Shows how to access components using the generated definitions file. It demonstrates getting a value, setting an input, and subscribing to value changes with an unsubscribe function.

```typescript
import { MyComponent } from './typings/cfgr-defs.generated';

const value = await MyComponent.getValue();
await MyComponent.setInput(newCmpValue);

// Returns an object which allows removing the listener again
const { unsubscribe } = await MyComponent.onValueChanged(newValue => {
  console.log('value changed', newValue);
});

```

--------------------------------

### Create and Use SyncCmpValuesStore

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.createSyncCmpValuesStore.html

Shows how to create the store once and export it, then access values synchronously later.

```typescript
// Create the store once and export for later use:
import { Amount, ItemPrice } from './typings/cfgr-defs.generated';
export const cmpValues = await createSyncCmpValuesStore({ Amount, ItemPrice });

// Later in the code, access the values synchronously like this:
const amount = cmpValues.Amount;
const itemPrice = cmpValues.ItemPrice;
// or:
const { Amount: amount, ItemPrice: itemPrice } = cmpValues;
```

--------------------------------

### constructor

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.Combobox.html

Creates a new Combobox instance.

```APIDOC
## constructor

### Description
Creates a new Combobox instance.

### Method
constructor

### Signature
`new Combobox()`

```

--------------------------------

### onValueChange Type-Safe Usage for Single and Multi Selection

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.Dataview.html

Examples of using onValueChange with generic type parameters for type-safe access to selection values and item data. The first example is for a single selection list, the second for a multi selection list.

```TypeScript
// Single selection list:
dataview.onValueChange<IProductsTable[number]>(value, valueItemData) => { ... }

// Multi selection list:
dataview.onValueChange<IProductsTable>(value, valueItemData) => { ... }
```

--------------------------------

### getParentPageUrl

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/modules/index.CbnSdk.html

Function to get the parent page URL.

```APIDOC
## getParentPageUrl

### Description
Gets the parent page URL.

### Method
Function

### Signature
`getParentPageUrl()`

```

--------------------------------

### finishConfiguration(input?: string): Promise<FinishResultData>

Source: https://public-packages.docs.combeenation.com/configurator-client/classes/ConfiguratorClient.html

Finishes the configuration process with an optional input string and returns the result data.

```APIDOC
## finishConfiguration(input?: string): Promise<FinishResultData>

### Description
Finishes the configuration process with an optional input string and returns the result data.

### Method
finishConfiguration

### Parameters
- **input** (string) - Optional - Input for the finish operation.

### Returns
Promise<FinishResultData>
```

--------------------------------

### Stale Value Warning Example

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.createSyncCmpValuesStore.html

Demonstrates that extracted values do not update, showing a stale value scenario.

```typescript
import { cmpValues } from './path/to/store';

const amount = cmpValues.Amount; // Current value of Amount is 10

button.onClick(() => {
  // The value of Amount changed to 20 in the meantime
  console.log(amount); // 🔥 Stale value 10
  console.log(cmpValues.Amount); // ✅ Latest value 20
});
```

--------------------------------

### constructor

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.Dataview.html

Creates a new Dataview instance.

```APIDOC
## constructor

### Description
Creates a new Dataview instance.

### Method
constructor

### Signature
`new Dataview()`
```

--------------------------------

### shareConfiguration(data)

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.shareConfiguration.html

Creates a copy of the current configuration and opens a share window for the given platform with the resulting share URL. Accepts an object with optional embed URL, image URL, Open Graph metadata, and a required platform.

```APIDOC
## shareConfiguration(data)

### Description
Creates a copy of the current configuration and opens a share window for the given platform with the resulting share URL.

### Method
Function call

### Signature
```typescript
shareConfiguration(data: {
  embedUrl?: string;
  imageUrl?: string;
  ogAuthor?: string;
  ogDescription?: string;
  ogTitle?: string;
  platform: "Facebook" | "Pinterest" | "Twitter" | "LinkedIn" | "WhatsApp" | "Custom" | "NativeShare";
}): Promise<{ shareConfigurationId: string; shareUrl: string } | undefined>
```

### Parameters
- **data** (object) - Required - The configuration for the share operation.
  - **embedUrl** (string) - Optional - URL of the parent page where the configurator is embedded. Will be integrated into the resulting share URL, so that the share redirects to the parent page, not the standalone configurator.
  - **imageUrl** (string) - Optional - URL to an image which will be used as share preview image when supported by the platform. It's recommended to use the URL of a file uploaded via upload tooling of the configurator.
  - **ogAuthor** (string) - Optional - Open Graph author metadata.
  - **ogDescription** (string) - Optional - Open Graph description metadata.
  - **ogTitle** (string) - Optional - Open Graph title metadata.
  - **platform** (string) - Required - The platform to share to. Must be one of: "Facebook", "Pinterest", "Twitter", "LinkedIn", "WhatsApp", "Custom", "NativeShare". If "Custom", no share window will be opened.

### Returns
Promise<{ shareConfigurationId: string; shareUrl: string } | undefined> - A promise that resolves to an object containing the share configuration ID and the share URL, or undefined.
```

--------------------------------

### onAnyCmpValueChanged with lazy: false

Source: https://public-packages.docs.combeenation.com/configurator-client/classes/ConfiguratorClient.html

Example for scenario 2 where lazy: false is beneficial. The data for both values is fetched in the background, so no further server request is necessary in the listener.

```typescript
CmpUtils.onAnyCmpValueChanged(async () => {
  // The data for both values has been fetched in the background, so no further server request is necessary
  const bigData1 = await CmpBigData1.getValue();
  const bigData2 = await CmpBigData2.getValue();
}, [CmpBigData1, CmpBigData2]);
```

--------------------------------

### createArPage(glb: File, options?: CreateArPageOptions): Promise<void>

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.createArPage.html

Uploads a GLB file to persistent storage and creates a dedicated page with an AR viewer. After successful creation, it either redirects to that page or shows a dialog with a QR code linking to that page, depending on the browser's capabilities to directly open AR experiences.

```APIDOC
## createArPage(glb: File, options?: CreateArPageOptions): Promise<void>

### Description
Uploads the given GLB file to a persistent storage and creates a dedicated page with an AR viewer that loads the GLB. After successful creation, it either redirects to that page or shows a dialog with a QR code linking to that page. Whether it redirects or shows a dialog depends on the browser's capabilities to directly open AR experiences.

### Method
Function

### Endpoint
createArPage

### Parameters
- **glb** (File) - Required - The GLB file to upload.
- **options** (CreateArPageOptions) - Optional - Additional options for creating the AR page.

### Returns
Promise<void> - A promise that resolves when the operation completes.

```

--------------------------------

### finishConfiguration(options)

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.finishConfiguration.html

Creates a finish of the current configuration by running all the Configurator's finish actions and optionally passes the resulting data to the parent page. The options parameter is a union of two types: one with sendDataToParentPage set to false, and one with sendDataToParentPage set to true and a transformParentPageData function.

```APIDOC
## finishConfiguration(options)

### Description
Creates a finish of the current configuration by running all the Configurator's finish actions and optionally passes the resulting data to the parent page.

### Method
Function

### Signature
```typescript
finishConfiguration(
    options:
        | FinishConfigurationBaseOptions & { sendDataToParentPage: false }
        | FinishConfigurationBaseOptions & {
            sendDataToParentPage: true;
            transformParentPageData: (
                finishResult: FinishResultData,
            ) => ParentPageCheckoutData & { [key: string]: SerializableJsonValue };
        },
): Promise<FinishResultData | undefined>
```

### Parameters
- **options** (FinishConfigurationBaseOptions & { sendDataToParentPage: false } | FinishConfigurationBaseOptions & { sendDataToParentPage: true; transformParentPageData: (finishResult: FinishResultData) => ParentPageCheckoutData & { [key: string]: SerializableJsonValue } }) - Required - The options for finishing the configuration.

#### Options Details
- **sendDataToParentPage** (boolean) - Required - If `true`, the data returned by `transformParentPageData` will be passed to the function `window.Combeenation.onConfigurationFinished(data)` on the parent page (or one of its older aliases like `Combeenation.onCheckout` etc.).
- **transformParentPageData** (function) - Required when `sendDataToParentPage` is `true` - Provides the checkout data which is passed to the parent page after the configuration is finished. This is meant to forward the checkout result of the finish. Things to note:
  1. This function is required because the SDK can't know which of the finish action results in `finishResult.actionResults` (keyed by finish action type name, e.g. `ShopCheckout` or `Checkout`) is the actual checkout result, so you have to select it here.
  2. Don't change `checkoutParameters`, since `checkoutParametersHash` is built from it on the server and wouldn't match anymore.
  3. You may add additional (JSON-serializable) data to the returned object, which is passed to the parent page along with the checkout data.

### Returns
- **Promise<FinishResultData | undefined>** - A promise that resolves with the finish result data, or `undefined` if the finish was not completed.

```

--------------------------------

### setConfiguratorIFrameSize(data)

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.setConfiguratorIFrameSize.html

Changes the width and/or height of the IFrame and/or scroll position of the parent page window. Requires the Configurator plugin to be installed correctly on the parent page.

```APIDOC
## setConfiguratorIFrameSize(data)

### Description
Changes the width and/or height of the IFrame and/or scroll position of the parent page window. Requires the Configurator plugin to be installed correctly on the parent page.

### Method
Function call

### Signature
setConfiguratorIFrameSize(data: { height?: string; scrollToX?: number; scrollToY?: number; width?: string }): Promise<ParentPageComResult<void>>

### Parameters
#### data (object) - Required
- **height** (string) - Optional - If not given or 0, the height is not changed
- **scrollToX** (number) - Optional - New horizontal scroll position of the parent page window
- **scrollToY** (number) - Optional - New vertical scroll position of the parent page window
- **width** (string) - Optional - If not given or 0, the width is not changed

### Returns
Promise<ParentPageComResult<void>>
```

--------------------------------

### navigateToLogin(options?)

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.navigateToLogin.html

Navigates to the login page of the Configurator. Optionally hides the back navigation and sets the language.

```APIDOC
## navigateToLogin(options?)

### Description
Navigates to the login page of the Configurator.

### Method
Function

### Signature
navigateToLogin(options?: { hideBackNavigation?: boolean; language?: AppLanguage }): void

### Parameters
- **options** (object) - Optional - Options for the navigation.
  - **hideBackNavigation** (boolean) - Optional - Defaults to `false`. Can be used if the Configurator immediately redirects to the login and shouldn't be accessible without a successful login.
  - **language** (AppLanguage) - Optional - Defaults to the browser language.

### Returns
void
```

--------------------------------

### onRendered(callback)

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.CustomControl.html

Registers a callback to be invoked after the control has been rendered. This allows custom code to perform actions like installing event listeners or adding CSS classes after rendering.

```APIDOC
## onRendered(callback)

### Description
Registers a callback to be invoked after the control has been rendered. This allows custom code to perform actions like installing event listeners or adding CSS classes after rendering.

### Method
onRendered(callback: OnRenderedCallback<HTMLDivElement>): CallbackUnsubscribeOption

### Parameters
- **callback** (OnRenderedCallback<HTMLDivElement>) - Required - The callback to be invoked after rendering.

### Returns
- **CallbackUnsubscribeOption** - An option to unsubscribe the callback.
```

--------------------------------

### connect(options: CfgrConnectionOptions): Promise<void>

Source: https://public-packages.docs.combeenation.com/configurator-client/classes/ConfiguratorClient.html

Connects the client to the configurator. The options are ignored when on a managed configurator URL, as the client retrieves all necessary options from the URL.

```APIDOC
## connect(options: CfgrConnectionOptions): Promise<void>

### Description
Connects the client to the configurator. The options are ignored when on a managed configurator URL, as the client retrieves all necessary options from the URL.

### Method
connect

### Parameters
- **options** (CfgrConnectionOptions) - Required - Connection options for the configurator.

### Returns
Promise<void>
```

--------------------------------

### new Input(id: string): Input

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.Input.html

Creates a new Input instance with the specified id.

```APIDOC
## Constructor

### new Input(id: string): Input

Creates a new Input instance.

#### Parameters
- **id** (string) - Required - The identifier of the input element.

#### Returns
- **Input** - The new Input instance.
```

--------------------------------

### onAnyCmpValueChanged with lazy: true

Source: https://public-packages.docs.combeenation.com/configurator-client/classes/ConfiguratorClient.html

Example for scenario 1 where lazy: true is beneficial. The listener is triggered without fetching values until specifically requested, reducing data traffic when only some components are needed.

```typescript
CmpUtils.onAnyCmpValueChanged(async () => {
  const useBigData = await CmpSimpleBool.getValue();
  if (useBigData) {
    // only now the data will be retrieved from the server
    const bigData = await CmpBigData.getValue();
  }

}, [CmpBigData, CmpSimpleBool, CmpSimpleText], true);
```

--------------------------------

### new Panel(id: string): Panel

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.Panel.html

Creates a new Panel instance with the specified id.

```APIDOC
## new Panel(id: string): Panel

### Description
Creates a new Panel instance with the specified id.

### Method
constructor

### Parameters
- **id** (string) - Required - The id of the panel.

### Returns
Panel - A new Panel instance.
```

--------------------------------

### onItemRendered Type-Safe Usage

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.Dataview.html

Example of using onItemRendered with a generic type parameter for type-safe access to item data. The callback receives the rendered HTML element and the corresponding item data.

```TypeScript
dataview.onItemRendered<IProductsTable[number]>(el, itemData) => { ... }
```

--------------------------------

### constructor

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.Dataview.html

Creates a new instance of the Dataview class.

```APIDOC
## constructor

### Description
Creates a new instance of the Dataview class.

### Method
constructor

### Signature
`new Dataview<TValue>()`

### Type Parameters
- TValue extends NonNullable<DataListValue>
```

--------------------------------

### Set dataTemplate property with LiquidTemplateSource cast

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.Dataview.html

When using properties of type LiquidTemplateSource, you must manually cast the given string to LiquidTemplateSource. This example sets the 'dataTemplate' property to a Liquid template string.

```typescript
dataview.setProperty('dataTemplate', '<span>{{ Name }}</span>' as LiquidTemplateSource);
```

--------------------------------

### sendCustomMsgToParentPage

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.sendCustomMsgToParentPage.html

Sends a custom message to the parent page via the 'CustomMessage' event. The parent page can handle these messages by implementing the function `Combeenation.on{msgName}`. Requires the Configurator plugin to be installed correctly on the parent page.

```APIDOC
## sendCustomMsgToParentPage

### Description
Sends a custom message to the parent page via the "CustomMessage" event. The parent page can handle these messages by implementing the function `Combeenation.on{msgName}`. Requires the Configurator plugin to be installed correctly on the parent page.

### Method
Function

### Signature
sendCustomMsgToParentPage(msgName: string, data?: object): Promise<ParentPageComResult<void>>

### Parameters
- **msgName** (string) - Required - The name of the custom message.
- **data** (object) - Optional - Additional data to send with the message.

### Returns
Promise<ParentPageComResult<void>>
```

--------------------------------

### constructor

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.Checkbox.html

Creates a new Checkbox instance.

```APIDOC
## constructor

### Description
Creates a new Checkbox instance.

### Method
constructor

### Signature
`new Checkbox()`
```

--------------------------------

### Type-safe onItemRendered usage with IProductsTable

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.Combobox.html

Shows how to use onItemRendered with a generic type parameter for type-safe access to item data. The example uses IProductsTable, the auto-generated type of the table component from which the combobox entries are populated.

```TypeScript
combobox.onItemRendered<IProductsTable[number]>((el, itemData) => { ... })
```

--------------------------------

### connect

Source: https://public-packages.docs.combeenation.com/configurator-client/classes/ConfiguratorClient.html

Establishes a connection to the configuration session. This method is part of the ConfiguratorClient API.

```APIDOC
## Method: connect

### Description
Establishes a connection to the configuration session. This method is part of the ConfiguratorClient API.

### Method
connect

### Parameters
No parameters documented.

### Returns
No return value documented.
```

--------------------------------

### getParentPageUrl()

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.getParentPageUrl.html

Retrieves the parent page's URI. Requires the Configurator plugin to be installed correctly on the parent page. Returns a Promise that resolves to a ParentPageComResult containing the URL, or undefined if not inside an IFrame or if the parent page does not respond.

```APIDOC
## getParentPageUrl()

### Description
Retrieves the parent page's URI. Requires the Configurator plugin to be installed correctly on the parent page. See embedding instructions for details.

### Method
Function call

### Signature
```typescript
getParentPageUrl(): Promise<ParentPageComResult<{ url: string }>>
```

### Parameters
None

### Returns
- **Promise<ParentPageComResult<{ url: string }>>** - Resolves to an object containing the parent page's URL. Returns `undefined` if we're not inside an IFrame or the parent page does not respond to our request.

### Remarks
- Requires the Configurator plugin to be installed correctly on the parent page.
- Returns `undefined` if not inside an IFrame or if the parent page does not respond.
```

--------------------------------

### new ConfiguratorClient()

Source: https://public-packages.docs.combeenation.com/configurator-client/classes/ConfiguratorClient.html

Creates a new instance of the ConfiguratorClient class.

```APIDOC
## Constructor: new ConfiguratorClient()

### Description
Creates a new instance of the ConfiguratorClient class.

### Method
constructor

### Returns
- **ConfiguratorClient** - A new instance of the ConfiguratorClient class.
```

--------------------------------

### executeIntegration

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.executeIntegration.html

Runs the given integration and returns the response. Integrations have to be set up in the company settings on the Combeenation platform.

```APIDOC
## executeIntegration

### Description
Runs the given integration and returns the response. Integrations have to be set up in the company settings on the Combeenation platform.

### Method
Function Call

### Signature
```typescript
executeIntegration(data: {
    body?: string | null;
    headers?: Record<string, string> | null;
    httpMethod: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
    integrationName: string;
    timeoutSeconds?: number | null;
    url: string;
}): Promise<Response>
```

### Parameters
- **data** (object) - Required - The data object containing integration details.
    - **body** (string | null) - Optional - The request body.
    - **headers** (Record<string, string> | null) - Optional - The request headers.
    - **httpMethod** ("GET" | "POST" | "PUT" | "DELETE" | "PATCH") - Required - The HTTP method to use.
    - **integrationName** (string) - Required - The name of the integration to run.
    - **timeoutSeconds** (number | null) - Optional - The timeout in seconds.
    - **url** (string) - Required - The URL to call.

### Returns
- **Promise<Response>** - A promise that resolves to the response of the integration.
```

--------------------------------

### new Button(id: string): Button

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.Button.html

Creates a new Button instance with the specified id.

```APIDOC
## Constructor

### new Button(id: string): Button

Creates a new Button instance.

#### Parameters
- **id** (string) - Required - The unique identifier for the button.

#### Returns
- **Button** - The new Button instance.
```

--------------------------------

### Set dataTemplate property with LiquidTemplateSource cast

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.Combobox.html

Use this snippet when setting a property of type LiquidTemplateSource via setProperty. The string must be manually cast to LiquidTemplateSource. This example sets the dataTemplate property to a Liquid template string.

```typescript
combobox.setProperty('dataTemplate', '<span>{{ Name }}</span>' as LiquidTemplateSource);
```

--------------------------------

### setProperty

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.Collapsible.html

Sets arbitrary properties of the collapsible control. Behavior is the same as when setting the respective property in the configurator editor. Some properties are not allowed to be set here because they have a dedicated method which should be used instead. For example, setting `visible` is not allowed because CollapsibleV1.setVisible should be used instead.

```APIDOC
## setProperty

### Description
Sets arbitrary properties of the collapsible control. Behavior is the same as when setting the respective property in the configurator editor. Some properties are not allowed to be set here because they have a dedicated method which should be used instead. For example, setting `visible` is not allowed because CollapsibleV1.setVisible should be used instead.

### Method
setProperty

### Signature
setProperty<T extends "cssClasses" | "captionText" | "collapsed" | "group">(propertyName: T, value: SetCollapsiblePropertyValue[T]): void

### Type Parameters
- **T** extends "cssClasses" | "captionText" | "collapsed" | "group"

### Parameters
- **propertyName** (T) - Required - The name of the property to set.
- **value** (SetCollapsiblePropertyValue[T]) - Required - The value to set for the property.

### Returns
void
```

--------------------------------

### createTempPdfFromAssets

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/modules/index.CbnSdk.html

Creates a temporary PDF from assets.

```APIDOC
## createTempPdfFromAssets

### Description
Creates a temporary PDF from assets.

### Method
Function

### Signature
`createTempPdfFromAssets()`

### Parameters
None documented.

### Returns
Not documented.
```

--------------------------------

### finishConfiguration

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/modules/index.CbnSdk.html

Function to finish the configuration process.

```APIDOC
## finishConfiguration

### Description
Finishes the configuration process.

### Method
Function

### Signature
`finishConfiguration()`

```

--------------------------------

### Safe usage of onRendered callback with element reuse check

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/types/index.OnRenderedCallback.html

This example shows how to safely use the onRendered callback when the element might be reused. It checks if the element was already visited using a data attribute and returns early if so, allowing safe use of addEventListener or external libraries.

```TypeScript
dataview.onRendered((element) => {
  if (element.dataset.wasVisited) return;
  element.dataset.wasVisited = 'true';

  // -> Safely use `element.addEventListener` or `dndManager.init(element)` etc.
});
```

--------------------------------

### Create temporary PDF from assets

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.createTempPdfFromAssets.html

Creates a temporary PDF by merging assets in the given order. The function takes a bundle alias name, an array of asset tasks, and an optional name for the downloaded file. Returns a URL to the generated cfgn file if successful.

```typescript
const resultUrl = await createTempPdfFromAssets(
  'MyBundle',
  [
    {
      type: 'PdfAsset',
      assetPath: 'quotePdfAsset',
      context: {
        subject: 'MySubject',
      },
    },
    {
      type: 'Asset',
      assetPath: 'Pdf2',
    },
  ],
  `Your_quote_${new Date().toISOString()}`
);
```

--------------------------------

### fireAnalyticsEvent(event: string, eventData?: string | object): Promise<ParentPageComResult<void>>

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.fireAnalyticsEvent.html

Pushes the given data into the Google Tag Manager data layer on the parent page. If the Configurator is not embedded in an IFrame, the event is pushed directly into the data layer of the current window. If embedded in an IFrame, this requires the Configurator plugin to be installed correctly on the parent page.

```APIDOC
## fireAnalyticsEvent(event: string, eventData?: string | object): Promise<ParentPageComResult<void>>

### Description
Pushes the given data into the Google Tag Manager data layer on the parent page. If the Configurator is not embedded in an IFrame, the event is pushed directly into the data layer of the current window. If embedded in an IFrame, this requires the Configurator plugin to be installed correctly on the parent page.

### Method
Function

### Signature
fireAnalyticsEvent(event: string, eventData?: string | object): Promise<ParentPageComResult<void>>

### Parameters
- **event** (string) - Required - Key for event identification
- **eventData** (string | object) - Optional - Additional data for the event

### Returns
Promise<ParentPageComResult<void>>
```

--------------------------------

### constructor

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.CustomControl.html

Creates a new CustomControl instance with the specified id.

```APIDOC
## constructor

### Description
Creates a new CustomControl instance.

### Signature
`new CustomControl(id: string): CustomControl`

### Parameters
- **id** (string) - Required - The identifier for the custom control.

### Returns
- **CustomControl** - The newly created CustomControl instance.
```

--------------------------------

### constructor

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.Dataview.html

Creates a new Dataview instance with the specified id.

```APIDOC
## constructor

### Description
Creates a new Dataview instance with the specified id.

### Signature
`new Dataview<TValue>(id: string): Dataview<TValue>`

### Type Parameters
- `TValue` extends NonNullable<DataListValue>

### Parameters
- `id` (string) - Required - The id of the dataview.

### Returns
`Dataview<TValue>`
```

--------------------------------

### constructor

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.Collapsible.html

Creates a new Collapsible instance with the specified id.

```APIDOC
## constructor

### Description
Creates a new Collapsible instance with the specified id.

### Method
constructor

### Signature
new Collapsible(id: string): Collapsible

### Parameters
- **id** (string) - Required - The unique identifier for the collapsible control.

### Returns
Collapsible
```

--------------------------------

### finishConfiguration

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.finishConfiguration.html

Finishes the configuration process. Optionally sends data to the parent page and transforms the parent page data. Returns a Promise that resolves to the finish result or undefined if the finish failed.

```APIDOC
## finishConfiguration

### Description
Finishes the configuration process. Optionally sends data to the parent page and transforms the parent page data. Returns a Promise that resolves to the finish result or undefined if the finish failed.

### Method
Function call

### Endpoint
`finishConfiguration(options)`

### Parameters
#### Options Object
- **sendDataToParentPage** (boolean) - Optional - Indicates whether to send data to the parent page.
- **transformParentPageData** (function) - Optional - A function that transforms the parent page data. Receives the finish result and returns the transformed data.

### Request Example
```javascript
finishConfiguration({
  sendDataToParentPage: true,
  transformParentPageData: finishResult => {
    const checkout = Object.values(finishResult.actionResults ?? {}).find(
      (r): r is CheckoutFinishActionResponse => r.type === FinishActionResponseTypes.Checkout
    );
    if (!checkout) throw new Error('No checkout finish action result');

    return {
      id: checkout.cfgnId,
      authentication: checkout.authToken,
      checkoutParameters: checkout.checkoutParameters ?? '',
      checkoutParametersHash: checkout.checkoutParametersHash ?? '',
      queryParameters: Object.fromEntries(new URLSearchParams(window.location.search)),
    } satisfies ParentPageCheckoutData;
  },
});
```

### Response
#### Success Response
Returns a Promise that resolves to a `FinishResultData` object or `undefined` if the finish failed.

#### Response Example
```typescript
Promise<FinishResultData | undefined>
```
```

--------------------------------

### onNewCfgnIdCreated

Source: https://public-packages.docs.combeenation.com/configurator-client/classes/ConfiguratorClient.html

Registers a listener that is called when a new configuration ID is created. The listener receives the configuration ID and an optional auth token when editing an existing configuration.

```APIDOC
## onNewCfgnIdCreated(listener: (cfgnId: string, authToken: string | undefined) => void): void

### Description
Registers a listener that is called when a new configuration ID is created. The listener receives the configuration ID and an optional auth token when editing an existing configuration.

### Method
onNewCfgnIdCreated

### Parameters
- **listener** (function) - Required - A callback function that receives the configuration ID (string) and an optional auth token (string | undefined).

### Returns
void
```

--------------------------------

### executeIntegration

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/modules/index.CbnSdk.html

Executes an integration.

```APIDOC
## executeIntegration

### Description
Executes an integration.

### Method
Function

### Signature
`executeIntegration()`

### Parameters
None documented.

### Returns
Not documented.
```

--------------------------------

### navigateToLogin

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/modules/index.CbnSdk.html

Function to navigate to login.

```APIDOC
## navigateToLogin

### Description
Navigates to the login page.

### Method
Function

### Signature
`navigateToLogin()`

```

--------------------------------

### restartConfiguration(copyCfgnValues?: boolean): Promise<RestartCfgnResultData | undefined>

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.restartConfiguration.html

Restarts the configurator with a new configuration. Optionally copies the values of the current configuration to the new one. Returns the URLs of the new configuration or undefined if the restart failed.

```APIDOC
## restartConfiguration(copyCfgnValues?: boolean): Promise<RestartCfgnResultData | undefined>

### Description
Restarts the configurator with a new configuration. If `copyCfgnValues` is `true`, the values of the current configuration are copied over to the new one.

### Method
Function Call

### Signature
`restartConfiguration(copyCfgnValues?: boolean): Promise<RestartCfgnResultData | undefined>`

### Parameters
- **copyCfgnValues** (boolean) - Optional - If `true`, the values of the current configuration are copied over to the new one.

### Returns
Promise<RestartCfgnResultData | undefined> - The URLs of the new configuration or `undefined` if the restart failed.
```

--------------------------------

### convertDocument(tasks: DocumentConvertTask[]): Promise<string | undefined>

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.convertDocument.html

Creates and converts a document (e.g., HTML to PDF) by executing a series of tasks. The tasks are connected via 'name' and 'inputTaskName' properties, and the function returns a URL to the generated cfgn file if successful.

```APIDOC
## Function convertDocument

### Description
Create and convert a document (e.g. HTML to PDF). The conversion consists of multiple individual tasks to allow full flexibility when creating documents.

### Signature
`convertDocument(tasks: DocumentConvertTask[]): Promise<string | undefined>`

### Parameters
- **tasks** (DocumentConvertTask[]) - Required - The tasks to execute. The tasks are executed based on their connection with the properties `name` and `inputTaskName` (the order in the array is irrelevant).

### Returns
- **Promise<string | undefined>** - URL to the generated cfgn file, if successful.

### Example
```typescript
const resultUrl = await convertDocument([
  {
    type: DocumentConvertTaskTypes.PdfAsset,
    name: 'HtmlToPdfTask',
    bundleAliasName: 'MyBundle',
    assetPath: 'quotePdfAsset',
    context: {
      subject: 'MySubject',
    },
  },
  {
    type: DocumentConvertTaskTypes.OutputToCfgnFile,
    name: 'OutputPdfTask',
    inputTaskName: 'HtmlToPdfTask',
    cfgnFileName: 'QuotePdf',
    cfgnFileExtension: 'pdf',
    cfgnFileDisplayName: `Your_quote_${new Date().toISOString()}`,
  },
]);
```

### See Also
- [createPdfFromAssets](https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.createPdfFromAssets.html) for a simplified version to create a PDF.
```

--------------------------------

### uploadFiles<T extends string>(files: CfgnFileUploadData<T>): Promise<CfgnFileUploadResult<T>>

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.uploadFiles.html

Uploads one or more files into the current configuration. The keys in the input object represent names that can be used in Hive with configuration.GetFile(""). Returns an object with the same keys as the input, containing result information for each file.

```APIDOC
## uploadFiles<T extends string>(files: CfgnFileUploadData<T>): Promise<CfgnFileUploadResult<T>>

### Description
Uploads one or more files into the current configuration. The keys in the input object represent names that can be used in Hive with `configuration.GetFile("")`. Returns an object with the same keys as the input, containing result information for each file.

### Method
Function

### Signature
`uploadFiles<T extends string>(files: CfgnFileUploadData<T>): Promise<CfgnFileUploadResult<T>>`

### Type Parameters
- **T** (string) - The type of the keys used in the input and output objects.

### Parameters
- **files** (CfgnFileUploadData<T>) - Required - An object where each key is the name of the file (usable in Hive with `configuration.GetFile("")`) and the value is the file upload data.

### Returns
- **Promise<CfgnFileUploadResult<T>>** - A promise that resolves to an object with the same keys as the input, where each value contains result information for the corresponding file.

### Remarks
Consider using `uploadTempFiles` if the files don't need to be persisted and aren't relevant for the finished configuration.
```

--------------------------------

### createSyncCmpValuesStore

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.createSyncCmpValuesStore.html

Creates a store holding component values which can be accessed synchronously. This is meant as an alternative to the async value access via await cmp.getValue() for situations where the async access is especially cumbersome.

```APIDOC
## createSyncCmpValuesStore

### Description
Creates a store holding component values which can be accessed synchronously. This is meant as an alternative to the async value access via `await cmp.getValue()` for situations where the async access is especially cumbersome.

### Signature
```typescript
createSyncCmpValuesStore<TCmps extends { [id: string]: ValueComponent<string, unknown, unknown> }>(
    cmps: TCmps,
): Promise<Readonly<SyncCmpValuesStore<TCmps>>>
```

### Type Parameters
- `TCmps` extends `{ [id: string]: ValueComponent<string, unknown, unknown> }`

### Parameters
- `cmps` (TCmps) - Required - The components to create the store for.

### Returns
`Promise<Readonly<SyncCmpValuesStore<TCmps>>>` - An object holding the current value of each of the given `cmps`. The keys of the properties in the returned object are the same as in the given `cmps`.

### Example
```typescript
// Create the store once and export for later use:
import { Amount, ItemPrice } from './typings/cfgr-defs.generated';
export const cmpValues = await createSyncCmpValuesStore({ Amount, ItemPrice });

// Later in the code, access the values synchronously like this:
const amount = cmpValues.Amount;
const itemPrice = cmpValues.ItemPrice;
// or:
const { Amount: amount, ItemPrice: itemPrice } = cmpValues;
```

### Important Notes
- This shall not be used as the default way of accessing component values. Using this extensively can have negative impact on the performance of your configurator.
- Avoid using this with too many components or components that hold very large values which change frequently.
- Once the values of the returned store have been extracted, they will not update anymore. Only extract the values in sync contexts.

### Example of Stale Values
```typescript
import { cmpValues } from './path/to/store';

const amount = cmpValues.Amount; // Current value of Amount is 10

button.onClick(() => {
  // The value of Amount changed to 20 in the meantime
  console.log(amount); // 🔥 Stale value 10
  console.log(cmpValues.Amount); // ✅ Latest value 20
});
```
```

--------------------------------

### constructor

Source: https://public-packages.docs.combeenation.com/configurator-client/classes/ValueComponent.html

Creates a new ValueComponent instance with a name and a Zod schema for validation.

```APIDOC
## constructor

### Description
Creates a new ValueComponent instance with a name and a Zod schema for validation.

### Signature
`new ValueComponent<TName, TValue, TInput>(name: TName, zodType: ZodType<unknown>): ValueComponent<TName, TValue, TInput>`

### Type Parameters
- `TName` extends string = string
- `TValue` extends unknown = unknown
- `TInput` extends unknown = TValue

### Parameters
- `name` (TName) - Required - The name of the component.
- `zodType` (ZodType<unknown>) - Required - The Zod schema used for validation.

### Returns
- `ValueComponent<TName, TValue, TInput>` - The newly created ValueComponent instance.
```

--------------------------------

### uploadTempFiles(files: FileOrDataUri[]): Promise<CfgnTempFileUploadResult[]>

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/functions/index.uploadTempFiles.html

Uploads temporary files into the current configuration. This should only be used for files which don't need to be persisted or aren't relevant for the finished configuration. On success, it returns the URLs of the uploaded files in the same order as they were provided.

```APIDOC
## uploadTempFiles(files: FileOrDataUri[]): Promise<CfgnTempFileUploadResult[]>

### Description
Uploads temporary files into the current configuration. This should only be used for files which don't need to be persisted or aren't relevant for the finished configuration. Examples: The user can upload multiple files but he still has to apply them on the product in a second step. It's recommended to upload the files as temporary files and only upload them as cfgn files after they were actually applied.

### Parameters
- **files** (FileOrDataUri[]) - Required - Files to be uploaded.

### Returns
- **Promise<CfgnTempFileUploadResult[]>** - On success it returns the URLs of the uploaded files in the same order as they were provided.
```

--------------------------------

### Handle button clicks via generated definitions

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/index.html

Shows how to attach a click handler to a control (e.g., a button) using the generated definitions file.

```typescript
import { MyButton } from './typings/cfgr-defs.generated';

MyButton.onClick(() => {
  console.log('button clicked');
});

```

--------------------------------

### render

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/classes/index.CustomControl.html

Renders the custom control using the provided render function.

```APIDOC
## render

### Description
Renders the custom control using the provided render function.

### Signature
`render(): void`
```

--------------------------------

### createPdfFromAssets

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/modules/index.CbnSdk.html

Creates a PDF from assets.

```APIDOC
## createPdfFromAssets

### Description
Creates a PDF from assets.

### Method
Function

### Signature
`createPdfFromAssets()`

### Parameters
None documented.

### Returns
Not documented.
```

--------------------------------

### version

Source: https://public-packages.docs.combeenation.com/custom-code-sdk/modules/index.CbnSdk.html

Variable representing the version.

```APIDOC
## version

### Description
Version information.

### Type
Variable

```