igniteui-webcomponents-inputs
Version:
Ignite UI Web Components inputs components.
1,374 lines (1,373 loc) • 71.5 kB
JavaScript
import { XInputGroup } from "./XInputGroup";
import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, enumToString, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core";
import { WebComponentRenderer, PortalManager } from "igniteui-webcomponents-core";
import { TypeRegistrar } from "igniteui-webcomponents-core";
import { RegisterElementHelper } from "igniteui-webcomponents-core";
import { IgcXInputGroupItemComponent } from './igc-x-input-group-item-component';
import { IgcXInputGroupInputCollection } from './igc-x-input-group-input-collection';
import { CollectionAdapter } from "igniteui-webcomponents-core";
import { NotifyCollectionChangedAction } from "igniteui-webcomponents-core";
import { InputGroupDisplayType_$type } from './InputGroupDisplayType';
import { CornerRadius } from "igniteui-webcomponents-core";
import { Thickness } from "igniteui-webcomponents-core";
import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
import { IgcHTMLElement } from "igniteui-webcomponents-core";
export let IgcXInputGroupComponent = /*@__PURE__*/ (() => {
class IgcXInputGroupComponent extends IgcHTMLElement {
/**
* A collection or manually added axes for the chart.
*/
get inputs() {
if (this._inputs === null) {
let coll = new IgcXInputGroupInputCollection();
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;
}
constructor() {
super();
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 Angular to reproject the child content.
* Or adding and removing style mappings from the manual style mappings collection on the inputs property.
*/
this.actualInputs = [];
this._inputs = null;
this._inputsAdapter = null;
this._disconnected = false;
this._settingAttributes = false;
this._attached = false;
this._queuedSetAttributes = [];
this._updatingFromAttribute = false;
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._portalManager = new PortalManager("inputContent");
this._renderer = new WebComponentRenderer(this, document, true, {}, this._portalManager);
this._container = this._renderer.createElement("div");
this._renderer.updateRoot(this._container);
this._implementation = this.createImplementation();
this._implementation.externalObject = this;
//this._container.setStyleProperty("width", "100%");
//this._container.setStyleProperty("height", "100%");
var root;
root = this._container;
if (this._container.getNativeElement() != null) {
root = this._container.getNativeElement();
}
this._wrapper = this._renderer;
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, this, this);
}
}, (i) => { });
inputGroup.provideContainer(this._renderer);
this._onChildrenChanged();
//Checkbox.notifySizeChanged();
let mut = new MutationObserver((list) => {
for (var mutation of list) {
if (mutation.type == 'childList') {
this._onChildrenChanged();
this.updateInputs();
}
}
});
mut.observe(this, {
childList: true
});
//this._renderer.addSizeWatcher(() => {
// this._checkbox.notifySizeChanged();
//});
}
_onChildrenChanged() {
var children = [];
for (var i = 0; i < this.childNodes.length; i++) {
var child = this.childNodes[i];
if (child !== this._container.getNativeElement()) {
children.push(child);
}
}
this._portalManager.onChildrenChanged(children);
}
updateInputs() {
this.contentInputs.length = 0;
for (var i = 0; i < this.children.length; i++) {
if (this.children[i] instanceof IgcXInputGroupItemComponent) {
this.contentInputs.push(this.children[i]);
}
}
var childContent = this.querySelector("igc-child-content");
if (childContent) {
for (var i = 0; i < childContent.children.length; i++) {
if (childContent.children[i] instanceof IgcXInputGroupItemComponent) {
this.contentInputs.push(childContent.children[i]);
}
}
}
if (this._inputsAdapter != null) {
this._inputsAdapter.notifyContentChanged();
}
}
// supports angular themes or custom properties set in CSS
updateStyle() {
this._styling(this, this);
}
destroy() {
this._inputGroup.destroy();
this._wrapper.destroy();
}
createImplementation() {
return new XInputGroup();
}
disconnectedCallback() {
this._disconnected = true;
if (this.i) {
this.i.onDetachedFromUI();
}
}
connectedCallback() {
if (this._disconnected) {
this._disconnected = false;
if (this.i) {
this.i.onAttachedToUI();
}
return;
}
this.classList.add("ig-x-input-group");
this.classList.add("igc-x-input-group");
this.appendChild(this._container.getNativeElement());
this._attached = true;
this.style.display = "inline-block";
//this.style.height = this._height;
//this.style.width = this._width;
this._flushQueuedAttributes();
// supports themes or custom properties set in CSS
this._styling(this, this);
this.afterContentInit();
}
afterContentInit() {
this.i.ensureShift();
//this.i.notifySizeChanged();
}
/**
* @hidden
*/
get i() {
return this._implementation;
} /**
* @hidden
*/
static _createFromInternal(internal) {
if (!internal) {
return null;
}
if (!internal.$type) {
return null;
}
let name = internal.$type.name;
let externalName = "Igc" + name + "Component";
if (!TypeRegistrar.isRegistered(externalName)) {
return null;
}
return TypeRegistrar.create(externalName);
}
_enqueueSetAttribute(attrName, attrValue) {
this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
}
_flushQueuedAttributes() {
this._settingAttributes = true;
for (let i = 0; i < this._queuedSetAttributes.length; i++) {
this.setAttribute(this._queuedSetAttributes[i].attrName, this._queuedSetAttributes[i].attrValue);
}
this._settingAttributes = false;
this._queuedSetAttributes.length = 0;
}
_a(attrName, attrValue) {
if (this._updatingFromAttribute) {
return;
}
if (attrValue) {
attrValue = attrValue.toString();
}
this._settingAttributes = true;
attrName = toSpinal(attrName);
if (this._attached) {
this.setAttribute(attrName, attrValue);
}
else {
this._enqueueSetAttribute(attrName, attrValue);
}
this._settingAttributes = false;
}
static get observedAttributes() {
if (IgcXInputGroupComponent._observedAttributesIgcXInputGroupComponent == null) {
let names = getAllPropertyNames(IgcXInputGroupComponent);
for (let i = 0; i < names.length; i++) {
names[i] = toSpinal(names[i]);
}
IgcXInputGroupComponent._observedAttributesIgcXInputGroupComponent = names;
}
return IgcXInputGroupComponent._observedAttributesIgcXInputGroupComponent;
}
attributeChangedCallback(name, oldValue, newValue) {
if (this._settingAttributes) {
return;
}
let setName = fromSpinal(name);
this._updatingFromAttribute = true;
this[setName] = newValue;
this._updatingFromAttribute = false;
}
static register() {
if (!IgcXInputGroupComponent._isElementRegistered) {
IgcXInputGroupComponent._isElementRegistered = true;
RegisterElementHelper.registerElement(IgcXInputGroupComponent.htmlTagName, IgcXInputGroupComponent);
}
}
/**
* 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);
this._a("displayType", enumToString(InputGroupDisplayType_$type, this.i.d));
}
/**
* 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);
this._a("density", enumToString(ControlDisplayDensity_$type, this.i.t));
}
/**
* 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);
this._a("actualDensity", enumToString(ControlDisplayDensity_$type, this.i.s));
}
/**
* 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);
this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.p));
}
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);
this._a("actualBorderColor", brushToString(this.i.l6));
}
/**
* Gets the actual item border color.
*/
get actualFocusBorderColor() {
return brushToString(this.i.l7);
}
set actualFocusBorderColor(v) {
this.i.l7 = stringToBrush(v);
this._a("actualFocusBorderColor", brushToString(this.i.l7));
}
/**
* Gets the actual item border width.
*/
get actualBorderWidth() {
return this.i.cg;
}
set actualBorderWidth(v) {
this.i.cg = +v;
this._a("actualBorderWidth", this.i.cg);
}
/**
* Gets the actual item border width.
*/
get actualFocusBorderWidth() {
return this.i.ch;
}
set actualFocusBorderWidth(v) {
this.i.ch = +v;
this._a("actualFocusBorderWidth", this.i.ch);
}
get actualCornerRadiusBottomRight() {
return this.i.ko ? this.i.ko.c : NaN;
}
set actualCornerRadiusBottomRight(v) {
this.ensureActualCornerRadius();
this.i.ko.c = +v;
this._a("actualCornerRadiusBottomRight", this.i.ko.c);
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._a("actualCornerRadiusBottomLeft", this.i.ko.b);
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._a("actualCornerRadiusTopLeft", this.i.ko.d);
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._a("actualCornerRadiusTopRight", this.i.ko.e);
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._a("actualContentPaddingBottom", this.i.oe.bottom);
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._a("actualContentPaddingLeft", this.i.oe.left);
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._a("actualContentPaddingRight", this.i.oe.right);
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._a("actualContentPaddingTop", this.i.oe.top);
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;
this._a("actualUnderlineWidth", this.i.cp);
}
/**
* Gets the actual width to use for the underline element.
*/
get actualUnderlineRippleWidth() {
return this.i.co;
}
set actualUnderlineRippleWidth(v) {
this.i.co = +v;
this._a("actualUnderlineRippleWidth", this.i.co);
}
/**
* Gets the width to use for the underline element when hovered.
*/
get actualHoverUnderlineWidth() {
return this.i.cl;
}
set actualHoverUnderlineWidth(v) {
this.i.cl = +v;
this._a("actualHoverUnderlineWidth", this.i.cl);
}
/**
* 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);
this._a("actualUnderlineColor", brushToString(this.i.ma));
}
/**
* 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);
this._a("actualUnderlineRippleColor", brushToString(this.i.mb));
}
/**
* 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);
this._a("actualHoverUnderlineColor", brushToString(this.i.l9));
}
/**
* 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);
this._a("actualFocusUnderlineColor", brushToString(this.i.l8));
}
/**
* Gets the actual opacity to use for the underline element.
*/
get actualUnderlineOpacity() {
return this.i.cm;
}
set actualUnderlineOpacity(v) {
this.i.cm = +v;
this._a("actualUnderlineOpacity", this.i.cm);
}
/**
* 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;
this._a("actualHoverUnderlineOpacity", this.i.ck);
}
/**
* 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;
this._a("actualFocusUnderlineOpacity", this.i.ci);
}
/**
* 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;
this._a("actualFocusUnderlineRippleOpacity", this.i.cj);
}
/**
* Gets the actual opacity to use for the underline ripple element.
*/
get actualUnderlineRippleOpacity() {
return this.i.cn;
}
set actualUnderlineRippleOpacity(v) {
this.i.cn = +v;
this._a("actualUnderlineRippleOpacity", this.i.cn);
}
/**
* 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);
this._a("actualBackgroundColor", brushToString(this.i.l5));
}
/**
* 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;
this._a("borderWidth", this.i.c0);
}
/**
* 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;
this._a("focusBorderWidth", this.i.eg);
}
/**
* 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);
this._a("borderColor", brushToString(this.i.md));
}
get cornerRadiusBottomRight() {
return this.i.ks ? this.i.ks.c : NaN;
}
set cornerRadiusBottomRight(v) {
this.ensureCornerRadius();
this.i.ks.c = +v;
this._a("cornerRadiusBottomRight", this.i.ks.c);
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._a("cornerRadiusBottomLeft", this.i.ks.b);
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._a("cornerRadiusTopLeft", this.i.ks.d);
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._a("cornerRadiusTopRight", this.i.ks.e);
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._a("contentPaddingBottom", this.i.oi.bottom);
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._a("contentPaddingLeft", this.i.oi.left);
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._a("contentPaddingRight", this.i.oi.right);
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._a("contentPaddingTop", this.i.oi.top);
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;
this._a("underlineWidth", this.i.e8);
}
/**
* Gets or sets the width to use for the underline element.
*/
get underlineRippleWidth() {
return this.i.e7;
}
set underlineRippleWidth(v) {
this.i.e7 = +v;
this._a("underlineRippleWidth", this.i.e7);
}
/**
* 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;
this._a("hoverUnderlineWidth", this.i.ek);
}
/**
* 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);
this._a("underlineColor", brushToString(this.i.n6));
}
/**
* 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);
this._a("underlineRippleColor", brushToString(this.i.n7));
}
/**
* 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);
this._a("hoverUnderlineColor", brushToString(this.i.nq));
}
/**
* 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);
this._a("focusUnderlineColor", brushToString(this.i.np));
}
/**
* Gets or sets the color to use for the underline element.
*/
get underlineOpacity() {
return this.i.e5;
}
set underlineOpacity(v) {
this.i.e5 = +v;
this._a("underlineOpacity", this.i.e5);
}
/**
* Gets or sets the color to use for the underline element.
*/
get hoverUnderlineOpacity() {
return this.i.ej;
}
set hoverUnderlineOpacity(v) {
this.i.ej = +v;
this._a("hoverUnderlineOpacity", this.i.ej);
}
/**
* Gets or sets the color to use for the underline element.
*/
get focusUnderlineOpacity() {
return this.i.eh;
}
set focusUnderlineOpacity(v) {
this.i.eh = +v;
this._a("focusUnderlineOpacity", this.i.eh);
}
/**
* 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;
this._a("focusUnderlineRippleOpacity", this.i.ei);
}
/**
* 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;
this._a("underlineRippleOpacity", this.i.e6);
}
/**
* 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);
this._a("backgroundColor", brushToString(this.i.mc));
}
/**
* 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;
this._a("lineTypeBorderWidth", this.i.el);
}
/**
* 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;
this._a("lineTypeFocusBorderWidth", this.i.em);
}
/**
* 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);
this._a("lineTypeFocusBorderColor", brushToString(this.i.nt));
}
/**
* 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);
this._a("lineTypeBorderColor", brushToString(this.i.ns));
}
get lineTypeCornerRadiusBottomRight() {
return this.i.kx ? this.i.kx.c : NaN;
}
set lineTypeCornerRadiusBottomRight(v) {
this.ensureLineTypeCornerRadius();
this.i.kx.c = +v;
this._a("lineTypeCornerRadiusBottomRight", this.i.kx.c);
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._a("lineTypeCornerRadiusBottomLeft", this.i.kx.b);
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._a("lineTypeCornerRadiusTopLeft", this.i.kx.d);
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._a("lineTypeCornerRadiusTopRight", this.i.kx.e);
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._a("lineTypeContentPaddingBottom", this.i.on.bottom);
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._a("lineTypeContentPaddingLeft", this.i.on.left);
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._a("lineTypeContentPaddingRight", this.i.on.right);
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._a("lineTypeContentPaddingTop", this.i.on.top);
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;
this._a("lineTypeUnderlineWidth", this.i.eu);
}
/**
* 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;
this._a("lineTypeUnderlineRippleWidth", this.i.et);
}
/**
* 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;
this._a("lineTypeHoverUnderlineWidth", this.i.eq);
}
/**
* 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);
this._a("lineTypeUnderlineColor", brushToString(this.i.nw));
}
/**
* 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);
this._a("lineTypeUnderlineRippleColor", brushToString(this.i.nx));
}
/**
* 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);
this._a("lineTypeHoverUnderlineColor", brushToString(this.i.nv));
}
/**
* 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);
this._a("lineTypeFocusUnderlineColor", brushToString(this.i.nu));
}
/**
* 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;
this._a("lineTypeUnderlineOpacity", this.i.er);
}
/**
* 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;
this._a("lineTypeHoverUnderlineOpacity", this.i.ep);
}
/**
* 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;
this._a("lineTypeFocusUnderlineOpacity", this.i.en);
}
/**
* 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;
this._a("lineTypeFocusUnderlineRippleOpacity", this.i.eo);
}
/**
* 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;
this._a("lineTypeUnderlineRippleOpacity", this.i.es);
}
/**
* 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);
this._a("lineTypeBackgroundColor", brushToString(this.i.nr));
}
/**
* 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;
this._a("boxTypeBorderWidth", this.i.c1);
}
/**
* 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;
this._a("boxTypeFocusBorderWidth", this.i.c2);
}
/**
* 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);
this._a("boxTypeFocusBorderColor", brushToString(this.i.mn));
}
/**
* 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);
this._a("boxTypeBorderColor", brushToString(this.i.mm));
}
get boxTypeCornerRadiusBottomRight() {
return this.i.kq ? this.i.kq.c : NaN;
}
set boxTypeCornerRadiusBottomRight(v) {
this.ensureBoxTypeCornerRadius();
this.i.kq.c = +v;
this._a("boxTypeCornerRadiusBottomRight", this.i.kq.c);
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._a("boxTypeCornerRadiusBottomLeft", this.i.kq.b);
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._a("boxTypeCornerRadiusTopLeft", this.i.kq.d);
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._a("boxTypeCornerRadiusTopRight", this.i.kq.e);
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._a("boxTypeContentPaddingBottom", this.i.og.bottom);
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._a("boxTypeContentPaddingLeft", this.i.og.left);
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._a("boxTypeContentPaddingRight", this.i.og.right);
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._a("boxTypeContentPaddingTop", this.i.og.top);
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;
this._a("boxTypeUnderlineWidth", this.i.da);
}
/**
* 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;
this._a("boxTypeUnderlineRippleWidth", this.i.c9);
}
/**
* 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;
this._a("boxTypeHoverUnderlineWidth", this.i.c6);
}
/**
* 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);
this._a("boxTypeUnderlineColor", brushToString(this.i.mq));
}
/**
* 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);
this._a("boxTypeUnderlineRippleColor", brushToString(this.i.mr));
}
/**
* 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);
this._a("boxTypeHoverUnderlineColor", brushToString(this.i.mp));
}
/**
* 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);
this._a("boxTypeFocusUnderlineColor", brushToString(this.i.mo));
}
/**
* 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;
this._a("boxTypeUnderlineOpacity", this.i.c7);
}
/**
* 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;
this._a("boxTypeHoverUnderlineOpacity", this.i.c5);
}
/**
* 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;
this._a("boxTypeFocusUnderlineOpacity", this.i.c3);
}
/**
* 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;
this._a("boxTypeFocusUnderlineRippleOpacity", this.i.c4);
}
/**
* 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;
this._a("boxTypeUnderlineRippleOpacity", this.i.c8);
}
/**
* 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);
this._a("boxTypeBackgroundColor", brushToString(this.i.ml));
}
/**
* 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;
this._a("borderTypeBorderWidth", this.i.cq);
}
/**
* 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;
this._a("borderTypeFocusBorderWidth", this.i.cr);
}
/**
* 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);
this._a("borderTypeFocusBorderColor", brushToString(this.i.mg));
}
/**
* 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);
this._a("borderTypeBorderColor", brushToString(this.i.mf));
}
get borderTypeCornerRadiusBottomRight() {
return this.i.kp ? this.i.kp.c : NaN;
}
set borderTypeCornerRadiusBottomRight(v) {
this.ensureBorderTypeCornerRadius();
this.i.kp.c = +v;
this._a("borderTypeCornerRadiusBottomRight", this.i.kp.c);
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._a("borderTypeCornerRadiusBottomLeft", this.i.kp.b);
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._a("borderTypeCornerRadiusTopLeft", this.i.kp.d);
this.i.kp = this.i.kp;
}
get borderTypeCornerRadiusTopRight() {
return this.i.kp ? this.i.kp.e : NaN;
}
set borderTypeCornerRadiusTopRight(v) {