igniteui-angular-inputs 16.1.0-beta.1

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

@@ -0,0 +1,1272 @@
+import { Output, TemplateRef, EventEmitter, Component, ViewContainerRef, ViewChild, ContentChildren, Input, ChangeDetectionStrategy, HostBinding } from '@angular/core';
+import { XButtonGroup } from "./XButtonGroup";
+import { ensureEnum, brushToString, stringToBrush, ensureBool, toSpinal, initializePropertiesFromCss, NamePatcher } from "igniteui-angular-core";
+import { AngularRenderer, PortalManager } from "igniteui-angular-core";
+import { delegateCombine } from "igniteui-angular-core";
+import { IgxXButtonComponent } from './igx-x-button-component';
+import { IgxXButtonGroupButtonCollection } from './igx-x-button-group-button-collection';
+import { CollectionAdapter } from "igniteui-angular-core";
+import { NotifyCollectionChangedAction } from "igniteui-angular-core";
+import { IgxButtonGroupSelectionChangedEventArgs } from './igx-button-group-selection-changed-event-args';
+import { ButtonGroupOrientation_$type } from './ButtonGroupOrientation';
+import { ControlDisplayDensity_$type } from "igniteui-angular-core";
+import { BaseControlTheme_$type } from "igniteui-angular-core";
+import { ButtonGroupDisplayStyle_$type } from './ButtonGroupDisplayStyle';
+import * as i0 from "@angular/core";
+var IgxXButtonGroupComponent = /** @class */ /*@__PURE__*/ (function () {
+    function IgxXButtonGroupComponent(renderer, _elRef, ngZone, injector, componentFactoryResolver) {
+        var _this = this;
+        this.renderer = renderer;
+        this._elRef = _elRef;
+        this.ngZone = ngZone;
+        this.injector = injector;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this._wrapper = null;
+        this._portalManager = null;
+        this._root = null;
+        /**
+        * The style mappings actually present in the chart. Do not directly modify this array.
+        * This array's contents can be modified by causing Angular to reproject the child content.
+        * Or adding and removing stye mappings from the manual style mapping collection on the styleMappings property.
+        */
+        this.actualButtons = [];
+        this._buttons = null;
+        this._buttonsAdapter = null;
+        this._implementation = null;
+        this.__p = null;
+        this._hasUserValues = new Set();
+        this._stylingContainer = null;
+        this._stylingParent = null;
+        this._inStyling = false;
+        this._selectionChanged = 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 buttonGroup = this.i;
+        this._buttonGroup = buttonGroup;
+        this._buttonsAdapter = new CollectionAdapter([], this.i.buttons, this.actualButtons, function (c) { return c.i; }, function (i) {
+            if (_this._root && _this._root.parentElement) {
+                i._styling(_this._root, _this, _this);
+            }
+        }, function (i) { });
+        if (renderer) {
+            this._portalManager = new PortalManager("buttonContent", componentFactoryResolver);
+            var ren = new AngularRenderer(root, this.renderer, window.document, this.ngZone, true, {}, this._portalManager);
+            this._wrapper = ren;
+            buttonGroup.provideContainer(ren);
+        }
+    }
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "buttons", {
+        /**
+         * A collection or manually added axes for the chart.
+        */
+        get: function () {
+            var _this = this;
+            if (this._buttons === null) {
+                var coll = new IgxXButtonGroupButtonCollection();
+                var inner = coll._innerColl;
+                inner.addListener(function (sender, e) {
+                    switch (e.action) {
+                        case NotifyCollectionChangedAction.Add:
+                            _this._buttonsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
+                            break;
+                        case NotifyCollectionChangedAction.Remove:
+                            _this._buttonsAdapter.removeManualItemAt(e.oldStartingIndex);
+                            break;
+                        case NotifyCollectionChangedAction.Replace:
+                            _this._buttonsAdapter.removeManualItemAt(e.oldStartingIndex);
+                            _this._buttonsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
+                            break;
+                        case NotifyCollectionChangedAction.Reset:
+                            _this._buttonsAdapter.clearManualItems();
+                            break;
+                    }
+                });
+                this._buttons = coll;
+            }
+            return this._buttons;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // supports angular themes or custom properties set in CSS
+    IgxXButtonGroupComponent.prototype.updateStyle = function () {
+        this._styling(this._root, this);
+    };
+    IgxXButtonGroupComponent.prototype.ngOnDestroy = function () {
+        this._buttonGroup.destroy();
+        this._wrapper.destroy();
+    };
+    IgxXButtonGroupComponent.prototype.ngAfterContentInit = function () {
+        this._buttonsAdapter.updateQuery(this.contentButtons);
+        this._styling(this._root, this);
+        if (this.actualButtons && this.actualButtons.length > 0) {
+            var currButtons = this.actualButtons;
+            for (var i = 0; i < currButtons.length; i++) {
+                currButtons[i]._styling(this._root, this, this);
+            }
+        }
+        this.updateStyle();
+    };
+    IgxXButtonGroupComponent.prototype.ngAfterViewInit = function () {
+        this._portalManager.dynamicContent = this._dynamicContent;
+        this._portalManager.onChildContentChanged(this._childTemplateRef);
+    };
+    IgxXButtonGroupComponent.prototype.createImplementation = function () {
+        return new XButtonGroup();
+    };
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "i", {
+        get: function () {
+            return this._implementation;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "displayType", {
+        /**
+     * Gets or sets the display style to use for the button.
+    */
+        get: function () {
+            return this.i.i;
+        },
+        set: function (v) {
+            this.i.i = ensureEnum(ButtonGroupDisplayStyle_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "baseTheme", {
+        /**
+         * Gets or sets the base built in theme to use for the button group.
+        */
+        get: function () {
+            return this.i.p;
+        },
+        set: function (v) {
+            this.i.p = ensureEnum(BaseControlTheme_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "density", {
+        /**
+         * Gets or sets the display density to use for the button group.
+        */
+        get: function () {
+            return this.i.t;
+        },
+        set: function (v) {
+            this.i.t = ensureEnum(ControlDisplayDensity_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "actualDensity", {
+        /**
+         * Gets the actual display density to use for the button group.
+        */
+        get: function () {
+            return this.i.s;
+        },
+        set: function (v) {
+            this.i.s = ensureEnum(ControlDisplayDensity_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "selectedIndices", {
+        /**
+         * Gets the currently selected button indices.
+        */
+        get: function () {
+            return this.i.d;
+        },
+        set: function (v) {
+            if (v && !Array.isArray(v) && typeof (v) == "string") {
+                var re = /\s*(?:,|\s|$)\s*/gm;
+                v = v.split(re);
+            }
+            this.i.d = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "actualItemCornerRadius", {
+        /**
+         * Gets the actual item corner radius for the appropriate corners.
+        */
+        get: function () {
+            return this.i.al;
+        },
+        set: function (v) {
+            this.i.al = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "actualItemBackgroundColor", {
+        /**
+         * Gets the actual item background color.
+        */
+        get: function () {
+            return brushToString(this.i.ez);
+        },
+        set: function (v) {
+            this.i.ez = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "actualItemDisabledBackgroundColor", {
+        /**
+         * Gets the actual item background color.
+        */
+        get: function () {
+            return brushToString(this.i.e1);
+        },
+        set: function (v) {
+            this.i.e1 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "actualItemTextColor", {
+        /**
+         * Gets the actual item text color.
+        */
+        get: function () {
+            return brushToString(this.i.e6);
+        },
+        set: function (v) {
+            this.i.e6 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "actualItemDisabledTextColor", {
+        /**
+         * Gets the actual item text color.
+        */
+        get: function () {
+            return brushToString(this.i.e3);
+        },
+        set: function (v) {
+            this.i.e3 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "actualItemBorderColor", {
+        /**
+         * Gets the actual item border color.
+        */
+        get: function () {
+            return brushToString(this.i.e0);
+        },
+        set: function (v) {
+            this.i.e0 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "actualItemDisabledBorderColor", {
+        /**
+         * Gets the actual item border color.
+        */
+        get: function () {
+            return brushToString(this.i.e2);
+        },
+        set: function (v) {
+            this.i.e2 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "actualItemBorderWidth", {
+        /**
+         * Gets the actual item border width.
+        */
+        get: function () {
+            return this.i.ak;
+        },
+        set: function (v) {
+            this.i.ak = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "actualSelectedItemBackgroundColor", {
+        /**
+         * Gets the actual selected item background color.
+        */
+        get: function () {
+            return brushToString(this.i.e7);
+        },
+        set: function (v) {
+            this.i.e7 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "actualSelectedItemTextColor", {
+        /**
+         * Gets the stroke actual selected item text color.
+        */
+        get: function () {
+            return brushToString(this.i.fa);
+        },
+        set: function (v) {
+            this.i.fa = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "actualItemHoverBackgroundColor", {
+        /**
+         * Gets the actual item hovered background color.
+        */
+        get: function () {
+            return brushToString(this.i.e4);
+        },
+        set: function (v) {
+            this.i.e4 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "actualItemHoverTextColor", {
+        /**
+         * Gets the actual item text color.
+        */
+        get: function () {
+            return brushToString(this.i.e5);
+        },
+        set: function (v) {
+            this.i.e5 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "actualSelectedItemHoverBackgroundColor", {
+        /**
+         * Gets the actual selected item hovered background color.
+        */
+        get: function () {
+            return brushToString(this.i.e8);
+        },
+        set: function (v) {
+            this.i.e8 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "actualSelectedItemHoverTextColor", {
+        /**
+         * Gets the actual selected item hovered text color.
+        */
+        get: function () {
+            return brushToString(this.i.e9);
+        },
+        set: function (v) {
+            this.i.e9 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "itemCornerRadius", {
+        /**
+         * Gets or sets the corner radius to use for the appropriate corners for the item buttons.
+        */
+        get: function () {
+            return this.i.a1;
+        },
+        set: function (v) {
+            this.i.a1 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "itemBackgroundColor", {
+        /**
+         * Gets or sets the color to use the background of the buttons in the group.
+        */
+        get: function () {
+            return brushToString(this.i.hn);
+        },
+        set: function (v) {
+            this.i.hn = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "itemDisabledBackgroundColor", {
+        /**
+         * Gets or sets the disabled color to use the background of the buttons in the group.
+        */
+        get: function () {
+            return brushToString(this.i.hp);
+        },
+        set: function (v) {
+            this.i.hp = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "itemTextColor", {
+        /**
+         * Gets or sets the color to use the text of the buttons in the group.
+        */
+        get: function () {
+            return brushToString(this.i.hu);
+        },
+        set: function (v) {
+            this.i.hu = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "itemDisabledTextColor", {
+        /**
+         * Gets or sets the disabled color to use the text of the buttons in the group.
+        */
+        get: function () {
+            return brushToString(this.i.hr);
+        },
+        set: function (v) {
+            this.i.hr = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "itemHoverBackgroundColor", {
+        /**
+         * Gets or sets the color to use the hovered background of the buttons in the group.
+        */
+        get: function () {
+            return brushToString(this.i.hs);
+        },
+        set: function (v) {
+            this.i.hs = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "itemBorderColor", {
+        /**
+         * Gets or sets the color to use the border of the buttons in the group.
+        */
+        get: function () {
+            return brushToString(this.i.ho);
+        },
+        set: function (v) {
+            this.i.ho = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "itemDisabledBorderColor", {
+        /**
+         * Gets or sets the disabled color to use the border of the buttons in the group.
+        */
+        get: function () {
+            return brushToString(this.i.hq);
+        },
+        set: function (v) {
+            this.i.hq = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "itemBorderWidth", {
+        /**
+         * Gets or sets the border width to use for the buttons in the group.
+        */
+        get: function () {
+            return this.i.a0;
+        },
+        set: function (v) {
+            this.i.a0 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "itemHoverTextColor", {
+        /**
+         * Gets or sets the color to use the hovered text of the buttons in the group.
+        */
+        get: function () {
+            return brushToString(this.i.ht);
+        },
+        set: function (v) {
+            this.i.ht = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "selectedItemBackgroundColor", {
+        /**
+         * Gets or sets the color to use the background of the buttons in the group that are selected.
+        */
+        get: function () {
+            return brushToString(this.i.h7);
+        },
+        set: function (v) {
+            this.i.h7 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "selectedItemTextColor", {
+        /**
+         * Gets or sets the color to use the text of the buttons in the group that are selected.
+        */
+        get: function () {
+            return brushToString(this.i.ia);
+        },
+        set: function (v) {
+            this.i.ia = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "selectedItemHoverBackgroundColor", {
+        /**
+         * Gets or sets the color to use the hovered background of the buttons in the group that are selected.
+        */
+        get: function () {
+            return brushToString(this.i.h8);
+        },
+        set: function (v) {
+            this.i.h8 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "selectedItemHoverTextColor", {
+        /**
+         * Gets or sets the color to use the hovered text of the buttons in the group that are selected.
+        */
+        get: function () {
+            return brushToString(this.i.h9);
+        },
+        set: function (v) {
+            this.i.h9 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "outlinedItemCornerRadius", {
+        /**
+         * Gets or sets the corner radius to use for the appropriate corners for the outlined type item buttons.
+        */
+        get: function () {
+            return this.i.a3;
+        },
+        set: function (v) {
+            this.i.a3 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "outlinedItemBackgroundColor", {
+        /**
+         * Gets or sets the color to use the background of the buttons in the group when type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.hv);
+        },
+        set: function (v) {
+            this.i.hv = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "outlinedItemDisabledBackgroundColor", {
+        /**
+         * Gets or sets the disabled color to use the background of the buttons in the group when type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.hx);
+        },
+        set: function (v) {
+            this.i.hx = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "outlinedItemTextColor", {
+        /**
+         * Gets or sets the color to use the text of the buttons in the group when type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.h2);
+        },
+        set: function (v) {
+            this.i.h2 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "outlinedItemDisabledTextColor", {
+        /**
+         * Gets or sets the disabled color to use the text of the buttons in the group when type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.hz);
+        },
+        set: function (v) {
+            this.i.hz = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "outlinedItemHoverBackgroundColor", {
+        /**
+         * Gets or sets the color to use the hovered background of the buttons in the group when type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.h0);
+        },
+        set: function (v) {
+            this.i.h0 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "outlinedItemBorderColor", {
+        /**
+         * Gets or sets the color to use the border of the buttons in the group when type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.hw);
+        },
+        set: function (v) {
+            this.i.hw = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "outlinedItemDisabledBorderColor", {
+        /**
+         * Gets or sets the disabled color to use the border of the buttons in the group when type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.hy);
+        },
+        set: function (v) {
+            this.i.hy = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "outlinedItemBorderWidth", {
+        /**
+         * Gets or sets the border width to use for the buttons in the group when type is outlined.
+        */
+        get: function () {
+            return this.i.a2;
+        },
+        set: function (v) {
+            this.i.a2 = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "outlinedItemHoverTextColor", {
+        /**
+         * Gets or sets the color to use the hovered text of the buttons in the group when type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.h1);
+        },
+        set: function (v) {
+            this.i.h1 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "outlinedSelectedItemBackgroundColor", {
+        /**
+         * Gets or sets the color to use the background of the buttons in the group that are selected when type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.h3);
+        },
+        set: function (v) {
+            this.i.h3 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "outlinedSelectedItemTextColor", {
+        /**
+         * Gets or sets the color to use the text of the buttons in the group that are selected when type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.h6);
+        },
+        set: function (v) {
+            this.i.h6 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "outlinedSelectedItemHoverBackgroundColor", {
+        /**
+         * Gets or sets the color to use the hovered background of the buttons in the group that are selected when type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.h4);
+        },
+        set: function (v) {
+            this.i.h4 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "outlinedSelectedItemHoverTextColor", {
+        /**
+         * Gets or sets the color to use the hovered text of the buttons in the group that are selected when type is outlined.
+        */
+        get: function () {
+            return brushToString(this.i.h5);
+        },
+        set: function (v) {
+            this.i.h5 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "flatItemCornerRadius", {
+        /**
+         * Gets or sets the corner radius to use for the appropriate corners for the flat type item buttons.
+        */
+        get: function () {
+            return this.i.az;
+        },
+        set: function (v) {
+            this.i.az = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "flatItemBackgroundColor", {
+        /**
+         * Gets or sets the color to use the background of the buttons in the group when type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.hb);
+        },
+        set: function (v) {
+            this.i.hb = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "flatItemDisabledBackgroundColor", {
+        /**
+         * Gets or sets the disabled color to use the background of the buttons in the group when type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.hd);
+        },
+        set: function (v) {
+            this.i.hd = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "flatItemTextColor", {
+        /**
+         * Gets or sets the color to use the text of the buttons in the group when type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.hi);
+        },
+        set: function (v) {
+            this.i.hi = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "flatItemDisabledTextColor", {
+        /**
+         * Gets or sets the disabled color to use the text of the buttons in the group when type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.hf);
+        },
+        set: function (v) {
+            this.i.hf = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "flatItemHoverBackgroundColor", {
+        /**
+         * Gets or sets the color to use the hovered background of the buttons in the group when type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.hg);
+        },
+        set: function (v) {
+            this.i.hg = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "flatItemBorderColor", {
+        /**
+         * Gets or sets the color to use the border of the buttons in the group when type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.hc);
+        },
+        set: function (v) {
+            this.i.hc = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "flatItemDisabledBorderColor", {
+        /**
+         * Gets or sets the disabled color to use the border of the buttons in the group when type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.he);
+        },
+        set: function (v) {
+            this.i.he = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "flatItemBorderWidth", {
+        /**
+         * Gets or sets the border width to use for the buttons in the group when type is flat.
+        */
+        get: function () {
+            return this.i.ay;
+        },
+        set: function (v) {
+            this.i.ay = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "flatItemHoverTextColor", {
+        /**
+         * Gets or sets the color to use the hovered text of the buttons in the group when type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.hh);
+        },
+        set: function (v) {
+            this.i.hh = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "flatSelectedItemBackgroundColor", {
+        /**
+         * Gets or sets the color to use the background of the buttons in the group that are selected when type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.hj);
+        },
+        set: function (v) {
+            this.i.hj = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "flatSelectedItemTextColor", {
+        /**
+         * Gets or sets the color to use the text of the buttons in the group that are selected when type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.hm);
+        },
+        set: function (v) {
+            this.i.hm = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "flatSelectedItemHoverBackgroundColor", {
+        /**
+         * Gets or sets the color to use the hovered background of the buttons in the group that are selected when type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.hk);
+        },
+        set: function (v) {
+            this.i.hk = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "flatSelectedItemHoverTextColor", {
+        /**
+         * Gets or sets the color to use the hovered text of the buttons in the group that are selected when type is flat.
+        */
+        get: function () {
+            return brushToString(this.i.hl);
+        },
+        set: function (v) {
+            this.i.hl = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "orientation", {
+        /**
+         * Gets or sets the oreientation to use the button group when type is outlined.
+        */
+        get: function () {
+            return this.i.k;
+        },
+        set: function (v) {
+            this.i.k = ensureEnum(ButtonGroupOrientation_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "id", {
+        /**
+         * Gets or sets the id to use for the button group.
+        */
+        get: function () {
+            return this.i.b5;
+        },
+        set: function (v) {
+            this.i.b5 = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonGroupComponent.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(IgxXButtonGroupComponent.prototype, "isMultiSelect", {
+        /**
+         * Gets or sets whether the group supports multi-select.
+        */
+        get: function () {
+            return this.i.z;
+        },
+        set: function (v) {
+            this.i.z = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXButtonGroupComponent.prototype.findByName = function (name) {
+        if (this.findEphemera) {
+            if (name && name.indexOf("@@e:") == 0) {
+                return this.findEphemera(name);
+            }
+        }
+        if (this.buttons != null && this.buttons.findByName && this.buttons.findByName(name)) {
+            return this.buttons.findByName(name);
+        }
+        return null;
+    };
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "hasUserValues", {
+        get: function () {
+            return this._hasUserValues;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXButtonGroupComponent.prototype.__m = function (propertyName) {
+        if (!this._inStyling) {
+            this._hasUserValues.add(propertyName);
+        }
+    };
+    IgxXButtonGroupComponent.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("XButtonGroupComponent");
+        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;
+    };
+    IgxXButtonGroupComponent.prototype.onDetachedFromUI = function () {
+        this.i.onDetachedFromUI();
+    };
+    IgxXButtonGroupComponent.prototype.onAttachedToUI = function () {
+        this.i.onAttachedToUI();
+    };
+    /**
+     * Exports visual information about the current state of the grid.
+    
+    */
+    IgxXButtonGroupComponent.prototype.exportVisualModel = function () {
+        var iv = this.i.a5();
+        return (iv);
+    };
+    /**
+     * Returns a serialized copy of the exported visual model
+    
+    */
+    IgxXButtonGroupComponent.prototype.exportSerializedVisualModel = function () {
+        var iv = this.i.bq();
+        return (iv);
+    };
+    Object.defineProperty(IgxXButtonGroupComponent.prototype, "selectionChanged", {
+        get: function () {
+            var _this = this;
+            if (this._selectionChanged == null) {
+                this._selectionChanged = new EventEmitter();
+                this.i.selectionChanged = delegateCombine(this.i.selectionChanged, function (o, e) {
+                    _this._runInZone(function () {
+                        var outerArgs = new IgxButtonGroupSelectionChangedEventArgs();
+                        outerArgs._provideImplementation(e);
+                        if (_this.beforeSelectionChanged) {
+                            _this.beforeSelectionChanged(_this, outerArgs);
+                        }
+                        _this._selectionChanged.emit({
+                            sender: _this,
+                            args: outerArgs
+                        });
+                    });
+                });
+            }
+            return this._selectionChanged;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxXButtonGroupComponent.prototype._runInZone = function (act) {
+        if (this._zoneRunner != null) {
+            this._zoneRunner(act);
+        }
+        else {
+            act();
+        }
+    };
+    IgxXButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXButtonGroupComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+    IgxXButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxXButtonGroupComponent, selector: "igx-x-button-group", inputs: { displayType: "displayType", baseTheme: "baseTheme", density: "density", actualDensity: "actualDensity", selectedIndices: "selectedIndices", actualItemCornerRadius: "actualItemCornerRadius", actualItemBackgroundColor: "actualItemBackgroundColor", actualItemDisabledBackgroundColor: "actualItemDisabledBackgroundColor", actualItemTextColor: "actualItemTextColor", actualItemDisabledTextColor: "actualItemDisabledTextColor", actualItemBorderColor: "actualItemBorderColor", actualItemDisabledBorderColor: "actualItemDisabledBorderColor", actualItemBorderWidth: "actualItemBorderWidth", actualSelectedItemBackgroundColor: "actualSelectedItemBackgroundColor", actualSelectedItemTextColor: "actualSelectedItemTextColor", actualItemHoverBackgroundColor: "actualItemHoverBackgroundColor", actualItemHoverTextColor: "actualItemHoverTextColor", actualSelectedItemHoverBackgroundColor: "actualSelectedItemHoverBackgroundColor", actualSelectedItemHoverTextColor: "actualSelectedItemHoverTextColor", itemCornerRadius: "itemCornerRadius", itemBackgroundColor: "itemBackgroundColor", itemDisabledBackgroundColor: "itemDisabledBackgroundColor", itemTextColor: "itemTextColor", itemDisabledTextColor: "itemDisabledTextColor", itemHoverBackgroundColor: "itemHoverBackgroundColor", itemBorderColor: "itemBorderColor", itemDisabledBorderColor: "itemDisabledBorderColor", itemBorderWidth: "itemBorderWidth", itemHoverTextColor: "itemHoverTextColor", selectedItemBackgroundColor: "selectedItemBackgroundColor", selectedItemTextColor: "selectedItemTextColor", selectedItemHoverBackgroundColor: "selectedItemHoverBackgroundColor", selectedItemHoverTextColor: "selectedItemHoverTextColor", outlinedItemCornerRadius: "outlinedItemCornerRadius", outlinedItemBackgroundColor: "outlinedItemBackgroundColor", outlinedItemDisabledBackgroundColor: "outlinedItemDisabledBackgroundColor", outlinedItemTextColor: "outlinedItemTextColor", outlinedItemDisabledTextColor: "outlinedItemDisabledTextColor", outlinedItemHoverBackgroundColor: "outlinedItemHoverBackgroundColor", outlinedItemBorderColor: "outlinedItemBorderColor", outlinedItemDisabledBorderColor: "outlinedItemDisabledBorderColor", outlinedItemBorderWidth: "outlinedItemBorderWidth", outlinedItemHoverTextColor: "outlinedItemHoverTextColor", outlinedSelectedItemBackgroundColor: "outlinedSelectedItemBackgroundColor", outlinedSelectedItemTextColor: "outlinedSelectedItemTextColor", outlinedSelectedItemHoverBackgroundColor: "outlinedSelectedItemHoverBackgroundColor", outlinedSelectedItemHoverTextColor: "outlinedSelectedItemHoverTextColor", flatItemCornerRadius: "flatItemCornerRadius", flatItemBackgroundColor: "flatItemBackgroundColor", flatItemDisabledBackgroundColor: "flatItemDisabledBackgroundColor", flatItemTextColor: "flatItemTextColor", flatItemDisabledTextColor: "flatItemDisabledTextColor", flatItemHoverBackgroundColor: "flatItemHoverBackgroundColor", flatItemBorderColor: "flatItemBorderColor", flatItemDisabledBorderColor: "flatItemDisabledBorderColor", flatItemBorderWidth: "flatItemBorderWidth", flatItemHoverTextColor: "flatItemHoverTextColor", flatSelectedItemBackgroundColor: "flatSelectedItemBackgroundColor", flatSelectedItemTextColor: "flatSelectedItemTextColor", flatSelectedItemHoverBackgroundColor: "flatSelectedItemHoverBackgroundColor", flatSelectedItemHoverTextColor: "flatSelectedItemHoverTextColor", orientation: "orientation", id: "id", disabled: "disabled", isMultiSelect: "isMultiSelect" }, outputs: { selectionChanged: "selectionChanged" }, host: { properties: { "attr.id": "this.id" }, classAttribute: "ig-x-button-group igx-x-button-group" }, providers: [], queries: [{ propertyName: "contentButtons", predicate: IgxXButtonComponent }], 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 IgxXButtonGroupComponent;
+}());
+export { IgxXButtonGroupComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'igx-x-button-group',
+                    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-group igx-x-button-group' },
+                    styles: ["\n\t\t:host {\n\t\t\tdisplay: inline-block;           \n\t\t}\n\t"]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { _dynamicContent: [{
+                type: ViewChild,
+                args: ["dynamicContent", { read: ViewContainerRef, static: true }]
+            }], _childTemplateRef: [{
+                type: ViewChild,
+                args: ["childContent", { read: TemplateRef, static: false }]
+            }], contentButtons: [{
+                type: ContentChildren,
+                args: [IgxXButtonComponent]
+            }], displayType: [{
+                type: Input
+            }], baseTheme: [{
+                type: Input
+            }], density: [{
+                type: Input
+            }], actualDensity: [{
+                type: Input
+            }], selectedIndices: [{
+                type: Input
+            }], actualItemCornerRadius: [{
+                type: Input
+            }], actualItemBackgroundColor: [{
+                type: Input
+            }], actualItemDisabledBackgroundColor: [{
+                type: Input
+            }], actualItemTextColor: [{
+                type: Input
+            }], actualItemDisabledTextColor: [{
+                type: Input
+            }], actualItemBorderColor: [{
+                type: Input
+            }], actualItemDisabledBorderColor: [{
+                type: Input
+            }], actualItemBorderWidth: [{
+                type: Input
+            }], actualSelectedItemBackgroundColor: [{
+                type: Input
+            }], actualSelectedItemTextColor: [{
+                type: Input
+            }], actualItemHoverBackgroundColor: [{
+                type: Input
+            }], actualItemHoverTextColor: [{
+                type: Input
+            }], actualSelectedItemHoverBackgroundColor: [{
+                type: Input
+            }], actualSelectedItemHoverTextColor: [{
+                type: Input
+            }], itemCornerRadius: [{
+                type: Input
+            }], itemBackgroundColor: [{
+                type: Input
+            }], itemDisabledBackgroundColor: [{
+                type: Input
+            }], itemTextColor: [{
+                type: Input
+            }], itemDisabledTextColor: [{
+                type: Input
+            }], itemHoverBackgroundColor: [{
+                type: Input
+            }], itemBorderColor: [{
+                type: Input
+            }], itemDisabledBorderColor: [{
+                type: Input
+            }], itemBorderWidth: [{
+                type: Input
+            }], itemHoverTextColor: [{
+                type: Input
+            }], selectedItemBackgroundColor: [{
+                type: Input
+            }], selectedItemTextColor: [{
+                type: Input
+            }], selectedItemHoverBackgroundColor: [{
+                type: Input
+            }], selectedItemHoverTextColor: [{
+                type: Input
+            }], outlinedItemCornerRadius: [{
+                type: Input
+            }], outlinedItemBackgroundColor: [{
+                type: Input
+            }], outlinedItemDisabledBackgroundColor: [{
+                type: Input
+            }], outlinedItemTextColor: [{
+                type: Input
+            }], outlinedItemDisabledTextColor: [{
+                type: Input
+            }], outlinedItemHoverBackgroundColor: [{
+                type: Input
+            }], outlinedItemBorderColor: [{
+                type: Input
+            }], outlinedItemDisabledBorderColor: [{
+                type: Input
+            }], outlinedItemBorderWidth: [{
+                type: Input
+            }], outlinedItemHoverTextColor: [{
+                type: Input
+            }], outlinedSelectedItemBackgroundColor: [{
+                type: Input
+            }], outlinedSelectedItemTextColor: [{
+                type: Input
+            }], outlinedSelectedItemHoverBackgroundColor: [{
+                type: Input
+            }], outlinedSelectedItemHoverTextColor: [{
+                type: Input
+            }], flatItemCornerRadius: [{
+                type: Input
+            }], flatItemBackgroundColor: [{
+                type: Input
+            }], flatItemDisabledBackgroundColor: [{
+                type: Input
+            }], flatItemTextColor: [{
+                type: Input
+            }], flatItemDisabledTextColor: [{
+                type: Input
+            }], flatItemHoverBackgroundColor: [{
+                type: Input
+            }], flatItemBorderColor: [{
+                type: Input
+            }], flatItemDisabledBorderColor: [{
+                type: Input
+            }], flatItemBorderWidth: [{
+                type: Input
+            }], flatItemHoverTextColor: [{
+                type: Input
+            }], flatSelectedItemBackgroundColor: [{
+                type: Input
+            }], flatSelectedItemTextColor: [{
+                type: Input
+            }], flatSelectedItemHoverBackgroundColor: [{
+                type: Input
+            }], flatSelectedItemHoverTextColor: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }, {
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], isMultiSelect: [{
+                type: Input
+            }], selectionChanged: [{
+                type: Output
+            }] } });