@singularsystems/neo-react 0.10.49 → 0.10.50

package/dist/Modules/NeoReactModule.js

@@ -11,6 +11,7 @@ import { RoutingState } from '../Routing/RoutingState';
 import { ContextMenuState } from '../ReactComponents/ContextMenu/ContextMenuState';
 import { DisposeHelper } from '../Services/DisposeHelper';
 import Decimal from 'decimal.js-light';
+import { IconFactory } from '../ReactComponents/Icons/IconFactory';
 var neoReactModule = new AppServices.Module("neo-react", function (container) {
     container.bind(AppServices.NeoTypes.Core.AutoRunnerFactory).to(AutoRunnerFactory).inSingletonScope();
     container.bind(AppServices.NeoTypes.Core.ModelCreator).to(ReactModelCreator).inTransientScope();
@@ -18,6 +19,7 @@ var neoReactModule = new AppServices.Module("neo-react", function (container) {
     container.bind(AppServices.NeoTypes.UI.ErrorHandler).to(ErrorHandler).inSingletonScope();
     container.bind(AppServices.NeoTypes.UI.GlobalContextMenuState).toConstantValue(new ContextMenuState());
     container.bind(AppServices.NeoTypes.Routing.PageLeaveHandler).to(PageLeaveHandler).inSingletonScope();
+    container.bind(NeoReactTypes.Components.IconFactory).to(IconFactory).inSingletonScope();
     container.bind(NeoReactTypes.Routing.GlobalRoutingState).to(RoutingState).inSingletonScope();
     container.bind(NeoReactTypes.Routing.NavigationHelper).to(NavigationHelper).inSingletonScope();
     container.bind(NeoReactTypes.Services.DisposeHelper).to(DisposeHelper).inTransientScope();

package/dist/Modules/Types.d.ts

@@ -8,6 +8,7 @@ import { AxiosStatic } from 'axios';
 import Decimal from 'decimal.js-light';
 import Select from 'react-select';
 import { IDisposeHelper } from '../Services/IDisposeHelper';
+import { IIconFactory } from '../ReactComponents/Icons/IIconFactory';
 declare const NeoReactTypes: {
     Components: {
         Slider: AppServices.ServiceIdentifier<typeof Slider>;
@@ -15,6 +16,7 @@ declare const NeoReactTypes: {
         SketchPicker: AppServices.ServiceIdentifier<typeof SketchPicker>;
         ReactSelect: AppServices.ServiceIdentifier<typeof Select>;
         AsyncSelect: AppServices.ServiceIdentifier<typeof AsyncSelect>;
+        IconFactory: AppServices.ServiceIdentifier<IIconFactory>;
     };
     Routing: {
         NavigationHelper: AppServices.ServiceIdentifier<INavigationHelper>;

package/dist/Modules/Types.js

@@ -6,6 +6,7 @@ var NeoReactTypes = __assign(__assign({}, AppServices.NeoTypes), { Components: {
         SketchPicker: new AppServices.ServiceIdentifier("NeoReact.SketchPicker"),
         ReactSelect: new AppServices.ServiceIdentifier("NeoReact.ReactSelect"),
         AsyncSelect: new AppServices.ServiceIdentifier("NeoReact.AsyncSelect"),
+        IconFactory: new AppServices.ServiceIdentifier("NeoReact.IconFactory")
     }, Routing: __assign(__assign({}, AppServices.NeoTypes.Routing), { NavigationHelper: AppServices.NeoTypes.Routing.NavigationHelper.asType(), GlobalRoutingState: new AppServices.ServiceIdentifier("NeoReact.GlobalRoutingState") }), Services: {
         DisposeHelper: new AppServices.ServiceIdentifier("NeoReact.DisposeHelper")
     } });

package/dist/ReactComponents/Button.d.ts

@@ -11,6 +11,7 @@ export default class Button extends ComponentBase<IButtonProps, IButtonState> {
     };
     btnGroupDom: React.RefObject<HTMLDivElement>;
     menuDom: React.RefObject<HTMLDivElement>;
+    private iconFactory;
     private windowClickHandler;
     constructor(props: IButtonProps);
     private showMenu;

package/dist/ReactComponents/Button.js

@@ -1,9 +1,10 @@
 import { __decorate, __extends, __metadata, __rest, __spreadArrays } from "tslib";
 import * as React from 'react';
 import ComponentBase from './ComponentBase';
-import { Components, Utils } from '@singularsystems/neo-core';
+import { Components, Misc, Utils } from '@singularsystems/neo-core';
 import Tooltip from './Tooltip';
 import { observer } from 'mobx-react';
+import { NeoReactTypes } from '../Modules/Types';
 var Button = /** @class */ (function (_super) {
     __extends(Button, _super);
     function Button(props) {
@@ -11,6 +12,7 @@ var Button = /** @class */ (function (_super) {
         _this.state = { isExpanded: false };
         _this.btnGroupDom = React.createRef();
         _this.menuDom = React.createRef();
+        _this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
         _this.windowClickHandler = _this.windowClicked.bind(_this);
         _this.showMenu = _this.showMenu.bind(_this);
         return _this;
@@ -60,8 +62,14 @@ var Button = /** @class */ (function (_super) {
             buttonClasses += " dropdown-toggle";
             native.onClick = this.showMenu;
         }
+        var iconStyle = {};
+        if (isBusy !== undefined || task !== undefined) {
+            iconStyle = { fixedWidth: true };
+        }
         if (isBusy || ((_a = task) === null || _a === void 0 ? void 0 : _a.isBusy)) {
-            icon = "fa-circle-notch fa-spin";
+            iconStyle.fixedWidth = true;
+            iconStyle.spin = true;
+            icon = Misc.Settings.icons.loadingIcon;
             native.disabled = true;
         }
         if (pulse) {
@@ -74,7 +82,7 @@ var Button = /** @class */ (function (_super) {
             innerText = text;
         var iconSpace = icon && innerText ? " " : "";
         // Icon
-        var iconElement = icon ? React.createElement("i", { className: Utils.getFontAwesomeClass(icon) }) : undefined;
+        var iconElement = this.iconFactory.getIconComponent(icon, iconStyle);
         // Tooltip
         if (tooltip) {
             Tooltip.setDomProperties(native, tooltip);
@@ -101,7 +109,7 @@ var Button = /** @class */ (function (_super) {
             var menu = React.createElement("div", { className: "dropdown-menu" + (this.state.isExpanded ? " show" : ""), ref: this.menuDom }, menuItems.map(function (item, index) { return (item.header ? React.createElement("h6", { key: index, className: "dropdown-header" }, item.header)
                 : item.isDivider ? React.createElement("div", { key: index, className: "dropdown-divider" })
                     : React.createElement("div", { key: index, className: "dropdown-item", onClick: function (e) { return _this.menuItemClicked(e, item.data, item.onClick); } },
-                        item.icon && React.createElement("i", { className: Utils.getFontAwesomeClass(item.icon) + " fa-fw" }),
+                        _this.iconFactory.getIconComponent(item.icon, { fixedWidth: true }),
                         "  ",
                         item.text)); }));
             root =

package/dist/ReactComponents/Card.d.ts

@@ -17,6 +17,7 @@ interface ICardProps {
     isExpanded?: Model.IObservableValue<boolean>;
 }
 export default class Card extends React.Component<ICardProps & React.HTMLProps<HTMLDivElement>> {
+    private iconFactory;
     private expandState;
     render(): JSX.Element;
 }

package/dist/ReactComponents/Card.js

@@ -1,13 +1,15 @@
 import { __assign, __decorate, __extends, __rest } from "tslib";
 import React from 'react';
-import { Model, Utils } from '@singularsystems/neo-core';
+import { Misc, Model, Utils } from '@singularsystems/neo-core';
 import { observer } from 'mobx-react';
 import Scrollbar from 'react-custom-scrollbars';
 import Collapsable from './Collapsable';
+import { NeoReactTypes } from '../Modules/Types';
 var Card = /** @class */ (function (_super) {
     __extends(Card, _super);
     function Card() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
         _this.expandState = new Model.ObservableValue(_this.props.initiallyCollapsed === undefined ? true : !_this.props.initiallyCollapsed);
         return _this;
     }
@@ -41,7 +43,7 @@ var Card = /** @class */ (function (_super) {
             (icon || title) &&
                 React.createElement("div", { className: "card-header" },
                     React.createElement("div", { className: "card-header-title" },
-                        icon && React.createElement("i", { className: Utils.getFontAwesomeClass(icon) }),
+                        this.iconFactory.getIconComponent(icon),
                         React.createElement("span", null, title)),
                     headerElements && React.createElement("div", { className: "card-header-right-section" }, headerElements)),
             body));

package/dist/ReactComponents/ContextMenu/ContextMenu.d.ts

@@ -16,6 +16,7 @@ export interface IContextMenuProps {
 }
 export default class ContextMenu extends ComponentBase<IContextMenuProps> {
     constructor(props: IContextMenuProps);
+    private iconFactory;
     private menuRef;
     private hoverItem;
     mouseEnter(e: React.MouseEvent<HTMLDivElement>, item: Components.IMenuItem): void;

package/dist/ReactComponents/ContextMenu/ContextMenu.js

@@ -2,12 +2,14 @@ import { __decorate, __extends, __metadata } from "tslib";
 import React from 'react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { Utils } from '@singularsystems/neo-core';
+import { Misc } from '@singularsystems/neo-core';
 import ComponentBase from '../ComponentBase';
+import { NeoReactTypes } from '../../Modules/Types';
 var ContextMenu = /** @class */ (function (_super) {
     __extends(ContextMenu, _super);
     function ContextMenu(props) {
         var _this = _super.call(this, props) || this;
+        _this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
         _this.menuRef = React.createRef();
         _this.hoverItem = null;
         _this.mouseEnter = _this.mouseEnter.bind(_this);
@@ -67,8 +69,8 @@ var ContextMenu = /** @class */ (function (_super) {
                 } },
                 item.isDivider && React.createElement("hr", null),
                 !item.isDivider && React.createElement(React.Fragment, null,
-                    !item.icon && React.createElement("i", { className: "fa fa-fw" }),
-                    item.icon && React.createElement("i", { className: "fa-fw " + Utils.getFontAwesomeClass(item.icon) }),
+                    !item.icon && _this.iconFactory.getIconComponent("", { fixedWidth: true }),
+                    item.icon && _this.iconFactory.getIconComponent(item.icon, { fixedWidth: true }),
                     item.text && React.createElement("span", { className: "neo-context-menu-text" }, item.text),
                     item.header && React.createElement("span", { className: "neo-context-menu-text" }, item.header),
                     item.items && React.createElement("i", { className: "fa-fw fa fa-angle-right child-indicator" }),

package/dist/ReactComponents/IconFactory.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+export interface IconStyle {
+    fixedWidth?: boolean;
+    spin?: boolean;
+}
+export interface IIconFactory {
+    /**
+     * Returns a component that renders an icon.
+     * @param iconOrName If this is a string, it is treated as an icon name. Otherwise it is treated as the icon component.
+     *
+     * The default neo icon factory maps icon names to font-awesome icons.
+     */
+    getIconComponent(iconOrName: any, style?: IconStyle): React.ReactNode | undefined;
+    /**
+     * Returns the original text, or an icon for specific prefixes.
+     * @param textOrIcon If textOrIcon starts with a specific prefix, this will return an icon component, otherwise it will return text.
+     *
+     * By default the neo icon factory will return a font-awesome icon if the prefix is fa- or far-
+     */
+    textOrIcon(textOrIcon: string, style?: IconStyle): React.ReactNode | string;
+}
+export declare class IconFactory implements IIconFactory {
+    getIconComponent(iconOrName: any, style?: IconStyle): import("history").History.PoorMansUnknown;
+    textOrIcon(textOrIcon: string, style?: IconStyle): import("history").History.PoorMansUnknown;
+    protected mapStringToIcon(iconName: string, style?: IconStyle): React.ReactNode;
+    protected createIconComponent(iconDescriptor: any, style?: IconStyle): React.ReactNode;
+}

package/dist/ReactComponents/IconFactory.js

@@ -0,0 +1,46 @@
+import { __decorate } from "tslib";
+import { Utils } from "@singularsystems/neo-core";
+import React from "react";
+import { injectable } from 'inversify';
+var IconFactory = /** @class */ (function () {
+    function IconFactory() {
+    }
+    IconFactory.prototype.getIconComponent = function (iconOrName, style) {
+        if (iconOrName) {
+            if (typeof iconOrName === "string") {
+                return this.mapStringToIcon(iconOrName, style);
+            }
+            else {
+                return this.createIconComponent(iconOrName, style);
+            }
+        }
+        return undefined;
+    };
+    IconFactory.prototype.textOrIcon = function (textOrIcon, style) {
+        if (textOrIcon.indexOf("fa-") === 0 || textOrIcon.indexOf("far-") === 0) {
+            return this.getIconComponent(textOrIcon, style);
+        }
+        else {
+            return textOrIcon;
+        }
+    };
+    IconFactory.prototype.mapStringToIcon = function (iconName, style) {
+        var _a, _b;
+        var className = Utils.getFontAwesomeClass(iconName);
+        if ((_a = style) === null || _a === void 0 ? void 0 : _a.fixedWidth) {
+            className += " fa-fw";
+        }
+        if ((_b = style) === null || _b === void 0 ? void 0 : _b.spin) {
+            className += " fa-spin";
+        }
+        return React.createElement("i", { className: className });
+    };
+    IconFactory.prototype.createIconComponent = function (iconDescriptor, style) {
+        return iconDescriptor;
+    };
+    IconFactory = __decorate([
+        injectable()
+    ], IconFactory);
+    return IconFactory;
+}());
+export { IconFactory };

package/dist/ReactComponents/Icons/FontAwesomeIconFactory.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { IconFactory } from "./IconFactory";
+import { IconStyle } from "./IIconFactory";
+interface IconDefinition {
+    icon: string;
+}
+/** Icon factory supporting font-awesome string, as well as the font-awesome icon definition and component. */
+export declare class FontAwesomeIconFactory extends IconFactory {
+    protected createIconComponent(iconComponent: IconDefinition | JSX.Element, iconStyle?: IconStyle): React.ReactNode;
+}
+export {};

package/dist/ReactComponents/Icons/FontAwesomeIconFactory.js

@@ -0,0 +1,35 @@
+import { __assign, __decorate, __extends } from "tslib";
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { injectable } from "inversify";
+import { IconFactory } from "./IconFactory";
+/** Icon factory supporting font-awesome string, as well as the font-awesome icon definition and component. */
+var FontAwesomeIconFactory = /** @class */ (function (_super) {
+    __extends(FontAwesomeIconFactory, _super);
+    function FontAwesomeIconFactory() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FontAwesomeIconFactory.prototype.createIconComponent = function (iconComponent, iconStyle) {
+        var _a, _b, _c, _d;
+        if (iconComponent.icon) {
+            // Icon was specified using a font-awesome icon descriptor, return the font-awesome icon component.
+            return React.createElement(FontAwesomeIcon, { icon: iconComponent, fixedWidth: (_a = iconStyle) === null || _a === void 0 ? void 0 : _a.fixedWidth, spin: (_b = iconStyle) === null || _b === void 0 ? void 0 : _b.spin });
+        }
+        else {
+            // Icon was specified as a font-awesome component. Extract the props, and override using the requested style.
+            var props = __assign({}, iconComponent.props);
+            if ((_c = iconStyle) === null || _c === void 0 ? void 0 : _c.fixedWidth) {
+                props.fixedWidth = iconStyle.fixedWidth;
+            }
+            if ((_d = iconStyle) === null || _d === void 0 ? void 0 : _d.spin) {
+                props.spin = iconStyle.spin;
+            }
+            return React.createElement(iconComponent.type, props);
+        }
+    };
+    FontAwesomeIconFactory = __decorate([
+        injectable()
+    ], FontAwesomeIconFactory);
+    return FontAwesomeIconFactory;
+}(IconFactory));
+export { FontAwesomeIconFactory };

package/dist/ReactComponents/Icons/IIconFactory.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export interface IconStyle {
+    fixedWidth?: boolean;
+    spin?: boolean;
+}
+export interface IIconFactory {
+    /**
+     * Returns a component that renders an icon.
+     * @param iconOrName If this is a string, it is treated as an icon name. Otherwise it is treated as the icon component.
+     *
+     * The default neo icon factory maps icon names to font-awesome icons.
+     */
+    getIconComponent(iconOrName: any, style?: IconStyle): React.ReactNode | undefined;
+    /**
+     * Returns the original text, or an icon for specific prefixes.
+     * @param textOrIcon If textOrIcon starts with a specific prefix, this will return an icon component, otherwise it will return text.
+     *
+     * By default the neo icon factory will return a font-awesome icon if the prefix is fa- or far-
+     */
+    textOrIcon(textOrIcon: string, style?: IconStyle): React.ReactNode | string;
+}

package/dist/ReactComponents/Icons/IconFactory.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { IconStyle, IIconFactory } from "./IIconFactory";
+/** Default icon factory supporting font-awesome strings. */
+export declare class IconFactory implements IIconFactory {
+    getIconComponent(iconOrName: any, style?: IconStyle): import("history").History.PoorMansUnknown;
+    textOrIcon(textOrIcon: string, style?: IconStyle): import("history").History.PoorMansUnknown;
+    protected mapStringToIcon(iconName: string, style?: IconStyle): React.ReactNode;
+    protected createIconComponent(iconDescriptor: any, style?: IconStyle): React.ReactNode;
+}

package/dist/ReactComponents/Icons/IconFactory.js

@@ -0,0 +1,47 @@
+import { __decorate } from "tslib";
+import { Utils } from "@singularsystems/neo-core";
+import React from "react";
+import { injectable } from 'inversify';
+/** Default icon factory supporting font-awesome strings. */
+var IconFactory = /** @class */ (function () {
+    function IconFactory() {
+    }
+    IconFactory.prototype.getIconComponent = function (iconOrName, style) {
+        if (iconOrName !== undefined) {
+            if (typeof iconOrName === "string") {
+                return this.mapStringToIcon(iconOrName, style);
+            }
+            else {
+                return this.createIconComponent(iconOrName, style);
+            }
+        }
+        return undefined;
+    };
+    IconFactory.prototype.textOrIcon = function (textOrIcon, style) {
+        if (textOrIcon.indexOf("fa-") === 0 || textOrIcon.indexOf("far-") === 0) {
+            return this.getIconComponent(textOrIcon, style);
+        }
+        else {
+            return textOrIcon;
+        }
+    };
+    IconFactory.prototype.mapStringToIcon = function (iconName, style) {
+        var _a, _b;
+        var className = Utils.getFontAwesomeClass(iconName);
+        if ((_a = style) === null || _a === void 0 ? void 0 : _a.fixedWidth) {
+            className += " fa-fw";
+        }
+        if ((_b = style) === null || _b === void 0 ? void 0 : _b.spin) {
+            className += " fa-spin";
+        }
+        return React.createElement("i", { className: className });
+    };
+    IconFactory.prototype.createIconComponent = function (iconDescriptor, style) {
+        return iconDescriptor;
+    };
+    IconFactory = __decorate([
+        injectable()
+    ], IconFactory);
+    return IconFactory;
+}());
+export { IconFactory };

package/dist/ReactComponents/Icons/index.d.ts

@@ -0,0 +1,3 @@
+export { IIconFactory, IconStyle } from './IIconFactory';
+export { IconFactory } from './IconFactory';
+export { FontAwesomeIconFactory } from './FontAwesomeIconFactory';

package/dist/ReactComponents/Icons/index.js

@@ -0,0 +1,2 @@
+export { IconFactory } from './IconFactory';
+export { FontAwesomeIconFactory } from './FontAwesomeIconFactory';

package/dist/ReactComponents/InputHelpers.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ICommonEditorProps } from './PropTypes';
 export declare class InputHelpers {
+    private static iconFactory?;
     static surroundWithInputGroup<T>(element: T, props: ICommonEditorProps): JSX.Element | T;
 }

package/dist/ReactComponents/InputHelpers.js

@@ -1,28 +1,24 @@
 import * as React from 'react';
-import { Utils } from '@singularsystems/neo-core';
+import { Misc } from '@singularsystems/neo-core';
+import { NeoReactTypes } from '../Modules/Types';
 var InputHelpers = /** @class */ (function () {
     function InputHelpers() {
     }
     InputHelpers.surroundWithInputGroup = function (element, props) {
+        if (!this.iconFactory) {
+            this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
+        }
         if (props.requiresGroup) {
-            var preIcon = void 0;
-            var appendIcon = void 0;
-            if (props.prependText && (props.prependText.startsWith("fa-") || props.prependText.startsWith("far-"))) {
-                preIcon = Utils.getFontAwesomeClass(props.prependText);
-            }
-            if (props.appendText && (props.appendText.startsWith("fa-") || props.appendText.startsWith("far-"))) {
-                appendIcon = Utils.getFontAwesomeClass(props.appendText);
-            }
             return (React.createElement("div", { className: "input-group" },
                 (props.prependText || props.prepend) &&
                     React.createElement("div", { className: "input-group-prepend" },
                         props.prepend && (props.prepend instanceof Function ? props.prepend() : props.prepend),
-                        props.prependText && React.createElement("span", { className: "input-group-text" }, preIcon ? React.createElement("i", { className: preIcon }) : props.prependText)),
+                        props.prependText && React.createElement("span", { className: "input-group-text" }, this.iconFactory.textOrIcon(props.prependText))),
                 element,
                 (props.appendText || props.append) &&
                     React.createElement("div", { className: "input-group-append" },
                         props.append && (props.append instanceof Function ? props.append() : props.append),
-                        props.appendText && React.createElement("span", { className: "input-group-text" }, appendIcon ? React.createElement("i", { className: appendIcon }) : props.appendText))));
+                        props.appendText && React.createElement("span", { className: "input-group-text" }, this.iconFactory.textOrIcon(props.appendText)))));
         }
         else {
             return element;

package/dist/ReactComponents/Notifications/Alert.d.ts

@@ -2,5 +2,6 @@ import React from "react";
 import { Components } from "@singularsystems/neo-core";
 import CollapsableBase from '../CollapsableBase';
 export default class Alert extends CollapsableBase<Components.INotificationOptions & React.HTMLProps<HTMLDivElement>> {
+    private iconFactory;
     render(): JSX.Element;
 }

package/dist/ReactComponents/Notifications/Alert.js

@@ -1,12 +1,15 @@
 import { __assign, __decorate, __extends, __rest } from "tslib";
 import React from "react";
-import { Utils } from "@singularsystems/neo-core";
+import { Misc, Utils } from "@singularsystems/neo-core";
 import { observer } from 'mobx-react';
 import CollapsableBase from '../CollapsableBase';
+import { NeoReactTypes } from "../../Modules/Types";
 var Alert = /** @class */ (function (_super) {
     __extends(Alert, _super);
     function Alert() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
+        return _this;
     }
     Alert.prototype.render = function () {
         var _a = this.props, variant = _a.variant, heading = _a.heading, show = _a.show, bindShow = _a.bindShow, autoCloseTimeout = _a.autoCloseTimeout, animateInitial = _a.animateInitial, state = _a.state, onHidden = _a.onHidden, refreshValue = _a.refreshValue, icon = _a.icon, native = __rest(_a, ["variant", "heading", "show", "bindShow", "autoCloseTimeout", "animateInitial", "state", "onHidden", "refreshValue", "icon"]);
@@ -20,7 +23,7 @@ var Alert = /** @class */ (function (_super) {
                 React.createElement("h6", null, heading),
             icon &&
                 React.createElement("div", { className: "notification-icon-container" },
-                    React.createElement("i", { className: Utils.getFontAwesomeClass(icon) }),
+                    this.iconFactory.getIconComponent(icon),
                     React.createElement("div", null, this.props.children)),
             !icon && this.props.children,
             bindShow &&

package/dist/ReactComponents/Notifications/Toast.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import CollapsableBase from '../CollapsableBase';
 import { Components } from '@singularsystems/neo-core';
 export default class Toast extends CollapsableBase<Components.INotificationOptions & React.HTMLProps<HTMLDivElement>> {
+    private iconFactory;
     countDownRef: React.RefObject<HTMLDivElement>;
     afterRender(isInitial: boolean): void;
     render(): JSX.Element;

package/dist/ReactComponents/Notifications/Toast.js

@@ -2,11 +2,13 @@ import { __decorate, __extends } from "tslib";
 import React from 'react';
 import CollapsableBase from '../CollapsableBase';
 import { observer } from 'mobx-react';
-import { Components, Utils } from '@singularsystems/neo-core';
+import { Components, Misc } from '@singularsystems/neo-core';
+import { NeoReactTypes } from '../../Modules/Types';
 var Toast = /** @class */ (function (_super) {
     __extends(Toast, _super);
     function Toast() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
         _this.countDownRef = React.createRef();
         return _this;
     }
@@ -33,7 +35,7 @@ var Toast = /** @class */ (function (_super) {
             this.props.autoCloseTimeout && React.createElement("div", { className: "toast-count-down toast-count-down-" + variant, ref: this.countDownRef }),
             React.createElement("div", { className: "toast-body" },
                 icon && React.createElement("div", { className: "notification-icon-container" },
-                    React.createElement("i", { className: Utils.getFontAwesomeClass(icon) }),
+                    this.iconFactory.getIconComponent(icon),
                     React.createElement("div", null, this.props.children)),
                 !icon && this.props.children)));
     };

package/dist/ReactComponents/Paging/BasicPagerControls.d.ts

@@ -21,5 +21,6 @@ export interface IPagerControlsProps extends React.HTMLProps<HTMLUListElement> {
     pageSizeLabel?: string | JSX.Element;
 }
 export default class SimplePagerControls extends React.Component<IPagerControlsProps> {
+    private iconFactory;
     render(): false | JSX.Element;
 }

package/dist/ReactComponents/Paging/BasicPagerControls.js

@@ -1,13 +1,15 @@
 import { __assign, __decorate, __extends, __rest } from "tslib";
 import React from 'react';
 import { Misc, Utils } from "@singularsystems/neo-core";
-import { ReactHelpers } from '../ReactHelpers';
 import { observer } from "mobx-react";
 import PageSizeControl from './PageSizeControl';
+import { NeoReactTypes } from '../../Modules/Types';
 var SimplePagerControls = /** @class */ (function (_super) {
     __extends(SimplePagerControls, _super);
     function SimplePagerControls() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
+        return _this;
     }
     SimplePagerControls.prototype.render = function () {
         var _a = this.props, pageManager = _a.pageManager, noOfButtons = _a.noOfButtons, alignment = _a.alignment, firstText = _a.firstText, prevText = _a.prevText, nextText = _a.nextText, lastText = _a.lastText, autoHide = _a.autoHide, pageSizeLabel = _a.pageSizeLabel, domProps = __rest(_a, ["pageManager", "noOfButtons", "alignment", "firstText", "prevText", "nextText", "lastText", "autoHide", "pageSizeLabel"]);
@@ -38,14 +40,14 @@ var SimplePagerControls = /** @class */ (function (_super) {
                 pageSizeLabel && React.createElement(PageSizeControl, { pageManager: this.props.pageManager, label: pageSizeLabel }),
                 React.createElement("ul", __assign({}, domProps, { className: "pagination" }),
                     React.createElement("li", { className: "page-item" + (pageManager.pageNo === 1 ? " disabled" : "") },
-                        React.createElement("a", { className: "page-link", href: "#", onClick: function (e) { e.preventDefault(); pageManager.firstPage(); } }, ReactHelpers.textOrIcon(firstText))),
+                        React.createElement("a", { className: "page-link", href: "#", onClick: function (e) { e.preventDefault(); pageManager.firstPage(); } }, this.iconFactory.textOrIcon(firstText))),
                     React.createElement("li", { className: "page-item" + (pageManager.pageNo === 1 ? " disabled" : "") },
-                        React.createElement("a", { className: "page-link", href: "#", onClick: function (e) { e.preventDefault(); pageManager.previousPage(); } }, ReactHelpers.textOrIcon(prevText))),
+                        React.createElement("a", { className: "page-link", href: "#", onClick: function (e) { e.preventDefault(); pageManager.previousPage(); } }, this.iconFactory.textOrIcon(prevText))),
                     buttons,
                     React.createElement("li", { className: "page-item" + (pageManager.pageNo === pageManager.totalPages ? " disabled" : "") },
-                        React.createElement("a", { className: "page-link", href: "#", onClick: function (e) { e.preventDefault(); pageManager.nextPage(); } }, ReactHelpers.textOrIcon(nextText))),
+                        React.createElement("a", { className: "page-link", href: "#", onClick: function (e) { e.preventDefault(); pageManager.nextPage(); } }, this.iconFactory.textOrIcon(nextText))),
                     React.createElement("li", { className: "page-item" + (pageManager.pageNo === pageManager.totalPages ? " disabled" : "") },
-                        React.createElement("a", { className: "page-link", href: "#", onClick: function (e) { e.preventDefault(); pageManager.lastPage(); } }, ReactHelpers.textOrIcon(lastText))))));
+                        React.createElement("a", { className: "page-link", href: "#", onClick: function (e) { e.preventDefault(); pageManager.lastPage(); } }, this.iconFactory.textOrIcon(lastText))))));
     };
     SimplePagerControls = __decorate([
         observer

package/dist/ReactComponents/Tabs/Tab.d.ts

@@ -29,6 +29,7 @@ export default class Tab extends React.Component<ITabProps> {
     private isHeader?;
     private tabKey;
     private hasRenderedContents;
+    private iconFactory;
     constructor(props: ITabProps);
     componentDidMount(): void;
     render(): false | JSX.Element;

package/dist/ReactComponents/Tabs/Tab.js

@@ -2,13 +2,15 @@ import { __decorate, __extends, __metadata } from "tslib";
 import React from "react";
 import { observer } from "mobx-react";
 import { TabContext } from "./TabContainer";
-import { Utils } from "@singularsystems/neo-core";
+import { Misc } from "@singularsystems/neo-core";
+import { NeoReactTypes } from "../../Modules/Types";
 var Tab = /** @class */ (function (_super) {
     __extends(Tab, _super);
     function Tab(props) {
         var _a;
         var _this = _super.call(this, props) || this;
         _this.hasRenderedContents = false;
+        _this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
         _this.onClick = _this.onClick.bind(_this);
         var tabKey = (_a = _this.props.id, (_a !== null && _a !== void 0 ? _a : _this.props.name));
         if (!tabKey) {
@@ -44,14 +46,11 @@ var Tab = /** @class */ (function (_super) {
         }
     };
     Tab.prototype.renderHeader = function (isSelected) {
-        var iconClass = "";
-        if (this.props.icon) {
-            iconClass = Utils.getFontAwesomeClass(this.props.icon);
-        }
+        var hasIcon = this.props.icon !== undefined;
         return (React.createElement("li", { className: "nav-item" },
             React.createElement("a", { className: "nav-link" + (isSelected ? " active" : "") + (this.props.disabled ? " disabled" : ""), href: "#", onClick: this.onClick },
-                iconClass && React.createElement("i", { className: iconClass }),
-                iconClass && " ",
+                hasIcon && this.iconFactory.getIconComponent(this.props.icon),
+                hasIcon && " ",
                 this.props.header)));
     };
     Tab.prototype.renderBody = function (isSelected) {

package/dist/ReactComponents/ValidationSummary.d.ts

@@ -17,6 +17,7 @@ export interface IValidationSummaryProps {
     hideTopLevelTitle?: boolean;
 }
 export default class ValidationSummary extends React.Component<IValidationSummaryProps> {
+    private iconFactory;
     private getRules;
     render(): JSX.Element;
 }

package/dist/ReactComponents/ValidationSummary.js

@@ -1,10 +1,13 @@
 import { __extends } from "tslib";
 import React from 'react';
-import { Validation, Utils } from '@singularsystems/neo-core';
+import { Validation, Misc } from '@singularsystems/neo-core';
+import { NeoReactTypes } from '../Modules/Types';
 var ValidationSummary = /** @class */ (function (_super) {
     __extends(ValidationSummary, _super);
     function ValidationSummary() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
+        return _this;
     }
     ValidationSummary.prototype.getRules = function (modelInfo) {
         return modelInfo.objectDisplayInfo.concat(modelInfo.propertyRules)
@@ -26,12 +29,12 @@ var ValidationSummary = /** @class */ (function (_super) {
         return (React.createElement("div", { className: "validation-summary" }, graph && models.map(function (modelInfo, index) { return (React.createElement("div", { key: index, className: "validation-summary-model" },
             _this.props.hideTopLevelTitle !== true &&
                 React.createElement("div", { className: "validation-summary-model-title" },
-                    React.createElement("i", { className: Utils.getFontAwesomeClass(modelInfo.model.getIcon()) }),
+                    _this.iconFactory.getIconComponent(modelInfo.model.getIcon()),
                     " ",
                     modelInfo.model.toString()),
             React.createElement("div", { className: "validation-summary-model-body" + (_this.props.hideTopLevelTitle === true ? " no-title" : "") },
                 React.createElement("div", { className: "validation-summary-model-rules" }, _this.getRules(modelInfo).map(function (rule, index) { return (React.createElement("div", { key: index, className: rule.displayInfo.additionalClassName },
-                    React.createElement("i", { className: rule.displayInfo.iconClass }),
+                    _this.iconFactory.getIconComponent(rule.displayInfo.icon, { fixedWidth: true, spin: !!rule.displayInfo.asyncBusyText }),
                     " ",
                     rule.displayInfo.displayText)); })),
                 React.createElement(ValidationSummary, { graph: modelInfo.valueObjects }),

package/dist/index.d.ts

@@ -5,7 +5,8 @@ import * as NeoGrid from './ReactComponents/Grid/_Exports';
 import * as Routing from './Routing';
 import * as Views from './Views/';
 import * as Managers from './ReactComponents/_Managers';
+import * as Icons from './ReactComponents/Icons';
 import { TooltipHelper } from './ReactComponents/TooltipHelper';
 export * from './React/Decorators';
-export { Managers, NeoReactModule, NeoReactTypes, Neo, NeoGrid, Routing, Views, TooltipHelper, };
+export { Icons, Managers, NeoReactModule, NeoReactTypes, Neo, NeoGrid, Routing, Views, TooltipHelper, };
 export { ICancellableEvent } from './ReactComponents/Misc';

package/dist/index.js

@@ -5,6 +5,7 @@ import * as NeoGrid from './ReactComponents/Grid/_Exports';
 import * as Routing from './Routing';
 import * as Views from './Views/';
 import * as Managers from './ReactComponents/_Managers';
+import * as Icons from './ReactComponents/Icons';
 import { TooltipHelper } from './ReactComponents/TooltipHelper';
 export * from './React/Decorators';
-export { Managers, NeoReactModule, NeoReactTypes, Neo, NeoGrid, Routing, Views, TooltipHelper, };
+export { Icons, Managers, NeoReactModule, NeoReactTypes, Neo, NeoGrid, Routing, Views, TooltipHelper, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "0.10.49",
+  "version": "0.10.50",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -30,10 +30,11 @@
     "tslib": "2.3.1"
   },
   "dependencies": {
+    "@fortawesome/react-fontawesome": "0.2.0",
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "@types/react-select": "3.1.0",
-    "@singularsystems/neo-core": "^0.10.53",
+    "@singularsystems/neo-core": "^0.10.54",
     "axios": "^0.21.1",
     "decimal.js-light": "2.5.1",
     "history": "4.10.1",

package/styles/Validation.scss

@@ -147,15 +147,6 @@ select.form-control.is-invalid {
             color: $validation-color-info;
         }
     }
-    i {
-        width: 1rem;
-        height: 1rem;
-        text-align: center;
-
-        &.spinner-grow {
-            animation: spinner-grow 1s linear infinite;
-        }
-    }
 }
 
 .neo-error-modal-body {