@singularsystems/neo-react 1.0.1 → 1.0.3

package/dist/ReactComponents/Badge.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { variant } from '@singularsystems/neo-core/dist/Components';
+interface IBadgeProps {
+    /** Content of badge. */
+    text?: string;
+    /** Child Element */
+    children?: React.ReactNode;
+    /** Bootstrap variant. */
+    variant?: variant;
+    /** Set a custom variant for when a standard variant is not provided. */
+    customVariant?: string;
+    /** Changes the type of badge. */
+    isLarge?: boolean;
+    /** Changes the badge to a pill which results in rounder borders. */
+    isPill?: boolean;
+}
+export default class Badge extends React.Component<IBadgeProps & React.HTMLProps<HTMLDivElement>> {
+    constructor(props: IBadgeProps);
+    render(): React.JSX.Element;
+}
+export {};

package/dist/ReactComponents/Badge.js

@@ -0,0 +1,25 @@
+import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Utils } from '@singularsystems/neo-core';
+var Badge = /** @class */ (function (_super) {
+    __extends(Badge, _super);
+    function Badge(props) {
+        return _super.call(this, props) || this;
+    }
+    Badge.prototype.render = function () {
+        var _a;
+        var _b = this.props, text = _b.text, variant = _b.variant, customVariant = _b.customVariant, isLarge = _b.isLarge, isPill = _b.isPill, children = _b.children, domProps = __rest(_b, ["text", "variant", "customVariant", "isLarge", "isPill", "children"]);
+        var variantClassName = "badge badge-".concat(((_a = customVariant !== null && customVariant !== void 0 ? customVariant : variant) !== null && _a !== void 0 ? _a : "primary"));
+        var largeBadgeClassName = isLarge ? "badge-lg" : "";
+        var pillClassName = isPill ? "badge-pill" : "";
+        domProps.className = Utils.joinWithSpaces(domProps.className, variantClassName, pillClassName, largeBadgeClassName);
+        return (React.createElement("div", __assign({}, domProps), children !== null && children !== void 0 ? children : text));
+    };
+    Badge = __decorate([
+        observer,
+        __metadata("design:paramtypes", [Object])
+    ], Badge);
+    return Badge;
+}(React.Component));
+export default Badge;

package/dist/ReactComponents/BootstrapUtils.d.ts

@@ -0,0 +1,15 @@
+import React, { MouseEventHandler } from "react";
+declare class BootstrapUtils {
+    constructor();
+    /** Bootstrap version is before v5 */
+    get isPre5(): boolean;
+    /** Class prefix (without -) for end margin / right margin. */
+    get marginE(): "mr" | "me";
+    /**
+     * Gets the close button used in component headers.
+     * @param pre5ClassName Class to add if bootstrap version is <5.
+     */
+    getCloseButton(onClick: MouseEventHandler<HTMLButtonElement>, pre5ClassName?: string): React.JSX.Element;
+}
+declare const _default: BootstrapUtils;
+export default _default;

package/dist/ReactComponents/BootstrapUtils.js

@@ -0,0 +1,35 @@
+import { Misc, Utils } from "@singularsystems/neo-core";
+import React from "react";
+var BootstrapUtils = /** @class */ (function () {
+    function BootstrapUtils() {
+    }
+    Object.defineProperty(BootstrapUtils.prototype, "isPre5", {
+        /** Bootstrap version is before v5 */
+        get: function () {
+            return Misc.Settings.bootstrap.version < 5;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BootstrapUtils.prototype, "marginE", {
+        /** Class prefix (without -) for end margin / right margin. */
+        get: function () {
+            return this.isPre5 ? "mr" : "me";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Gets the close button used in component headers.
+     * @param pre5ClassName Class to add if bootstrap version is <5.
+     */
+    BootstrapUtils.prototype.getCloseButton = function (onClick, pre5ClassName) {
+        pre5ClassName = Utils.joinWithSpaces("close", pre5ClassName);
+        return this.isPre5 ?
+            React.createElement("button", { type: "button", className: pre5ClassName, "aria-label": "Close", onClick: onClick },
+                React.createElement("span", { "aria-hidden": "true" }, "\u00D7")) :
+            React.createElement("button", { type: "button", className: "btn-close", "aria-label": "Close", onClick: onClick });
+    };
+    return BootstrapUtils;
+}());
+export default new BootstrapUtils();

package/dist/ReactComponents/DatePicker.js

@@ -45,7 +45,7 @@ var DatePicker = /** @class */ (function (_super) {
             void this.props.bind.value;
         }
         return (React.createElement("div", { className: "neo-datepicker-container", ref: this.container }, Components.DatePicker.mustShowInput(splitProps.dateProps) &&
-            InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({ type: "text" }, domProps, { ref: this.inputRef })), splitProps.editor, this.inputRef)));
+            InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({ type: "text" }, domProps, { ref: this.inputRef })), splitProps.editor, domProps, this.inputRef)));
     };
     DatePicker.contextType = FormContext;
     DatePicker = __decorate([

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -216,10 +216,10 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
             }
         };
         if (this.props.itemSource !== undefined) {
-            return Tooltip.fromDataAttributes(InputHelpers.surroundWithInputGroup(React.createElement(this.asyncSelectImplementation, __assign({}, nativeProps, { placeholder: (_g = this.props.placeholder) !== null && _g !== void 0 ? _g : "", classNamePrefix: "react-select-bs", defaultOptions: defaultItems, loadOptions: this.onKeyPress, isMulti: bindItems !== undefined, noOptionsMessage: function (c) { var _a, _b; return c.inputValue && c.inputValue.length >= (minCharacters !== null && minCharacters !== void 0 ? minCharacters : 1) ? ((_a = _this.props.noRecordsPrompt) !== null && _a !== void 0 ? _a : "No records found") : ((_b = _this.props.typeToSearchPrompt) !== null && _b !== void 0 ? _b : "Type to search..."); }, value: value, onChange: this.onItemSelected, components: components })), splitProps.editor), nativeProps);
+            return Tooltip.fromDataAttributes(InputHelpers.surroundWithInputGroup(React.createElement(this.asyncSelectImplementation, __assign({}, nativeProps, { placeholder: (_g = this.props.placeholder) !== null && _g !== void 0 ? _g : "", classNamePrefix: "react-select-bs", defaultOptions: defaultItems, loadOptions: this.onKeyPress, isMulti: bindItems !== undefined, noOptionsMessage: function (c) { var _a, _b; return c.inputValue && c.inputValue.length >= (minCharacters !== null && minCharacters !== void 0 ? minCharacters : 1) ? ((_a = _this.props.noRecordsPrompt) !== null && _a !== void 0 ? _a : "No records found") : ((_b = _this.props.typeToSearchPrompt) !== null && _b !== void 0 ? _b : "Type to search..."); }, value: value, onChange: this.onItemSelected, components: components })), splitProps.editor, { disabled: nativeProps.isDisabled }), nativeProps);
         }
         else {
-            return Tooltip.fromDataAttributes(InputHelpers.surroundWithInputGroup(React.createElement(this.selectImplementation, __assign({}, nativeProps, { placeholder: (_h = this.props.placeholder) !== null && _h !== void 0 ? _h : "", classNamePrefix: "react-select-bs", options: defaultItems, isLoading: this.isLoading, isMulti: bindItems !== undefined, noOptionsMessage: function (c) { var _a; return (_a = _this.props.noRecordsPrompt) !== null && _a !== void 0 ? _a : "No records found"; }, value: value, onChange: this.onItemSelected, components: components })), splitProps.editor), nativeProps);
+            return Tooltip.fromDataAttributes(InputHelpers.surroundWithInputGroup(React.createElement(this.selectImplementation, __assign({}, nativeProps, { placeholder: (_h = this.props.placeholder) !== null && _h !== void 0 ? _h : "", classNamePrefix: "react-select-bs", options: defaultItems, isLoading: this.isLoading, isMulti: bindItems !== undefined, noOptionsMessage: function (c) { var _a; return (_a = _this.props.noRecordsPrompt) !== null && _a !== void 0 ? _a : "No records found"; }, value: value, onChange: this.onItemSelected, components: components })), splitProps.editor, { disabled: nativeProps.isDisabled }), nativeProps);
         }
     };
     AutoCompleteDropDown.prototype.getOption = function (content, additionalClass) {

package/dist/ReactComponents/DropDown/DropDown.js

@@ -92,7 +92,7 @@ var DropDown = /** @class */ (function (_super) {
         var _a, _b, _c, _d, _e, _f, _g;
         var splitProps = BindPropsHelper.normaliseEditorProps(this, this.props);
         var domProps = BindPropsHelper.autoSetDomProperties(splitProps, this.context);
-        domProps.className = Utils.joinWithSpaces(domProps.className, splitProps.isBootstrap ? "form-control" : "neo-forms-editor");
+        domProps.className = Utils.joinWithSpaces(domProps.className, splitProps.isBootstrap ? "form-control form-select" : "neo-forms-editor");
         this.sortByValue = (_a = splitProps.select) === null || _a === void 0 ? void 0 : _a.sortByValue;
         if (splitProps.select) {
             if (splitProps.select.valueMember)
@@ -136,7 +136,7 @@ var DropDown = /** @class */ (function (_super) {
                     addBlankItem && React.createElement("option", { className: "option-default" }, notFound ? "(Not found): ".concat(value) : nullText),
                     items.map(function (item) { return (React.createElement("option", { value: item[_this.valueMember], key: item[_this.valueMember] }, item[_this.displayMember])); }));
         }
-        return (InputHelpers.surroundWithInputGroup(control, splitProps.editor));
+        return (InputHelpers.surroundWithInputGroup(control, splitProps.editor, domProps));
     };
     DropDown.contextType = FormContext;
     DropDown = __decorate([

package/dist/ReactComponents/Form.js

@@ -14,6 +14,7 @@ var Form = /** @class */ (function (_super) {
     }
     Form.prototype.onSubmit = function (e, model) {
         var _this = this;
+        var _a;
         e.preventDefault();
         e.stopPropagation();
         this.disposeReaction();
@@ -38,11 +39,15 @@ var Form = /** @class */ (function (_super) {
                     this.props.onInvalid(e, justValidated);
                 if (this.props.showSummaryModal || this.props.invalidSummaryText || this.props.invalidSummaryTitle) {
                     var onClose = this.disposeReaction.bind(this);
+                    var closeButton = (_a = Misc.Settings.form.validationModalCloseButton) !== null && _a !== void 0 ? _a : { text: "Ok" };
+                    if (closeButton) {
+                        closeButton.onClick = onClose;
+                    }
                     var codeModal_1 = ModalUtils.showModal(this.props.invalidSummaryTitle || "Invalid data", React.createElement(Observer, null, function () {
                         return React.createElement("div", null,
                             _this.props.invalidSummaryText || "Cannot continue due to the following issues:",
                             React.createElement(ValidationSummary, { graph: Validation.getValidationSummary(model), hideTopLevelTitle: !(model instanceof Array) }));
-                    }), { onClose: onClose, closeButton: { text: "Ok", onClick: onClose } });
+                    }), { onClose: onClose, closeButton: closeButton });
                     // Listen for when isValid changes to true, in case there is an async rule running.
                     this.reactionDisposer = reaction(function () { return model.isValid; }, function () {
                         _this.disposeReaction();

package/dist/ReactComponents/FormGroup/FormGroup.d.ts

@@ -29,6 +29,7 @@ export interface IFormGroupClasses {
 export declare class FormGroupBase<T extends IFormGroupProps<TData>, TData> extends ComponentBase<T> {
     static contextType: React.Context<import("../FormContext").FormContextParams>;
     context: React.ContextType<typeof FormContext>;
+    protected isBsPre5: boolean;
     protected getFormGroupClasses(domProps: React.HTMLProps<HTMLDivElement>, isCheckBox: boolean): IFormGroupClasses;
     protected hideLabelForCheckboxes(): boolean;
     render(): React.JSX.Element;

package/dist/ReactComponents/FormGroup/FormGroup.js

@@ -5,13 +5,16 @@ import { BindPropsHelper, CheckboxType } from '../PropTypes';
 import { Validation, Utils } from '@singularsystems/neo-core';
 import ComponentBase from '../ComponentBase';
 import { EditorParentType, FormContext } from '../FormContext';
+import BootstrapUtils from "../BootstrapUtils";
 var FormGroupBase = /** @class */ (function (_super) {
     __extends(FormGroupBase, _super);
     function FormGroupBase() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.isBsPre5 = BootstrapUtils.isPre5;
+        return _this;
     }
     FormGroupBase.prototype.getFormGroupClasses = function (domProps, isCheckBox) {
-        return { containerDom: domProps, container: "form-group", label: "", editor: "" };
+        return { containerDom: domProps, container: "form-group", label: this.isBsPre5 ? "" : "form-label", editor: "" };
     };
     FormGroupBase.prototype.hideLabelForCheckboxes = function () {
         return true;

package/dist/ReactComponents/GridLayout.js

@@ -1,6 +1,7 @@
 import { __assign, __extends, __rest } from "tslib";
 import React from 'react';
 import { Utils } from '@singularsystems/neo-core';
+import BootstrapUtils from "./BootstrapUtils";
 var FormGroupLayoutContextParams = /** @class */ (function () {
     function FormGroupLayoutContextParams() {
     }
@@ -15,11 +16,12 @@ var GridLayout = /** @class */ (function (_super) {
     }
     GridLayout.prototype.render = function () {
         var _a = this.props, gutterSize = _a.gutterSize, verticalSpace = _a.verticalSpace, withGaps = _a.withGaps, alignItems = _a.alignItems, formGroupProps = _a.formGroupProps, xs = _a.xs, sm = _a.sm, md = _a.md, lg = _a.lg, xl = _a.xl, xxl = _a.xxl, domProps = __rest(_a, ["gutterSize", "verticalSpace", "withGaps", "alignItems", "formGroupProps", "xs", "sm", "md", "lg", "xl", "xxl"]);
-        var columnClassName = Utils.joinWithSpaces(gutterSize && "px-" + gutterSize, xs && "col-" + 12 / xs, sm && "col-sm-" + 12 / sm, md && "col-md-" + 12 / md, lg && "col-lg-" + 12 / lg, xl && "col-xl-" + 12 / xl, xxl && "col-xxl-" + 12 / xxl);
+        var isBsPre5 = BootstrapUtils.isPre5;
+        var columnClassName = Utils.joinWithSpaces((gutterSize !== undefined && isBsPre5) ? "px-" + gutterSize : undefined, xs && "col-" + 12 / xs, sm && "col-sm-" + 12 / sm, md && "col-md-" + 12 / md, lg && "col-lg-" + 12 / lg, xl && "col-xl-" + 12 / xl, xxl && "col-xxl-" + 12 / xxl);
         if (!(xs || sm || md || lg || xl || xxl)) {
             columnClassName = Utils.joinWithSpaces(columnClassName, "col-md-6");
         }
-        var rowClassName = Utils.joinWithSpaces(domProps.className, "row", gutterSize && "mx-n" + this.props.gutterSize, alignItems && "align-items-" + this.props.alignItems);
+        var rowClassName = Utils.joinWithSpaces(domProps.className, "row", gutterSize && (isBsPre5 ? "mx-n" : "gx-") + this.props.gutterSize, alignItems && "align-items-" + this.props.alignItems);
         var containerStyle = domProps.style;
         var columnStyle = undefined;
         if (withGaps && !verticalSpace) {

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

@@ -8,6 +8,8 @@ export interface IconStyle {
     solid?: boolean;
     /** How thin / thick the icon lines are. Only supported by material symbols. */
     weight?: number;
+    /** Specific font size. Any valid css font size. */
+    size?: string;
 }
 export interface IIconFactory {
     /**

package/dist/ReactComponents/Icons/IconFactory.js

@@ -27,6 +27,7 @@ var IconFactory = /** @class */ (function () {
     };
     IconFactory.prototype.mapStringToIcon = function (iconName, style) {
         var className = Utils.getFontAwesomeClass(iconName);
+        var inlineStyle = undefined;
         if ((style === null || style === void 0 ? void 0 : style.solid) === false) {
             className = className.replace("fa ", "far ");
         }
@@ -39,7 +40,10 @@ var IconFactory = /** @class */ (function () {
         if (style === null || style === void 0 ? void 0 : style.spin) {
             className += " fa-spin";
         }
-        return React.createElement("i", { className: className });
+        if (style === null || style === void 0 ? void 0 : style.size) {
+            inlineStyle = { fontSize: style.size };
+        }
+        return React.createElement("i", { className: className, style: inlineStyle });
     };
     IconFactory.prototype.createIconComponent = function (iconDescriptor, style) {
         return iconDescriptor;

package/dist/ReactComponents/Icons/MaterialSymbolsFontFactory.js

@@ -40,7 +40,8 @@ var MaterialSymbolsFontFactory = /** @class */ (function (_super) {
         if (faProps.isSolid !== undefined) {
             isFilled = faProps.isSolid;
         }
-        var mappedName = this.mapFontAwesomeToMaterial(iconName);
+        var underscoreIndex = iconName.indexOf("_");
+        var mappedName = underscoreIndex === 0 ? iconName.substring(1) : underscoreIndex >= 0 ? iconName : this.mapFontAwesomeToMaterial(iconName);
         if (mappedName === undefined) {
             // replace common differences.
             mappedName = iconName.replace(/-/g, "_")
@@ -61,6 +62,10 @@ var MaterialSymbolsFontFactory = /** @class */ (function (_super) {
             }
             cssStyle = { fontVariationSettings: styleText.trim() };
         }
+        if (style === null || style === void 0 ? void 0 : style.size) {
+            cssStyle !== null && cssStyle !== void 0 ? cssStyle : (cssStyle = {});
+            cssStyle.fontSize = style.size;
+        }
         return React.createElement("span", { className: className, style: cssStyle }, mappedName);
     };
     MaterialSymbolsFontFactory.prototype.mapFontAwesomeToMaterial = function (faName) {

package/dist/ReactComponents/Input.js

@@ -8,6 +8,7 @@ import ComponentBase from './ComponentBase';
 import { FormContext } from './FormContext';
 import { Button } from './_Exports';
 import { makeObservable, observable } from 'mobx';
+import BootstrapUtils from "./BootstrapUtils";
 var Input = /** @class */ (function (_super) {
     __extends(Input, _super);
     function Input(props) {
@@ -66,9 +67,10 @@ var Input = /** @class */ (function (_super) {
         var displayInfo = this.props.bind.validator.getDisplayState(this.context.validationDisplayMode);
         displayInfo.applyToDom(domProps, !splitProps.inGroup);
         var bindValue = this.props.bind.value;
+        var isBsPre5 = BootstrapUtils.isPre5;
         if (this.type === "checkbox" || this.type === "switch") {
             domProps.checked = bindValue === true;
-            domProps.className = " custom-control-input";
+            domProps.className = isBsPre5 ? "custom-control-input" : "form-check-input";
             // Bootstrap custom checkboxes don't honour the readonly attribute.
             if (domProps.readOnly) {
                 domProps.disabled = true;
@@ -94,9 +96,12 @@ var Input = /** @class */ (function (_super) {
             inputElement = React.createElement("textarea", __assign({}, domProps, { ref: this.domRef, rows: inputProps.rows }));
         }
         if (this.type === "checkbox") {
-            inputElement = React.createElement("div", { className: "custom-control custom-" + ((inputProps === null || inputProps === void 0 ? void 0 : inputProps.type) === "switch" ? "switch" : "checkbox") },
+            var wrapperClassName = isBsPre5 ?
+                "custom-control custom-".concat((inputProps === null || inputProps === void 0 ? void 0 : inputProps.type) === "switch" ? "switch" : "checkbox") :
+                "form-check".concat((inputProps === null || inputProps === void 0 ? void 0 : inputProps.type) === "switch" ? " form-switch" : "");
+            inputElement = React.createElement("div", { className: wrapperClassName },
                 inputElement,
-                React.createElement("label", { htmlFor: domProps.id, className: "custom-control-label" }, (inputProps.label ? inputProps.label : "")));
+                React.createElement("label", { htmlFor: domProps.id, className: isBsPre5 ? "custom-control-label" : "form-check-label" }, (inputProps.label ? inputProps.label : "")));
         }
         if (showPasswordButton) {
             var buttonOptions = { variant: "primary", isOutline: true };
@@ -107,7 +112,7 @@ var Input = /** @class */ (function (_super) {
             splitProps.editor.append = this.props.bind.value ?
                 React.createElement(Button, __assign({ size: "sm" }, buttonOptions, { icon: !this.showPassword ? "far-eye fa-fw" : "far-eye-slash fa-fw", onClick: function () { return _this.showPassword = !_this.showPassword; } })) : null;
         }
-        return (InputHelpers.surroundWithInputGroup(inputElement, splitProps.editor, this.domRef));
+        return (InputHelpers.surroundWithInputGroup(inputElement, splitProps.editor, domProps, this.domRef));
     };
     Input.contextType = FormContext;
     __decorate([

package/dist/ReactComponents/InputHelpers.d.ts

@@ -2,5 +2,6 @@ import * as React from 'react';
 import { ICommonEditorProps } from './PropTypes';
 export declare class InputHelpers {
     private static iconFactory?;
-    static surroundWithInputGroup<T extends React.ReactNode>(element: T, props: ICommonEditorProps, inputRef?: React.RefObject<HTMLElement>): React.JSX.Element | T;
+    static surroundWithInputGroup<T extends React.ReactNode>(element: T, props: ICommonEditorProps, domProps: React.HTMLProps<HTMLElement>, inputRef?: React.RefObject<HTMLElement>): React.JSX.Element | T;
+    private static getElement;
 }

package/dist/ReactComponents/InputHelpers.js

@@ -1,29 +1,36 @@
 import * as React from 'react';
 import { Misc } from '@singularsystems/neo-core';
 import { NeoReactTypes } from '../Modules/Types';
+import BootstrapUtils from "./BootstrapUtils";
 var InputHelpers = /** @class */ (function () {
     function InputHelpers() {
     }
-    InputHelpers.surroundWithInputGroup = function (element, props, inputRef) {
+    InputHelpers.surroundWithInputGroup = function (element, props, domProps, inputRef) {
         if (!this.iconFactory) {
             this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
         }
         if (props.requiresGroup) {
-            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", onClick: function () { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }, this.iconFactory.textOrIcon(props.prependText))),
+            var isBsPre5 = BootstrapUtils.isPre5, isDisabled = domProps.disabled || domProps.readOnly;
+            return (React.createElement("div", { className: "input-group" + (isDisabled ? " input-group-disabled" : "") },
+                this.getElement(isBsPre5, "input-group-prepend", inputRef, props.prependText, props.prependIcon, props.prepend),
                 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", onClick: function () { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }, this.iconFactory.textOrIcon(props.appendText)))));
+                this.getElement(isBsPre5, "input-group-append", inputRef, props.appendText, props.appendIcon, props.append)));
         }
         else {
             return element;
         }
     };
+    InputHelpers.getElement = function (isBsPre5, className, inputRef, text, icon, element) {
+        if (!text && !icon && !element) {
+            return undefined;
+        }
+        var innerElement = element ?
+            (element instanceof Function ? element() : element) :
+            React.createElement("span", { className: "input-group-text", onClick: function () { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }, text ? this.iconFactory.textOrIcon(text) : this.iconFactory.getIconComponent(icon));
+        return isBsPre5 ?
+            React.createElement("div", { className: className }, innerElement) :
+            innerElement;
+    };
     return InputHelpers;
 }());
 export { InputHelpers };

package/dist/ReactComponents/Modal/Modal.js

@@ -6,6 +6,7 @@ import Button from '../Button';
 import { Settings } from '@singularsystems/neo-core/dist/Settings';
 import { Neo } from '../..';
 import { observer } from 'mobx-react';
+import BootstrapUtils from "../BootstrapUtils";
 var Modal = /** @class */ (function (_super) {
     __extends(Modal, _super);
     function Modal() {
@@ -104,9 +105,10 @@ var Modal = /** @class */ (function (_super) {
         }
         var content = this.visible && React.createElement(React.Fragment, null,
             React.createElement("div", { className: "modal-body" }, this.props.children instanceof Function ? (show ? this.props.children(this.lastBindValue) : (renderOnCollapse ? this.props.children(this.lastBindValue) : undefined)) : this.props.children),
-            React.createElement("div", { className: "modal-footer" }, footer ? footer : React.createElement(React.Fragment, null,
-                footerContent && React.createElement("div", { className: "modal-footer-content" }, footerContent),
-                buttons.map(function (buttonProps, index) { return React.createElement(Button, __assign({ key: index }, buttonProps)); }))));
+            (buttons.length > 0 || footerContent || footer) &&
+                React.createElement("div", { className: "modal-footer" }, footer ? footer : React.createElement(React.Fragment, null,
+                    footerContent && React.createElement("div", { className: "modal-footer-content" }, footerContent),
+                    buttons.map(function (buttonProps, index) { return React.createElement(Button, __assign({ key: index }, buttonProps)); }))));
         var container;
         if (suppressForm) {
             container = React.createElement(React.Fragment, null, content);
@@ -120,9 +122,7 @@ var Modal = /** @class */ (function (_super) {
                     React.createElement("div", { className: "modal-content" },
                         React.createElement("div", { className: "modal-header" },
                             React.createElement("h5", { className: "modal-title" }, this.props.title),
-                            this.props.showCancelButton !== false &&
-                                React.createElement("button", { type: "button", className: "close", "aria-label": "Close", onClick: onClose },
-                                    React.createElement("span", { "aria-hidden": "true" }, "\u00D7"))),
+                            this.props.showCancelButton !== false && BootstrapUtils.getCloseButton(onClose)),
                         container))));
     };
     Modal = __decorate([

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

@@ -1,7 +1,11 @@
 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>> {
+interface IAlertProps {
+    isOutline?: boolean;
+}
+export default class Alert extends CollapsableBase<Components.INotificationOptions & IAlertProps & React.HTMLProps<HTMLDivElement>> {
     private iconFactory;
     render(): React.JSX.Element;
 }
+export {};

package/dist/ReactComponents/Notifications/Alert.js

@@ -4,6 +4,7 @@ import { Misc, Utils } from "@singularsystems/neo-core";
 import { observer } from 'mobx-react';
 import CollapsableBase from '../CollapsableBase';
 import { NeoReactTypes } from "../../Modules/Types";
+import BootstrapUtils from "../BootstrapUtils";
 var Alert = /** @class */ (function (_super) {
     __extends(Alert, _super);
     function Alert() {
@@ -12,8 +13,8 @@ var Alert = /** @class */ (function (_super) {
         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"]);
-        var className = Utils.joinWithSpaces(native.className, "alert", "alert-" + variant, "collapsable");
+        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, isOutline = _a.isOutline, native = __rest(_a, ["variant", "heading", "show", "bindShow", "autoCloseTimeout", "animateInitial", "state", "onHidden", "refreshValue", "icon", "isOutline"]);
+        var className = Utils.joinWithSpaces(native.className, "alert", "alert-" + variant, "collapsable" + (isOutline ? " alert-outline" : ""));
         if (bindShow) {
             className += " alert-dismissible";
         }
@@ -26,9 +27,7 @@ var Alert = /** @class */ (function (_super) {
                     this.iconFactory.getIconComponent(icon),
                     React.createElement("div", null, this.props.children)),
             !icon && this.props.children,
-            bindShow &&
-                React.createElement("button", { type: "button", className: "close", onClick: this.onClose },
-                    React.createElement("span", null, "\u00D7"))));
+            bindShow && BootstrapUtils.getCloseButton(this.onClose)));
     };
     Alert = __decorate([
         observer

package/dist/ReactComponents/Notifications/Toast.js

@@ -4,6 +4,7 @@ import CollapsableBase from '../CollapsableBase';
 import { observer } from 'mobx-react';
 import { Components, Misc } from '@singularsystems/neo-core';
 import { NeoReactTypes } from '../../Modules/Types';
+import BootstrapUtils from "../BootstrapUtils";
 var Toast = /** @class */ (function (_super) {
     __extends(Toast, _super);
     function Toast() {
@@ -29,9 +30,8 @@ var Toast = /** @class */ (function (_super) {
         this.shouldShow = show !== false && (!bindShow || bindShow.value);
         return (React.createElement("div", { className: "toast show collapsable", role: "alert", "aria-live": "assertive", "aria-atomic": "true", ref: this.containerRef },
             React.createElement("div", { className: "toast-header toast-header-" + variant },
-                React.createElement("strong", { className: "mr-auto alert-heading" }, heading),
-                bindShow && React.createElement("button", { type: "button", className: "ml-2 mb-1 close", "data-dismiss": "toast", "aria-label": "Close", onClick: this.onClose },
-                    React.createElement("span", { "aria-hidden": "true" }, "\u00D7"))),
+                React.createElement("strong", { className: "".concat(BootstrapUtils.marginE, "-auto alert-heading") }, heading),
+                bindShow && BootstrapUtils.getCloseButton(this.onClose, "ml-2 mb-1")),
             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" },

package/dist/ReactComponents/NumberInput.js

@@ -246,7 +246,7 @@ var NumberInput = /** @class */ (function (_super) {
             var decimals = NumberUtils.getDecimalPlaces(this.formatState.formatString);
             domProps.step = decimals === 0 ? "1" : "0.".concat("0".repeat(decimals - 1), "1");
         }
-        return (InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({}, domProps, { defaultValue: this.formatState.getFormattedValue(editorProps.bind.value), type: useNative ? "number" : "text", onChange: this.onChanged, ref: this.inputElement })), editorProps, this.inputElement));
+        return (InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({}, domProps, { defaultValue: this.formatState.getFormattedValue(editorProps.bind.value), type: useNative ? "number" : "text", onChange: this.onChanged, ref: this.inputElement })), editorProps, domProps, this.inputElement));
     };
     NumberInput.contextType = FormContext;
     NumberInput = __decorate([

package/dist/ReactComponents/PropTypes.d.ts

@@ -42,6 +42,10 @@ export interface ICommonEditorProps {
     prepend?: (() => JSX.Element) | JSX.Element | null;
     /** Additional element to include after the input element */
     append?: (() => JSX.Element) | JSX.Element | null;
+    /** Icon name or component */
+    prependIcon?: any;
+    /** Icon name or component */
+    appendIcon?: any;
     /** True if append / prepend is set, which means this must be an editor as part of a bs editor group. */
     requiresGroup?: boolean;
     /** Reference to the input dom element */
@@ -137,7 +141,7 @@ export declare class BindPropsHelper {
     static getBindProperty<T>(allProps: IEditorContainerProps<T, any>): Model.IPropertyInstance;
     static splitCommonEditorProps<T extends ICommonEditorProps>(props: T): {
         editor: ICommonEditorProps;
-        rest: Omit<T, "append" | "prepend" | "disabled" | "readOnly" | "isDisabled" | "isReadOnly" | "prependText" | "appendText" | "inputElement">;
+        rest: Omit<T, "append" | "prepend" | "disabled" | "readOnly" | "isDisabled" | "isReadOnly" | "prependText" | "appendText" | "prependIcon" | "appendIcon" | "inputElement">;
     };
     static normaliseContainerProps<T, TContainerDom = React.HTMLProps<T>, TData = any>(component: IComponentBase, props: IEditorContainerProps<T, TData>, inGroup: boolean, isBootstrap?: boolean): IEditorContainerNormalisedProps<TContainerDom, TData>;
     static normaliseEditorProps<T, TDom = React.HTMLProps<T>>(component: IComponentBase, props: (IEditorAndSelectorProps<T, any> & TDom) | IEditorNormalisedProps<TDom, any>): IEditorNormalisedProps<TDom, any>;

package/dist/ReactComponents/PropTypes.js

@@ -102,16 +102,18 @@ var BindPropsHelper = /** @class */ (function () {
         return (allProps.bind || allProps.display || allProps.bindContext);
     };
     BindPropsHelper.splitCommonEditorProps = function (props) {
-        var isReadOnly = props.isReadOnly, readOnly = props.readOnly, isDisabled = props.isDisabled, disabled = props.disabled, prependText = props.prependText, prepend = props.prepend, appendText = props.appendText, append = props.append, inputElement = props.inputElement, rest = __rest(props, ["isReadOnly", "readOnly", "isDisabled", "disabled", "prependText", "prepend", "appendText", "append", "inputElement"]);
+        var isReadOnly = props.isReadOnly, readOnly = props.readOnly, isDisabled = props.isDisabled, disabled = props.disabled, prependText = props.prependText, prepend = props.prepend, prependIcon = props.prependIcon, appendText = props.appendText, append = props.append, appendIcon = props.appendIcon, inputElement = props.inputElement, rest = __rest(props, ["isReadOnly", "readOnly", "isDisabled", "disabled", "prependText", "prepend", "prependIcon", "appendText", "append", "appendIcon", "inputElement"]);
         return {
             editor: {
                 isReadOnly: (isReadOnly !== null && isReadOnly !== void 0 ? isReadOnly : readOnly), isDisabled: (isDisabled !== null && isDisabled !== void 0 ? isDisabled : disabled),
                 prependText: prependText,
                 prepend: prepend,
+                prependIcon: prependIcon,
                 appendText: appendText,
                 append: append,
+                appendIcon: appendIcon,
                 inputElement: inputElement,
-                requiresGroup: prependText !== undefined || prepend !== undefined || appendText !== undefined || append !== undefined
+                requiresGroup: prependText !== undefined || prepend !== undefined || prependIcon !== undefined || appendText !== undefined || append !== undefined || appendIcon !== undefined
             },
             rest: rest
         };

package/dist/ReactComponents/RadioList.js

@@ -6,6 +6,7 @@ import { BindPropsHelper } from './PropTypes';
 import ComponentBase from './ComponentBase';
 import { FormContext } from './FormContext';
 import LookupHelper from './DropDown/LookupHelper';
+import BootstrapUtils from "./BootstrapUtils";
 var RadioList = /** @class */ (function (_super) {
     __extends(RadioList, _super);
     function RadioList() {
@@ -41,13 +42,14 @@ var RadioList = /** @class */ (function (_super) {
         // TODO, how must validation show if not in form group?
         //const displayInfo = this.props.bind.validator.getDisplayState(this.context.validationDisplayMode);
         //displayInfo.applyToDom(domProps, !splitProps.inGroup);
+        var isBsPre5 = BootstrapUtils.isPre5, prefix = isBsPre5 ? "custom-control" : "form-check";
         var bindValue = this.props.bind.value;
         var className = Utils.joinWithSpaces("neo-radio-list", (_a = splitProps.editorDom) === null || _a === void 0 ? void 0 : _a.className);
         return React.createElement("div", { className: className }, this.items.map(function (item) {
             var _a, _b;
-            return React.createElement("div", { className: "custom-control custom-radio " + (_this.props.radioList.inline ? "custom-control-inline" : "custom-control"), key: item.id },
-                React.createElement("input", { type: "radio", id: splitProps.uniqueID + ((_a = item.id) !== null && _a !== void 0 ? _a : ""), name: splitProps.uniqueID, checked: bindValue === item.id, disabled: domProps.disabled || domProps.readOnly, onChange: function () { return _this.props.bind.value = item.id; }, className: "custom-control-input" }),
-                React.createElement("label", { className: "custom-control-label", htmlFor: splitProps.uniqueID + ((_b = item.id) !== null && _b !== void 0 ? _b : "") }, item.name));
+            return React.createElement("div", { className: "custom-radio " + prefix + (_this.props.radioList.inline ? " ".concat(prefix, "-inline") : ""), key: item.id },
+                React.createElement("input", { type: "radio", id: splitProps.uniqueID + ((_a = item.id) !== null && _a !== void 0 ? _a : ""), name: splitProps.uniqueID, checked: bindValue === item.id, disabled: domProps.disabled || domProps.readOnly, onChange: function () { return _this.props.bind.value = item.id; }, className: "".concat(prefix, "-input") }),
+                React.createElement("label", { className: "".concat(prefix, "-label"), htmlFor: splitProps.uniqueID + ((_b = item.id) !== null && _b !== void 0 ? _b : "") }, item.name));
         }));
     };
     RadioList.contextType = FormContext;

package/dist/ReactComponents/_Exports.d.ts

@@ -1,5 +1,6 @@
 import Alert from './Notifications/Alert';
 import AutoCompleteDropDown from './DropDown/AutoCompleteDropDown';
+import Badge from './Badge';
 import Button from './Button';
 import Card from './Card';
 import Collapsable from './Collapsable';
@@ -39,4 +40,4 @@ import ToastContainer from './Notifications/ToastContainer';
 import Tooltip from './Tooltip';
 import TooltipProvider from './TooltipProvider';
 import ValidationSummary from './ValidationSummary';
-export { Alert, AutoCompleteDropDown, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Icon, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };
+export { Alert, AutoCompleteDropDown, Badge, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Icon, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };

package/dist/ReactComponents/_Exports.js

@@ -1,5 +1,6 @@
 import Alert from './Notifications/Alert';
 import AutoCompleteDropDown from './DropDown/AutoCompleteDropDown';
+import Badge from './Badge';
 import Button from './Button';
 import Card from './Card';
 import Collapsable from './Collapsable';
@@ -39,4 +40,4 @@ import ToastContainer from './Notifications/ToastContainer';
 import Tooltip from './Tooltip';
 import TooltipProvider from './TooltipProvider';
 import ValidationSummary from './ValidationSummary';
-export { Alert, AutoCompleteDropDown, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Icon, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };
+export { Alert, AutoCompleteDropDown, Badge, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Icon, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,7 +31,7 @@
     "typescript": "5.4.2"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "1.0.1",
+    "@singularsystems/neo-core": "1.0.2",
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "axios": "1.6.7",
@@ -49,7 +49,7 @@
     "tslib": "2.5.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=1.0.1",
+    "@singularsystems/neo-core": ">=1.0.2",
     "axios": ">=1.6.2",
     "inversify": ">=5.0.1",
     "mobx": ">=6.9.0",

package/styles/Badge.scss

@@ -0,0 +1,8 @@
+div.badge {
+  &.badge-lg {
+    padding: 5px 10px;
+    min-width: 100px;
+    font-size: 0.8rem;
+    width: fit-content;
+  }
+}

package/styles/Neo.scss

@@ -1,3 +1,4 @@
+@import './Badge.scss';
 @import './Button.scss';
 @import './Card.scss';
 @import './ColorPicker.scss';