@talxis/base-controls 0.0.1

package/dist/components/OptionSet/styles.js

@@ -0,0 +1,18 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getComboBoxStyles = (width, height) => {
+    return mergeStyleSets({
+        root: {
+            height: height,
+            width: width,
+            display: 'flex',
+            alignItems: 'center',
+        },
+        callout: {
+            maxHeight: '300px !important',
+        },
+    });
+};
+
+export { getComboBoxStyles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/OptionSet/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getComboBoxStyles = (width?: number, height?: number) => {\n    return mergeStyleSets({\n        root: {\n            height: height,\n            width: width,\n            display: 'flex',\n            alignItems: 'center',\n        },\n        callout: {\n            maxHeight: '300px !important',\n        },\n    })\n}"],"names":[],"mappings":";;MAEa,iBAAiB,GAAG,CAAC,KAAc,EAAE,MAAe,KAAI;AACjE,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;AACvB,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,SAAS,EAAE,kBAAkB;AAChC,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/OptionSet/useComboBoxTheme.d.ts

@@ -0,0 +1,3 @@
+import { IOptionSet } from "./interfaces";
+import { ITheme } from "@fluentui/react";
+export declare const useComboBoxTheme: (props: IOptionSet, theme: ITheme) => [boolean, ITheme];

package/dist/components/OptionSet/useComboBoxTheme.js

@@ -0,0 +1,61 @@
+import { useThemeGenerator, Theming } from '@talxis/react-components';
+
+const useComboBoxTheme = (props, theme) => {
+    const boundValue = props.parameters.value;
+    const { Options } = boundValue.attributes;
+    const selectedOptionColor = boundValue.attributes.Options.find(x => x.Value === boundValue.raw)?.Color;
+    const getColors = (colorFeatureEnabled) => {
+        const colors = {
+            backgroundColor: theme.semanticColors.bodyBackground,
+            textColor: theme.semanticColors.bodyText,
+            primaryColor: theme.palette.themePrimary
+        };
+        if (!colorFeatureEnabled) {
+            return colors;
+        }
+        if (!selectedOptionColor) {
+            colors.backgroundColor = theme.semanticColors.inputBackground;
+            return colors;
+        }
+        colors.backgroundColor = selectedOptionColor;
+        colors.textColor = Theming.GetTextColorForBackground(selectedOptionColor);
+        return colors;
+    };
+    const getIsColorFeatureEnabled = () => {
+        if (props.parameters.EnableOptionSetColors?.raw && Options.find(x => x.Color)) {
+            return true;
+        }
+        return false;
+    };
+    /**
+     * Since we are creating new theme for combobox, we need to add the overrides in cases where there is no color feature enabled or no color is selected.
+     */
+    const getThemeOverride = (colorFeatureEnabled) => {
+        const override = {
+            ...props.context.fluentDesignLanguage?.v8FluentOverrides
+        };
+        if (!colorFeatureEnabled) {
+            return override;
+        }
+        if (!selectedOptionColor) {
+            return override;
+        }
+        delete override.semanticColors?.inputBackground;
+        return {
+            fonts: {
+                medium: {
+                    fontWeight: 600
+                }
+            },
+            ...override,
+        };
+    };
+    const isColorFeatureEnabled = getIsColorFeatureEnabled();
+    const colors = getColors(isColorFeatureEnabled);
+    const override = getThemeOverride(isColorFeatureEnabled);
+    const currentTheme = useThemeGenerator(colors.primaryColor, colors.backgroundColor, colors.textColor, override);
+    return [isColorFeatureEnabled, currentTheme];
+};
+
+export { useComboBoxTheme };
+//# sourceMappingURL=useComboBoxTheme.js.map

package/dist/components/OptionSet/useComboBoxTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboBoxTheme.js","sources":["../../../src/components/OptionSet/useComboBoxTheme.ts"],"sourcesContent":["import { IOptionSet } from \"./interfaces\";\nimport { ITheme, Theme } from \"@fluentui/react\";\nimport { DeepPartial } from \"@talxis/client-libraries\";\nimport { Theming, useThemeGenerator } from \"@talxis/react-components\";\n\nexport const useComboBoxTheme = (props: IOptionSet, theme: ITheme): [boolean, ITheme] => {\n    const boundValue = props.parameters.value;\n    const { Options } = boundValue.attributes;\n    const selectedOptionColor = boundValue.attributes.Options.find(x => x.Value === boundValue.raw)?.Color;\n\n    const getColors = (colorFeatureEnabled: boolean) => {\n        const colors = {\n            backgroundColor: theme.semanticColors.bodyBackground,\n            textColor: theme.semanticColors.bodyText,\n            primaryColor: theme.palette.themePrimary\n        }\n        if (!colorFeatureEnabled) {\n            return colors;\n        }\n        if (!selectedOptionColor) {\n            colors.backgroundColor = theme.semanticColors.inputBackground;\n            return colors;\n        }\n        colors.backgroundColor = selectedOptionColor;\n        colors.textColor = Theming.GetTextColorForBackground(selectedOptionColor);\n        return colors;\n    }\n    const getIsColorFeatureEnabled = () => {\n        if (props.parameters.EnableOptionSetColors?.raw && Options.find(x => x.Color)) {\n            return true;\n        }\n        return false;\n    }\n\n    /**\n     * Since we are creating new theme for combobox, we need to add the overrides in cases where there is no color feature enabled or no color is selected.\n     */\n    const getThemeOverride = (colorFeatureEnabled: boolean): DeepPartial<Theme> => {\n        const override: DeepPartial<ITheme> = {\n            ...props.context.fluentDesignLanguage?.v8FluentOverrides\n        }\n        if(!colorFeatureEnabled) {\n            return override;\n        }\n        if(!selectedOptionColor) {\n            return override;\n        }\n        delete override.semanticColors?.inputBackground;\n        return {\n            fonts: {\n                medium: {\n                    fontWeight: 600\n                }\n            },\n            ...override,\n        };\n    }\n\n    const isColorFeatureEnabled = getIsColorFeatureEnabled();\n    const colors = getColors(isColorFeatureEnabled);\n    const override = getThemeOverride(isColorFeatureEnabled);\n\n    const currentTheme = useThemeGenerator(colors.primaryColor, colors.backgroundColor, colors.textColor, override)\n    return [isColorFeatureEnabled, currentTheme];\n}"],"names":[],"mappings":";;MAKa,gBAAgB,GAAG,CAAC,KAAiB,EAAE,KAAa,KAAuB;AACpF,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;AAC1C,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,UAAU,CAAC;IAC1C,MAAM,mBAAmB,GAAG,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC;AAEvG,IAAA,MAAM,SAAS,GAAG,CAAC,mBAA4B,KAAI;AAC/C,QAAA,MAAM,MAAM,GAAG;AACX,YAAA,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;AACpD,YAAA,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;AACxC,YAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;SAC3C,CAAA;QACD,IAAI,CAAC,mBAAmB,EAAE;AACtB,YAAA,OAAO,MAAM,CAAC;AACjB,SAAA;QACD,IAAI,CAAC,mBAAmB,EAAE;YACtB,MAAM,CAAC,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;AAC9D,YAAA,OAAO,MAAM,CAAC;AACjB,SAAA;AACD,QAAA,MAAM,CAAC,eAAe,GAAG,mBAAmB,CAAC;QAC7C,MAAM,CAAC,SAAS,GAAG,OAAO,CAAC,yBAAyB,CAAC,mBAAmB,CAAC,CAAC;AAC1E,QAAA,OAAO,MAAM,CAAC;AAClB,KAAC,CAAA;IACD,MAAM,wBAAwB,GAAG,MAAK;QAClC,IAAI,KAAK,CAAC,UAAU,CAAC,qBAAqB,EAAE,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE;AAC3E,YAAA,OAAO,IAAI,CAAC;AACf,SAAA;AACD,QAAA,OAAO,KAAK,CAAC;AACjB,KAAC,CAAA;AAED;;AAEG;AACH,IAAA,MAAM,gBAAgB,GAAG,CAAC,mBAA4B,KAAwB;AAC1E,QAAA,MAAM,QAAQ,GAAwB;AAClC,YAAA,GAAG,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE,iBAAiB;SAC3D,CAAA;QACD,IAAG,CAAC,mBAAmB,EAAE;AACrB,YAAA,OAAO,QAAQ,CAAC;AACnB,SAAA;QACD,IAAG,CAAC,mBAAmB,EAAE;AACrB,YAAA,OAAO,QAAQ,CAAC;AACnB,SAAA;AACD,QAAA,OAAO,QAAQ,CAAC,cAAc,EAAE,eAAe,CAAC;QAChD,OAAO;AACH,YAAA,KAAK,EAAE;AACH,gBAAA,MAAM,EAAE;AACJ,oBAAA,UAAU,EAAE,GAAG;AAClB,iBAAA;AACJ,aAAA;AACD,YAAA,GAAG,QAAQ;SACd,CAAC;AACN,KAAC,CAAA;AAED,IAAA,MAAM,qBAAqB,GAAG,wBAAwB,EAAE,CAAC;AACzD,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,qBAAqB,CAAC,CAAC;AAChD,IAAA,MAAM,QAAQ,GAAG,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;AAEzD,IAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAA;AAC/G,IAAA,OAAO,CAAC,qBAAqB,EAAE,YAAY,CAAC,CAAC;AACjD;;;;"}

package/dist/components/TextField/TextField.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ITextField } from './interfaces';
+export declare const TextField: (props: ITextField) => JSX.Element;

package/dist/components/TextField/TextField.js

@@ -0,0 +1,120 @@
+import { jsx } from 'react/jsx-runtime';
+import { TextField as TextField$1 } from '@talxis/react-components';
+import { useInputBasedControl } from '../../hooks/useInputBasedControl.js';
+import { ThemeProvider } from '@fluentui/react';
+import { DataTypes } from '@talxis/client-libraries';
+
+const TextField = (props) => {
+    const context = props.context;
+    const parameters = props.parameters;
+    const boundValue = parameters.value;
+    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
+    const { value, sizing, theme, setValue, onNotifyOutputChanged } = useInputBasedControl('TextField', props);
+    const getInputType = () => {
+        switch (boundValue.type) {
+            case 'SingleLine.Email': {
+                return 'email';
+            }
+            case 'SingleLine.URL': {
+                return 'url';
+            }
+            case 'SingleLine.Phone': {
+                return 'tel';
+            }
+        }
+        return "text";
+    };
+    const getSuffixItems = () => {
+        if (parameters.EnableTypeSuffix?.raw === false) {
+            return undefined;
+        }
+        const disabled = boundValue.error || !boundValue.raw;
+        switch (boundValue.type) {
+            case 'SingleLine.Email': {
+                return [{
+                        key: 'sendMail',
+                        disabled: disabled,
+                        iconProps: {
+                            iconName: 'Mail'
+                        },
+                        href: `mailto:${boundValue.raw}`
+                    }];
+            }
+            case 'SingleLine.Phone': {
+                return [{
+                        key: 'call',
+                        disabled: disabled,
+                        iconProps: {
+                            iconName: 'Phone'
+                        },
+                        href: `tel:${boundValue.raw}`
+                    }];
+            }
+            case 'SingleLine.URL': {
+                return [{
+                        key: 'goToPage',
+                        disabled: disabled,
+                        iconProps: {
+                            iconName: 'Globe'
+                        },
+                        target: '_blank',
+                        href: boundValue.raw
+                    }];
+            }
+        }
+        return undefined;
+    };
+    const isTextArea = (() => {
+        switch (parameters.value.type) {
+            case DataTypes.Multiple:
+            case DataTypes.SingleLineTextArea: {
+                return true;
+            }
+        }
+        return false;
+    })();
+    const componentProps = onOverrideComponentProps({
+        readOnly: context.mode.isControlDisabled,
+        resizable: false,
+        type: getInputType(),
+        multiline: isTextArea,
+        autoFocus: parameters.AutoFocus?.raw,
+        styles: {
+            fieldGroup: {
+                height: sizing.height,
+                width: sizing.width
+            }
+        },
+        errorMessage: boundValue.errorMessage,
+        hideErrorMessage: !parameters.ShowErrorMessage?.raw,
+        suffixItems: getSuffixItems(),
+        deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {
+            key: 'delete',
+            showOnlyOnHover: true,
+            iconProps: {
+                iconName: 'Cancel'
+            },
+            onClick: () => setValue(undefined)
+        } : undefined,
+        clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {
+            key: 'copy',
+            showOnlyOnHover: true,
+            iconProps: {
+                iconName: 'Copy'
+            }
+        } : undefined,
+        value: value ?? "",
+        onBlur: () => {
+            onNotifyOutputChanged({
+                value: value ?? undefined
+            });
+        },
+        onChange: (e, value) => {
+            setValue(value);
+        }
+    });
+    return (jsx(ThemeProvider, { style: isTextArea ? { height: '100%' } : undefined, applyTo: "none", theme: theme, children: jsx(TextField$1, { ...componentProps }) }));
+};
+
+export { TextField };
+//# sourceMappingURL=TextField.js.map

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

@@ -0,0 +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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"}

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

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

package/dist/components/TextField/index.js

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

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

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

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

@@ -0,0 +1,14 @@
+import { ITextFieldProps } from "@talxis/react-components";
+import { IStringProperty, ITwoOptionsProperty } from "../../interfaces";
+import { IControl, IOutputs } from "../../interfaces/context";
+import { IInputParameters } from "../../interfaces/parameters";
+export interface ITextField extends IControl<ITextFieldParameters, ITextFieldOutputs, any, ITextFieldProps> {
+}
+export interface ITextFieldParameters extends IInputParameters {
+    isResizable?: Omit<ITwoOptionsProperty, 'attributes'>;
+    EnableTypeSuffix?: Omit<ITwoOptionsProperty, 'attributes'>;
+    value: IStringProperty;
+}
+export interface ITextFieldOutputs extends IOutputs {
+    value?: string;
+}

package/dist/components/TwoOptions/TwoOptions.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ITwoOptions } from './interfaces';
+export declare const TwoOptions: (props: ITwoOptions) => JSX.Element;

package/dist/components/TwoOptions/TwoOptions.js

@@ -0,0 +1,55 @@
+import { jsx } from 'react/jsx-runtime';
+import { ThemeProvider, Toggle } from '@fluentui/react';
+import { useRef, useEffect } from 'react';
+import { OptionSet } from '../OptionSet/OptionSet.js';
+import { useControl } from '../../hooks/useControl.js';
+
+const TwoOptions = (props) => {
+    const parameters = props.parameters;
+    const boundValue = parameters.value;
+    const options = boundValue.attributes.Options;
+    const { sizing, onNotifyOutputChanged, theme } = useControl('TwoOptions', props);
+    const context = props.context;
+    const componentRef = useRef(null);
+    useEffect(() => {
+        if (parameters.AutoFocus?.raw === true) {
+            componentRef.current?.focus();
+        }
+    }, []);
+    const isColorFeatureEnabled = () => {
+        if (props.parameters.EnableOptionSetColors?.raw && options.find(x => x.Color)) {
+            return true;
+        }
+        return false;
+    };
+    const handleChange = (value) => {
+        onNotifyOutputChanged({
+            value: value
+        });
+    };
+    return (jsx(ThemeProvider, { theme: theme, applyTo: 'none', children: isColorFeatureEnabled() ? (jsx(OptionSet, { context: props.context, parameters: {
+                ...parameters,
+                value: {
+                    raw: boundValue.raw !== null ? boundValue.raw ? 1 : 0 : boundValue.raw,
+                    //@ts-ignore - typings
+                    attributes: boundValue.attributes
+                },
+                EnableOptionSetColors: {
+                    raw: true
+                }
+            }, onNotifyOutputChanged: (outputs) => {
+                handleChange(outputs.value == 1 ? true : outputs.value == 0 ? false : undefined);
+            } })) : (jsx(Toggle, { styles: {
+                root: {
+                    height: sizing.height,
+                    width: sizing.width,
+                    marginBottom: 0,
+                },
+                container: {
+                    alignItems: 'center'
+                }
+            }, theme: theme, checked: boundValue.raw, componentRef: componentRef, disabled: context.mode.isControlDisabled, inlineLabel: true, onText: options.find(option => option.Value === 1)?.Label || 'Yes', offText: options.find(option => option.Value === 0)?.Label || 'No', onChange: (e, value) => handleChange(value) })) }));
+};
+
+export { TwoOptions };
+//# sourceMappingURL=TwoOptions.js.map

package/dist/components/TwoOptions/TwoOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TwoOptions.js","sources":["../../../src/components/TwoOptions/TwoOptions.tsx"],"sourcesContent":["import { ThemeProvider, Toggle } from '@fluentui/react';\nimport { useControl } from '../../hooks';\nimport { ITwoOptions } from './interfaces';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { OptionSet } from '../OptionSet';\n\nexport const TwoOptions = (props: ITwoOptions) => {\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const options = boundValue.attributes.Options;\n    const { sizing, onNotifyOutputChanged, theme } = useControl('TwoOptions', props);\n    const context = props.context;\n    const componentRef = useRef<any>(null);\n\n    useEffect(() => {\n        if (parameters.AutoFocus?.raw === true) {\n            componentRef.current?.focus();\n        }\n    }, []);\n\n    const isColorFeatureEnabled = () => {\n        if (props.parameters.EnableOptionSetColors?.raw && options.find(x => x.Color)) {\n            return true;\n        }\n        return false;\n    }\n\n    const handleChange = (value: boolean | undefined): void => {\n        onNotifyOutputChanged({\n            value: value\n        });\n    };\n\n    return (\n        <ThemeProvider theme={theme} applyTo='none'>\n            {isColorFeatureEnabled() ? (\n                <OptionSet\n                    context={props.context}\n                    parameters={{\n                        ...parameters as any,\n                        value: {\n                            raw: boundValue.raw !== null ? boundValue.raw ? 1 : 0 : boundValue.raw,\n                            //@ts-ignore - typings\n                            attributes: boundValue.attributes\n                        },\n                        EnableOptionSetColors: {\n                            raw: true\n                        }\n                    }}\n                    onNotifyOutputChanged={(outputs) => {\n                        handleChange(outputs.value == 1 ? true : outputs.value == 0 ? false : undefined);\n                    }}\n                />\n            ) : (\n                <Toggle\n                    styles={{\n                        root: {\n                            height: sizing.height,\n                            width: sizing.width,\n                            marginBottom: 0,\n                        },\n                        container: {\n                            alignItems: 'center'\n                        }\n                    }}\n                    theme={theme}\n                    checked={boundValue.raw}\n                    componentRef={componentRef}\n                    disabled={context.mode.isControlDisabled}\n                    inlineLabel\n                    onText={options.find(option => option.Value === 1)?.Label || 'Yes'}\n                    offText={options.find(option => option.Value === 0)?.Label || 'No'}\n                    onChange={(e, value) => handleChange(value)}\n                />)}\n        </ThemeProvider>\n    )\n};"],"names":["_jsx"],"mappings":"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"}

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

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

package/dist/components/TwoOptions/index.js

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

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

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

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

@@ -0,0 +1,13 @@
+import { IToggleProps } from "@fluentui/react";
+import { ITwoOptionsProperty } from "../../interfaces";
+import { IControl, IOutputs } from "../../interfaces/context";
+import { IBaseParameters } from "../../interfaces/parameters";
+export interface ITwoOptions extends IControl<ITwoOptionsParameters, ITwoOptionsOutputs, any, IToggleProps> {
+}
+export interface ITwoOptionsParameters extends IBaseParameters {
+    value: ITwoOptionsProperty;
+    EnableOptionSetColors?: Omit<ITwoOptionsProperty, 'attributes'>;
+}
+export interface ITwoOptionsOutputs extends IOutputs {
+    value?: boolean;
+}

package/dist/components/index.d.ts

@@ -0,0 +1,13 @@
+export * from './DatasetControl';
+export * from './DateTime';
+export * from './Decimal';
+export * from './DateTime';
+export * from './Grid';
+export * from './GridCellRenderer';
+export * from './Lookup';
+export * from './MultiSelectOptionSet';
+export * from './NestedControlRenderer';
+export * from './OptionSet';
+export * from './TextField';
+export * from './TwoOptions';
+export * from './Duration';

package/dist/components/index.js

@@ -0,0 +1,17 @@
+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 { GridCellRenderer } from './GridCellRenderer/GridCellRenderer.js';
+export { Lookup } from './Lookup/Lookup.js';
+export { useLookup } from './Lookup/hooks/useLookup.js';
+export { MultiSelectOptionSet } from './MultiSelectOptionSet/MultiSelectOptionSet.js';
+export { NestedControlRenderer } from './NestedControlRenderer/NestedControlRenderer.js';
+export { OptionSet } from './OptionSet/OptionSet.js';
+export { TextField } from './TextField/TextField.js';
+export { TwoOptions } from './TwoOptions/TwoOptions.js';
+export { Duration } from './Duration/Duration.js';
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

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

package/dist/constants.d.ts

@@ -0,0 +1,15 @@
+export declare const CURRENCY_POSITIVE_PATTERN: {
+    [key: number]: string;
+};
+export declare const CURRENCY_NEGATIVE_PATTERN: {
+    [key: number]: string;
+};
+export declare const NUMBER_NEGATIVE_PATTERN: {
+    [key: number]: string;
+};
+export declare const PERCENT_POSITIVE_PATTERN: {
+    [key: number]: string;
+};
+export declare const PERCENT_NEGATIVE_PATTERN: {
+    [key: number]: string;
+};

package/dist/constants.js

@@ -0,0 +1,35 @@
+const CURRENCY_POSITIVE_PATTERN = {
+    0: '$n',
+    1: 'n$',
+    2: '$ n',
+    3: 'n $',
+};
+const CURRENCY_NEGATIVE_PATTERN = {
+    0: '($n)',
+    1: '-$n',
+    2: '$-n',
+    3: '$n-',
+    4: '(n$)',
+    5: '-n$',
+    6: 'n-$',
+    7: 'n$-',
+    8: '-n $',
+    9: '-$ n',
+    10: 'n $-',
+    11: '$ n-',
+    12: '$ -n',
+    13: 'n- $',
+    14: '($ n)',
+    15: '(n $)',
+    16: '$- n'
+};
+const NUMBER_NEGATIVE_PATTERN = {
+    0: '(n)',
+    1: '-n',
+    2: '- n',
+    3: 'n-',
+    4: 'n -'
+};
+
+export { CURRENCY_NEGATIVE_PATTERN, CURRENCY_POSITIVE_PATTERN, NUMBER_NEGATIVE_PATTERN };
+//# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export const CURRENCY_POSITIVE_PATTERN: { [key: number]: string } = {\n    0: '$n',\n    1: 'n$',\n    2: '$ n',\n    3: 'n $',\n};\nexport const CURRENCY_NEGATIVE_PATTERN: { [key: number]: string } = {\n    0: '($n)',\n    1: '-$n',\n    2: '$-n',\n    3: '$n-',\n    4: '(n$)',\n    5: '-n$',\n    6: 'n-$',\n    7: 'n$-',\n    8: '-n $',\n    9: '-$ n',\n    10: 'n $-',\n    11: '$ n-',\n    12: '$ -n',\n    13: 'n- $',\n    14: '($ n)',\n    15: '(n $)',\n    16: '$- n'\n};\nexport const NUMBER_NEGATIVE_PATTERN: { [key: number]: string } = {\n    0: '(n)',\n    1: '-n',\n    2: '- n',\n    3: 'n-',\n    4: 'n -'\n};\nexport const PERCENT_POSITIVE_PATTERN: { [key: number]: string } = {\n    0: 'n %',\n    1: 'n%',\n    2: '%n',\n    3: '% n'\n};\nexport const PERCENT_NEGATIVE_PATTERN: { [key: number]: string } = {\n    0: '-n %',\n    1: '-n%',\n    2: '-%n',\n    3: '%-n',\n    4: '%n-',\n    5: 'n-%',\n    6: 'n%-',\n    7: '-% n',\n    8: 'n %-',\n    9: '% n-',\n    10: '% -n',\n    11: 'n- %'\n};"],"names":[],"mappings":"AAAa,MAAA,yBAAyB,GAA8B;AAChE,IAAA,CAAC,EAAE,IAAI;AACP,IAAA,CAAC,EAAE,IAAI;AACP,IAAA,CAAC,EAAE,KAAK;AACR,IAAA,CAAC,EAAE,KAAK;EACV;AACW,MAAA,yBAAyB,GAA8B;AAChE,IAAA,CAAC,EAAE,MAAM;AACT,IAAA,CAAC,EAAE,KAAK;AACR,IAAA,CAAC,EAAE,KAAK;AACR,IAAA,CAAC,EAAE,KAAK;AACR,IAAA,CAAC,EAAE,MAAM;AACT,IAAA,CAAC,EAAE,KAAK;AACR,IAAA,CAAC,EAAE,KAAK;AACR,IAAA,CAAC,EAAE,KAAK;AACR,IAAA,CAAC,EAAE,MAAM;AACT,IAAA,CAAC,EAAE,MAAM;AACT,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,MAAM;EACZ;AACW,MAAA,uBAAuB,GAA8B;AAC9D,IAAA,CAAC,EAAE,KAAK;AACR,IAAA,CAAC,EAAE,IAAI;AACP,IAAA,CAAC,EAAE,KAAK;AACR,IAAA,CAAC,EAAE,IAAI;AACP,IAAA,CAAC,EAAE,KAAK;;;;;"}

package/dist/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from './useControl';
+export * from './useControlSizing';
+export * from './useFocusIn';
+export * from './useInputBasedControl';
+export * from './useMouseOver';
+export * from './useControlLabels';
+export * from '../utils/theme/hooks/useControlTheme';

package/dist/hooks/index.js

@@ -0,0 +1,8 @@
+export { useControl } from './useControl.js';
+export { useControlSizing } from './useControlSizing.js';
+export { useFocusIn } from './useFocusIn.js';
+export { useInputBasedControl } from './useInputBasedControl.js';
+export { useMouseOver } from './useMouseOver.js';
+export { useControlLabels } from './useControlLabels.js';
+export { useControlTheme } from '../utils/theme/hooks/useControlTheme.js';
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

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

package/dist/hooks/useControl.d.ts

@@ -0,0 +1,17 @@
+import { IControl, IOutputs, IParameters } from "../interfaces";
+import { ITheme } from "@talxis/react-components";
+import { IDefaultTranslations, ITranslation } from "./useControlLabels";
+export interface IControlController<TTranslations, TOutputs> {
+    labels: Required<ITranslation<TTranslations>>;
+    sizing: {
+        width?: number;
+        height?: number;
+    };
+    theme: ITheme;
+    onNotifyOutputChanged: (outputs: TOutputs) => void;
+}
+/**
+ * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want
+ * 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.
+ */
+export declare const useControl: <TParameters extends IParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, defaultTranslations?: IDefaultTranslations) => IControlController<TTranslations, TOutputs>;

package/dist/hooks/useControl.js

@@ -0,0 +1,67 @@
+import { useRef, useEffect } from 'react';
+import { useControlTheme } from '../utils/theme/hooks/useControlTheme.js';
+import { useControlSizing } from './useControlSizing.js';
+import deepEqual from 'fast-deep-equal/es6';
+import dayjs from 'dayjs';
+import { useControlLabels } from './useControlLabels.js';
+
+/**
+ * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want
+ * 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.
+ */
+const useControl = (name, props, defaultTranslations) => {
+    const context = props.context;
+    const parametersRef = useRef(props.parameters);
+    const sizing = useControlSizing(props.context.mode);
+    const labels = useControlLabels({
+        languageId: context.userSettings.languageId,
+        translations: props.translations,
+        defaultTranslations
+    });
+    useEffect(() => {
+        parametersRef.current = props.parameters;
+    }, [props.parameters]);
+    const onNotifyOutputChanged = (outputs) => {
+        let isDirty = false;
+        for (let [key, outputValue] of Object.entries(outputs)) {
+            let parameterValue = parametersRef.current[key]?.raw;
+            if (parameterValue instanceof Date) {
+                parameterValue = dayjs(parameterValue).startOf('minute').toDate();
+            }
+            if (!deepEqual(parameterValue, outputValue)) {
+                if (outputValue === null) {
+                    outputValue = undefined;
+                    //@ts-ignore
+                    outputs[key] = undefined;
+                }
+                if (outputValue === "") {
+                    outputValue = undefined;
+                    //@ts-ignore
+                    outputs[key] = undefined;
+                }
+                if (parameterValue === null) {
+                    parameterValue = undefined;
+                }
+                if (parameterValue === outputValue) {
+                    continue;
+                }
+                isDirty = true;
+                break;
+            }
+        }
+        if (!isDirty) {
+            return;
+        }
+        //console.log(`Change detected, triggering notifyOutputChanged on control ${name}.`);
+        props.onNotifyOutputChanged?.(outputs);
+    };
+    return {
+        labels,
+        sizing,
+        theme: useControlTheme(context.fluentDesignLanguage),
+        onNotifyOutputChanged
+    };
+};
+
+export { useControl };
+//# sourceMappingURL=useControl.js.map

package/dist/hooks/useControl.js.map

@@ -0,0 +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;;;;"}

package/dist/hooks/useControlLabels.d.ts

@@ -0,0 +1,14 @@
+export type ITranslation<T> = {
+    [Property in keyof Required<T>]: (variables?: any) => string;
+};
+export interface IDefaultTranslations {
+    [LCID: number]: string | string[];
+    [key: string]: any;
+}
+interface ILabelsOptions<TTranslations> {
+    languageId: number;
+    translations?: TTranslations;
+    defaultTranslations?: IDefaultTranslations;
+}
+export declare const useControlLabels: <TTranslations>(options: ILabelsOptions<TTranslations>) => Required<ITranslation<TTranslations>>;
+export {};