igniteui-angular-inputs 16.1.0-beta.1

package/esm5/lib/igx-x-button-component.js

@@ -0,0 +1,3018 @@
+import { Output, TemplateRef, EventEmitter, Component, ViewContainerRef, ViewChild, Input, ChangeDetectionStrategy, HostBinding } from '@angular/core';
+import { XButton } from "./XButton";
+import { ensureEnum, brushToString, stringToBrush, ensureBool, toSpinal, initializePropertiesFromCss, NamePatcher } from "igniteui-angular-core";
+import { FontInfo } from "igniteui-angular-core";
+import { AngularRenderer, PortalManager } from "igniteui-angular-core";
+import { delegateCombine } from "igniteui-angular-core";
+import { CornerRadius } from "igniteui-angular-core";
+import { ButtonDisplayStyle_$type } from './ButtonDisplayStyle';
+import { IgxButtonClickEventArgs } from './igx-button-click-event-args';
+import { TypeRegistrar } from "igniteui-angular-core";
+import { ControlDisplayDensity_$type } from "igniteui-angular-core";
+import { ElevationMode_$type } from "igniteui-angular-core";
+import { BaseControlTheme_$type } from "igniteui-angular-core";
+import { HorizontalAlignment_$type } from "igniteui-angular-core";
+import { VerticalAlignment_$type } from "igniteui-angular-core";
+import { IgxFocusEventArgs } from "igniteui-angular-core";
+import * as i0 from "@angular/core";
+var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
+    function IgxXButtonComponent(renderer, _elRef, ngZone, injector, componentFactoryResolver) {
+        this.renderer = renderer;
+        this._elRef = _elRef;
+        this.ngZone = ngZone;
+        this.injector = injector;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this._wrapper = null;
+        this._portalManager = null;
+        this._root = null;
+        this.__p = null;
+        this._hasUserValues = new Set();
+        this._stylingContainer = null;
+        this._stylingParent = null;
+        this._inStyling = false;
+        this._clicked = null;
+        this._gotFocus = null;
+        this._lostFocus = null;
+        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 button = this.i;
+        this._button = button;
+        if (renderer) {
+            this._portalManager = new PortalManager("buttonContent", componentFactoryResolver);
+            var ren = new AngularRenderer(root, this.renderer, window.document, this.ngZone, true, {}, this._portalManager);
+            this._wrapper = ren;
+            button.provideContainer(ren);
+        }
+    }
+    // supports angular themes or custom properties set in CSS
+    IgxXButtonComponent.prototype.updateStyle = function () {
+        this._styling(this._root, this);
+    };
+    IgxXButtonComponent.prototype.ngOnDestroy = function () {
+        this._button.destroy();
+        this._wrapper.destroy();
+    };
+    IgxXButtonComponent.prototype.ngAfterViewInit = function () {
+        this._portalManager.dynamicContent = this._dynamicContent;
+        this._portalManager.onChildContentChanged(this._childTemplateRef);
+        this._styling(this._root, this);
+        this.updateStyle();
+    };
+    IgxXButtonComponent.prototype.createImplementation = function () {
+        return new XButton();
+    };
+    Object.defineProperty(IgxXButtonComponent.prototype, "i", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this._implementation;
+        } /**
+                                     * @hidden
+                                     */,
+        enumerable: false,
+        configurable: true
+    });
+    IgxXButtonComponent._createFromInternal = function (internal) {
+        if (!internal) {
+            return null;
+        }
+        if (!internal.$type) {
+            return null;
+        }
+        var name = internal.$type.name;
+        var externalName = "Igx" + name + "Component";
+        if (!TypeRegistrar.isRegistered(externalName)) {
+            return null;
+        }
+        return TypeRegistrar.create(externalName);
+    };
+    Object.defineProperty(IgxXButtonComponent.prototype, "minWidth", {
+        /**
+     * Gets or sets the min width to use for the button.
+    */
+        get: function () {
+            return this.i.bu;
+        },
+        set: function (v) {
+            this.i.bu = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "minHeight", {
+        /**
+         * Gets or sets the min height to use for the button.
+        */
+        get: function () {
+            return this.i.bt;
+        },
+        set: function (v) {
+            this.i.bt = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "displayType", {
+        /**
+         * Gets or sets the display style to use for the button.
+        */
+        get: function () {
+            return this.i.e;
+        },
+        set: function (v) {
+            this.i.e = ensureEnum(ButtonDisplayStyle_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "density", {
+        /**
+         * Gets or sets the display density to use for the button.
+        */
+        get: function () {
+            return this.i.r;
+        },
+        set: function (v) {
+            this.i.r = ensureEnum(ControlDisplayDensity_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "baseTheme", {
+        /**
+         * Gets or sets the base built in theme to use for the button.
+        */
+        get: function () {
+            return this.i.n;
+        },
+        set: function (v) {
+            this.i.n = ensureEnum(BaseControlTheme_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualDensity", {
+        /**
+         * Gets the actual display density to use for the label.
+        */
+        get: function () {
+            return this.i.q;
+        },
+        set: function (v) {
+            this.i.q = ensureEnum(ControlDisplayDensity_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualBorderColor", {
+        /**
+         * Gets or sets the color to use for the check mark when the checkbox is checked.
+        */
+        get: function () {
+            return brushToString(this.i.ng);
+        },
+        set: function (v) {
+            this.i.ng = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualUmbraShadowColor", {
+        /**
+         * Gets or sets the color to use for the check mark when the checkbox is checked.
+        */
+        get: function () {
+            return brushToString(this.i.nr);
+        },
+        set: function (v) {
+            this.i.nr = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualPenumbraShadowColor", {
+        /**
+         * Gets or sets the color to use for the check mark when the checkbox is checked.
+        */
+        get: function () {
+            return brushToString(this.i.no);
+        },
+        set: function (v) {
+            this.i.no = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualAmbientShadowColor", {
+        /**
+         * Gets or sets the color to use for the check mark when the checkbox is checked.
+        */
+        get: function () {
+            return brushToString(this.i.ne);
+        },
+        set: function (v) {
+            this.i.ne = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualRestingElevation", {
+        /**
+         * Gets or sets the color to use for the check mark when the checkbox is checked.
+        */
+        get: function () {
+            return this.i.ct;
+        },
+        set: function (v) {
+            this.i.ct = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualFocusElevation", {
+        /**
+         * Gets or sets the color to use for the check mark when the checkbox is checked.
+        */
+        get: function () {
+            return this.i.cr;
+        },
+        set: function (v) {
+            this.i.cr = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualHoverElevation", {
+        /**
+         * Gets or sets the color to use for the check mark when the checkbox is checked.
+        */
+        get: function () {
+            return this.i.cs;
+        },
+        set: function (v) {
+            this.i.cs = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualRippleColor", {
+        /**
+         * Gets or sets the color to use for the ripple when the button is pressed.
+        */
+        get: function () {
+            return brushToString(this.i.np);
+        },
+        set: function (v) {
+            this.i.np = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualCornerRadiusBottomRight", {
+        get: function () {
+            return this.i.kr ? this.i.kr.b : NaN;
+        },
+        set: function (v) {
+            this.ensureActualCornerRadius();
+            this.i.kr.b = +v;
+            this.i.kr = this.i.kr;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualCornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.kr ? this.i.kr.a : NaN;
+        },
+        set: function (v) {
+            this.ensureActualCornerRadius();
+            this.i.kr.a = +v;
+            this.i.kr = this.i.kr;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualCornerRadiusTopLeft", {
+        get: function () {
+            return this.i.kr ? this.i.kr.c : NaN;
+        },
+        set: function (v) {
+            this.ensureActualCornerRadius();
+            this.i.kr.c = +v;
+            this.i.kr = this.i.kr;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualCornerRadiusTopRight", {
+        get: function () {
+            return this.i.kr ? this.i.kr.d : NaN;
+        },
+        set: function (v) {
+            this.ensureActualCornerRadius();
+            this.i.kr.d = +v;
+            this.i.kr = this.i.kr;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXButtonComponent.prototype.ensureActualCornerRadius = function () {
+        if (this.i.kr) {
+            return;
+        }
+        this.i.kr = new CornerRadius(2);
+    };
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualBackgroundColor", {
+        /**
+         * Gets the color to use for the actual background.
+        */
+        get: function () {
+            return brushToString(this.i.nf);
+        },
+        set: function (v) {
+            this.i.nf = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualDisabledBackgroundColor", {
+        /**
+         * Gets the actual color to use for the disabled background of the button.
+        */
+        get: function () {
+            return brushToString(this.i.nh);
+        },
+        set: function (v) {
+            this.i.nh = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualDisabledBorderColor", {
+        /**
+         * Gets the actual color to use for the disabled border of the button.
+        */
+        get: function () {
+            return brushToString(this.i.ni);
+        },
+        set: function (v) {
+            this.i.ni = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualDisabledTextColor", {
+        /**
+         * Gets the actual color to use for the disabled text of the button.
+        */
+        get: function () {
+            return brushToString(this.i.nj);
+        },
+        set: function (v) {
+            this.i.nj = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualDisabledElevation", {
+        /**
+         * Gets the actual disabled elevation to use for the button.
+        */
+        get: function () {
+            return this.i.cq;
+        },
+        set: function (v) {
+            this.i.cq = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualElevationMode", {
+        /**
+         * Gets the actual disabled elevation to use for the button.
+        */
+        get: function () {
+            return this.i.u;
+        },
+        set: function (v) {
+            this.i.u = ensureEnum(ElevationMode_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualTextColor", {
+        /**
+         * Gets the color to use for the actual background.
+        */
+        get: function () {
+            return brushToString(this.i.nq);
+        },
+        set: function (v) {
+            this.i.nq = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualHoverTextColor", {
+        /**
+         * Gets the color to use for the actual background.
+        */
+        get: function () {
+            return brushToString(this.i.nn);
+        },
+        set: function (v) {
+            this.i.nn = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualFocusBackgroundColor", {
+        /**
+         * Gets the color to use for the actual background.
+        */
+        get: function () {
+            return brushToString(this.i.nk);
+        },
+        set: function (v) {
+            this.i.nk = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualFocusTextColor", {
+        /**
+         * Gets the actual color to use for the focused text.
+        */
+        get: function () {
+            return brushToString(this.i.nl);
+        },
+        set: function (v) {
+            this.i.nl = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualHoverBackgroundColor", {
+        /**
+         * Gets the hover color to use for the actual background.
+        */
+        get: function () {
+            return brushToString(this.i.nm);
+        },
+        set: function (v) {
+            this.i.nm = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualBorderWidth", {
+        /**
+         * Gets or sets the Width to use for the check mark when the checkbox is checked.
+        */
+        get: function () {
+            return this.i.bf;
+        },
+        set: function (v) {
+            this.i.bf = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the background of the button when the  type is raised.
+        */
+        get: function () {
+            return brushToString(this.i.qv);
+        },
+        set: function (v) {
+            this.i.qv = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedDisabledBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the disabled background of the button when the type is raised.
+        */
+        get: function () {
+            return brushToString(this.i.qx);
+        },
+        set: function (v) {
+            this.i.qx = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedDisabledBorderColor", {
+        /**
+         * Gets or sets the color to use for the disabled border of the button when the type is raised.
+        */
+        get: function () {
+            return brushToString(this.i.qy);
+        },
+        set: function (v) {
+            this.i.qy = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedDisabledTextColor", {
+        /**
+         * Gets or sets the color to use for the disabled text of the button when the type is raised.
+        */
+        get: function () {
+            return brushToString(this.i.qz);
+        },
+        set: function (v) {
+            this.i.qz = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedDisabledElevation", {
+        /**
+         * Gets or sets the disabled elevation to use for the button when the type is raised.
+        */
+        get: function () {
+            return this.i.dy;
+        },
+        set: function (v) {
+            this.i.dy = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedHoverBackgroundColor", {
+        /**
+         * Gets or sets the hover color to use for the background of the button when the  type is raised.
+        */
+        get: function () {
+            return brushToString(this.i.q2);
+        },
+        set: function (v) {
+            this.i.q2 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedBorderColor", {
+        /**
+         * Gets or sets the border color to use for the button when the type is raised.
+        */
+        get: function () {
+            return brushToString(this.i.qw);
+        },
+        set: function (v) {
+            this.i.qw = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedRestingElevation", {
+        /**
+         * Gets or sets the elevation to use for the button when the type is raised.
+        */
+        get: function () {
+            return this.i.d1;
+        },
+        set: function (v) {
+            this.i.d1 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedHoverElevation", {
+        /**
+         * Gets or sets the hover elevation to use for the button when the type is raised.
+        */
+        get: function () {
+            return this.i.d0;
+        },
+        set: function (v) {
+            this.i.d0 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedFocusElevation", {
+        /**
+         * Gets or sets the focus elevation to use for the button when the type is raised.
+        */
+        get: function () {
+            return this.i.dz;
+        },
+        set: function (v) {
+            this.i.dz = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedBorderWidth", {
+        /**
+         * Gets or sets the width to use for the button border when the type is raised.
+        */
+        get: function () {
+            return this.i.bw;
+        },
+        set: function (v) {
+            this.i.bw = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedCornerRadiusBottomRight", {
+        get: function () {
+            return this.i.k3 ? this.i.k3.b : NaN;
+        },
+        set: function (v) {
+            this.ensureRaisedCornerRadius();
+            this.i.k3.b = +v;
+            this.i.k3 = this.i.k3;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedCornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.k3 ? this.i.k3.a : NaN;
+        },
+        set: function (v) {
+            this.ensureRaisedCornerRadius();
+            this.i.k3.a = +v;
+            this.i.k3 = this.i.k3;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedCornerRadiusTopLeft", {
+        get: function () {
+            return this.i.k3 ? this.i.k3.c : NaN;
+        },
+        set: function (v) {
+            this.ensureRaisedCornerRadius();
+            this.i.k3.c = +v;
+            this.i.k3 = this.i.k3;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedCornerRadiusTopRight", {
+        get: function () {
+            return this.i.k3 ? this.i.k3.d : NaN;
+        },
+        set: function (v) {
+            this.ensureRaisedCornerRadius();
+            this.i.k3.d = +v;
+            this.i.k3 = this.i.k3;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXButtonComponent.prototype.ensureRaisedCornerRadius = function () {
+        if (this.i.k3) {
+            return;
+        }
+        this.i.k3 = new CornerRadius(2);
+    };
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedRippleColor", {
+        /**
+         * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
+        */
+        get: function () {
+            return brushToString(this.i.q4);
+        },
+        set: function (v) {
+            this.i.q4 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the background of the button when the type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.pu);
+        },
+        set: function (v) {
+            this.i.pu = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatDisabledBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the disabled background of the button when the type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.pw);
+        },
+        set: function (v) {
+            this.i.pw = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatDisabledBorderColor", {
+        /**
+         * Gets or sets the color to use for the disabled border of the button when the type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.px);
+        },
+        set: function (v) {
+            this.i.px = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatDisabledTextColor", {
+        /**
+         * Gets or sets the color to use for the disabled text of the button when the type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.py);
+        },
+        set: function (v) {
+            this.i.py = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatDisabledElevation", {
+        /**
+         * Gets or sets the disabled elevation to use for the button when the type is flat.
+        */
+        get: function () {
+            return this.i.dj;
+        },
+        set: function (v) {
+            this.i.dj = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatHoverBackgroundColor", {
+        /**
+         * Gets or sets the hover color to use for the background of the button when the type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.p1);
+        },
+        set: function (v) {
+            this.i.p1 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatBorderColor", {
+        /**
+         * Gets or sets the border color to use for the button when the type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.pv);
+        },
+        set: function (v) {
+            this.i.pv = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatRestingElevation", {
+        /**
+         * Gets or sets the elevation to use for the button when the type is flat.
+        */
+        get: function () {
+            return this.i.dm;
+        },
+        set: function (v) {
+            this.i.dm = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatHoverElevation", {
+        /**
+         * Gets or sets the hover elevation to use for the button when the type is flat.
+        */
+        get: function () {
+            return this.i.dl;
+        },
+        set: function (v) {
+            this.i.dl = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatFocusElevation", {
+        /**
+         * Gets or sets the focus elevation to use for the button when the type is flat.
+        */
+        get: function () {
+            return this.i.dk;
+        },
+        set: function (v) {
+            this.i.dk = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatRippleColor", {
+        /**
+         * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
+        */
+        get: function () {
+            return brushToString(this.i.p3);
+        },
+        set: function (v) {
+            this.i.p3 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatTextColor", {
+        /**
+         * Gets or sets the color to use for the text of the button when type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.p4);
+        },
+        set: function (v) {
+            this.i.p4 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatHoverTextColor", {
+        /**
+         * Gets or sets the color to use for the hovered text of the button when type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.p2);
+        },
+        set: function (v) {
+            this.i.p2 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatFocusBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the backround the button when it is focused and flat.
+        */
+        get: function () {
+            return brushToString(this.i.pz);
+        },
+        set: function (v) {
+            this.i.pz = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatFocusTextColor", {
+        /**
+         * Gets or sets the color to use for the text the button when it is focused and flat.
+        */
+        get: function () {
+            return brushToString(this.i.p0);
+        },
+        set: function (v) {
+            this.i.p0 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatBorderWidth", {
+        /**
+         * Gets or sets the width to use for the button border when the type is flat.
+        */
+        get: function () {
+            return this.i.br;
+        },
+        set: function (v) {
+            this.i.br = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatCornerRadiusBottomRight", {
+        get: function () {
+            return this.i.k0 ? this.i.k0.b : NaN;
+        },
+        set: function (v) {
+            this.ensureFlatCornerRadius();
+            this.i.k0.b = +v;
+            this.i.k0 = this.i.k0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatCornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.k0 ? this.i.k0.a : NaN;
+        },
+        set: function (v) {
+            this.ensureFlatCornerRadius();
+            this.i.k0.a = +v;
+            this.i.k0 = this.i.k0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatCornerRadiusTopLeft", {
+        get: function () {
+            return this.i.k0 ? this.i.k0.c : NaN;
+        },
+        set: function (v) {
+            this.ensureFlatCornerRadius();
+            this.i.k0.c = +v;
+            this.i.k0 = this.i.k0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flatCornerRadiusTopRight", {
+        get: function () {
+            return this.i.k0 ? this.i.k0.d : NaN;
+        },
+        set: function (v) {
+            this.ensureFlatCornerRadius();
+            this.i.k0.d = +v;
+            this.i.k0 = this.i.k0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXButtonComponent.prototype.ensureFlatCornerRadius = function () {
+        if (this.i.k0) {
+            return;
+        }
+        this.i.k0 = new CornerRadius(2);
+    };
+    Object.defineProperty(IgxXButtonComponent.prototype, "backgroundColor", {
+        /**
+         * Gets or sets the color to use for the background when the button regardless of type.
+        */
+        get: function () {
+            return brushToString(this.i.ns);
+        },
+        set: function (v) {
+            this.i.ns = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "disabledBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the disabled background of the button when the type is disabled.
+        */
+        get: function () {
+            return brushToString(this.i.pg);
+        },
+        set: function (v) {
+            this.i.pg = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "disabledBorderColor", {
+        /**
+         * Gets or sets the color to use for the disabled border of the button when the type is raised.
+        */
+        get: function () {
+            return brushToString(this.i.ph);
+        },
+        set: function (v) {
+            this.i.ph = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "disabledTextColor", {
+        /**
+         * Gets or sets the color to use for the disabled text of the button when the type is raised.
+        */
+        get: function () {
+            return brushToString(this.i.pi);
+        },
+        set: function (v) {
+            this.i.pi = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "disabledElevation", {
+        /**
+         * Gets or sets the disabled elevation to use for the button when the type is raised.
+        */
+        get: function () {
+            return this.i.de;
+        },
+        set: function (v) {
+            this.i.de = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "elevationMode", {
+        /**
+         * Gets or sets the disabled elevation to use for the button when the type is raised.
+        */
+        get: function () {
+            return this.i.w;
+        },
+        set: function (v) {
+            this.i.w = ensureEnum(ElevationMode_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "hoverBackgroundColor", {
+        /**
+         * Gets or sets the hover color to use for the background of the button when the  type is hovered.
+        */
+        get: function () {
+            return brushToString(this.i.p7);
+        },
+        set: function (v) {
+            this.i.p7 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "borderColor", {
+        /**
+         * Gets or sets the border color to use for the button regardless of type.
+        */
+        get: function () {
+            return brushToString(this.i.nt);
+        },
+        set: function (v) {
+            this.i.nt = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "restingElevation", {
+        /**
+         * Gets or sets the elevation to use for the button regardless of type.
+        */
+        get: function () {
+            return this.i.d2;
+        },
+        set: function (v) {
+            this.i.d2 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "hoverElevation", {
+        /**
+         * Gets or sets the hover elevation to use for the button regardless of type.
+        */
+        get: function () {
+            return this.i.dp;
+        },
+        set: function (v) {
+            this.i.dp = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "focusElevation", {
+        /**
+         * Gets or sets the focus elevation to use for the button regardless of type.
+        */
+        get: function () {
+            return this.i.dn;
+        },
+        set: function (v) {
+            this.i.dn = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "textStyle", {
+        /**
+         * Gets or sets the use for the button.
+        */
+        get: function () {
+            if (this.i.aa == null) {
+                return null;
+            }
+            return this.i.aa.fontString;
+        },
+        set: function (v) {
+            var fi = new FontInfo();
+            fi.fontString = v;
+            this.i.aa = fi;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "textColor", {
+        /**
+         * Gets or sets the color to use for the text of the button regardless of type.
+        */
+        get: function () {
+            return brushToString(this.i.q7);
+        },
+        set: function (v) {
+            this.i.q7 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "hoverTextColor", {
+        /**
+         * Gets or sets the color to use for the hovered text of the button regardless of type.
+        */
+        get: function () {
+            return brushToString(this.i.p8);
+        },
+        set: function (v) {
+            this.i.p8 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "rippleColor", {
+        /**
+         * Gets or sets the color to use for the background of the button regardless of type.
+        */
+        get: function () {
+            return brushToString(this.i.q6);
+        },
+        set: function (v) {
+            this.i.q6 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedTextColor", {
+        /**
+         * Gets or sets the color to use for the text of the button when type is raised.
+        */
+        get: function () {
+            return brushToString(this.i.q5);
+        },
+        set: function (v) {
+            this.i.q5 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedHoverTextColor", {
+        /**
+         * Gets or sets the color to use for the hovered text of the button when type is raised.
+        */
+        get: function () {
+            return brushToString(this.i.q3);
+        },
+        set: function (v) {
+            this.i.q3 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedFocusBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the backround the button when it is focused and raised.
+        */
+        get: function () {
+            return brushToString(this.i.q0);
+        },
+        set: function (v) {
+            this.i.q0 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "raisedFocusTextColor", {
+        /**
+         * Gets or sets the color to use for the text the button when it is focused and raised.
+        */
+        get: function () {
+            return brushToString(this.i.q1);
+        },
+        set: function (v) {
+            this.i.q1 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "focusBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the backround the button when it is focused.
+        */
+        get: function () {
+            return brushToString(this.i.p5);
+        },
+        set: function (v) {
+            this.i.p5 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "focusTextColor", {
+        /**
+         * Gets or sets the color to use for the text of the button when it is focused.
+        */
+        get: function () {
+            return brushToString(this.i.p6);
+        },
+        set: function (v) {
+            this.i.p6 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "borderWidth", {
+        /**
+         * Gets or sets the width to use for the button border regardless of type.
+        */
+        get: function () {
+            return this.i.bg;
+        },
+        set: function (v) {
+            this.i.bg = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "cornerRadiusBottomRight", {
+        get: function () {
+            return this.i.kt ? this.i.kt.b : NaN;
+        },
+        set: function (v) {
+            this.ensureCornerRadius();
+            this.i.kt.b = +v;
+            this.i.kt = this.i.kt;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "cornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.kt ? this.i.kt.a : NaN;
+        },
+        set: function (v) {
+            this.ensureCornerRadius();
+            this.i.kt.a = +v;
+            this.i.kt = this.i.kt;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "cornerRadiusTopLeft", {
+        get: function () {
+            return this.i.kt ? this.i.kt.c : NaN;
+        },
+        set: function (v) {
+            this.ensureCornerRadius();
+            this.i.kt.c = +v;
+            this.i.kt = this.i.kt;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "cornerRadiusTopRight", {
+        get: function () {
+            return this.i.kt ? this.i.kt.d : NaN;
+        },
+        set: function (v) {
+            this.ensureCornerRadius();
+            this.i.kt.d = +v;
+            this.i.kt = this.i.kt;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXButtonComponent.prototype.ensureCornerRadius = function () {
+        if (this.i.kt) {
+            return;
+        }
+        this.i.kt = new CornerRadius(2);
+    };
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the background of the button when the  type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.qk);
+        },
+        set: function (v) {
+            this.i.qk = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedDisabledBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the disabled background of the button when the type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.qm);
+        },
+        set: function (v) {
+            this.i.qm = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedDisabledBorderColor", {
+        /**
+         * Gets or sets the color to use for the disabled border of the button when the type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.qn);
+        },
+        set: function (v) {
+            this.i.qn = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedDisabledTextColor", {
+        /**
+         * Gets or sets the color to use for the disabled text of the button when the type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.qo);
+        },
+        set: function (v) {
+            this.i.qo = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedDisabledElevation", {
+        /**
+         * Gets or sets the disabled elevation to use for the button when the type is outlined.
+        */
+        get: function () {
+            return this.i.du;
+        },
+        set: function (v) {
+            this.i.du = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedHoverBackgroundColor", {
+        /**
+         * Gets or sets the hover color to use for the background of the button when the  type is hoveredOutlined.
+        */
+        get: function () {
+            return brushToString(this.i.qr);
+        },
+        set: function (v) {
+            this.i.qr = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedBorderColor", {
+        /**
+         * Gets or sets the border color to use for the button when the type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.ql);
+        },
+        set: function (v) {
+            this.i.ql = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedRestingElevation", {
+        /**
+         * Gets or sets the elevation to use for the button when the type is outlined.
+        */
+        get: function () {
+            return this.i.dx;
+        },
+        set: function (v) {
+            this.i.dx = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedHoverElevation", {
+        /**
+         * Gets or sets the hover elevation to use for the button when the type is outlined.
+        */
+        get: function () {
+            return this.i.dw;
+        },
+        set: function (v) {
+            this.i.dw = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedFocusElevation", {
+        /**
+         * Gets or sets the focus elevation to use for the button when the type is outlined.
+        */
+        get: function () {
+            return this.i.dv;
+        },
+        set: function (v) {
+            this.i.dv = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedBorderWidth", {
+        /**
+         * Gets or sets the width to use for the button border when the type is outlined.
+        */
+        get: function () {
+            return this.i.bv;
+        },
+        set: function (v) {
+            this.i.bv = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedCornerRadiusBottomRight", {
+        get: function () {
+            return this.i.k2 ? this.i.k2.b : NaN;
+        },
+        set: function (v) {
+            this.ensureOutlinedCornerRadius();
+            this.i.k2.b = +v;
+            this.i.k2 = this.i.k2;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedCornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.k2 ? this.i.k2.a : NaN;
+        },
+        set: function (v) {
+            this.ensureOutlinedCornerRadius();
+            this.i.k2.a = +v;
+            this.i.k2 = this.i.k2;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedCornerRadiusTopLeft", {
+        get: function () {
+            return this.i.k2 ? this.i.k2.c : NaN;
+        },
+        set: function (v) {
+            this.ensureOutlinedCornerRadius();
+            this.i.k2.c = +v;
+            this.i.k2 = this.i.k2;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedCornerRadiusTopRight", {
+        get: function () {
+            return this.i.k2 ? this.i.k2.d : NaN;
+        },
+        set: function (v) {
+            this.ensureOutlinedCornerRadius();
+            this.i.k2.d = +v;
+            this.i.k2 = this.i.k2;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXButtonComponent.prototype.ensureOutlinedCornerRadius = function () {
+        if (this.i.k2) {
+            return;
+        }
+        this.i.k2 = new CornerRadius(2);
+    };
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedRippleColor", {
+        /**
+         * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
+        */
+        get: function () {
+            return brushToString(this.i.qt);
+        },
+        set: function (v) {
+            this.i.qt = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedTextColor", {
+        /**
+         * Gets or sets the color to use for the text of the button when type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.qu);
+        },
+        set: function (v) {
+            this.i.qu = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedHoverTextColor", {
+        /**
+         * Gets or sets the color to use for the hovered text of the button when type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.qs);
+        },
+        set: function (v) {
+            this.i.qs = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedFocusBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the backround the button when it is focused and outlined.
+        */
+        get: function () {
+            return brushToString(this.i.qp);
+        },
+        set: function (v) {
+            this.i.qp = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "outlinedFocusTextColor", {
+        /**
+         * Gets or sets the color to use for the text the button when it is focused and outlined.
+        */
+        get: function () {
+            return brushToString(this.i.qq);
+        },
+        set: function (v) {
+            this.i.qq = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the background of the button when the  type is floating action button.
+        */
+        get: function () {
+            return brushToString(this.i.pj);
+        },
+        set: function (v) {
+            this.i.pj = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabDisabledBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the disabled background of the button when the type is fab.
+        */
+        get: function () {
+            return brushToString(this.i.pl);
+        },
+        set: function (v) {
+            this.i.pl = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabDisabledBorderColor", {
+        /**
+         * Gets or sets the color to use for the disabled border of the button when the type is fab.
+        */
+        get: function () {
+            return brushToString(this.i.pm);
+        },
+        set: function (v) {
+            this.i.pm = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabDisabledTextColor", {
+        /**
+         * Gets or sets the color to use for the disabled text of the button when the type is fab.
+        */
+        get: function () {
+            return brushToString(this.i.pn);
+        },
+        set: function (v) {
+            this.i.pn = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabDisabledElevation", {
+        /**
+         * Gets or sets the disabled elevation to use for the button when the type is fab.
+        */
+        get: function () {
+            return this.i.df;
+        },
+        set: function (v) {
+            this.i.df = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabHoverBackgroundColor", {
+        /**
+         * Gets or sets the hover color to use for the background of the button when the  type is hoveredFab.
+        */
+        get: function () {
+            return brushToString(this.i.pq);
+        },
+        set: function (v) {
+            this.i.pq = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabBorderColor", {
+        /**
+         * Gets or sets the border color to use for the button when the type is floating action button.
+        */
+        get: function () {
+            return brushToString(this.i.pk);
+        },
+        set: function (v) {
+            this.i.pk = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabRestingElevation", {
+        /**
+         * Gets or sets the elevation to use for the button when the type is floating action button.
+        */
+        get: function () {
+            return this.i.di;
+        },
+        set: function (v) {
+            this.i.di = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabHoverElevation", {
+        /**
+         * Gets or sets the hover elevation to use for the button when the type is floating action button.
+        */
+        get: function () {
+            return this.i.dh;
+        },
+        set: function (v) {
+            this.i.dh = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabFocusElevation", {
+        /**
+         * Gets or sets the focus elevation to use for the button when the type is floating action button.
+        */
+        get: function () {
+            return this.i.dg;
+        },
+        set: function (v) {
+            this.i.dg = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabBorderWidth", {
+        /**
+         * Gets or sets the width to use for the button border when the type is floating action button.
+        */
+        get: function () {
+            return this.i.bq;
+        },
+        set: function (v) {
+            this.i.bq = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabCornerRadiusBottomRight", {
+        get: function () {
+            return this.i.kz ? this.i.kz.b : NaN;
+        },
+        set: function (v) {
+            this.ensureFabCornerRadius();
+            this.i.kz.b = +v;
+            this.i.kz = this.i.kz;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabCornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.kz ? this.i.kz.a : NaN;
+        },
+        set: function (v) {
+            this.ensureFabCornerRadius();
+            this.i.kz.a = +v;
+            this.i.kz = this.i.kz;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabCornerRadiusTopLeft", {
+        get: function () {
+            return this.i.kz ? this.i.kz.c : NaN;
+        },
+        set: function (v) {
+            this.ensureFabCornerRadius();
+            this.i.kz.c = +v;
+            this.i.kz = this.i.kz;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabCornerRadiusTopRight", {
+        get: function () {
+            return this.i.kz ? this.i.kz.d : NaN;
+        },
+        set: function (v) {
+            this.ensureFabCornerRadius();
+            this.i.kz.d = +v;
+            this.i.kz = this.i.kz;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXButtonComponent.prototype.ensureFabCornerRadius = function () {
+        if (this.i.kz) {
+            return;
+        }
+        this.i.kz = new CornerRadius(2);
+    };
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabRippleColor", {
+        /**
+         * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
+        */
+        get: function () {
+            return brushToString(this.i.ps);
+        },
+        set: function (v) {
+            this.i.ps = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabTextColor", {
+        /**
+         * Gets or sets the color to use for the text of the button when type is floating action button.
+        */
+        get: function () {
+            return brushToString(this.i.pt);
+        },
+        set: function (v) {
+            this.i.pt = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabHoverTextColor", {
+        /**
+         * Gets or sets the color to use for the hovered text of the button when type is floating action button.
+        */
+        get: function () {
+            return brushToString(this.i.pr);
+        },
+        set: function (v) {
+            this.i.pr = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabFocusBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the backround the button when it is focused and fab.
+        */
+        get: function () {
+            return brushToString(this.i.po);
+        },
+        set: function (v) {
+            this.i.po = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fabFocusTextColor", {
+        /**
+         * Gets or sets the color to use for the text the button when it is focused and fab.
+        */
+        get: function () {
+            return brushToString(this.i.pp);
+        },
+        set: function (v) {
+            this.i.pp = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the background of the button when the  type is icon.
+        */
+        get: function () {
+            return brushToString(this.i.p9);
+        },
+        set: function (v) {
+            this.i.p9 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconDisabledBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the disabled background of the button when the type is icon.
+        */
+        get: function () {
+            return brushToString(this.i.qb);
+        },
+        set: function (v) {
+            this.i.qb = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconDisabledBorderColor", {
+        /**
+         * Gets or sets the color to use for the disabled border of the button when the type is icon.
+        */
+        get: function () {
+            return brushToString(this.i.qc);
+        },
+        set: function (v) {
+            this.i.qc = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconDisabledTextColor", {
+        /**
+         * Gets or sets the color to use for the disabled text of the button when the type is icon.
+        */
+        get: function () {
+            return brushToString(this.i.qd);
+        },
+        set: function (v) {
+            this.i.qd = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconDisabledElevation", {
+        /**
+         * Gets or sets the disabled elevation to use for the button when the type is icon.
+        */
+        get: function () {
+            return this.i.dq;
+        },
+        set: function (v) {
+            this.i.dq = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconHoverBackgroundColor", {
+        /**
+         * Gets or sets the hover color to use for the background of the button when the  type is hoveredIcon.
+        */
+        get: function () {
+            return brushToString(this.i.qg);
+        },
+        set: function (v) {
+            this.i.qg = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconBorderColor", {
+        /**
+         * Gets or sets the border color to use for the button when the type is icon.
+        */
+        get: function () {
+            return brushToString(this.i.qa);
+        },
+        set: function (v) {
+            this.i.qa = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconRestingElevation", {
+        /**
+         * Gets or sets the elevation to use for the button when the type is icon.
+        */
+        get: function () {
+            return this.i.dt;
+        },
+        set: function (v) {
+            this.i.dt = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconHoverElevation", {
+        /**
+         * Gets or sets the hover elevation to use for the button when the type is icon.
+        */
+        get: function () {
+            return this.i.ds;
+        },
+        set: function (v) {
+            this.i.ds = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconFocusElevation", {
+        /**
+         * Gets or sets the focus elevation to use for the button when the type is icon.
+        */
+        get: function () {
+            return this.i.dr;
+        },
+        set: function (v) {
+            this.i.dr = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconBorderWidth", {
+        /**
+         * Gets or sets the width to use for the button border when the type is icon.
+        */
+        get: function () {
+            return this.i.bs;
+        },
+        set: function (v) {
+            this.i.bs = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconCornerRadiusBottomRight", {
+        get: function () {
+            return this.i.k1 ? this.i.k1.b : NaN;
+        },
+        set: function (v) {
+            this.ensureIconCornerRadius();
+            this.i.k1.b = +v;
+            this.i.k1 = this.i.k1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconCornerRadiusBottomLeft", {
+        get: function () {
+            return this.i.k1 ? this.i.k1.a : NaN;
+        },
+        set: function (v) {
+            this.ensureIconCornerRadius();
+            this.i.k1.a = +v;
+            this.i.k1 = this.i.k1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconCornerRadiusTopLeft", {
+        get: function () {
+            return this.i.k1 ? this.i.k1.c : NaN;
+        },
+        set: function (v) {
+            this.ensureIconCornerRadius();
+            this.i.k1.c = +v;
+            this.i.k1 = this.i.k1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconCornerRadiusTopRight", {
+        get: function () {
+            return this.i.k1 ? this.i.k1.d : NaN;
+        },
+        set: function (v) {
+            this.ensureIconCornerRadius();
+            this.i.k1.d = +v;
+            this.i.k1 = this.i.k1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXButtonComponent.prototype.ensureIconCornerRadius = function () {
+        if (this.i.k1) {
+            return;
+        }
+        this.i.k1 = new CornerRadius(2);
+    };
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconRippleColor", {
+        /**
+         * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
+        */
+        get: function () {
+            return brushToString(this.i.qi);
+        },
+        set: function (v) {
+            this.i.qi = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconTextColor", {
+        /**
+         * Gets or sets the color to use for the text of the button when type is icon.
+        */
+        get: function () {
+            return brushToString(this.i.qj);
+        },
+        set: function (v) {
+            this.i.qj = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconHoverTextColor", {
+        /**
+         * Gets or sets the color to use for the hovered text of the button when type is icon.
+        */
+        get: function () {
+            return brushToString(this.i.qh);
+        },
+        set: function (v) {
+            this.i.qh = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconFocusBackgroundColor", {
+        /**
+         * Gets or sets the color to use for the backround the button when it is focused and icon.
+        */
+        get: function () {
+            return brushToString(this.i.qe);
+        },
+        set: function (v) {
+            this.i.qe = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "iconFocusTextColor", {
+        /**
+         * Gets or sets the color to use for the text the button when it is focused and icon.
+        */
+        get: function () {
+            return brushToString(this.i.qf);
+        },
+        set: function (v) {
+            this.i.qf = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "inputId", {
+        /**
+         * Gets or sets the id to use for the internal native checkbox.
+        */
+        get: function () {
+            return this.i.hu;
+        },
+        set: function (v) {
+            this.i.hu = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "id", {
+        /**
+         * Gets or sets the id to use for the checkbox.
+        */
+        get: function () {
+            return this.i.hs;
+        },
+        set: function (v) {
+            this.i.hs = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "display", {
+        /**
+         * Gets or sets the id to use for the checkbox.
+        */
+        get: function () {
+            return this.i.fw;
+        },
+        set: function (v) {
+            this.i.fw = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flexDirection", {
+        /**
+         * Gets or sets the id to use for the checkbox.
+        */
+        get: function () {
+            return this.i.g0;
+        },
+        set: function (v) {
+            this.i.g0 = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "flexGrow", {
+        /**
+         * Gets or sets the flex-grow setting for the button.
+        */
+        get: function () {
+            return this.i.g2;
+        },
+        set: function (v) {
+            this.i.g2 = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "alignItems", {
+        /**
+         * Gets or sets the id to use for the checkbox.
+        */
+        get: function () {
+            return this.i.e7;
+        },
+        set: function (v) {
+            this.i.e7 = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "value", {
+        /**
+         * Gets or sets value to use for the checkbox.
+        */
+        get: function () {
+            return this.i.ea;
+        },
+        set: function (v) {
+            this.i.ea = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "name", {
+        /**
+         * Gets or sets name to use for the button.
+        */
+        get: function () {
+            return this.i.h2;
+        },
+        set: function (v) {
+            this.i.h2 = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "tabIndex", {
+        /**
+         * Gets or sets TabIndex to use for the checkbox.
+        */
+        get: function () {
+            return this.i.d3;
+        },
+        set: function (v) {
+            this.i.d3 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "ariaLabel", {
+        /**
+         * Gets or sets the value of the aria-label attribute.
+        */
+        get: function () {
+            return this.i.e9;
+        },
+        set: function (v) {
+            this.i.e9 = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "fillAvailableSpace", {
+        /**
+         * Gets or sets whether the button should fill the available space. If false, the button
+         * will use an intrinsic size.
+        */
+        get: function () {
+            return this.i.av;
+        },
+        set: function (v) {
+            this.i.av = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "focused", {
+        /**
+         * Gets or sets if the checkbox is Focused.
+        */
+        get: function () {
+            return this.i.focused;
+        },
+        set: function (v) {
+            this.i.focused = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "isFocusStyleEnabled", {
+        /**
+         * Gets or sets if the button show use styling to show focus.
+        */
+        get: function () {
+            return this.i.az;
+        },
+        set: function (v) {
+            this.i.az = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "disableRipple", {
+        /**
+         * Gets or sets whether to disable the ripple effect for the button.
+        */
+        get: function () {
+            return this.i.at;
+        },
+        set: function (v) {
+            this.i.at = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "actualDisableRipple", {
+        /**
+         * Gets whether to actually disable the ripple effect for the button.
+        */
+        get: function () {
+            return this.i.ap;
+        },
+        set: function (v) {
+            this.i.ap = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "disableHover", {
+        /**
+         * Gets or sets whether the hover effect is disabled.
+        */
+        get: function () {
+            return this.i.ar;
+        },
+        set: function (v) {
+            this.i.ar = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "isHover", {
+        /**
+         * Gets or sets whether the checkbox is checked.
+        */
+        get: function () {
+            return this.i.a0;
+        },
+        set: function (v) {
+            this.i.a0 = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.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
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "disableTransitions", {
+        /**
+         * Gets or sets whether the checkbox transitions are disabled.
+        */
+        get: function () {
+            return this.i.au;
+        },
+        set: function (v) {
+            this.i.au = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "disablePointer", {
+        /**
+         * Gets or sets whether the cursor will change into a pointer when the button is hovered.
+        */
+        get: function () {
+            return this.i.as;
+        },
+        set: function (v) {
+            this.i.as = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "contentPaddingLeft", {
+        /**
+         * Gets or sets the left padding for the button content.
+        */
+        get: function () {
+            return this.i.bi;
+        },
+        set: function (v) {
+            this.i.bi = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "contentPaddingTop", {
+        /**
+         * Gets or sets the top padding for the button content.
+        */
+        get: function () {
+            return this.i.bk;
+        },
+        set: function (v) {
+            this.i.bk = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "contentPaddingRight", {
+        /**
+         * Gets or sets the right padding for the button content.
+        */
+        get: function () {
+            return this.i.bj;
+        },
+        set: function (v) {
+            this.i.bj = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "contentPaddingBottom", {
+        /**
+         * Gets or sets the bottom padding for the button content.
+        */
+        get: function () {
+            return this.i.bh;
+        },
+        set: function (v) {
+            this.i.bh = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "horizontalContentAlignment", {
+        get: function () {
+            return this.i.k5;
+        },
+        set: function (v) {
+            this.i.k5 = ensureEnum(HorizontalAlignment_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "verticalContentAlignment", {
+        get: function () {
+            return this.i.q9;
+        },
+        set: function (v) {
+            this.i.q9 = ensureEnum(VerticalAlignment_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "clickTunneling", {
+        /**
+         * Gets or sets if clicking on the button is allowed to tunnel down to button content.
+        */
+        get: function () {
+            return this.i.aq;
+        },
+        set: function (v) {
+            this.i.aq = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXButtonComponent.prototype.findByName = function (name) {
+        if (this.findEphemera) {
+            if (name && name.indexOf("@@e:") == 0) {
+                return this.findEphemera(name);
+            }
+        }
+        return null;
+    };
+    Object.defineProperty(IgxXButtonComponent.prototype, "hasUserValues", {
+        get: function () {
+            return this._hasUserValues;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXButtonComponent.prototype.__m = function (propertyName) {
+        if (!this._inStyling) {
+            this._hasUserValues.add(propertyName);
+        }
+    };
+    IgxXButtonComponent.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("XButtonComponent");
+        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;
+    };
+    IgxXButtonComponent.prototype.onDetachedFromUI = function () {
+        this.i.onDetachedFromUI();
+    };
+    IgxXButtonComponent.prototype.onAttachedToUI = function () {
+        this.i.onAttachedToUI();
+    };
+    /**
+     * Exports visual information about the current state of the grid.
+    
+    */
+    IgxXButtonComponent.prototype.exportVisualModel = function () {
+        var iv = this.i.d7();
+        return (iv);
+    };
+    /**
+     * Returns a serialized copy of the exported visual model
+    
+    */
+    IgxXButtonComponent.prototype.exportSerializedVisualModel = function () {
+        var iv = this.i.f0();
+        return (iv);
+    };
+    Object.defineProperty(IgxXButtonComponent.prototype, "clicked", {
+        get: function () {
+            var _this = this;
+            if (this._clicked == null) {
+                this._clicked = new EventEmitter();
+                this.i.clicked = delegateCombine(this.i.clicked, function (o, e) {
+                    _this._runInZone(function () {
+                        var outerArgs = new IgxButtonClickEventArgs();
+                        outerArgs._provideImplementation(e);
+                        if (_this.beforeClicked) {
+                            _this.beforeClicked(_this, outerArgs);
+                        }
+                        _this._clicked.emit({
+                            sender: _this,
+                            args: outerArgs
+                        });
+                    });
+                });
+            }
+            return this._clicked;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "gotFocus", {
+        get: function () {
+            var _this = this;
+            if (this._gotFocus == null) {
+                this._gotFocus = new EventEmitter();
+                this.i.gotFocus = delegateCombine(this.i.gotFocus, function (o, e) {
+                    _this._runInZone(function () {
+                        var outerArgs = new IgxFocusEventArgs();
+                        outerArgs._provideImplementation(e);
+                        if (_this.beforeGotFocus) {
+                            _this.beforeGotFocus(_this, outerArgs);
+                        }
+                        _this._gotFocus.emit({
+                            sender: _this,
+                            args: outerArgs
+                        });
+                    });
+                });
+            }
+            return this._gotFocus;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "lostFocus", {
+        get: function () {
+            var _this = this;
+            if (this._lostFocus == null) {
+                this._lostFocus = new EventEmitter();
+                this.i.lostFocus = delegateCombine(this.i.lostFocus, function (o, e) {
+                    _this._runInZone(function () {
+                        var outerArgs = new IgxFocusEventArgs();
+                        outerArgs._provideImplementation(e);
+                        if (_this.beforeLostFocus) {
+                            _this.beforeLostFocus(_this, outerArgs);
+                        }
+                        _this._lostFocus.emit({
+                            sender: _this,
+                            args: outerArgs
+                        });
+                    });
+                });
+            }
+            return this._lostFocus;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXButtonComponent.prototype._runInZone = function (act) {
+        if (this._zoneRunner != null) {
+            this._zoneRunner(act);
+        }
+        else {
+            act();
+        }
+    };
+    IgxXButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+    IgxXButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxXButtonComponent, selector: "igx-x-button", inputs: { minWidth: "minWidth", minHeight: "minHeight", displayType: "displayType", density: "density", baseTheme: "baseTheme", actualDensity: "actualDensity", actualBorderColor: "actualBorderColor", actualUmbraShadowColor: "actualUmbraShadowColor", actualPenumbraShadowColor: "actualPenumbraShadowColor", actualAmbientShadowColor: "actualAmbientShadowColor", actualRestingElevation: "actualRestingElevation", actualFocusElevation: "actualFocusElevation", actualHoverElevation: "actualHoverElevation", actualRippleColor: "actualRippleColor", actualCornerRadiusBottomRight: "actualCornerRadiusBottomRight", actualCornerRadiusBottomLeft: "actualCornerRadiusBottomLeft", actualCornerRadiusTopLeft: "actualCornerRadiusTopLeft", actualCornerRadiusTopRight: "actualCornerRadiusTopRight", actualBackgroundColor: "actualBackgroundColor", actualDisabledBackgroundColor: "actualDisabledBackgroundColor", actualDisabledBorderColor: "actualDisabledBorderColor", actualDisabledTextColor: "actualDisabledTextColor", actualDisabledElevation: "actualDisabledElevation", actualElevationMode: "actualElevationMode", actualTextColor: "actualTextColor", actualHoverTextColor: "actualHoverTextColor", actualFocusBackgroundColor: "actualFocusBackgroundColor", actualFocusTextColor: "actualFocusTextColor", actualHoverBackgroundColor: "actualHoverBackgroundColor", actualBorderWidth: "actualBorderWidth", raisedBackgroundColor: "raisedBackgroundColor", raisedDisabledBackgroundColor: "raisedDisabledBackgroundColor", raisedDisabledBorderColor: "raisedDisabledBorderColor", raisedDisabledTextColor: "raisedDisabledTextColor", raisedDisabledElevation: "raisedDisabledElevation", raisedHoverBackgroundColor: "raisedHoverBackgroundColor", raisedBorderColor: "raisedBorderColor", raisedRestingElevation: "raisedRestingElevation", raisedHoverElevation: "raisedHoverElevation", raisedFocusElevation: "raisedFocusElevation", raisedBorderWidth: "raisedBorderWidth", raisedCornerRadiusBottomRight: "raisedCornerRadiusBottomRight", raisedCornerRadiusBottomLeft: "raisedCornerRadiusBottomLeft", raisedCornerRadiusTopLeft: "raisedCornerRadiusTopLeft", raisedCornerRadiusTopRight: "raisedCornerRadiusTopRight", raisedRippleColor: "raisedRippleColor", flatBackgroundColor: "flatBackgroundColor", flatDisabledBackgroundColor: "flatDisabledBackgroundColor", flatDisabledBorderColor: "flatDisabledBorderColor", flatDisabledTextColor: "flatDisabledTextColor", flatDisabledElevation: "flatDisabledElevation", flatHoverBackgroundColor: "flatHoverBackgroundColor", flatBorderColor: "flatBorderColor", flatRestingElevation: "flatRestingElevation", flatHoverElevation: "flatHoverElevation", flatFocusElevation: "flatFocusElevation", flatRippleColor: "flatRippleColor", flatTextColor: "flatTextColor", flatHoverTextColor: "flatHoverTextColor", flatFocusBackgroundColor: "flatFocusBackgroundColor", flatFocusTextColor: "flatFocusTextColor", flatBorderWidth: "flatBorderWidth", flatCornerRadiusBottomRight: "flatCornerRadiusBottomRight", flatCornerRadiusBottomLeft: "flatCornerRadiusBottomLeft", flatCornerRadiusTopLeft: "flatCornerRadiusTopLeft", flatCornerRadiusTopRight: "flatCornerRadiusTopRight", backgroundColor: "backgroundColor", disabledBackgroundColor: "disabledBackgroundColor", disabledBorderColor: "disabledBorderColor", disabledTextColor: "disabledTextColor", disabledElevation: "disabledElevation", elevationMode: "elevationMode", hoverBackgroundColor: "hoverBackgroundColor", borderColor: "borderColor", restingElevation: "restingElevation", hoverElevation: "hoverElevation", focusElevation: "focusElevation", textStyle: "textStyle", textColor: "textColor", hoverTextColor: "hoverTextColor", rippleColor: "rippleColor", raisedTextColor: "raisedTextColor", raisedHoverTextColor: "raisedHoverTextColor", raisedFocusBackgroundColor: "raisedFocusBackgroundColor", raisedFocusTextColor: "raisedFocusTextColor", focusBackgroundColor: "focusBackgroundColor", focusTextColor: "focusTextColor", borderWidth: "borderWidth", cornerRadiusBottomRight: "cornerRadiusBottomRight", cornerRadiusBottomLeft: "cornerRadiusBottomLeft", cornerRadiusTopLeft: "cornerRadiusTopLeft", cornerRadiusTopRight: "cornerRadiusTopRight", outlinedBackgroundColor: "outlinedBackgroundColor", outlinedDisabledBackgroundColor: "outlinedDisabledBackgroundColor", outlinedDisabledBorderColor: "outlinedDisabledBorderColor", outlinedDisabledTextColor: "outlinedDisabledTextColor", outlinedDisabledElevation: "outlinedDisabledElevation", outlinedHoverBackgroundColor: "outlinedHoverBackgroundColor", outlinedBorderColor: "outlinedBorderColor", outlinedRestingElevation: "outlinedRestingElevation", outlinedHoverElevation: "outlinedHoverElevation", outlinedFocusElevation: "outlinedFocusElevation", outlinedBorderWidth: "outlinedBorderWidth", outlinedCornerRadiusBottomRight: "outlinedCornerRadiusBottomRight", outlinedCornerRadiusBottomLeft: "outlinedCornerRadiusBottomLeft", outlinedCornerRadiusTopLeft: "outlinedCornerRadiusTopLeft", outlinedCornerRadiusTopRight: "outlinedCornerRadiusTopRight", outlinedRippleColor: "outlinedRippleColor", outlinedTextColor: "outlinedTextColor", outlinedHoverTextColor: "outlinedHoverTextColor", outlinedFocusBackgroundColor: "outlinedFocusBackgroundColor", outlinedFocusTextColor: "outlinedFocusTextColor", fabBackgroundColor: "fabBackgroundColor", fabDisabledBackgroundColor: "fabDisabledBackgroundColor", fabDisabledBorderColor: "fabDisabledBorderColor", fabDisabledTextColor: "fabDisabledTextColor", fabDisabledElevation: "fabDisabledElevation", fabHoverBackgroundColor: "fabHoverBackgroundColor", fabBorderColor: "fabBorderColor", fabRestingElevation: "fabRestingElevation", fabHoverElevation: "fabHoverElevation", fabFocusElevation: "fabFocusElevation", fabBorderWidth: "fabBorderWidth", fabCornerRadiusBottomRight: "fabCornerRadiusBottomRight", fabCornerRadiusBottomLeft: "fabCornerRadiusBottomLeft", fabCornerRadiusTopLeft: "fabCornerRadiusTopLeft", fabCornerRadiusTopRight: "fabCornerRadiusTopRight", fabRippleColor: "fabRippleColor", fabTextColor: "fabTextColor", fabHoverTextColor: "fabHoverTextColor", fabFocusBackgroundColor: "fabFocusBackgroundColor", fabFocusTextColor: "fabFocusTextColor", iconBackgroundColor: "iconBackgroundColor", iconDisabledBackgroundColor: "iconDisabledBackgroundColor", iconDisabledBorderColor: "iconDisabledBorderColor", iconDisabledTextColor: "iconDisabledTextColor", iconDisabledElevation: "iconDisabledElevation", iconHoverBackgroundColor: "iconHoverBackgroundColor", iconBorderColor: "iconBorderColor", iconRestingElevation: "iconRestingElevation", iconHoverElevation: "iconHoverElevation", iconFocusElevation: "iconFocusElevation", iconBorderWidth: "iconBorderWidth", iconCornerRadiusBottomRight: "iconCornerRadiusBottomRight", iconCornerRadiusBottomLeft: "iconCornerRadiusBottomLeft", iconCornerRadiusTopLeft: "iconCornerRadiusTopLeft", iconCornerRadiusTopRight: "iconCornerRadiusTopRight", iconRippleColor: "iconRippleColor", iconTextColor: "iconTextColor", iconHoverTextColor: "iconHoverTextColor", iconFocusBackgroundColor: "iconFocusBackgroundColor", iconFocusTextColor: "iconFocusTextColor", inputId: "inputId", id: "id", display: "display", flexDirection: "flexDirection", flexGrow: "flexGrow", alignItems: "alignItems", value: "value", name: "name", tabIndex: ["tabindex", "tabIndex"], ariaLabel: ["aria-label", "ariaLabel"], fillAvailableSpace: "fillAvailableSpace", focused: "focused", isFocusStyleEnabled: "isFocusStyleEnabled", disableRipple: "disableRipple", actualDisableRipple: "actualDisableRipple", disableHover: "disableHover", isHover: "isHover", disabled: "disabled", disableTransitions: "disableTransitions", disablePointer: "disablePointer", contentPaddingLeft: "contentPaddingLeft", contentPaddingTop: "contentPaddingTop", contentPaddingRight: "contentPaddingRight", contentPaddingBottom: "contentPaddingBottom", horizontalContentAlignment: "horizontalContentAlignment", verticalContentAlignment: "verticalContentAlignment", clickTunneling: "clickTunneling" }, outputs: { clicked: "clicked", gotFocus: "gotFocus", lostFocus: "lostFocus" }, host: { properties: { "attr.id": "this.id", "style.display": "this.display", "style.flexDirection": "this.flexDirection", "style.flexGrow": "this.flexGrow", "style.alignItems": "this.alignItems" }, classAttribute: "ig-x-button igx-x-button" }, providers: [], 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 IgxXButtonComponent;
+}());
+export { IgxXButtonComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'igx-x-button',
+                    template: "<ng-template #childContent><ng-content></ng-content></ng-template>\n<ng-container #dynamicContent></ng-container>",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [],
+                    host: { 'class': 'ig-x-button igx-x-button' },
+                    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 }]
+            }], minWidth: [{
+                type: Input
+            }], minHeight: [{
+                type: Input
+            }], displayType: [{
+                type: Input
+            }], density: [{
+                type: Input
+            }], baseTheme: [{
+                type: Input
+            }], actualDensity: [{
+                type: Input
+            }], actualBorderColor: [{
+                type: Input
+            }], actualUmbraShadowColor: [{
+                type: Input
+            }], actualPenumbraShadowColor: [{
+                type: Input
+            }], actualAmbientShadowColor: [{
+                type: Input
+            }], actualRestingElevation: [{
+                type: Input
+            }], actualFocusElevation: [{
+                type: Input
+            }], actualHoverElevation: [{
+                type: Input
+            }], actualRippleColor: [{
+                type: Input
+            }], actualCornerRadiusBottomRight: [{
+                type: Input
+            }], actualCornerRadiusBottomLeft: [{
+                type: Input
+            }], actualCornerRadiusTopLeft: [{
+                type: Input
+            }], actualCornerRadiusTopRight: [{
+                type: Input
+            }], actualBackgroundColor: [{
+                type: Input
+            }], actualDisabledBackgroundColor: [{
+                type: Input
+            }], actualDisabledBorderColor: [{
+                type: Input
+            }], actualDisabledTextColor: [{
+                type: Input
+            }], actualDisabledElevation: [{
+                type: Input
+            }], actualElevationMode: [{
+                type: Input
+            }], actualTextColor: [{
+                type: Input
+            }], actualHoverTextColor: [{
+                type: Input
+            }], actualFocusBackgroundColor: [{
+                type: Input
+            }], actualFocusTextColor: [{
+                type: Input
+            }], actualHoverBackgroundColor: [{
+                type: Input
+            }], actualBorderWidth: [{
+                type: Input
+            }], raisedBackgroundColor: [{
+                type: Input
+            }], raisedDisabledBackgroundColor: [{
+                type: Input
+            }], raisedDisabledBorderColor: [{
+                type: Input
+            }], raisedDisabledTextColor: [{
+                type: Input
+            }], raisedDisabledElevation: [{
+                type: Input
+            }], raisedHoverBackgroundColor: [{
+                type: Input
+            }], raisedBorderColor: [{
+                type: Input
+            }], raisedRestingElevation: [{
+                type: Input
+            }], raisedHoverElevation: [{
+                type: Input
+            }], raisedFocusElevation: [{
+                type: Input
+            }], raisedBorderWidth: [{
+                type: Input
+            }], raisedCornerRadiusBottomRight: [{
+                type: Input
+            }], raisedCornerRadiusBottomLeft: [{
+                type: Input
+            }], raisedCornerRadiusTopLeft: [{
+                type: Input
+            }], raisedCornerRadiusTopRight: [{
+                type: Input
+            }], raisedRippleColor: [{
+                type: Input
+            }], flatBackgroundColor: [{
+                type: Input
+            }], flatDisabledBackgroundColor: [{
+                type: Input
+            }], flatDisabledBorderColor: [{
+                type: Input
+            }], flatDisabledTextColor: [{
+                type: Input
+            }], flatDisabledElevation: [{
+                type: Input
+            }], flatHoverBackgroundColor: [{
+                type: Input
+            }], flatBorderColor: [{
+                type: Input
+            }], flatRestingElevation: [{
+                type: Input
+            }], flatHoverElevation: [{
+                type: Input
+            }], flatFocusElevation: [{
+                type: Input
+            }], flatRippleColor: [{
+                type: Input
+            }], flatTextColor: [{
+                type: Input
+            }], flatHoverTextColor: [{
+                type: Input
+            }], flatFocusBackgroundColor: [{
+                type: Input
+            }], flatFocusTextColor: [{
+                type: Input
+            }], flatBorderWidth: [{
+                type: Input
+            }], flatCornerRadiusBottomRight: [{
+                type: Input
+            }], flatCornerRadiusBottomLeft: [{
+                type: Input
+            }], flatCornerRadiusTopLeft: [{
+                type: Input
+            }], flatCornerRadiusTopRight: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], disabledBackgroundColor: [{
+                type: Input
+            }], disabledBorderColor: [{
+                type: Input
+            }], disabledTextColor: [{
+                type: Input
+            }], disabledElevation: [{
+                type: Input
+            }], elevationMode: [{
+                type: Input
+            }], hoverBackgroundColor: [{
+                type: Input
+            }], borderColor: [{
+                type: Input
+            }], restingElevation: [{
+                type: Input
+            }], hoverElevation: [{
+                type: Input
+            }], focusElevation: [{
+                type: Input
+            }], textStyle: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], hoverTextColor: [{
+                type: Input
+            }], rippleColor: [{
+                type: Input
+            }], raisedTextColor: [{
+                type: Input
+            }], raisedHoverTextColor: [{
+                type: Input
+            }], raisedFocusBackgroundColor: [{
+                type: Input
+            }], raisedFocusTextColor: [{
+                type: Input
+            }], focusBackgroundColor: [{
+                type: Input
+            }], focusTextColor: [{
+                type: Input
+            }], borderWidth: [{
+                type: Input
+            }], cornerRadiusBottomRight: [{
+                type: Input
+            }], cornerRadiusBottomLeft: [{
+                type: Input
+            }], cornerRadiusTopLeft: [{
+                type: Input
+            }], cornerRadiusTopRight: [{
+                type: Input
+            }], outlinedBackgroundColor: [{
+                type: Input
+            }], outlinedDisabledBackgroundColor: [{
+                type: Input
+            }], outlinedDisabledBorderColor: [{
+                type: Input
+            }], outlinedDisabledTextColor: [{
+                type: Input
+            }], outlinedDisabledElevation: [{
+                type: Input
+            }], outlinedHoverBackgroundColor: [{
+                type: Input
+            }], outlinedBorderColor: [{
+                type: Input
+            }], outlinedRestingElevation: [{
+                type: Input
+            }], outlinedHoverElevation: [{
+                type: Input
+            }], outlinedFocusElevation: [{
+                type: Input
+            }], outlinedBorderWidth: [{
+                type: Input
+            }], outlinedCornerRadiusBottomRight: [{
+                type: Input
+            }], outlinedCornerRadiusBottomLeft: [{
+                type: Input
+            }], outlinedCornerRadiusTopLeft: [{
+                type: Input
+            }], outlinedCornerRadiusTopRight: [{
+                type: Input
+            }], outlinedRippleColor: [{
+                type: Input
+            }], outlinedTextColor: [{
+                type: Input
+            }], outlinedHoverTextColor: [{
+                type: Input
+            }], outlinedFocusBackgroundColor: [{
+                type: Input
+            }], outlinedFocusTextColor: [{
+                type: Input
+            }], fabBackgroundColor: [{
+                type: Input
+            }], fabDisabledBackgroundColor: [{
+                type: Input
+            }], fabDisabledBorderColor: [{
+                type: Input
+            }], fabDisabledTextColor: [{
+                type: Input
+            }], fabDisabledElevation: [{
+                type: Input
+            }], fabHoverBackgroundColor: [{
+                type: Input
+            }], fabBorderColor: [{
+                type: Input
+            }], fabRestingElevation: [{
+                type: Input
+            }], fabHoverElevation: [{
+                type: Input
+            }], fabFocusElevation: [{
+                type: Input
+            }], fabBorderWidth: [{
+                type: Input
+            }], fabCornerRadiusBottomRight: [{
+                type: Input
+            }], fabCornerRadiusBottomLeft: [{
+                type: Input
+            }], fabCornerRadiusTopLeft: [{
+                type: Input
+            }], fabCornerRadiusTopRight: [{
+                type: Input
+            }], fabRippleColor: [{
+                type: Input
+            }], fabTextColor: [{
+                type: Input
+            }], fabHoverTextColor: [{
+                type: Input
+            }], fabFocusBackgroundColor: [{
+                type: Input
+            }], fabFocusTextColor: [{
+                type: Input
+            }], iconBackgroundColor: [{
+                type: Input
+            }], iconDisabledBackgroundColor: [{
+                type: Input
+            }], iconDisabledBorderColor: [{
+                type: Input
+            }], iconDisabledTextColor: [{
+                type: Input
+            }], iconDisabledElevation: [{
+                type: Input
+            }], iconHoverBackgroundColor: [{
+                type: Input
+            }], iconBorderColor: [{
+                type: Input
+            }], iconRestingElevation: [{
+                type: Input
+            }], iconHoverElevation: [{
+                type: Input
+            }], iconFocusElevation: [{
+                type: Input
+            }], iconBorderWidth: [{
+                type: Input
+            }], iconCornerRadiusBottomRight: [{
+                type: Input
+            }], iconCornerRadiusBottomLeft: [{
+                type: Input
+            }], iconCornerRadiusTopLeft: [{
+                type: Input
+            }], iconCornerRadiusTopRight: [{
+                type: Input
+            }], iconRippleColor: [{
+                type: Input
+            }], iconTextColor: [{
+                type: Input
+            }], iconHoverTextColor: [{
+                type: Input
+            }], iconFocusBackgroundColor: [{
+                type: Input
+            }], iconFocusTextColor: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }, {
+                type: Input
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }, {
+                type: Input
+            }], flexDirection: [{
+                type: HostBinding,
+                args: ['style.flexDirection']
+            }, {
+                type: Input
+            }], flexGrow: [{
+                type: HostBinding,
+                args: ['style.flexGrow']
+            }, {
+                type: Input
+            }], alignItems: [{
+                type: HostBinding,
+                args: ['style.alignItems']
+            }, {
+                type: Input
+            }], value: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input,
+                args: ['tabindex']
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], fillAvailableSpace: [{
+                type: Input
+            }], focused: [{
+                type: Input
+            }], isFocusStyleEnabled: [{
+                type: Input
+            }], disableRipple: [{
+                type: Input
+            }], actualDisableRipple: [{
+                type: Input
+            }], disableHover: [{
+                type: Input
+            }], isHover: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], disableTransitions: [{
+                type: Input
+            }], disablePointer: [{
+                type: Input
+            }], contentPaddingLeft: [{
+                type: Input
+            }], contentPaddingTop: [{
+                type: Input
+            }], contentPaddingRight: [{
+                type: Input
+            }], contentPaddingBottom: [{
+                type: Input
+            }], horizontalContentAlignment: [{
+                type: Input
+            }], verticalContentAlignment: [{
+                type: Input
+            }], clickTunneling: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }], gotFocus: [{
+                type: Output
+            }], lostFocus: [{
+                type: Output
+            }] } });