igniteui-angular-inputs 16.1.0-beta.1

package/esm5/lib/igx-x-input-group-component.js

@@ -0,0 +1,2697 @@
+import { TemplateRef, Component, ViewContainerRef, ViewChild, ContentChildren, Input, ChangeDetectionStrategy, HostBinding } from '@angular/core';
+import { XInputGroup } from "./XInputGroup";
+import { ensureEnum, brushToString, stringToBrush, ensureBool, toSpinal, initializePropertiesFromCss, NamePatcher } from "igniteui-angular-core";
+import { AngularRenderer, PortalManager } from "igniteui-angular-core";
+import { IgxXInputGroupItemComponent } from './igx-x-input-group-item-component';
+import { IgxXInputGroupInputCollection } from './igx-x-input-group-input-collection';
+import { CollectionAdapter } from "igniteui-angular-core";
+import { NotifyCollectionChangedAction } from "igniteui-angular-core";
+import { InputGroupDisplayType_$type } from './InputGroupDisplayType';
+import { CornerRadius } from "igniteui-angular-core";
+import { Thickness } from "igniteui-angular-core";
+import { ControlDisplayDensity_$type } from "igniteui-angular-core";
+import { BaseControlTheme_$type } from "igniteui-angular-core";
+import * as i0 from "@angular/core";
+var IgxXInputGroupComponent = /** @class */ /*@__PURE__*/ (function () {
+    function IgxXInputGroupComponent(renderer, _elRef, ngZone, injector, componentFactoryResolver) {
+        var _this = this;
+        this.renderer = renderer;
+        this._elRef = _elRef;
+        this.ngZone = ngZone;
+        this.injector = injector;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this._wrapper = null;
+        this._portalManager = null;
+        this._root = null;
+        /**
+        * The style mappings actually present in the chart. 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 stye mappings from the manual style mapping collection on the styleMappings property.
+        */
+        this.actualInputs = [];
+        this._inputs = null;
+        this._inputsAdapter = null;
+        this._implementation = null;
+        this.__p = null;
+        this._hasUserValues = new Set();
+        this._stylingContainer = null;
+        this._stylingParent = null;
+        this._inStyling = false;
+        this._zoneRunner = null;
+        if (this._styling) {
+            NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
+        }
+        this._implementation = this.createImplementation();
+        this._implementation.externalObject = this;
+        if (renderer) {
+            this.container = renderer.createElement("div");
+            renderer.appendChild(_elRef.element.nativeElement, this.container);
+            renderer.setStyle(this.container, "display", "inline-block");
+        }
+        var root;
+        root = this.container;
+        if (this.container != null) {
+            root = this.container;
+        }
+        if (root && root.nativeElement) {
+            root = root.nativeElement;
+        }
+        this._root = root;
+        var inputGroup = this.i;
+        this._inputGroup = inputGroup;
+        this._inputsAdapter = new CollectionAdapter([], this.i.inputs, this.actualInputs, function (c) { return c.i; }, function (i) {
+            if (_this._root && _this._root.parentElement) {
+                i._styling(_this._root, _this, _this);
+            }
+        }, function (i) { });
+        if (renderer) {
+            this._portalManager = new PortalManager("inputContent", componentFactoryResolver);
+            var ren = new AngularRenderer(root, this.renderer, window.document, this.ngZone, true, {}, this._portalManager);
+            this._wrapper = ren;
+            inputGroup.provideContainer(ren);
+        }
+    }
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "inputs", {
+        /**
+         * A collection or manually added axes for the chart.
+        */
+        get: function () {
+            var _this = this;
+            if (this._inputs === null) {
+                var coll = new IgxXInputGroupInputCollection();
+                var inner = coll._innerColl;
+                inner.addListener(function (sender, e) {
+                    switch (e.action) {
+                        case NotifyCollectionChangedAction.Add:
+                            _this._inputsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
+                            break;
+                        case NotifyCollectionChangedAction.Remove:
+                            _this._inputsAdapter.removeManualItemAt(e.oldStartingIndex);
+                            break;
+                        case NotifyCollectionChangedAction.Replace:
+                            _this._inputsAdapter.removeManualItemAt(e.oldStartingIndex);
+                            _this._inputsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
+                            break;
+                        case NotifyCollectionChangedAction.Reset:
+                            _this._inputsAdapter.clearManualItems();
+                            break;
+                    }
+                });
+                this._inputs = coll;
+            }
+            return this._inputs;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // supports angular themes or custom properties set in CSS
+    IgxXInputGroupComponent.prototype.updateStyle = function () {
+        this._styling(this._root, this);
+    };
+    IgxXInputGroupComponent.prototype.ngOnDestroy = function () {
+        this._inputGroup.destroy();
+        this._wrapper.destroy();
+    };
+    IgxXInputGroupComponent.prototype.ngAfterContentInit = function () {
+        this._inputsAdapter.updateQuery(this.contentInputs);
+        this._styling(this._root, this);
+        if (this.actualInputs && this.actualInputs.length > 0) {
+            var currInputs = this.actualInputs;
+            for (var i = 0; i < currInputs.length; i++) {
+                currInputs[i]._styling(this._root, this, this);
+            }
+        }
+        this.updateStyle();
+    };
+    IgxXInputGroupComponent.prototype.ngAfterViewInit = function () {
+        this._portalManager.dynamicContent = this._dynamicContent;
+        this._portalManager.onChildContentChanged(this._childTemplateRef);
+        this.i.ensureShift();
+    };
+    IgxXInputGroupComponent.prototype.createImplementation = function () {
+        return new XInputGroup();
+    };
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "i", {
+        get: function () {
+            return this._implementation;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "displayType", {
+        /**
+     * Gets or sets the display style to use for the button.
+    */
+        get: function () {
+            return this.i.d;
+        },
+        set: function (v) {
+            this.i.d = ensureEnum(InputGroupDisplayType_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "density", {
+        /**
+         * Gets or sets the display density to use for the input group.
+        */
+        get: function () {
+            return this.i.t;
+        },
+        set: function (v) {
+            this.i.t = ensureEnum(ControlDisplayDensity_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualDensity", {
+        /**
+         * Gets the actual display density to use for the input group.
+        */
+        get: function () {
+            return this.i.s;
+        },
+        set: function (v) {
+            this.i.s = ensureEnum(ControlDisplayDensity_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "baseTheme", {
+        /**
+         * Gets or sets the base built in theme to use for the label.
+        */
+        get: function () {
+            return this.i.p;
+        },
+        set: function (v) {
+            this.i.p = ensureEnum(BaseControlTheme_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "inputHasValue", {
+        get: function () {
+            return this.i.al;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualBorderColor", {
+        /**
+         * Gets the actual item background color.
+        */
+        get: function () {
+            return brushToString(this.i.l6);
+        },
+        set: function (v) {
+            this.i.l6 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualFocusBorderColor", {
+        /**
+         * Gets the actual item border color.
+        */
+        get: function () {
+            return brushToString(this.i.l7);
+        },
+        set: function (v) {
+            this.i.l7 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualBorderWidth", {
+        /**
+         * Gets the actual item border width.
+        */
+        get: function () {
+            return this.i.cg;
+        },
+        set: function (v) {
+            this.i.cg = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualFocusBorderWidth", {
+        /**
+         * Gets the actual item border width.
+        */
+        get: function () {
+            return this.i.ch;
+        },
+        set: function (v) {
+            this.i.ch = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualCornerRadiusBottomRight", {
+        get: function () {
+            return this.i.ko ? this.i.ko.b : NaN;
+        },
+        set: function (v) {
+            this.ensureActualCornerRadius();
+            this.i.ko.b = +v;
+            this.i.ko = this.i.ko;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualCornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.ko ? this.i.ko.a : NaN;
+        },
+        set: function (v) {
+            this.ensureActualCornerRadius();
+            this.i.ko.a = +v;
+            this.i.ko = this.i.ko;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualCornerRadiusTopLeft", {
+        get: function () {
+            return this.i.ko ? this.i.ko.c : NaN;
+        },
+        set: function (v) {
+            this.ensureActualCornerRadius();
+            this.i.ko.c = +v;
+            this.i.ko = this.i.ko;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualCornerRadiusTopRight", {
+        get: function () {
+            return this.i.ko ? this.i.ko.d : NaN;
+        },
+        set: function (v) {
+            this.ensureActualCornerRadius();
+            this.i.ko.d = +v;
+            this.i.ko = this.i.ko;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXInputGroupComponent.prototype.ensureActualCornerRadius = function () {
+        if (this.i.ko) {
+            return;
+        }
+        this.i.ko = new CornerRadius(2);
+    };
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualContentPaddingBottom", {
+        get: function () {
+            return this.i.oe ? this.i.oe.bottom : NaN;
+        },
+        set: function (v) {
+            this.ensureActualContentPadding();
+            this.i.oe.bottom = +v;
+            this.i.oe = this.i.oe;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualContentPaddingLeft", {
+        get: function () {
+            return this.i.oe ? this.i.oe.left : NaN;
+        },
+        set: function (v) {
+            this.ensureActualContentPadding();
+            this.i.oe.left = +v;
+            this.i.oe = this.i.oe;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualContentPaddingRight", {
+        get: function () {
+            return this.i.oe ? this.i.oe.right : NaN;
+        },
+        set: function (v) {
+            this.ensureActualContentPadding();
+            this.i.oe.right = +v;
+            this.i.oe = this.i.oe;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualContentPaddingTop", {
+        get: function () {
+            return this.i.oe ? this.i.oe.top : NaN;
+        },
+        set: function (v) {
+            this.ensureActualContentPadding();
+            this.i.oe.top = +v;
+            this.i.oe = this.i.oe;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXInputGroupComponent.prototype.ensureActualContentPadding = function () {
+        if (this.i.oe) {
+            return;
+        }
+        this.i.oe = new Thickness(2);
+    };
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualUnderlineWidth", {
+        /**
+         * Gets the actual width to use for the underline element.
+        */
+        get: function () {
+            return this.i.cp;
+        },
+        set: function (v) {
+            this.i.cp = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualUnderlineRippleWidth", {
+        /**
+         * Gets the actual width to use for the underline element.
+        */
+        get: function () {
+            return this.i.co;
+        },
+        set: function (v) {
+            this.i.co = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualHoverUnderlineWidth", {
+        /**
+         * Gets the width to use for the underline element when hovered.
+        */
+        get: function () {
+            return this.i.cl;
+        },
+        set: function (v) {
+            this.i.cl = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualUnderlineColor", {
+        /**
+         * Gets the actual color to use for the underline element.
+        */
+        get: function () {
+            return brushToString(this.i.ma);
+        },
+        set: function (v) {
+            this.i.ma = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualUnderlineRippleColor", {
+        /**
+         * Gets the actual color to use for the underline ripple element.
+        */
+        get: function () {
+            return brushToString(this.i.mb);
+        },
+        set: function (v) {
+            this.i.mb = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualHoverUnderlineColor", {
+        /**
+         * Gets the actual color to use for the underline element.
+        */
+        get: function () {
+            return brushToString(this.i.l9);
+        },
+        set: function (v) {
+            this.i.l9 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualFocusUnderlineColor", {
+        /**
+         * Gets the actual color to use for the underline element when focused.
+        */
+        get: function () {
+            return brushToString(this.i.l8);
+        },
+        set: function (v) {
+            this.i.l8 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualUnderlineOpacity", {
+        /**
+         * Gets the actual opacity to use for the underline element.
+        */
+        get: function () {
+            return this.i.cm;
+        },
+        set: function (v) {
+            this.i.cm = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualHoverUnderlineOpacity", {
+        /**
+         * Gets the actual opacity to use for the underline element when hovered.
+        */
+        get: function () {
+            return this.i.ck;
+        },
+        set: function (v) {
+            this.i.ck = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualFocusUnderlineOpacity", {
+        /**
+         * Gets the actual opacity to use for the underline element when focused.
+        */
+        get: function () {
+            return this.i.ci;
+        },
+        set: function (v) {
+            this.i.ci = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualFocusUnderlineRippleOpacity", {
+        /**
+         * Gets the actual opacity to use for the underline ripple element when focused.
+        */
+        get: function () {
+            return this.i.cj;
+        },
+        set: function (v) {
+            this.i.cj = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualUnderlineRippleOpacity", {
+        /**
+         * Gets the actual opacity to use for the underline ripple element.
+        */
+        get: function () {
+            return this.i.cn;
+        },
+        set: function (v) {
+            this.i.cn = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualBackgroundColor", {
+        /**
+         * Gets the actual opacity to use for the underline ripple element.
+        */
+        get: function () {
+            return brushToString(this.i.l5);
+        },
+        set: function (v) {
+            this.i.l5 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderWidth", {
+        /**
+         * Gets or sets the border width to use for the border of the item group.
+        */
+        get: function () {
+            return this.i.c0;
+        },
+        set: function (v) {
+            this.i.c0 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "focusBorderWidth", {
+        /**
+         * Gets or sets the border width to use for the border of the item group when focused.
+        */
+        get: function () {
+            return this.i.eg;
+        },
+        set: function (v) {
+            this.i.eg = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderColor", {
+        /**
+         * Gets or sets the color to use the border of the input group.
+        */
+        get: function () {
+            return brushToString(this.i.md);
+        },
+        set: function (v) {
+            this.i.md = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "cornerRadiusBottomRight", {
+        get: function () {
+            return this.i.ks ? this.i.ks.b : NaN;
+        },
+        set: function (v) {
+            this.ensureCornerRadius();
+            this.i.ks.b = +v;
+            this.i.ks = this.i.ks;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "cornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.ks ? this.i.ks.a : NaN;
+        },
+        set: function (v) {
+            this.ensureCornerRadius();
+            this.i.ks.a = +v;
+            this.i.ks = this.i.ks;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "cornerRadiusTopLeft", {
+        get: function () {
+            return this.i.ks ? this.i.ks.c : NaN;
+        },
+        set: function (v) {
+            this.ensureCornerRadius();
+            this.i.ks.c = +v;
+            this.i.ks = this.i.ks;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "cornerRadiusTopRight", {
+        get: function () {
+            return this.i.ks ? this.i.ks.d : NaN;
+        },
+        set: function (v) {
+            this.ensureCornerRadius();
+            this.i.ks.d = +v;
+            this.i.ks = this.i.ks;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXInputGroupComponent.prototype.ensureCornerRadius = function () {
+        if (this.i.ks) {
+            return;
+        }
+        this.i.ks = new CornerRadius(2);
+    };
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "contentPaddingBottom", {
+        get: function () {
+            return this.i.oi ? this.i.oi.bottom : NaN;
+        },
+        set: function (v) {
+            this.ensureContentPadding();
+            this.i.oi.bottom = +v;
+            this.i.oi = this.i.oi;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "contentPaddingLeft", {
+        get: function () {
+            return this.i.oi ? this.i.oi.left : NaN;
+        },
+        set: function (v) {
+            this.ensureContentPadding();
+            this.i.oi.left = +v;
+            this.i.oi = this.i.oi;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "contentPaddingRight", {
+        get: function () {
+            return this.i.oi ? this.i.oi.right : NaN;
+        },
+        set: function (v) {
+            this.ensureContentPadding();
+            this.i.oi.right = +v;
+            this.i.oi = this.i.oi;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "contentPaddingTop", {
+        get: function () {
+            return this.i.oi ? this.i.oi.top : NaN;
+        },
+        set: function (v) {
+            this.ensureContentPadding();
+            this.i.oi.top = +v;
+            this.i.oi = this.i.oi;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXInputGroupComponent.prototype.ensureContentPadding = function () {
+        if (this.i.oi) {
+            return;
+        }
+        this.i.oi = new Thickness(2);
+    };
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "underlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element.
+        */
+        get: function () {
+            return this.i.e8;
+        },
+        set: function (v) {
+            this.i.e8 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "underlineRippleWidth", {
+        /**
+         * Gets or sets the width to use for the underline element.
+        */
+        get: function () {
+            return this.i.e7;
+        },
+        set: function (v) {
+            this.i.e7 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "hoverUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when hovered.
+        */
+        get: function () {
+            return this.i.ek;
+        },
+        set: function (v) {
+            this.i.ek = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "underlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get: function () {
+            return brushToString(this.i.n6);
+        },
+        set: function (v) {
+            this.i.n6 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "underlineRippleColor", {
+        /**
+         * Gets or sets the color to use for the underline ripple element.
+        */
+        get: function () {
+            return brushToString(this.i.n7);
+        },
+        set: function (v) {
+            this.i.n7 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "hoverUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get: function () {
+            return brushToString(this.i.nq);
+        },
+        set: function (v) {
+            this.i.nq = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "focusUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get: function () {
+            return brushToString(this.i.np);
+        },
+        set: function (v) {
+            this.i.np = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "underlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get: function () {
+            return this.i.e5;
+        },
+        set: function (v) {
+            this.i.e5 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "hoverUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get: function () {
+            return this.i.ej;
+        },
+        set: function (v) {
+            this.i.ej = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "focusUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get: function () {
+            return this.i.eh;
+        },
+        set: function (v) {
+            this.i.eh = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "focusUnderlineRippleOpacity", {
+        /**
+         * Gets or sets the opacity to use for the underline ripple element when focused.
+        */
+        get: function () {
+            return this.i.ei;
+        },
+        set: function (v) {
+            this.i.ei = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "underlineRippleOpacity", {
+        /**
+         * Gets or sets the opacity to use for the underline ripple element.
+        */
+        get: function () {
+            return this.i.e6;
+        },
+        set: function (v) {
+            this.i.e6 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "backgroundColor", {
+        /**
+         * Gets or sets the background color to use for the input group.
+        */
+        get: function () {
+            return brushToString(this.i.mc);
+        },
+        set: function (v) {
+            this.i.mc = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeBorderWidth", {
+        /**
+         * Gets or sets the border width to use for the border of the item group when using type line.
+        */
+        get: function () {
+            return this.i.el;
+        },
+        set: function (v) {
+            this.i.el = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeFocusBorderWidth", {
+        /**
+         * Gets or sets the border width to use for the border of the item group when focused when type is line.
+        */
+        get: function () {
+            return this.i.em;
+        },
+        set: function (v) {
+            this.i.em = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeFocusBorderColor", {
+        /**
+         * Gets or sets the focus color to use the border of the input group when type is line.
+        */
+        get: function () {
+            return brushToString(this.i.nt);
+        },
+        set: function (v) {
+            this.i.nt = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeBorderColor", {
+        /**
+         * Gets or sets the color to use the border of the input group when type is line.
+        */
+        get: function () {
+            return brushToString(this.i.ns);
+        },
+        set: function (v) {
+            this.i.ns = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeCornerRadiusBottomRight", {
+        get: function () {
+            return this.i.kx ? this.i.kx.b : NaN;
+        },
+        set: function (v) {
+            this.ensureLineTypeCornerRadius();
+            this.i.kx.b = +v;
+            this.i.kx = this.i.kx;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeCornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.kx ? this.i.kx.a : NaN;
+        },
+        set: function (v) {
+            this.ensureLineTypeCornerRadius();
+            this.i.kx.a = +v;
+            this.i.kx = this.i.kx;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeCornerRadiusTopLeft", {
+        get: function () {
+            return this.i.kx ? this.i.kx.c : NaN;
+        },
+        set: function (v) {
+            this.ensureLineTypeCornerRadius();
+            this.i.kx.c = +v;
+            this.i.kx = this.i.kx;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeCornerRadiusTopRight", {
+        get: function () {
+            return this.i.kx ? this.i.kx.d : NaN;
+        },
+        set: function (v) {
+            this.ensureLineTypeCornerRadius();
+            this.i.kx.d = +v;
+            this.i.kx = this.i.kx;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXInputGroupComponent.prototype.ensureLineTypeCornerRadius = function () {
+        if (this.i.kx) {
+            return;
+        }
+        this.i.kx = new CornerRadius(2);
+    };
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeContentPaddingBottom", {
+        get: function () {
+            return this.i.on ? this.i.on.bottom : NaN;
+        },
+        set: function (v) {
+            this.ensureLineTypeContentPadding();
+            this.i.on.bottom = +v;
+            this.i.on = this.i.on;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeContentPaddingLeft", {
+        get: function () {
+            return this.i.on ? this.i.on.left : NaN;
+        },
+        set: function (v) {
+            this.ensureLineTypeContentPadding();
+            this.i.on.left = +v;
+            this.i.on = this.i.on;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeContentPaddingRight", {
+        get: function () {
+            return this.i.on ? this.i.on.right : NaN;
+        },
+        set: function (v) {
+            this.ensureLineTypeContentPadding();
+            this.i.on.right = +v;
+            this.i.on = this.i.on;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeContentPaddingTop", {
+        get: function () {
+            return this.i.on ? this.i.on.top : NaN;
+        },
+        set: function (v) {
+            this.ensureLineTypeContentPadding();
+            this.i.on.top = +v;
+            this.i.on = this.i.on;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXInputGroupComponent.prototype.ensureLineTypeContentPadding = function () {
+        if (this.i.on) {
+            return;
+        }
+        this.i.on = new Thickness(2);
+    };
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when type is line.
+        */
+        get: function () {
+            return this.i.eu;
+        },
+        set: function (v) {
+            this.i.eu = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeUnderlineRippleWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when type is line.
+        */
+        get: function () {
+            return this.i.et;
+        },
+        set: function (v) {
+            this.i.et = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeHoverUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when hovered when type is line.
+        */
+        get: function () {
+            return this.i.eq;
+        },
+        set: function (v) {
+            this.i.eq = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is line.
+        */
+        get: function () {
+            return brushToString(this.i.nw);
+        },
+        set: function (v) {
+            this.i.nw = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeUnderlineRippleColor", {
+        /**
+         * Gets or sets the color to use for the underline ripple element when type is line.
+        */
+        get: function () {
+            return brushToString(this.i.nx);
+        },
+        set: function (v) {
+            this.i.nx = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeHoverUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is line.
+        */
+        get: function () {
+            return brushToString(this.i.nv);
+        },
+        set: function (v) {
+            this.i.nv = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeFocusUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is line.
+        */
+        get: function () {
+            return brushToString(this.i.nu);
+        },
+        set: function (v) {
+            this.i.nu = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is line.
+        */
+        get: function () {
+            return this.i.er;
+        },
+        set: function (v) {
+            this.i.er = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeHoverUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is line.
+        */
+        get: function () {
+            return this.i.ep;
+        },
+        set: function (v) {
+            this.i.ep = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeFocusUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is line.
+        */
+        get: function () {
+            return this.i.en;
+        },
+        set: function (v) {
+            this.i.en = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeFocusUnderlineRippleOpacity", {
+        /**
+         * Gets or sets the opacity to use for the underline ripple element when focused when type is line.
+        */
+        get: function () {
+            return this.i.eo;
+        },
+        set: function (v) {
+            this.i.eo = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeUnderlineRippleOpacity", {
+        /**
+         * Gets or sets the opacity to use for the underline ripple element when type is line.
+        */
+        get: function () {
+            return this.i.es;
+        },
+        set: function (v) {
+            this.i.es = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "lineTypeBackgroundColor", {
+        /**
+         * Gets or sets the background color to use for the input group when type is line.
+        */
+        get: function () {
+            return brushToString(this.i.nr);
+        },
+        set: function (v) {
+            this.i.nr = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeBorderWidth", {
+        /**
+         * Gets or sets the border width to use for the border of the item group when using type line.
+        */
+        get: function () {
+            return this.i.c1;
+        },
+        set: function (v) {
+            this.i.c1 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeFocusBorderWidth", {
+        /**
+         * Gets or sets the border width to use for the border of the item group when focused when type is box.
+        */
+        get: function () {
+            return this.i.c2;
+        },
+        set: function (v) {
+            this.i.c2 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeFocusBorderColor", {
+        /**
+         * Gets or sets the focus color to use the border of the input group when type is box.
+        */
+        get: function () {
+            return brushToString(this.i.mn);
+        },
+        set: function (v) {
+            this.i.mn = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeBorderColor", {
+        /**
+         * Gets or sets the color to use the border of the input group when type is box.
+        */
+        get: function () {
+            return brushToString(this.i.mm);
+        },
+        set: function (v) {
+            this.i.mm = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeCornerRadiusBottomRight", {
+        get: function () {
+            return this.i.kq ? this.i.kq.b : NaN;
+        },
+        set: function (v) {
+            this.ensureBoxTypeCornerRadius();
+            this.i.kq.b = +v;
+            this.i.kq = this.i.kq;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeCornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.kq ? this.i.kq.a : NaN;
+        },
+        set: function (v) {
+            this.ensureBoxTypeCornerRadius();
+            this.i.kq.a = +v;
+            this.i.kq = this.i.kq;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeCornerRadiusTopLeft", {
+        get: function () {
+            return this.i.kq ? this.i.kq.c : NaN;
+        },
+        set: function (v) {
+            this.ensureBoxTypeCornerRadius();
+            this.i.kq.c = +v;
+            this.i.kq = this.i.kq;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeCornerRadiusTopRight", {
+        get: function () {
+            return this.i.kq ? this.i.kq.d : NaN;
+        },
+        set: function (v) {
+            this.ensureBoxTypeCornerRadius();
+            this.i.kq.d = +v;
+            this.i.kq = this.i.kq;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXInputGroupComponent.prototype.ensureBoxTypeCornerRadius = function () {
+        if (this.i.kq) {
+            return;
+        }
+        this.i.kq = new CornerRadius(2);
+    };
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeContentPaddingBottom", {
+        get: function () {
+            return this.i.og ? this.i.og.bottom : NaN;
+        },
+        set: function (v) {
+            this.ensureBoxTypeContentPadding();
+            this.i.og.bottom = +v;
+            this.i.og = this.i.og;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeContentPaddingLeft", {
+        get: function () {
+            return this.i.og ? this.i.og.left : NaN;
+        },
+        set: function (v) {
+            this.ensureBoxTypeContentPadding();
+            this.i.og.left = +v;
+            this.i.og = this.i.og;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeContentPaddingRight", {
+        get: function () {
+            return this.i.og ? this.i.og.right : NaN;
+        },
+        set: function (v) {
+            this.ensureBoxTypeContentPadding();
+            this.i.og.right = +v;
+            this.i.og = this.i.og;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeContentPaddingTop", {
+        get: function () {
+            return this.i.og ? this.i.og.top : NaN;
+        },
+        set: function (v) {
+            this.ensureBoxTypeContentPadding();
+            this.i.og.top = +v;
+            this.i.og = this.i.og;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXInputGroupComponent.prototype.ensureBoxTypeContentPadding = function () {
+        if (this.i.og) {
+            return;
+        }
+        this.i.og = new Thickness(2);
+    };
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when type is box.
+        */
+        get: function () {
+            return this.i.da;
+        },
+        set: function (v) {
+            this.i.da = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeUnderlineRippleWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when type is box.
+        */
+        get: function () {
+            return this.i.c9;
+        },
+        set: function (v) {
+            this.i.c9 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeHoverUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when hovered when type is box.
+        */
+        get: function () {
+            return this.i.c6;
+        },
+        set: function (v) {
+            this.i.c6 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is box.
+        */
+        get: function () {
+            return brushToString(this.i.mq);
+        },
+        set: function (v) {
+            this.i.mq = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeUnderlineRippleColor", {
+        /**
+         * Gets or sets the color to use for the underline ripple element when type is box.
+        */
+        get: function () {
+            return brushToString(this.i.mr);
+        },
+        set: function (v) {
+            this.i.mr = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeHoverUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is box.
+        */
+        get: function () {
+            return brushToString(this.i.mp);
+        },
+        set: function (v) {
+            this.i.mp = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeFocusUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is box.
+        */
+        get: function () {
+            return brushToString(this.i.mo);
+        },
+        set: function (v) {
+            this.i.mo = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is box.
+        */
+        get: function () {
+            return this.i.c7;
+        },
+        set: function (v) {
+            this.i.c7 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeHoverUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is box.
+        */
+        get: function () {
+            return this.i.c5;
+        },
+        set: function (v) {
+            this.i.c5 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeFocusUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is box.
+        */
+        get: function () {
+            return this.i.c3;
+        },
+        set: function (v) {
+            this.i.c3 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.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.c4;
+        },
+        set: function (v) {
+            this.i.c4 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeUnderlineRippleOpacity", {
+        /**
+         * Gets or sets the opacity to use for the underline ripple element when type is box.
+        */
+        get: function () {
+            return this.i.c8;
+        },
+        set: function (v) {
+            this.i.c8 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "boxTypeBackgroundColor", {
+        /**
+         * Gets or sets the background color to use for the input group when type is box.
+        */
+        get: function () {
+            return brushToString(this.i.ml);
+        },
+        set: function (v) {
+            this.i.ml = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.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.cq;
+        },
+        set: function (v) {
+            this.i.cq = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.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.cr;
+        },
+        set: function (v) {
+            this.i.cr = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.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.mg);
+        },
+        set: function (v) {
+            this.i.mg = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.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.mf);
+        },
+        set: function (v) {
+            this.i.mf = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeCornerRadiusBottomRight", {
+        get: function () {
+            return this.i.kp ? this.i.kp.b : NaN;
+        },
+        set: function (v) {
+            this.ensureBorderTypeCornerRadius();
+            this.i.kp.b = +v;
+            this.i.kp = this.i.kp;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeCornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.kp ? this.i.kp.a : NaN;
+        },
+        set: function (v) {
+            this.ensureBorderTypeCornerRadius();
+            this.i.kp.a = +v;
+            this.i.kp = this.i.kp;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeCornerRadiusTopLeft", {
+        get: function () {
+            return this.i.kp ? this.i.kp.c : NaN;
+        },
+        set: function (v) {
+            this.ensureBorderTypeCornerRadius();
+            this.i.kp.c = +v;
+            this.i.kp = this.i.kp;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeCornerRadiusTopRight", {
+        get: function () {
+            return this.i.kp ? this.i.kp.d : NaN;
+        },
+        set: function (v) {
+            this.ensureBorderTypeCornerRadius();
+            this.i.kp.d = +v;
+            this.i.kp = this.i.kp;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXInputGroupComponent.prototype.ensureBorderTypeCornerRadius = function () {
+        if (this.i.kp) {
+            return;
+        }
+        this.i.kp = new CornerRadius(2);
+    };
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeContentPaddingBottom", {
+        get: function () {
+            return this.i.of ? this.i.of.bottom : NaN;
+        },
+        set: function (v) {
+            this.ensureBorderTypeContentPadding();
+            this.i.of.bottom = +v;
+            this.i.of = this.i.of;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeContentPaddingLeft", {
+        get: function () {
+            return this.i.of ? this.i.of.left : NaN;
+        },
+        set: function (v) {
+            this.ensureBorderTypeContentPadding();
+            this.i.of.left = +v;
+            this.i.of = this.i.of;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeContentPaddingRight", {
+        get: function () {
+            return this.i.of ? this.i.of.right : NaN;
+        },
+        set: function (v) {
+            this.ensureBorderTypeContentPadding();
+            this.i.of.right = +v;
+            this.i.of = this.i.of;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeContentPaddingTop", {
+        get: function () {
+            return this.i.of ? this.i.of.top : NaN;
+        },
+        set: function (v) {
+            this.ensureBorderTypeContentPadding();
+            this.i.of.top = +v;
+            this.i.of = this.i.of;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXInputGroupComponent.prototype.ensureBorderTypeContentPadding = function () {
+        if (this.i.of) {
+            return;
+        }
+        this.i.of = new Thickness(2);
+    };
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when type is border.
+        */
+        get: function () {
+            return this.i.cz;
+        },
+        set: function (v) {
+            this.i.cz = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeUnderlineRippleWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when type is border.
+        */
+        get: function () {
+            return this.i.cy;
+        },
+        set: function (v) {
+            this.i.cy = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeHoverUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when hovered when type is border.
+        */
+        get: function () {
+            return this.i.cv;
+        },
+        set: function (v) {
+            this.i.cv = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is border.
+        */
+        get: function () {
+            return brushToString(this.i.mj);
+        },
+        set: function (v) {
+            this.i.mj = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeUnderlineRippleColor", {
+        /**
+         * Gets or sets the color to use for the underline ripple element when type is border.
+        */
+        get: function () {
+            return brushToString(this.i.mk);
+        },
+        set: function (v) {
+            this.i.mk = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeHoverUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is border.
+        */
+        get: function () {
+            return brushToString(this.i.mi);
+        },
+        set: function (v) {
+            this.i.mi = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeFocusUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is border.
+        */
+        get: function () {
+            return brushToString(this.i.mh);
+        },
+        set: function (v) {
+            this.i.mh = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is border.
+        */
+        get: function () {
+            return this.i.cw;
+        },
+        set: function (v) {
+            this.i.cw = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeHoverUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is border.
+        */
+        get: function () {
+            return this.i.cu;
+        },
+        set: function (v) {
+            this.i.cu = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeFocusUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is border.
+        */
+        get: function () {
+            return this.i.cs;
+        },
+        set: function (v) {
+            this.i.cs = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.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.ct;
+        },
+        set: function (v) {
+            this.i.ct = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeUnderlineRippleOpacity", {
+        /**
+         * Gets or sets the opacity to use for the underline ripple element when type is border.
+        */
+        get: function () {
+            return this.i.cx;
+        },
+        set: function (v) {
+            this.i.cx = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "borderTypeBackgroundColor", {
+        /**
+         * Gets or sets the background color to use for the input group when type is border.
+        */
+        get: function () {
+            return brushToString(this.i.me);
+        },
+        set: function (v) {
+            this.i.me = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.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.ev;
+        },
+        set: function (v) {
+            this.i.ev = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.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.ew;
+        },
+        set: function (v) {
+            this.i.ew = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.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.n0);
+        },
+        set: function (v) {
+            this.i.n0 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.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.nz);
+        },
+        set: function (v) {
+            this.i.nz = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeCornerRadiusBottomRight", {
+        get: function () {
+            return this.i.ky ? this.i.ky.b : NaN;
+        },
+        set: function (v) {
+            this.ensureSearchTypeCornerRadius();
+            this.i.ky.b = +v;
+            this.i.ky = this.i.ky;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeCornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.ky ? this.i.ky.a : NaN;
+        },
+        set: function (v) {
+            this.ensureSearchTypeCornerRadius();
+            this.i.ky.a = +v;
+            this.i.ky = this.i.ky;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeCornerRadiusTopLeft", {
+        get: function () {
+            return this.i.ky ? this.i.ky.c : NaN;
+        },
+        set: function (v) {
+            this.ensureSearchTypeCornerRadius();
+            this.i.ky.c = +v;
+            this.i.ky = this.i.ky;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeCornerRadiusTopRight", {
+        get: function () {
+            return this.i.ky ? this.i.ky.d : NaN;
+        },
+        set: function (v) {
+            this.ensureSearchTypeCornerRadius();
+            this.i.ky.d = +v;
+            this.i.ky = this.i.ky;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXInputGroupComponent.prototype.ensureSearchTypeCornerRadius = function () {
+        if (this.i.ky) {
+            return;
+        }
+        this.i.ky = new CornerRadius(2);
+    };
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeContentPaddingBottom", {
+        get: function () {
+            return this.i.oo ? this.i.oo.bottom : NaN;
+        },
+        set: function (v) {
+            this.ensureSearchTypeContentPadding();
+            this.i.oo.bottom = +v;
+            this.i.oo = this.i.oo;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeContentPaddingLeft", {
+        get: function () {
+            return this.i.oo ? this.i.oo.left : NaN;
+        },
+        set: function (v) {
+            this.ensureSearchTypeContentPadding();
+            this.i.oo.left = +v;
+            this.i.oo = this.i.oo;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeContentPaddingRight", {
+        get: function () {
+            return this.i.oo ? this.i.oo.right : NaN;
+        },
+        set: function (v) {
+            this.ensureSearchTypeContentPadding();
+            this.i.oo.right = +v;
+            this.i.oo = this.i.oo;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeContentPaddingTop", {
+        get: function () {
+            return this.i.oo ? this.i.oo.top : NaN;
+        },
+        set: function (v) {
+            this.ensureSearchTypeContentPadding();
+            this.i.oo.top = +v;
+            this.i.oo = this.i.oo;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXInputGroupComponent.prototype.ensureSearchTypeContentPadding = function () {
+        if (this.i.oo) {
+            return;
+        }
+        this.i.oo = new Thickness(2);
+    };
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when type is search.
+        */
+        get: function () {
+            return this.i.e4;
+        },
+        set: function (v) {
+            this.i.e4 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeUnderlineRippleWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when type is search.
+        */
+        get: function () {
+            return this.i.e3;
+        },
+        set: function (v) {
+            this.i.e3 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeHoverUnderlineWidth", {
+        /**
+         * Gets or sets the width to use for the underline element when hovered when type is search.
+        */
+        get: function () {
+            return this.i.e0;
+        },
+        set: function (v) {
+            this.i.e0 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is search.
+        */
+        get: function () {
+            return brushToString(this.i.n3);
+        },
+        set: function (v) {
+            this.i.n3 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeUnderlineRippleColor", {
+        /**
+         * Gets or sets the color to use for the underline ripple element when type is search.
+        */
+        get: function () {
+            return brushToString(this.i.n4);
+        },
+        set: function (v) {
+            this.i.n4 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeHoverUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is search.
+        */
+        get: function () {
+            return brushToString(this.i.n2);
+        },
+        set: function (v) {
+            this.i.n2 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeFocusUnderlineColor", {
+        /**
+         * Gets or sets the color to use for the underline element when type is search.
+        */
+        get: function () {
+            return brushToString(this.i.n1);
+        },
+        set: function (v) {
+            this.i.n1 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is search.
+        */
+        get: function () {
+            return this.i.e1;
+        },
+        set: function (v) {
+            this.i.e1 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeHoverUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is search.
+        */
+        get: function () {
+            return this.i.ez;
+        },
+        set: function (v) {
+            this.i.ez = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeFocusUnderlineOpacity", {
+        /**
+         * Gets or sets the color to use for the underline element when type is search.
+        */
+        get: function () {
+            return this.i.ex;
+        },
+        set: function (v) {
+            this.i.ex = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.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.ey;
+        },
+        set: function (v) {
+            this.i.ey = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeUnderlineRippleOpacity", {
+        /**
+         * Gets or sets the opacity to use for the underline ripple element when type is search.
+        */
+        get: function () {
+            return this.i.e2;
+        },
+        set: function (v) {
+            this.i.e2 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "searchTypeBackgroundColor", {
+        /**
+         * Gets or sets the background color to use for the input group when type is search.
+        */
+        get: function () {
+            return brushToString(this.i.ny);
+        },
+        set: function (v) {
+            this.i.ny = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "isExpanded", {
+        /**
+         * Gets or sets whether the input group is expanded or not.
+        */
+        get: function () {
+            return this.i.an;
+        },
+        set: function (v) {
+            this.i.an = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "isHovered", {
+        /**
+         * Gets or sets whether the input group is hovered or not.
+        */
+        get: function () {
+            return this.i.ap;
+        },
+        set: function (v) {
+            this.i.ap = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "isFocused", {
+        /**
+         * Gets or sets whether the input group is hovered or not.
+        */
+        get: function () {
+            return this.i.ao;
+        },
+        set: function (v) {
+            this.i.ao = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "actualIsExpanded", {
+        /**
+         * Gets or sets whether the input group is expanded or not.
+        */
+        get: function () {
+            return this.i.ai;
+        },
+        set: function (v) {
+            this.i.ai = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "focusBorderColor", {
+        /**
+         * Gets or sets the color to use the hovered background of the inputs in the group.
+        */
+        get: function () {
+            return brushToString(this.i.no);
+        },
+        set: function (v) {
+            this.i.no = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "id", {
+        /**
+         * Gets or sets the id to use for the checkbox.
+        */
+        get: function () {
+            return this.i.hk;
+        },
+        set: function (v) {
+            this.i.hk = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "disabled", {
+        /**
+         * Gets or sets whether the checkbox is disabled.
+        */
+        get: function () {
+            return this.i.disabled;
+        },
+        set: function (v) {
+            this.i.disabled = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXInputGroupComponent.prototype.findByName = function (name) {
+        if (this.findEphemera) {
+            if (name && name.indexOf("@@e:") == 0) {
+                return this.findEphemera(name);
+            }
+        }
+        if (this.inputs != null && this.inputs.findByName && this.inputs.findByName(name)) {
+            return this.inputs.findByName(name);
+        }
+        return null;
+    };
+    Object.defineProperty(IgxXInputGroupComponent.prototype, "hasUserValues", {
+        get: function () {
+            return this._hasUserValues;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXInputGroupComponent.prototype.__m = function (propertyName) {
+        if (!this._inStyling) {
+            this._hasUserValues.add(propertyName);
+        }
+    };
+    IgxXInputGroupComponent.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("XInputGroupComponent");
+        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;
+    };
+    IgxXInputGroupComponent.prototype.onDetachedFromUI = function () {
+        this.i.onDetachedFromUI();
+    };
+    IgxXInputGroupComponent.prototype.onAttachedToUI = function () {
+        this.i.onAttachedToUI();
+    };
+    /**
+     * Exports visual information about the current state of the grid.
+    
+    */
+    IgxXInputGroupComponent.prototype.exportVisualModel = function () {
+        var iv = this.i.fe();
+        return (iv);
+    };
+    /**
+     * Returns a serialized copy of the exported visual model
+    
+    */
+    IgxXInputGroupComponent.prototype.exportSerializedVisualModel = function () {
+        var iv = this.i.hb();
+        return (iv);
+    };
+    IgxXInputGroupComponent.prototype._runInZone = function (act) {
+        if (this._zoneRunner != null) {
+            this._zoneRunner(act);
+        }
+        else {
+            act();
+        }
+    };
+    IgxXInputGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXInputGroupComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+    IgxXInputGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxXInputGroupComponent, selector: "igx-x-input-group", inputs: { displayType: "displayType", density: "density", actualDensity: "actualDensity", baseTheme: "baseTheme", actualBorderColor: "actualBorderColor", actualFocusBorderColor: "actualFocusBorderColor", actualBorderWidth: "actualBorderWidth", actualFocusBorderWidth: "actualFocusBorderWidth", actualCornerRadiusBottomRight: "actualCornerRadiusBottomRight", actualCornerRadiusBottomLeft: "actualCornerRadiusBottomLeft", actualCornerRadiusTopLeft: "actualCornerRadiusTopLeft", actualCornerRadiusTopRight: "actualCornerRadiusTopRight", actualContentPaddingBottom: "actualContentPaddingBottom", actualContentPaddingLeft: "actualContentPaddingLeft", actualContentPaddingRight: "actualContentPaddingRight", actualContentPaddingTop: "actualContentPaddingTop", actualUnderlineWidth: "actualUnderlineWidth", actualUnderlineRippleWidth: "actualUnderlineRippleWidth", actualHoverUnderlineWidth: "actualHoverUnderlineWidth", actualUnderlineColor: "actualUnderlineColor", actualUnderlineRippleColor: "actualUnderlineRippleColor", actualHoverUnderlineColor: "actualHoverUnderlineColor", actualFocusUnderlineColor: "actualFocusUnderlineColor", actualUnderlineOpacity: "actualUnderlineOpacity", actualHoverUnderlineOpacity: "actualHoverUnderlineOpacity", actualFocusUnderlineOpacity: "actualFocusUnderlineOpacity", actualFocusUnderlineRippleOpacity: "actualFocusUnderlineRippleOpacity", actualUnderlineRippleOpacity: "actualUnderlineRippleOpacity", actualBackgroundColor: "actualBackgroundColor", borderWidth: "borderWidth", focusBorderWidth: "focusBorderWidth", borderColor: "borderColor", cornerRadiusBottomRight: "cornerRadiusBottomRight", cornerRadiusBottomLeft: "cornerRadiusBottomLeft", cornerRadiusTopLeft: "cornerRadiusTopLeft", cornerRadiusTopRight: "cornerRadiusTopRight", contentPaddingBottom: "contentPaddingBottom", contentPaddingLeft: "contentPaddingLeft", contentPaddingRight: "contentPaddingRight", contentPaddingTop: "contentPaddingTop", underlineWidth: "underlineWidth", underlineRippleWidth: "underlineRippleWidth", hoverUnderlineWidth: "hoverUnderlineWidth", underlineColor: "underlineColor", underlineRippleColor: "underlineRippleColor", hoverUnderlineColor: "hoverUnderlineColor", focusUnderlineColor: "focusUnderlineColor", underlineOpacity: "underlineOpacity", hoverUnderlineOpacity: "hoverUnderlineOpacity", focusUnderlineOpacity: "focusUnderlineOpacity", focusUnderlineRippleOpacity: "focusUnderlineRippleOpacity", underlineRippleOpacity: "underlineRippleOpacity", backgroundColor: "backgroundColor", lineTypeBorderWidth: "lineTypeBorderWidth", lineTypeFocusBorderWidth: "lineTypeFocusBorderWidth", lineTypeFocusBorderColor: "lineTypeFocusBorderColor", lineTypeBorderColor: "lineTypeBorderColor", lineTypeCornerRadiusBottomRight: "lineTypeCornerRadiusBottomRight", lineTypeCornerRadiusBottomLeft: "lineTypeCornerRadiusBottomLeft", lineTypeCornerRadiusTopLeft: "lineTypeCornerRadiusTopLeft", lineTypeCornerRadiusTopRight: "lineTypeCornerRadiusTopRight", lineTypeContentPaddingBottom: "lineTypeContentPaddingBottom", lineTypeContentPaddingLeft: "lineTypeContentPaddingLeft", lineTypeContentPaddingRight: "lineTypeContentPaddingRight", lineTypeContentPaddingTop: "lineTypeContentPaddingTop", lineTypeUnderlineWidth: "lineTypeUnderlineWidth", lineTypeUnderlineRippleWidth: "lineTypeUnderlineRippleWidth", lineTypeHoverUnderlineWidth: "lineTypeHoverUnderlineWidth", lineTypeUnderlineColor: "lineTypeUnderlineColor", lineTypeUnderlineRippleColor: "lineTypeUnderlineRippleColor", lineTypeHoverUnderlineColor: "lineTypeHoverUnderlineColor", lineTypeFocusUnderlineColor: "lineTypeFocusUnderlineColor", lineTypeUnderlineOpacity: "lineTypeUnderlineOpacity", lineTypeHoverUnderlineOpacity: "lineTypeHoverUnderlineOpacity", lineTypeFocusUnderlineOpacity: "lineTypeFocusUnderlineOpacity", lineTypeFocusUnderlineRippleOpacity: "lineTypeFocusUnderlineRippleOpacity", lineTypeUnderlineRippleOpacity: "lineTypeUnderlineRippleOpacity", lineTypeBackgroundColor: "lineTypeBackgroundColor", boxTypeBorderWidth: "boxTypeBorderWidth", boxTypeFocusBorderWidth: "boxTypeFocusBorderWidth", boxTypeFocusBorderColor: "boxTypeFocusBorderColor", boxTypeBorderColor: "boxTypeBorderColor", boxTypeCornerRadiusBottomRight: "boxTypeCornerRadiusBottomRight", boxTypeCornerRadiusBottomLeft: "boxTypeCornerRadiusBottomLeft", boxTypeCornerRadiusTopLeft: "boxTypeCornerRadiusTopLeft", boxTypeCornerRadiusTopRight: "boxTypeCornerRadiusTopRight", boxTypeContentPaddingBottom: "boxTypeContentPaddingBottom", boxTypeContentPaddingLeft: "boxTypeContentPaddingLeft", boxTypeContentPaddingRight: "boxTypeContentPaddingRight", boxTypeContentPaddingTop: "boxTypeContentPaddingTop", boxTypeUnderlineWidth: "boxTypeUnderlineWidth", boxTypeUnderlineRippleWidth: "boxTypeUnderlineRippleWidth", boxTypeHoverUnderlineWidth: "boxTypeHoverUnderlineWidth", boxTypeUnderlineColor: "boxTypeUnderlineColor", boxTypeUnderlineRippleColor: "boxTypeUnderlineRippleColor", boxTypeHoverUnderlineColor: "boxTypeHoverUnderlineColor", boxTypeFocusUnderlineColor: "boxTypeFocusUnderlineColor", boxTypeUnderlineOpacity: "boxTypeUnderlineOpacity", boxTypeHoverUnderlineOpacity: "boxTypeHoverUnderlineOpacity", boxTypeFocusUnderlineOpacity: "boxTypeFocusUnderlineOpacity", boxTypeFocusUnderlineRippleOpacity: "boxTypeFocusUnderlineRippleOpacity", boxTypeUnderlineRippleOpacity: "boxTypeUnderlineRippleOpacity", boxTypeBackgroundColor: "boxTypeBackgroundColor", borderTypeBorderWidth: "borderTypeBorderWidth", borderTypeFocusBorderWidth: "borderTypeFocusBorderWidth", borderTypeFocusBorderColor: "borderTypeFocusBorderColor", borderTypeBorderColor: "borderTypeBorderColor", borderTypeCornerRadiusBottomRight: "borderTypeCornerRadiusBottomRight", borderTypeCornerRadiusBottomLeft: "borderTypeCornerRadiusBottomLeft", borderTypeCornerRadiusTopLeft: "borderTypeCornerRadiusTopLeft", borderTypeCornerRadiusTopRight: "borderTypeCornerRadiusTopRight", borderTypeContentPaddingBottom: "borderTypeContentPaddingBottom", borderTypeContentPaddingLeft: "borderTypeContentPaddingLeft", borderTypeContentPaddingRight: "borderTypeContentPaddingRight", borderTypeContentPaddingTop: "borderTypeContentPaddingTop", borderTypeUnderlineWidth: "borderTypeUnderlineWidth", borderTypeUnderlineRippleWidth: "borderTypeUnderlineRippleWidth", borderTypeHoverUnderlineWidth: "borderTypeHoverUnderlineWidth", borderTypeUnderlineColor: "borderTypeUnderlineColor", borderTypeUnderlineRippleColor: "borderTypeUnderlineRippleColor", borderTypeHoverUnderlineColor: "borderTypeHoverUnderlineColor", borderTypeFocusUnderlineColor: "borderTypeFocusUnderlineColor", borderTypeUnderlineOpacity: "borderTypeUnderlineOpacity", borderTypeHoverUnderlineOpacity: "borderTypeHoverUnderlineOpacity", borderTypeFocusUnderlineOpacity: "borderTypeFocusUnderlineOpacity", borderTypeFocusUnderlineRippleOpacity: "borderTypeFocusUnderlineRippleOpacity", borderTypeUnderlineRippleOpacity: "borderTypeUnderlineRippleOpacity", borderTypeBackgroundColor: "borderTypeBackgroundColor", searchTypeBorderWidth: "searchTypeBorderWidth", searchTypeFocusBorderWidth: "searchTypeFocusBorderWidth", searchTypeFocusBorderColor: "searchTypeFocusBorderColor", searchTypeBorderColor: "searchTypeBorderColor", searchTypeCornerRadiusBottomRight: "searchTypeCornerRadiusBottomRight", searchTypeCornerRadiusBottomLeft: "searchTypeCornerRadiusBottomLeft", searchTypeCornerRadiusTopLeft: "searchTypeCornerRadiusTopLeft", searchTypeCornerRadiusTopRight: "searchTypeCornerRadiusTopRight", searchTypeContentPaddingBottom: "searchTypeContentPaddingBottom", searchTypeContentPaddingLeft: "searchTypeContentPaddingLeft", searchTypeContentPaddingRight: "searchTypeContentPaddingRight", searchTypeContentPaddingTop: "searchTypeContentPaddingTop", searchTypeUnderlineWidth: "searchTypeUnderlineWidth", searchTypeUnderlineRippleWidth: "searchTypeUnderlineRippleWidth", searchTypeHoverUnderlineWidth: "searchTypeHoverUnderlineWidth", searchTypeUnderlineColor: "searchTypeUnderlineColor", searchTypeUnderlineRippleColor: "searchTypeUnderlineRippleColor", searchTypeHoverUnderlineColor: "searchTypeHoverUnderlineColor", searchTypeFocusUnderlineColor: "searchTypeFocusUnderlineColor", searchTypeUnderlineOpacity: "searchTypeUnderlineOpacity", searchTypeHoverUnderlineOpacity: "searchTypeHoverUnderlineOpacity", searchTypeFocusUnderlineOpacity: "searchTypeFocusUnderlineOpacity", searchTypeFocusUnderlineRippleOpacity: "searchTypeFocusUnderlineRippleOpacity", searchTypeUnderlineRippleOpacity: "searchTypeUnderlineRippleOpacity", searchTypeBackgroundColor: "searchTypeBackgroundColor", isExpanded: "isExpanded", isHovered: "isHovered", isFocused: "isFocused", actualIsExpanded: "actualIsExpanded", focusBorderColor: "focusBorderColor", id: "id", disabled: "disabled" }, host: { properties: { "attr.id": "this.id" }, classAttribute: "ig-input-group igx-input-group" }, providers: [], queries: [{ propertyName: "contentInputs", predicate: IgxXInputGroupItemComponent }], viewQueries: [{ propertyName: "_dynamicContent", first: true, predicate: ["dynamicContent"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_childTemplateRef", first: true, predicate: ["childContent"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-template #childContent><ng-content></ng-content></ng-template>\n<ng-container #dynamicContent></ng-container>", isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: inline-block;           \n\t\t}\n\t"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    return IgxXInputGroupComponent;
+}());
+export { IgxXInputGroupComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXInputGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'igx-x-input-group',
+                    template: "<ng-template #childContent><ng-content></ng-content></ng-template>\n<ng-container #dynamicContent></ng-container>",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [],
+                    host: { 'class': 'ig-input-group igx-input-group' },
+                    styles: ["\n\t\t:host {\n\t\t\tdisplay: inline-block;           \n\t\t}\n\t"]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { _dynamicContent: [{
+                type: ViewChild,
+                args: ["dynamicContent", { read: ViewContainerRef, static: true }]
+            }], _childTemplateRef: [{
+                type: ViewChild,
+                args: ["childContent", { read: TemplateRef, static: false }]
+            }], contentInputs: [{
+                type: ContentChildren,
+                args: [IgxXInputGroupItemComponent]
+            }], displayType: [{
+                type: Input
+            }], density: [{
+                type: Input
+            }], actualDensity: [{
+                type: Input
+            }], baseTheme: [{
+                type: Input
+            }], actualBorderColor: [{
+                type: Input
+            }], actualFocusBorderColor: [{
+                type: Input
+            }], actualBorderWidth: [{
+                type: Input
+            }], actualFocusBorderWidth: [{
+                type: Input
+            }], actualCornerRadiusBottomRight: [{
+                type: Input
+            }], actualCornerRadiusBottomLeft: [{
+                type: Input
+            }], actualCornerRadiusTopLeft: [{
+                type: Input
+            }], actualCornerRadiusTopRight: [{
+                type: Input
+            }], actualContentPaddingBottom: [{
+                type: Input
+            }], actualContentPaddingLeft: [{
+                type: Input
+            }], actualContentPaddingRight: [{
+                type: Input
+            }], actualContentPaddingTop: [{
+                type: Input
+            }], actualUnderlineWidth: [{
+                type: Input
+            }], actualUnderlineRippleWidth: [{
+                type: Input
+            }], actualHoverUnderlineWidth: [{
+                type: Input
+            }], actualUnderlineColor: [{
+                type: Input
+            }], actualUnderlineRippleColor: [{
+                type: Input
+            }], actualHoverUnderlineColor: [{
+                type: Input
+            }], actualFocusUnderlineColor: [{
+                type: Input
+            }], actualUnderlineOpacity: [{
+                type: Input
+            }], actualHoverUnderlineOpacity: [{
+                type: Input
+            }], actualFocusUnderlineOpacity: [{
+                type: Input
+            }], actualFocusUnderlineRippleOpacity: [{
+                type: Input
+            }], actualUnderlineRippleOpacity: [{
+                type: Input
+            }], actualBackgroundColor: [{
+                type: Input
+            }], borderWidth: [{
+                type: Input
+            }], focusBorderWidth: [{
+                type: Input
+            }], borderColor: [{
+                type: Input
+            }], cornerRadiusBottomRight: [{
+                type: Input
+            }], cornerRadiusBottomLeft: [{
+                type: Input
+            }], cornerRadiusTopLeft: [{
+                type: Input
+            }], cornerRadiusTopRight: [{
+                type: Input
+            }], contentPaddingBottom: [{
+                type: Input
+            }], contentPaddingLeft: [{
+                type: Input
+            }], contentPaddingRight: [{
+                type: Input
+            }], contentPaddingTop: [{
+                type: Input
+            }], underlineWidth: [{
+                type: Input
+            }], underlineRippleWidth: [{
+                type: Input
+            }], hoverUnderlineWidth: [{
+                type: Input
+            }], underlineColor: [{
+                type: Input
+            }], underlineRippleColor: [{
+                type: Input
+            }], hoverUnderlineColor: [{
+                type: Input
+            }], focusUnderlineColor: [{
+                type: Input
+            }], underlineOpacity: [{
+                type: Input
+            }], hoverUnderlineOpacity: [{
+                type: Input
+            }], focusUnderlineOpacity: [{
+                type: Input
+            }], focusUnderlineRippleOpacity: [{
+                type: Input
+            }], underlineRippleOpacity: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], lineTypeBorderWidth: [{
+                type: Input
+            }], lineTypeFocusBorderWidth: [{
+                type: Input
+            }], lineTypeFocusBorderColor: [{
+                type: Input
+            }], lineTypeBorderColor: [{
+                type: Input
+            }], lineTypeCornerRadiusBottomRight: [{
+                type: Input
+            }], lineTypeCornerRadiusBottomLeft: [{
+                type: Input
+            }], lineTypeCornerRadiusTopLeft: [{
+                type: Input
+            }], lineTypeCornerRadiusTopRight: [{
+                type: Input
+            }], lineTypeContentPaddingBottom: [{
+                type: Input
+            }], lineTypeContentPaddingLeft: [{
+                type: Input
+            }], lineTypeContentPaddingRight: [{
+                type: Input
+            }], lineTypeContentPaddingTop: [{
+                type: Input
+            }], lineTypeUnderlineWidth: [{
+                type: Input
+            }], lineTypeUnderlineRippleWidth: [{
+                type: Input
+            }], lineTypeHoverUnderlineWidth: [{
+                type: Input
+            }], lineTypeUnderlineColor: [{
+                type: Input
+            }], lineTypeUnderlineRippleColor: [{
+                type: Input
+            }], lineTypeHoverUnderlineColor: [{
+                type: Input
+            }], lineTypeFocusUnderlineColor: [{
+                type: Input
+            }], lineTypeUnderlineOpacity: [{
+                type: Input
+            }], lineTypeHoverUnderlineOpacity: [{
+                type: Input
+            }], lineTypeFocusUnderlineOpacity: [{
+                type: Input
+            }], lineTypeFocusUnderlineRippleOpacity: [{
+                type: Input
+            }], lineTypeUnderlineRippleOpacity: [{
+                type: Input
+            }], lineTypeBackgroundColor: [{
+                type: Input
+            }], boxTypeBorderWidth: [{
+                type: Input
+            }], boxTypeFocusBorderWidth: [{
+                type: Input
+            }], boxTypeFocusBorderColor: [{
+                type: Input
+            }], boxTypeBorderColor: [{
+                type: Input
+            }], boxTypeCornerRadiusBottomRight: [{
+                type: Input
+            }], boxTypeCornerRadiusBottomLeft: [{
+                type: Input
+            }], boxTypeCornerRadiusTopLeft: [{
+                type: Input
+            }], boxTypeCornerRadiusTopRight: [{
+                type: Input
+            }], boxTypeContentPaddingBottom: [{
+                type: Input
+            }], boxTypeContentPaddingLeft: [{
+                type: Input
+            }], boxTypeContentPaddingRight: [{
+                type: Input
+            }], boxTypeContentPaddingTop: [{
+                type: Input
+            }], boxTypeUnderlineWidth: [{
+                type: Input
+            }], boxTypeUnderlineRippleWidth: [{
+                type: Input
+            }], boxTypeHoverUnderlineWidth: [{
+                type: Input
+            }], boxTypeUnderlineColor: [{
+                type: Input
+            }], boxTypeUnderlineRippleColor: [{
+                type: Input
+            }], boxTypeHoverUnderlineColor: [{
+                type: Input
+            }], boxTypeFocusUnderlineColor: [{
+                type: Input
+            }], boxTypeUnderlineOpacity: [{
+                type: Input
+            }], boxTypeHoverUnderlineOpacity: [{
+                type: Input
+            }], boxTypeFocusUnderlineOpacity: [{
+                type: Input
+            }], boxTypeFocusUnderlineRippleOpacity: [{
+                type: Input
+            }], boxTypeUnderlineRippleOpacity: [{
+                type: Input
+            }], boxTypeBackgroundColor: [{
+                type: Input
+            }], borderTypeBorderWidth: [{
+                type: Input
+            }], borderTypeFocusBorderWidth: [{
+                type: Input
+            }], borderTypeFocusBorderColor: [{
+                type: Input
+            }], borderTypeBorderColor: [{
+                type: Input
+            }], borderTypeCornerRadiusBottomRight: [{
+                type: Input
+            }], borderTypeCornerRadiusBottomLeft: [{
+                type: Input
+            }], borderTypeCornerRadiusTopLeft: [{
+                type: Input
+            }], borderTypeCornerRadiusTopRight: [{
+                type: Input
+            }], borderTypeContentPaddingBottom: [{
+                type: Input
+            }], borderTypeContentPaddingLeft: [{
+                type: Input
+            }], borderTypeContentPaddingRight: [{
+                type: Input
+            }], borderTypeContentPaddingTop: [{
+                type: Input
+            }], borderTypeUnderlineWidth: [{
+                type: Input
+            }], borderTypeUnderlineRippleWidth: [{
+                type: Input
+            }], borderTypeHoverUnderlineWidth: [{
+                type: Input
+            }], borderTypeUnderlineColor: [{
+                type: Input
+            }], borderTypeUnderlineRippleColor: [{
+                type: Input
+            }], borderTypeHoverUnderlineColor: [{
+                type: Input
+            }], borderTypeFocusUnderlineColor: [{
+                type: Input
+            }], borderTypeUnderlineOpacity: [{
+                type: Input
+            }], borderTypeHoverUnderlineOpacity: [{
+                type: Input
+            }], borderTypeFocusUnderlineOpacity: [{
+                type: Input
+            }], borderTypeFocusUnderlineRippleOpacity: [{
+                type: Input
+            }], borderTypeUnderlineRippleOpacity: [{
+                type: Input
+            }], borderTypeBackgroundColor: [{
+                type: Input
+            }], searchTypeBorderWidth: [{
+                type: Input
+            }], searchTypeFocusBorderWidth: [{
+                type: Input
+            }], searchTypeFocusBorderColor: [{
+                type: Input
+            }], searchTypeBorderColor: [{
+                type: Input
+            }], searchTypeCornerRadiusBottomRight: [{
+                type: Input
+            }], searchTypeCornerRadiusBottomLeft: [{
+                type: Input
+            }], searchTypeCornerRadiusTopLeft: [{
+                type: Input
+            }], searchTypeCornerRadiusTopRight: [{
+                type: Input
+            }], searchTypeContentPaddingBottom: [{
+                type: Input
+            }], searchTypeContentPaddingLeft: [{
+                type: Input
+            }], searchTypeContentPaddingRight: [{
+                type: Input
+            }], searchTypeContentPaddingTop: [{
+                type: Input
+            }], searchTypeUnderlineWidth: [{
+                type: Input
+            }], searchTypeUnderlineRippleWidth: [{
+                type: Input
+            }], searchTypeHoverUnderlineWidth: [{
+                type: Input
+            }], searchTypeUnderlineColor: [{
+                type: Input
+            }], searchTypeUnderlineRippleColor: [{
+                type: Input
+            }], searchTypeHoverUnderlineColor: [{
+                type: Input
+            }], searchTypeFocusUnderlineColor: [{
+                type: Input
+            }], searchTypeUnderlineOpacity: [{
+                type: Input
+            }], searchTypeHoverUnderlineOpacity: [{
+                type: Input
+            }], searchTypeFocusUnderlineOpacity: [{
+                type: Input
+            }], searchTypeFocusUnderlineRippleOpacity: [{
+                type: Input
+            }], searchTypeUnderlineRippleOpacity: [{
+                type: Input
+            }], searchTypeBackgroundColor: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], isHovered: [{
+                type: Input
+            }], isFocused: [{
+                type: Input
+            }], actualIsExpanded: [{
+                type: Input
+            }], focusBorderColor: [{
+                type: Input
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }, {
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });