igniteui-react-inputs/esm5/lib/igr-x-input-group.js

Ignite UI React input components.

import { __extends, __values } from "tslib";
import * as React from 'react';
import { XInputGroup } from "./XInputGroup";
import { XInputGroupItem } from "./XInputGroupItem";
import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, isValidProp, toSpinal, getModifiedProps } from "igniteui-react-core";
import { ReactRenderer, PortalManager } from "igniteui-react-core";
import { IgrXInputGroupInputCollection } from './igr-x-input-group-input-collection';
import { CollectionAdapter } from "igniteui-react-core";
import { NotifyCollectionChangedAction } from "igniteui-react-core";
import { ContentChildrenManager } from "igniteui-react-core";
import { InputGroupDisplayType_$type } from './InputGroupDisplayType';
import { CornerRadius } from "igniteui-react-core";
import { Thickness } from "igniteui-react-core";
import { ControlDisplayDensity_$type } from "igniteui-react-core";
import { BaseControlTheme_$type } from "igniteui-react-core";
var IgrXInputGroup = /** @class */ /*@__PURE__*/ (function (_super) {
    __extends(IgrXInputGroup, _super);
    function IgrXInputGroup(props) {
        var _this = _super.call(this, props) || this;
        _this._wrapper = null;
        _this.contentInputs = [];
        /**
        * The style mappings actually present in the treemap. Do not directly modify this array.
        * This array's contents can be modified by causing React to reproject the child content.
        * Or adding and removing ranges from the manual ranges collection on the ranges property.
        */
        _this.actualInputs = [];
        _this._inputs = null;
        _this._inputsAdapter = null;
        _this._implementation = null;
        _this.__p = null;
        _this._hasUserValues = new Set();
        _this._stylingContainer = null;
        _this._stylingParent = null;
        _this._inStyling = false;
        if (_this._styling) {
            NamePatcher.ensureStylablePatched(Object.getPrototypeOf(_this));
        }
        _this._contentChildrenManager = new ContentChildrenManager(function (ch) { return ch.props.name || ch.key || ch.props.id; }, function (ch) { return ch.name || ch.key || ch.id; }, function () { return _this._updateContentChildren(); });
        _this._implementation = _this.createImplementation();
        _this._implementation.externalObject = _this;
        _this._getMainRef = _this._getMainRef.bind(_this);
        var container;
        if (document) {
            container = document.createElement("div");
        }
        var root;
        root = container;
        if (container != null) {
            root = container;
        }
        _this.requestRender = _this.requestRender.bind(_this);
        _this._portalManager = new PortalManager("inputContent", _this.requestRender);
        var ren = new ReactRenderer(root, document, true, {}, _this._portalManager);
        _this._wrapper = ren;
        _this._container = _this._wrapper.rootWrapper;
        _this._container.setStyleProperty("display", "inline-block");
        var inputGroup = _this.i;
        _this._inputGroup = inputGroup;
        _this._inputsAdapter = new CollectionAdapter(_this.contentInputs, _this.i.inputs, _this.actualInputs, function (c) { return c.i; }, function (i) {
            if (_this._container && _this._container.getNativeElement().parentElement) {
                i._styling(_this._container.getNativeElement(), _this, _this);
            }
        }, function (i) { });
        inputGroup.provideContainer(ren);
        if (props) {
            _this.initializeProperties();
        }
        return _this;
    }
    IgrXInputGroup.prototype._getMainRef = function (ref) {
        var _this = this;
        this._elRef = ref;
        if (this._elRef) {
            var mut = new MutationObserver(function (list) {
                var e_1, _a;
                try {
                    for (var list_1 = __values(list), list_1_1 = list_1.next(); !list_1_1.done; list_1_1 = list_1.next()) {
                        var mutation = list_1_1.value;
                        if (mutation.type == 'childList') {
                            _this.i.onChildrenMutated();
                        }
                    }
                }
                catch (e_1_1) {
                    e_1 = { error: e_1_1 };
                }
                finally {
                    try {
                        if (list_1_1 && !list_1_1.done && (_a = list_1.return))
                            _a.call(list_1);
                    }
                    finally {
                        if (e_1)
                            throw e_1.error;
                    }
                }
            });
            mut.observe(this._elRef, {
                childList: true,
                subtree: true
            });
        }
    };
    IgrXInputGroup.prototype._updateContentChildren = function () {
        this.contentInputs.length = 0;
        var contentChildrenActual = this._contentChildrenManager.contentChildrenActual;
        for (var i = 0; i < contentChildrenActual.length; i++) {
            if ((XInputGroupItem.$type).isAssignableFrom(contentChildrenActual[i].i.$type)) {
                this.contentInputs.push(contentChildrenActual[i]);
            }
        }
        if (this._inputsAdapter !== null) {
            this._inputsAdapter.notifyContentChanged();
        }
    };
    Object.defineProperty(IgrXInputGroup.prototype, "inputs", {
        /**
         * A collection of manually added style mappings for the treemap.
        */
        get: function () {
            var _this = this;
            if (this._inputs === null) {
                var coll = new IgrXInputGroupInputCollection();
                var inner = coll._innerColl;
                inner.addListener(function (sender, e) {
                    switch (e.action) {
                        case NotifyCollectionChangedAction.Add:
                            _this._inputsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
                            break;
                        case NotifyCollectionChangedAction.Remove:
                            _this._inputsAdapter.removeManualItemAt(e.oldStartingIndex);
                            break;
                        case NotifyCollectionChangedAction.Replace:
                            _this._inputsAdapter.removeManualItemAt(e.oldStartingIndex);
                            _this._inputsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
                            break;
                        case NotifyCollectionChangedAction.Reset:
                            _this._inputsAdapter.clearManualItems();
                            break;
                    }
                });
                this._inputs = coll;
            }
            return this._inputs;
        },
        enumerable: false,
        configurable: true
    });
    IgrXInputGroup.prototype.render = function () {
        var children = this._contentChildrenManager.getChildren(this.props.children);
        this._portalManager.onRender(children);
        var div = React.createElement("div", {
            className: "ig-x-input-group igr-x-input-group",
            ref: this._getMainRef,
            children: children
        });
        return div;
    };
    IgrXInputGroup.prototype.requestRender = function () {
        if (this._initialized) {
            this.setState({});
        }
    };
    //private _getLabelPortal(element: DomWrapper, portalCallback: (portal: DomPortal) => void): void {
    //    this._portalManager.getPortal(element, "TemplateContent", portalCallback);
    //}
    IgrXInputGroup.prototype.shouldComponentUpdate = function (nextProps, nextState) {
        var e_2, _a;
        var mod = getModifiedProps(this.props, nextProps);
        try {
            for (var _b = __values(Object.keys(mod)), _c = _b.next(); !_c.done; _c = _b.next()) {
                var p = _c.value;
                if (isValidProp(this, p)) {
                    this[p] = mod[p];
                }
            }
        }
        catch (e_2_1) {
            e_2 = { error: e_2_1 };
        }
        finally {
            try {
                if (_c && !_c.done && (_a = _b.return))
                    _a.call(_b);
            }
            finally {
                if (e_2)
                    throw e_2.error;
            }
        }
        return true;
    };
    IgrXInputGroup.prototype.initializeProperties = function () {
        var e_3, _a;
        try {
            for (var _b = __values(Object.keys(this.props)), _c = _b.next(); !_c.done; _c = _b.next()) {
                var p = _c.value;
                if (isValidProp(this, p)) {
                    this[p] = this.props[p];
                }
            }
        }
        catch (e_3_1) {
            e_3 = { error: e_3_1 };
        }
        finally {
            try {
                if (_c && !_c.done && (_a = _b.return))
                    _a.call(_b);
            }
            finally {
                if (e_3)
                    throw e_3.error;
            }
        }
    };
    // supports angular themes or custom properties set in CSS
    IgrXInputGroup.prototype.updateStyle = function () {
        this._styling(this._elRef, this);
    };
    IgrXInputGroup.prototype.destroy = function () {
        this._inputGroup.destroy();
        this._wrapper.destroy();
    };
    IgrXInputGroup.prototype.componentWillUnmount = function () {
    };
    IgrXInputGroup.prototype.componentDidMount = function () {
        this._elRef.appendChild(this._container.getNativeElement());
        this.initializeContent();
    };
    IgrXInputGroup.prototype.initializeContent = function () {
        this._styling(this._container.getNativeElement(), this);
        this.updateStyle();
        this.i.ensureShift();
    };
    IgrXInputGroup.prototype.createImplementation = function () {
        return new XInputGroup();
    };
    Object.defineProperty(IgrXInputGroup.prototype, "i", {
        get: function () {
            return this._implementation;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "displayType", {
        /**
     * Gets or sets the display style to use for the button.
    */
        get: function () {
            return this.i.d;
        },
        set: function (v) {
            this.i.d = ensureEnum(InputGroupDisplayType_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "density", {
        /**
         * Gets or sets the display density to use for the input group.
        */
        get: function () {
            return this.i.t;
        },
        set: function (v) {
            this.i.t = ensureEnum(ControlDisplayDensity_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualDensity", {
        /**
         * Gets the actual display density to use for the input group.
        */
        get: function () {
            return this.i.s;
        },
        set: function (v) {
            this.i.s = ensureEnum(ControlDisplayDensity_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "baseTheme", {
        /**
         * Gets or sets the base built in theme to use for the label.
        */
        get: function () {
            return this.i.p;
        },
        set: function (v) {
            this.i.p = ensureEnum(BaseControlTheme_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "inputHasValue", {
        get: function () {
            return this.i.al;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualBorderColor", {
        /**
         * Gets the actual item background color.
        */
        get: function () {
            return brushToString(this.i.l6);
        },
        set: function (v) {
            this.i.l6 = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualFocusBorderColor", {
        /**
         * Gets the actual item border color.
        */
        get: function () {
            return brushToString(this.i.l7);
        },
        set: function (v) {
            this.i.l7 = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualBorderWidth", {
        /**
         * Gets the actual item border width.
        */
        get: function () {
            return this.i.cg;
        },
        set: function (v) {
            this.i.cg = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualFocusBorderWidth", {
        /**
         * Gets the actual item border width.
        */
        get: function () {
            return this.i.ch;
        },
        set: function (v) {
            this.i.ch = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualCornerRadiusBottomRight", {
        get: function () {
            return this.i.ko ? this.i.ko.c : NaN;
        },
        set: function (v) {
            this.ensureActualCornerRadius();
            this.i.ko.c = +v;
            this.i.ko = this.i.ko;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualCornerRadiusBottomLeft", {
        get: function () {
            return this.i.ko ? this.i.ko.b : NaN;
        },
        set: function (v) {
            this.ensureActualCornerRadius();
            this.i.ko.b = +v;
            this.i.ko = this.i.ko;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualCornerRadiusTopLeft", {
        get: function () {
            return this.i.ko ? this.i.ko.d : NaN;
        },
        set: function (v) {
            this.ensureActualCornerRadius();
            this.i.ko.d = +v;
            this.i.ko = this.i.ko;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualCornerRadiusTopRight", {
        get: function () {
            return this.i.ko ? this.i.ko.e : NaN;
        },
        set: function (v) {
            this.ensureActualCornerRadius();
            this.i.ko.e = +v;
            this.i.ko = this.i.ko;
        },
        enumerable: false,
        configurable: true
    });
    IgrXInputGroup.prototype.ensureActualCornerRadius = function () {
        if (this.i.ko) {
            return;
        }
        this.i.ko = new CornerRadius(2);
    };
    Object.defineProperty(IgrXInputGroup.prototype, "actualContentPaddingBottom", {
        get: function () {
            return this.i.oe ? this.i.oe.bottom : NaN;
        },
        set: function (v) {
            this.ensureActualContentPadding();
            this.i.oe.bottom = +v;
            this.i.oe = this.i.oe;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualContentPaddingLeft", {
        get: function () {
            return this.i.oe ? this.i.oe.left : NaN;
        },
        set: function (v) {
            this.ensureActualContentPadding();
            this.i.oe.left = +v;
            this.i.oe = this.i.oe;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualContentPaddingRight", {
        get: function () {
            return this.i.oe ? this.i.oe.right : NaN;
        },
        set: function (v) {
            this.ensureActualContentPadding();
            this.i.oe.right = +v;
            this.i.oe = this.i.oe;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualContentPaddingTop", {
        get: function () {
            return this.i.oe ? this.i.oe.top : NaN;
        },
        set: function (v) {
            this.ensureActualContentPadding();
            this.i.oe.top = +v;
            this.i.oe = this.i.oe;
        },
        enumerable: false,
        configurable: true
    });
    IgrXInputGroup.prototype.ensureActualContentPadding = function () {
        if (this.i.oe) {
            return;
        }
        this.i.oe = new Thickness(2);
    };
    Object.defineProperty(IgrXInputGroup.prototype, "actualUnderlineWidth", {
        /**
         * Gets the actual width to use for the underline element.
        */
        get: function () {
            return this.i.cp;
        },
        set: function (v) {
            this.i.cp = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualUnderlineRippleWidth", {
        /**
         * Gets the actual width to use for the underline element.
        */
        get: function () {
            return this.i.co;
        },
        set: function (v) {
            this.i.co = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualHoverUnderlineWidth", {
        /**
         * Gets the width to use for the underline element when hovered.
        */
        get: function () {
            return this.i.cl;
        },
        set: function (v) {
            this.i.cl = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualUnderlineColor", {
        /**
         * Gets the actual color to use for the underline element.
        */
        get: function () {
            return brushToString(this.i.ma);
        },
        set: function (v) {
            this.i.ma = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualUnderlineRippleColor", {
        /**
         * Gets the actual color to use for the underline ripple element.
        */
        get: function () {
            return brushToString(this.i.mb);
        },
        set: function (v) {
            this.i.mb = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualHoverUnderlineColor", {
        /**
         * Gets the actual color to use for the underline element.
        */
        get: function () {
            return brushToString(this.i.l9);
        },
        set: function (v) {
            this.i.l9 = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualFocusUnderlineColor", {
        /**
         * Gets the actual color to use for the underline element when focused.
        */
        get: function () {
            return brushToString(this.i.l8);
        },
        set: function (v) {
            this.i.l8 = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualUnderlineOpacity", {
        /**
         * Gets the actual opacity to use for the underline element.
        */
        get: function () {
            return this.i.cm;
        },
        set: function (v) {
            this.i.cm = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualHoverUnderlineOpacity", {
        /**
         * Gets the actual opacity to use for the underline element when hovered.
        */
        get: function () {
            return this.i.ck;
        },
        set: function (v) {
            this.i.ck = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualFocusUnderlineOpacity", {
        /**
         * Gets the actual opacity to use for the underline element when focused.
        */
        get: function () {
            return this.i.ci;
        },
        set: function (v) {
            this.i.ci = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualFocusUnderlineRippleOpacity", {
        /**
         * Gets the actual opacity to use for the underline ripple element when focused.
        */
        get: function () {
            return this.i.cj;
        },
        set: function (v) {
            this.i.cj = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualUnderlineRippleOpacity", {
        /**
         * Gets the actual opacity to use for the underline ripple element.
        */
        get: function () {
            return this.i.cn;
        },
        set: function (v) {
            this.i.cn = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "actualBackgroundColor", {
        /**
         * Gets the actual opacity to use for the underline ripple element.
        */
        get: function () {
            return brushToString(this.i.l5);
        },
        set: function (v) {
            this.i.l5 = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "borderWidth", {
        /**
         * Gets or sets the border width to use for the border of the item group.
        */
        get: function () {
            return this.i.c0;
        },
        set: function (v) {
            this.i.c0 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "focusBorderWidth", {
        /**
         * Gets or sets the border width to use for the border of the item group when focused.
        */
        get: function () {
            return this.i.eg;
        },
        set: function (v) {
            this.i.eg = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "borderColor", {
        /**
         * Gets or sets the color to use the border of the input group.
        */
        get: function () {
            return brushToString(this.i.md);
        },
        set: function (v) {
            this.i.md = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "cornerRadiusBottomRight", {
        get: function () {
            return this.i.ks ? this.i.ks.c : NaN;
        },
        set: function (v) {
            this.ensureCornerRadius();
            this.i.ks.c = +v;
            this.i.ks = this.i.ks;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "cornerRadiusBottomLeft", {
        get: function () {
            return this.i.ks ? this.i.ks.b : NaN;
        },
        set: function (v) {
            this.ensureCornerRadius();
            this.i.ks.b = +v;
            this.i.ks = this.i.ks;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "cornerRadiusTopLeft", {
        get: function () {
            return this.i.ks ? this.i.ks.d : NaN;
        },
        set: function (v) {
            this.ensureCornerRadius();
            this.i.ks.d = +v;
            this.i.ks = this.i.ks;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "cornerRadiusTopRight", {
        get: function () {
            return this.i.ks ? this.i.ks.e : NaN;
        },
        set: function (v) {
            this.ensureCornerRadius();
            this.i.ks.e = +v;
            this.i.ks = this.i.ks;
        },
        enumerable: false,
        configurable: true
    });
    IgrXInputGroup.prototype.ensureCornerRadius = function () {
        if (this.i.ks) {
            return;
        }
        this.i.ks = new CornerRadius(2);
    };
    Object.defineProperty(IgrXInputGroup.prototype, "contentPaddingBottom", {
        get: function () {
            return this.i.oi ? this.i.oi.bottom : NaN;
        },
        set: function (v) {
            this.ensureContentPadding();
            this.i.oi.bottom = +v;
            this.i.oi = this.i.oi;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "contentPaddingLeft", {
        get: function () {
            return this.i.oi ? this.i.oi.left : NaN;
        },
        set: function (v) {
            this.ensureContentPadding();
            this.i.oi.left = +v;
            this.i.oi = this.i.oi;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "contentPaddingRight", {
        get: function () {
            return this.i.oi ? this.i.oi.right : NaN;
        },
        set: function (v) {
            this.ensureContentPadding();
            this.i.oi.right = +v;
            this.i.oi = this.i.oi;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "contentPaddingTop", {
        get: function () {
            return this.i.oi ? this.i.oi.top : NaN;
        },
        set: function (v) {
            this.ensureContentPadding();
            this.i.oi.top = +v;
            this.i.oi = this.i.oi;
        },
        enumerable: false,
        configurable: true
    });
    IgrXInputGroup.prototype.ensureContentPadding = function () {
        if (this.i.oi) {
            return;
        }
        this.i.oi = new Thickness(2);
    };
    Object.defineProperty(IgrXInputGroup.prototype, "underlineWidth", {
        /**
         * Gets or sets the width to use for the underline element.
        */
        get: function () {
            return this.i.e8;
        },
        set: function (v) {
            this.i.e8 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "underlineRippleWidth", {
        /**
         * Gets or sets the width to use for the underline element.
        */
        get: function () {
            return this.i.e7;
        },
        set: function (v) {
            this.i.e7 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "hoverUnderlineWidth", {
        /**
         * Gets or sets the width to use for the underline element when hovered.
        */
        get: function () {
            return this.i.ek;
        },
        set: function (v) {
            this.i.ek = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "underlineColor", {
        /**
         * Gets or sets the color to use for the underline element.
        */
        get: function () {
            return brushToString(this.i.n6);
        },
        set: function (v) {
            this.i.n6 = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "underlineRippleColor", {
        /**
         * Gets or sets the color to use for the underline ripple element.
        */
        get: function () {
            return brushToString(this.i.n7);
        },
        set: function (v) {
            this.i.n7 = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "hoverUnderlineColor", {
        /**
         * Gets or sets the color to use for the underline element.
        */
        get: function () {
            return brushToString(this.i.nq);
        },
        set: function (v) {
            this.i.nq = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "focusUnderlineColor", {
        /**
         * Gets or sets the color to use for the underline element.
        */
        get: function () {
            return brushToString(this.i.np);
        },
        set: function (v) {
            this.i.np = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "underlineOpacity", {
        /**
         * Gets or sets the color to use for the underline element.
        */
        get: function () {
            return this.i.e5;
        },
        set: function (v) {
            this.i.e5 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "hoverUnderlineOpacity", {
        /**
         * Gets or sets the color to use for the underline element.
        */
        get: function () {
            return this.i.ej;
        },
        set: function (v) {
            this.i.ej = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "focusUnderlineOpacity", {
        /**
         * Gets or sets the color to use for the underline element.
        */
        get: function () {
            return this.i.eh;
        },
        set: function (v) {
            this.i.eh = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "focusUnderlineRippleOpacity", {
        /**
         * Gets or sets the opacity to use for the underline ripple element when focused.
        */
        get: function () {
            return this.i.ei;
        },
        set: function (v) {
            this.i.ei = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "underlineRippleOpacity", {
        /**
         * Gets or sets the opacity to use for the underline ripple element.
        */
        get: function () {
            return this.i.e6;
        },
        set: function (v) {
            this.i.e6 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "backgroundColor", {
        /**
         * Gets or sets the background color to use for the input group.
        */
        get: function () {
            return brushToString(this.i.mc);
        },
        set: function (v) {
            this.i.mc = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeBorderWidth", {
        /**
         * Gets or sets the border width to use for the border of the item group when using type line.
        */
        get: function () {
            return this.i.el;
        },
        set: function (v) {
            this.i.el = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeFocusBorderWidth", {
        /**
         * Gets or sets the border width to use for the border of the item group when focused when type is line.
        */
        get: function () {
            return this.i.em;
        },
        set: function (v) {
            this.i.em = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeFocusBorderColor", {
        /**
         * Gets or sets the focus color to use the border of the input group when type is line.
        */
        get: function () {
            return brushToString(this.i.nt);
        },
        set: function (v) {
            this.i.nt = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeBorderColor", {
        /**
         * Gets or sets the color to use the border of the input group when type is line.
        */
        get: function () {
            return brushToString(this.i.ns);
        },
        set: function (v) {
            this.i.ns = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeCornerRadiusBottomRight", {
        get: function () {
            return this.i.kx ? this.i.kx.c : NaN;
        },
        set: function (v) {
            this.ensureLineTypeCornerRadius();
            this.i.kx.c = +v;
            this.i.kx = this.i.kx;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeCornerRadiusBottomLeft", {
        get: function () {
            return this.i.kx ? this.i.kx.b : NaN;
        },
        set: function (v) {
            this.ensureLineTypeCornerRadius();
            this.i.kx.b = +v;
            this.i.kx = this.i.kx;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeCornerRadiusTopLeft", {
        get: function () {
            return this.i.kx ? this.i.kx.d : NaN;
        },
        set: function (v) {
            this.ensureLineTypeCornerRadius();
            this.i.kx.d = +v;
            this.i.kx = this.i.kx;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeCornerRadiusTopRight", {
        get: function () {
            return this.i.kx ? this.i.kx.e : NaN;
        },
        set: function (v) {
            this.ensureLineTypeCornerRadius();
            this.i.kx.e = +v;
            this.i.kx = this.i.kx;
        },
        enumerable: false,
        configurable: true
    });
    IgrXInputGroup.prototype.ensureLineTypeCornerRadius = function () {
        if (this.i.kx) {
            return;
        }
        this.i.kx = new CornerRadius(2);
    };
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeContentPaddingBottom", {
        get: function () {
            return this.i.on ? this.i.on.bottom : NaN;
        },
        set: function (v) {
            this.ensureLineTypeContentPadding();
            this.i.on.bottom = +v;
            this.i.on = this.i.on;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeContentPaddingLeft", {
        get: function () {
            return this.i.on ? this.i.on.left : NaN;
        },
        set: function (v) {
            this.ensureLineTypeContentPadding();
            this.i.on.left = +v;
            this.i.on = this.i.on;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeContentPaddingRight", {
        get: function () {
            return this.i.on ? this.i.on.right : NaN;
        },
        set: function (v) {
            this.ensureLineTypeContentPadding();
            this.i.on.right = +v;
            this.i.on = this.i.on;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeContentPaddingTop", {
        get: function () {
            return this.i.on ? this.i.on.top : NaN;
        },
        set: function (v) {
            this.ensureLineTypeContentPadding();
            this.i.on.top = +v;
            this.i.on = this.i.on;
        },
        enumerable: false,
        configurable: true
    });
    IgrXInputGroup.prototype.ensureLineTypeContentPadding = function () {
        if (this.i.on) {
            return;
        }
        this.i.on = new Thickness(2);
    };
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeUnderlineWidth", {
        /**
         * Gets or sets the width to use for the underline element when type is line.
        */
        get: function () {
            return this.i.eu;
        },
        set: function (v) {
            this.i.eu = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeUnderlineRippleWidth", {
        /**
         * Gets or sets the width to use for the underline element when type is line.
        */
        get: function () {
            return this.i.et;
        },
        set: function (v) {
            this.i.et = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeHoverUnderlineWidth", {
        /**
         * Gets or sets the width to use for the underline element when hovered when type is line.
        */
        get: function () {
            return this.i.eq;
        },
        set: function (v) {
            this.i.eq = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeUnderlineColor", {
        /**
         * Gets or sets the color to use for the underline element when type is line.
        */
        get: function () {
            return brushToString(this.i.nw);
        },
        set: function (v) {
            this.i.nw = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeUnderlineRippleColor", {
        /**
         * Gets or sets the color to use for the underline ripple element when type is line.
        */
        get: function () {
            return brushToString(this.i.nx);
        },
        set: function (v) {
            this.i.nx = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeHoverUnderlineColor", {
        /**
         * Gets or sets the color to use for the underline element when type is line.
        */
        get: function () {
            return brushToString(this.i.nv);
        },
        set: function (v) {
            this.i.nv = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeFocusUnderlineColor", {
        /**
         * Gets or sets the color to use for the underline element when type is line.
        */
        get: function () {
            return brushToString(this.i.nu);
        },
        set: function (v) {
            this.i.nu = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeUnderlineOpacity", {
        /**
         * Gets or sets the color to use for the underline element when type is line.
        */
        get: function () {
            return this.i.er;
        },
        set: function (v) {
            this.i.er = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeHoverUnderlineOpacity", {
        /**
         * Gets or sets the color to use for the underline element when type is line.
        */
        get: function () {
            return this.i.ep;
        },
        set: function (v) {
            this.i.ep = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeFocusUnderlineOpacity", {
        /**
         * Gets or sets the color to use for the underline element when type is line.
        */
        get: function () {
            return this.i.en;
        },
        set: function (v) {
            this.i.en = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeFocusUnderlineRippleOpacity", {
        /**
         * Gets or sets the opacity to use for the underline ripple element when focused when type is line.
        */
        get: function () {
            return this.i.eo;
        },
        set: function (v) {
            this.i.eo = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeUnderlineRippleOpacity", {
        /**
         * Gets or sets the opacity to use for the underline ripple element when type is line.
        */
        get: function () {
            return this.i.es;
        },
        set: function (v) {
            this.i.es = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "lineTypeBackgroundColor", {
        /**
         * Gets or sets the background color to use for the input group when type is line.
        */
        get: function () {
            return brushToString(this.i.nr);
        },
        set: function (v) {
            this.i.nr = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeBorderWidth", {
        /**
         * Gets or sets the border width to use for the border of the item group when using type line.
        */
        get: function () {
            return this.i.c1;
        },
        set: function (v) {
            this.i.c1 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeFocusBorderWidth", {
        /**
         * Gets or sets the border width to use for the border of the item group when focused when type is box.
        */
        get: function () {
            return this.i.c2;
        },
        set: function (v) {
            this.i.c2 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeFocusBorderColor", {
        /**
         * Gets or sets the focus color to use the border of the input group when type is box.
        */
        get: function () {
            return brushToString(this.i.mn);
        },
        set: function (v) {
            this.i.mn = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeBorderColor", {
        /**
         * Gets or sets the color to use the border of the input group when type is box.
        */
        get: function () {
            return brushToString(this.i.mm);
        },
        set: function (v) {
            this.i.mm = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeCornerRadiusBottomRight", {
        get: function () {
            return this.i.kq ? this.i.kq.c : NaN;
        },
        set: function (v) {
            this.ensureBoxTypeCornerRadius();
            this.i.kq.c = +v;
            this.i.kq = this.i.kq;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeCornerRadiusBottomLeft", {
        get: function () {
            return this.i.kq ? this.i.kq.b : NaN;
        },
        set: function (v) {
            this.ensureBoxTypeCornerRadius();
            this.i.kq.b = +v;
            this.i.kq = this.i.kq;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeCornerRadiusTopLeft", {
        get: function () {
            return this.i.kq ? this.i.kq.d : NaN;
        },
        set: function (v) {
            this.ensureBoxTypeCornerRadius();
            this.i.kq.d = +v;
            this.i.kq = this.i.kq;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeCornerRadiusTopRight", {
        get: function () {
            return this.i.kq ? this.i.kq.e : NaN;
        },
        set: function (v) {
            this.ensureBoxTypeCornerRadius();
            this.i.kq.e = +v;
            this.i.kq = this.i.kq;
        },
        enumerable: false,
        configurable: true
    });
    IgrXInputGroup.prototype.ensureBoxTypeCornerRadius = function () {
        if (this.i.kq) {
            return;
        }
        this.i.kq = new CornerRadius(2);
    };
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeContentPaddingBottom", {
        get: function () {
            return this.i.og ? this.i.og.bottom : NaN;
        },
        set: function (v) {
            this.ensureBoxTypeContentPadding();
            this.i.og.bottom = +v;
            this.i.og = this.i.og;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeContentPaddingLeft", {
        get: function () {
            return this.i.og ? this.i.og.left : NaN;
        },
        set: function (v) {
            this.ensureBoxTypeContentPadding();
            this.i.og.left = +v;
            this.i.og = this.i.og;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeContentPaddingRight", {
        get: function () {
            return this.i.og ? this.i.og.right : NaN;
        },
        set: function (v) {
            this.ensureBoxTypeContentPadding();
            this.i.og.right = +v;
            this.i.og = this.i.og;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeContentPaddingTop", {
        get: function () {
            return this.i.og ? this.i.og.top : NaN;
        },
        set: function (v) {
            this.ensureBoxTypeContentPadding();
            this.i.og.top = +v;
            this.i.og = this.i.og;
        },
        enumerable: false,
        configurable: true
    });
    IgrXInputGroup.prototype.ensureBoxTypeContentPadding = function () {
        if (this.i.og) {
            return;
        }
        this.i.og = new Thickness(2);
    };
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeUnderlineWidth", {
        /**
         * Gets or sets the width to use for the underline element when type is box.
        */
        get: function () {
            return this.i.da;
        },
        set: function (v) {
            this.i.da = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeUnderlineRippleWidth", {
        /**
         * Gets or sets the width to use for the underline element when type is box.
        */
        get: function () {
            return this.i.c9;
        },
        set: function (v) {
            this.i.c9 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeHoverUnderlineWidth", {
        /**
         * Gets or sets the width to use for the underline element when hovered when type is box.
        */
        get: function () {
            return this.i.c6;
        },
        set: function (v) {
            this.i.c6 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeUnderlineColor", {
        /**
         * Gets or sets the color to use for the underline element when type is box.
        */
        get: function () {
            return brushToString(this.i.mq);
        },
        set: function (v) {
            this.i.mq = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeUnderlineRippleColor", {
        /**
         * Gets or sets the color to use for the underline ripple element when type is box.
        */
        get: function () {
            return brushToString(this.i.mr);
        },
        set: function (v) {
            this.i.mr = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeHoverUnderlineColor", {
        /**
         * Gets or sets the color to use for the underline element when type is box.
        */
        get: function () {
            return brushToString(this.i.mp);
        },
        set: function (v) {
            this.i.mp = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeFocusUnderlineColor", {
        /**
         * Gets or sets the color to use for the underline element when type is box.
        */
        get: function () {
            return brushToString(this.i.mo);
        },
        set: function (v) {
            this.i.mo = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrXInputGroup.prototype, "boxTypeUnderlineOpacity", {
        /**
         * Gets or sets the color to use for the underline element when type is box.
        */
        get: function () {
            return this.i.c7;
        },
        set: function (v) {
            th