@singularsystems/neo-react 1.0.0-alpha.2 → 1.0.0-beta.0

package/dist/ReactComponents/GridLayout.js

@@ -1,38 +1,38 @@
-import { __assign, __extends, __rest } from "tslib";
-import React from 'react';
-import { Utils } from '@singularsystems/neo-core';
-var FormGroupLayoutContextParams = /** @class */ (function () {
-    function FormGroupLayoutContextParams() {
-    }
-    return FormGroupLayoutContextParams;
-}());
-export { FormGroupLayoutContextParams };
-export var FormGroupLayoutContext = React.createContext(new FormGroupLayoutContextParams());
-var GridLayout = /** @class */ (function (_super) {
-    __extends(GridLayout, _super);
-    function GridLayout() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    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);
-        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 containerStyle = domProps.style;
-        var columnStyle = undefined;
-        if (withGaps && !verticalSpace) {
-            verticalSpace = "1rem";
-        }
-        if (verticalSpace) {
-            containerStyle = containerStyle || {};
-            containerStyle.marginTop = "-" + verticalSpace;
-            columnStyle = { marginTop: verticalSpace };
-        }
-        return (React.createElement(FormGroupLayoutContext.Provider, { value: { formGroupProps: this.props.formGroupProps } },
-            React.createElement("div", __assign({}, domProps, { className: rowClassName, style: containerStyle }), React.Children.map(this.props.children, function (child) { return (child && React.createElement("div", { className: columnClassName, style: columnStyle }, child)); }))));
-    };
-    return GridLayout;
-}(React.Component));
-export default GridLayout;
+import { __assign, __extends, __rest } from "tslib";
+import React from 'react';
+import { Utils } from '@singularsystems/neo-core';
+var FormGroupLayoutContextParams = /** @class */ (function () {
+    function FormGroupLayoutContextParams() {
+    }
+    return FormGroupLayoutContextParams;
+}());
+export { FormGroupLayoutContextParams };
+export var FormGroupLayoutContext = React.createContext(new FormGroupLayoutContextParams());
+var GridLayout = /** @class */ (function (_super) {
+    __extends(GridLayout, _super);
+    function GridLayout() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    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);
+        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 containerStyle = domProps.style;
+        var columnStyle = undefined;
+        if (withGaps && !verticalSpace) {
+            verticalSpace = "1rem";
+        }
+        if (verticalSpace) {
+            containerStyle = containerStyle || {};
+            containerStyle.marginTop = "-" + verticalSpace;
+            columnStyle = { marginTop: verticalSpace };
+        }
+        return (React.createElement(FormGroupLayoutContext.Provider, { value: { formGroupProps: this.props.formGroupProps } },
+            React.createElement("div", __assign({}, domProps, { className: rowClassName, style: containerStyle }), React.Children.map(this.props.children, function (child) { return (child && React.createElement("div", { className: columnClassName, style: columnStyle }, child)); }))));
+    };
+    return GridLayout;
+}(React.Component));
+export default GridLayout;

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { IconFactory } from "./IconFactory";
+import { IconStyle } from "./IIconFactory";
+interface IconDefinition {
+    iconName: string;
+}
+interface FontAwesomeIconComponentProps {
+    icon: any;
+    fixedWidth?: boolean;
+    spin?: boolean;
+}
+type FontAwesomeComponent = (props: FontAwesomeIconComponentProps) => JSX.Element;
+/** Icon factory supporting font-awesome string, as well as the font-awesome icon definition and component. */
+export declare class FontAwesomeIconFactory extends IconFactory {
+    private fontAwesomeComponentType;
+    /**
+     * Creates a font awesome factory, allowing the use of IconDefinition on any neo icon prop.
+     * @param fontAwesomeComponentType import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+     */
+    constructor(fontAwesomeComponentType: FontAwesomeComponent);
+    protected createIconComponent(iconComponent: IconDefinition | JSX.Element, iconStyle?: IconStyle): React.ReactNode;
+}
+export {};

package/dist/ReactComponents/Icons/FontAwesomeIconFactory.js

@@ -0,0 +1,43 @@
+import { __assign, __decorate, __extends, __metadata } from "tslib";
+import React from "react";
+import { injectable } from "inversify";
+import { IconFactory } from "./IconFactory";
+/** Icon factory supporting font-awesome string, as well as the font-awesome icon definition and component. */
+export var FontAwesomeIconFactory = /** @class */ (function (_super) {
+    __extends(FontAwesomeIconFactory, _super);
+    /**
+     * Creates a font awesome factory, allowing the use of IconDefinition on any neo icon prop.
+     * @param fontAwesomeComponentType import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+     */
+    function FontAwesomeIconFactory(fontAwesomeComponentType) {
+        var _this = _super.call(this) || this;
+        _this.fontAwesomeComponentType = fontAwesomeComponentType;
+        return _this;
+    }
+    FontAwesomeIconFactory.prototype.createIconComponent = function (iconComponent, iconStyle) {
+        if (iconComponent.iconName) {
+            // Icon was specified using a font-awesome icon descriptor, return the font-awesome icon component.
+            return React.createElement(this.fontAwesomeComponentType, {
+                icon: iconComponent,
+                fixedWidth: iconStyle === null || iconStyle === void 0 ? void 0 : iconStyle.fixedWidth,
+                spin: iconStyle === null || iconStyle === void 0 ? void 0 : iconStyle.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 (iconStyle === null || iconStyle === void 0 ? void 0 : iconStyle.fixedWidth) {
+                props.fixedWidth = iconStyle.fixedWidth;
+            }
+            if (iconStyle === null || iconStyle === void 0 ? void 0 : iconStyle.spin) {
+                props.spin = iconStyle.spin;
+            }
+            return React.createElement(iconComponent.type, props);
+        }
+    };
+    FontAwesomeIconFactory = __decorate([
+        injectable(),
+        __metadata("design:paramtypes", [Function])
+    ], FontAwesomeIconFactory);
+    return FontAwesomeIconFactory;
+}(IconFactory));

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/IIconFactory.js

@@ -0,0 +1 @@
+export {};

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): React.ReactNode;
+    textOrIcon(textOrIcon: string, style?: IconStyle): React.ReactNode;
+    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,45 @@
+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. */
+export 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 className = Utils.getFontAwesomeClass(iconName);
+        if (style === null || style === void 0 ? void 0 : style.fixedWidth) {
+            className += " fa-fw";
+        }
+        if (style === null || style === void 0 ? void 0 : style.spin) {
+            className += " fa-spin";
+        }
+        return React.createElement("i", { className: className });
+    };
+    IconFactory.prototype.createIconComponent = function (iconDescriptor, style) {
+        return iconDescriptor;
+    };
+    IconFactory = __decorate([
+        injectable()
+    ], IconFactory);
+    return 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/Input.d.ts

@@ -1,45 +1,45 @@
-import * as React from 'react';
-import { IBindableEditorProps } from './PropTypes';
-import { Components } from '@singularsystems/neo-core';
-import ComponentBase from './ComponentBase';
-import { FormContext } from './FormContext';
-declare type InputType = "text" | "password" | "checkbox" | "switch";
-export interface IInputSpecificProps {
-    /** Type of input to use */
-    type?: InputType;
-    /** Converts input into a textarea if the no of rows is above 1. */
-    rows?: number;
-    /** Label for checkbox. */
-    label?: string | JSX.Element;
-    /**
-     * Shows a button which allows the user to view the password characters.
-     * Automatically sets type to 'password'.
-     */
-    showPasswordButton?: boolean | Components.IButtonOptions;
-}
-export interface IInputProps extends IBindableEditorProps<HTMLInputElement> {
-    input?: IInputSpecificProps;
-}
-export default class Input extends ComponentBase<IInputProps> {
-    static contextType: React.Context<import("./FormContext").FormContextParams>;
-    context: React.ContextType<typeof FormContext>;
-    protected baseType?: InputType;
-    private type;
-    private domRef;
-    private showPassword;
-    constructor(props: IInputProps);
-    private determineType;
-    afterRender(): void;
-    private onChanged;
-    render(): JSX.Element;
-}
-export declare class Textbox extends Input {
-    constructor(props: any);
-}
-export declare class Passwordbox extends Input {
-    constructor(props: any);
-}
-export declare class Checkbox extends Input {
-    constructor(props: any);
-}
-export {};
+import * as React from 'react';
+import { IBindableEditorProps } from './PropTypes';
+import { Components } from '@singularsystems/neo-core';
+import ComponentBase from './ComponentBase';
+import { FormContext } from './FormContext';
+type InputType = "text" | "password" | "checkbox" | "switch" | "tel" | "email";
+export interface IInputSpecificProps {
+    /** Type of input to use */
+    type?: InputType;
+    /** Converts input into a textarea if the no of rows is above 1. */
+    rows?: number;
+    /** Label for checkbox. */
+    label?: string | JSX.Element;
+    /**
+     * Shows a button which allows the user to view the password characters.
+     * Automatically sets type to 'password'.
+     */
+    showPasswordButton?: boolean | Components.IButtonOptions;
+}
+export interface IInputProps extends IBindableEditorProps<HTMLInputElement> {
+    input?: IInputSpecificProps;
+}
+export default class Input extends ComponentBase<IInputProps> {
+    static contextType: React.Context<import("./FormContext").FormContextParams>;
+    context: React.ContextType<typeof FormContext>;
+    protected baseType?: InputType;
+    private type;
+    private domRef;
+    private showPassword;
+    constructor(props: IInputProps);
+    private determineType;
+    afterRender(): void;
+    private onChanged;
+    render(): JSX.Element;
+}
+export declare class Textbox extends Input {
+    constructor(props: any);
+}
+export declare class Passwordbox extends Input {
+    constructor(props: any);
+}
+export declare class Checkbox extends Input {
+    constructor(props: any);
+}
+export {};

package/dist/ReactComponents/Input.js

@@ -1,152 +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 { 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);
-        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));
+    };
+    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 };