@combeenation/custom-code-sdk 0.0.1-alpha1 → 0.0.1-alpha10

package/dist/index.d.ts

@@ -1,25 +1,81 @@
 import { z } from 'zod';
-import { ZodType } from 'zod';
 
-declare type CmpName = string;
+declare type AppLanguage = 'en' | 'de';
 
-declare type CmpValue = z.infer<typeof ZCmpValue>;
+declare type AssetName = z.infer<typeof ZAssetName>;
 
-declare type CmpValue_2 = z.infer<typeof ZCmpValue_2>;
+export declare class Button {
+    #private;
+    readonly id: CtrlId;
+    constructor(id: CtrlId);
+    onRendered(callback: OnRenderedCallback<HTMLButtonElement>): CallbackUnsubscribeOption;
+    onClick(callback: OnClickCallback): CallbackUnsubscribeOption;
+    setVisible(visible: boolean): Promise<void>;
+    setText(text: string): void;
+}
 
-declare interface CmpValueChangedCondition<T extends CmpValue = CmpValue> {
-    (param: T | undefined): Promise<boolean>;
+declare type CallbackUnsubscribeOption = {
+    unsubscribe: () => void;
+};
+
+export declare namespace CbnSdk {
+    export {
+        configuratorIsInIFrame,
+        finishConfiguration,
+        fireAnalyticsEvent,
+        getAssetPaths,
+        getParentPageUrl,
+        navigateToLogin,
+        onAnyCmpValueChanged,
+        redirectParentPage,
+        sendCustomMsgToParentPage,
+        setConfiguratorIFrameSize,
+        shareConfiguration,
+        createSyncCmpValuesStore,
+        uploadFiles,
+        uploadImages,
+        convertDocument,
+        createPdfFromAssets,
+        version
+    }
 }
 
-declare interface CmpValueChangedCondition_2<T extends CmpValue_2 = CmpValue_2> {
-    (param: T | undefined): Promise<boolean>;
+export declare type CfgnFileUploadData<T extends string = string> = {
+    [fileName in T]: {
+        file: FileOrDataUri;
+        displayName?: string;
+    };
+};
+
+export declare class Checkbox {
+    #private;
+    readonly id: CtrlId;
+    constructor(id: CtrlId);
+    onRendered(callback: OnRenderedCallback<HTMLLabelElement>): CallbackUnsubscribeOption;
+    setVisible(visible: boolean): Promise<void>;
 }
 
-declare interface CmpValueChangedListener<T extends CmpValue = CmpValue> {
-    (param: T | undefined): void;
+declare type CmpName = string;
+
+/**
+ * All possible typings for component values.
+ *
+ * Rule of thumb with this type: Limit usages to the bare minimum only when actually needed.
+ * Ideally, this type should not be used in the consuming app (cfgr editor etc.) at all but only in the API layer which
+ * does all the parsing & conversion of cmp values to raw wire format and vice versa.
+ *
+ * Why?
+ * This is practically an `unknown` ATM (see comment above {@link ZCmpValue}) and dealing with `unknown` in code is very
+ * cumbersome and leads to hard to maintain code.
+ */
+declare type CmpValue = z.infer<typeof ZCmpValue>;
+
+/** Interface for value changed condition function */
+export declare interface CmpValueChangedCondition<T extends CmpValue = CmpValue> {
+    (param: T | undefined): Promise<boolean>;
 }
 
-declare interface CmpValueChangedListener_2<T extends CmpValue_2 = CmpValue_2> {
+export declare interface CmpValueChangedListener<T extends CmpValue = CmpValue> {
     (param: T | undefined): void;
 }
 
@@ -27,38 +83,772 @@ declare type CmpValueChangedMap<TName extends string = string> = {
     [K in TName]: boolean;
 };
 
-declare interface CmpValuesChangedListener<TName extends string = string> {
+export declare interface CmpValuesChangedListener<TName extends string = string> {
+    /**
+     * Returns an object where each key represents the given components, and the corresponding boolean value
+     * indicates whether that component has changed or not
+     */
     (changedCmps: CmpValueChangedMap<TName>): void;
 }
 
+export declare class Collapsible {
+    #private;
+    readonly id: CtrlId;
+    constructor(id: CtrlId);
+    onRendered(callback: OnRenderedCallback<HTMLDivElement>): CallbackUnsubscribeOption;
+    setVisible(visible: boolean): Promise<void>;
+}
+
+/**
+ * Checks if the configurator is embedded inside an IFrame.
+ */
+export declare const configuratorIsInIFrame: () => boolean;
+
+/**
+ * Create and convert a document (e.g. HTML to PDF).\
+ * The conversion consists of multiple individual tasks to allow full flexibility when creating documents.
+ *
+ * Example case: Create a PDF with dynamic content (PDF asset), append a static product datasheet
+ * and put a watermark on each page.
+ *
+ * See also {@link createPdfFromAssets} for a simplified version to create a PDF.
+ * @param tasks The tasks are executed based on their connection with the properties `name` and `inputTaskName`
+ *              (the order in the array is irrelevant)
+ * @returns     URL to the generated cfgn file, if successful
+ *
+ * @example
+ * ```ts
+ * const resultUrl = await convertDocument([
+ *   {
+ *     type: DocumentConvertTaskTypes.PdfAsset,
+ *     name: 'HtmlToPdfTask',
+ *     bundleAliasName: 'MyBundle',
+ *     assetPath: 'quotePdfAsset',
+ *     context: {
+ *       subject: 'MySubject',
+ *     },
+ *   },
+ *   {
+ *     type: DocumentConvertTaskTypes.Watermark,
+ *     inputTaskName: 'HtmlToPdfTask',
+ *     name: 'WatermarkTask',
+ *     options: {
+ *       text: 'My Watermark',
+ *       opacity: 50
+ *     },
+ *   },
+ *   {
+ *     type: DocumentConvertTaskTypes.OutputToCfgnFile,
+ *     name: 'OutputPdfTask',
+ *     inputTaskName: 'WatermarkTask',
+ *     cfgnFileName: 'QuotePdf',
+ *     cfgnFileExtension: 'pdf',
+ *     cfgnFileDisplayName: `Your_quote_${new Date().toISOString()}`,
+ *   },
+ * ]);
+ * ```
+ */
+export declare const convertDocument: (tasks: DocumentConvertTask[]) => Promise<string | undefined>;
+
+/**
+ * Creates a PDF from one or more assets which will be merged in the given order.
+ *
+ * Simplified helper built on top of {@link convertDocument}.
+ * Use {@link convertDocument} directly for advanced scenarios such as watermarking.
+ *
+ * @param bundleAliasName     Bundle name where the assets are stored
+ * @param assetTasks          One or more "assets tasks" which will be merged in the given order
+ * @param cfgnFileName        Name of the generated cfgn file
+ * @param cfgnFileDisplayName Optional name which will be used when downloading the file
+ * @returns                   URL to the generated cfgn file, if successful
+ *
+ * @example
+ * ```ts
+ * const resultUrl = await createPdfFromAssets(
+ *  'MyBundle',
+ *  [
+ *    {
+ *      type: 'PdfAsset',
+ *      assetPath: 'quotePdfAsset',
+ *      context: {
+ *        subject: 'MySubject',
+ *      },
+ *    },
+ *    {
+ *      type: 'Asset',
+ *      assetPath: 'Pdf2',
+ *    },
+ *  ],
+ *  'QuotePdf',
+ *  `Your_quote_${new Date().toISOString()}`
+ * );
+ * ```
+ *
+ */
+export declare function createPdfFromAssets(bundleAliasName: string, assetTasks: CreatePdfTasks[], cfgnFileName: string, cfgnFileDisplayName?: string): Promise<string | undefined>;
+
+export declare type CreatePdfTasks = {
+    type: CreatePdfTaskTypes.PdfAsset;
+    assetPath: string;
+    context: object;
+} | {
+    type: CreatePdfTaskTypes.Asset;
+    assetPath: string;
+};
+
+export declare enum CreatePdfTaskTypes {
+    /** Create a PDF with dynamic content based on the given `context` */
+    PdfAsset = 0,
+    /** Static pdf asset (which is stored as File Asset) */
+    Asset = 1
+}
+
+/**
+ * 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.
+ *
+ * E.g.:
+ * ```ts
+ * const amount = await Amount.getValue();
+ * // vs.
+ * const amount = cmpValues.Amount;
+ * ```
+ *
+ * !!! Note !!!
+ *
+ * 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.
+ *
+ * @returns 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
+ * ```ts
+ * // 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 !!!
+ *
+ * Once the values of the returned store have been extracted, they will not update anymore.\
+ * -> Only extract the values in sync contexts.
+ *
+ * E.g.:
+ * ```ts
+ * 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
+ * });
+ * ```
+ */
+export declare const createSyncCmpValuesStore: <TCmps extends {
+    [id: CmpName]: ValueComponent;
+}>(cmps: TCmps) => Promise<Readonly<SyncCmpValuesStore<TCmps>>>;
+
 declare type CtrlId = z.infer<typeof ZCtrlId>;
 
-export declare class CustomControl<TName extends CtrlId = CtrlId> {
+export declare class CustomControl {
     #private;
-    readonly name: TName;
-    constructor(name: TName);
-    onRendered(callback: (element: HTMLElement | undefined, rawHtml: string | undefined) => void): void;
+    readonly id: CtrlId;
+    constructor(id: CtrlId);
+    /**
+     * This gives custom code full control over what is rendered inside the control. When setting this function, custom
+     * code is responsible to actively render/set the content/innerHTML of the given `element` inside the
+     * {@link renderFn}.
+     *
+     * The configurator will not render any content inside the control when a {@link renderFn} is set.
+     *
+     * For the {@link renderFn} to work, the property `Custom code controlled` needs to be enabled on the control.
+     * The {@link renderFn} will be ignored when `Custom code controlled` is not enabled.
+     *
+     * Good to know:
+     *   - Setting a new {@link renderFn} does not trigger a re-render.\
+     *     Use {@link render} if you want to trigger a re-render after setting a new {@link renderFn}.
+     *   - There can only be one {@link renderFn} per control. Setting a new one will override the existing one.
+     *   - The {@link renderFn} will be called in the following scenarios:
+     *     - Everytime the control is being shown. This is on initial show as well as when toggling its visibility.
+     *     - When forcing a render via the {@link render} method.
+     *   - Difference to {@link onRendered}:
+     *     - The {@link renderFn} is meant to control the rendered content whilst {@link onRendered} is a classic event
+     *       listener which allows you to perform certain actions like installing event listener on DOM nodes etc.
+     *       **after** the content has been rendered.
+     *     - You can install multiple {@link onRendered} callbacks.
+     *     - The {@link renderFn} and {@link onRendered} callbacks can be used side by side.
+     *   - The {@link renderFn} should always be used instead of manually manipulating the DOM via vanilla JS.\
+     *     When manipulating the DOM outside of the {@link renderFn}, your changes can always be overridden by the
+     *     configurator.\
+     *     Using the {@link renderFn} ensures that your changes are applied in a stable and predictable way.
+     */
+    set renderFn(callback: CustomCtrlRenderFn);
+    /**
+     * Forces a re-render of the control.
+     *
+     * @param renderFn Convenience param which allows setting the {@link renderFn} and triggering a render in one call.
+     *                 The given `renderFn` will be permanently installed and will override any previously set
+     *                 {@link renderFn}.
+     */
+    render(renderFn?: CustomCtrlRenderFn): Promise<void>;
+    /**
+     * This allows custom code to register callbacks in which it can perform certain actions like installing event
+     * listeners on DOM nodes or adding CSS classes etc. **after** the control has been rendered.
+     *
+     * The control can be rendered in the following scenarios:
+     *   - Everytime the control is being shown. This is on initial show as well as when toggling its visibility.
+     *   - When forcing a render via the {@link render} method.
+     *   - When the value of the control's `HTML` property changes e.g. via Hive in controls.
+     *
+     * !!! Important !!!
+     *
+     * This is **not** meant to be used for manipulating the rendered content of the control besides simple,
+     * non-structural/-behavioral changes like adding CSS classes or data attributes etc.
+     *
+     * For manipulating/controlling the rendered content, use the {@link renderFn} instead.
+     *
+     * See {@link renderFn} for more differences between the two.
+     */
+    onRendered(callback: OnRenderedCallback<HTMLDivElement>): CallbackUnsubscribeOption;
     getElement(): HTMLElement | undefined;
+    setVisible(visible: boolean): Promise<void>;
 }
 
-declare interface IValueComponent<TName extends string = string, TValue extends CmpValue = CmpValue, TInput extends CmpValue = TValue> {
-    readonly name: TName;
-    getValue(): Promise<TValue | undefined>;
-    setInput(value: TInput | undefined): void;
+/**
+ * @param element The root element of the control into which you can render your custom content.
+ * @param rawHtml The raw HTML string which is set in the `HTML` property of the control.
+ */
+declare type CustomCtrlRenderFn = (element: HTMLDivElement, rawHtml: string | undefined) => void | Promise<void>;
+
+export declare class Dataview {
+    #private;
+    readonly id: CtrlId;
+    constructor(id: CtrlId);
+    onRendered(callback: OnRenderedCallback<HTMLDivElement>): CallbackUnsubscribeOption;
+    setVisible(visible: boolean): Promise<void>;
+}
+
+export declare type DocumentConvertTask = {
+    type: DocumentConvertTaskTypes.PdfAsset;
+    name: string;
+    /** Alias name, as set in the asset bundle assignment dialog */
+    bundleAliasName: string;
+    /** Dot seperated path, e.g. 'MyPDFFolder.MyPDFAsset' */
+    assetPath: string;
+    /** Custom object which must represent the context, as defined in the PDF asset */
+    context: object;
+} | {
+    type: DocumentConvertTaskTypes.Asset;
+    name: string;
+    /** Alias name, as set in the asset bundle assignment dialog */
+    bundleAliasName: string;
+    /** Dot seperated path, e.g. 'MyPDFFolder.MyStaticAsset' */
+    assetPath: string;
+} | {
+    type: DocumentConvertTaskTypes.Merge;
+    name: string;
+    /** Names of the tasks which should be merged in the given order */
+    inputTaskNames: string[];
+} | {
+    type: DocumentConvertTaskTypes.Watermark;
+    name: string;
+    inputTaskName: string;
+    /** Minimum property requirement is either a `text` or a `imageInputTaskName`
+     * (which points to a task of type {@link DocumentConvertTaskTypes.Asset}) */
+    options: WatermarkImageOptions | WatermarkTextOptions;
+} | {
+    type: DocumentConvertTaskTypes.OutputToCfgnFile;
+    name: string;
+    inputTaskName: string;
+    /** Name of the generated cfgn file */
+    cfgnFileName: string;
+    cfgnFileExtension: string;
+    /** Optional name which will be used when downloading the file */
+    cfgnFileDisplayName?: string;
+};
+
+export declare enum DocumentConvertTaskTypes {
+    /** Create a PDF with dynamic content based on the given `context` */
+    PdfAsset = 0,
+    /** Retrieve an asset to be used for suceeding tasks (e.g. static PDF for merge or image for a watermark) */
+    Asset = 1,
+    /** Merge multiple input tasks into a single document */
+    Merge = 2,
+    /** Add a repeating watermark onto the whole document */
+    Watermark = 3,
+    /** Finalize the conversion by storing it as `Configuration file` */
+    OutputToCfgnFile = 4
+}
+
+declare type FileOrDataUri = File | {
+    dataUri: string;
+    extension: string;
+};
+
+/**
+ * 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.
+ */
+export declare const finishConfiguration: (options: (FinishConfigurationBaseOptions & {
+    sendDataToParentPage: false;
+}) | (FinishConfigurationBaseOptions & {
+    /**
+     * 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.).
+     */
+    sendDataToParentPage: true;
+    /**
+     * Allows transformation of the data that is passed to the parent page after the configuration is finished.
+     *
+     * @example
+     * ```ts
+     * const checkoutData: Shopware6CheckoutJson = { ... };
+     *
+     * finishConfiguration({
+     *   transformParentPageData: () => {
+     *     return {
+     *       id: cfgnId, // E.g. from Hive's `configuration.id`
+     *       authentication: authToken, // E.g. from Hive's `configuration.authToken`
+     *       checkoutParameters: JSON.stringify(checkoutData),
+     *       queryParameters: Object.fromEntries(new URLSearchParams(window.location.search)),
+     *       checkoutParametersHash: '123', // Not actually used ATM, will be provided by the server in the future
+     *     } satisfies ParentPageCheckoutData;
+     *   },
+     * });
+     * ```
+     *
+     * FYI, this is mandatory ATM and does not get any input values which means that the consumer is required to
+     * build the return value himself. In the future we'll change this to be optional and provide the data generated
+     * on the server as input to the transformation function.
+     */
+    transformParentPageData: () => ParentPageCheckoutData & {
+        [key: string]: SerializableJsonValue;
+    };
+})) => Promise<void>;
+
+declare type FinishConfigurationBaseOptions = {
+    input?: string;
+};
+
+/**
+ * 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.\
+ * See embedding instructions for details.
+ *
+ * @param event Key for event identification
+ */
+export declare const fireAnalyticsEvent: (event: string, eventData?: object | string) => Promise<ParentPageComResult<void>>;
+
+export declare type FlexShopFinishJson = Shopware6FinishJson;
+
+/**
+ * Returns the resolved 3D asset paths (babylon.js assets, material assets, texture image assets)
+ * for all pre-packed asset bundles configured for this Configurator.
+ *
+ * The result is fetched once and cached — subsequent calls resolve immediately from cache.
+ */
+export declare const getAssetPaths: () => Promise<SdkAssetPaths>;
+
+/**
+ * Retrieve the parent page's URI.
+ *
+ * Requires the Configurator plugin to be installed correctly on the parent page.\
+ * See embedding instructions for details.
+ *
+ * @returns `undefined` if we're not inside an IFrame or the parent page does not respond to our request.
+ */
+export declare const getParentPageUrl: () => Promise<ParentPageComResult<{
+    url: string;
+}>>;
+
+export declare class Input {
+    #private;
+    readonly id: CtrlId;
+    constructor(id: CtrlId);
+    onRendered(callback: OnRenderedCallback<HTMLDivElement>): CallbackUnsubscribeOption;
+    setVisible(visible: boolean): Promise<void>;
+}
+
+declare type JsonArray = Array<SerializableJsonValue>;
+
+declare type JsonObject = {
+    [key: string]: SerializableJsonValue;
+};
+
+declare type JsonPrimitive = string | number | boolean | null;
+
+/**
+ * Raw material JSON which can be passed to Babylon.js e.g. via `Material.Parse(material)`
+ */
+declare type MaterialObject = z.infer<typeof ZMaterialObject>;
+
+/**
+ * Navigates to the login page of the Configurator.
+ *
+ * @param options.hideBackNavigation Defaults to `false`.\
+ *                                   E.g. can be used if the Configurator immediately redirects to the login and
+ *                                   shouldn't be accessible without a successful login.
+ * @param options.language Defaults to the browser language.
+ */
+export declare const navigateToLogin: (options?: {
+    hideBackNavigation?: boolean;
+    language?: AppLanguage;
+}) => void;
+
+/**
+ * @param listener Called whenever the value of at least 1 component has changed.\
+ *                 Returns an object that indicates which components have actually changed.
+ * @param components Only call the listener if one of the given cmps have changed
+ * @param lazy `false` [default]: Immediately fetch the values of all changed components.\
+ *             `true`: Trigger the listener but don't fetch values until specifically requested.
+ *                     This could reduce data traffic when only some components are required in the listener, due to
+ *                     conditions or similar.
+ *
+ * @example
+ * [SCENARIO 1] where `lazy: true` could be benefical
+ * ```typescript
+ * CmpUtils.onAnyCmpValueChanged(() => {
+ *   const useBigData = CmpSimpleBool.getValue();
+ *   if(useBigData) {
+ *     // only now the data will be retrieved from the server
+ *     const bigData = await CmpBigData.getValue();
+ *   }
+ *
+ * }, [CmpBigData, CmpSimpleBool, CmpSimpleText], true);
+ * ```
+ *
+ * [SCENARIO 2] where `lazy: false` could be benefical
+ * ```typescript
+ * CmpUtils.onAnyCmpValueChanged(() => {
+ *   // 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]);
+ * ```
+ */
+export declare const onAnyCmpValueChanged: <TInput extends ValueComponent>(listener: CmpValuesChangedListener<TInput["name"]>, components: TInput[], lazy?: boolean) => Promise<void>;
+
+declare type OnClickCallback = () => void;
+
+declare type OnRenderedCallback<T extends HTMLElement = HTMLElement> = (element: T) => void;
+
+export declare class Panel {
+    #private;
+    readonly id: CtrlId;
+    constructor(id: CtrlId);
+    onRendered(callback: OnRenderedCallback<HTMLDivElement>): CallbackUnsubscribeOption;
+    setVisible(visible: boolean): Promise<void>;
+}
+
+export declare type ParentPageCheckoutData = {
+    /** Cfgn id */
+    id: string;
+    /** Contains the value of the `data` passed to Hive's `OnFinish.CheckoutLegacy(data, key)` as stringified JSON */
+    checkoutParameters: string;
+    /** SHA256 hash of `checkoutParameters` built with the secret `key` passed to `OnFinish.CheckoutLegacy(data, key)` */
+    checkoutParametersHash: string;
+    /** Contains all query parameters which are added to the current cfgr URL */
+    queryParameters: {
+        [key: string]: string;
+    };
+    /** Cfgn auth token */
+    authentication: string;
+};
+
+declare type ParentPageComErrorPayload<T> = [T] extends [void] ? {} : {
+    [K in keyof T]: undefined;
+};
+
+/**
+ * Given `T` must be an object and all its properties are directly spread into the resulting object.
+ *
+ * @example
+ * ```ts
+ * ParentPageComResult<void>
+ * // -> { success: true; } | { success: false; error: Error };
+ *
+ * ParentPageComResult<{ url: string }>
+ * // -> { success: true; url: string; } | { success: false; error: Error; url: undefined; };
+ *
+ * // Not allowed:
+ * ParentPageComResult<number> // `number` is not an object
+ * ParentPageComResult<string[]> // `string[]` is not an object
+ * ParentPageComResult<{ success: string }> // Property `success` is not allowed
+ * ParentPageComResult<{ error: string, name: string }> // Property `error` is not allowed
+ * ```
+ */
+declare type ParentPageComResult<T extends Record<string, unknown> | void> = ({
+    success: true;
+    error: undefined;
+} & ([T] extends [void] ? {} : T)) | ({
+    success: false;
+    error: Error;
+} & ParentPageComErrorPayload<T>);
+
+export declare type ProductCustomFields = {
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Label which the user will also see in the cart (if it is visible)
+     */
+    label: string;
+    /**
+     * Value of the custom field
+     */
+    value: string;
+    /**
+     * Position in the cart
+     */
+    position: number;
+    /**
+     * If it should be visible in the cart
+     */
+    isVisible: boolean;
+};
+
+/**
+ * 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.
+ */
+export declare const redirectParentPage: (url: string) => Promise<ParentPageComResult<void>>;
+
+declare type SdkAssetPaths = {
+    babylonJsAssets: {
+        [key: AssetName]: UrlString;
+    };
+    materialAssets: {
+        [key: AssetName]: MaterialObject;
+    };
+    textureImageAssets: {
+        [key: AssetName]: UrlString;
+    };
+};
+
+/**
+ * `urls` contains a map of the uploaded files, where the key represents the name and the value the url.\
+ * It's recommended to check for the `success` flag beforehand.
+ */
+declare type SdkCfgnFileUploadResult<T extends string = string> = {
+    success: false;
+    urls?: never;
+} | {
+    success: true;
+    urls: {
+        [fileName in T]: UrlString;
+    };
+};
+
+/**
+ * Send a custom message to the parent page via the "CustomMessage".\
+ * The parent page can handle those messages by implementing the function `Combeenation.on{msgName}`.
+ *
+ * Requires the Configurator plugin to be installed correctly on the parent page.\
+ * See embedding instructions for details.
+ */
+export declare const sendCustomMsgToParentPage: (msgName: string, data?: object) => Promise<ParentPageComResult<void>>;
+
+/** A JSON-serializable value safe to use as a `postMessage` payload etc. */
+declare type SerializableJsonValue = JsonPrimitive | JsonObject | JsonArray;
+
+/**
+ * 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.\
+ * See embedding instructions for details.
+ *
+ * @param width     If not given or 0, the width is not changed
+ * @param height    If not given or 0, the height is not changed
+ * @param scrollToX New horizontal scroll position of the parent page window
+ * @param scrollToY New vertical scroll position of the parent page window
+ */
+export declare const setConfiguratorIFrameSize: (data: {
+    width?: string;
+    height?: string;
+    scrollToX?: number;
+    scrollToY?: number;
+}) => Promise<ParentPageComResult<void>>;
+
+/**
+ * Creates a copy of the current configuration and opens a share window for the given platform with the resulting share
+ * URL
+ */
+export declare const shareConfiguration: (data: {
+    /** If `Custom`, no share window will be opened */
+    platform: "Facebook" | "Pinterest" | "Twitter" | "LinkedIn" | "WhatsApp" | "Custom" | "NativeShare";
+    ogTitle?: string;
+    ogAuthor?: string;
+    ogDescription?: string;
+    /**
+     * 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.
+     */
+    imageUrl?: string;
+    /**
+     * 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.
+     */
+    embedUrl?: string;
+}) => Promise<{
+    /**
+     * Url which is enhanced for sharing on social media by providing required "Open Graph" tags.
+     */
+    shareUrl: string;
+    shareConfigurationId: string;
+}>;
+
+export declare type ShopifyFinishJson = {
+    products: {
+        main: {
+            /**
+             * SKU id from your shop system
+             */
+            productId: string;
+            quantity: number;
+            /**
+             * Gross price of the configured product WITHOUT accessories
+             */
+            price: number;
+            /**
+             * Url to the image which will be used in the cart
+             */
+            imageUrl?: string;
+            /**
+             * New title of the product
+             */
+            title?: string;
+            /**
+             * New description of your product
+             */
+            productText?: string;
+            customFields?: ProductCustomFields[];
+            /**
+             * Weight of the main product
+             */
+            weight?: number;
+            /**
+             * Supported weight unit values: `KG`, `G`, `OZ`, `LB`.
+             */
+            weightUnit?: string;
+            /**
+             * Category id of the new product. A list of all ids can be found here:\
+             * {@link https://help.shopify.com/txt/product_taxonomy/en.txt}
+             */
+            categoryId?: number;
+        };
+        /**
+         * Additional predefined Shopify products which will be added to the cart (no custom price/image/title)
+         */
+        accessories?: {
+            productId: string;
+            quantity: number;
+        }[];
+    }[];
+};
+
+export declare type Shopware6FinishJson = {
+    products: {
+        main: {
+            /**
+             * SKU id from your shop system
+             */
+            productId: string;
+            quantity: number;
+            /**
+             * Gross price of the configured product WITHOUT accessories
+             */
+            price: number;
+            /**
+             * Url to the image which will be used in the cart
+             */
+            imageUrl?: string;
+            /**
+             * New title of the product
+             */
+            title?: string;
+            /**
+             * New description of your product
+             */
+            productText?: string;
+            customFields?: ProductCustomFields[];
+        };
+        /**
+         * Additional predefined Shopware products which will be added to the cart (no custom price/image/title)
+         */
+        accessories?: {
+            productId: string;
+            quantity: number;
+            /**
+             * If false the product will be linked to the main product and can't be deleted from cart
+             */
+            isSingleCartItem: boolean;
+        }[];
+    }[];
+};
+
+/**
+ * A simple key-value store where key = component name and value = current component value.
+ */
+declare type SyncCmpValuesStore<TCmps extends Record<CmpName, ValueComponent>> = {
+    [K in keyof TCmps & CmpName]: TCmps[K] extends ValueComponent<any, infer TValue, any> ? TValue | undefined : never;
+};
+
+declare class Text_2 {
+    #private;
+    readonly id: CtrlId;
+    constructor(id: CtrlId);
+    onRendered(callback: OnRenderedCallback<HTMLSpanElement>): CallbackUnsubscribeOption;
+    setVisible(visible: boolean): Promise<void>;
+    setText(text: string): void;
 }
+export { Text_2 as Text }
 
-export declare const onAnyCmpValueChanged: <TInput extends {
-    readonly name: string;
-    readonly zodType: ZodType<unknown>;
-    getValue(): Promise<unknown>;
-    setInput(value: unknown): Promise<void>;
-    onValueChanged(listener: CmpValueChangedListener_2<unknown>, callImmediately?: boolean, condition?: CmpValueChangedCondition_2<unknown> | undefined): void;
-}>(listener: CmpValuesChangedListener<TInput["name"]>, components: TInput[], lazy?: boolean) => Promise<void>;
+/**
+ * Upload one or more files into the current configuration
+ *
+ * @param files The key represents the name, which can be used in Hive with `configuration.GetFile("")`
+ * @returns An object with the same keys as the input. The values contain according result information.
+ */
+export declare const uploadFiles: <T extends string>(files: CfgnFileUploadData<T>) => Promise<SdkCfgnFileUploadResult<T>>;
+
+/**
+ * Upload one or more images into the current configuration
+ *
+ * @param files The key represents the name, which can be used in Hive with `configuration.GetImage("")`
+ * @returns An object with the same keys as the input. The values contain according result information.
+ */
+export declare const uploadImages: <T extends string>(images: CfgnFileUploadData<T>) => Promise<SdkCfgnFileUploadResult<T>>;
+
+declare type UrlString = z.infer<typeof ZUrlString>;
 
 /**
  * Represents a component of type `Value`
  */
-export declare class ValueComponent<TName extends CmpName = CmpName, TValue extends CmpValue = CmpValue, TInput extends CmpValue = TValue> implements IValueComponent {
+export declare class ValueComponent<TName extends CmpName = CmpName, TValue extends CmpValue = CmpValue, TInput extends CmpValue = TValue> {
     readonly name: TName;
     readonly zodType: z.ZodType<CmpValue>;
     constructor(name: TName, zodType: z.ZodType<CmpValue>);
@@ -82,12 +872,74 @@ export declare class ValueComponent<TName extends CmpName = CmpName, TValue exte
     onValueChanged(listener: CmpValueChangedListener<TValue>, callImmediately?: boolean, condition?: CmpValueChangedCondition<TValue>): void;
 }
 
-export declare const version = "@VERSION@";
+export declare const version: string;
 
-declare const ZCmpValue: z.ZodUnion<[z.ZodUnion<[z.ZodString, z.ZodNumber, z.ZodBoolean]>, z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodNumber, z.ZodBoolean]>, "many">, z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>, z.ZodUnknown]>;
+export declare enum WatermarkHorizontalAlignment {
+    Left = 0,
+    Center = 1,
+    Right = 2
+}
+
+declare type WatermarkImageOptions = WatermarkOptionsBase & {
+    imageInputTaskName: string;
+    imageHeight?: number;
+    imageWidth?: number;
+    text?: never;
+};
+
+declare type WatermarkOptionsBase = {
+    /** Opacity in % to make the watermark transparent. A value of 100 means it is fully visible. */
+    opacity?: number;
+    rotation?: number;
+    positionVertical?: WatermarkVerticalAlignment;
+    positionHorizontal?: WatermarkHorizontalAlignment;
+};
+
+declare type WatermarkTextOptions = WatermarkOptionsBase & {
+    text: string;
+    textFontSize?: number;
+    textFontColor?: string;
+    textFontName?: string;
+    imageInputTaskName?: never;
+};
 
-declare const ZCmpValue_2: z.ZodUnion<[z.ZodUnion<[z.ZodString, z.ZodNumber, z.ZodBoolean]>, z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodNumber, z.ZodBoolean]>, "many">, z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>, z.ZodUnknown]>;
+export declare enum WatermarkVerticalAlignment {
+    Top = 0,
+    Center = 1,
+    Bottom = 2
+}
+
+declare const ZAssetName: z.ZodString;
+
+declare const ZCmpValue: z.ZodUnion<[z.ZodUnion<[z.ZodString, z.ZodNumber, z.ZodBoolean]>, z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodNumber, z.ZodBoolean]>, "many">, z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>, z.ZodUnknown]>;
 
 declare const ZCtrlId: z.ZodString;
 
+/**
+ * Raw material JSON which can be passed to Babylon.js e.g. via `Material.Parse(material)`
+ *
+ * Whilst this is not a full zod schema for Babylon material definitions, we least check for the presence of some
+ * required properties like `name` and `id` to avoid passing obviously invalid material definitions.
+ *
+ * Could be extended as needed.
+ */
+declare const ZMaterialObject: z.ZodObject<{
+    name: z.ZodString;
+    id: z.ZodString;
+    customType: z.ZodEnum<["BABYLON.PBRMaterial", "BABYLON.PBRMetallicRoughnessMaterial", "BABYLON.PBRSpecularGlossinessMaterial", "BABYLON.StandardMaterial", "BABYLON.BackgroundMaterial", "BABYLON.NodeMaterial"]>;
+    tags: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+}, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+    name: z.ZodString;
+    id: z.ZodString;
+    customType: z.ZodEnum<["BABYLON.PBRMaterial", "BABYLON.PBRMetallicRoughnessMaterial", "BABYLON.PBRSpecularGlossinessMaterial", "BABYLON.StandardMaterial", "BABYLON.BackgroundMaterial", "BABYLON.NodeMaterial"]>;
+    tags: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+}, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+    name: z.ZodString;
+    id: z.ZodString;
+    customType: z.ZodEnum<["BABYLON.PBRMaterial", "BABYLON.PBRMetallicRoughnessMaterial", "BABYLON.PBRSpecularGlossinessMaterial", "BABYLON.StandardMaterial", "BABYLON.BackgroundMaterial", "BABYLON.NodeMaterial"]>;
+    tags: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+}, z.ZodTypeAny, "passthrough">>;
+
+declare const ZUrlString: z.ZodBranded<z.ZodString, "Url">;
+
 export { }