igniteui-webcomponents-grids
Version:
Ignite UI Web Components grid components.
828 lines (822 loc) • 29.7 kB
JavaScript
import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core";
import { IgcGridColumnAnimationSettings } from "./igc-grid-column-animation-settings";
import { IgcColumnWidth } from "./igc-column-width";
import { IgcHeaderComponent } from "./igc-header-component";
import { ColumnSortDirection_$type } from "./ColumnSortDirection";
import { PinnedPositions_$type } from "./PinnedPositions";
import { ColumnOptionsIconAlignment_$type } from "./ColumnOptionsIconAlignment";
import { ColumnOptionsIconBehavior_$type } from "./ColumnOptionsIconBehavior";
import { MergedCellMode_$type } from "./MergedCellMode";
import { MergedCellEvaluationCriteria_$type } from "./MergedCellEvaluationCriteria";
import { CellContentVerticalAlignment_$type } from "./CellContentVerticalAlignment";
import { FilterComparisonType_$type } from "./FilterComparisonType";
import { IgcGridFilterOperandsCollection } from "./igc-grid-filter-operands-collection";
import { IgcDefinitionBaseComponent } from "./igc-definition-base-component";
import { getAllPropertyNames, toSpinal, brushToString, stringToBrush, ensureBool, ensureEnum, enumToString } from "igniteui-webcomponents-core";
import { ColumnWidth as ColumnWidth_internal } from "./ColumnWidth";
import { FontInfo } from "igniteui-webcomponents-core";
import { GridFilterOperandsCollection as GridFilterOperandsCollection_internal } from "./GridFilterOperandsCollection";
import { FilterOperand } from "./FilterOperand";
import { SyncableObservableCollection$1 } from "igniteui-webcomponents-core";
/**
* A column in the data grid.
*/
export let IgcDataGridColumnComponent = /*@__PURE__*/ (() => {
class IgcDataGridColumnComponent extends IgcDefinitionBaseComponent {
/**
* @hidden
*/
get i() {
return this._implementation;
}
constructor() {
super();
this._filterOperands = null;
this._actualHeaderTextChange = null;
this._actualHeaderTextChange_wrapped = null;
}
connectedCallback() {
if (super["connectedCallback"]) {
super["connectedCallback"]();
}
if (this.i.connectedCallback) {
this.i.connectedCallback();
}
if (this.updateContentChildren) {
this.updateContentChildren();
}
else if (this._updateAdapters) {
this._updateAdapters();
}
if (!this._attached) {
this._attached = true;
this._flushQueuedAttributes();
}
}
disconnectedCallback() {
if (super["disconnectedCallback"]) {
super["disconnectedCallback"]();
}
if (this.i.disconnectedCallback) {
this.i.disconnectedCallback();
}
if (this._attached) {
this._attached = false;
}
}
static get observedAttributes() {
if (IgcDataGridColumnComponent._observedAttributesIgcDataGridColumnComponent == null) {
let names = getAllPropertyNames(IgcDataGridColumnComponent);
for (let i = 0; i < names.length; i++) {
names[i] = toSpinal(names[i]);
}
IgcDataGridColumnComponent._observedAttributesIgcDataGridColumnComponent = names;
}
return IgcDataGridColumnComponent._observedAttributesIgcDataGridColumnComponent;
}
/**
* Gets or sets the amount of left padding to use for the cell content for this column.
*/
get paddingLeft() {
return this.i.kk;
}
set paddingLeft(v) {
this.i.kk = +v;
this._a("paddingLeft", this.i.kk);
}
/**
* Gets or sets the amount of top padding to use for the cell content for this column.
*/
get paddingTop() {
return this.i.km;
}
set paddingTop(v) {
this.i.km = +v;
this._a("paddingTop", this.i.km);
}
/**
* Gets or sets the amount of right padding to use for the cell content of this column.
*/
get paddingRight() {
return this.i.kl;
}
set paddingRight(v) {
this.i.kl = +v;
this._a("paddingRight", this.i.kl);
}
/**
* Gets or sets the amount of bottom padding to use for the cell content of this column.
*/
get paddingBottom() {
return this.i.kj;
}
set paddingBottom(v) {
this.i.kj = +v;
this._a("paddingBottom", this.i.kj);
}
/**
* Gets or sets an unique name of the Column
*/
get name() {
return this.i.mf;
}
set name(v) {
this.i.mf = v;
}
/**
* Gets or sets the key used for the column binding
*/
get field() {
return this.i.lo;
}
set field(v) {
this.i.lo = v;
}
/**
* Gets or sets the text displayed in the header of the column
*/
get headerText() {
return this.i.lv;
}
set headerText(v) {
this.i.lv = v;
}
/**
* Gets the actual text displayed in the header of the column
*/
get actualHeaderText() {
return this.i.k3;
}
set actualHeaderText(v) {
this.i.k3 = v;
}
/**
* Gets or sets the background color to use for the cells when they are selected
*/
get selectedBackground() {
return brushToString(this.i.n2);
}
set selectedBackground(v) {
this.i.n2 = stringToBrush(v);
this._a("selectedBackground", brushToString(this.i.n2));
}
/**
* Gets the actual background color that is used for the cells when they are selected
*/
get actualSelectedBackground() {
return brushToString(this.i.nv);
}
set actualSelectedBackground(v) {
this.i.nv = stringToBrush(v);
this._a("actualSelectedBackground", brushToString(this.i.nv));
}
/**
* Gets or sets the background color to use for the cells when the row is hovered.
*/
get rowHoverBackground() {
return brushToString(this.i.n0);
}
set rowHoverBackground(v) {
this.i.n0 = stringToBrush(v);
this._a("rowHoverBackground", brushToString(this.i.n0));
}
/**
* Gets the actual background color that is used for the cells when they are hovered.
*/
get actualHoverBackground() {
return brushToString(this.i.nt);
}
set actualHoverBackground(v) {
this.i.nt = stringToBrush(v);
this._a("actualHoverBackground", brushToString(this.i.nt));
}
/**
* Gets or sets the text color to use for the cells when the row is hovered.
*/
get rowHoverTextColor() {
return brushToString(this.i.n1);
}
set rowHoverTextColor(v) {
this.i.n1 = stringToBrush(v);
this._a("rowHoverTextColor", brushToString(this.i.n1));
}
/**
* Gets the actual text color that is used for the cells when they are hovered.
*/
get actualRowHoverTextColor() {
return brushToString(this.i.nu);
}
set actualRowHoverTextColor(v) {
this.i.nu = stringToBrush(v);
this._a("actualRowHoverTextColor", brushToString(this.i.nu));
}
/**
* Gets or sets the animation settings to use for this column.
*/
get animationSettings() {
const r = this.i.h6;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = new IgcGridColumnAnimationSettings();
if (r.$type) {
e._implementation = r;
}
else {
if (e.i.setNativeElement) {
e.i.setNativeElement(r);
}
}
r.externalObject = e;
}
return r.externalObject;
}
set animationSettings(v) {
v == null ? this.i.h6 = null : this.i.h6 = v.i;
}
/**
* Gets or sets the width to use for this column.
*/
get width() {
const r = this.i.width;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = new IgcColumnWidth();
if (r.$type) {
e._implementation = r;
}
else {
if (e.i.setNativeElement) {
e.i.setNativeElement(r);
}
}
r.externalObject = e;
}
return r.externalObject;
}
set width(v) {
if (typeof v == "string") {
let int = ColumnWidth_internal.parse(v);
let ext = new IgcColumnWidth();
ext._implementation = int;
v = ext;
}
v == null ? this.i.width = null : this.i.width = v.i;
}
/**
* Gets or sets the minimum width to use for this column. Overrides the DefaultColumnMinWidth from the grid, if set.
*/
get minWidth() {
return this.i.j0;
}
set minWidth(v) {
this.i.j0 = +v;
this._a("minWidth", this.i.j0);
}
/**
* Gets whether this column was projected from markup/templates and is constrained.
*/
get isFromMarkup() {
return this.i.jn;
}
set isFromMarkup(v) {
this.i.jn = ensureBool(v);
this._a("isFromMarkup", this.i.jn);
}
/**
* Gets whether this column was auto generated.
*/
get isAutoGenerated() {
return this.i.jh;
}
set isAutoGenerated(v) {
this.i.jh = ensureBool(v);
this._a("isAutoGenerated", this.i.jh);
}
/**
* Gets or sets a filter to apply on the values of this column
*/
get filter() {
return this.i.g1;
}
set filter(v) {
this.i.g1 = v;
}
/**
* Gets or sets a filter to apply to the values of this column.
*/
get filterExpression() {
return this.i.g3;
}
set filterExpression(v) {
this.i.g3 = v;
}
/**
* Gets or sets the header definition for this column.
*/
get header() {
const r = this.i.header;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = IgcHeaderComponent._createFromInternal(r);
if (e) {
e._implementation = r;
}
r.externalObject = e;
}
return r.externalObject;
}
set header(v) {
if (v != null && this._stylingContainer && v._styling)
v._styling(this._stylingContainer, this, this);
v == null ? this.i.header = null : this.i.header = v.i;
}
/**
* Gets or sets whether filtering is enabled for this column.
*/
get isFilteringEnabled() {
return this.i.jm;
}
set isFilteringEnabled(v) {
this.i.jm = ensureBool(v);
this._a("isFilteringEnabled", this.i.jm);
}
/**
* Gets or sets whether resizing is enabled for this column.
*/
get isResizingEnabled() {
return this.i.jp;
}
set isResizingEnabled(v) {
this.i.jp = ensureBool(v);
this._a("isResizingEnabled", this.i.jp);
}
/**
* Gets or sets whether or not a column is hidden from the grid
*/
get isHidden() {
return this.i.jo;
}
set isHidden(v) {
this.i.jo = ensureBool(v);
this._a("isHidden", this.i.jo);
}
/**
* Gets or sets if a column should be removed from the grid when it is fully hidden
*/
get shouldRemoveWhenHidden() {
return this.i.js;
}
set shouldRemoveWhenHidden(v) {
this.i.js = ensureBool(v);
this._a("shouldRemoveWhenHidden", this.i.js);
}
/**
* Gets the current sort direction (None, Ascending, Descending) for this column.
*/
get sortDirection() {
return this.i.hr;
}
set sortDirection(v) {
this.i.hr = ensureEnum(ColumnSortDirection_$type, v);
this._a("sortDirection", enumToString(ColumnSortDirection_$type, this.i.hr));
}
/**
* Gets or sets the current fixed position for this column.
*/
get pinned() {
return this.i.il;
}
set pinned(v) {
this.i.il = ensureEnum(PinnedPositions_$type, v);
this._a("pinned", enumToString(PinnedPositions_$type, this.i.il));
}
/**
* Gets the actual column options icon alignment for this column.
*/
get actualColumnOptionsIconAlignment() {
return this.i.hi;
}
set actualColumnOptionsIconAlignment(v) {
this.i.hi = ensureEnum(ColumnOptionsIconAlignment_$type, v);
this._a("actualColumnOptionsIconAlignment", enumToString(ColumnOptionsIconAlignment_$type, this.i.hi));
}
/**
* Gets or sets whether the column options icon is aligned opposite the header text or not.
*/
get columnOptionsIconAlignment() {
return this.i.hj;
}
set columnOptionsIconAlignment(v) {
this.i.hj = ensureEnum(ColumnOptionsIconAlignment_$type, v);
this._a("columnOptionsIconAlignment", enumToString(ColumnOptionsIconAlignment_$type, this.i.hj));
}
/**
* Gets the actual column options icon color for this column.
*/
get actualColumnOptionsIconColor() {
return brushToString(this.i.nr);
}
set actualColumnOptionsIconColor(v) {
this.i.nr = stringToBrush(v);
this._a("actualColumnOptionsIconColor", brushToString(this.i.nr));
}
/**
* Gets or sets the column options icon color for this column.
*/
get columnOptionsIconColor() {
return brushToString(this.i.nw);
}
set columnOptionsIconColor(v) {
this.i.nw = stringToBrush(v);
this._a("columnOptionsIconColor", brushToString(this.i.nw));
}
/**
* Gets or sets how the column option icon will behave in the column header.
*/
get columnOptionsIconBehavior() {
return this.i.hn;
}
set columnOptionsIconBehavior(v) {
this.i.hn = ensureEnum(ColumnOptionsIconBehavior_$type, v);
this._a("columnOptionsIconBehavior", enumToString(ColumnOptionsIconBehavior_$type, this.i.hn));
}
/**
* Gets or sets how the column option icon will behave in the column header.
*/
get actualColumnOptionsIconBehavior() {
return this.i.hm;
}
set actualColumnOptionsIconBehavior(v) {
this.i.hm = ensureEnum(ColumnOptionsIconBehavior_$type, v);
this._a("actualColumnOptionsIconBehavior", enumToString(ColumnOptionsIconBehavior_$type, this.i.hm));
}
/**
* Gets the actual state of the column options for this column.
*/
get actualIsColumnOptionsEnabled() {
return this.i.ja;
}
set actualIsColumnOptionsEnabled(v) {
this.i.ja = ensureBool(v);
this._a("actualIsColumnOptionsEnabled", this.i.ja);
}
/**
* Gets or sets the preferred state of the column options for this column. If the feature is disabled at the grid level
* then it will be disabled for the column regardless of what this is set to.
*/
get isColumnOptionsEnabled() {
return this.i.ji;
}
set isColumnOptionsEnabled(v) {
this.i.ji = ensureBool(v);
this._a("isColumnOptionsEnabled", this.i.ji);
}
/**
* Gets the actual state of summaries menu in the column options for this column.
*/
get actualIsColumnOptionsSummariesEnabled() {
return this.i.jc;
}
set actualIsColumnOptionsSummariesEnabled(v) {
this.i.jc = ensureBool(v);
this._a("actualIsColumnOptionsSummariesEnabled", this.i.jc);
}
/**
* Gets or sets whether to show the summaries option in the column options menu for this column.
*/
get isColumnOptionsSummariesEnabled() {
return this.i.jk;
}
set isColumnOptionsSummariesEnabled(v) {
this.i.jk = ensureBool(v);
this._a("isColumnOptionsSummariesEnabled", this.i.jk);
}
/**
* Gets the actual state of grouping menu in the column options for this column.
*/
get actualIsColumnOptionsGroupingEnabled() {
return this.i.jb;
}
set actualIsColumnOptionsGroupingEnabled(v) {
this.i.jb = ensureBool(v);
this._a("actualIsColumnOptionsGroupingEnabled", this.i.jb);
}
/**
* Gets or sets whether to show the grouping option in the column options menu for this column.
*/
get isColumnOptionsGroupingEnabled() {
return this.i.jj;
}
set isColumnOptionsGroupingEnabled(v) {
this.i.jj = ensureBool(v);
this._a("isColumnOptionsGroupingEnabled", this.i.jj);
}
/**
* Gets or sets if the column is editable.
*/
get isEditable() {
return this.i.jl;
}
set isEditable(v) {
this.i.jl = ensureBool(v);
this._a("isEditable", this.i.jl);
}
/**
* Gets or sets the text color used for deleted rows.
*/
get deletedTextColor() {
return brushToString(this.i.nx);
}
set deletedTextColor(v) {
this.i.nx = stringToBrush(v);
this._a("deletedTextColor", brushToString(this.i.nx));
}
/**
* Gets the actual text color used for deleted rows.
*/
get actualDeletedTextColor() {
return brushToString(this.i.ns);
}
set actualDeletedTextColor(v) {
this.i.ns = stringToBrush(v);
this._a("actualDeletedTextColor", brushToString(this.i.ns));
}
/**
* Gets or sets the opacity to use for unsaved edited cell values.
*/
get editOpacity() {
return this.i.jz;
}
set editOpacity(v) {
this.i.jz = +v;
this._a("editOpacity", this.i.jz);
}
/**
* Gets the actual opacity for unsaved edited cell values.
*/
get actualEditOpacity() {
return this.i.jy;
}
set actualEditOpacity(v) {
this.i.jy = +v;
this._a("actualEditOpacity", this.i.jy);
}
/**
* Gets or sets the font style to use for unsaved cell edits.
*/
get textEditStyle() {
if (this.i.textEditStyle == null) {
return null;
}
return this.i.textEditStyle.fontString;
}
set textEditStyle(v) {
let fi = new FontInfo();
fi.fontString = v;
this.i.textEditStyle = fi;
this._a("textEditStyle", this.i.textEditStyle != null ? this.i.textEditStyle.fontString : "");
}
/**
* Gets the actual font style used for unsaved cell edits.
*/
get actualEditFontInfo() {
if (this.i.is == null) {
return null;
}
return this.i.is.fontString;
}
set actualEditFontInfo(v) {
let fi = new FontInfo();
fi.fontString = v;
this.i.is = fi;
this._a("actualEditFontInfo", this.i.is != null ? this.i.is.fontString : "");
}
/**
* Gets or sets if and how cell merging is performed for this field.
*/
get mergedCellMode() {
return this.i.ih;
}
set mergedCellMode(v) {
this.i.ih = ensureEnum(MergedCellMode_$type, v);
this._a("mergedCellMode", enumToString(MergedCellMode_$type, this.i.ih));
}
/**
* Gets or sets how cells are evaluated for merging.
*/
get mergedCellEvaluationCriteria() {
return this.i.id;
}
set mergedCellEvaluationCriteria(v) {
this.i.id = ensureEnum(MergedCellEvaluationCriteria_$type, v);
this._a("mergedCellEvaluationCriteria", enumToString(MergedCellEvaluationCriteria_$type, this.i.id));
}
/**
* Gets or sets the vertical alignment to use for the merged cell content.
*/
get mergedCellVerticalAlignment() {
return this.i.ha;
}
set mergedCellVerticalAlignment(v) {
this.i.ha = ensureEnum(CellContentVerticalAlignment_$type, v);
this._a("mergedCellVerticalAlignment", enumToString(CellContentVerticalAlignment_$type, this.i.ha));
}
/**
* Gets or sets the amount of left padding to use for the cell content for this column.
*/
get mergedCellPaddingLeft() {
return this.i.kd;
}
set mergedCellPaddingLeft(v) {
this.i.kd = +v;
this._a("mergedCellPaddingLeft", this.i.kd);
}
/**
* Gets or sets the amount of top padding to use for the cell content for this column.
*/
get mergedCellPaddingTop() {
return this.i.kf;
}
set mergedCellPaddingTop(v) {
this.i.kf = +v;
this._a("mergedCellPaddingTop", this.i.kf);
}
/**
* Gets or sets the amount of right padding to use for the cell content of this column.
*/
get mergedCellPaddingRight() {
return this.i.ke;
}
set mergedCellPaddingRight(v) {
this.i.ke = +v;
this._a("mergedCellPaddingRight", this.i.ke);
}
/**
* Gets or sets the amount of bottom padding to use for the cell content of this column.
*/
get mergedCellPaddingBottom() {
return this.i.kc;
}
set mergedCellPaddingBottom(v) {
this.i.kc = +v;
this._a("mergedCellPaddingBottom", this.i.kc);
}
/**
* Gets or sets whether UI filters are case sensitive or not.
*/
get filterComparisonType() {
return this.i.h1;
}
set filterComparisonType(v) {
this.i.h1 = ensureEnum(FilterComparisonType_$type, v);
this._a("filterComparisonType", enumToString(FilterComparisonType_$type, this.i.h1));
}
/**
* Gets a list of the current custom filters for this column.
*/
get filterOperands() {
if (this._filterOperands === null) {
let coll = new IgcGridFilterOperandsCollection();
let innerColl = this.i.h8;
if (!innerColl) {
innerColl = new GridFilterOperandsCollection_internal();
}
this._filterOperands = coll._fromInner(innerColl);
}
return this._filterOperands;
}
set filterOperands(v) {
if (this._filterOperands !== null) {
this._filterOperands._setSyncTarget(null);
this._filterOperands = null;
}
let coll = new IgcGridFilterOperandsCollection();
this._filterOperands = coll._fromOuter(v);
let syncColl = new SyncableObservableCollection$1(FilterOperand.$type);
let innerColl = this.i.h8;
if (!innerColl) {
innerColl = new GridFilterOperandsCollection_internal();
}
syncColl._inner = innerColl;
syncColl.clear();
this._filterOperands._setSyncTarget(syncColl);
}
findByName(name) {
var baseResult = super.findByName(name);
if (baseResult) {
return baseResult;
}
if (this.animationSettings && this.animationSettings.name && this.animationSettings.name == name) {
return this.animationSettings;
}
if (this.width && this.width.name && this.width.name == name) {
return this.width;
}
if (this.header && this.header.name && this.header.name == name) {
return this.header;
}
if (this.filterOperands != null && this.filterOperands.findByName && this.filterOperands.findByName(name)) {
return this.filterOperands.findByName(name);
}
return null;
}
_styling(container, component, parent) {
super._styling(container, component, parent);
this._inStyling = true;
if (this.header && this.header._styling) {
this.header._styling(container, component, this);
}
this._inStyling = false;
}
/**
* Get the unique key used to identify this column.
*/
getUniqueKey() {
let iv = this.i.lt();
return (iv);
}
setNamedHeaderValue(valueName, animationType, value) {
this.i.m2(valueName, (animationType == null ? null : animationType), value);
}
/**
* Returns if the column has named header values.
*/
hasNamedHeaderValues() {
let iv = this.i.jf();
return (iv);
}
/**
* Returns if there is a named header value with a given name.
* @param valueName * The named value to check for.
*/
hasNamedHeaderValue(valueName) {
let iv = this.i.je(valueName);
return (iv);
}
/**
* Removes a named header value with the given name from the named header values for this column.
* @param valueName * The named header value to remove.
*/
removeNamedHeaderValue(valueName) {
this.i.m1(valueName);
}
/**
* Gets the value of a named header value for this column by name.
* @param valueName * Name of the named header value to retrieve.
*/
getNamedHeaderValue(valueName) {
let iv = this.i.kr(valueName);
return (iv);
}
applyCustomFilter(filterID, index, value) {
this.i.mu(filterID, index, value);
}
getDesiredToolbarActions() {
let iv = this.i.getDesiredToolbarActions();
return (iv);
}
addCommandAvailabilityListener(listener) {
this.i.addCommandAvailabilityListener(listener);
}
removeCommandAvailabilityListener(listener) {
this.i.removeCommandAvailabilityListener(listener);
}
addCommandStateChangedListener(listener) {
this.i.addCommandStateChangedListener(listener);
}
removeCommandStateChangedListener(listener) {
this.i.removeCommandStateChangedListener(listener);
}
get actualHeaderTextChange() {
return this._actualHeaderTextChange;
}
set actualHeaderTextChange(ev) {
if (this._actualHeaderTextChange_wrapped !== null) {
this.i.propertyChanged = delegateRemove(this.i.propertyChanged, this._actualHeaderTextChange_wrapped);
this._actualHeaderTextChange_wrapped = null;
this._actualHeaderTextChange = null;
}
this._actualHeaderTextChange = ev;
this._actualHeaderTextChange_wrapped = (o, e) => {
let ext = this.actualHeaderText;
if (e.propertyName == 'K3') {
if (this.beforeActualHeaderTextChange) {
this.beforeActualHeaderTextChange(this, ext);
}
if (this._actualHeaderTextChange) {
this._actualHeaderTextChange(this, ext);
}
}
};
this.i.propertyChanged = delegateCombine(this.i.propertyChanged, this._actualHeaderTextChange_wrapped);
}
}
IgcDataGridColumnComponent._observedAttributesIgcDataGridColumnComponent = null;
return IgcDataGridColumnComponent;
})();