@talxis/base-controls 0.0.1

package/dist/components/MultiSelectOptionSet/MultiSelectOptionSet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectOptionSet.js","sources":["../../../src/components/MultiSelectOptionSet/MultiSelectOptionSet.tsx"],"sourcesContent":["\nimport { IMultiSelectOptionSet } from './interfaces';\nimport { useControl } from '../../hooks';\nimport { ComboBox } from \"@talxis/react-components\";\nimport { IComboBox, IComboBoxOption, ThemeProvider } from '@fluentui/react';\nimport { useEffect, useMemo, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport React from 'react';\nimport { ColorfulOptions } from './ColofulOptions/ColorfulOptions';\nimport { getIsColorFeatureEnabled, onRenderColorfulOption } from '../OptionSet/shared';\nimport { getComboBoxStyles } from './styles';\n\nexport const MultiSelectOptionSet = (props: IMultiSelectOptionSet) => {\n    const { sizing, onNotifyOutputChanged, theme } = useControl('MultiSelectOptionSet', props);\n    const ref = useRef<HTMLDivElement>(null);\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const componentRef = useRef<IComboBox>(null);\n    const { Options } = parameters.value.attributes;\n    const context = props.context;\n    const applicationTheme = props.context.fluentDesignLanguage?.applicationTheme;\n    const isColorFeatureEnabled = useMemo(() => getIsColorFeatureEnabled(props.parameters.EnableOptionSetColors?.raw, Options), [props.parameters.EnableOptionSetColors?.raw, Options]);\n    const comboBoxOptions: IComboBoxOption[] = Options.map(option => ({\n        key: option.Value.toString(),\n        text: option.Label,\n    }));\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n    const handleChange = (option?: IComboBoxOption | null): void => {\n        if (!option) {\n            onNotifyOutputChanged({\n                value: undefined\n            });\n            return;\n        }\n        const optionKey = option.key.toString();\n        const updatedSelectedKeys = new Set(boundValue.raw || []);\n        if (option.selected) {\n            updatedSelectedKeys.add(+optionKey);\n        } else {\n            updatedSelectedKeys.delete(+optionKey);\n        }\n        const updatedSelectedKeysArray = Array.from(updatedSelectedKeys);\n\n        onNotifyOutputChanged({\n            value: updatedSelectedKeysArray.map(key => +key)\n        });\n    };\n\n    const isEmptyValue = () => {\n        if (!boundValue.raw) {\n            return true;\n        }\n        if (boundValue.raw.length === 0) {\n            return true;\n        }\n        return false;\n    }\n\n    const renderColorfulOptions = () => {\n        const className = 'talxis__multiSelectOptionSet__colorfulOptions';\n        const parent: HTMLDivElement = ref.current?.querySelector('.ms-ComboBox')!;\n        const container = document.createElement('div');\n        container.setAttribute('class', `${className} ${styles.colorfulOptionsWrapper}`);\n        container.onclick = () => componentRef.current?.focus(true);\n\n        ReactDOM.render(React.createElement(ColorfulOptions, {\n            value: boundValue,\n            context: props.context\n        }), container);\n\n        const existingContainer = parent.querySelector(`:scope>.${className}`);\n        if (existingContainer && isEmptyValue()) {\n            //clear the container if no values are selected\n            parent.removeChild(existingContainer);\n        }\n        if (!existingContainer) {\n            parent.prepend(container);\n        }\n        else {\n            existingContainer.replaceWith(container);\n        }\n    }\n\n\n    useEffect(() => {\n        if (parameters.AutoFocus?.raw) {\n            componentRef.current?.focus(true);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (isColorFeatureEnabled) {\n            renderColorfulOptions();\n        }\n    }, [boundValue.raw]);\n\n    const styles = getComboBoxStyles(isColorFeatureEnabled, isEmptyValue(), sizing.width, sizing.height)\n\n    const componentProps = onOverrideComponentProps({\n        componentRef: componentRef,\n        ref: ref,\n        options: comboBoxOptions,\n        allowFreeInput: true,\n        multiSelect: true,\n        autoComplete: \"on\",\n        autofill: parameters.AutoFocus?.raw === true ? {\n            autoFocus: true,\n        } : undefined,\n        onRenderContainer: (containerProps, defaultRender) => <ThemeProvider theme={props.context.fluentDesignLanguage?.applicationTheme}>{defaultRender?.(containerProps)}</ThemeProvider>,\n        onRenderOption: isColorFeatureEnabled ? (option) => onRenderColorfulOption(Options, option, theme) : undefined,\n        calloutProps: applicationTheme ? {\n            theme: applicationTheme\n        } : undefined,\n        readOnly: context.mode.isControlDisabled,\n        errorMessage: boundValue.errorMessage,\n        selectedKey: boundValue.raw ? boundValue.raw.map(key => key.toString()) : null,\n        useComboBoxAsMenuWidth: true,\n        hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n        styles: { root: styles.root, callout: styles.callout },\n        clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n            key: 'copy',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Copy'\n            }\n        } : undefined,\n        deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n            key: 'delete',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Cancel'\n            },\n            onClick: (e, value) => {\n                handleChange(null);\n            }\n        } : undefined,\n        onChange: (e, option) => handleChange(option),\n    });\n\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\">\n            <ComboBox {...componentProps} />\n        </ThemeProvider>\n    );\n};\n"],"names":["React","_jsx"],"mappings":"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"}

package/dist/components/MultiSelectOptionSet/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MultiSelectOptionSet';
+export * from './interfaces';

package/dist/components/MultiSelectOptionSet/index.js

@@ -0,0 +1,2 @@
+export { MultiSelectOptionSet } from './MultiSelectOptionSet.js';
+//# sourceMappingURL=index.js.map

package/dist/components/MultiSelectOptionSet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/MultiSelectOptionSet/interfaces.d.ts

@@ -0,0 +1,13 @@
+import { IComboBoxProps } from "@talxis/react-components";
+import { IMultiSelectOptionSetProperty, ITwoOptionsProperty } from "../../interfaces";
+import { IControl, IOutputs } from "../../interfaces/context";
+import { IInputParameters } from "../../interfaces/parameters";
+export interface IMultiSelectOptionSet extends IControl<IMultiSelectOptionSetParameters, IMultiSelectOptionSetOutputs, any, IComboBoxProps> {
+}
+export interface IMultiSelectOptionSetParameters extends IInputParameters {
+    value: IMultiSelectOptionSetProperty;
+    EnableOptionSetColors?: Omit<ITwoOptionsProperty, 'attributes'>;
+}
+export interface IMultiSelectOptionSetOutputs extends IOutputs {
+    value?: number[];
+}

package/dist/components/MultiSelectOptionSet/styles.d.ts

@@ -0,0 +1,31 @@
+export declare const getComboBoxStyles: (isColorFeatureEnabled: boolean, isEmptyValue: boolean, width?: number, height?: number) => import("@fluentui/react").IProcessedStyleSet<{
+    root: {
+        '.ms-ComboBox-Input': {
+            opacity: number;
+            width: number | undefined;
+        };
+        paddingLeft?: string | undefined;
+        height: number | undefined;
+        width: number | undefined;
+        display: string;
+        alignItems: string;
+    };
+    callout: {
+        '.ms-Checkbox-label'?: {
+            display: string;
+            flexDirection: string;
+            gap: string;
+            alignItems: string;
+        } | undefined;
+        maxHeight: string;
+    };
+    colorfulOptionsWrapper: {
+        flexGrow: number;
+        display: string;
+        alignItems: string;
+        height: string;
+        textAlign: string;
+        overflow: string;
+        textOverflow: string;
+    };
+}>;

package/dist/components/MultiSelectOptionSet/styles.js

@@ -0,0 +1,42 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getComboBoxStyles = (isColorFeatureEnabled, isEmptyValue, width, height) => {
+    return mergeStyleSets({
+        root: {
+            height: height,
+            width: width,
+            display: 'flex',
+            alignItems: 'center',
+            ...(!isEmptyValue && isColorFeatureEnabled && {
+                paddingLeft: '4px !important',
+            }),
+            '.ms-ComboBox-Input': {
+                opacity: isColorFeatureEnabled && !isEmptyValue ? 0 : 1,
+                width: isColorFeatureEnabled && !isEmptyValue ? 0 : undefined
+            }
+        },
+        callout: {
+            maxHeight: '300px !important',
+            ...(isColorFeatureEnabled && {
+                '.ms-Checkbox-label': {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    gap: '5px',
+                    alignItems: 'center',
+                },
+            }),
+        },
+        colorfulOptionsWrapper: {
+            flexGrow: 1,
+            display: 'flex',
+            alignItems: 'center',
+            height: '100%',
+            textAlign: 'left',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        },
+    });
+};
+
+export { getComboBoxStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/MultiSelectOptionSet/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/MultiSelectOptionSet/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getComboBoxStyles = (isColorFeatureEnabled: boolean, isEmptyValue: boolean, width?: number, height?: number) => {\n    return mergeStyleSets({\n        root: {\n            height: height,\n            width: width,\n            display: 'flex',\n            alignItems: 'center',\n            ...(!isEmptyValue && isColorFeatureEnabled && {\n                paddingLeft: '4px !important',\n            }),\n            '.ms-ComboBox-Input': {\n                opacity: isColorFeatureEnabled && !isEmptyValue ? 0 : 1,\n                width: isColorFeatureEnabled && !isEmptyValue ? 0 : undefined\n            }\n        },\n        callout: {\n            maxHeight: '300px !important',\n            ...(isColorFeatureEnabled && {\n                '.ms-Checkbox-label': {\n                    display: 'flex',\n                    flexDirection: 'row',\n                    gap: '5px',\n                    alignItems: 'center',\n                },\n            }),\n        },\n        colorfulOptionsWrapper: {\n            flexGrow: 1,\n            display: 'flex',\n            alignItems: 'center',\n            height: '100%',\n            textAlign: 'left',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis'\n        },\n    })\n}"],"names":[],"mappings":";;AAEO,MAAM,iBAAiB,GAAG,CAAC,qBAA8B,EAAE,YAAqB,EAAE,KAAc,EAAE,MAAe,KAAI;AACxH,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,IAAI,CAAC,YAAY,IAAI,qBAAqB,IAAI;AAC1C,gBAAA,WAAW,EAAE,gBAAgB;aAChC,CAAC;AACF,YAAA,oBAAoB,EAAE;AAClB,gBAAA,OAAO,EAAE,qBAAqB,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,CAAC;AACvD,gBAAA,KAAK,EAAE,qBAAqB,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,SAAS;AAChE,aAAA;AACJ,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,SAAS,EAAE,kBAAkB;YAC7B,IAAI,qBAAqB,IAAI;AACzB,gBAAA,oBAAoB,EAAE;AAClB,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,aAAa,EAAE,KAAK;AACpB,oBAAA,GAAG,EAAE,KAAK;AACV,oBAAA,UAAU,EAAE,QAAQ;AACvB,iBAAA;aACJ,CAAC;AACL,SAAA;AACD,QAAA,sBAAsB,EAAE;AACpB,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,SAAS,EAAE,MAAM;AACjB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AAC3B,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/NestedControlRenderer/NestedControl.d.ts

@@ -0,0 +1,86 @@
+/// <reference types="@types/powerapps-component-framework" />
+import { IControl, IParameters, IProperty } from "../../interfaces";
+import { IBinding, IControlStates } from "./interfaces";
+export interface IOptions {
+    onGetBindings: () => {
+        [key: string]: IBinding;
+    };
+    /**
+    * PCF Context of parent control using this class. It will be used as base for nested control PCF context.
+    */
+    parentPcfContext: ComponentFramework.Context<any, any>;
+    /**
+     * Custom PCF to be rendered, if not provided you will get Base Control props.
+     */
+    /**
+* Container element into which the control will be rendered in.
+*/
+    onGetContainerElement?: () => HTMLDivElement;
+    onGetControlName?: () => string;
+    callbacks?: {
+        onInit?: (instance: NestedControl) => void;
+        onGetControlStates?: () => IControlStates | undefined;
+        onNotifyOutputChanged?: (ouputs: any) => void;
+        /**
+         * Triggers when the control changes a state that should be visible in control renderer UI (for example loading)
+         */
+        onControlStateChanged?: () => void;
+    };
+    overrides?: {
+        onGetProps?: (props: IControl<any, any, any, any>) => IControl<any, any, any, any>;
+        onRender?: (control: NestedControl, defaultRender: () => Promise<void>) => void;
+        onUnmount?: (control: NestedControl, defaultUnmount: () => void) => void;
+    };
+}
+export declare class NestedControl {
+    private _options;
+    private _pendingInitialRender;
+    private _errorMessage;
+    private _properties;
+    private _lastRenderedControlName;
+    private _hasCustomPcfBeenMounted;
+    private _customControlInstance;
+    private _customControlId;
+    private _manifest;
+    private _loading;
+    private _props;
+    private _mutationObserver;
+    private _destroyed;
+    private _initialized;
+    private _container;
+    private _hasControlBeenPatched;
+    constructor(options: IOptions);
+    getProps(): IControl<IParameters, any, any, any>;
+    refreshProps(): any;
+    getParameters(): {
+        [name: string]: IProperty;
+    };
+    isLoading(): boolean;
+    setLoading(loading: boolean): void;
+    getOptions(): IOptions;
+    render(): Promise<void>;
+    unmount(softUnmount?: boolean): void;
+    getErrorMessage(): string;
+    setError(message?: string): void;
+    isMountedPcfComponent(): boolean;
+    getContainer(): HTMLDivElement;
+    getControlName(): string;
+    getBindings(): {
+        [key: string]: IBinding;
+    };
+    getCustomControlId(): string;
+    private _overrideDecorator;
+    private _unmount;
+    private _render;
+    private _getCustomControlNameWithoutPrefix;
+    private _checkIfControlLoadedToDom;
+    private _getPropertiesFromBindings;
+    private _getPropertyInstance;
+    private _getPrimaryBindingName;
+    private _getManifestPrimaryBinding;
+    private _getManifest;
+    private _getCustomControlParameters;
+    private _patchUpdateView;
+    private _patchContext;
+    private _getFluentDesignLanguage;
+}

package/dist/components/NestedControlRenderer/NestedControl.js

@@ -0,0 +1,456 @@
+import { PromiseCache, DataTypes } from '@talxis/client-libraries';
+import { TextProperty } from './properties/TextProperty.js';
+import { OptionSetProperty } from './properties/OptionSetProperty.js';
+import { NumberProperty } from './properties/NumberProperty.js';
+import { DateProperty } from './properties/DateProperty.js';
+import { LookupProperty } from './properties/LookupProperty.js';
+import { FileProperty } from './properties/FileProperty.js';
+import { NestedControlError } from './NestedControlError.js';
+import { Manifest } from './manifest/Manifest.js';
+import { ControlTheme } from '../../utils/theme/ControlTheme.js';
+
+const manifestCache = new PromiseCache();
+const LOADED_CONTROLS = new Set();
+class NestedControl {
+    constructor(options) {
+        this._pendingInitialRender = false;
+        this._errorMessage = '';
+        this._properties = new Map();
+        this._lastRenderedControlName = '';
+        this._hasCustomPcfBeenMounted = false;
+        this._customControlInstance = null;
+        this._customControlId = '';
+        this._manifest = null;
+        this._loading = false;
+        this._mutationObserver = new MutationObserver((mutations) => this._checkIfControlLoadedToDom(mutations));
+        this._destroyed = false;
+        this._initialized = false;
+        this._container = null;
+        this._hasControlBeenPatched = false;
+        this._options = options;
+        this._getPropertiesFromBindings();
+    }
+    getProps() {
+        if (!this._props) {
+            return this.refreshProps();
+        }
+        return this._props;
+    }
+    refreshProps() {
+        const parameters = this.getParameters();
+        const props = {
+            context: {
+                ...this.getOptions().parentPcfContext,
+                parameters: parameters,
+                mode: Object.create(this.getOptions().parentPcfContext.mode, {
+                    isControlDisabled: {
+                        value: this.getOptions().callbacks?.onGetControlStates?.()?.isControlDisabled ?? false
+                    }
+                }),
+                factory: {
+                    ...this.getOptions().parentPcfContext.factory,
+                    requestRender: () => this.render()
+                },
+                fluentDesignLanguage: this._getFluentDesignLanguage(this.getOptions().parentPcfContext.fluentDesignLanguage)
+            },
+            parameters: parameters,
+            onNotifyOutputChanged: (outputs) => {
+                Object.entries(outputs).map(([name, output]) => {
+                    this.getOptions().onGetBindings()[name]?.onNotifyOutputChanged?.(output);
+                });
+                this.getOptions().callbacks?.onNotifyOutputChanged?.(outputs);
+            }
+        };
+        const result = this._overrideDecorator(() => props, this.getOptions().overrides?.onGetProps, () => [props]);
+        this._props = result;
+        return result;
+    }
+    getParameters() {
+        const parameters = {};
+        [...this._properties.entries()].map(([name, prop]) => {
+            const binding = this.getOptions().onGetBindings()[name];
+            //binding might not exist if we have switched controls
+            if (binding) {
+                parameters[name] = {
+                    ...prop.getParameter(),
+                    error: binding.error ?? false,
+                    errorMessage: binding.errorMessage ?? null,
+                    type: prop.dataType
+                };
+            }
+        });
+        return parameters;
+    }
+    isLoading() {
+        return this._loading;
+    }
+    setLoading(loading) {
+        this._loading = loading;
+    }
+    getOptions() {
+        return this._options;
+    }
+    async render() {
+        if (this._pendingInitialRender || this._destroyed) {
+            return;
+        }
+        await this._getPropertiesFromBindings();
+        if (this._destroyed) {
+            return;
+        }
+        this.refreshProps();
+        //if we detect a change in name, unmount the component before render
+        if (this._lastRenderedControlName && this._lastRenderedControlName !== this.getControlName()) {
+            this.unmount(true);
+        }
+        if (!this._customControlId) {
+            this._customControlId = crypto.randomUUID();
+        }
+        await this._overrideDecorator(async () => this._render(), this.getOptions().overrides?.onRender, () => [this, async () => this._render()]);
+        if (this._destroyed) {
+            return;
+        }
+        this._lastRenderedControlName = this.getControlName();
+    }
+    unmount(softUnmount) {
+        this._overrideDecorator(() => this._unmount(), this.getOptions().overrides?.onUnmount, () => [this, () => this._unmount()]);
+        this._lastRenderedControlName = '';
+        this._hasCustomPcfBeenMounted = false;
+        this._hasControlBeenPatched = false;
+        this._customControlId = '';
+        this._mutationObserver?.disconnect();
+        if (!softUnmount) {
+            this._mutationObserver = null;
+            this._customControlInstance = null;
+            this._props = undefined;
+            this._container = null;
+            this._properties.clear();
+            this._destroyed = true;
+        }
+    }
+    getErrorMessage() {
+        return this._errorMessage;
+    }
+    setError(message) {
+        this._errorMessage = message ?? '';
+    }
+    isMountedPcfComponent() {
+        return this._hasCustomPcfBeenMounted;
+    }
+    getContainer() {
+        let container = this.getOptions().onGetContainerElement?.();
+        if (container) {
+            this._container = container;
+            return container;
+        }
+        if (this._container) {
+            return this._container;
+        }
+        if (!container && this._container) {
+            return this._container;
+        }
+        throw new Error('Cannot render control if no container is specified!');
+    }
+    getControlName() {
+        const controlName = this.getOptions().onGetControlName?.();
+        if (!controlName) {
+            throw new Error("Cannot render control if it's name is not specified!");
+        }
+        return controlName;
+    }
+    getBindings() {
+        return this.getOptions().onGetBindings();
+    }
+    getCustomControlId() {
+        return this._customControlId;
+    }
+    _overrideDecorator(defaultMethod, override, getOverrideArgs) {
+        if (override && getOverrideArgs) {
+            return override(...getOverrideArgs());
+        }
+        else {
+            return defaultMethod();
+        }
+    }
+    _unmount() {
+        this.getOptions().parentPcfContext.factory.unbindDOMComponent(this._customControlId);
+    }
+    async _render() {
+        try {
+            if (!this._lastRenderedControlName) {
+                this._errorMessage = '';
+                this._pendingInitialRender = true;
+                const controlName = this.getControlName();
+                if (!LOADED_CONTROLS.has(controlName)) {
+                    this._loading = true;
+                    this.getOptions().callbacks?.onControlStateChanged?.();
+                }
+                this._mutationObserver?.observe(this.getContainer(), { childList: true, subtree: true });
+                try {
+                    this._manifest = await this._getManifest(controlName);
+                }
+                catch (err) {
+                    throw new NestedControlError({
+                        message: `Could not find control named ${controlName} on this environment.`
+                    }, this);
+                }
+                if (this._destroyed) {
+                    return;
+                }
+                try {
+                    const properties = {
+                        controlstates: this.getOptions().callbacks?.onGetControlStates?.() ?? {},
+                        parameters: this._getCustomControlParameters(this._manifest),
+                        childeventlisteners: [{
+                                eventname: "onInit",
+                                eventhandler: (control) => {
+                                    LOADED_CONTROLS.add(this._lastRenderedControlName);
+                                    this._customControlInstance = control;
+                                    this._patchUpdateView(this._customControlInstance, this._manifest);
+                                    this._loading = false;
+                                    this.getOptions().callbacks?.onControlStateChanged?.();
+                                }
+                            }]
+                    };
+                    const component = this.getOptions().parentPcfContext.factory.createComponent(controlName, this._customControlId, properties);
+                    this.getOptions().parentPcfContext.factory.bindDOMElement(component, this.getContainer());
+                    this._hasCustomPcfBeenMounted = true;
+                }
+                catch (err) {
+                    throw new NestedControlError(err, this);
+                }
+                this._pendingInitialRender = false;
+            }
+            //the PCF did not change, just call updateView
+            else {
+                this._customControlInstance?.updateView?.(this.getProps().context);
+            }
+        }
+        catch (err) {
+            this._pendingInitialRender = false;
+            this._pendingInitialRender = false;
+            console.error(err);
+        }
+    }
+    _getCustomControlNameWithoutPrefix() {
+        const parts = this._lastRenderedControlName.split('_');
+        return parts[1] ?? parts[0];
+    }
+    _checkIfControlLoadedToDom(mutations) {
+        try {
+            mutations.map(mutation => {
+                const target = mutation.target;
+                if (target.classList.contains(this._getCustomControlNameWithoutPrefix())) {
+                    this._loading = false;
+                    LOADED_CONTROLS.add(this._lastRenderedControlName);
+                    this._mutationObserver?.disconnect();
+                    if (!this._customControlInstance) {
+                        this._unmount();
+                        throw new NestedControlError({
+                            message: `Custom control ${this._lastRenderedControlName} does not expose it's instance through fireEvent. Please add fireEvent to init() to avoid unintentional behavior.`
+                        }, this);
+                    }
+                }
+            });
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }
+    async _getPropertiesFromBindings() {
+        const promises = [];
+        Object.entries(this.getOptions().onGetBindings()).map(([name, binding]) => {
+            if (!this._properties.get(name)) {
+                const getBinding = () => this.getOptions().onGetBindings()[name];
+                const propertyInstance = this._getPropertyInstance(getBinding);
+                const metadata = getBinding()?.metadata;
+                //push to promise only if we need to fetch the metadata asynchronously
+                if (metadata?.attributeName && metadata.entityName) {
+                    promises.push(propertyInstance.init());
+                }
+                else {
+                    propertyInstance.init();
+                }
+                this._properties.set(name, propertyInstance);
+            }
+        });
+        if (promises.length > 0) {
+            await Promise.all(promises);
+        }
+        if (!this._initialized) {
+            this._initialized = true;
+            this.getOptions().callbacks?.onInit?.(this);
+        }
+    }
+    _getPropertyInstance(onGetBinding) {
+        switch (onGetBinding().type) {
+            case DataTypes.TwoOptions:
+            case DataTypes.OptionSet:
+            case DataTypes.MultiSelectOptionSet: {
+                return new OptionSetProperty(this.getOptions(), onGetBinding);
+            }
+            case DataTypes.DateAndTimeDateAndTime:
+            case DataTypes.DateAndTimeDateOnly: {
+                return new DateProperty(this.getOptions(), onGetBinding);
+            }
+            case DataTypes.WholeNone:
+            case DataTypes.Decimal:
+            case DataTypes.Currency:
+            case DataTypes.WholeDuration: {
+                return new NumberProperty(this.getOptions(), onGetBinding);
+            }
+            case DataTypes.LookupSimple:
+            case DataTypes.LookupOwner:
+            case DataTypes.LookupCustomer:
+            case DataTypes.LookupRegarding: {
+                return new LookupProperty(this.getOptions(), onGetBinding);
+            }
+            case DataTypes.File:
+            case DataTypes.Image: {
+                return new FileProperty(this.getOptions(), onGetBinding);
+            }
+            default: {
+                return new TextProperty(this.getOptions(), onGetBinding);
+            }
+        }
+    }
+    _getPrimaryBindingName() {
+        const primaryBinding = Object.entries(this.getOptions().onGetBindings()).find(([key, binding]) => !binding.isStatic)?.[0];
+        if (!primaryBinding) {
+            throw new Error('Control needs to have atleast one non-static binding!');
+        }
+        return primaryBinding;
+    }
+    _getManifestPrimaryBinding(manifest) {
+        return [...manifest.control.properties.values()].find(prop => prop.isBindingProperty);
+    }
+    async _getManifest(controlName) {
+        return manifestCache.get(controlName, async () => {
+            const result = await this.getOptions().parentPcfContext.webAPI.retrieveMultipleRecords('customcontrol', `?$select=name,manifest&$filter=name eq '${controlName}'`);
+            const manifestXmlString = result.entities[0].manifest;
+            return new Manifest(manifestXmlString);
+        });
+    }
+    _getCustomControlParameters(manifest) {
+        const result = {};
+        const bindingParameters = this.getProps().parameters;
+        const manifestProperties = [...manifest.control.properties.values()];
+        manifestProperties.map(property => {
+            result[property.name] = {
+                Static: property.usage === 'input',
+                Primary: property.isBindingProperty,
+                //if no ofType is present, there is a type group and we need to get the type from the passed parameters above
+                Type: property.ofType ?? bindingParameters[property.name]?.type ?? 'SingleLine.Text',
+                //if static, we take the value that came from the parameter above
+                Value: (() => {
+                    const binding = bindingParameters[property.name];
+                    if (binding) {
+                        return binding.raw;
+                    }
+                    if (property.usage === 'input') {
+                        return property.defaultValue;
+                    }
+                    if (property.isBindingProperty) {
+                        return bindingParameters[this._getPrimaryBindingName()].raw;
+                    }
+                })(),
+                Usage: (() => {
+                    switch (property.usage) {
+                        case 'bound': {
+                            return 3;
+                        }
+                        case 'input':
+                        case 'output': {
+                            return 0;
+                        }
+                    }
+                })(),
+                Attributes: (() => {
+                    const getBindingMetadata = (bindingName) => {
+                        const binding = this.getOptions().onGetBindings()[bindingName];
+                        return binding?.metadata ? {
+                            EntityLogicalName: binding.metadata.entityName,
+                            LogicalName: binding.metadata.attributeName
+                        } : undefined;
+                    };
+                    const propertyBindingMetadata = getBindingMetadata(property.name);
+                    if (propertyBindingMetadata) {
+                        return propertyBindingMetadata;
+                    }
+                    if (property.isBindingProperty) {
+                        return getBindingMetadata(this._getPrimaryBindingName());
+                    }
+                    return undefined;
+                })(),
+                Callback: (value) => {
+                    let binding = this.getOptions().onGetBindings()[property.name];
+                    let bindingName = property.name;
+                    if (!binding && !property.isBindingProperty) {
+                        return;
+                    }
+                    if (!binding) {
+                        bindingName = this._getPrimaryBindingName();
+                        binding = this.getOptions().onGetBindings()[bindingName];
+                    }
+                    binding.onNotifyOutputChanged?.(value);
+                    const boundBindings = Object.entries(this.getOptions().onGetBindings()).filter(([key, binding]) => !binding.isStatic);
+                    const outputs = {};
+                    boundBindings.map(([key, binding]) => {
+                        outputs[key] = key === bindingName ? value : this.getProps().parameters[bindingName].raw;
+                    });
+                    this.getOptions().callbacks?.onNotifyOutputChanged?.(outputs);
+                }
+            };
+        });
+        const nonManifestParameters = Object.entries(bindingParameters).filter(([key, value]) => !manifest.control.properties.get(key));
+        nonManifestParameters.map(([key, parameter]) => {
+            result[key] = {
+                Static: true,
+                Primary: false,
+                Type: parameter.type ?? 'SingleLine.Text',
+                Value: parameter.raw,
+                Usage: 0
+            };
+        });
+        return result;
+    }
+    _patchUpdateView(control, manifest) {
+        if (this._hasControlBeenPatched) {
+            return;
+        }
+        let originalContext = null;
+        const originalUpdateView = control.updateView.bind(control);
+        control.updateView = (context) => {
+            if (!originalContext) {
+                originalContext = context;
+            }
+            originalUpdateView(this._patchContext(manifest, originalContext));
+        };
+        this._hasControlBeenPatched = true;
+    }
+    _patchContext(manifest, originalContext) {
+        const context = this.getProps().context;
+        const contextParameters = originalContext.parameters;
+        const parameters = this.getProps().parameters;
+        const manifestBindingProperty = this._getManifestPrimaryBinding(manifest);
+        const primaryBindingName = this._getPrimaryBindingName();
+        context.resources = originalContext.resources;
+        context.events = originalContext.events;
+        context.parameters = {
+            ...contextParameters,
+            ...parameters,
+            [manifestBindingProperty.name]: parameters[primaryBindingName]
+        };
+        return context;
+    }
+    _getFluentDesignLanguage(fluentDesignLanguage) {
+        const v8Theme = ControlTheme.GetV8ThemeFromFluentDesignLanguage(fluentDesignLanguage);
+        return ControlTheme.GenerateFluentDesignLanguage(v8Theme.palette.themePrimary, v8Theme.semanticColors.bodyBackground, v8Theme.semanticColors.bodyText, {
+            v8FluentOverrides: fluentDesignLanguage?.v8FluentOverrides,
+            applicationTheme: fluentDesignLanguage?.applicationTheme ?? v8Theme
+        });
+    }
+}
+
+export { NestedControl };
+//# sourceMappingURL=NestedControl.js.map