igniteui-webcomponents-inputs 1.3.3

package/esm5/lib/igc-input-group-component.js

@@ -0,0 +1,2646 @@
+import * as tslib_1 from "tslib";
+import { InputGroup } from "./InputGroup";
+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 { IgcInputGroupItemComponent } from './igc-input-group-item-component';
+import { IgcInputGroupInputCollection } from './igc-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";
+var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
+    tslib_1.__extends(IgcInputGroupComponent, _super);
+    function IgcInputGroupComponent() {
+        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 = tslib_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(IgcInputGroupComponent.prototype, "inputs", {
+        /**
+         * A collection or manually added axes for the chart.
+        */
+        get: function () {
+            var _this = this;
+            if (this._inputs === null) {
+                var coll = new IgcInputGroupInputCollection();
+                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: true,
+        configurable: true
+    });
+    IgcInputGroupComponent.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);
+    };
+    IgcInputGroupComponent.prototype.updateInputs = function () {
+        this.contentInputs.length = 0;
+        for (var i = 0; i < this.children.length; i++) {
+            if (this.children[i] instanceof IgcInputGroupItemComponent) {
+                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 IgcInputGroupItemComponent) {
+                    this.contentInputs.push(childContent.children[i]);
+                }
+            }
+        }
+        if (this._inputsAdapter != null) {
+            this._inputsAdapter.notifyContentChanged();
+        }
+    };
+    // supports angular themes or custom properties set in CSS
+    IgcInputGroupComponent.prototype.updateStyle = function () {
+        this._styling(this, this);
+    };
+    IgcInputGroupComponent.prototype.destroy = function () {
+        this._inputGroup.destroy();
+        this._wrapper.destroy();
+    };
+    IgcInputGroupComponent.prototype.createImplementation = function () {
+        return new InputGroup();
+    };
+    IgcInputGroupComponent.prototype.disconnectedCallback = function () {
+        this._disconnected = true;
+        if (this.i) {
+            this.i.onDetachedFromUI();
+        }
+    };
+    IgcInputGroupComponent.prototype.connectedCallback = function () {
+        if (this._disconnected) {
+            this._disconnected = false;
+            if (this.i) {
+                this.i.onAttachedToUI();
+            }
+            return;
+        }
+        this.classList.add("ig-input-group");
+        this.classList.add("igc-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();
+    };
+    IgcInputGroupComponent.prototype.afterContentInit = function () {
+        //this.i.notifySizeChanged();
+    };
+    Object.defineProperty(IgcInputGroupComponent.prototype, "i", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this._implementation;
+        } /**
+                                     * @hidden
+                                     */,
+        enumerable: true,
+        configurable: true
+    });
+    IgcInputGroupComponent._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);
+    };
+    IgcInputGroupComponent.prototype._enqueueSetAttribute = function (attrName, attrValue) {
+        this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
+    };
+    IgcInputGroupComponent.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;
+    };
+    IgcInputGroupComponent.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(IgcInputGroupComponent, "observedAttributes", {
+        get: function () {
+            if (IgcInputGroupComponent._observedAttributesIgcInputGroupComponent == null) {
+                var names = getAllPropertyNames(IgcInputGroupComponent);
+                for (var i = 0; i < names.length; i++) {
+                    names[i] = toSpinal(names[i]);
+                }
+                IgcInputGroupComponent._observedAttributesIgcInputGroupComponent = names;
+            }
+            return IgcInputGroupComponent._observedAttributesIgcInputGroupComponent;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    IgcInputGroupComponent.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
+        if (this._settingAttributes) {
+            return;
+        }
+        var setName = fromSpinal(name);
+        this._updatingFromAttribute = true;
+        this[setName] = newValue;
+        this._updatingFromAttribute = false;
+    };
+    IgcInputGroupComponent.register = function () {
+        if (!IgcInputGroupComponent._isElementRegistered) {
+            IgcInputGroupComponent._isElementRegistered = true;
+            RegisterElementHelper.registerElement(IgcInputGroupComponent.htmlTagName, IgcInputGroupComponent);
+        }
+    };
+    Object.defineProperty(IgcInputGroupComponent.prototype, "displayType", {
+        /**
+     * Gets or sets the display style to use for the button.
+    */
+        get: function () {
+            return this.i.k;
+        },
+        set: function (v) {
+            this.i.k = ensureEnum(InputGroupDisplayType_$type, v);
+            this._a("displayType", enumToString(InputGroupDisplayType_$type, this.i.k));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "density", {
+        /**
+         * Gets or sets the display density to use for the input group.
+        */
+        get: function () {
+            return this.i.h;
+        },
+        set: function (v) {
+            this.i.h = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.h));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualDensity", {
+        /**
+         * Gets the actual display density to use for the input group.
+        */
+        get: function () {
+            return this.i.g;
+        },
+        set: function (v) {
+            this.i.g = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("actualDensity", enumToString(ControlDisplayDensity_$type, this.i.g));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "baseTheme", {
+        /**
+         * Gets or sets the base built in theme to use for the label.
+        */
+        get: function () {
+            return this.i.d;
+        },
+        set: function (v) {
+            this.i.d = ensureEnum(BaseControlTheme_$type, v);
+            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.d));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "inputHasValue", {
+        get: function () {
+            return this.i.af;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualBorderColor", {
+        /**
+         * Gets the actual item background color.
+        */
+        get: function () {
+            return brushToString(this.i.os);
+        },
+        set: function (v) {
+            this.i.os = stringToBrush(v);
+            this._a("actualBorderColor", brushToString(this.i.os));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualFocusBorderColor", {
+        /**
+         * Gets the actual item border color.
+        */
+        get: function () {
+            return brushToString(this.i.ot);
+        },
+        set: function (v) {
+            this.i.ot = stringToBrush(v);
+            this._a("actualFocusBorderColor", brushToString(this.i.ot));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualBorderWidth", {
+        /**
+         * Gets the actual item border width.
+        */
+        get: function () {
+            return this.i.ca;
+        },
+        set: function (v) {
+            this.i.ca = +v;
+            this._a("actualBorderWidth", this.i.ca);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualFocusBorderWidth", {
+        /**
+         * Gets the actual item border width.
+        */
+        get: function () {
+            return this.i.cb;
+        },
+        set: function (v) {
+            this.i.cb = +v;
+            this._a("actualFocusBorderWidth", this.i.cb);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualCornerRadiusBottomRight", {
+        get: function () {
+            return this.i.mz ? this.i.mz.b : NaN;
+        },
+        set: function (v) {
+            this.ensureActualCornerRadius();
+            this.i.mz.b = +v;
+            this._a("actualCornerRadiusBottomRight", this.i.mz.b);
+            this.i.mz = this.i.mz;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualCornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.mz ? this.i.mz.a : NaN;
+        },
+        set: function (v) {
+            this.ensureActualCornerRadius();
+            this.i.mz.a = +v;
+            this._a("actualCornerRadiusBottomLeft", this.i.mz.a);
+            this.i.mz = this.i.mz;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualCornerRadiusTopLeft", {
+        get: function () {
+            return this.i.mz ? this.i.mz.c : NaN;
+        },
+        set: function (v) {
+            this.ensureActualCornerRadius();
+            this.i.mz.c = +v;
+            this._a("actualCornerRadiusTopLeft", this.i.mz.c);
+            this.i.mz = this.i.mz;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualCornerRadiusTopRight", {
+        get: function () {
+            return this.i.mz ? this.i.mz.d : NaN;
+        },
+        set: function (v) {
+            this.ensureActualCornerRadius();
+            this.i.mz.d = +v;
+            this._a("actualCornerRadiusTopRight", this.i.mz.d);
+            this.i.mz = this.i.mz;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    IgcInputGroupComponent.prototype.ensureActualCornerRadius = function () {
+        if (this.i.mz) {
+            return;
+        }
+        this.i.mz = new CornerRadius(2);
+    };
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualContentPaddingBottom", {
+        get: function () {
+            return this.i.tf ? this.i.tf.b : NaN;
+        },
+        set: function (v) {
+            this.ensureActualContentPadding();
+            this.i.tf.b = +v;
+            this._a("actualContentPaddingBottom", this.i.tf.b);
+            this.i.tf = this.i.tf;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualContentPaddingLeft", {
+        get: function () {
+            return this.i.tf ? this.i.tf.c : NaN;
+        },
+        set: function (v) {
+            this.ensureActualContentPadding();
+            this.i.tf.c = +v;
+            this._a("actualContentPaddingLeft", this.i.tf.c);
+            this.i.tf = this.i.tf;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualContentPaddingRight", {
+        get: function () {
+            return this.i.tf ? this.i.tf.d : NaN;
+        },
+        set: function (v) {
+            this.ensureActualContentPadding();
+            this.i.tf.d = +v;
+            this._a("actualContentPaddingRight", this.i.tf.d);
+            this.i.tf = this.i.tf;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualContentPaddingTop", {
+        get: function () {
+            return this.i.tf ? this.i.tf.e : NaN;
+        },
+        set: function (v) {
+            this.ensureActualContentPadding();
+            this.i.tf.e = +v;
+            this._a("actualContentPaddingTop", this.i.tf.e);
+            this.i.tf = this.i.tf;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    IgcInputGroupComponent.prototype.ensureActualContentPadding = function () {
+        if (this.i.tf) {
+            return;
+        }
+        this.i.tf = new Thickness(2);
+    };
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualUnderlineWidth", {
+        /**
+         * Gets the actual width to use for the underline element.
+        */
+        get: function () {
+            return this.i.cj;
+        },
+        set: function (v) {
+            this.i.cj = +v;
+            this._a("actualUnderlineWidth", this.i.cj);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualUnderlineRippleWidth", {
+        /**
+         * Gets the actual width to use for the underline element.
+        */
+        get: function () {
+            return this.i.ci;
+        },
+        set: function (v) {
+            this.i.ci = +v;
+            this._a("actualUnderlineRippleWidth", this.i.ci);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualHoverUnderlineWidth", {
+        /**
+         * Gets the width to use for the underline element when hovered.
+        */
+        get: function () {
+            return this.i.cf;
+        },
+        set: function (v) {
+            this.i.cf = +v;
+            this._a("actualHoverUnderlineWidth", this.i.cf);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualUnderlineColor", {
+        /**
+         * Gets the actual color to use for the underline element.
+        */
+        get: function () {
+            return brushToString(this.i.ow);
+        },
+        set: function (v) {
+            this.i.ow = stringToBrush(v);
+            this._a("actualUnderlineColor", brushToString(this.i.ow));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualUnderlineRippleColor", {
+        /**
+         * Gets the actual color to use for the underline ripple element.
+        */
+        get: function () {
+            return brushToString(this.i.ox);
+        },
+        set: function (v) {
+            this.i.ox = stringToBrush(v);
+            this._a("actualUnderlineRippleColor", brushToString(this.i.ox));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualHoverUnderlineColor", {
+        /**
+         * Gets the actual color to use for the underline element.
+        */
+        get: function () {
+            return brushToString(this.i.ov);
+        },
+        set: function (v) {
+            this.i.ov = stringToBrush(v);
+            this._a("actualHoverUnderlineColor", brushToString(this.i.ov));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualFocusUnderlineColor", {
+        /**
+         * Gets the actual color to use for the underline element when focused.
+        */
+        get: function () {
+            return brushToString(this.i.ou);
+        },
+        set: function (v) {
+            this.i.ou = stringToBrush(v);
+            this._a("actualFocusUnderlineColor", brushToString(this.i.ou));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualUnderlineOpacity", {
+        /**
+         * Gets the actual opacity to use for the underline element.
+        */
+        get: function () {
+            return this.i.cg;
+        },
+        set: function (v) {
+            this.i.cg = +v;
+            this._a("actualUnderlineOpacity", this.i.cg);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualHoverUnderlineOpacity", {
+        /**
+         * Gets the actual opacity to use for the underline element when hovered.
+        */
+        get: function () {
+            return this.i.ce;
+        },
+        set: function (v) {
+            this.i.ce = +v;
+            this._a("actualHoverUnderlineOpacity", this.i.ce);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualFocusUnderlineOpacity", {
+        /**
+         * Gets the actual opacity to use for the underline element when focused.
+        */
+        get: function () {
+            return this.i.cc;
+        },
+        set: function (v) {
+            this.i.cc = +v;
+            this._a("actualFocusUnderlineOpacity", this.i.cc);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualFocusUnderlineRippleOpacity", {
+        /**
+         * Gets the actual opacity to use for the underline ripple element when focused.
+        */
+        get: function () {
+            return this.i.cd;
+        },
+        set: function (v) {
+            this.i.cd = +v;
+            this._a("actualFocusUnderlineRippleOpacity", this.i.cd);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualUnderlineRippleOpacity", {
+        /**
+         * Gets the actual opacity to use for the underline ripple element.
+        */
+        get: function () {
+            return this.i.ch;
+        },
+        set: function (v) {
+            this.i.ch = +v;
+            this._a("actualUnderlineRippleOpacity", this.i.ch);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualBackgroundColor", {
+        /**
+         * Gets the actual opacity to use for the underline ripple element.
+        */
+        get: function () {
+            return brushToString(this.i.or);
+        },
+        set: function (v) {
+            this.i.or = stringToBrush(v);
+            this._a("actualBackgroundColor", brushToString(this.i.or));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderWidth", {
+        /**
+         * Gets or sets the border width to use for the border of the item group.
+        */
+        get: function () {
+            return this.i.cu;
+        },
+        set: function (v) {
+            this.i.cu = +v;
+            this._a("borderWidth", this.i.cu);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "focusBorderWidth", {
+        /**
+         * Gets or sets the border width to use for the border of the item group when focused.
+        */
+        get: function () {
+            return this.i.hc;
+        },
+        set: function (v) {
+            this.i.hc = +v;
+            this._a("focusBorderWidth", this.i.hc);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderColor", {
+        /**
+         * Gets or sets the color to use the border of the input group.
+        */
+        get: function () {
+            return brushToString(this.i.oz);
+        },
+        set: function (v) {
+            this.i.oz = stringToBrush(v);
+            this._a("borderColor", brushToString(this.i.oz));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "cornerRadiusBottomRight", {
+        get: function () {
+            return this.i.m3 ? this.i.m3.b : NaN;
+        },
+        set: function (v) {
+            this.ensureCornerRadius();
+            this.i.m3.b = +v;
+            this._a("cornerRadiusBottomRight", this.i.m3.b);
+            this.i.m3 = this.i.m3;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "cornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.m3 ? this.i.m3.a : NaN;
+        },
+        set: function (v) {
+            this.ensureCornerRadius();
+            this.i.m3.a = +v;
+            this._a("cornerRadiusBottomLeft", this.i.m3.a);
+            this.i.m3 = this.i.m3;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "cornerRadiusTopLeft", {
+        get: function () {
+            return this.i.m3 ? this.i.m3.c : NaN;
+        },
+        set: function (v) {
+            this.ensureCornerRadius();
+            this.i.m3.c = +v;
+            this._a("cornerRadiusTopLeft", this.i.m3.c);
+            this.i.m3 = this.i.m3;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "cornerRadiusTopRight", {
+        get: function () {
+            return this.i.m3 ? this.i.m3.d : NaN;
+        },
+        set: function (v) {
+            this.ensureCornerRadius();
+            this.i.m3.d = +v;
+            this._a("cornerRadiusTopRight", this.i.m3.d);
+            this.i.m3 = this.i.m3;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    IgcInputGroupComponent.prototype.ensureCornerRadius = function () {
+        if (this.i.m3) {
+            return;
+        }
+        this.i.m3 = new CornerRadius(2);
+    };
+    Object.defineProperty(IgcInputGroupComponent.prototype, "contentPaddingBottom", {
+        get: function () {
+            return this.i.tj ? this.i.tj.b : NaN;
+        },
+        set: function (v) {
+            this.ensureContentPadding();
+            this.i.tj.b = +v;
+            this._a("contentPaddingBottom", this.i.tj.b);
+            this.i.tj = this.i.tj;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "contentPaddingLeft", {
+        get: function () {
+            return this.i.tj ? this.i.tj.c : NaN;
+        },
+        set: function (v) {
+            this.ensureContentPadding();
+            this.i.tj.c = +v;
+            this._a("contentPaddingLeft", this.i.tj.c);
+            this.i.tj = this.i.tj;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "contentPaddingRight", {
+        get: function () {
+            return this.i.tj ? this.i.tj.d : NaN;
+        },
+        set: function (v) {
+            this.ensureContentPadding();
+            this.i.tj.d = +v;
+            this._a("contentPaddingRight", this.i.tj.d);
+            this.i.tj = this.i.tj;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "contentPaddingTop", {
+        get: function () {
+            return this.i.tj ? this.i.tj.e : NaN;
+        },
+        set: function (v) {
+            this.ensureContentPadding();
+            this.i.tj.e = +v;
+            this._a("contentPaddingTop", this.i.tj.e);
+            this.i.tj = this.i.tj;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    IgcInputGroupComponent.prototype.ensureContentPadding = function () {
+        if (this.i.tj) {
+            return;
+        }
+        this.i.tj = new Thickness(2);
+    };
+    Object.defineProperty(IgcInputGroupComponent.prototype, "underlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element.
+        */
+        get: function () {
+            return this.i.h4;
+        },
+        set: function (v) {
+            this.i.h4 = +v;
+            this._a("underlineWidth", this.i.h4);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "underlineRippleWidth", {
+        /**
+         * Gets or sets the width to use for the underline element.
+        */
+        get: function () {
+            return this.i.h3;
+        },
+        set: function (v) {
+            this.i.h3 = +v;
+            this._a("underlineRippleWidth", this.i.h3);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "hoverUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when hovered.
+        */
+        get: function () {
+            return this.i.hg;
+        },
+        set: function (v) {
+            this.i.hg = +v;
+            this._a("hoverUnderlineWidth", this.i.hg);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "underlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get: function () {
+            return brushToString(this.i.s7);
+        },
+        set: function (v) {
+            this.i.s7 = stringToBrush(v);
+            this._a("underlineColor", brushToString(this.i.s7));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "underlineRippleColor", {
+        /**
+         * Gets or sets the color to use for the underline ripple element.
+        */
+        get: function () {
+            return brushToString(this.i.s8);
+        },
+        set: function (v) {
+            this.i.s8 = stringToBrush(v);
+            this._a("underlineRippleColor", brushToString(this.i.s8));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "hoverUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get: function () {
+            return brushToString(this.i.ss);
+        },
+        set: function (v) {
+            this.i.ss = stringToBrush(v);
+            this._a("hoverUnderlineColor", brushToString(this.i.ss));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "focusUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get: function () {
+            return brushToString(this.i.sr);
+        },
+        set: function (v) {
+            this.i.sr = stringToBrush(v);
+            this._a("focusUnderlineColor", brushToString(this.i.sr));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "underlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get: function () {
+            return this.i.h1;
+        },
+        set: function (v) {
+            this.i.h1 = +v;
+            this._a("underlineOpacity", this.i.h1);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "hoverUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get: function () {
+            return this.i.hf;
+        },
+        set: function (v) {
+            this.i.hf = +v;
+            this._a("hoverUnderlineOpacity", this.i.hf);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "focusUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get: function () {
+            return this.i.hd;
+        },
+        set: function (v) {
+            this.i.hd = +v;
+            this._a("focusUnderlineOpacity", this.i.hd);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "focusUnderlineRippleOpacity", {
+        /**
+         * Gets or sets the opacity to use for the underline ripple element when focused.
+        */
+        get: function () {
+            return this.i.he;
+        },
+        set: function (v) {
+            this.i.he = +v;
+            this._a("focusUnderlineRippleOpacity", this.i.he);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "underlineRippleOpacity", {
+        /**
+         * Gets or sets the opacity to use for the underline ripple element.
+        */
+        get: function () {
+            return this.i.h2;
+        },
+        set: function (v) {
+            this.i.h2 = +v;
+            this._a("underlineRippleOpacity", this.i.h2);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "backgroundColor", {
+        /**
+         * Gets or sets the background color to use for the input group.
+        */
+        get: function () {
+            return brushToString(this.i.oy);
+        },
+        set: function (v) {
+            this.i.oy = stringToBrush(v);
+            this._a("backgroundColor", brushToString(this.i.oy));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.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.hh;
+        },
+        set: function (v) {
+            this.i.hh = +v;
+            this._a("lineTypeBorderWidth", this.i.hh);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.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.hi;
+        },
+        set: function (v) {
+            this.i.hi = +v;
+            this._a("lineTypeFocusBorderWidth", this.i.hi);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.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.sv);
+        },
+        set: function (v) {
+            this.i.sv = stringToBrush(v);
+            this._a("lineTypeFocusBorderColor", brushToString(this.i.sv));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.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.su);
+        },
+        set: function (v) {
+            this.i.su = stringToBrush(v);
+            this._a("lineTypeBorderColor", brushToString(this.i.su));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeCornerRadiusBottomRight", {
+        get: function () {
+            return this.i.nj ? this.i.nj.b : NaN;
+        },
+        set: function (v) {
+            this.ensureLineTypeCornerRadius();
+            this.i.nj.b = +v;
+            this._a("lineTypeCornerRadiusBottomRight", this.i.nj.b);
+            this.i.nj = this.i.nj;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeCornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.nj ? this.i.nj.a : NaN;
+        },
+        set: function (v) {
+            this.ensureLineTypeCornerRadius();
+            this.i.nj.a = +v;
+            this._a("lineTypeCornerRadiusBottomLeft", this.i.nj.a);
+            this.i.nj = this.i.nj;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeCornerRadiusTopLeft", {
+        get: function () {
+            return this.i.nj ? this.i.nj.c : NaN;
+        },
+        set: function (v) {
+            this.ensureLineTypeCornerRadius();
+            this.i.nj.c = +v;
+            this._a("lineTypeCornerRadiusTopLeft", this.i.nj.c);
+            this.i.nj = this.i.nj;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeCornerRadiusTopRight", {
+        get: function () {
+            return this.i.nj ? this.i.nj.d : NaN;
+        },
+        set: function (v) {
+            this.ensureLineTypeCornerRadius();
+            this.i.nj.d = +v;
+            this._a("lineTypeCornerRadiusTopRight", this.i.nj.d);
+            this.i.nj = this.i.nj;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    IgcInputGroupComponent.prototype.ensureLineTypeCornerRadius = function () {
+        if (this.i.nj) {
+            return;
+        }
+        this.i.nj = new CornerRadius(2);
+    };
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeContentPaddingBottom", {
+        get: function () {
+            return this.i.tz ? this.i.tz.b : NaN;
+        },
+        set: function (v) {
+            this.ensureLineTypeContentPadding();
+            this.i.tz.b = +v;
+            this._a("lineTypeContentPaddingBottom", this.i.tz.b);
+            this.i.tz = this.i.tz;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeContentPaddingLeft", {
+        get: function () {
+            return this.i.tz ? this.i.tz.c : NaN;
+        },
+        set: function (v) {
+            this.ensureLineTypeContentPadding();
+            this.i.tz.c = +v;
+            this._a("lineTypeContentPaddingLeft", this.i.tz.c);
+            this.i.tz = this.i.tz;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeContentPaddingRight", {
+        get: function () {
+            return this.i.tz ? this.i.tz.d : NaN;
+        },
+        set: function (v) {
+            this.ensureLineTypeContentPadding();
+            this.i.tz.d = +v;
+            this._a("lineTypeContentPaddingRight", this.i.tz.d);
+            this.i.tz = this.i.tz;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeContentPaddingTop", {
+        get: function () {
+            return this.i.tz ? this.i.tz.e : NaN;
+        },
+        set: function (v) {
+            this.ensureLineTypeContentPadding();
+            this.i.tz.e = +v;
+            this._a("lineTypeContentPaddingTop", this.i.tz.e);
+            this.i.tz = this.i.tz;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    IgcInputGroupComponent.prototype.ensureLineTypeContentPadding = function () {
+        if (this.i.tz) {
+            return;
+        }
+        this.i.tz = new Thickness(2);
+    };
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when type is line.
+        */
+        get: function () {
+            return this.i.hq;
+        },
+        set: function (v) {
+            this.i.hq = +v;
+            this._a("lineTypeUnderlineWidth", this.i.hq);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeUnderlineRippleWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when type is line.
+        */
+        get: function () {
+            return this.i.hp;
+        },
+        set: function (v) {
+            this.i.hp = +v;
+            this._a("lineTypeUnderlineRippleWidth", this.i.hp);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeHoverUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when hovered when type is line.
+        */
+        get: function () {
+            return this.i.hm;
+        },
+        set: function (v) {
+            this.i.hm = +v;
+            this._a("lineTypeHoverUnderlineWidth", this.i.hm);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is line.
+        */
+        get: function () {
+            return brushToString(this.i.sy);
+        },
+        set: function (v) {
+            this.i.sy = stringToBrush(v);
+            this._a("lineTypeUnderlineColor", brushToString(this.i.sy));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeUnderlineRippleColor", {
+        /**
+         * Gets or sets the color to use for the underline ripple element when type is line.
+        */
+        get: function () {
+            return brushToString(this.i.sz);
+        },
+        set: function (v) {
+            this.i.sz = stringToBrush(v);
+            this._a("lineTypeUnderlineRippleColor", brushToString(this.i.sz));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeHoverUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is line.
+        */
+        get: function () {
+            return brushToString(this.i.sx);
+        },
+        set: function (v) {
+            this.i.sx = stringToBrush(v);
+            this._a("lineTypeHoverUnderlineColor", brushToString(this.i.sx));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeFocusUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is line.
+        */
+        get: function () {
+            return brushToString(this.i.sw);
+        },
+        set: function (v) {
+            this.i.sw = stringToBrush(v);
+            this._a("lineTypeFocusUnderlineColor", brushToString(this.i.sw));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is line.
+        */
+        get: function () {
+            return this.i.hn;
+        },
+        set: function (v) {
+            this.i.hn = +v;
+            this._a("lineTypeUnderlineOpacity", this.i.hn);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeHoverUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is line.
+        */
+        get: function () {
+            return this.i.hl;
+        },
+        set: function (v) {
+            this.i.hl = +v;
+            this._a("lineTypeHoverUnderlineOpacity", this.i.hl);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeFocusUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is line.
+        */
+        get: function () {
+            return this.i.hj;
+        },
+        set: function (v) {
+            this.i.hj = +v;
+            this._a("lineTypeFocusUnderlineOpacity", this.i.hj);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.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.hk;
+        },
+        set: function (v) {
+            this.i.hk = +v;
+            this._a("lineTypeFocusUnderlineRippleOpacity", this.i.hk);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeUnderlineRippleOpacity", {
+        /**
+         * Gets or sets the opacity to use for the underline ripple element when type is line.
+        */
+        get: function () {
+            return this.i.ho;
+        },
+        set: function (v) {
+            this.i.ho = +v;
+            this._a("lineTypeUnderlineRippleOpacity", this.i.ho);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeBackgroundColor", {
+        /**
+         * Gets or sets the background color to use for the input group when type is line.
+        */
+        get: function () {
+            return brushToString(this.i.st);
+        },
+        set: function (v) {
+            this.i.st = stringToBrush(v);
+            this._a("lineTypeBackgroundColor", brushToString(this.i.st));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.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.cv;
+        },
+        set: function (v) {
+            this.i.cv = +v;
+            this._a("boxTypeBorderWidth", this.i.cv);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.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.cw;
+        },
+        set: function (v) {
+            this.i.cw = +v;
+            this._a("boxTypeFocusBorderWidth", this.i.cw);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.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.o9);
+        },
+        set: function (v) {
+            this.i.o9 = stringToBrush(v);
+            this._a("boxTypeFocusBorderColor", brushToString(this.i.o9));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.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.o8);
+        },
+        set: function (v) {
+            this.i.o8 = stringToBrush(v);
+            this._a("boxTypeBorderColor", brushToString(this.i.o8));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeCornerRadiusBottomRight", {
+        get: function () {
+            return this.i.m1 ? this.i.m1.b : NaN;
+        },
+        set: function (v) {
+            this.ensureBoxTypeCornerRadius();
+            this.i.m1.b = +v;
+            this._a("boxTypeCornerRadiusBottomRight", this.i.m1.b);
+            this.i.m1 = this.i.m1;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeCornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.m1 ? this.i.m1.a : NaN;
+        },
+        set: function (v) {
+            this.ensureBoxTypeCornerRadius();
+            this.i.m1.a = +v;
+            this._a("boxTypeCornerRadiusBottomLeft", this.i.m1.a);
+            this.i.m1 = this.i.m1;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeCornerRadiusTopLeft", {
+        get: function () {
+            return this.i.m1 ? this.i.m1.c : NaN;
+        },
+        set: function (v) {
+            this.ensureBoxTypeCornerRadius();
+            this.i.m1.c = +v;
+            this._a("boxTypeCornerRadiusTopLeft", this.i.m1.c);
+            this.i.m1 = this.i.m1;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeCornerRadiusTopRight", {
+        get: function () {
+            return this.i.m1 ? this.i.m1.d : NaN;
+        },
+        set: function (v) {
+            this.ensureBoxTypeCornerRadius();
+            this.i.m1.d = +v;
+            this._a("boxTypeCornerRadiusTopRight", this.i.m1.d);
+            this.i.m1 = this.i.m1;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    IgcInputGroupComponent.prototype.ensureBoxTypeCornerRadius = function () {
+        if (this.i.m1) {
+            return;
+        }
+        this.i.m1 = new CornerRadius(2);
+    };
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeContentPaddingBottom", {
+        get: function () {
+            return this.i.th ? this.i.th.b : NaN;
+        },
+        set: function (v) {
+            this.ensureBoxTypeContentPadding();
+            this.i.th.b = +v;
+            this._a("boxTypeContentPaddingBottom", this.i.th.b);
+            this.i.th = this.i.th;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeContentPaddingLeft", {
+        get: function () {
+            return this.i.th ? this.i.th.c : NaN;
+        },
+        set: function (v) {
+            this.ensureBoxTypeContentPadding();
+            this.i.th.c = +v;
+            this._a("boxTypeContentPaddingLeft", this.i.th.c);
+            this.i.th = this.i.th;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeContentPaddingRight", {
+        get: function () {
+            return this.i.th ? this.i.th.d : NaN;
+        },
+        set: function (v) {
+            this.ensureBoxTypeContentPadding();
+            this.i.th.d = +v;
+            this._a("boxTypeContentPaddingRight", this.i.th.d);
+            this.i.th = this.i.th;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeContentPaddingTop", {
+        get: function () {
+            return this.i.th ? this.i.th.e : NaN;
+        },
+        set: function (v) {
+            this.ensureBoxTypeContentPadding();
+            this.i.th.e = +v;
+            this._a("boxTypeContentPaddingTop", this.i.th.e);
+            this.i.th = this.i.th;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    IgcInputGroupComponent.prototype.ensureBoxTypeContentPadding = function () {
+        if (this.i.th) {
+            return;
+        }
+        this.i.th = new Thickness(2);
+    };
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when type is box.
+        */
+        get: function () {
+            return this.i.c4;
+        },
+        set: function (v) {
+            this.i.c4 = +v;
+            this._a("boxTypeUnderlineWidth", this.i.c4);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeUnderlineRippleWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when type is box.
+        */
+        get: function () {
+            return this.i.c3;
+        },
+        set: function (v) {
+            this.i.c3 = +v;
+            this._a("boxTypeUnderlineRippleWidth", this.i.c3);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeHoverUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when hovered when type is box.
+        */
+        get: function () {
+            return this.i.c0;
+        },
+        set: function (v) {
+            this.i.c0 = +v;
+            this._a("boxTypeHoverUnderlineWidth", this.i.c0);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is box.
+        */
+        get: function () {
+            return brushToString(this.i.pc);
+        },
+        set: function (v) {
+            this.i.pc = stringToBrush(v);
+            this._a("boxTypeUnderlineColor", brushToString(this.i.pc));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeUnderlineRippleColor", {
+        /**
+         * Gets or sets the color to use for the underline ripple element when type is box.
+        */
+        get: function () {
+            return brushToString(this.i.pd);
+        },
+        set: function (v) {
+            this.i.pd = stringToBrush(v);
+            this._a("boxTypeUnderlineRippleColor", brushToString(this.i.pd));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeHoverUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is box.
+        */
+        get: function () {
+            return brushToString(this.i.pb);
+        },
+        set: function (v) {
+            this.i.pb = stringToBrush(v);
+            this._a("boxTypeHoverUnderlineColor", brushToString(this.i.pb));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeFocusUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is box.
+        */
+        get: function () {
+            return brushToString(this.i.pa);
+        },
+        set: function (v) {
+            this.i.pa = stringToBrush(v);
+            this._a("boxTypeFocusUnderlineColor", brushToString(this.i.pa));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is box.
+        */
+        get: function () {
+            return this.i.c1;
+        },
+        set: function (v) {
+            this.i.c1 = +v;
+            this._a("boxTypeUnderlineOpacity", this.i.c1);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeHoverUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is box.
+        */
+        get: function () {
+            return this.i.cz;
+        },
+        set: function (v) {
+            this.i.cz = +v;
+            this._a("boxTypeHoverUnderlineOpacity", this.i.cz);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeFocusUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is box.
+        */
+        get: function () {
+            return this.i.cx;
+        },
+        set: function (v) {
+            this.i.cx = +v;
+            this._a("boxTypeFocusUnderlineOpacity", this.i.cx);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeFocusUnderlineRippleOpacity", {
+        /**
+         * Gets or sets the opacity to use for the underline ripple element when focused when type is box.
+        */
+        get: function () {
+            return this.i.cy;
+        },
+        set: function (v) {
+            this.i.cy = +v;
+            this._a("boxTypeFocusUnderlineRippleOpacity", this.i.cy);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeUnderlineRippleOpacity", {
+        /**
+         * Gets or sets the opacity to use for the underline ripple element when type is box.
+        */
+        get: function () {
+            return this.i.c2;
+        },
+        set: function (v) {
+            this.i.c2 = +v;
+            this._a("boxTypeUnderlineRippleOpacity", this.i.c2);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeBackgroundColor", {
+        /**
+         * Gets or sets the background color to use for the input group when type is box.
+        */
+        get: function () {
+            return brushToString(this.i.o7);
+        },
+        set: function (v) {
+            this.i.o7 = stringToBrush(v);
+            this._a("boxTypeBackgroundColor", brushToString(this.i.o7));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeBorderWidth", {
+        /**
+         * Gets or sets the border width to use for the border of the item group when using type line.
+        */
+        get: function () {
+            return this.i.ck;
+        },
+        set: function (v) {
+            this.i.ck = +v;
+            this._a("borderTypeBorderWidth", this.i.ck);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeFocusBorderWidth", {
+        /**
+         * Gets or sets the border width to use for the border of the item group when focused when type is border.
+        */
+        get: function () {
+            return this.i.cl;
+        },
+        set: function (v) {
+            this.i.cl = +v;
+            this._a("borderTypeFocusBorderWidth", this.i.cl);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeFocusBorderColor", {
+        /**
+         * Gets or sets the focus color to use the border of the input group when type is border.
+        */
+        get: function () {
+            return brushToString(this.i.o2);
+        },
+        set: function (v) {
+            this.i.o2 = stringToBrush(v);
+            this._a("borderTypeFocusBorderColor", brushToString(this.i.o2));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeBorderColor", {
+        /**
+         * Gets or sets the color to use the border of the input group when type is border.
+        */
+        get: function () {
+            return brushToString(this.i.o1);
+        },
+        set: function (v) {
+            this.i.o1 = stringToBrush(v);
+            this._a("borderTypeBorderColor", brushToString(this.i.o1));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeCornerRadiusBottomRight", {
+        get: function () {
+            return this.i.m0 ? this.i.m0.b : NaN;
+        },
+        set: function (v) {
+            this.ensureBorderTypeCornerRadius();
+            this.i.m0.b = +v;
+            this._a("borderTypeCornerRadiusBottomRight", this.i.m0.b);
+            this.i.m0 = this.i.m0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeCornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.m0 ? this.i.m0.a : NaN;
+        },
+        set: function (v) {
+            this.ensureBorderTypeCornerRadius();
+            this.i.m0.a = +v;
+            this._a("borderTypeCornerRadiusBottomLeft", this.i.m0.a);
+            this.i.m0 = this.i.m0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeCornerRadiusTopLeft", {
+        get: function () {
+            return this.i.m0 ? this.i.m0.c : NaN;
+        },
+        set: function (v) {
+            this.ensureBorderTypeCornerRadius();
+            this.i.m0.c = +v;
+            this._a("borderTypeCornerRadiusTopLeft", this.i.m0.c);
+            this.i.m0 = this.i.m0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeCornerRadiusTopRight", {
+        get: function () {
+            return this.i.m0 ? this.i.m0.d : NaN;
+        },
+        set: function (v) {
+            this.ensureBorderTypeCornerRadius();
+            this.i.m0.d = +v;
+            this._a("borderTypeCornerRadiusTopRight", this.i.m0.d);
+            this.i.m0 = this.i.m0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    IgcInputGroupComponent.prototype.ensureBorderTypeCornerRadius = function () {
+        if (this.i.m0) {
+            return;
+        }
+        this.i.m0 = new CornerRadius(2);
+    };
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeContentPaddingBottom", {
+        get: function () {
+            return this.i.tg ? this.i.tg.b : NaN;
+        },
+        set: function (v) {
+            this.ensureBorderTypeContentPadding();
+            this.i.tg.b = +v;
+            this._a("borderTypeContentPaddingBottom", this.i.tg.b);
+            this.i.tg = this.i.tg;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeContentPaddingLeft", {
+        get: function () {
+            return this.i.tg ? this.i.tg.c : NaN;
+        },
+        set: function (v) {
+            this.ensureBorderTypeContentPadding();
+            this.i.tg.c = +v;
+            this._a("borderTypeContentPaddingLeft", this.i.tg.c);
+            this.i.tg = this.i.tg;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeContentPaddingRight", {
+        get: function () {
+            return this.i.tg ? this.i.tg.d : NaN;
+        },
+        set: function (v) {
+            this.ensureBorderTypeContentPadding();
+            this.i.tg.d = +v;
+            this._a("borderTypeContentPaddingRight", this.i.tg.d);
+            this.i.tg = this.i.tg;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeContentPaddingTop", {
+        get: function () {
+            return this.i.tg ? this.i.tg.e : NaN;
+        },
+        set: function (v) {
+            this.ensureBorderTypeContentPadding();
+            this.i.tg.e = +v;
+            this._a("borderTypeContentPaddingTop", this.i.tg.e);
+            this.i.tg = this.i.tg;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    IgcInputGroupComponent.prototype.ensureBorderTypeContentPadding = function () {
+        if (this.i.tg) {
+            return;
+        }
+        this.i.tg = new Thickness(2);
+    };
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when type is border.
+        */
+        get: function () {
+            return this.i.ct;
+        },
+        set: function (v) {
+            this.i.ct = +v;
+            this._a("borderTypeUnderlineWidth", this.i.ct);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeUnderlineRippleWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when type is border.
+        */
+        get: function () {
+            return this.i.cs;
+        },
+        set: function (v) {
+            this.i.cs = +v;
+            this._a("borderTypeUnderlineRippleWidth", this.i.cs);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeHoverUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when hovered when type is border.
+        */
+        get: function () {
+            return this.i.cp;
+        },
+        set: function (v) {
+            this.i.cp = +v;
+            this._a("borderTypeHoverUnderlineWidth", this.i.cp);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is border.
+        */
+        get: function () {
+            return brushToString(this.i.o5);
+        },
+        set: function (v) {
+            this.i.o5 = stringToBrush(v);
+            this._a("borderTypeUnderlineColor", brushToString(this.i.o5));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeUnderlineRippleColor", {
+        /**
+         * Gets or sets the color to use for the underline ripple element when type is border.
+        */
+        get: function () {
+            return brushToString(this.i.o6);
+        },
+        set: function (v) {
+            this.i.o6 = stringToBrush(v);
+            this._a("borderTypeUnderlineRippleColor", brushToString(this.i.o6));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeHoverUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is border.
+        */
+        get: function () {
+            return brushToString(this.i.o4);
+        },
+        set: function (v) {
+            this.i.o4 = stringToBrush(v);
+            this._a("borderTypeHoverUnderlineColor", brushToString(this.i.o4));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeFocusUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is border.
+        */
+        get: function () {
+            return brushToString(this.i.o3);
+        },
+        set: function (v) {
+            this.i.o3 = stringToBrush(v);
+            this._a("borderTypeFocusUnderlineColor", brushToString(this.i.o3));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is border.
+        */
+        get: function () {
+            return this.i.cq;
+        },
+        set: function (v) {
+            this.i.cq = +v;
+            this._a("borderTypeUnderlineOpacity", this.i.cq);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeHoverUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is border.
+        */
+        get: function () {
+            return this.i.co;
+        },
+        set: function (v) {
+            this.i.co = +v;
+            this._a("borderTypeHoverUnderlineOpacity", this.i.co);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeFocusUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is border.
+        */
+        get: function () {
+            return this.i.cm;
+        },
+        set: function (v) {
+            this.i.cm = +v;
+            this._a("borderTypeFocusUnderlineOpacity", this.i.cm);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeFocusUnderlineRippleOpacity", {
+        /**
+         * Gets or sets the opacity to use for the underline ripple element when focused when type is border.
+        */
+        get: function () {
+            return this.i.cn;
+        },
+        set: function (v) {
+            this.i.cn = +v;
+            this._a("borderTypeFocusUnderlineRippleOpacity", this.i.cn);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeUnderlineRippleOpacity", {
+        /**
+         * Gets or sets the opacity to use for the underline ripple element when type is border.
+        */
+        get: function () {
+            return this.i.cr;
+        },
+        set: function (v) {
+            this.i.cr = +v;
+            this._a("borderTypeUnderlineRippleOpacity", this.i.cr);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeBackgroundColor", {
+        /**
+         * Gets or sets the background color to use for the input group when type is border.
+        */
+        get: function () {
+            return brushToString(this.i.o0);
+        },
+        set: function (v) {
+            this.i.o0 = stringToBrush(v);
+            this._a("borderTypeBackgroundColor", brushToString(this.i.o0));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeBorderWidth", {
+        /**
+         * Gets or sets the search width to use for the border of the item group when using type line.
+        */
+        get: function () {
+            return this.i.hr;
+        },
+        set: function (v) {
+            this.i.hr = +v;
+            this._a("searchTypeBorderWidth", this.i.hr);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeFocusBorderWidth", {
+        /**
+         * Gets or sets the search width to use for the border of the item group when focused when type is search.
+        */
+        get: function () {
+            return this.i.hs;
+        },
+        set: function (v) {
+            this.i.hs = +v;
+            this._a("searchTypeFocusBorderWidth", this.i.hs);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeFocusBorderColor", {
+        /**
+         * Gets or sets the focus color to use the search of the input group when type is search.
+        */
+        get: function () {
+            return brushToString(this.i.s2);
+        },
+        set: function (v) {
+            this.i.s2 = stringToBrush(v);
+            this._a("searchTypeFocusBorderColor", brushToString(this.i.s2));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeBorderColor", {
+        /**
+         * Gets or sets the color to use the search of the input group when type is search.
+        */
+        get: function () {
+            return brushToString(this.i.s1);
+        },
+        set: function (v) {
+            this.i.s1 = stringToBrush(v);
+            this._a("searchTypeBorderColor", brushToString(this.i.s1));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeCornerRadiusBottomRight", {
+        get: function () {
+            return this.i.nk ? this.i.nk.b : NaN;
+        },
+        set: function (v) {
+            this.ensureSearchTypeCornerRadius();
+            this.i.nk.b = +v;
+            this._a("searchTypeCornerRadiusBottomRight", this.i.nk.b);
+            this.i.nk = this.i.nk;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeCornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.nk ? this.i.nk.a : NaN;
+        },
+        set: function (v) {
+            this.ensureSearchTypeCornerRadius();
+            this.i.nk.a = +v;
+            this._a("searchTypeCornerRadiusBottomLeft", this.i.nk.a);
+            this.i.nk = this.i.nk;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeCornerRadiusTopLeft", {
+        get: function () {
+            return this.i.nk ? this.i.nk.c : NaN;
+        },
+        set: function (v) {
+            this.ensureSearchTypeCornerRadius();
+            this.i.nk.c = +v;
+            this._a("searchTypeCornerRadiusTopLeft", this.i.nk.c);
+            this.i.nk = this.i.nk;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeCornerRadiusTopRight", {
+        get: function () {
+            return this.i.nk ? this.i.nk.d : NaN;
+        },
+        set: function (v) {
+            this.ensureSearchTypeCornerRadius();
+            this.i.nk.d = +v;
+            this._a("searchTypeCornerRadiusTopRight", this.i.nk.d);
+            this.i.nk = this.i.nk;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    IgcInputGroupComponent.prototype.ensureSearchTypeCornerRadius = function () {
+        if (this.i.nk) {
+            return;
+        }
+        this.i.nk = new CornerRadius(2);
+    };
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeContentPaddingBottom", {
+        get: function () {
+            return this.i.t0 ? this.i.t0.b : NaN;
+        },
+        set: function (v) {
+            this.ensureSearchTypeContentPadding();
+            this.i.t0.b = +v;
+            this._a("searchTypeContentPaddingBottom", this.i.t0.b);
+            this.i.t0 = this.i.t0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeContentPaddingLeft", {
+        get: function () {
+            return this.i.t0 ? this.i.t0.c : NaN;
+        },
+        set: function (v) {
+            this.ensureSearchTypeContentPadding();
+            this.i.t0.c = +v;
+            this._a("searchTypeContentPaddingLeft", this.i.t0.c);
+            this.i.t0 = this.i.t0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeContentPaddingRight", {
+        get: function () {
+            return this.i.t0 ? this.i.t0.d : NaN;
+        },
+        set: function (v) {
+            this.ensureSearchTypeContentPadding();
+            this.i.t0.d = +v;
+            this._a("searchTypeContentPaddingRight", this.i.t0.d);
+            this.i.t0 = this.i.t0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeContentPaddingTop", {
+        get: function () {
+            return this.i.t0 ? this.i.t0.e : NaN;
+        },
+        set: function (v) {
+            this.ensureSearchTypeContentPadding();
+            this.i.t0.e = +v;
+            this._a("searchTypeContentPaddingTop", this.i.t0.e);
+            this.i.t0 = this.i.t0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    IgcInputGroupComponent.prototype.ensureSearchTypeContentPadding = function () {
+        if (this.i.t0) {
+            return;
+        }
+        this.i.t0 = new Thickness(2);
+    };
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when type is search.
+        */
+        get: function () {
+            return this.i.h0;
+        },
+        set: function (v) {
+            this.i.h0 = +v;
+            this._a("searchTypeUnderlineWidth", this.i.h0);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeUnderlineRippleWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when type is search.
+        */
+        get: function () {
+            return this.i.hz;
+        },
+        set: function (v) {
+            this.i.hz = +v;
+            this._a("searchTypeUnderlineRippleWidth", this.i.hz);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeHoverUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when hovered when type is search.
+        */
+        get: function () {
+            return this.i.hw;
+        },
+        set: function (v) {
+            this.i.hw = +v;
+            this._a("searchTypeHoverUnderlineWidth", this.i.hw);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is search.
+        */
+        get: function () {
+            return brushToString(this.i.s5);
+        },
+        set: function (v) {
+            this.i.s5 = stringToBrush(v);
+            this._a("searchTypeUnderlineColor", brushToString(this.i.s5));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeUnderlineRippleColor", {
+        /**
+         * Gets or sets the color to use for the underline ripple element when type is search.
+        */
+        get: function () {
+            return brushToString(this.i.s6);
+        },
+        set: function (v) {
+            this.i.s6 = stringToBrush(v);
+            this._a("searchTypeUnderlineRippleColor", brushToString(this.i.s6));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeHoverUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is search.
+        */
+        get: function () {
+            return brushToString(this.i.s4);
+        },
+        set: function (v) {
+            this.i.s4 = stringToBrush(v);
+            this._a("searchTypeHoverUnderlineColor", brushToString(this.i.s4));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeFocusUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is search.
+        */
+        get: function () {
+            return brushToString(this.i.s3);
+        },
+        set: function (v) {
+            this.i.s3 = stringToBrush(v);
+            this._a("searchTypeFocusUnderlineColor", brushToString(this.i.s3));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is search.
+        */
+        get: function () {
+            return this.i.hx;
+        },
+        set: function (v) {
+            this.i.hx = +v;
+            this._a("searchTypeUnderlineOpacity", this.i.hx);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeHoverUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is search.
+        */
+        get: function () {
+            return this.i.hv;
+        },
+        set: function (v) {
+            this.i.hv = +v;
+            this._a("searchTypeHoverUnderlineOpacity", this.i.hv);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeFocusUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is search.
+        */
+        get: function () {
+            return this.i.ht;
+        },
+        set: function (v) {
+            this.i.ht = +v;
+            this._a("searchTypeFocusUnderlineOpacity", this.i.ht);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeFocusUnderlineRippleOpacity", {
+        /**
+         * Gets or sets the opacity to use for the underline ripple element when focused when type is search.
+        */
+        get: function () {
+            return this.i.hu;
+        },
+        set: function (v) {
+            this.i.hu = +v;
+            this._a("searchTypeFocusUnderlineRippleOpacity", this.i.hu);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeUnderlineRippleOpacity", {
+        /**
+         * Gets or sets the opacity to use for the underline ripple element when type is search.
+        */
+        get: function () {
+            return this.i.hy;
+        },
+        set: function (v) {
+            this.i.hy = +v;
+            this._a("searchTypeUnderlineRippleOpacity", this.i.hy);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeBackgroundColor", {
+        /**
+         * Gets or sets the background color to use for the input group when type is search.
+        */
+        get: function () {
+            return brushToString(this.i.s0);
+        },
+        set: function (v) {
+            this.i.s0 = stringToBrush(v);
+            this._a("searchTypeBackgroundColor", brushToString(this.i.s0));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "isExpanded", {
+        /**
+         * Gets or sets whether the input group is expanded or not.
+        */
+        get: function () {
+            return this.i.ah;
+        },
+        set: function (v) {
+            this.i.ah = ensureBool(v);
+            this._a("isExpanded", this.i.ah);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "isHovered", {
+        /**
+         * Gets or sets whether the input group is hovered or not.
+        */
+        get: function () {
+            return this.i.aj;
+        },
+        set: function (v) {
+            this.i.aj = ensureBool(v);
+            this._a("isHovered", this.i.aj);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "isFocused", {
+        /**
+         * Gets or sets whether the input group is hovered or not.
+        */
+        get: function () {
+            return this.i.ai;
+        },
+        set: function (v) {
+            this.i.ai = ensureBool(v);
+            this._a("isFocused", this.i.ai);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "actualIsExpanded", {
+        /**
+         * Gets or sets whether the input group is expanded or not.
+        */
+        get: function () {
+            return this.i.ac;
+        },
+        set: function (v) {
+            this.i.ac = ensureBool(v);
+            this._a("actualIsExpanded", this.i.ac);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "focusBorderColor", {
+        /**
+         * Gets or sets the color to use the hovered background of the inputs in the group.
+        */
+        get: function () {
+            return brushToString(this.i.sq);
+        },
+        set: function (v) {
+            this.i.sq = stringToBrush(v);
+            this._a("focusBorderColor", brushToString(this.i.sq));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "id", {
+        /**
+         * Gets or sets the id to use for the checkbox.
+        */
+        get: function () {
+            return this.i.ki;
+        },
+        set: function (v) {
+            this.i.ki = v;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcInputGroupComponent.prototype, "disabled", {
+        /**
+         * Gets or sets whether the checkbox is disabled.
+        */
+        get: function () {
+            return this.i.disabled;
+        },
+        set: function (v) {
+            this.i.disabled = ensureBool(v);
+            this._a("disabled", this.i.disabled);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    IgcInputGroupComponent.prototype.findByName = function (name) {
+        if (this.inputs != null && this.inputs.findByName && this.inputs.findByName(name)) {
+            return this.inputs.findByName(name);
+        }
+        return null;
+    };
+    Object.defineProperty(IgcInputGroupComponent.prototype, "hasUserValues", {
+        get: function () {
+            return this._hasUserValues;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    IgcInputGroupComponent.prototype.__m = function (propertyName) {
+        if (!this._inStyling) {
+            this._hasUserValues.add(propertyName);
+        }
+    };
+    IgcInputGroupComponent.prototype._styling = function (container, component, parent) {
+        if (this._inStyling) {
+            return;
+        }
+        this._inStyling = true;
+        this._stylingContainer = container;
+        this._stylingParent = component;
+        var genericPrefix = "";
+        var typeName = this.i.$type.name;
+        if (typeName.indexOf("Xam") === 0) {
+            typeName = typeName.substring(3);
+        }
+        genericPrefix = toSpinal("InputGroupComponent");
+        var additionalPrefixes = [];
+        var prefix = toSpinal(typeName);
+        additionalPrefixes.push(prefix + "-");
+        var b = this.i.$type.baseType;
+        while (b && b.name != "Object" &&
+            b.name != "Base" &&
+            b.name != "Control" &&
+            b.Name != "DependencyObject" &&
+            b.Name != "FrameworkElement") {
+            typeName = b.name;
+            if (typeName.indexOf("Xam") === 0) {
+                typeName = typeName.substring(3);
+            }
+            var basePrefix = toSpinal(typeName);
+            additionalPrefixes.push(basePrefix + "-");
+            b = b.baseType;
+        }
+        if (parent) {
+            var parentTypeName = parent.i.$type.name;
+            if (parentTypeName.indexOf("Xam") === 0) {
+                parentTypeName = parentTypeName.substring(3);
+            }
+            var parentPrefix = toSpinal(parentTypeName);
+            additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-");
+            additionalPrefixes.push(parentPrefix + "-" + prefix + "-");
+        }
+        initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes);
+        if (this._otherStyling) {
+            this._otherStyling(container, component, parent);
+        }
+        this._inStyling = false;
+    };
+    IgcInputGroupComponent.prototype.onDetachedFromUI = function () {
+        this.i.onDetachedFromUI();
+    };
+    IgcInputGroupComponent.prototype.onAttachedToUI = function () {
+        this.i.onAttachedToUI();
+    };
+    /**
+     * Exports visual information about the current state of the grid.
+    
+    */
+    IgcInputGroupComponent.prototype.exportVisualModel = function () {
+        var iv = this.i.ia();
+        return (iv);
+    };
+    /**
+     * Returns a serialized copy of the exported visual model
+    
+    */
+    IgcInputGroupComponent.prototype.exportSerializedVisualModel = function () {
+        var iv = this.i.j9();
+        return (iv);
+    };
+    IgcInputGroupComponent._observedAttributesIgcInputGroupComponent = null;
+    IgcInputGroupComponent.htmlTagName = "igc-input-group";
+    IgcInputGroupComponent._isElementRegistered = false;
+    return IgcInputGroupComponent;
+}(IgcHTMLElement));
+export { IgcInputGroupComponent };
+//# sourceMappingURL=igc-input-group-component.js.map