@talxis/base-controls 1.2509.6 → 1.2512.1

package/dist/components/GridCellRenderer/GridCellRendererModel.js

@@ -0,0 +1,211 @@
+import { Property } from './properties/Property.js';
+import { Email } from './properties/Email.js';
+import { Phone } from './properties/Phone.js';
+import { Url } from './properties/Url.js';
+import { Lookup } from './properties/Lookup.js';
+import { MultilineText } from './properties/MultilineText.js';
+import { OptionSet } from './properties/OptionSet.js';
+import { MultiSelectOptionSet } from './properties/MultiSelectOptionSet.js';
+import { TwoOptions } from './properties/TwoOptions.js';
+import { File } from './properties/File.js';
+import { Image } from './properties/Image.js';
+import { TickMemoizer } from '@talxis/client-libraries/dist/helpers/cache/TickMemoizer';
+
+const propertyMap = new Map([
+    ['SingleLine.Email', Email],
+    ['SingleLine.Phone', Phone],
+    ['SingleLine.URL', Url],
+    ['Lookup.Customer', Lookup],
+    ['Lookup.Owner', Lookup],
+    ['Lookup.Simple', Lookup],
+    ['Lookup.Regarding', Lookup],
+    ['OptionSet', OptionSet],
+    ['MultiSelectPicklist', MultiSelectOptionSet],
+    ['TwoOptions', TwoOptions],
+    ['SingleLine.TextArea', MultilineText],
+    ['Multiple', MultilineText],
+    ['File', File],
+    ['Image', Image]
+]);
+class GridCellRendererModel {
+    constructor(deps) {
+        this._tickMemoizer = new TickMemoizer();
+        this._getProps = deps.getProps;
+        this._labels = deps.labels;
+        this._getControlTheme = deps.getControlTheme;
+        this._property = this._getPropertyInstance();
+    }
+    getValue() {
+        return this._getProps().parameters.value.raw;
+    }
+    /**
+     * Returns an object so we can use both --- and null as valid null values.
+     */
+    getFormattedValue() {
+        const formattedValue = this._getProps().parameters.value.formatted ?? null;
+        //action columns should always return empty string;
+        if (this.getColumn().type === 'action') {
+            return {
+                value: null,
+                placeholder: null
+            };
+        }
+        else if (this.getColumn().grouping?.isGrouped) {
+            //if the column is grouped, we should aways have --- as placeholder
+            return {
+                value: formattedValue,
+                placeholder: formattedValue ?? '---'
+            };
+        }
+        else if (this.getColumn().aggregation?.aggregationFunction) {
+            return {
+                value: formattedValue,
+                placeholder: formattedValue
+            };
+        }
+        else {
+            return {
+                value: formattedValue,
+                placeholder: formattedValue ?? '---'
+            };
+        }
+    }
+    isTotalRow() {
+        return this.getRecord().getDataProvider().getSummarizationType() === 'aggregation';
+    }
+    getFileAttachmentIcon() {
+        return this._getPropertyInstance().getFileAttachmentIcon();
+    }
+    getImageThumbnailUrl() {
+        return this._getPropertyInstance().getImageThumbnailUrl();
+    }
+    getPrefixIconProps() {
+        return this._tickMemoizer.getOnce('getPrefixIconProps', () => this._getIconProps('PrefixIcon'));
+    }
+    shouldUsePortalDownload() {
+        return this._property.shouldUsePortalDownload();
+    }
+    getSuffixIconProps() {
+        return this._tickMemoizer.getOnce('getSuffixIconProps', () => this._getIconProps('SuffixIcon'));
+    }
+    getColumn() {
+        return this._getProps().parameters.Column.raw;
+    }
+    getRecord() {
+        return this._getProps().parameters.Record.raw;
+    }
+    getDataset() {
+        return this._getProps().parameters.Dataset.raw;
+    }
+    getValueAttributes() {
+        return this._getProps().parameters.value.attributes ?? {};
+    }
+    getLinkProps() {
+        const formattedValue = this.getFormattedValue().value;
+        switch (true) {
+            case formattedValue == null:
+            //navigation enabled by default
+            case this._getProps().parameters.EnableNavigation?.raw === false && !this.isFile(): {
+                return null;
+            }
+            default: {
+                return this._property.getLinkProps();
+            }
+        }
+    }
+    async downloadPortalFile() {
+        return this._property.downloadPortalFile();
+    }
+    getColorfulOptionSet() {
+        switch (true) {
+            case this.getFormattedValue().value == null:
+            case this._getProps().parameters.EnableOptionSetColors?.raw !== true:
+            case this._getProps().parameters.AggregationFunction?.raw != null: {
+                return null;
+            }
+            default: {
+                return this._property.getColorfulOptionSet();
+            }
+        }
+    }
+    getFormattedAggregatedValue() {
+        const aggregatedFormattedValue = this._getProps().parameters.AggregatedValue?.formatted ?? null;
+        if (!aggregatedFormattedValue) {
+            return null;
+        }
+        if (this.getColumn().grouping?.isGrouped) {
+            return `(${aggregatedFormattedValue})`;
+        }
+        return aggregatedFormattedValue;
+    }
+    getAggregationLabel() {
+        const aggregationFunction = this._getProps().parameters.AggregationFunction?.raw;
+        switch (aggregationFunction) {
+            case 'avg': {
+                return this._labels.avg();
+            }
+            case 'max': {
+                return this._labels.max();
+            }
+            case 'min': {
+                return this._labels.min();
+            }
+            case 'sum': {
+                return this._labels.sum();
+            }
+            case 'count': {
+                return this._labels.count();
+            }
+            case 'countcolumn': {
+                return this._labels.countcolumn();
+            }
+        }
+    }
+    getContext() {
+        return this._getProps().context;
+    }
+    getControlTheme() {
+        return this._getControlTheme();
+    }
+    getColumnAlignment() {
+        return this._getProps().parameters.ColumnAlignment.raw;
+    }
+    isMultiline() {
+        if (this.isTotalRow()) {
+            return false;
+        }
+        if (this.getRecord().getSummarizationType() === 'grouping' && !this.getValue()) {
+            return false;
+        }
+        return this._property.isMultiline();
+    }
+    isAutoHeightEnabled() {
+        if (this.isTotalRow()) {
+            return false;
+        }
+        return !!this.getColumn().autoHeight;
+    }
+    isFile() {
+        if (!this.getFormattedValue().value) {
+            return false;
+        }
+        else {
+            return this._property.isFile();
+        }
+    }
+    _getPropertyInstance() {
+        const dataType = this._getProps().parameters.value.type;
+        const PropertyClass = propertyMap.get(dataType) ?? Property;
+        return new PropertyClass(this);
+    }
+    _getIconProps(propName) {
+        const rawJson = this._getProps().parameters[propName]?.raw;
+        if (!rawJson) {
+            return undefined;
+        }
+        return JSON.parse(rawJson);
+    }
+}
+
+export { GridCellRendererModel };
+//# sourceMappingURL=GridCellRendererModel.js.map

package/dist/components/GridCellRenderer/GridCellRendererModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridCellRendererModel.js","sources":["../../../src/components/GridCellRenderer/GridCellRendererModel.ts"],"sourcesContent":["import { DataType } from \"@talxis/client-libraries\";\nimport { Property } from \"./properties/Property\";\nimport { Email } from \"./properties/Email\";\nimport { Phone } from \"./properties/Phone\";\nimport { IGridCellRenderer } from \"./interfaces\";\nimport { ITranslation } from \"../../hooks\";\nimport { gridGroupCellRendererTranslations } from \"./translations\";\nimport { Url } from \"./properties/Url\";\nimport { Lookup } from './properties/Lookup';\nimport { IIconProps, ITheme } from \"@fluentui/react\";\nimport { MultilineText } from \"./properties/MultilineText\";\nimport { OptionSet } from \"./properties/OptionSet\";\nimport { MultiSelectOptionSet } from \"./properties/MultiSelectOptionSet\";\nimport { TwoOptions } from \"./properties/TwoOptions\";\nimport { File } from \"./properties/File\";\nimport { Image } from \"./properties/Image\";\nimport { TickMemoizer } from '@talxis/client-libraries/dist/helpers/cache/TickMemoizer'\n\ntype Labels = Required<ITranslation<typeof gridGroupCellRendererTranslations>>;\n\ninterface IDeps {\n    getProps: () => IGridCellRenderer;\n    getControlTheme: () => ITheme;\n    labels: Labels;\n}\n\nconst propertyMap: Map<DataType, typeof Property> = new Map([\n    ['SingleLine.Email', Email],\n    ['SingleLine.Phone', Phone],\n    ['SingleLine.URL', Url],\n    ['Lookup.Customer', Lookup],\n    ['Lookup.Owner', Lookup],\n    ['Lookup.Simple', Lookup],\n    ['Lookup.Regarding', Lookup],\n    ['OptionSet', OptionSet],\n    ['MultiSelectPicklist', MultiSelectOptionSet],\n    ['TwoOptions', TwoOptions],\n    ['SingleLine.TextArea', MultilineText],\n    ['Multiple', MultilineText],\n    ['File', File],\n    ['Image', Image]\n]);\n\ntype MemoizedFunction = 'getSuffixIconProps' | 'getPrefixIconProps';\n\nexport class GridCellRendererModel {\n    private _getProps: () => IGridCellRenderer;\n    private _getControlTheme: () => ITheme;\n    private _property: Property;\n    private _labels: Labels;\n    private _tickMemoizer: TickMemoizer<MemoizedFunction> = new TickMemoizer();\n\n    constructor(deps: IDeps) {\n        this._getProps = deps.getProps;\n        this._labels = deps.labels;\n        this._getControlTheme = deps.getControlTheme;\n        this._property = this._getPropertyInstance();\n    }\n\n    public getValue() {\n        return this._getProps().parameters.value.raw;\n    }\n    /**\n     * Returns an object so we can use both --- and null as valid null values.\n     */\n    public getFormattedValue(): { value: string | null, placeholder: string | null } {\n        const formattedValue = this._getProps().parameters.value.formatted ?? null;\n        //action columns should always return empty string;\n        if (this.getColumn().type === 'action') {\n            return {\n                value: null,\n                placeholder: null\n            }\n        }\n        else if(this.getColumn().grouping?.isGrouped) {\n            //if the column is grouped, we should aways have --- as placeholder\n            return {\n                value: formattedValue,\n                placeholder: formattedValue ?? '---'\n            }\n        }\n        else if(this.getColumn().aggregation?.aggregationFunction) {\n            return {\n                value: formattedValue,\n                placeholder: formattedValue\n            }\n        }\n        else {\n            return {\n                value: formattedValue,\n                placeholder: formattedValue ?? '---'\n            }\n        }\n    }\n    public isTotalRow() {\n        return this.getRecord().getDataProvider().getSummarizationType() === 'aggregation';\n    }\n\n    public getFileAttachmentIcon() {\n        return this._getPropertyInstance().getFileAttachmentIcon();\n    }\n\n    public getImageThumbnailUrl() {\n        return this._getPropertyInstance().getImageThumbnailUrl();\n    }\n\n    public getPrefixIconProps(): IIconProps | undefined {\n        return this._tickMemoizer.getOnce('getPrefixIconProps', () => this._getIconProps('PrefixIcon'))\n    }\n\n    public shouldUsePortalDownload(): boolean {\n        return this._property.shouldUsePortalDownload();\n    }\n\n    public getSuffixIconProps(): IIconProps | undefined {\n        return this._tickMemoizer.getOnce('getSuffixIconProps', () => this._getIconProps('SuffixIcon'))\n    }\n\n    public getColumn() {\n        return this._getProps().parameters.Column.raw;\n    }\n\n    public getRecord() {\n        return this._getProps().parameters.Record.raw;\n    }\n\n    public getDataset() {\n        return this._getProps().parameters.Dataset.raw;\n    }\n\n    public getValueAttributes() {\n        return this._getProps().parameters.value.attributes ?? {};\n    }\n\n    public getLinkProps() {\n        const formattedValue = this.getFormattedValue().value;\n        switch (true) {\n            case formattedValue == null: \n            //navigation enabled by default\n            case this._getProps().parameters.EnableNavigation?.raw === false && !this.isFile(): {\n                return null;\n            }\n            default: {\n                return this._property.getLinkProps();\n            }\n        }\n    }\n\n    public async downloadPortalFile() {\n        return this._property.downloadPortalFile();\n    }\n\n    public getColorfulOptionSet() {\n        switch (true) {\n            case this.getFormattedValue().value == null:\n            case this._getProps().parameters.EnableOptionSetColors?.raw !== true:\n            case this._getProps().parameters.AggregationFunction?.raw != null: {\n                return null;\n            }\n            default: {\n                return this._property.getColorfulOptionSet();\n            }\n        }\n    }\n\n    public getFormattedAggregatedValue(): string | null {\n        const aggregatedFormattedValue = this._getProps().parameters.AggregatedValue?.formatted ?? null;\n        if (!aggregatedFormattedValue) {\n            return null;\n        }\n        if(this.getColumn().grouping?.isGrouped) {\n            return `(${aggregatedFormattedValue})`;\n        }\n        return aggregatedFormattedValue;\n    }\n\n    public getAggregationLabel() {\n        const aggregationFunction = this._getProps().parameters.AggregationFunction?.raw\n        switch (aggregationFunction) {\n            case 'avg': {\n                return this._labels.avg();\n            }\n            case 'max': {\n                return this._labels.max();\n            }\n            case 'min': {\n                return this._labels.min();\n            }\n            case 'sum': {\n                return this._labels.sum();\n            }\n            case 'count': {\n                return this._labels.count()\n            }\n            case 'countcolumn': {\n                return this._labels.countcolumn()\n            }\n        }\n    }\n\n    public getContext() {\n        return this._getProps().context;\n    }\n\n    public getControlTheme() {\n        return this._getControlTheme();\n    }\n\n    public getColumnAlignment() {\n        return this._getProps().parameters.ColumnAlignment.raw;\n    }\n\n    public isMultiline() {\n        if (this.isTotalRow()) {\n            return false;\n        }\n        if(this.getRecord().getSummarizationType() === 'grouping' && !this.getValue()) {\n            return false;\n        }\n        return this._property.isMultiline();\n    }\n\n    public isAutoHeightEnabled() {\n        if(this.isTotalRow()) {\n            return false;\n        }\n        return !!this.getColumn().autoHeight;\n    }\n\n    public isFile() {\n        if (!this.getFormattedValue().value) {\n            return false;\n        }\n        else {\n            return this._property.isFile();\n        }\n    }\n\n    private _getPropertyInstance(): Property {\n        const dataType = this._getProps().parameters.value.type as DataType;\n        const PropertyClass = propertyMap.get(dataType) ?? Property;\n        return new PropertyClass(this);\n    }\n\n    private _getIconProps(propName: 'PrefixIcon' | 'SuffixIcon'): IIconProps | undefined {\n        const rawJson = this._getProps().parameters[propName]?.raw;\n        if (!rawJson) {\n            return undefined;\n        }\n        return JSON.parse(rawJson);\n    }\n\n}"],"names":[],"mappings":"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"}

package/dist/components/GridCellRenderer/ValueRenderer/ColorfulOptionSetValueRenderer/ColorfulOptionSetValueRenderer.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/// <reference types="@types/powerapps-component-framework" />
+import { IColorfulOptionSetValueRendererProps as IColorfulOptionSetValueRendererPropsBase } from "../../interfaces";
+interface IColorfulOptionSetValueRendererProps {
+    optionSet: ComponentFramework.PropertyHelper.OptionMetadata[];
+    onRenderColorfulOptionSet: (props: IColorfulOptionSetValueRendererPropsBase, defaultRender: (props: IColorfulOptionSetValueRendererPropsBase) => React.ReactElement) => React.ReactElement;
+}
+export declare const ColorfulOptionSetValueRenderer: (props: IColorfulOptionSetValueRendererProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/components/GridCellRenderer/ValueRenderer/ColorfulOptionSetValueRenderer/ColorfulOptionSetValueRenderer.js

@@ -0,0 +1,53 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { getColorfulOptionSetValuesRendererStyles, getColorfulOptionValueRendererStyles } from './styles.js';
+import { useTheme, merge, ThemeProvider, Text } from '@fluentui/react';
+import { Theming, useThemeGenerator } from '@talxis/react-components';
+import { useModel } from '../../useModel.js';
+
+const ColorfulOptionSetValueRenderer = (props) => {
+    const { onRenderColorfulOptionSet, optionSet } = props;
+    const model = useModel();
+    const styles = useMemo(() => getColorfulOptionSetValuesRendererStyles(model.getColumnAlignment()), [model.getColumnAlignment()]);
+    return onRenderColorfulOptionSet({
+        container: {
+            className: styles.colorfulOptionSetValueRendererRoot
+        },
+        onRenderOption: (props, defaultRender) => defaultRender(props)
+    }, (props) => {
+        return jsx("div", { ...props.container, children: optionSet.map(option => {
+                return jsx(ColorOptionValueRenderer, { option: option, onRenderOption: props.onRenderOption }, option.Value);
+            }) });
+    });
+};
+const ColorOptionValueRenderer = (props) => {
+    const { option, onRenderOption } = props;
+    const model = useModel();
+    const theme = useTheme();
+    const backgroundColor = option.Color ?? theme.palette.neutralLight;
+    const textColor = Theming.GetTextColorForBackground(backgroundColor);
+    const styles = useMemo(() => getColorfulOptionValueRendererStyles(), []);
+    const optionTheme = useThemeGenerator(textColor, backgroundColor, textColor, merge({}, {
+        fonts: {
+            medium: {
+                fontWeight: 600
+            }
+        }
+    }, model.getContext().fluentDesignLanguage?.v8FluentOverrides));
+    return onRenderOption({
+        container: {
+            theme: optionTheme,
+            className: styles.colorfulOptionValueRendererRoot
+        },
+        onRenderText: (props, defaultRender) => defaultRender(props)
+    }, (props) => {
+        return jsx(ThemeProvider, { ...props.container, children: props.onRenderText({
+                children: option.Label,
+            }, (props) => {
+                return jsx(Text, { ...props });
+            }) });
+    });
+};
+
+export { ColorfulOptionSetValueRenderer };
+//# sourceMappingURL=ColorfulOptionSetValueRenderer.js.map

package/dist/components/GridCellRenderer/ValueRenderer/ColorfulOptionSetValueRenderer/ColorfulOptionSetValueRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorfulOptionSetValueRenderer.js","sources":["../../../../../src/components/GridCellRenderer/ValueRenderer/ColorfulOptionSetValueRenderer/ColorfulOptionSetValueRenderer.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { IColorfulOptionSetValueRendererProps as IColorfulOptionSetValueRendererPropsBase, IColorfulOptionValueRendererProps as IColorfulOptionValueRendererPropsBase } from \"../../interfaces\"\nimport { getColorfulOptionSetValuesRendererStyles, getColorfulOptionValueRendererStyles } from \"./styles\";\nimport { PartialTheme, Text, ThemeProvider, useTheme, merge } from \"@fluentui/react\";\nimport { Theming, useThemeGenerator } from \"@talxis/react-components\";\nimport { useModel } from \"../../useModel\";\n\ninterface IColorfulOptionSetValueRendererProps {\n    optionSet: ComponentFramework.PropertyHelper.OptionMetadata[];\n    onRenderColorfulOptionSet: (props: IColorfulOptionSetValueRendererPropsBase, defaultRender: (props: IColorfulOptionSetValueRendererPropsBase) => React.ReactElement) => React.ReactElement;\n}\n\ninterface IColorfulOptionValueRendererProps {\n    option: ComponentFramework.PropertyHelper.OptionMetadata;\n    onRenderOption: (props: IColorfulOptionValueRendererPropsBase, defaultRender: (props: IColorfulOptionValueRendererPropsBase) => React.ReactElement) => React.ReactElement;\n}\n\nexport const ColorfulOptionSetValueRenderer = (props: IColorfulOptionSetValueRendererProps) => {\n    const { onRenderColorfulOptionSet, optionSet } = props;\n    const model = useModel();\n    const styles = useMemo(() => getColorfulOptionSetValuesRendererStyles(model.getColumnAlignment()), [model.getColumnAlignment()]);\n\n    return onRenderColorfulOptionSet({\n        container: {\n            className: styles.colorfulOptionSetValueRendererRoot\n        },\n        onRenderOption: (props, defaultRender) => defaultRender(props)\n    }, (props) => {\n        return <div {...props.container}>\n            {optionSet.map(option => {\n                return <ColorOptionValueRenderer\n                    key={option.Value}\n                    option={option}\n                    onRenderOption={props.onRenderOption} />\n            })}\n        </div>\n    })\n}\n\nconst ColorOptionValueRenderer = (props: IColorfulOptionValueRendererProps) => {\n    const { option, onRenderOption } = props;\n    const model = useModel();\n    const theme = useTheme();\n    const backgroundColor = option.Color ?? theme.palette.neutralLight;\n    const textColor = Theming.GetTextColorForBackground(backgroundColor);\n    const styles = useMemo(() => getColorfulOptionValueRendererStyles(), []);\n    const optionTheme = useThemeGenerator(textColor, backgroundColor, textColor, merge({}, {\n        fonts: {\n            medium: {\n                fontWeight: 600\n            }\n        }\n    } as PartialTheme, model.getContext().fluentDesignLanguage?.v8FluentOverrides as PartialTheme));\n\n    return onRenderOption({\n        container: {\n            theme: optionTheme,\n            className: styles.colorfulOptionValueRendererRoot\n        },\n        onRenderText: (props, defaultRender) => defaultRender(props)\n    }, (props) => {\n        return <ThemeProvider {...props.container}>\n            {props.onRenderText({\n                children: option.Label,\n            }, (props) => {\n                return <Text {...props} />\n            })}\n        </ThemeProvider>\n    })\n}"],"names":["_jsx"],"mappings":";;;;;;;AAiBa,MAAA,8BAA8B,GAAG,CAAC,KAA2C,KAAI;AAC1F,IAAA,MAAM,EAAE,yBAAyB,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;AACvD,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,wCAAwC,CAAC,KAAK,CAAC,kBAAkB,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC;AAEjI,IAAA,OAAO,yBAAyB,CAAC;AAC7B,QAAA,SAAS,EAAE;YACP,SAAS,EAAE,MAAM,CAAC,kCAAkC;AACvD,SAAA;QACD,cAAc,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;KACjE,EAAE,CAAC,KAAK,KAAI;QACT,OAAOA,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,CAAC,SAAS,EAAA,QAAA,EAC1B,SAAS,CAAC,GAAG,CAAC,MAAM,IAAG;AACpB,gBAAA,OAAOA,IAAC,wBAAwB,EAAA,EAE5B,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,KAAK,CAAC,cAAc,EAAA,EAF/B,MAAM,CAAC,KAAK,CAEuB,CAAA;aAC/C,CAAC,GACA,CAAA;AACV,KAAC,CAAC,CAAA;AACN,EAAC;AAED,MAAM,wBAAwB,GAAG,CAAC,KAAwC,KAAI;AAC1E,IAAA,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;AACzC,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;IACnE,MAAM,SAAS,GAAG,OAAO,CAAC,yBAAyB,CAAC,eAAe,CAAC,CAAC;AACrE,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,oCAAoC,EAAE,EAAE,EAAE,CAAC,CAAC;AACzE,IAAA,MAAM,WAAW,GAAG,iBAAiB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE;AACnF,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE;AACJ,gBAAA,UAAU,EAAE,GAAG;AAClB,aAAA;AACJ,SAAA;KACY,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,oBAAoB,EAAE,iBAAiC,CAAC,CAAC,CAAC;AAEhG,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,SAAS,EAAE;AACP,YAAA,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE,MAAM,CAAC,+BAA+B;AACpD,SAAA;QACD,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;KAC/D,EAAE,CAAC,KAAK,KAAI;QACT,OAAOA,GAAA,CAAC,aAAa,EAAA,EAAA,GAAK,KAAK,CAAC,SAAS,EACpC,QAAA,EAAA,KAAK,CAAC,YAAY,CAAC;gBAChB,QAAQ,EAAE,MAAM,CAAC,KAAK;aACzB,EAAE,CAAC,KAAK,KAAI;AACT,gBAAA,OAAOA,GAAC,CAAA,IAAI,EAAK,EAAA,GAAA,KAAK,GAAI,CAAA;aAC7B,CAAC,GACU,CAAA;AACpB,KAAC,CAAC,CAAA;AACN,CAAC;;;;"}

package/dist/components/GridCellRenderer/ValueRenderer/ColorfulOptionSetValueRenderer/styles.d.ts

@@ -0,0 +1,20 @@
+import { IColumn } from "@talxis/client-libraries";
+export declare const getColorfulOptionSetValuesRendererStyles: (columnAlignment: IColumn['alignment']) => import("@fluentui/react").IProcessedStyleSet<{
+    colorfulOptionSetValueRendererRoot: {
+        display: string;
+        gap: number;
+        width: string;
+        justifyContent: string | undefined;
+    };
+}>;
+export declare const getColorfulOptionValueRendererStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    colorfulOptionValueRendererRoot: {
+        borderRadius: number;
+        paddingLeft: number;
+        paddingRight: number;
+        overflow: string;
+        textOverflow: string;
+        flexGrow: number;
+        maxWidth: string;
+    };
+}>;

package/dist/components/GridCellRenderer/ValueRenderer/ColorfulOptionSetValueRenderer/styles.js

@@ -0,0 +1,29 @@
+import { mergeStyleSets } from '@fluentui/react';
+import { getJustifyContent } from '../../styles.js';
+
+const getColorfulOptionSetValuesRendererStyles = (columnAlignment) => {
+    return mergeStyleSets({
+        colorfulOptionSetValueRendererRoot: {
+            display: 'flex',
+            gap: 5,
+            width: '100%',
+            justifyContent: getJustifyContent(columnAlignment)
+        }
+    });
+};
+const getColorfulOptionValueRendererStyles = () => {
+    return mergeStyleSets({
+        colorfulOptionValueRendererRoot: {
+            borderRadius: 5,
+            paddingLeft: 4,
+            paddingRight: 4,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            flexGrow: 1,
+            maxWidth: 'fit-content'
+        }
+    });
+};
+
+export { getColorfulOptionSetValuesRendererStyles, getColorfulOptionValueRendererStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/GridCellRenderer/ValueRenderer/ColorfulOptionSetValueRenderer/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/GridCellRenderer/ValueRenderer/ColorfulOptionSetValueRenderer/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\nimport { getJustifyContent } from \"../../styles\"\nimport { IColumn } from \"@talxis/client-libraries\"\n\nexport const getColorfulOptionSetValuesRendererStyles = (columnAlignment: IColumn['alignment']) => {\n    return mergeStyleSets({\n        colorfulOptionSetValueRendererRoot: {\n            display: 'flex',\n            gap: 5,\n            width: '100%',\n            justifyContent: getJustifyContent(columnAlignment)\n        }\n    })\n}\n\nexport const getColorfulOptionValueRendererStyles = () => {\n    return mergeStyleSets({\n        colorfulOptionValueRendererRoot: {\n            borderRadius: 5,\n            paddingLeft: 4,\n            paddingRight: 4,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            flexGrow: 1,\n            maxWidth: 'fit-content'\n        }\n    })\n}"],"names":[],"mappings":";;;AAIa,MAAA,wCAAwC,GAAG,CAAC,eAAqC,KAAI;AAC9F,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,kCAAkC,EAAE;AAChC,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,cAAc,EAAE,iBAAiB,CAAC,eAAe,CAAC;AACrD,SAAA;AACJ,KAAA,CAAC,CAAA;AACN,EAAC;AAEM,MAAM,oCAAoC,GAAG,MAAK;AACrD,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,+BAA+B,EAAE;AAC7B,YAAA,YAAY,EAAE,CAAC;AACf,YAAA,WAAW,EAAE,CAAC;AACd,YAAA,YAAY,EAAE,CAAC;AACf,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AACxB,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,QAAQ,EAAE,aAAa;AAC1B,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/GridCellRenderer/ValueRenderer/FileRenderer/FileRenderer.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { IFileRendererProps as IFileRendererPropsBase } from "../../interfaces";
+interface IFileRendererProps {
+    onRenderFile: (props: IFileRendererPropsBase, defaultRender: (props: IFileRendererPropsBase) => React.ReactElement) => React.ReactElement;
+}
+export declare const FileRenderer: (props: IFileRendererProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

package/dist/components/GridCellRenderer/ValueRenderer/FileRenderer/FileRenderer.js

@@ -0,0 +1,76 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useMemo } from 'react';
+import { useModel } from '../../useModel.js';
+import { Link, SpinnerSize, Image, Icon } from '@fluentui/react';
+import { getFileRendererStyles } from './styles.js';
+import { Spinner } from '@talxis/react-components';
+
+const FileRenderer = (props) => {
+    const model = useModel();
+    const styles = useMemo(() => getFileRendererStyles(), []);
+    const [isFileDownloading, setIsFileDownloading] = React.useState(false);
+    const [thumbnailFailedToLoad, setThumbnailFailedToLoad] = React.useState(false);
+    const onLinkClick = async (e) => {
+        if (model.shouldUsePortalDownload()) {
+            e.preventDefault();
+            setIsFileDownloading(true);
+            await model.downloadPortalFile();
+            setIsFileDownloading(false);
+        }
+    };
+    const onRenderLoadingPrefix = (props) => {
+        const thumbnailUrl = model.getImageThumbnailUrl();
+        if (isFileDownloading) {
+            return props.onRenderLoading({
+                size: SpinnerSize.xSmall,
+                styles: {
+                    circle: styles.spinner
+                }
+            }, (props) => {
+                return jsx(Spinner, { ...props });
+            });
+        }
+        else if (thumbnailUrl && !thumbnailFailedToLoad) {
+            return props.onRenderImageThumbnail({
+                src: thumbnailUrl,
+                styles: {
+                    image: styles.thumbnail
+                },
+                onLoadingStateChange: (state) => {
+                    if (state == 2) {
+                        setThumbnailFailedToLoad(true);
+                    }
+                }
+            }, (props) => {
+                return jsx(Image, { ...props });
+            });
+        }
+        else {
+            return props.onRenderFileAttachmentIcon({
+                iconName: model.getFileAttachmentIcon()
+            }, (props) => {
+                return jsx(Icon, { ...props });
+            });
+        }
+    };
+    return props.onRenderFile({
+        container: {
+            className: styles.fileRendererRoot
+        },
+        onRenderFileAttachmentIcon: (props, defaultRender) => defaultRender(props),
+        onRenderImageThumbnail: (props, defaultRender) => defaultRender(props),
+        onRenderLoading: (props, defaultRender) => defaultRender(props),
+        onRenderLink: (props, defaultRender) => defaultRender(props)
+    }, (props) => {
+        return jsxs("div", { ...props.container, children: [onRenderLoadingPrefix(props), props.onRenderLink({
+                    ...model.getLinkProps(),
+                    className: styles.link,
+                    onClick: onLinkClick,
+                }, (props) => {
+                    return jsx(Link, { ...props });
+                })] });
+    });
+};
+
+export { FileRenderer };
+//# sourceMappingURL=FileRenderer.js.map

package/dist/components/GridCellRenderer/ValueRenderer/FileRenderer/FileRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileRenderer.js","sources":["../../../../../src/components/GridCellRenderer/ValueRenderer/FileRenderer/FileRenderer.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { useModel } from \"../../useModel\";\nimport { IFileRendererProps as IFileRendererPropsBase } from \"../../interfaces\";\nimport { Link, SpinnerSize, Image, Icon, ImageFit } from \"@fluentui/react\";\nimport { getFileRendererStyles } from \"./styles\";\nimport { Spinner } from \"@talxis/react-components\";\n\ninterface IFileRendererProps {\n    onRenderFile: (props: IFileRendererPropsBase, defaultRender: (props: IFileRendererPropsBase) => React.ReactElement) => React.ReactElement;\n}\n\nexport const FileRenderer = (props: IFileRendererProps) => {\n    const model = useModel();\n    const styles = useMemo(() => getFileRendererStyles(), [])\n    const [isFileDownloading, setIsFileDownloading] = React.useState(false);\n    const [thumbnailFailedToLoad, setThumbnailFailedToLoad] = React.useState(false);\n\n    const onLinkClick = async (e: React.MouseEvent<HTMLElement | HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => {\n        if (model.shouldUsePortalDownload()) {\n            e.preventDefault();\n            setIsFileDownloading(true);\n            await model.downloadPortalFile();\n            setIsFileDownloading(false);\n        }\n    }\n\n    const onRenderLoadingPrefix = (props: IFileRendererPropsBase) => {\n        const thumbnailUrl = model.getImageThumbnailUrl();\n        if (isFileDownloading) {\n            return props.onRenderLoading({\n                size: SpinnerSize.xSmall,\n                styles: {\n                    circle: styles.spinner\n                }\n            }, (props) => {\n                return <Spinner {...props} />\n            })\n        }\n        else if (thumbnailUrl && !thumbnailFailedToLoad) {\n            return props.onRenderImageThumbnail({\n                src: thumbnailUrl,\n                styles: {\n                    image: styles.thumbnail\n                },\n                onLoadingStateChange: (state) => {\n                    if(state == 2) {\n                        setThumbnailFailedToLoad(true);\n                    }\n                }\n            }, (props) => {\n                return <Image {...props} />\n            })\n        }\n        else {\n            return props.onRenderFileAttachmentIcon({\n                iconName: model.getFileAttachmentIcon()\n            }, (props) => {\n                return <Icon {...props} />\n            })\n        }\n    }\n\n    return props.onRenderFile({\n        container: {\n            className: styles.fileRendererRoot\n        },\n        onRenderFileAttachmentIcon: (props, defaultRender) => defaultRender(props),\n        onRenderImageThumbnail: (props, defaultRender) => defaultRender(props),\n        onRenderLoading: (props, defaultRender) => defaultRender(props),\n        onRenderLink: (props, defaultRender) => defaultRender(props)\n\n    }, (props) => {\n        return <div {...props.container}>\n            {onRenderLoadingPrefix(props)}\n            {props.onRenderLink({\n                ...model.getLinkProps(),\n                className: styles.link,\n                onClick: onLinkClick,\n            }, (props) => {\n                return <Link {...props} />\n            })}\n        </div>\n    })\n}"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/GridCellRenderer/ValueRenderer/FileRenderer/styles.d.ts

@@ -0,0 +1,18 @@
+export declare const getFileRendererStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    fileRendererRoot: {
+        display: string;
+        gap: number;
+        alignItems: string;
+    };
+    link: {
+        overflow: string;
+        textOverflow: string;
+    };
+    thumbnail: {
+        width: number;
+    };
+    spinner: {
+        width: number;
+        height: number;
+    };
+}>;

package/dist/components/GridCellRenderer/ValueRenderer/FileRenderer/styles.js

@@ -0,0 +1,25 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getFileRendererStyles = () => {
+    return mergeStyleSets({
+        fileRendererRoot: {
+            display: 'flex',
+            gap: 5,
+            alignItems: 'center'
+        },
+        link: {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        },
+        thumbnail: {
+            width: 32
+        },
+        spinner: {
+            width: 18,
+            height: 18
+        }
+    });
+};
+
+export { getFileRendererStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/GridCellRenderer/ValueRenderer/FileRenderer/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/GridCellRenderer/ValueRenderer/FileRenderer/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getFileRendererStyles = () => {\n    return mergeStyleSets({\n        fileRendererRoot: {\n            display: 'flex',\n            gap: 5,\n            alignItems: 'center'\n        },\n        link: {\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n        },\n        thumbnail: {\n            width: 32\n        },\n        spinner: {\n            width: 18,\n            height: 18\n        }\n    })\n}"],"names":[],"mappings":";;AAEO,MAAM,qBAAqB,GAAG,MAAK;AACtC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,gBAAgB,EAAE;AACd,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,UAAU,EAAE,QAAQ;AACvB,SAAA;AACD,QAAA,IAAI,EAAE;AACF,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AAC3B,SAAA;AACD,QAAA,SAAS,EAAE;AACP,YAAA,KAAK,EAAE,EAAE;AACZ,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,KAAK,EAAE,EAAE;AACT,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/GridCellRenderer/ValueRenderer/ValueRenderer.d.ts

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

package/dist/components/GridCellRenderer/ValueRenderer/ValueRenderer.js

@@ -0,0 +1,52 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Link, Text } from '@fluentui/react';
+import { getValueRendererStyles } from './styles.js';
+import { ColorfulOptionSetValueRenderer } from './ColorfulOptionSetValueRenderer/ColorfulOptionSetValueRenderer.js';
+import { useModel } from '../useModel.js';
+import { FileRenderer } from './FileRenderer/FileRenderer.js';
+import { getClassNames } from '@talxis/react-components';
+
+const ValueRenderer = (props) => {
+    const model = useModel();
+    const theme = model.getControlTheme();
+    const formattedValue = model.getFormattedValue();
+    const linkProps = model.getLinkProps();
+    const isFile = model.isFile();
+    const colorfulOptionSet = model.getColorfulOptionSet();
+    const styles = useMemo(() => getValueRendererStyles({
+        theme: theme,
+        isMultiline: model.isMultiline(),
+        makeBold: !!model.getAggregationLabel() || !!model.getFormattedAggregatedValue()
+    }), [theme,
+        model.isMultiline(),
+        model.getAggregationLabel(),
+        !!model.getAggregationLabel() || !!model.getFormattedAggregatedValue()
+    ]);
+    if (isFile) {
+        return jsx(FileRenderer, { onRenderFile: props.onRenderFile });
+    }
+    else if (linkProps) {
+        return props.onRenderLink({
+            ...linkProps,
+            className: styles.link,
+            as: 'a'
+        }, (props) => {
+            return jsx(Link, { ...props });
+        });
+    }
+    else if (colorfulOptionSet) {
+        return jsx(ColorfulOptionSetValueRenderer, { optionSet: colorfulOptionSet, onRenderColorfulOptionSet: props.onRenderColorfulOptionSet });
+    }
+    else {
+        return props.onRenderText({
+            className: getClassNames([styles.text, !formattedValue.value ? styles.placeholder : undefined]),
+            children: formattedValue.placeholder
+        }, (props) => {
+            return jsx(Text, { ...props, children: formattedValue.placeholder });
+        });
+    }
+};
+
+export { ValueRenderer };
+//# sourceMappingURL=ValueRenderer.js.map

package/dist/components/GridCellRenderer/ValueRenderer/ValueRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueRenderer.js","sources":["../../../../src/components/GridCellRenderer/ValueRenderer/ValueRenderer.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { IValueRendererProps } from \"../interfaces\";\nimport { Link, Text } from '@fluentui/react';\nimport { getValueRendererStyles } from \"./styles\";\nimport { ColorfulOptionSetValueRenderer } from \"./ColorfulOptionSetValueRenderer/ColorfulOptionSetValueRenderer\";\nimport { useModel } from \"../useModel\";\nimport { FileRenderer } from \"./FileRenderer/FileRenderer\";\nimport { getClassNames } from \"@talxis/react-components\";\n\nexport const ValueRenderer = (props: IValueRendererProps) => {\n    const model = useModel();\n    const theme = model.getControlTheme();\n    const formattedValue = model.getFormattedValue();\n    const linkProps = model.getLinkProps();\n    const isFile = model.isFile();\n    const colorfulOptionSet = model.getColorfulOptionSet();\n    const styles = useMemo(() => getValueRendererStyles({\n        theme: theme,\n        isMultiline: model.isMultiline(),\n        makeBold: !!model.getAggregationLabel() || !!model.getFormattedAggregatedValue()\n    }), [theme,\n        model.isMultiline(),\n        model.getAggregationLabel(),\n        !!model.getAggregationLabel() || !!model.getFormattedAggregatedValue()\n    ]);\n\n    if (isFile) {\n        return <FileRenderer onRenderFile={props.onRenderFile} />\n    }\n\n    else if (linkProps) {\n        return props.onRenderLink({\n            ...linkProps,\n            className: styles.link,\n            as: 'a'\n        }, (props) => {\n            return <Link {...props} />\n        })\n    }\n\n    else if (colorfulOptionSet) {\n        return <ColorfulOptionSetValueRenderer\n            optionSet={colorfulOptionSet}\n            onRenderColorfulOptionSet={props.onRenderColorfulOptionSet}\n        />\n    }\n    else {\n        return props.onRenderText({\n            className: getClassNames([styles.text, !formattedValue.value ? styles.placeholder : undefined]),\n            children: formattedValue.placeholder\n        }, (props) => {\n            return <Text {...props}>{formattedValue.placeholder}</Text>;\n        })\n    }\n}"],"names":["_jsx"],"mappings":";;;;;;;;;AASa,MAAA,aAAa,GAAG,CAAC,KAA0B,KAAI;AACxD,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,MAAM,KAAK,GAAG,KAAK,CAAC,eAAe,EAAE,CAAC;AACtC,IAAA,MAAM,cAAc,GAAG,KAAK,CAAC,iBAAiB,EAAE,CAAC;AACjD,IAAA,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;AACvC,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;AAC9B,IAAA,MAAM,iBAAiB,GAAG,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACvD,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,sBAAsB,CAAC;AAChD,QAAA,KAAK,EAAE,KAAK;AACZ,QAAA,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE;AAChC,QAAA,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC,KAAK,CAAC,2BAA2B,EAAE;KACnF,CAAC,EAAE,CAAC,KAAK;QACN,KAAK,CAAC,WAAW,EAAE;QACnB,KAAK,CAAC,mBAAmB,EAAE;QAC3B,CAAC,CAAC,KAAK,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC,KAAK,CAAC,2BAA2B,EAAE;AACzE,KAAA,CAAC,CAAC;AAEH,IAAA,IAAI,MAAM,EAAE;QACR,OAAOA,GAAA,CAAC,YAAY,EAAC,EAAA,YAAY,EAAE,KAAK,CAAC,YAAY,EAAA,CAAI,CAAA;AAC5D,KAAA;AAEI,SAAA,IAAI,SAAS,EAAE;QAChB,OAAO,KAAK,CAAC,YAAY,CAAC;AACtB,YAAA,GAAG,SAAS;YACZ,SAAS,EAAE,MAAM,CAAC,IAAI;AACtB,YAAA,EAAE,EAAE,GAAG;SACV,EAAE,CAAC,KAAK,KAAI;AACT,YAAA,OAAOA,GAAC,CAAA,IAAI,EAAK,EAAA,GAAA,KAAK,GAAI,CAAA;AAC9B,SAAC,CAAC,CAAA;AACL,KAAA;AAEI,SAAA,IAAI,iBAAiB,EAAE;AACxB,QAAA,OAAOA,GAAC,CAAA,8BAA8B,EAClC,EAAA,SAAS,EAAE,iBAAiB,EAC5B,yBAAyB,EAAE,KAAK,CAAC,yBAAyB,GAC5D,CAAA;AACL,KAAA;AACI,SAAA;QACD,OAAO,KAAK,CAAC,YAAY,CAAC;YACtB,SAAS,EAAE,aAAa,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,cAAc,CAAC,KAAK,GAAG,MAAM,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;YAC/F,QAAQ,EAAE,cAAc,CAAC,WAAW;SACvC,EAAE,CAAC,KAAK,KAAI;YACT,OAAOA,GAAA,CAAC,IAAI,EAAK,EAAA,GAAA,KAAK,YAAG,cAAc,CAAC,WAAW,EAAA,CAAQ,CAAC;AAChE,SAAC,CAAC,CAAA;AACL,KAAA;AACL;;;;"}