@singularsystems/neo-react 1.0.0-alpha.3 → 1.0.0-beta.1

package/dist/ReactComponents/Input.js

@@ -1,153 +1,153 @@
-import { __assign, __decorate, __extends, __metadata } from "tslib";
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import { BindPropsHelper } from './PropTypes';
-import { InputHelpers } from './InputHelpers';
-import { Misc, Utils } from '@singularsystems/neo-core';
-import ComponentBase from './ComponentBase';
-import { FormContext } from './FormContext';
-import { Button } from './_Exports';
-import { makeObservable, observable } from 'mobx';
-var Input = /** @class */ (function (_super) {
-    __extends(Input, _super);
-    function Input(props) {
-        var _this = _super.call(this, props) || this;
-        _this.domRef = React.createRef();
-        _this.showPassword = false;
-        _this.onChanged = _this.onChanged.bind(_this);
-        makeObservable(_this);
-        return _this;
-    }
-    Input.prototype.determineType = function () {
-        var type = null;
-        if (this.baseType) {
-            type = this.baseType;
-        }
-        if (!type && this.props.input) {
-            if (this.props.input.showPasswordButton) {
-                type = this.showPassword ? "text" : "password";
-            }
-            else if (this.props.input.type) {
-                type = this.props.input.type;
-            }
-        }
-        if (!type) {
-            if (typeof this.props.bind.value === "boolean" || this.props.bind.propertyInfo.propertyType === Misc.DataType.NullableBoolean) {
-                type = "checkbox";
-            }
-            else {
-                type = "text";
-            }
-        }
-        return type;
-    };
-    Input.prototype.afterRender = function () {
-        if (this.domRef.current && this.type === "checkbox") {
-            this.domRef.current.indeterminate = this.props.bind.value === null;
-        }
-    };
-    Input.prototype.onChanged = function (e) {
-        if (this.props.bind.propertyInfo.propertyType === Misc.DataType.NullableBoolean) {
-            if (e.target.checked && this.props.bind.value === false) {
-                this.props.bind.value = null;
-                return;
-            }
-        }
-        this.props.bind.value = this.type == "checkbox" ? e.target.checked : e.target.value;
-    };
-    Input.prototype.render = function () {
-        var _this = this;
-        var _a;
-        this.type = this.determineType();
-        var splitProps = BindPropsHelper.normaliseEditorProps(this, this.props);
-        var domProps = BindPropsHelper.autoSetDomProperties(splitProps, this.context);
-        var inputProps = (_a = splitProps.input) !== null && _a !== void 0 ? _a : {};
-        var showPasswordButton = inputProps === null || inputProps === void 0 ? void 0 : inputProps.showPasswordButton;
-        var displayInfo = this.props.bind.validator.getDisplayState(this.context.validationDisplayMode);
-        displayInfo.applyToDom(domProps, !splitProps.inGroup);
-        var bindValue = this.props.bind.value;
-        if (this.type === "checkbox" || this.type === "switch") {
-            domProps.checked = bindValue === true;
-            domProps.className = " custom-control-input";
-            // Bootstrap custom checkboxes don't honour the readonly attribute.
-            if (domProps.readOnly) {
-                domProps.disabled = true;
-            }
-            if (this.props.label) {
-                inputProps.label = this.props.label;
-            }
-            this.type = "checkbox";
-        }
-        else {
-            domProps.value = (bindValue === undefined || bindValue === null) ? "" : bindValue;
-            domProps.className = Utils.joinWithSpaces(domProps.className, splitProps.isBootstrap ? "form-control" : "neo-forms-editor");
-        }
-        var isInput = (!inputProps.rows || inputProps.rows == 1);
-        domProps.onChange = this.onChanged;
-        var inputElement;
-        if (splitProps.editor.inputElement)
-            this.domRef = splitProps.editor.inputElement;
-        if (isInput) {
-            inputElement = React.createElement("input", __assign({}, domProps, { ref: this.domRef, type: this.type }));
-        }
-        else {
-            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") },
-                inputElement,
-                React.createElement("label", { htmlFor: domProps.id, className: "custom-control-label" }, (inputProps.label ? inputProps.label : "")));
-        }
-        if (showPasswordButton) {
-            var buttonOptions = { variant: "primary", isOutline: true };
-            if (typeof showPasswordButton === "object") {
-                buttonOptions = showPasswordButton;
-            }
-            splitProps.editor.requiresGroup = true;
-            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));
-    };
-    Input.contextType = FormContext;
-    __decorate([
-        observable.ref,
-        __metadata("design:type", Object)
-    ], Input.prototype, "showPassword", void 0);
-    Input = __decorate([
-        observer,
-        __metadata("design:paramtypes", [Object])
-    ], Input);
-    return Input;
-}(ComponentBase));
-export default Input;
-var Textbox = /** @class */ (function (_super) {
-    __extends(Textbox, _super);
-    function Textbox(props) {
-        var _this = _super.call(this, props) || this;
-        _this.baseType = "text";
-        return _this;
-    }
-    return Textbox;
-}(Input));
-export { Textbox };
-var Passwordbox = /** @class */ (function (_super) {
-    __extends(Passwordbox, _super);
-    function Passwordbox(props) {
-        var _this = _super.call(this, props) || this;
-        _this.baseType = "password";
-        return _this;
-    }
-    return Passwordbox;
-}(Input));
-export { Passwordbox };
-var Checkbox = /** @class */ (function (_super) {
-    __extends(Checkbox, _super);
-    function Checkbox(props) {
-        var _this = _super.call(this, props) || this;
-        _this.baseType = "checkbox";
-        return _this;
-    }
-    return Checkbox;
-}(Input));
-export { Checkbox };
+import { __assign, __decorate, __extends, __metadata } from "tslib";
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { BindPropsHelper } from './PropTypes';
+import { InputHelpers } from './InputHelpers';
+import { Misc, Utils } from '@singularsystems/neo-core';
+import ComponentBase from './ComponentBase';
+import { FormContext } from './FormContext';
+import { Button } from './_Exports';
+import { makeObservable, observable } from 'mobx';
+var Input = /** @class */ (function (_super) {
+    __extends(Input, _super);
+    function Input(props) {
+        var _this = _super.call(this, props) || this;
+        _this.domRef = React.createRef();
+        _this.showPassword = false;
+        _this.onChanged = _this.onChanged.bind(_this);
+        makeObservable(_this);
+        return _this;
+    }
+    Input.prototype.determineType = function () {
+        var type = null;
+        if (this.baseType) {
+            type = this.baseType;
+        }
+        if (!type && this.props.input) {
+            if (this.props.input.showPasswordButton) {
+                type = this.showPassword ? "text" : "password";
+            }
+            else if (this.props.input.type) {
+                type = this.props.input.type;
+            }
+        }
+        if (!type) {
+            if (typeof this.props.bind.value === "boolean" || this.props.bind.propertyInfo.propertyType === Misc.DataType.NullableBoolean) {
+                type = "checkbox";
+            }
+            else {
+                type = "text";
+            }
+        }
+        return type;
+    };
+    Input.prototype.afterRender = function () {
+        if (this.domRef.current && this.type === "checkbox") {
+            this.domRef.current.indeterminate = this.props.bind.value === null;
+        }
+    };
+    Input.prototype.onChanged = function (e) {
+        if (this.props.bind.propertyInfo.propertyType === Misc.DataType.NullableBoolean) {
+            if (e.target.checked && this.props.bind.value === false) {
+                this.props.bind.value = null;
+                return;
+            }
+        }
+        this.props.bind.value = this.type == "checkbox" ? e.target.checked : e.target.value;
+    };
+    Input.prototype.render = function () {
+        var _this = this;
+        var _a;
+        this.type = this.determineType();
+        var splitProps = BindPropsHelper.normaliseEditorProps(this, this.props);
+        var domProps = BindPropsHelper.autoSetDomProperties(splitProps, this.context);
+        var inputProps = (_a = splitProps.input) !== null && _a !== void 0 ? _a : {};
+        var showPasswordButton = inputProps === null || inputProps === void 0 ? void 0 : inputProps.showPasswordButton;
+        var displayInfo = this.props.bind.validator.getDisplayState(this.context.validationDisplayMode);
+        displayInfo.applyToDom(domProps, !splitProps.inGroup);
+        var bindValue = this.props.bind.value;
+        if (this.type === "checkbox" || this.type === "switch") {
+            domProps.checked = bindValue === true;
+            domProps.className = " custom-control-input";
+            // Bootstrap custom checkboxes don't honour the readonly attribute.
+            if (domProps.readOnly) {
+                domProps.disabled = true;
+            }
+            if (this.props.label) {
+                inputProps.label = this.props.label;
+            }
+            this.type = "checkbox";
+        }
+        else {
+            domProps.value = (bindValue === undefined || bindValue === null) ? "" : bindValue;
+            domProps.className = Utils.joinWithSpaces(domProps.className, splitProps.isBootstrap ? "form-control" : "neo-forms-editor");
+        }
+        var isInput = (!inputProps.rows || inputProps.rows == 1);
+        domProps.onChange = this.onChanged;
+        var inputElement;
+        if (splitProps.editor.inputElement)
+            this.domRef = splitProps.editor.inputElement;
+        if (isInput) {
+            inputElement = React.createElement("input", __assign({}, domProps, { ref: this.domRef, type: this.type }));
+        }
+        else {
+            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") },
+                inputElement,
+                React.createElement("label", { htmlFor: domProps.id, className: "custom-control-label" }, (inputProps.label ? inputProps.label : "")));
+        }
+        if (showPasswordButton) {
+            var buttonOptions = { variant: "primary", isOutline: true };
+            if (typeof showPasswordButton === "object") {
+                buttonOptions = showPasswordButton;
+            }
+            splitProps.editor.requiresGroup = true;
+            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));
+    };
+    Input.contextType = FormContext;
+    __decorate([
+        observable.ref,
+        __metadata("design:type", Object)
+    ], Input.prototype, "showPassword", void 0);
+    Input = __decorate([
+        observer,
+        __metadata("design:paramtypes", [Object])
+    ], Input);
+    return Input;
+}(ComponentBase));
+export default Input;
+var Textbox = /** @class */ (function (_super) {
+    __extends(Textbox, _super);
+    function Textbox(props) {
+        var _this = _super.call(this, props) || this;
+        _this.baseType = "text";
+        return _this;
+    }
+    return Textbox;
+}(Input));
+export { Textbox };
+var Passwordbox = /** @class */ (function (_super) {
+    __extends(Passwordbox, _super);
+    function Passwordbox(props) {
+        var _this = _super.call(this, props) || this;
+        _this.baseType = "password";
+        return _this;
+    }
+    return Passwordbox;
+}(Input));
+export { Passwordbox };
+var Checkbox = /** @class */ (function (_super) {
+    __extends(Checkbox, _super);
+    function Checkbox(props) {
+        var _this = _super.call(this, props) || this;
+        _this.baseType = "checkbox";
+        return _this;
+    }
+    return Checkbox;
+}(Input));
+export { Checkbox };

package/dist/ReactComponents/InputHelpers.d.ts

@@ -1,5 +1,6 @@
-import * as React from 'react';
-import { ICommonEditorProps } from './PropTypes';
-export declare class InputHelpers {
-    static surroundWithInputGroup<T extends React.ReactNode>(element: T, props: ICommonEditorProps): JSX.Element | T;
-}
+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>): JSX.Element | T;
+}

package/dist/ReactComponents/InputHelpers.js

@@ -1,33 +1,29 @@
-import * as React from 'react';
-import { Utils } from '@singularsystems/neo-core';
-var InputHelpers = /** @class */ (function () {
-    function InputHelpers() {
-    }
-    InputHelpers.surroundWithInputGroup = function (element, props) {
-        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)),
-                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))));
-        }
-        else {
-            return element;
-        }
-    };
-    return InputHelpers;
-}());
-export { InputHelpers };
+import * as React from 'react';
+import { Misc } from '@singularsystems/neo-core';
+import { NeoReactTypes } from '../Modules/Types';
+var InputHelpers = /** @class */ (function () {
+    function InputHelpers() {
+    }
+    InputHelpers.surroundWithInputGroup = function (element, props, 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))),
+                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)))));
+        }
+        else {
+            return element;
+        }
+    };
+    return InputHelpers;
+}());
+export { InputHelpers };

package/dist/ReactComponents/Link.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-interface ILinkProps extends React.HTMLProps<HTMLAnchorElement> {
-}
-/**
- * Renders an anchor tag with an href of '/' unless otherwise specified.
- * The onClick event will call preventDefault() so that the anchor acts like a button instead of a link to a url.
- */
-export default class Link extends React.Component<ILinkProps> {
-    constructor(props: ILinkProps);
-    private onClick;
-    render(): JSX.Element;
-}
-export {};
+import React from 'react';
+interface ILinkProps extends React.HTMLProps<HTMLAnchorElement> {
+}
+/**
+ * Renders an anchor tag with an href of '/' unless otherwise specified.
+ * The onClick event will call preventDefault() so that the anchor acts like a button instead of a link to a url.
+ */
+export default class Link extends React.Component<ILinkProps> {
+    constructor(props: ILinkProps);
+    private onClick;
+    render(): JSX.Element;
+}
+export {};

package/dist/ReactComponents/Link.js

@@ -1,28 +1,28 @@
-import { __assign, __extends } from "tslib";
-import React from 'react';
-/**
- * Renders an anchor tag with an href of '/' unless otherwise specified.
- * The onClick event will call preventDefault() so that the anchor acts like a button instead of a link to a url.
- */
-var Link = /** @class */ (function (_super) {
-    __extends(Link, _super);
-    function Link(props) {
-        var _this = _super.call(this, props) || this;
-        _this.onClick = _this.onClick.bind(_this);
-        return _this;
-    }
-    Link.prototype.onClick = function (e) {
-        e.preventDefault();
-        if (this.props.onClick) {
-            this.props.onClick(e);
-        }
-    };
-    Link.prototype.render = function () {
-        var _a;
-        var props = this.props;
-        var href = (_a = props.href) !== null && _a !== void 0 ? _a : "/";
-        return React.createElement("a", __assign({}, props, { href: href, onClick: this.onClick }), this.props.children);
-    };
-    return Link;
-}(React.Component));
-export default Link;
+import { __assign, __extends } from "tslib";
+import React from 'react';
+/**
+ * Renders an anchor tag with an href of '/' unless otherwise specified.
+ * The onClick event will call preventDefault() so that the anchor acts like a button instead of a link to a url.
+ */
+var Link = /** @class */ (function (_super) {
+    __extends(Link, _super);
+    function Link(props) {
+        var _this = _super.call(this, props) || this;
+        _this.onClick = _this.onClick.bind(_this);
+        return _this;
+    }
+    Link.prototype.onClick = function (e) {
+        e.preventDefault();
+        if (this.props.onClick) {
+            this.props.onClick(e);
+        }
+    };
+    Link.prototype.render = function () {
+        var _a;
+        var props = this.props;
+        var href = (_a = props.href) !== null && _a !== void 0 ? _a : "/";
+        return React.createElement("a", __assign({}, props, { href: href, onClick: this.onClick }), this.props.children);
+    };
+    return Link;
+}(React.Component));
+export default Link;

package/dist/ReactComponents/Loader.d.ts

@@ -1,18 +1,18 @@
-import React from "react";
-import { ITaskRunner } from '@singularsystems/neo-core';
-import ComponentBase from './ComponentBase';
-interface ILoaderProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    show?: boolean;
-    task?: ITaskRunner;
-    showSpinner?: boolean;
-    /** Set to override the normal size of the spinner. */
-    size?: "small";
-}
-export default class Loader extends ComponentBase<ILoaderProps> {
-    overlayRef: React.RefObject<HTMLDivElement>;
-    isShowing: boolean;
-    hasAnimated: boolean;
-    render(): JSX.Element;
-    afterRender(): void;
-}
-export {};
+import React from "react";
+import { ITaskRunner } from '@singularsystems/neo-core';
+import ComponentBase from './ComponentBase';
+interface ILoaderProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    show?: boolean;
+    task?: ITaskRunner;
+    showSpinner?: boolean;
+    /** Set to override the normal size of the spinner. */
+    size?: "small";
+}
+export default class Loader extends ComponentBase<ILoaderProps> {
+    overlayRef: React.RefObject<HTMLDivElement>;
+    isShowing: boolean;
+    hasAnimated: boolean;
+    render(): JSX.Element;
+    afterRender(): void;
+}
+export {};

package/dist/ReactComponents/Loader.js

@@ -1,57 +1,57 @@
-import { __assign, __decorate, __extends, __rest } from "tslib";
-import React from "react";
-import { observer } from 'mobx-react';
-import { Components, Utils } from '@singularsystems/neo-core';
-import ComponentBase from './ComponentBase';
-var Loader = /** @class */ (function (_super) {
-    __extends(Loader, _super);
-    function Loader() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.overlayRef = React.createRef();
-        _this.isShowing = false;
-        _this.hasAnimated = false;
-        return _this;
-    }
-    Loader.prototype.render = function () {
-        var _a = this.props, show = _a.show, task = _a.task, showSpinner = _a.showSpinner, size = _a.size, native = __rest(_a, ["show", "task", "showSpinner", "size"]);
-        show = show || (task && task.isBusy);
-        var style = {};
-        if (show) {
-            if (!this.isShowing && (!task || !task.progressState.hasAnimated)) {
-                // Start the fade animation the first time this renders
-                this.isShowing = true;
-                this.hasAnimated = false;
-                if (task)
-                    task.progressState.hasAnimated = true;
-                style.opacity = 0;
-            }
-            else {
-                style.opacity = 1;
-            }
-            style.display = "flex";
-        }
-        else {
-            this.isShowing = false;
-            style.display = "none";
-        }
-        native.className = Utils.joinWithSpaces("loader-container", native.className, size);
-        var showInner = showSpinner !== false || (task && task.options.loadingText);
-        return (React.createElement("div", __assign({}, native),
-            this.props.children,
-            React.createElement("div", { className: "loader-overlay", ref: this.overlayRef, style: style }, showInner && React.createElement("div", { className: "loader-inner" },
-                showSpinner !== false && React.createElement("div", { className: "spinner-border" }),
-                React.createElement("span", { className: "loader-text" }, task && task.options.loadingText)))));
-    };
-    Loader.prototype.afterRender = function () {
-        if (this.overlayRef.current && !this.hasAnimated) {
-            this.hasAnimated = true;
-            Components.AnimationHelper.triggerReflow(this.overlayRef.current);
-            this.overlayRef.current.style.opacity = "1";
-        }
-    };
-    Loader = __decorate([
-        observer
-    ], Loader);
-    return Loader;
-}(ComponentBase));
-export default Loader;
+import { __assign, __decorate, __extends, __rest } from "tslib";
+import React from "react";
+import { observer } from 'mobx-react';
+import { Components, Utils } from '@singularsystems/neo-core';
+import ComponentBase from './ComponentBase';
+var Loader = /** @class */ (function (_super) {
+    __extends(Loader, _super);
+    function Loader() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.overlayRef = React.createRef();
+        _this.isShowing = false;
+        _this.hasAnimated = false;
+        return _this;
+    }
+    Loader.prototype.render = function () {
+        var _a = this.props, show = _a.show, task = _a.task, showSpinner = _a.showSpinner, size = _a.size, native = __rest(_a, ["show", "task", "showSpinner", "size"]);
+        show = show || (task && task.isBusy);
+        var style = {};
+        if (show) {
+            if (!this.isShowing && (!task || !task.progressState.hasAnimated)) {
+                // Start the fade animation the first time this renders
+                this.isShowing = true;
+                this.hasAnimated = false;
+                if (task)
+                    task.progressState.hasAnimated = true;
+                style.opacity = 0;
+            }
+            else {
+                style.opacity = 1;
+            }
+            style.display = "flex";
+        }
+        else {
+            this.isShowing = false;
+            style.display = "none";
+        }
+        native.className = Utils.joinWithSpaces("loader-container", native.className, size);
+        var showInner = showSpinner !== false || (task && task.options.loadingText);
+        return (React.createElement("div", __assign({}, native),
+            this.props.children,
+            React.createElement("div", { className: "loader-overlay", ref: this.overlayRef, style: style }, showInner && React.createElement("div", { className: "loader-inner" },
+                showSpinner !== false && React.createElement("div", { className: "spinner-border" }),
+                React.createElement("span", { className: "loader-text" }, task && task.options.loadingText)))));
+    };
+    Loader.prototype.afterRender = function () {
+        if (this.overlayRef.current && !this.hasAnimated) {
+            this.hasAnimated = true;
+            Components.AnimationHelper.triggerReflow(this.overlayRef.current);
+            this.overlayRef.current.style.opacity = "1";
+        }
+    };
+    Loader = __decorate([
+        observer
+    ], Loader);
+    return Loader;
+}(ComponentBase));
+export default Loader;