igniteui-angular-inputs
Version:
Ignite UI Angular input components for building rich data visualizations for modern web apps.
1,268 lines (1,265 loc) • 50.2 kB
JavaScript
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