igniteui-webcomponents-inputs/esm5/lib/igc-x-input-group-component.js

Ignite UI Web Components inputs components.

import { __extends, __values } from "tslib";
import { XInputGroup } from "./XInputGroup";
import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, enumToString, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core";
import { WebComponentRenderer, PortalManager } from "igniteui-webcomponents-core";
import { TypeRegistrar } from "igniteui-webcomponents-core";
import { RegisterElementHelper } from "igniteui-webcomponents-core";
import { IgcXInputGroupItemComponent } from './igc-x-input-group-item-component';
import { IgcXInputGroupInputCollection } from './igc-x-input-group-input-collection';
import { CollectionAdapter } from "igniteui-webcomponents-core";
import { NotifyCollectionChangedAction } from "igniteui-webcomponents-core";
import { InputGroupDisplayType_$type } from './InputGroupDisplayType';
import { CornerRadius } from "igniteui-webcomponents-core";
import { Thickness } from "igniteui-webcomponents-core";
import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
import { IgcHTMLElement } from "igniteui-webcomponents-core";
export var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
    __extends(IgcXInputGroupComponent, _super);
    function IgcXInputGroupComponent() {
        var _this = _super.call(this) || this;
        _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 Angular to reproject the child content.
        * Or adding and removing style mappings from the manual style mappings collection on the inputs property.
        */
        _this.actualInputs = [];
        _this._inputs = null;
        _this._inputsAdapter = null;
        _this._disconnected = false;
        _this._settingAttributes = false;
        _this._attached = false;
        _this._queuedSetAttributes = [];
        _this._updatingFromAttribute = false;
        _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._portalManager = new PortalManager("inputContent");
        _this._renderer = new WebComponentRenderer(_this, document, true, {}, _this._portalManager);
        _this._container = _this._renderer.createElement("div");
        _this._renderer.updateRoot(_this._container);
        _this._implementation = _this.createImplementation();
        _this._implementation.externalObject = _this;
        //this._container.setStyleProperty("width", "100%");
        //this._container.setStyleProperty("height", "100%");
        var root;
        root = _this._container;
        if (_this._container.getNativeElement() != null) {
            root = _this._container.getNativeElement();
        }
        _this._wrapper = _this._renderer;
        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, _this, _this);
            }
        }, function (i) { });
        inputGroup.provideContainer(_this._renderer);
        _this._onChildrenChanged();
        //Checkbox.notifySizeChanged();
        var mut = new MutationObserver(function (list) {
            var e_1, _b;
            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._onChildrenChanged();
                        _this.updateInputs();
                    }
                }
            }
            catch (e_1_1) {
                e_1 = { error: e_1_1 };
            }
            finally {
                try {
                    if (list_1_1 && !list_1_1.done && (_b = list_1.return))
                        _b.call(list_1);
                }
                finally {
                    if (e_1)
                        throw e_1.error;
                }
            }
        });
        mut.observe(_this, {
            childList: true
        });
        return _this;
        //this._renderer.addSizeWatcher(() => {
        //    this._checkbox.notifySizeChanged();
        //});
    }
    Object.defineProperty(IgcXInputGroupComponent.prototype, "inputs", {
        /**
         * A collection or manually added axes for the chart.
        */
        get: function () {
            var _this = this;
            if (this._inputs === null) {
                var coll = new IgcXInputGroupInputCollection();
                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
    });
    IgcXInputGroupComponent.prototype._onChildrenChanged = function () {
        var children = [];
        for (var i = 0; i < this.childNodes.length; i++) {
            var child = this.childNodes[i];
            if (child !== this._container.getNativeElement()) {
                children.push(child);
            }
        }
        this._portalManager.onChildrenChanged(children);
    };
    IgcXInputGroupComponent.prototype.updateInputs = function () {
        this.contentInputs.length = 0;
        for (var i = 0; i < this.children.length; i++) {
            if (this.children[i] instanceof IgcXInputGroupItemComponent) {
                this.contentInputs.push(this.children[i]);
            }
        }
        var childContent = this.querySelector("igc-child-content");
        if (childContent) {
            for (var i = 0; i < childContent.children.length; i++) {
                if (childContent.children[i] instanceof IgcXInputGroupItemComponent) {
                    this.contentInputs.push(childContent.children[i]);
                }
            }
        }
        if (this._inputsAdapter != null) {
            this._inputsAdapter.notifyContentChanged();
        }
    };
    // supports angular themes or custom properties set in CSS
    IgcXInputGroupComponent.prototype.updateStyle = function () {
        this._styling(this, this);
    };
    IgcXInputGroupComponent.prototype.destroy = function () {
        this._inputGroup.destroy();
        this._wrapper.destroy();
    };
    IgcXInputGroupComponent.prototype.createImplementation = function () {
        return new XInputGroup();
    };
    IgcXInputGroupComponent.prototype.disconnectedCallback = function () {
        this._disconnected = true;
        if (this.i) {
            this.i.onDetachedFromUI();
        }
    };
    IgcXInputGroupComponent.prototype.connectedCallback = function () {
        if (this._disconnected) {
            this._disconnected = false;
            if (this.i) {
                this.i.onAttachedToUI();
            }
            return;
        }
        this.classList.add("ig-x-input-group");
        this.classList.add("igc-x-input-group");
        this.appendChild(this._container.getNativeElement());
        this._attached = true;
        this.style.display = "inline-block";
        //this.style.height = this._height;
        //this.style.width = this._width;
        this._flushQueuedAttributes();
        // supports themes or custom properties set in CSS 
        this._styling(this, this);
        this.afterContentInit();
    };
    IgcXInputGroupComponent.prototype.afterContentInit = function () {
        this.i.ensureShift();
        //this.i.notifySizeChanged();
    };
    Object.defineProperty(IgcXInputGroupComponent.prototype, "i", {
        /**
         * @hidden
         */
        get: function () {
            return this._implementation;
        } /**
                                     * @hidden
                                     */,
        enumerable: false,
        configurable: true
    });
    IgcXInputGroupComponent._createFromInternal = function (internal) {
        if (!internal) {
            return null;
        }
        if (!internal.$type) {
            return null;
        }
        var name = internal.$type.name;
        var externalName = "Igc" + name + "Component";
        if (!TypeRegistrar.isRegistered(externalName)) {
            return null;
        }
        return TypeRegistrar.create(externalName);
    };
    IgcXInputGroupComponent.prototype._enqueueSetAttribute = function (attrName, attrValue) {
        this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
    };
    IgcXInputGroupComponent.prototype._flushQueuedAttributes = function () {
        this._settingAttributes = true;
        for (var i = 0; i < this._queuedSetAttributes.length; i++) {
            this.setAttribute(this._queuedSetAttributes[i].attrName, this._queuedSetAttributes[i].attrValue);
        }
        this._settingAttributes = false;
        this._queuedSetAttributes.length = 0;
    };
    IgcXInputGroupComponent.prototype._a = function (attrName, attrValue) {
        if (this._updatingFromAttribute) {
            return;
        }
        if (attrValue) {
            attrValue = attrValue.toString();
        }
        this._settingAttributes = true;
        attrName = toSpinal(attrName);
        if (this._attached) {
            this.setAttribute(attrName, attrValue);
        }
        else {
            this._enqueueSetAttribute(attrName, attrValue);
        }
        this._settingAttributes = false;
    };
    Object.defineProperty(IgcXInputGroupComponent, "observedAttributes", {
        get: function () {
            if (IgcXInputGroupComponent._observedAttributesIgcXInputGroupComponent == null) {
                var names = getAllPropertyNames(IgcXInputGroupComponent);
                for (var i = 0; i < names.length; i++) {
                    names[i] = toSpinal(names[i]);
                }
                IgcXInputGroupComponent._observedAttributesIgcXInputGroupComponent = names;
            }
            return IgcXInputGroupComponent._observedAttributesIgcXInputGroupComponent;
        },
        enumerable: false,
        configurable: true
    });
    IgcXInputGroupComponent.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
        if (this._settingAttributes) {
            return;
        }
        var setName = fromSpinal(name);
        this._updatingFromAttribute = true;
        this[setName] = newValue;
        this._updatingFromAttribute = false;
    };
    IgcXInputGroupComponent.register = function () {
        if (!IgcXInputGroupComponent._isElementRegistered) {
            IgcXInputGroupComponent._isElementRegistered = true;
            RegisterElementHelper.registerElement(IgcXInputGroupComponent.htmlTagName, IgcXInputGroupComponent);
        }
    };
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("displayType", enumToString(InputGroupDisplayType_$type, this.i.d));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.t));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("actualDensity", enumToString(ControlDisplayDensity_$type, this.i.s));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.p));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "inputHasValue", {
        get: function () {
            return this.i.al;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualBorderColor", {
        /**
         * Gets the actual item background color.
        */
        get: function () {
            return brushToString(this.i.l6);
        },
        set: function (v) {
            this.i.l6 = stringToBrush(v);
            this._a("actualBorderColor", brushToString(this.i.l6));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualFocusBorderColor", {
        /**
         * Gets the actual item border color.
        */
        get: function () {
            return brushToString(this.i.l7);
        },
        set: function (v) {
            this.i.l7 = stringToBrush(v);
            this._a("actualFocusBorderColor", brushToString(this.i.l7));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualBorderWidth", {
        /**
         * Gets the actual item border width.
        */
        get: function () {
            return this.i.cg;
        },
        set: function (v) {
            this.i.cg = +v;
            this._a("actualBorderWidth", this.i.cg);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualFocusBorderWidth", {
        /**
         * Gets the actual item border width.
        */
        get: function () {
            return this.i.ch;
        },
        set: function (v) {
            this.i.ch = +v;
            this._a("actualFocusBorderWidth", this.i.ch);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualCornerRadiusBottomRight", {
        get: function () {
            return this.i.ko ? this.i.ko.c : NaN;
        },
        set: function (v) {
            this.ensureActualCornerRadius();
            this.i.ko.c = +v;
            this._a("actualCornerRadiusBottomRight", this.i.ko.c);
            this.i.ko = this.i.ko;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualCornerRadiusBottomLeft", {
        get: function () {
            return this.i.ko ? this.i.ko.b : NaN;
        },
        set: function (v) {
            this.ensureActualCornerRadius();
            this.i.ko.b = +v;
            this._a("actualCornerRadiusBottomLeft", this.i.ko.b);
            this.i.ko = this.i.ko;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualCornerRadiusTopLeft", {
        get: function () {
            return this.i.ko ? this.i.ko.d : NaN;
        },
        set: function (v) {
            this.ensureActualCornerRadius();
            this.i.ko.d = +v;
            this._a("actualCornerRadiusTopLeft", this.i.ko.d);
            this.i.ko = this.i.ko;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualCornerRadiusTopRight", {
        get: function () {
            return this.i.ko ? this.i.ko.e : NaN;
        },
        set: function (v) {
            this.ensureActualCornerRadius();
            this.i.ko.e = +v;
            this._a("actualCornerRadiusTopRight", this.i.ko.e);
            this.i.ko = this.i.ko;
        },
        enumerable: false,
        configurable: true
    });
    IgcXInputGroupComponent.prototype.ensureActualCornerRadius = function () {
        if (this.i.ko) {
            return;
        }
        this.i.ko = new CornerRadius(2);
    };
    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualContentPaddingBottom", {
        get: function () {
            return this.i.oe ? this.i.oe.bottom : NaN;
        },
        set: function (v) {
            this.ensureActualContentPadding();
            this.i.oe.bottom = +v;
            this._a("actualContentPaddingBottom", this.i.oe.bottom);
            this.i.oe = this.i.oe;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualContentPaddingLeft", {
        get: function () {
            return this.i.oe ? this.i.oe.left : NaN;
        },
        set: function (v) {
            this.ensureActualContentPadding();
            this.i.oe.left = +v;
            this._a("actualContentPaddingLeft", this.i.oe.left);
            this.i.oe = this.i.oe;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualContentPaddingRight", {
        get: function () {
            return this.i.oe ? this.i.oe.right : NaN;
        },
        set: function (v) {
            this.ensureActualContentPadding();
            this.i.oe.right = +v;
            this._a("actualContentPaddingRight", this.i.oe.right);
            this.i.oe = this.i.oe;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualContentPaddingTop", {
        get: function () {
            return this.i.oe ? this.i.oe.top : NaN;
        },
        set: function (v) {
            this.ensureActualContentPadding();
            this.i.oe.top = +v;
            this._a("actualContentPaddingTop", this.i.oe.top);
            this.i.oe = this.i.oe;
        },
        enumerable: false,
        configurable: true
    });
    IgcXInputGroupComponent.prototype.ensureActualContentPadding = function () {
        if (this.i.oe) {
            return;
        }
        this.i.oe = new Thickness(2);
    };
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("actualUnderlineWidth", this.i.cp);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("actualUnderlineRippleWidth", this.i.co);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("actualHoverUnderlineWidth", this.i.cl);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("actualUnderlineColor", brushToString(this.i.ma));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("actualUnderlineRippleColor", brushToString(this.i.mb));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("actualHoverUnderlineColor", brushToString(this.i.l9));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("actualFocusUnderlineColor", brushToString(this.i.l8));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("actualUnderlineOpacity", this.i.cm);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("actualHoverUnderlineOpacity", this.i.ck);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("actualFocusUnderlineOpacity", this.i.ci);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("actualFocusUnderlineRippleOpacity", this.i.cj);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("actualUnderlineRippleOpacity", this.i.cn);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("actualBackgroundColor", brushToString(this.i.l5));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("borderWidth", this.i.c0);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("focusBorderWidth", this.i.eg);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("borderColor", brushToString(this.i.md));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "cornerRadiusBottomRight", {
        get: function () {
            return this.i.ks ? this.i.ks.c : NaN;
        },
        set: function (v) {
            this.ensureCornerRadius();
            this.i.ks.c = +v;
            this._a("cornerRadiusBottomRight", this.i.ks.c);
            this.i.ks = this.i.ks;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "cornerRadiusBottomLeft", {
        get: function () {
            return this.i.ks ? this.i.ks.b : NaN;
        },
        set: function (v) {
            this.ensureCornerRadius();
            this.i.ks.b = +v;
            this._a("cornerRadiusBottomLeft", this.i.ks.b);
            this.i.ks = this.i.ks;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "cornerRadiusTopLeft", {
        get: function () {
            return this.i.ks ? this.i.ks.d : NaN;
        },
        set: function (v) {
            this.ensureCornerRadius();
            this.i.ks.d = +v;
            this._a("cornerRadiusTopLeft", this.i.ks.d);
            this.i.ks = this.i.ks;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "cornerRadiusTopRight", {
        get: function () {
            return this.i.ks ? this.i.ks.e : NaN;
        },
        set: function (v) {
            this.ensureCornerRadius();
            this.i.ks.e = +v;
            this._a("cornerRadiusTopRight", this.i.ks.e);
            this.i.ks = this.i.ks;
        },
        enumerable: false,
        configurable: true
    });
    IgcXInputGroupComponent.prototype.ensureCornerRadius = function () {
        if (this.i.ks) {
            return;
        }
        this.i.ks = new CornerRadius(2);
    };
    Object.defineProperty(IgcXInputGroupComponent.prototype, "contentPaddingBottom", {
        get: function () {
            return this.i.oi ? this.i.oi.bottom : NaN;
        },
        set: function (v) {
            this.ensureContentPadding();
            this.i.oi.bottom = +v;
            this._a("contentPaddingBottom", this.i.oi.bottom);
            this.i.oi = this.i.oi;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "contentPaddingLeft", {
        get: function () {
            return this.i.oi ? this.i.oi.left : NaN;
        },
        set: function (v) {
            this.ensureContentPadding();
            this.i.oi.left = +v;
            this._a("contentPaddingLeft", this.i.oi.left);
            this.i.oi = this.i.oi;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "contentPaddingRight", {
        get: function () {
            return this.i.oi ? this.i.oi.right : NaN;
        },
        set: function (v) {
            this.ensureContentPadding();
            this.i.oi.right = +v;
            this._a("contentPaddingRight", this.i.oi.right);
            this.i.oi = this.i.oi;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "contentPaddingTop", {
        get: function () {
            return this.i.oi ? this.i.oi.top : NaN;
        },
        set: function (v) {
            this.ensureContentPadding();
            this.i.oi.top = +v;
            this._a("contentPaddingTop", this.i.oi.top);
            this.i.oi = this.i.oi;
        },
        enumerable: false,
        configurable: true
    });
    IgcXInputGroupComponent.prototype.ensureContentPadding = function () {
        if (this.i.oi) {
            return;
        }
        this.i.oi = new Thickness(2);
    };
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("underlineWidth", this.i.e8);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("underlineRippleWidth", this.i.e7);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("hoverUnderlineWidth", this.i.ek);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("underlineColor", brushToString(this.i.n6));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("underlineRippleColor", brushToString(this.i.n7));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("hoverUnderlineColor", brushToString(this.i.nq));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("focusUnderlineColor", brushToString(this.i.np));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("underlineOpacity", this.i.e5);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("hoverUnderlineOpacity", this.i.ej);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("focusUnderlineOpacity", this.i.eh);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("focusUnderlineRippleOpacity", this.i.ei);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("underlineRippleOpacity", this.i.e6);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("backgroundColor", brushToString(this.i.mc));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("lineTypeBorderWidth", this.i.el);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("lineTypeFocusBorderWidth", this.i.em);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("lineTypeFocusBorderColor", brushToString(this.i.nt));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("lineTypeBorderColor", brushToString(this.i.ns));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeCornerRadiusBottomRight", {
        get: function () {
            return this.i.kx ? this.i.kx.c : NaN;
        },
        set: function (v) {
            this.ensureLineTypeCornerRadius();
            this.i.kx.c = +v;
            this._a("lineTypeCornerRadiusBottomRight", this.i.kx.c);
            this.i.kx = this.i.kx;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeCornerRadiusBottomLeft", {
        get: function () {
            return this.i.kx ? this.i.kx.b : NaN;
        },
        set: function (v) {
            this.ensureLineTypeCornerRadius();
            this.i.kx.b = +v;
            this._a("lineTypeCornerRadiusBottomLeft", this.i.kx.b);
            this.i.kx = this.i.kx;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeCornerRadiusTopLeft", {
        get: function () {
            return this.i.kx ? this.i.kx.d : NaN;
        },
        set: function (v) {
            this.ensureLineTypeCornerRadius();
            this.i.kx.d = +v;
            this._a("lineTypeCornerRadiusTopLeft", this.i.kx.d);
            this.i.kx = this.i.kx;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeCornerRadiusTopRight", {
        get: function () {
            return this.i.kx ? this.i.kx.e : NaN;
        },
        set: function (v) {
            this.ensureLineTypeCornerRadius();
            this.i.kx.e = +v;
            this._a("lineTypeCornerRadiusTopRight", this.i.kx.e);
            this.i.kx = this.i.kx;
        },
        enumerable: false,
        configurable: true
    });
    IgcXInputGroupComponent.prototype.ensureLineTypeCornerRadius = function () {
        if (this.i.kx) {
            return;
        }
        this.i.kx = new CornerRadius(2);
    };
    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeContentPaddingBottom", {
        get: function () {
            return this.i.on ? this.i.on.bottom : NaN;
        },
        set: function (v) {
            this.ensureLineTypeContentPadding();
            this.i.on.bottom = +v;
            this._a("lineTypeContentPaddingBottom", this.i.on.bottom);
            this.i.on = this.i.on;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeContentPaddingLeft", {
        get: function () {
            return this.i.on ? this.i.on.left : NaN;
        },
        set: function (v) {
            this.ensureLineTypeContentPadding();
            this.i.on.left = +v;
            this._a("lineTypeContentPaddingLeft", this.i.on.left);
            this.i.on = this.i.on;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeContentPaddingRight", {
        get: function () {
            return this.i.on ? this.i.on.right : NaN;
        },
        set: function (v) {
            this.ensureLineTypeContentPadding();
            this.i.on.right = +v;
            this._a("lineTypeContentPaddingRight", this.i.on.right);
            this.i.on = this.i.on;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeContentPaddingTop", {
        get: function () {
            return this.i.on ? this.i.on.top : NaN;
        },
        set: function (v) {
            this.ensureLineTypeContentPadding();
            this.i.on.top = +v;
            this._a("lineTypeContentPaddingTop", this.i.on.top);
            this.i.on = this.i.on;
        },
        enumerable: false,
        configurable: true
    });
    IgcXInputGroupComponent.prototype.ensureLineTypeContentPadding = function () {
        if (this.i.on) {
            return;
        }
        this.i.on = new Thickness(2);
    };
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("lineTypeUnderlineWidth", this.i.eu);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("lineTypeUnderlineRippleWidth", this.i.et);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("lineTypeHoverUnderlineWidth", this.i.eq);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("lineTypeUnderlineColor", brushToString(this.i.nw));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("lineTypeUnderlineRippleColor", brushToString(this.i.nx));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("lineTypeHoverUnderlineColor", brushToString(this.i.nv));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("lineTypeFocusUnderlineColor", brushToString(this.i.nu));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("lineTypeUnderlineOpacity", this.i.er);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("lineTypeHoverUnderlineOpacity", this.i.ep);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("lineTypeFocusUnderlineOpacity", this.i.en);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("lineTypeFocusUnderlineRippleOpacity", this.i.eo);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this._a("lineTypeUnderlineRippleOpacity", this.i.es);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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);
            this._a("lineTypeBackgroundColor", brushToString(this.i.nr));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcXInputGroupComponent.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;
            this.