@talxis/base-controls 1.2510.1 → 1.2512.2

package/dist/components/Ribbon/Ribbon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IRibbon } from "./interfaces";
+export declare const Ribbon: (props: IRibbon) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/Ribbon/Ribbon.js

@@ -0,0 +1,118 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRerender, getClassNames, CommandBar } from '@talxis/react-components';
+import { useRef, useMemo } from 'react';
+import { getRibbonStyles } from './styles.js';
+import { ThemeProvider, Shimmer, getIcon } from '@fluentui/react';
+import { RibbonModel } from './RibbonModel.js';
+import { useEventEmitter } from '../../hooks/useEventEmitter.js';
+import { useControl } from '../../hooks/useControl.js';
+
+const fluentIconMap = {
+    'Activate': 'ActivateOrders',
+    'DeActivate': 'DeactivateOrders',
+    'ExportToExcel': 'ExcelDocument',
+    'ConnectionToOther': 'Assign',
+    'EmailLink': 'Link',
+    'Flows': 'Dataflows',
+    'RunReport': 'CRMReport',
+    'Report': 'CRMReport',
+    'Remove': 'Delete',
+    'WordTemplates': 'WordDocument',
+    'DocumentTemplates': 'ExcelDocument',
+    'New': 'Add',
+};
+const Ribbon = (props) => {
+    const { theme, className } = useControl('Ribbon', props, {});
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    const model = useMemo(() => new RibbonModel(() => propsRef.current), []);
+    const commands = props.parameters.Commands?.raw ?? [];
+    const styles = useMemo(() => getRibbonStyles(), []);
+    const rerender = useRerender();
+    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
+    useEventEmitter(model, ['onBeforeCommandExecuted', 'onCommandExecutionFinished'], () => rerender());
+    const componentProps = onOverrideComponentProps({
+        onRender: (props, defaultRender) => defaultRender(props),
+    });
+    const getIconName = (iconName) => {
+        const iconType = model.getIconType(iconName);
+        switch (iconType) {
+            case 'none': {
+                return undefined;
+            }
+            case 'url': {
+                return iconName;
+            }
+            case 'fluent': {
+                if (fluentIconMap[iconName]) {
+                    return fluentIconMap[iconName];
+                }
+                if (getIcon(iconName)) {
+                    return iconName;
+                }
+                return 'Puzzle';
+            }
+        }
+    };
+    const getCommandBarItems = () => {
+        const result = [];
+        commands.map(command => {
+            if (!command.shouldBeVisible) {
+                return;
+            }
+            const iconName = getIconName(command.icon);
+            const iconUrl = model.getIconUrl(iconName);
+            result.push({
+                key: command.commandId,
+                text: command.label,
+                disabled: model.isCommandDisabled(command),
+                className: styles.commandBtnRoot,
+                ["data-id"]: command?.commandButtonId,
+                ["data-command"]: command?.commandId,
+                title: command?.tooltip,
+                iconProps: iconName !== null ? {
+                    iconName: !iconUrl ? iconName : undefined,
+                    imageProps: iconUrl ? {
+                        src: iconUrl
+                    } : undefined
+                } : undefined,
+                onClick: () => { model.executeCommand(command); }
+            });
+        });
+        return result;
+    };
+    return componentProps.onRender({
+        container: {
+            theme: theme,
+            className: getClassNames([className, styles.container])
+        },
+        isLoading: model.isLoading(),
+        onRenderCommandBar: (props, defaultRender) => defaultRender(props),
+        onRenderLoading: (props, defaultRender) => defaultRender(props)
+    }, (props) => {
+        return jsx(ThemeProvider, { ...props.container, children: (() => {
+                if (props.isLoading) {
+                    return props.onRenderLoading({
+                        styles: {
+                            root: styles.shimmerRoot,
+                            shimmerWrapper: styles.shimmerWrapper
+                        }
+                    }, (props) => {
+                        return jsx(Shimmer, { ...props });
+                    });
+                }
+                else {
+                    return props.onRenderCommandBar({
+                        theme: theme,
+                        items: getCommandBarItems(),
+                        contextualMenuTheme: propsRef.current.context.fluentDesignLanguage?.applicationTheme ?? theme
+                    }, (props) => {
+                        return jsx(CommandBar, { ...props });
+                    });
+                }
+            })() });
+    });
+};
+
+export { Ribbon };
+//# sourceMappingURL=Ribbon.js.map

package/dist/components/Ribbon/Ribbon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ribbon.js","sources":["../../../src/components/Ribbon/Ribbon.tsx"],"sourcesContent":["import { CommandBar, getClassNames, ICommandBarItemProps, useRerender } from \"@talxis/react-components\";\nimport { useControl } from \"../../hooks\"\nimport { IRibbon } from \"./interfaces\"\nimport { useMemo, useRef } from \"react\";\nimport { getRibbonStyles } from \"./styles\";\nimport { getIcon, Shimmer, ThemeProvider } from \"@fluentui/react\";\nimport { IRibbonModelEvents, RibbonModel } from \"./RibbonModel\";\nimport { useEventEmitter } from \"../../hooks/useEventEmitter\";\n\nconst fluentIconMap: { [key: string]: string } = {\n    'Activate': 'ActivateOrders',\n    'DeActivate': 'DeactivateOrders',\n    'ExportToExcel': 'ExcelDocument',\n    'ConnectionToOther': 'Assign',\n    'EmailLink': 'Link',\n    'Flows': 'Dataflows',\n    'RunReport': 'CRMReport',\n    'Report': 'CRMReport',\n    'Remove': 'Delete',\n    'WordTemplates': 'WordDocument',\n    'DocumentTemplates': 'ExcelDocument',\n    'New': 'Add',\n}\n\nexport const Ribbon = (props: IRibbon) => {\n    const { theme, className } = useControl('Ribbon', props, {});\n    const propsRef = useRef<IRibbon>(props);\n    propsRef.current = props;\n    const model = useMemo(() => new RibbonModel(() => propsRef.current), [])\n    const commands = props.parameters.Commands?.raw ?? [];\n    const styles = useMemo(() => getRibbonStyles(), []);\n    const rerender = useRerender();\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n    useEventEmitter<IRibbonModelEvents>(model, ['onBeforeCommandExecuted', 'onCommandExecutionFinished'], () => rerender())\n    const componentProps = onOverrideComponentProps({\n        onRender: (props, defaultRender) => defaultRender(props),\n    })\n\n    const getIconName = (iconName?: string): string | undefined => {\n        const iconType = model.getIconType(iconName);\n        switch (iconType) {\n            case 'none': {\n                return undefined;\n            }\n            case 'url': {\n                return iconName;\n            }\n            case 'fluent': {\n                if (fluentIconMap[iconName!]) {\n                    return fluentIconMap[iconName!];\n                }\n                if (getIcon(iconName)) {\n                    return iconName!;\n                }\n                return 'Puzzle';\n            }\n        }\n    }\n\n    const getCommandBarItems = (): ICommandBarItemProps[] => {\n        const result: ICommandBarItemProps[] = [];\n        commands.map(command => {\n            if (!command.shouldBeVisible) {\n                return;\n            }\n            const iconName = getIconName(command.icon);\n            const iconUrl = model.getIconUrl(iconName);\n            result.push({\n                key: command.commandId,\n                text: command.label,\n                disabled: model.isCommandDisabled(command),\n                className: styles.commandBtnRoot,\n                [\"data-id\"]: command?.commandButtonId,\n                [\"data-command\"]: command?.commandId,\n                title: command?.tooltip,\n                iconProps: iconName !== null ? {\n                    iconName: !iconUrl ? iconName : undefined,\n                    imageProps: iconUrl ? {\n                        src: iconUrl\n                    } : undefined\n                } : undefined,\n                onClick: () => { model.executeCommand(command) }\n            })\n        })\n        return result;\n    }\n\n    return componentProps.onRender({\n        container: {\n            theme: theme,\n            className: getClassNames([className, styles.container])\n        },\n        isLoading: model.isLoading(),\n        onRenderCommandBar: (props, defaultRender) => defaultRender(props),\n        onRenderLoading: (props, defaultRender) => defaultRender(props)\n    }, (props) => {\n        return <ThemeProvider {...props.container}>\n            {(() => {\n                if (props.isLoading) {\n                    return props.onRenderLoading({\n                        styles: {\n                            root: styles.shimmerRoot,\n                            shimmerWrapper: styles.shimmerWrapper\n                        }\n                    }, (props) => {\n                        return <Shimmer {...props} />\n                    })\n                }\n                else {\n                    return props.onRenderCommandBar({\n                        theme: theme,\n                        items: getCommandBarItems(),\n                        contextualMenuTheme: propsRef.current.context.fluentDesignLanguage?.applicationTheme ?? theme\n                    }, (props) => {\n                        return <CommandBar {...props} />\n                    })\n                }\n            })()}\n        </ThemeProvider>\n    })\n\n}"],"names":["_jsx"],"mappings":"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"}

package/dist/components/Ribbon/RibbonModel.d.ts

@@ -0,0 +1,17 @@
+import { EventEmitter, ICommand } from "@talxis/client-libraries";
+import { IRibbon } from "./interfaces";
+export interface IRibbonModelEvents {
+    onBeforeCommandExecuted: () => void;
+    onCommandExecutionFinished: () => void;
+}
+export declare class RibbonModel extends EventEmitter<IRibbonModelEvents> {
+    private _getProps;
+    private _pendingActionsSet;
+    private _client;
+    constructor(getProps: () => IRibbon);
+    executeCommand(command: ICommand): Promise<void>;
+    isLoading(): boolean;
+    isCommandDisabled(command: ICommand): boolean;
+    getIconUrl(iconName?: string): string | null;
+    getIconType(iconName?: string): 'url' | 'fluent' | 'none';
+}

package/dist/components/Ribbon/RibbonModel.js

@@ -0,0 +1,74 @@
+import { EventEmitter, Client } from '@talxis/client-libraries';
+
+class RibbonModel extends EventEmitter {
+    constructor(getProps) {
+        super();
+        this._pendingActionsSet = new Set();
+        this._client = new Client();
+        this._getProps = getProps;
+    }
+    async executeCommand(command) {
+        this._pendingActionsSet.add(command.commandId);
+        this.dispatchEvent('onBeforeCommandExecuted');
+        try {
+            await command.execute();
+        }
+        catch (err) {
+            console.error(err);
+        }
+        finally {
+            this._pendingActionsSet.delete(command.commandId);
+            this.dispatchEvent('onCommandExecutionFinished');
+        }
+    }
+    isLoading() {
+        return this._getProps().parameters.Loading?.raw ?? false;
+    }
+    isCommandDisabled(command) {
+        if (this._getProps().context.mode.isControlDisabled) {
+            return true;
+        }
+        if (!command.canExecute) {
+            return true;
+        }
+        if (this._pendingActionsSet.has(command.commandId)) {
+            return true;
+        }
+        return false;
+    }
+    getIconUrl(iconName) {
+        if (!iconName) {
+            return null;
+        }
+        if (this._client.isTalxisPortal()) {
+            if (iconName.startsWith('https://')) {
+                return iconName;
+            }
+            else {
+                return null;
+            }
+        }
+        else {
+            const webResourceName = iconName.split('$webresource:')[1];
+            if (!webResourceName) {
+                return null;
+            }
+            return `https://${window.location.host}${window.Xrm.Utility.getGlobalContext().getWebResourceUrl(webResourceName)}`;
+        }
+    }
+    getIconType(iconName) {
+        if (!iconName) {
+            return 'none';
+        }
+        if (!this._client.isTalxisPortal() && iconName.startsWith('$')) {
+            return 'url';
+        }
+        if (this._client.isTalxisPortal() && iconName.startsWith('https://')) {
+            return 'url';
+        }
+        return 'fluent';
+    }
+}
+
+export { RibbonModel };
+//# sourceMappingURL=RibbonModel.js.map

package/dist/components/Ribbon/RibbonModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RibbonModel.js","sources":["../../../src/components/Ribbon/RibbonModel.ts"],"sourcesContent":["import { Client, EventEmitter, ICommand } from \"@talxis/client-libraries\";\nimport { IRibbon } from \"./interfaces\";\n\n\nexport interface IRibbonModelEvents {\n    onBeforeCommandExecuted: () => void;\n    onCommandExecutionFinished: () => void\n}\n\nexport class RibbonModel extends EventEmitter<IRibbonModelEvents> {\n    private _getProps: () => IRibbon;\n    private _pendingActionsSet: Set<string> = new Set<string>();\n    private _client: Client = new Client();\n    constructor(getProps: () => IRibbon) {\n        super();\n        this._getProps = getProps;\n    }\n\n    public async executeCommand(command: ICommand) {\n        this._pendingActionsSet.add(command.commandId);\n        this.dispatchEvent('onBeforeCommandExecuted');\n        try {\n            await command.execute();\n        }\n        catch (err) {\n            console.error(err);\n        }\n        finally {\n            this._pendingActionsSet.delete(command.commandId);\n            this.dispatchEvent('onCommandExecutionFinished');\n        }\n    }\n\n    public isLoading(): boolean {\n        return this._getProps().parameters.Loading?.raw ?? false;\n    }\n\n    public isCommandDisabled(command: ICommand): boolean {\n        if (this._getProps().context.mode.isControlDisabled) {\n            return true;\n        }\n        if (!command.canExecute) {\n            return true;\n        }\n        if (this._pendingActionsSet.has(command.commandId)) {\n            return true;\n        }\n        return false;\n    }\n\n    public getIconUrl(iconName?: string): string | null {\n        if (!iconName) {\n            return null;\n        }\n        if (this._client.isTalxisPortal()) {\n            if(iconName.startsWith('https://')) {\n                return iconName;\n            }\n            else {\n                return null;\n            }\n        }\n        else {\n            const webResourceName = iconName.split('$webresource:')[1];\n            if (!webResourceName) {\n                return null;\n            }\n            return `https://${window.location.host}${window.Xrm.Utility.getGlobalContext().getWebResourceUrl(webResourceName)}`\n        }\n    }\n\n    public getIconType(iconName?: string): 'url' | 'fluent' | 'none' {\n        if (!iconName) {\n            return 'none'\n        }\n        if (!this._client.isTalxisPortal() && iconName.startsWith('$')) {\n            return 'url';\n        }\n        if (this._client.isTalxisPortal() && iconName.startsWith('https://')) {\n            return 'url';\n        }\n        return 'fluent';\n    }\n}"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { ICommand } from "@talxis/client-libraries";
+import { IControl } from "../../interfaces/context";
+import { ICommandBarProps } from "@talxis/react-components";
+import { ITwoOptionsProperty } from "../../interfaces";
+import { IShimmerProps, ThemeProviderProps } from "@fluentui/react";
+export interface IRibbon extends IControl<IRibbonParameters, any, any, IRibbonComponentProps> {
+}
+export interface IRibbonParameters {
+    Commands: {
+        raw: ICommand[];
+    };
+    Loading: Omit<ITwoOptionsProperty, 'attributes'>;
+}
+export interface IRibbonComponentProps {
+    onRender: (props: IComponentProps, defaultRender: (props: IComponentProps) => React.ReactElement) => React.ReactElement;
+}
+interface IComponentProps {
+    container: ThemeProviderProps;
+    isLoading: boolean;
+    onRenderLoading: (props: IShimmerProps, defaultRender: (props: IShimmerProps) => React.ReactElement) => React.ReactElement;
+    onRenderCommandBar: (props: ICommandBarProps, defaultRender: (props: ICommandBarProps) => React.ReactElement) => React.ReactElement;
+}
+export {};

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

@@ -0,0 +1,16 @@
+export declare const getRibbonStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    container: {
+        flex: number;
+    };
+    shimmerRoot: {
+        width: string;
+    };
+    shimmerWrapper: {
+        height: number;
+    };
+    commandBtnRoot: {
+        img: {
+            width: number;
+        };
+    };
+}>;

package/dist/components/Ribbon/styles.js

@@ -0,0 +1,23 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getRibbonStyles = () => {
+    return mergeStyleSets({
+        container: {
+            flex: 1,
+        },
+        shimmerRoot: {
+            width: '100%',
+        },
+        shimmerWrapper: {
+            height: 44
+        },
+        commandBtnRoot: {
+            'img': {
+                width: 18
+            }
+        }
+    });
+};
+
+export { getRibbonStyles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/Ribbon/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getRibbonStyles = () => {\n    return mergeStyleSets({\n        container: {\n            flex: 1,\n        },\n        shimmerRoot: {\n            width: '100%',\n        },\n        shimmerWrapper: {\n            height: 44\n        },\n        commandBtnRoot: {\n            'img': {\n                width: 18\n            }\n        }\n    })\n}"],"names":[],"mappings":";;AAEO,MAAM,eAAe,GAAG,MAAK;AAChC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,SAAS,EAAE;AACP,YAAA,IAAI,EAAE,CAAC;AACV,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,KAAK,EAAE,MAAM;AAChB,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,KAAK,EAAE;AACH,gBAAA,KAAK,EAAE,EAAE;AACZ,aAAA;AACJ,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { TextField as TextFieldBase } from \"@talxis/react-components\";\nimport { useInputBasedControl } from '../../hooks/useInputBasedControl';\nimport { ITextField, ITextFieldOutputs, ITextFieldParameters } from './interfaces';\nimport { ICommandBarItemProps, ThemeProvider } from '@fluentui/react';\nimport { DataTypes } from \"@talxis/client-libraries\";\nimport { NestedControlRenderer } from \"../NestedControlRenderer/NestedControlRenderer\";\n\nexport const TextField = (props: ITextField) => {\n    const context = props.context;\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n    const { value, sizing, theme, setValue, onNotifyOutputChanged } = useInputBasedControl<string | undefined, ITextFieldParameters, ITextFieldOutputs, any>('TextField', props);\n\n    const getInputType = () => {\n        switch (boundValue.type) {\n            case 'SingleLine.Email': {\n                return 'email';\n            }\n            case 'SingleLine.URL': {\n                return 'url';\n            }\n            case 'SingleLine.Phone': {\n                return 'tel';\n            }\n        }\n        return \"text\";\n    }\n    const getSuffixItems = (): ICommandBarItemProps[] | undefined => {\n        if (parameters.EnableTypeSuffix?.raw === false) {\n            return undefined;\n        }\n        const disabled = boundValue.error || !boundValue.raw\n        switch (boundValue.type) {\n            case 'SingleLine.Email': {\n                return [{\n                    key: 'sendMail',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Mail'\n                    },\n                    href: `mailto:${boundValue.raw}`\n                }]\n            }\n            case 'SingleLine.Phone': {\n                return [{\n                    key: 'call',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Phone'\n                    },\n                    href: `tel:${boundValue.raw}`\n                }]\n            }\n            case 'SingleLine.URL': {\n                return [{\n                    key: 'goToPage',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Globe'\n                    },\n                    target: '_blank',\n                    href: boundValue.raw!\n                }]\n            }\n        }\n        return undefined;\n    }\n\n    const isTextArea = (() => {\n        switch(parameters.value.type) {\n            case DataTypes.Multiple:\n            case DataTypes.SingleLineTextArea: {\n                return true;\n            }\n        }\n        return false;\n    })()\n\n    const componentProps = onOverrideComponentProps({\n        readOnly: context.mode.isControlDisabled,\n        resizable: false,\n        type: getInputType(),\n        multiline: isTextArea,\n        autoFocus: parameters.AutoFocus?.raw,\n        styles: {\n            fieldGroup: {\n                height: sizing.height,\n                width: sizing.width\n            }\n        },\n        errorMessage: boundValue.errorMessage,\n        hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n        suffixItems: getSuffixItems(),\n        deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n            key: 'delete',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Cancel'\n            },\n            onClick: () => setValue(undefined)\n        } : undefined,\n        clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n            key: 'copy',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Copy'\n            }\n        } : undefined,\n        value: value ?? \"\",\n        onBlur: () => {\n            onNotifyOutputChanged({\n                value: value ?? undefined\n            });\n        },\n        onChange: (e, value) => {\n            setValue(value);\n        }\n    })\n    return (\n        <ThemeProvider style={isTextArea ? { height: '100%' } : undefined} applyTo=\"none\" theme={theme}>\n            <TextFieldBase {...componentProps} />\n        </ThemeProvider>\n    );\n};"],"names":["_jsx","TextFieldBase"],"mappings":"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"}
+{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { TextField as TextFieldBase } from \"@talxis/react-components\";\nimport { useInputBasedControl } from '../../hooks/useInputBasedControl';\nimport { ITextField, ITextFieldOutputs, ITextFieldParameters } from './interfaces';\nimport { ICommandBarItemProps, ThemeProvider } from '@fluentui/react';\nimport { DataTypes } from \"@talxis/client-libraries\";\n\nexport const TextField = (props: ITextField) => {\n    const context = props.context;\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n    const { value, sizing, theme, setValue, onNotifyOutputChanged } = useInputBasedControl<string | undefined, ITextFieldParameters, ITextFieldOutputs, any>('TextField', props);\n\n    const getInputType = () => {\n        switch (boundValue.type) {\n            case 'SingleLine.Email': {\n                return 'email';\n            }\n            case 'SingleLine.URL': {\n                return 'url';\n            }\n            case 'SingleLine.Phone': {\n                return 'tel';\n            }\n        }\n        return \"text\";\n    }\n    const getSuffixItems = (): ICommandBarItemProps[] | undefined => {\n        if (parameters.EnableTypeSuffix?.raw === false) {\n            return undefined;\n        }\n        const disabled = boundValue.error || !boundValue.raw\n        switch (boundValue.type) {\n            case 'SingleLine.Email': {\n                return [{\n                    key: 'sendMail',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Mail'\n                    },\n                    href: `mailto:${boundValue.raw}`\n                }]\n            }\n            case 'SingleLine.Phone': {\n                return [{\n                    key: 'call',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Phone'\n                    },\n                    href: `tel:${boundValue.raw}`\n                }]\n            }\n            case 'SingleLine.URL': {\n                return [{\n                    key: 'goToPage',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Globe'\n                    },\n                    target: '_blank',\n                    href: boundValue.raw!\n                }]\n            }\n        }\n        return undefined;\n    }\n\n    const isTextArea = (() => {\n        switch(parameters.value.type) {\n            case DataTypes.Multiple:\n            case DataTypes.SingleLineTextArea: {\n                return true;\n            }\n        }\n        return false;\n    })()\n\n    const componentProps = onOverrideComponentProps({\n        readOnly: context.mode.isControlDisabled,\n        resizable: false,\n        type: getInputType(),\n        multiline: isTextArea,\n        autoFocus: parameters.AutoFocus?.raw,\n        styles: {\n            fieldGroup: {\n                height: sizing.height,\n                width: sizing.width\n            }\n        },\n        errorMessage: boundValue.errorMessage,\n        hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n        suffixItems: getSuffixItems(),\n        deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n            key: 'delete',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Cancel'\n            },\n            onClick: () => setValue(undefined)\n        } : undefined,\n        clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n            key: 'copy',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Copy'\n            }\n        } : undefined,\n        value: value ?? \"\",\n        onBlur: () => {\n            onNotifyOutputChanged({\n                value: value ?? undefined\n            });\n        },\n        onChange: (e, value) => {\n            setValue(value);\n        }\n    })\n    return (\n        <ThemeProvider style={isTextArea ? { height: '100%' } : undefined} applyTo=\"none\" theme={theme}>\n            <TextFieldBase {...componentProps} />\n        </ThemeProvider>\n    );\n};"],"names":["_jsx","TextFieldBase"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -11,3 +11,4 @@ export * from './OptionSet';
 export * from './TextField';
 export * from './TwoOptions';
 export * from './Duration';
+export * from './GridInlineRibbon';

package/dist/components/index.js

@@ -1,10 +1,8 @@
 export { DatasetControl } from './DatasetControl/DatasetControl.js';
-export { DatasetPaging } from './DatasetControl/Paging/DatasetPaging.js';
-export { Paging } from './DatasetControl/Paging/Paging.js';
 export { DateTime } from './DateTime/DateTime.js';
 export { useDateTime } from './DateTime/hooks/useDateTime.js';
 export { Decimal } from './Decimal/Decimal.js';
-export { Grid } from './Grid/Grid.js';
+export { Grid } from './Grid/grid/Grid.js';
 export { GridCellRenderer } from './GridCellRenderer/GridCellRenderer.js';
 export { Lookup } from './Lookup/Lookup.js';
 export { useLookup } from './Lookup/hooks/useLookup.js';
@@ -14,4 +12,5 @@ export { OptionSet } from './OptionSet/OptionSet.js';
 export { TextField } from './TextField/TextField.js';
 export { TwoOptions } from './TwoOptions/TwoOptions.js';
 export { Duration } from './Duration/Duration.js';
+export { GridInlineRibbon } from './GridInlineRibbon/GridInlineRibbon.js';
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

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

package/dist/hooks/index.d.ts

@@ -4,4 +4,5 @@ export * from './useFocusIn';
 export * from './useInputBasedControl';
 export * from './useMouseOver';
 export * from './useControlLabels';
+export * from './useEventEmitter';
 export * from '../utils/theme/hooks/useControlTheme';

package/dist/hooks/index.js

@@ -4,5 +4,6 @@ export { useFocusIn } from './useFocusIn.js';
 export { useInputBasedControl } from './useInputBasedControl.js';
 export { useMouseOver } from './useMouseOver.js';
 export { useControlLabels } from './useControlLabels.js';
+export { useEventEmitter } from './useEventEmitter.js';
 export { useControlTheme } from '../utils/theme/hooks/useControlTheme.js';
 //# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

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

package/dist/hooks/useControl.d.ts

@@ -7,6 +7,7 @@ export interface IControlController<TTranslations, TOutputs> {
         width?: number;
         height?: number;
     };
+    className: string;
     theme: ITheme;
     onNotifyOutputChanged: (outputs: TOutputs) => void;
 }

package/dist/hooks/useControl.js

@@ -56,6 +56,7 @@ const useControl = (name, props, defaultTranslations) => {
         props.onNotifyOutputChanged?.(outputs);
     };
     return {
+        className: `talxis__baseControl__${name}`,
         labels,
         sizing,
         theme: useControlTheme(context.fluentDesignLanguage),

package/dist/hooks/useControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControl.js","sources":["../../src/hooks/useControl.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { IControl, IOutputs, IParameters } from \"../interfaces\";\nimport { useControlTheme } from \"../utils/theme/hooks/useControlTheme\";\nimport { useControlSizing } from \"./useControlSizing\";\nimport deepEqual from 'fast-deep-equal/es6';\nimport { ITheme } from \"@talxis/react-components\";\nimport dayjs from \"dayjs\";\nimport { IDefaultTranslations, ITranslation, useControlLabels } from \"./useControlLabels\";\n\nexport interface IControlController<TTranslations, TOutputs> {\n    labels: Required<ITranslation<TTranslations>>,\n    sizing: {\n        width?: number,\n        height?: number\n    },\n    theme: ITheme;\n    onNotifyOutputChanged: (outputs: TOutputs) => void,\n}\n/**\n * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want\n * to notify the framework that you wish to write changes. The hook will notify the framework only if the provided output differs from the current inputs.\n */\nexport const useControl = <TParameters extends IParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, defaultTranslations?: IDefaultTranslations): IControlController<TTranslations, TOutputs> => {\n    const context = props.context;\n    const parametersRef = useRef<TParameters>(props.parameters);\n    const sizing = useControlSizing(props.context.mode);\n    const labels = useControlLabels({\n        languageId: context.userSettings.languageId,\n        translations: props.translations,\n        defaultTranslations\n    });\n\n    useEffect(() => {\n        parametersRef.current = props.parameters;\n    }, [props.parameters]);\n\n    const onNotifyOutputChanged = (outputs: TOutputs) => {\n        let isDirty = false;\n        for (let [key, outputValue] of Object.entries(outputs)) {\n            let parameterValue = parametersRef.current[key]?.raw;\n            if(parameterValue instanceof Date) {\n                parameterValue = dayjs(parameterValue).startOf('minute').toDate();\n            }\n            if (!deepEqual(parameterValue, outputValue)) {\n                if (outputValue === null) {\n                    outputValue = undefined;\n                    //@ts-ignore\n                    outputs[key] = undefined;\n                }\n                if (outputValue === \"\") {\n                    outputValue = undefined\n                    //@ts-ignore\n                    outputs[key] = undefined;\n                }\n                if (parameterValue === null) {\n                    parameterValue = undefined;\n                }\n                if (parameterValue === outputValue) {\n                    continue\n                }\n                isDirty = true;\n                break;\n            }\n        }\n        if (!isDirty) {\n            return;\n        }\n        //console.log(`Change detected, triggering notifyOutputChanged on control ${name}.`);\n        props.onNotifyOutputChanged?.(outputs);\n    };\n    \n    return {\n        labels,\n        sizing,\n        theme: useControlTheme(context.fluentDesignLanguage),\n        onNotifyOutputChanged\n    }\n};\n"],"names":[],"mappings":";;;;;;;AAkBA;;;AAGG;AACU,MAAA,UAAU,GAAG,CAA4E,IAAY,EAAE,KAA0D,EAAE,mBAA0C,KAAiD;AACvQ,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,MAAM,aAAa,GAAG,MAAM,CAAc,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5D,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,gBAAgB,CAAC;AAC5B,QAAA,UAAU,EAAE,OAAO,CAAC,YAAY,CAAC,UAAU;QAC3C,YAAY,EAAE,KAAK,CAAC,YAAY;QAChC,mBAAmB;AACtB,KAAA,CAAC,CAAC;IAEH,SAAS,CAAC,MAAK;AACX,QAAA,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC;AAC7C,KAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;AAEvB,IAAA,MAAM,qBAAqB,GAAG,CAAC,OAAiB,KAAI;QAChD,IAAI,OAAO,GAAG,KAAK,CAAC;AACpB,QAAA,KAAK,IAAI,CAAC,GAAG,EAAE,WAAW,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YACpD,IAAI,cAAc,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC;YACrD,IAAG,cAAc,YAAY,IAAI,EAAE;AAC/B,gBAAA,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,CAAC;AACrE,aAAA;AACD,YAAA,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;gBACzC,IAAI,WAAW,KAAK,IAAI,EAAE;oBACtB,WAAW,GAAG,SAAS,CAAC;;AAExB,oBAAA,OAAO,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;AAC5B,iBAAA;gBACD,IAAI,WAAW,KAAK,EAAE,EAAE;oBACpB,WAAW,GAAG,SAAS,CAAA;;AAEvB,oBAAA,OAAO,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;AAC5B,iBAAA;gBACD,IAAI,cAAc,KAAK,IAAI,EAAE;oBACzB,cAAc,GAAG,SAAS,CAAC;AAC9B,iBAAA;gBACD,IAAI,cAAc,KAAK,WAAW,EAAE;oBAChC,SAAQ;AACX,iBAAA;gBACD,OAAO,GAAG,IAAI,CAAC;gBACf,MAAM;AACT,aAAA;AACJ,SAAA;QACD,IAAI,CAAC,OAAO,EAAE;YACV,OAAO;AACV,SAAA;;AAED,QAAA,KAAK,CAAC,qBAAqB,GAAG,OAAO,CAAC,CAAC;AAC3C,KAAC,CAAC;IAEF,OAAO;QACH,MAAM;QACN,MAAM;AACN,QAAA,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,oBAAoB,CAAC;QACpD,qBAAqB;KACxB,CAAA;AACL;;;;"}
+{"version":3,"file":"useControl.js","sources":["../../src/hooks/useControl.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { IControl, IOutputs, IParameters } from \"../interfaces\";\nimport { useControlTheme } from \"../utils/theme/hooks/useControlTheme\";\nimport { useControlSizing } from \"./useControlSizing\";\nimport deepEqual from 'fast-deep-equal/es6';\nimport { ITheme } from \"@talxis/react-components\";\nimport dayjs from \"dayjs\";\nimport { IDefaultTranslations, ITranslation, useControlLabels } from \"./useControlLabels\";\n\nexport interface IControlController<TTranslations, TOutputs> {\n    labels: Required<ITranslation<TTranslations>>,\n    sizing: {\n        width?: number,\n        height?: number\n    },\n    className: string;\n    theme: ITheme;\n    onNotifyOutputChanged: (outputs: TOutputs) => void,\n}\n/**\n * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want\n * to notify the framework that you wish to write changes. The hook will notify the framework only if the provided output differs from the current inputs.\n */\nexport const useControl = <TParameters extends IParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, defaultTranslations?: IDefaultTranslations): IControlController<TTranslations, TOutputs> => {\n    const context = props.context;\n    const parametersRef = useRef<TParameters>(props.parameters);\n    const sizing = useControlSizing(props.context.mode);\n    const labels = useControlLabels({\n        languageId: context.userSettings.languageId,\n        translations: props.translations,\n        defaultTranslations\n    });\n\n    useEffect(() => {\n        parametersRef.current = props.parameters;\n    }, [props.parameters]);\n\n    const onNotifyOutputChanged = (outputs: TOutputs) => {\n        let isDirty = false;\n        for (let [key, outputValue] of Object.entries(outputs)) {\n            let parameterValue = parametersRef.current[key]?.raw;\n            if(parameterValue instanceof Date) {\n                parameterValue = dayjs(parameterValue).startOf('minute').toDate();\n            }\n            if (!deepEqual(parameterValue, outputValue)) {\n                if (outputValue === null) {\n                    outputValue = undefined;\n                    //@ts-ignore\n                    outputs[key] = undefined;\n                }\n                if (outputValue === \"\") {\n                    outputValue = undefined\n                    //@ts-ignore\n                    outputs[key] = undefined;\n                }\n                if (parameterValue === null) {\n                    parameterValue = undefined;\n                }\n                if (parameterValue === outputValue) {\n                    continue\n                }\n                isDirty = true;\n                break;\n            }\n        }\n        if (!isDirty) {\n            return;\n        }\n        //console.log(`Change detected, triggering notifyOutputChanged on control ${name}.`);\n        props.onNotifyOutputChanged?.(outputs);\n    };\n    \n    return {\n        className: `talxis__baseControl__${name}`,\n        labels,\n        sizing,\n        theme: useControlTheme(context.fluentDesignLanguage),\n        onNotifyOutputChanged\n    }\n};\n"],"names":[],"mappings":";;;;;;;AAmBA;;;AAGG;AACU,MAAA,UAAU,GAAG,CAA4E,IAAY,EAAE,KAA0D,EAAE,mBAA0C,KAAiD;AACvQ,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,MAAM,aAAa,GAAG,MAAM,CAAc,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5D,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,gBAAgB,CAAC;AAC5B,QAAA,UAAU,EAAE,OAAO,CAAC,YAAY,CAAC,UAAU;QAC3C,YAAY,EAAE,KAAK,CAAC,YAAY;QAChC,mBAAmB;AACtB,KAAA,CAAC,CAAC;IAEH,SAAS,CAAC,MAAK;AACX,QAAA,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC;AAC7C,KAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;AAEvB,IAAA,MAAM,qBAAqB,GAAG,CAAC,OAAiB,KAAI;QAChD,IAAI,OAAO,GAAG,KAAK,CAAC;AACpB,QAAA,KAAK,IAAI,CAAC,GAAG,EAAE,WAAW,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YACpD,IAAI,cAAc,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC;YACrD,IAAG,cAAc,YAAY,IAAI,EAAE;AAC/B,gBAAA,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,CAAC;AACrE,aAAA;AACD,YAAA,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;gBACzC,IAAI,WAAW,KAAK,IAAI,EAAE;oBACtB,WAAW,GAAG,SAAS,CAAC;;AAExB,oBAAA,OAAO,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;AAC5B,iBAAA;gBACD,IAAI,WAAW,KAAK,EAAE,EAAE;oBACpB,WAAW,GAAG,SAAS,CAAA;;AAEvB,oBAAA,OAAO,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;AAC5B,iBAAA;gBACD,IAAI,cAAc,KAAK,IAAI,EAAE;oBACzB,cAAc,GAAG,SAAS,CAAC;AAC9B,iBAAA;gBACD,IAAI,cAAc,KAAK,WAAW,EAAE;oBAChC,SAAQ;AACX,iBAAA;gBACD,OAAO,GAAG,IAAI,CAAC;gBACf,MAAM;AACT,aAAA;AACJ,SAAA;QACD,IAAI,CAAC,OAAO,EAAE;YACV,OAAO;AACV,SAAA;;AAED,QAAA,KAAK,CAAC,qBAAqB,GAAG,OAAO,CAAC,CAAC;AAC3C,KAAC,CAAC;IAEF,OAAO;QACH,SAAS,EAAE,CAAwB,qBAAA,EAAA,IAAI,CAAE,CAAA;QACzC,MAAM;QACN,MAAM;AACN,QAAA,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,oBAAoB,CAAC;QACpD,qBAAqB;KACxB,CAAA;AACL;;;;"}

package/dist/hooks/useEventEmitter.d.ts

@@ -0,0 +1,2 @@
+import { IEventEmitter } from "@talxis/client-libraries";
+export declare const useEventEmitter: <T extends { [K in keyof T]: (...args: any[]) => any; }>(emitter: IEventEmitter<T>, event: keyof T | (keyof T)[], callback: T[keyof T]) => void;

package/dist/hooks/useEventEmitter.js

@@ -0,0 +1,23 @@
+import { useRef, useCallback, useEffect } from 'react';
+
+const useEventEmitter = (emitter, event, callback) => {
+    const callbackRef = useRef(callback);
+    callbackRef.current = callback;
+    const memoizedCallback = useCallback((...args) => {
+        callbackRef.current(...args);
+    }, []);
+    useEffect(() => {
+        const events = Array.isArray(event) ? event : [event];
+        events.map(event => {
+            emitter.addEventListener(event, memoizedCallback);
+        });
+        return () => {
+            events.map(event => {
+                emitter.removeEventListener(event, memoizedCallback);
+            });
+        };
+    }, []);
+};
+
+export { useEventEmitter };
+//# sourceMappingURL=useEventEmitter.js.map

package/dist/hooks/useEventEmitter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEventEmitter.js","sources":["../../src/hooks/useEventEmitter.ts"],"sourcesContent":["import { IEventEmitter } from \"@talxis/client-libraries\";\nimport { useCallback, useEffect, useRef } from \"react\";\n\nexport const useEventEmitter = <T extends { [K in keyof T]: (...args: any[]) => any }>(emitter: IEventEmitter<T>, event: keyof T | (keyof T)[], callback: T[keyof T]) => {\n    const callbackRef = useRef(callback);\n    callbackRef.current = callback;\n\n    const memoizedCallback = useCallback((...args) => {\n        callbackRef.current(...args);\n    }, []);\n\n    useEffect(() => {\n        const events = Array.isArray(event) ? event : [event];\n        events.map(event => {\n            emitter.addEventListener(event, memoizedCallback as T[keyof T]);\n        })\n        return () => {\n            events.map(event => {\n                emitter.removeEventListener(event, memoizedCallback as T[keyof T]);\n            })\n        };\n    }, []);\n};"],"names":[],"mappings":";;AAGa,MAAA,eAAe,GAAG,CAAwD,OAAyB,EAAE,KAA4B,EAAE,QAAoB,KAAI;AACpK,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;AACrC,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IAE/B,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,GAAG,IAAI,KAAI;AAC7C,QAAA,WAAW,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC;KAChC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC;AACtD,QAAA,MAAM,CAAC,GAAG,CAAC,KAAK,IAAG;AACf,YAAA,OAAO,CAAC,gBAAgB,CAAC,KAAK,EAAE,gBAA8B,CAAC,CAAC;AACpE,SAAC,CAAC,CAAA;AACF,QAAA,OAAO,MAAK;AACR,YAAA,MAAM,CAAC,GAAG,CAAC,KAAK,IAAG;AACf,gBAAA,OAAO,CAAC,mBAAmB,CAAC,KAAK,EAAE,gBAA8B,CAAC,CAAC;AACvE,aAAC,CAAC,CAAA;AACN,SAAC,CAAC;KACL,EAAE,EAAE,CAAC,CAAC;AACX;;;;"}

package/dist/hooks/useInputBasedControl.js

@@ -6,7 +6,7 @@ const useInputBasedControl = (name, props, options) => {
     const rawValue = props.parameters.value.raw;
     const [value, setValue] = useState(formatter?.(rawValue) ?? rawValue);
     const valueRef = useRef(rawValue);
-    const { labels, sizing, theme, onNotifyOutputChanged } = useControl(name, props, options?.defaultTranslations);
+    const { labels, sizing, theme, className, onNotifyOutputChanged } = useControl(name, props, options?.defaultTranslations);
     useEffect(() => {
         const formattedValue = formatter?.(rawValue);
         setValue(formattedValue ?? rawValue);
@@ -23,6 +23,7 @@ const useInputBasedControl = (name, props, options) => {
         };
     }, []);
     return {
+        className: className,
         value,
         labels,
         sizing,

package/dist/hooks/useInputBasedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInputBasedControl.js","sources":["../../src/hooks/useInputBasedControl.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { IControl, IOutputs } from \"../interfaces/context\";\nimport { IControlController, useControl } from \"./useControl\";\nimport { IInputParameters } from \"../interfaces/parameters\";\nimport { IDefaultTranslations } from \"./useControlLabels\";\n\n/**\n * Description\n * @param {any} value:any\n * @returns {any}\n */\ninterface IControlOptions {\n    defaultTranslations?: IDefaultTranslations;\n    /**\n     * Formatting function that will format the bound value every time a new one comes from the props.\n     */\n    formatter?: (value: any) => any,\n    valueExtractor?: (value: any) => any\n}\n\n/**\n * Use when working with components that need to store value changes internally before triggering `notifyOutputChanged`.\n * An example of this is a standard Decimal component - we do not want to trigger `notifyOutputChanged` on every value change,\n * since this would trigger decimal validation on every keystroke which would result in a bad UX. In this case, the `notifyOutputChanged` should\n * be triggered when the user looses focus on the component (`onBlur` event).\n * @returns {[]} The hook returns an array with three props. First `value` prop is a value that will will always be in sync with the value that comes from the `value` parameter. \n * Use this for displaying the up-to-date value to the user.\n * Second prop contains the translations for this component.\n * \n * Third prop is a method that can be used to change the current value. The new value will get propagated to the `value` variable returned from this hook. This method wont propagate the value to the framework.\n * \n * The last prop is a method that will notify the framework that you wish to write changes.  \n * The method will notify the framework only if the provided output differs from the current inputs.\n */\n\ninterface IInputBasedControlController<TValue, TTranslations, TOutputs> extends IControlController<TTranslations, TOutputs> {\n    value: TValue,\n    setValue: (value: TValue) => void\n}\n\nexport const useInputBasedControl = <TValue, TParameters extends IInputParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, options?: IControlOptions): IInputBasedControlController<TValue, TTranslations, TOutputs> => {\n    const { formatter, valueExtractor } = { ...options };\n    const rawValue = props.parameters.value.raw;\n    const [value, setValue] = useState<TValue>(formatter?.(rawValue) ?? rawValue);\n    const valueRef = useRef<TValue>(rawValue);\n    const { labels, sizing, theme, onNotifyOutputChanged } = useControl(name, props, options?.defaultTranslations);\n\n    useEffect(() => {\n        const formattedValue = formatter?.(rawValue);\n        setValue(formattedValue ?? rawValue);\n        //console.log(`Updating component ${name} with new value: ${formattedValue ?? rawValue}`);\n    }, [rawValue]);\n\n    useEffect(() => {\n        valueRef.current = value;\n    }, [value]);\n\n    useEffect(() => {\n        return () => {\n            onNotifyOutputChanged({\n                value: valueExtractor?.(valueRef.current) ?? valueRef.current\n            } as any);\n        };\n    }, []);\n    return {\n        value,\n        labels,\n        sizing,\n        theme,\n        onNotifyOutputChanged,\n        setValue\n    }\n};"],"names":[],"mappings":";;;AAwCa,MAAA,oBAAoB,GAAG,CAAyF,IAAY,EAAE,KAA0D,EAAE,OAAyB,KAAmE;IAC/R,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,CAAC;IACrD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC;AAC5C,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,SAAS,GAAG,QAAQ,CAAC,IAAI,QAAQ,CAAC,CAAC;AAC9E,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAS,QAAQ,CAAC,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,qBAAqB,EAAE,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,mBAAmB,CAAC,CAAC;IAE/G,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AAC7C,QAAA,QAAQ,CAAC,cAAc,IAAI,QAAQ,CAAC,CAAC;;AAEzC,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,MAAK;AACX,QAAA,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;AAC7B,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,MAAK;AACX,QAAA,OAAO,MAAK;AACR,YAAA,qBAAqB,CAAC;gBAClB,KAAK,EAAE,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC,OAAO;AACzD,aAAA,CAAC,CAAC;AACd,SAAC,CAAC;KACL,EAAE,EAAE,CAAC,CAAC;IACP,OAAO;QACH,KAAK;QACL,MAAM;QACN,MAAM;QACN,KAAK;QACL,qBAAqB;QACrB,QAAQ;KACX,CAAA;AACL;;;;"}
+{"version":3,"file":"useInputBasedControl.js","sources":["../../src/hooks/useInputBasedControl.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { IControl, IOutputs } from \"../interfaces/context\";\nimport { IControlController, useControl } from \"./useControl\";\nimport { IInputParameters } from \"../interfaces/parameters\";\nimport { IDefaultTranslations } from \"./useControlLabels\";\n\n/**\n * Description\n * @param {any} value:any\n * @returns {any}\n */\ninterface IControlOptions {\n    defaultTranslations?: IDefaultTranslations;\n    /**\n     * Formatting function that will format the bound value every time a new one comes from the props.\n     */\n    formatter?: (value: any) => any,\n    valueExtractor?: (value: any) => any\n}\n\n/**\n * Use when working with components that need to store value changes internally before triggering `notifyOutputChanged`.\n * An example of this is a standard Decimal component - we do not want to trigger `notifyOutputChanged` on every value change,\n * since this would trigger decimal validation on every keystroke which would result in a bad UX. In this case, the `notifyOutputChanged` should\n * be triggered when the user looses focus on the component (`onBlur` event).\n * @returns {[]} The hook returns an array with three props. First `value` prop is a value that will will always be in sync with the value that comes from the `value` parameter. \n * Use this for displaying the up-to-date value to the user.\n * Second prop contains the translations for this component.\n * \n * Third prop is a method that can be used to change the current value. The new value will get propagated to the `value` variable returned from this hook. This method wont propagate the value to the framework.\n * \n * The last prop is a method that will notify the framework that you wish to write changes.  \n * The method will notify the framework only if the provided output differs from the current inputs.\n */\n\ninterface IInputBasedControlController<TValue, TTranslations, TOutputs> extends IControlController<TTranslations, TOutputs> {\n    value: TValue,\n    setValue: (value: TValue) => void\n}\n\nexport const useInputBasedControl = <TValue, TParameters extends IInputParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, options?: IControlOptions): IInputBasedControlController<TValue, TTranslations, TOutputs> => {\n    const { formatter, valueExtractor } = { ...options };\n    const rawValue = props.parameters.value.raw;\n    const [value, setValue] = useState<TValue>(formatter?.(rawValue) ?? rawValue);\n    const valueRef = useRef<TValue>(rawValue);\n    const { labels, sizing, theme, className, onNotifyOutputChanged } = useControl(name, props, options?.defaultTranslations);\n\n    useEffect(() => {\n        const formattedValue = formatter?.(rawValue);\n        setValue(formattedValue ?? rawValue);\n        //console.log(`Updating component ${name} with new value: ${formattedValue ?? rawValue}`);\n    }, [rawValue]);\n\n    useEffect(() => {\n        valueRef.current = value;\n    }, [value]);\n\n    useEffect(() => {\n        return () => {\n            onNotifyOutputChanged({\n                value: valueExtractor?.(valueRef.current) ?? valueRef.current\n            } as any);\n        };\n    }, []);\n    return {\n        className: className,\n        value,\n        labels,\n        sizing,\n        theme,\n        onNotifyOutputChanged,\n        setValue\n    }\n};"],"names":[],"mappings":";;;AAwCa,MAAA,oBAAoB,GAAG,CAAyF,IAAY,EAAE,KAA0D,EAAE,OAAyB,KAAmE;IAC/R,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,CAAC;IACrD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC;AAC5C,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,SAAS,GAAG,QAAQ,CAAC,IAAI,QAAQ,CAAC,CAAC;AAC9E,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAS,QAAQ,CAAC,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,qBAAqB,EAAE,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,mBAAmB,CAAC,CAAC;IAE1H,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AAC7C,QAAA,QAAQ,CAAC,cAAc,IAAI,QAAQ,CAAC,CAAC;;AAEzC,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,MAAK;AACX,QAAA,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;AAC7B,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,MAAK;AACX,QAAA,OAAO,MAAK;AACR,YAAA,qBAAqB,CAAC;gBAClB,KAAK,EAAE,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC,OAAO;AACzD,aAAA,CAAC,CAAC;AACd,SAAC,CAAC;KACL,EAAE,EAAE,CAAC,CAAC;IACP,OAAO;AACH,QAAA,SAAS,EAAE,SAAS;QACpB,KAAK;QACL,MAAM;QACN,MAAM;QACN,KAAK;QACL,qBAAqB;QACrB,QAAQ;KACX,CAAA;AACL;;;;"}