igniteui-react-inputs
Version:
Ignite UI React input components.
1,708 lines (1,707 loc) • 50.7 kB
JavaScript
import * as React from 'react';
import { XInputGroup } from "./XInputGroup";
import { XInputGroupItem } from "./XInputGroupItem";
import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, isValidProp, toSpinal, getModifiedProps } from "igniteui-react-core";
import { ReactRenderer, PortalManager } from "igniteui-react-core";
import { IgrXInputGroupInputCollection } from './igr-x-input-group-input-collection';
import { CollectionAdapter } from "igniteui-react-core";
import { NotifyCollectionChangedAction } from "igniteui-react-core";
import { ContentChildrenManager } from "igniteui-react-core";
import { InputGroupDisplayType_$type } from './InputGroupDisplayType';
import { CornerRadius } from "igniteui-react-core";
import { Thickness } from "igniteui-react-core";
import { ControlDisplayDensity_$type } from "igniteui-react-core";
import { BaseControlTheme_$type } from "igniteui-react-core";
export class IgrXInputGroup extends React.Component {
_getMainRef(ref) {
this._elRef = ref;
if (this._elRef) {
let mut = new MutationObserver((list) => {
for (var mutation of list) {
if (mutation.type == 'childList') {
this.i.onChildrenMutated();
}
}
});
mut.observe(this._elRef, {
childList: true,
subtree: true
});
}
}
_updateContentChildren() {
this.contentInputs.length = 0;
let contentChildrenActual = this._contentChildrenManager.contentChildrenActual;
for (let i = 0; i < contentChildrenActual.length; i++) {
if ((XInputGroupItem.$type).isAssignableFrom(contentChildrenActual[i].i.$type)) {
this.contentInputs.push(contentChildrenActual[i]);
}
}
if (this._inputsAdapter !== null) {
this._inputsAdapter.notifyContentChanged();
}
}
/**
* A collection of manually added style mappings for the treemap.
*/
get inputs() {
if (this._inputs === null) {
let coll = new IgrXInputGroupInputCollection();
let inner = coll._innerColl;
inner.addListener((sender, e) => {
switch (e.action) {
case NotifyCollectionChangedAction.Add:
this._inputsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Remove:
this._inputsAdapter.removeManualItemAt(e.oldStartingIndex);
break;
case NotifyCollectionChangedAction.Replace:
this._inputsAdapter.removeManualItemAt(e.oldStartingIndex);
this._inputsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Reset:
this._inputsAdapter.clearManualItems();
break;
}
});
this._inputs = coll;
}
return this._inputs;
}
render() {
let children = this._contentChildrenManager.getChildren(this.props.children);
this._portalManager.onRender(children);
let div = React.createElement("div", {
className: "ig-x-input-group igr-x-input-group",
ref: this._getMainRef,
children: children
});
return div;
}
requestRender() {
if (this._initialized) {
this.setState({});
}
}
constructor(props) {
super(props);
this._wrapper = null;
this.contentInputs = [];
/**
* The style mappings actually present in the treemap. Do not directly modify this array.
* This array's contents can be modified by causing React to reproject the child content.
* Or adding and removing ranges from the manual ranges collection on the ranges property.
*/
this.actualInputs = [];
this._inputs = null;
this._inputsAdapter = null;
this._implementation = null;
this.__p = null;
this._hasUserValues = new Set();
this._stylingContainer = null;
this._stylingParent = null;
this._inStyling = false;
if (this._styling) {
NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
}
this._contentChildrenManager = new ContentChildrenManager((ch) => ch.props.name || ch.key || ch.props.id, (ch) => ch.name || ch.key || ch.id, () => this._updateContentChildren());
this._implementation = this.createImplementation();
this._implementation.externalObject = this;
this._getMainRef = this._getMainRef.bind(this);
var container;
if (document) {
container = document.createElement("div");
}
var root;
root = container;
if (container != null) {
root = container;
}
this.requestRender = this.requestRender.bind(this);
this._portalManager = new PortalManager("inputContent", this.requestRender);
var ren = new ReactRenderer(root, document, true, {}, this._portalManager);
this._wrapper = ren;
this._container = this._wrapper.rootWrapper;
this._container.setStyleProperty("display", "inline-block");
var inputGroup = this.i;
this._inputGroup = inputGroup;
this._inputsAdapter = new CollectionAdapter(this.contentInputs, this.i.inputs, this.actualInputs, (c) => c.i, (i) => {
if (this._container && this._container.getNativeElement().parentElement) {
i._styling(this._container.getNativeElement(), this, this);
}
}, (i) => { });
inputGroup.provideContainer(ren);
if (props) {
this.initializeProperties();
}
}
//private _getLabelPortal(element: DomWrapper, portalCallback: (portal: DomPortal) => void): void {
// this._portalManager.getPortal(element, "TemplateContent", portalCallback);
//}
shouldComponentUpdate(nextProps, nextState) {
const mod = getModifiedProps(this.props, nextProps);
for (const p of Object.keys(mod)) {
if (isValidProp(this, p)) {
this[p] = mod[p];
}
}
return true;
}
initializeProperties() {
for (const p of Object.keys(this.props)) {
if (isValidProp(this, p)) {
this[p] = this.props[p];
}
}
}
// supports angular themes or custom properties set in CSS
updateStyle() {
this._styling(this._elRef, this);
}
destroy() {
this._inputGroup.destroy();
this._wrapper.destroy();
}
componentWillUnmount() {
}
componentDidMount() {
this._elRef.appendChild(this._container.getNativeElement());
this.initializeContent();
}
initializeContent() {
this._styling(this._container.getNativeElement(), this);
this.updateStyle();
this.i.ensureShift();
}
createImplementation() {
return new XInputGroup();
}
get i() {
return this._implementation;
}
/**
* Gets or sets the display style to use for the button.
*/
get displayType() {
return this.i.d;
}
set displayType(v) {
this.i.d = ensureEnum(InputGroupDisplayType_$type, v);
}
/**
* Gets or sets the display density to use for the input group.
*/
get density() {
return this.i.t;
}
set density(v) {
this.i.t = ensureEnum(ControlDisplayDensity_$type, v);
}
/**
* Gets the actual display density to use for the input group.
*/
get actualDensity() {
return this.i.s;
}
set actualDensity(v) {
this.i.s = ensureEnum(ControlDisplayDensity_$type, v);
}
/**
* Gets or sets the base built in theme to use for the label.
*/
get baseTheme() {
return this.i.p;
}
set baseTheme(v) {
this.i.p = ensureEnum(BaseControlTheme_$type, v);
}
get inputHasValue() {
return this.i.al;
}
/**
* Gets the actual item background color.
*/
get actualBorderColor() {
return brushToString(this.i.l6);
}
set actualBorderColor(v) {
this.i.l6 = stringToBrush(v);
}
/**
* Gets the actual item border color.
*/
get actualFocusBorderColor() {
return brushToString(this.i.l7);
}
set actualFocusBorderColor(v) {
this.i.l7 = stringToBrush(v);
}
/**
* Gets the actual item border width.
*/
get actualBorderWidth() {
return this.i.cg;
}
set actualBorderWidth(v) {
this.i.cg = +v;
}
/**
* Gets the actual item border width.
*/
get actualFocusBorderWidth() {
return this.i.ch;
}
set actualFocusBorderWidth(v) {
this.i.ch = +v;
}
get actualCornerRadiusBottomRight() {
return this.i.ko ? this.i.ko.c : NaN;
}
set actualCornerRadiusBottomRight(v) {
this.ensureActualCornerRadius();
this.i.ko.c = +v;
this.i.ko = this.i.ko;
}
get actualCornerRadiusBottomLeft() {
return this.i.ko ? this.i.ko.b : NaN;
}
set actualCornerRadiusBottomLeft(v) {
this.ensureActualCornerRadius();
this.i.ko.b = +v;
this.i.ko = this.i.ko;
}
get actualCornerRadiusTopLeft() {
return this.i.ko ? this.i.ko.d : NaN;
}
set actualCornerRadiusTopLeft(v) {
this.ensureActualCornerRadius();
this.i.ko.d = +v;
this.i.ko = this.i.ko;
}
get actualCornerRadiusTopRight() {
return this.i.ko ? this.i.ko.e : NaN;
}
set actualCornerRadiusTopRight(v) {
this.ensureActualCornerRadius();
this.i.ko.e = +v;
this.i.ko = this.i.ko;
}
ensureActualCornerRadius() {
if (this.i.ko) {
return;
}
this.i.ko = new CornerRadius(2);
}
get actualContentPaddingBottom() {
return this.i.oe ? this.i.oe.bottom : NaN;
}
set actualContentPaddingBottom(v) {
this.ensureActualContentPadding();
this.i.oe.bottom = +v;
this.i.oe = this.i.oe;
}
get actualContentPaddingLeft() {
return this.i.oe ? this.i.oe.left : NaN;
}
set actualContentPaddingLeft(v) {
this.ensureActualContentPadding();
this.i.oe.left = +v;
this.i.oe = this.i.oe;
}
get actualContentPaddingRight() {
return this.i.oe ? this.i.oe.right : NaN;
}
set actualContentPaddingRight(v) {
this.ensureActualContentPadding();
this.i.oe.right = +v;
this.i.oe = this.i.oe;
}
get actualContentPaddingTop() {
return this.i.oe ? this.i.oe.top : NaN;
}
set actualContentPaddingTop(v) {
this.ensureActualContentPadding();
this.i.oe.top = +v;
this.i.oe = this.i.oe;
}
ensureActualContentPadding() {
if (this.i.oe) {
return;
}
this.i.oe = new Thickness(2);
}
/**
* Gets the actual width to use for the underline element.
*/
get actualUnderlineWidth() {
return this.i.cp;
}
set actualUnderlineWidth(v) {
this.i.cp = +v;
}
/**
* Gets the actual width to use for the underline element.
*/
get actualUnderlineRippleWidth() {
return this.i.co;
}
set actualUnderlineRippleWidth(v) {
this.i.co = +v;
}
/**
* Gets the width to use for the underline element when hovered.
*/
get actualHoverUnderlineWidth() {
return this.i.cl;
}
set actualHoverUnderlineWidth(v) {
this.i.cl = +v;
}
/**
* Gets the actual color to use for the underline element.
*/
get actualUnderlineColor() {
return brushToString(this.i.ma);
}
set actualUnderlineColor(v) {
this.i.ma = stringToBrush(v);
}
/**
* Gets the actual color to use for the underline ripple element.
*/
get actualUnderlineRippleColor() {
return brushToString(this.i.mb);
}
set actualUnderlineRippleColor(v) {
this.i.mb = stringToBrush(v);
}
/**
* Gets the actual color to use for the underline element.
*/
get actualHoverUnderlineColor() {
return brushToString(this.i.l9);
}
set actualHoverUnderlineColor(v) {
this.i.l9 = stringToBrush(v);
}
/**
* Gets the actual color to use for the underline element when focused.
*/
get actualFocusUnderlineColor() {
return brushToString(this.i.l8);
}
set actualFocusUnderlineColor(v) {
this.i.l8 = stringToBrush(v);
}
/**
* Gets the actual opacity to use for the underline element.
*/
get actualUnderlineOpacity() {
return this.i.cm;
}
set actualUnderlineOpacity(v) {
this.i.cm = +v;
}
/**
* Gets the actual opacity to use for the underline element when hovered.
*/
get actualHoverUnderlineOpacity() {
return this.i.ck;
}
set actualHoverUnderlineOpacity(v) {
this.i.ck = +v;
}
/**
* Gets the actual opacity to use for the underline element when focused.
*/
get actualFocusUnderlineOpacity() {
return this.i.ci;
}
set actualFocusUnderlineOpacity(v) {
this.i.ci = +v;
}
/**
* Gets the actual opacity to use for the underline ripple element when focused.
*/
get actualFocusUnderlineRippleOpacity() {
return this.i.cj;
}
set actualFocusUnderlineRippleOpacity(v) {
this.i.cj = +v;
}
/**
* Gets the actual opacity to use for the underline ripple element.
*/
get actualUnderlineRippleOpacity() {
return this.i.cn;
}
set actualUnderlineRippleOpacity(v) {
this.i.cn = +v;
}
/**
* Gets the actual opacity to use for the underline ripple element.
*/
get actualBackgroundColor() {
return brushToString(this.i.l5);
}
set actualBackgroundColor(v) {
this.i.l5 = stringToBrush(v);
}
/**
* Gets or sets the border width to use for the border of the item group.
*/
get borderWidth() {
return this.i.c0;
}
set borderWidth(v) {
this.i.c0 = +v;
}
/**
* Gets or sets the border width to use for the border of the item group when focused.
*/
get focusBorderWidth() {
return this.i.eg;
}
set focusBorderWidth(v) {
this.i.eg = +v;
}
/**
* Gets or sets the color to use the border of the input group.
*/
get borderColor() {
return brushToString(this.i.md);
}
set borderColor(v) {
this.i.md = stringToBrush(v);
}
get cornerRadiusBottomRight() {
return this.i.ks ? this.i.ks.c : NaN;
}
set cornerRadiusBottomRight(v) {
this.ensureCornerRadius();
this.i.ks.c = +v;
this.i.ks = this.i.ks;
}
get cornerRadiusBottomLeft() {
return this.i.ks ? this.i.ks.b : NaN;
}
set cornerRadiusBottomLeft(v) {
this.ensureCornerRadius();
this.i.ks.b = +v;
this.i.ks = this.i.ks;
}
get cornerRadiusTopLeft() {
return this.i.ks ? this.i.ks.d : NaN;
}
set cornerRadiusTopLeft(v) {
this.ensureCornerRadius();
this.i.ks.d = +v;
this.i.ks = this.i.ks;
}
get cornerRadiusTopRight() {
return this.i.ks ? this.i.ks.e : NaN;
}
set cornerRadiusTopRight(v) {
this.ensureCornerRadius();
this.i.ks.e = +v;
this.i.ks = this.i.ks;
}
ensureCornerRadius() {
if (this.i.ks) {
return;
}
this.i.ks = new CornerRadius(2);
}
get contentPaddingBottom() {
return this.i.oi ? this.i.oi.bottom : NaN;
}
set contentPaddingBottom(v) {
this.ensureContentPadding();
this.i.oi.bottom = +v;
this.i.oi = this.i.oi;
}
get contentPaddingLeft() {
return this.i.oi ? this.i.oi.left : NaN;
}
set contentPaddingLeft(v) {
this.ensureContentPadding();
this.i.oi.left = +v;
this.i.oi = this.i.oi;
}
get contentPaddingRight() {
return this.i.oi ? this.i.oi.right : NaN;
}
set contentPaddingRight(v) {
this.ensureContentPadding();
this.i.oi.right = +v;
this.i.oi = this.i.oi;
}
get contentPaddingTop() {
return this.i.oi ? this.i.oi.top : NaN;
}
set contentPaddingTop(v) {
this.ensureContentPadding();
this.i.oi.top = +v;
this.i.oi = this.i.oi;
}
ensureContentPadding() {
if (this.i.oi) {
return;
}
this.i.oi = new Thickness(2);
}
/**
* Gets or sets the width to use for the underline element.
*/
get underlineWidth() {
return this.i.e8;
}
set underlineWidth(v) {
this.i.e8 = +v;
}
/**
* Gets or sets the width to use for the underline element.
*/
get underlineRippleWidth() {
return this.i.e7;
}
set underlineRippleWidth(v) {
this.i.e7 = +v;
}
/**
* Gets or sets the width to use for the underline element when hovered.
*/
get hoverUnderlineWidth() {
return this.i.ek;
}
set hoverUnderlineWidth(v) {
this.i.ek = +v;
}
/**
* Gets or sets the color to use for the underline element.
*/
get underlineColor() {
return brushToString(this.i.n6);
}
set underlineColor(v) {
this.i.n6 = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline ripple element.
*/
get underlineRippleColor() {
return brushToString(this.i.n7);
}
set underlineRippleColor(v) {
this.i.n7 = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline element.
*/
get hoverUnderlineColor() {
return brushToString(this.i.nq);
}
set hoverUnderlineColor(v) {
this.i.nq = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline element.
*/
get focusUnderlineColor() {
return brushToString(this.i.np);
}
set focusUnderlineColor(v) {
this.i.np = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline element.
*/
get underlineOpacity() {
return this.i.e5;
}
set underlineOpacity(v) {
this.i.e5 = +v;
}
/**
* Gets or sets the color to use for the underline element.
*/
get hoverUnderlineOpacity() {
return this.i.ej;
}
set hoverUnderlineOpacity(v) {
this.i.ej = +v;
}
/**
* Gets or sets the color to use for the underline element.
*/
get focusUnderlineOpacity() {
return this.i.eh;
}
set focusUnderlineOpacity(v) {
this.i.eh = +v;
}
/**
* Gets or sets the opacity to use for the underline ripple element when focused.
*/
get focusUnderlineRippleOpacity() {
return this.i.ei;
}
set focusUnderlineRippleOpacity(v) {
this.i.ei = +v;
}
/**
* Gets or sets the opacity to use for the underline ripple element.
*/
get underlineRippleOpacity() {
return this.i.e6;
}
set underlineRippleOpacity(v) {
this.i.e6 = +v;
}
/**
* Gets or sets the background color to use for the input group.
*/
get backgroundColor() {
return brushToString(this.i.mc);
}
set backgroundColor(v) {
this.i.mc = stringToBrush(v);
}
/**
* Gets or sets the border width to use for the border of the item group when using type line.
*/
get lineTypeBorderWidth() {
return this.i.el;
}
set lineTypeBorderWidth(v) {
this.i.el = +v;
}
/**
* Gets or sets the border width to use for the border of the item group when focused when type is line.
*/
get lineTypeFocusBorderWidth() {
return this.i.em;
}
set lineTypeFocusBorderWidth(v) {
this.i.em = +v;
}
/**
* Gets or sets the focus color to use the border of the input group when type is line.
*/
get lineTypeFocusBorderColor() {
return brushToString(this.i.nt);
}
set lineTypeFocusBorderColor(v) {
this.i.nt = stringToBrush(v);
}
/**
* Gets or sets the color to use the border of the input group when type is line.
*/
get lineTypeBorderColor() {
return brushToString(this.i.ns);
}
set lineTypeBorderColor(v) {
this.i.ns = stringToBrush(v);
}
get lineTypeCornerRadiusBottomRight() {
return this.i.kx ? this.i.kx.c : NaN;
}
set lineTypeCornerRadiusBottomRight(v) {
this.ensureLineTypeCornerRadius();
this.i.kx.c = +v;
this.i.kx = this.i.kx;
}
get lineTypeCornerRadiusBottomLeft() {
return this.i.kx ? this.i.kx.b : NaN;
}
set lineTypeCornerRadiusBottomLeft(v) {
this.ensureLineTypeCornerRadius();
this.i.kx.b = +v;
this.i.kx = this.i.kx;
}
get lineTypeCornerRadiusTopLeft() {
return this.i.kx ? this.i.kx.d : NaN;
}
set lineTypeCornerRadiusTopLeft(v) {
this.ensureLineTypeCornerRadius();
this.i.kx.d = +v;
this.i.kx = this.i.kx;
}
get lineTypeCornerRadiusTopRight() {
return this.i.kx ? this.i.kx.e : NaN;
}
set lineTypeCornerRadiusTopRight(v) {
this.ensureLineTypeCornerRadius();
this.i.kx.e = +v;
this.i.kx = this.i.kx;
}
ensureLineTypeCornerRadius() {
if (this.i.kx) {
return;
}
this.i.kx = new CornerRadius(2);
}
get lineTypeContentPaddingBottom() {
return this.i.on ? this.i.on.bottom : NaN;
}
set lineTypeContentPaddingBottom(v) {
this.ensureLineTypeContentPadding();
this.i.on.bottom = +v;
this.i.on = this.i.on;
}
get lineTypeContentPaddingLeft() {
return this.i.on ? this.i.on.left : NaN;
}
set lineTypeContentPaddingLeft(v) {
this.ensureLineTypeContentPadding();
this.i.on.left = +v;
this.i.on = this.i.on;
}
get lineTypeContentPaddingRight() {
return this.i.on ? this.i.on.right : NaN;
}
set lineTypeContentPaddingRight(v) {
this.ensureLineTypeContentPadding();
this.i.on.right = +v;
this.i.on = this.i.on;
}
get lineTypeContentPaddingTop() {
return this.i.on ? this.i.on.top : NaN;
}
set lineTypeContentPaddingTop(v) {
this.ensureLineTypeContentPadding();
this.i.on.top = +v;
this.i.on = this.i.on;
}
ensureLineTypeContentPadding() {
if (this.i.on) {
return;
}
this.i.on = new Thickness(2);
}
/**
* Gets or sets the width to use for the underline element when type is line.
*/
get lineTypeUnderlineWidth() {
return this.i.eu;
}
set lineTypeUnderlineWidth(v) {
this.i.eu = +v;
}
/**
* Gets or sets the width to use for the underline element when type is line.
*/
get lineTypeUnderlineRippleWidth() {
return this.i.et;
}
set lineTypeUnderlineRippleWidth(v) {
this.i.et = +v;
}
/**
* Gets or sets the width to use for the underline element when hovered when type is line.
*/
get lineTypeHoverUnderlineWidth() {
return this.i.eq;
}
set lineTypeHoverUnderlineWidth(v) {
this.i.eq = +v;
}
/**
* Gets or sets the color to use for the underline element when type is line.
*/
get lineTypeUnderlineColor() {
return brushToString(this.i.nw);
}
set lineTypeUnderlineColor(v) {
this.i.nw = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline ripple element when type is line.
*/
get lineTypeUnderlineRippleColor() {
return brushToString(this.i.nx);
}
set lineTypeUnderlineRippleColor(v) {
this.i.nx = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline element when type is line.
*/
get lineTypeHoverUnderlineColor() {
return brushToString(this.i.nv);
}
set lineTypeHoverUnderlineColor(v) {
this.i.nv = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline element when type is line.
*/
get lineTypeFocusUnderlineColor() {
return brushToString(this.i.nu);
}
set lineTypeFocusUnderlineColor(v) {
this.i.nu = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline element when type is line.
*/
get lineTypeUnderlineOpacity() {
return this.i.er;
}
set lineTypeUnderlineOpacity(v) {
this.i.er = +v;
}
/**
* Gets or sets the color to use for the underline element when type is line.
*/
get lineTypeHoverUnderlineOpacity() {
return this.i.ep;
}
set lineTypeHoverUnderlineOpacity(v) {
this.i.ep = +v;
}
/**
* Gets or sets the color to use for the underline element when type is line.
*/
get lineTypeFocusUnderlineOpacity() {
return this.i.en;
}
set lineTypeFocusUnderlineOpacity(v) {
this.i.en = +v;
}
/**
* Gets or sets the opacity to use for the underline ripple element when focused when type is line.
*/
get lineTypeFocusUnderlineRippleOpacity() {
return this.i.eo;
}
set lineTypeFocusUnderlineRippleOpacity(v) {
this.i.eo = +v;
}
/**
* Gets or sets the opacity to use for the underline ripple element when type is line.
*/
get lineTypeUnderlineRippleOpacity() {
return this.i.es;
}
set lineTypeUnderlineRippleOpacity(v) {
this.i.es = +v;
}
/**
* Gets or sets the background color to use for the input group when type is line.
*/
get lineTypeBackgroundColor() {
return brushToString(this.i.nr);
}
set lineTypeBackgroundColor(v) {
this.i.nr = stringToBrush(v);
}
/**
* Gets or sets the border width to use for the border of the item group when using type line.
*/
get boxTypeBorderWidth() {
return this.i.c1;
}
set boxTypeBorderWidth(v) {
this.i.c1 = +v;
}
/**
* Gets or sets the border width to use for the border of the item group when focused when type is box.
*/
get boxTypeFocusBorderWidth() {
return this.i.c2;
}
set boxTypeFocusBorderWidth(v) {
this.i.c2 = +v;
}
/**
* Gets or sets the focus color to use the border of the input group when type is box.
*/
get boxTypeFocusBorderColor() {
return brushToString(this.i.mn);
}
set boxTypeFocusBorderColor(v) {
this.i.mn = stringToBrush(v);
}
/**
* Gets or sets the color to use the border of the input group when type is box.
*/
get boxTypeBorderColor() {
return brushToString(this.i.mm);
}
set boxTypeBorderColor(v) {
this.i.mm = stringToBrush(v);
}
get boxTypeCornerRadiusBottomRight() {
return this.i.kq ? this.i.kq.c : NaN;
}
set boxTypeCornerRadiusBottomRight(v) {
this.ensureBoxTypeCornerRadius();
this.i.kq.c = +v;
this.i.kq = this.i.kq;
}
get boxTypeCornerRadiusBottomLeft() {
return this.i.kq ? this.i.kq.b : NaN;
}
set boxTypeCornerRadiusBottomLeft(v) {
this.ensureBoxTypeCornerRadius();
this.i.kq.b = +v;
this.i.kq = this.i.kq;
}
get boxTypeCornerRadiusTopLeft() {
return this.i.kq ? this.i.kq.d : NaN;
}
set boxTypeCornerRadiusTopLeft(v) {
this.ensureBoxTypeCornerRadius();
this.i.kq.d = +v;
this.i.kq = this.i.kq;
}
get boxTypeCornerRadiusTopRight() {
return this.i.kq ? this.i.kq.e : NaN;
}
set boxTypeCornerRadiusTopRight(v) {
this.ensureBoxTypeCornerRadius();
this.i.kq.e = +v;
this.i.kq = this.i.kq;
}
ensureBoxTypeCornerRadius() {
if (this.i.kq) {
return;
}
this.i.kq = new CornerRadius(2);
}
get boxTypeContentPaddingBottom() {
return this.i.og ? this.i.og.bottom : NaN;
}
set boxTypeContentPaddingBottom(v) {
this.ensureBoxTypeContentPadding();
this.i.og.bottom = +v;
this.i.og = this.i.og;
}
get boxTypeContentPaddingLeft() {
return this.i.og ? this.i.og.left : NaN;
}
set boxTypeContentPaddingLeft(v) {
this.ensureBoxTypeContentPadding();
this.i.og.left = +v;
this.i.og = this.i.og;
}
get boxTypeContentPaddingRight() {
return this.i.og ? this.i.og.right : NaN;
}
set boxTypeContentPaddingRight(v) {
this.ensureBoxTypeContentPadding();
this.i.og.right = +v;
this.i.og = this.i.og;
}
get boxTypeContentPaddingTop() {
return this.i.og ? this.i.og.top : NaN;
}
set boxTypeContentPaddingTop(v) {
this.ensureBoxTypeContentPadding();
this.i.og.top = +v;
this.i.og = this.i.og;
}
ensureBoxTypeContentPadding() {
if (this.i.og) {
return;
}
this.i.og = new Thickness(2);
}
/**
* Gets or sets the width to use for the underline element when type is box.
*/
get boxTypeUnderlineWidth() {
return this.i.da;
}
set boxTypeUnderlineWidth(v) {
this.i.da = +v;
}
/**
* Gets or sets the width to use for the underline element when type is box.
*/
get boxTypeUnderlineRippleWidth() {
return this.i.c9;
}
set boxTypeUnderlineRippleWidth(v) {
this.i.c9 = +v;
}
/**
* Gets or sets the width to use for the underline element when hovered when type is box.
*/
get boxTypeHoverUnderlineWidth() {
return this.i.c6;
}
set boxTypeHoverUnderlineWidth(v) {
this.i.c6 = +v;
}
/**
* Gets or sets the color to use for the underline element when type is box.
*/
get boxTypeUnderlineColor() {
return brushToString(this.i.mq);
}
set boxTypeUnderlineColor(v) {
this.i.mq = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline ripple element when type is box.
*/
get boxTypeUnderlineRippleColor() {
return brushToString(this.i.mr);
}
set boxTypeUnderlineRippleColor(v) {
this.i.mr = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline element when type is box.
*/
get boxTypeHoverUnderlineColor() {
return brushToString(this.i.mp);
}
set boxTypeHoverUnderlineColor(v) {
this.i.mp = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline element when type is box.
*/
get boxTypeFocusUnderlineColor() {
return brushToString(this.i.mo);
}
set boxTypeFocusUnderlineColor(v) {
this.i.mo = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline element when type is box.
*/
get boxTypeUnderlineOpacity() {
return this.i.c7;
}
set boxTypeUnderlineOpacity(v) {
this.i.c7 = +v;
}
/**
* Gets or sets the color to use for the underline element when type is box.
*/
get boxTypeHoverUnderlineOpacity() {
return this.i.c5;
}
set boxTypeHoverUnderlineOpacity(v) {
this.i.c5 = +v;
}
/**
* Gets or sets the color to use for the underline element when type is box.
*/
get boxTypeFocusUnderlineOpacity() {
return this.i.c3;
}
set boxTypeFocusUnderlineOpacity(v) {
this.i.c3 = +v;
}
/**
* Gets or sets the opacity to use for the underline ripple element when focused when type is box.
*/
get boxTypeFocusUnderlineRippleOpacity() {
return this.i.c4;
}
set boxTypeFocusUnderlineRippleOpacity(v) {
this.i.c4 = +v;
}
/**
* Gets or sets the opacity to use for the underline ripple element when type is box.
*/
get boxTypeUnderlineRippleOpacity() {
return this.i.c8;
}
set boxTypeUnderlineRippleOpacity(v) {
this.i.c8 = +v;
}
/**
* Gets or sets the background color to use for the input group when type is box.
*/
get boxTypeBackgroundColor() {
return brushToString(this.i.ml);
}
set boxTypeBackgroundColor(v) {
this.i.ml = stringToBrush(v);
}
/**
* Gets or sets the border width to use for the border of the item group when using type line.
*/
get borderTypeBorderWidth() {
return this.i.cq;
}
set borderTypeBorderWidth(v) {
this.i.cq = +v;
}
/**
* Gets or sets the border width to use for the border of the item group when focused when type is border.
*/
get borderTypeFocusBorderWidth() {
return this.i.cr;
}
set borderTypeFocusBorderWidth(v) {
this.i.cr = +v;
}
/**
* Gets or sets the focus color to use the border of the input group when type is border.
*/
get borderTypeFocusBorderColor() {
return brushToString(this.i.mg);
}
set borderTypeFocusBorderColor(v) {
this.i.mg = stringToBrush(v);
}
/**
* Gets or sets the color to use the border of the input group when type is border.
*/
get borderTypeBorderColor() {
return brushToString(this.i.mf);
}
set borderTypeBorderColor(v) {
this.i.mf = stringToBrush(v);
}
get borderTypeCornerRadiusBottomRight() {
return this.i.kp ? this.i.kp.c : NaN;
}
set borderTypeCornerRadiusBottomRight(v) {
this.ensureBorderTypeCornerRadius();
this.i.kp.c = +v;
this.i.kp = this.i.kp;
}
get borderTypeCornerRadiusBottomLeft() {
return this.i.kp ? this.i.kp.b : NaN;
}
set borderTypeCornerRadiusBottomLeft(v) {
this.ensureBorderTypeCornerRadius();
this.i.kp.b = +v;
this.i.kp = this.i.kp;
}
get borderTypeCornerRadiusTopLeft() {
return this.i.kp ? this.i.kp.d : NaN;
}
set borderTypeCornerRadiusTopLeft(v) {
this.ensureBorderTypeCornerRadius();
this.i.kp.d = +v;
this.i.kp = this.i.kp;
}
get borderTypeCornerRadiusTopRight() {
return this.i.kp ? this.i.kp.e : NaN;
}
set borderTypeCornerRadiusTopRight(v) {
this.ensureBorderTypeCornerRadius();
this.i.kp.e = +v;
this.i.kp = this.i.kp;
}
ensureBorderTypeCornerRadius() {
if (this.i.kp) {
return;
}
this.i.kp = new CornerRadius(2);
}
get borderTypeContentPaddingBottom() {
return this.i.of ? this.i.of.bottom : NaN;
}
set borderTypeContentPaddingBottom(v) {
this.ensureBorderTypeContentPadding();
this.i.of.bottom = +v;
this.i.of = this.i.of;
}
get borderTypeContentPaddingLeft() {
return this.i.of ? this.i.of.left : NaN;
}
set borderTypeContentPaddingLeft(v) {
this.ensureBorderTypeContentPadding();
this.i.of.left = +v;
this.i.of = this.i.of;
}
get borderTypeContentPaddingRight() {
return this.i.of ? this.i.of.right : NaN;
}
set borderTypeContentPaddingRight(v) {
this.ensureBorderTypeContentPadding();
this.i.of.right = +v;
this.i.of = this.i.of;
}
get borderTypeContentPaddingTop() {
return this.i.of ? this.i.of.top : NaN;
}
set borderTypeContentPaddingTop(v) {
this.ensureBorderTypeContentPadding();
this.i.of.top = +v;
this.i.of = this.i.of;
}
ensureBorderTypeContentPadding() {
if (this.i.of) {
return;
}
this.i.of = new Thickness(2);
}
/**
* Gets or sets the width to use for the underline element when type is border.
*/
get borderTypeUnderlineWidth() {
return this.i.cz;
}
set borderTypeUnderlineWidth(v) {
this.i.cz = +v;
}
/**
* Gets or sets the width to use for the underline element when type is border.
*/
get borderTypeUnderlineRippleWidth() {
return this.i.cy;
}
set borderTypeUnderlineRippleWidth(v) {
this.i.cy = +v;
}
/**
* Gets or sets the width to use for the underline element when hovered when type is border.
*/
get borderTypeHoverUnderlineWidth() {
return this.i.cv;
}
set borderTypeHoverUnderlineWidth(v) {
this.i.cv = +v;
}
/**
* Gets or sets the color to use for the underline element when type is border.
*/
get borderTypeUnderlineColor() {
return brushToString(this.i.mj);
}
set borderTypeUnderlineColor(v) {
this.i.mj = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline ripple element when type is border.
*/
get borderTypeUnderlineRippleColor() {
return brushToString(this.i.mk);
}
set borderTypeUnderlineRippleColor(v) {
this.i.mk = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline element when type is border.
*/
get borderTypeHoverUnderlineColor() {
return brushToString(this.i.mi);
}
set borderTypeHoverUnderlineColor(v) {
this.i.mi = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline element when type is border.
*/
get borderTypeFocusUnderlineColor() {
return brushToString(this.i.mh);
}
set borderTypeFocusUnderlineColor(v) {
this.i.mh = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline element when type is border.
*/
get borderTypeUnderlineOpacity() {
return this.i.cw;
}
set borderTypeUnderlineOpacity(v) {
this.i.cw = +v;
}
/**
* Gets or sets the color to use for the underline element when type is border.
*/
get borderTypeHoverUnderlineOpacity() {
return this.i.cu;
}
set borderTypeHoverUnderlineOpacity(v) {
this.i.cu = +v;
}
/**
* Gets or sets the color to use for the underline element when type is border.
*/
get borderTypeFocusUnderlineOpacity() {
return this.i.cs;
}
set borderTypeFocusUnderlineOpacity(v) {
this.i.cs = +v;
}
/**
* Gets or sets the opacity to use for the underline ripple element when focused when type is border.
*/
get borderTypeFocusUnderlineRippleOpacity() {
return this.i.ct;
}
set borderTypeFocusUnderlineRippleOpacity(v) {
this.i.ct = +v;
}
/**
* Gets or sets the opacity to use for the underline ripple element when type is border.
*/
get borderTypeUnderlineRippleOpacity() {
return this.i.cx;
}
set borderTypeUnderlineRippleOpacity(v) {
this.i.cx = +v;
}
/**
* Gets or sets the background color to use for the input group when type is border.
*/
get borderTypeBackgroundColor() {
return brushToString(this.i.me);
}
set borderTypeBackgroundColor(v) {
this.i.me = stringToBrush(v);
}
/**
* Gets or sets the search width to use for the border of the item group when using type line.
*/
get searchTypeBorderWidth() {
return this.i.ev;
}
set searchTypeBorderWidth(v) {
this.i.ev = +v;
}
/**
* Gets or sets the search width to use for the border of the item group when focused when type is search.
*/
get searchTypeFocusBorderWidth() {
return this.i.ew;
}
set searchTypeFocusBorderWidth(v) {
this.i.ew = +v;
}
/**
* Gets or sets the focus color to use the search of the input group when type is search.
*/
get searchTypeFocusBorderColor() {
return brushToString(this.i.n0);
}
set searchTypeFocusBorderColor(v) {
this.i.n0 = stringToBrush(v);
}
/**
* Gets or sets the color to use the search of the input group when type is search.
*/
get searchTypeBorderColor() {
return brushToString(this.i.nz);
}
set searchTypeBorderColor(v) {
this.i.nz = stringToBrush(v);
}
get searchTypeCornerRadiusBottomRight() {
return this.i.ky ? this.i.ky.c : NaN;
}
set searchTypeCornerRadiusBottomRight(v) {
this.ensureSearchTypeCornerRadius();
this.i.ky.c = +v;
this.i.ky = this.i.ky;
}
get searchTypeCornerRadiusBottomLeft() {
return this.i.ky ? this.i.ky.b : NaN;
}
set searchTypeCornerRadiusBottomLeft(v) {
this.ensureSearchTypeCornerRadius();
this.i.ky.b = +v;
this.i.ky = this.i.ky;
}
get searchTypeCornerRadiusTopLeft() {
return this.i.ky ? this.i.ky.d : NaN;
}
set searchTypeCornerRadiusTopLeft(v) {
this.ensureSearchTypeCornerRadius();
this.i.ky.d = +v;
this.i.ky = this.i.ky;
}
get searchTypeCornerRadiusTopRight() {
return this.i.ky ? this.i.ky.e : NaN;
}
set searchTypeCornerRadiusTopRight(v) {
this.ensureSearchTypeCornerRadius();
this.i.ky.e = +v;
this.i.ky = this.i.ky;
}
ensureSearchTypeCornerRadius() {
if (this.i.ky) {
return;
}
this.i.ky = new CornerRadius(2);
}
get searchTypeContentPaddingBottom() {
return this.i.oo ? this.i.oo.bottom : NaN;
}
set searchTypeContentPaddingBottom(v) {
this.ensureSearchTypeContentPadding();
this.i.oo.bottom = +v;
this.i.oo = this.i.oo;
}
get searchTypeContentPaddingLeft() {
return this.i.oo ? this.i.oo.left : NaN;
}
set searchTypeContentPaddingLeft(v) {
this.ensureSearchTypeContentPadding();
this.i.oo.left = +v;
this.i.oo = this.i.oo;
}
get searchTypeContentPaddingRight() {
return this.i.oo ? this.i.oo.right : NaN;
}
set searchTypeContentPaddingRight(v) {
this.ensureSearchTypeContentPadding();
this.i.oo.right = +v;
this.i.oo = this.i.oo;
}
get searchTypeContentPaddingTop() {
return this.i.oo ? this.i.oo.top : NaN;
}
set searchTypeContentPaddingTop(v) {
this.ensureSearchTypeContentPadding();
this.i.oo.top = +v;
this.i.oo = this.i.oo;
}
ensureSearchTypeContentPadding() {
if (this.i.oo) {
return;
}
this.i.oo = new Thickness(2);
}
/**
* Gets or sets the width to use for the underline element when type is search.
*/
get searchTypeUnderlineWidth() {
return this.i.e4;
}
set searchTypeUnderlineWidth(v) {
this.i.e4 = +v;
}
/**
* Gets or sets the width to use for the underline element when type is search.
*/
get searchTypeUnderlineRippleWidth() {
return this.i.e3;
}
set searchTypeUnderlineRippleWidth(v) {
this.i.e3 = +v;
}
/**
* Gets or sets the width to use for the underline element when hovered when type is search.
*/
get searchTypeHoverUnderlineWidth() {
return this.i.e0;
}
set searchTypeHoverUnderlineWidth(v) {
this.i.e0 = +v;
}
/**
* Gets or sets the color to use for the underline element when type is search.
*/
get searchTypeUnderlineColor() {
return brushToString(this.i.n3);
}
set searchTypeUnderlineColor(v) {
this.i.n3 = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline ripple element when type is search.
*/
get searchTypeUnderlineRippleColor() {
return brushToString(this.i.n4);
}
set searchTypeUnderlineRippleColor(v) {
this.i.n4 = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline element when type is search.
*/
get searchTypeHoverUnderlineColor() {
return brushToString(this.i.n2);
}
set searchTypeHoverUnderlineColor(v) {
this.i.n2 = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline element when type is search.
*/
get searchTypeFocusUnderlineColor() {
return brushToString(this.i.n1);
}
set searchTypeFocusUnderlineColor(v) {
this.i.n1 = stringToBrush(v);
}
/**
* Gets or sets the color to use for the underline element when type is search.
*/
get searchTypeUnderlineOpacity() {
return this.i.e1;
}
set searchTypeUnderlineOpacity(v) {
this.i.e1 = +v;
}
/**
* Gets or sets the color to use for the underline element when type is search.
*/
get searchTypeHoverUnderlineOpacity() {
return this.i.ez;
}
set searchTypeHoverUnderlineOpacity(v) {
this.i.ez = +v;
}
/**
* Gets or sets the color to use for the underline element when type is search.
*/
get searchTypeFocusUnderlineOpacity() {
return this.i.ex;
}
set searchTypeFocusUnderlineOpacity(v) {
this.i.ex = +v;
}
/**
* Gets or sets the opacity to use for the underline ripple element when focused when type is search.
*/
get searchTypeFocusUnderlineRippleOpacity() {
return this.i.ey;
}
set searchTypeFocusUnderlineRippleOpacity(v) {
this.i.ey = +v;
}
/**
* Gets or sets the opacity to use for the underline ripple element when type is search.
*/
get searchTypeUnderlineRippleOpacity() {
return this.i.e2;
}
set searchTypeUnderlineRippleOpacity(v) {
this.i.e2 = +v;
}
/**
* Gets or sets the background color to use for the input group when type is search.
*/
get searchTypeBackgroundColor() {
return brushToString(this.i.ny);
}
set searchTypeBackgroundColor(v) {
this.i.ny = stringToBrush(v);
}
/**
* Gets or sets whether the input group is expanded or not.
*/
get isExpanded() {
return this.i.an;
}
set isExpanded(v) {
this.i.an = ensureBool(v);
}
/**
* Gets or sets whether the input group is hovered or not.
*/
get isHovered() {
return this.i.ap;
}
set isHovered(v) {
this.i.ap = ensureBool(v);
}
/**
* Gets or sets whether the input group is hovered or not.
*/
get isFocused() {
return this.i.ao;
}
set isFocused(v) {
this.i.ao = ensureBool(v);
}
/**
* Gets or sets whether the input group is expanded or not.
*/
get actualIsExpanded() {
return this.i.ai;
}
set actualIsExpanded(v) {
this.i.ai = ensureBool(v);
}
/**
* Gets or sets the color to use the hovered background of the inputs in the group.
*/
get focusBorderColor() {
return brushToString(this.i.no);
}
set focusBorderColor(v) {
this.i.no = stringToBrush(v);
}
/**
* Gets or sets the id to use for the checkbox.
*/
get id() {
return this.i.hk;
}
set id(v) {
this.i.hk = v;
}
/**
* Gets or sets whether the checkbox is disabled.
*/
get disabled() {
return this.i.disabled;
}
set disabled(v) {
this.i.disabled = ensureBool(v);
}
findByName(name) {
if (this.findEphemera) {
if (name && name.indexOf("@@e:") == 0) {
return this.findEphemera(name);
}
}
if (this.inputs != null && this.inputs.findByName && this.inputs.findByName(name)) {
return this.inputs.findByName(name);
}
return null;
}
get hasUserValues() {
return this._hasUserValues;
}
__m(propertyName) {
if (!this._inStyling) {
this._hasUserValues.add(propertyName);
}
}
_styling(container, component, parent) {
if (this._inStyling) {
return;
}
this._inStyling = true;
this._stylingContainer = container;
this._stylingParent = component;
let genericPrefix = "";
let typeName = this.i.$type.name;
if (typeName.indexOf("Xam") === 0) {
typeName = typeName.substring(3);
}
genericPrefix = toSpinal("XInputGroup");
let additionalPrefixes = [];
let prefix = toSpinal(typeName);
additionalPrefixes.push(prefix + "-");
let 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);
}
let basePrefix = toSpinal(typeName);
additionalPrefixes.push(basePrefix + "-");
b = b.baseType;
}
if (parent) {
let parentTypeName = parent.i.$type.name;
if (parentTypeName.indexOf("Xam") === 0) {
parentTypeName = parentTypeName.substring(3);
}
let parentPrefix = toSpinal(parentTypeName);
additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-");
additionalPrefixes.push(parentPrefix + "-" + prefix + "-");
}