igniteui-webcomponents-grids
Version:
Ignite UI Web Components grid components.
695 lines (694 loc) • 27.9 kB
JavaScript
import { __extends } from "tslib";
import { ensureEnum, brushToString, stringToBrush, ensureBool, NamePatcher, toSpinal, enumToString, getAllPropertyNames } from "igniteui-webcomponents-core";
import { FontInfo } from "igniteui-webcomponents-core";
import { WebComponentRenderer } from "igniteui-webcomponents-core";
import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core";
import { DataGridStylingDefaults } from './DataGridStylingDefaults';
import { RegisterElementHelper } from "igniteui-webcomponents-core";
import { GridColumnOptions } from "./GridColumnOptions";
import { IgcGridColumnOptionsBaseComponent } from "./igc-grid-column-options-base-component";
import { IgcApplyButtonClickEventArgs } from './igc-apply-button-click-event-args';
import { IgcCancelButtonClickEventArgs } from './igc-cancel-button-click-event-args';
import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
var IgcGridColumnOptionsComponent = /** @class */ /*@__PURE__*/ (function (_super) {
__extends(IgcGridColumnOptionsComponent, _super);
function IgcGridColumnOptionsComponent() {
var _this = _super.call(this) || this;
_this._disconnected = false;
_this._applyButtonClick = null;
_this._applyButtonClick_wrapped = null;
_this._cancelButtonClick = null;
_this._cancelButtonClick_wrapped = null;
if (_this._styling) {
NamePatcher.ensureStylablePatched(Object.getPrototypeOf(_this));
}
_this._webComponentRenderer = new WebComponentRenderer(_this, document, true, DataGridStylingDefaults);
_this._webComponentWrapper = _this._webComponentRenderer.createElement("div");
_this._webComponentRenderer.updateRoot(_this._webComponentWrapper);
_this._webComponentWrapper.setStyleProperty("display", "block");
_this._webComponentWrapper.setStyleProperty("width", "100%");
_this._webComponentWrapper.setStyleProperty("height", "100%");
_this.i.provideRenderer(_this._webComponentRenderer);
_this.i.notifySizeChanged();
_this._webComponentRenderer.addSizeWatcher(function () {
_this.i.notifySizeChanged();
});
return _this;
}
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "height", {
get: function () {
return this._height;
},
set: function (value) {
this._height = value;
this.style.height = value;
this.i.notifySizeChanged();
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "width", {
get: function () {
return this._width;
},
set: function (value) {
this._width = value;
this.style.width = value;
this.i.notifySizeChanged();
},
enumerable: false,
configurable: true
});
// supports angular themes or custom properties set in CSS
IgcGridColumnOptionsComponent.prototype.updateStyle = function () {
this._styling(this, this);
};
IgcGridColumnOptionsComponent.prototype.destroy = function () {
this._implementation.destroy();
this._webComponentRenderer.destroy();
};
IgcGridColumnOptionsComponent.prototype.createImplementation = function () {
return new GridColumnOptions();
};
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "i", {
get: function () {
return this._implementation;
},
enumerable: false,
configurable: true
});
IgcGridColumnOptionsComponent.prototype.disconnectedCallback = function () {
this._disconnected = true;
};
IgcGridColumnOptionsComponent.prototype.connectedCallback = function () {
if (this._disconnected) {
this._disconnected = false;
return;
}
this.classList.add("ig-grid-column-options");
this.classList.add("igc-grid-column-options");
var rootWrapper = this._webComponentRenderer.rootWrapper;
var rootElement = rootWrapper.getNativeElement();
this.appendChild(rootElement);
this._attached = true;
this.style.display = "block";
this.style.height = this._height;
this.style.width = this._width;
var headerSection = document.createElement("div");
headerSection.setAttribute("key", "headerSection");
rootElement.appendChild(headerSection);
var headerSectionWrapper = this._webComponentRenderer.getWrapper(headerSection);
// Sub-section of the header
var headerColumnNameSection = document.createElement("div");
headerColumnNameSection.setAttribute("key", "headerColumnNameSection");
headerSection.appendChild(headerColumnNameSection);
var headerColumnNameSectionWrapper = this._webComponentRenderer.getWrapper(headerColumnNameSection);
// Sub-section of the header
var headerButtonsSection = document.createElement("div");
headerButtonsSection.setAttribute("key", "headerButtonsSection");
headerSection.appendChild(headerButtonsSection);
var headerButtonsSectionWrapper = this._webComponentRenderer.getWrapper(headerButtonsSection);
// Sub-section of the header
var groupSection = document.createElement("div");
groupSection.setAttribute("key", "groupSection");
var groupSectionWrapper = this._webComponentRenderer.getWrapper(groupSection);
headerButtonsSection.appendChild(groupSection);
// Sub-section of the header
var hideSection = document.createElement("div");
hideSection.setAttribute("key", "hideSection");
var hideSectionWrapper = this._webComponentRenderer.getWrapper(hideSection);
headerButtonsSection.appendChild(hideSection);
var sortSection = document.createElement("div");
sortSection.setAttribute("key", "sortSection");
var sortSectionWrapper = this._webComponentRenderer.getWrapper(sortSection);
rootElement.appendChild(sortSection);
var sortOptions = this._webComponentRenderer.createElement("igc-grid-column-sort-options");
sortOptions.setAttribute("key", "sortOptions");
sortSectionWrapper.append(sortOptions);
var moveSection = document.createElement("div");
moveSection.setAttribute("key", "moveSection");
var moveSectionWrapper = this._webComponentRenderer.getWrapper(moveSection);
rootElement.appendChild(moveSection);
var moveOptions = this._webComponentRenderer.createElement("igc-grid-column-move-options");
moveOptions.setAttribute("key", "moveOptions");
moveSectionWrapper.append(moveOptions);
var pinSection = document.createElement("div");
pinSection.setAttribute("key", "pinSection");
var pinSectionWrapper = this._webComponentRenderer.getWrapper(pinSection);
rootElement.appendChild(pinSection);
var pinOptions = this._webComponentRenderer.createElement("igc-grid-column-pin-options");
pinOptions.setAttribute("key", "pinOptions");
pinSectionWrapper.append(pinOptions);
var hideOptions = this._webComponentRenderer.createElement("igc-grid-column-hide-options");
hideOptions.setAttribute("key", "hideOptions");
hideSectionWrapper.append(hideOptions);
var groupOptions = this._webComponentRenderer.createElement("igc-grid-column-group-options");
groupOptions.setAttribute("key", "groupOptions");
groupSectionWrapper.append(groupOptions);
// Summary Section
var summarySection = document.createElement("div");
summarySection.setAttribute("key", "summarySection");
var summarySectionWrapper = this._webComponentRenderer.getWrapper(summarySection);
rootElement.appendChild(summarySection);
var summaryOptions = this._webComponentRenderer.createElement("igc-grid-column-summary-options");
summaryOptions.setAttribute("key", "summaryOptions");
summarySectionWrapper.append(summaryOptions);
///////////////////
var filterSection = document.createElement("div");
filterSection.setAttribute("key", "filterSection");
var filterSectionWrapper = this._webComponentRenderer.getWrapper(filterSection);
rootElement.appendChild(filterSection);
var filterOptions = this._webComponentRenderer.createElement("igc-grid-column-filter-options");
filterOptions.setAttribute("key", "filterOptions");
filterSectionWrapper.append(filterOptions);
var buttonSection = document.createElement("div");
buttonSection.setAttribute("key", "buttonSection");
var buttonSectionWrapper = this._webComponentRenderer.getWrapper(buttonSection);
rootElement.appendChild(buttonSection);
var buttonOptions = this._webComponentRenderer.createElement("igc-grid-column-button-options");
buttonOptions.setAttribute("key", "buttonOptions");
buttonSectionWrapper.append(buttonOptions);
this.i.provideContent(headerSectionWrapper, sortSectionWrapper, moveSectionWrapper, pinSectionWrapper, filterSectionWrapper, summarySectionWrapper, buttonSectionWrapper, headerColumnNameSectionWrapper, headerButtonsSectionWrapper, hideSectionWrapper, groupSectionWrapper, sortOptions.getNativeElement().i, moveOptions.getNativeElement().i, pinOptions.getNativeElement().i, hideOptions.getNativeElement().i, groupOptions.getNativeElement().i, filterOptions.getNativeElement().i, summaryOptions.getNativeElement().i, buttonOptions.getNativeElement().i);
this._flushQueuedAttributes();
// supports themes or custom properties set in CSS
this._styling(this, this);
this.afterContentInit();
};
IgcGridColumnOptionsComponent.prototype.afterContentInit = function () {
this.i.notifySizeChanged();
};
Object.defineProperty(IgcGridColumnOptionsComponent, "observedAttributes", {
get: function () {
if (IgcGridColumnOptionsComponent._observedAttributesIgcGridColumnOptionsComponent == null) {
var names = getAllPropertyNames(IgcGridColumnOptionsComponent);
for (var i = 0; i < names.length; i++) {
names[i] = toSpinal(names[i]);
}
IgcGridColumnOptionsComponent._observedAttributesIgcGridColumnOptionsComponent = names;
}
return IgcGridColumnOptionsComponent._observedAttributesIgcGridColumnOptionsComponent;
},
enumerable: false,
configurable: true
});
IgcGridColumnOptionsComponent.register = function () {
if (!IgcGridColumnOptionsComponent._isElementRegistered) {
IgcGridColumnOptionsComponent._isElementRegistered = true;
RegisterElementHelper.registerElement(IgcGridColumnOptionsComponent.htmlTagName, IgcGridColumnOptionsComponent);
}
};
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "headerOptionsVisibleResolved", {
get: function () {
return this.i.cp;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "sortOptionsVisibleResolved", {
get: function () {
return this.i.c3;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "moveOptionsVisibleResolved", {
get: function () {
return this.i.cx;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "pinOptionsVisibleResolved", {
get: function () {
return this.i.c0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "hideOptionsVisibleResolved", {
get: function () {
return this.i.cu;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "groupOptionsVisibleResolved", {
get: function () {
return this.i.co;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "filterOptionsVisibleResolved", {
get: function () {
return this.i.cl;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "summaryOptionsVisibleResolved", {
get: function () {
return this.i.c6;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "columnNameTextStyle", {
/**
* Gets or sets the font to use for columnNames.
*/
get: function () {
if (this.i.cg == null) {
return null;
}
return this.i.cg.fontString;
},
set: function (v) {
var fi = new FontInfo();
fi.fontString = v;
this.i.cg = fi;
this._a("columnNameTextStyle", this.i.cg != null ? this.i.cg.fontString : "");
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "paddingLeft", {
/**
* Gets or sets the amount of left padding to use for the left edge of the component.
*/
get: function () {
return this.i.dh;
},
set: function (v) {
this.i.dh = +v;
this._a("paddingLeft", this.i.dh);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "paddingTop", {
/**
* Gets or sets the amount of left padding to use for the top edge of the component.
*/
get: function () {
return this.i.dj;
},
set: function (v) {
this.i.dj = +v;
this._a("paddingTop", this.i.dj);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "paddingRight", {
/**
* Gets or sets the amount of left padding to use for the right edge of the component.
*/
get: function () {
return this.i.di;
},
set: function (v) {
this.i.di = +v;
this._a("paddingRight", this.i.di);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "paddingBottom", {
/**
* Gets or sets the amount of left padding to use for the bottom edge of the component.
*/
get: function () {
return this.i.dg;
},
set: function (v) {
this.i.dg = +v;
this._a("paddingBottom", this.i.dg);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "headerVisible", {
get: function () {
return this.i.cr;
},
set: function (v) {
this.i.cr = ensureBool(v);
this._a("headerVisible", this.i.cr);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "sortOptionsVisible", {
get: function () {
return this.i.c2;
},
set: function (v) {
this.i.c2 = ensureBool(v);
this._a("sortOptionsVisible", this.i.c2);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "moveOptionsVisible", {
get: function () {
return this.i.cw;
},
set: function (v) {
this.i.cw = ensureBool(v);
this._a("moveOptionsVisible", this.i.cw);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "pinOptionsVisible", {
get: function () {
return this.i.cz;
},
set: function (v) {
this.i.cz = ensureBool(v);
this._a("pinOptionsVisible", this.i.cz);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "hideOptionsVisible", {
get: function () {
return this.i.ct;
},
set: function (v) {
this.i.ct = ensureBool(v);
this._a("hideOptionsVisible", this.i.ct);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "groupOptionsVisible", {
get: function () {
return this.i.cn;
},
set: function (v) {
this.i.cn = ensureBool(v);
this._a("groupOptionsVisible", this.i.cn);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "filterOptionsVisible", {
get: function () {
return this.i.ck;
},
set: function (v) {
this.i.ck = ensureBool(v);
this._a("filterOptionsVisible", this.i.ck);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "summaryOptionsVisible", {
get: function () {
return this.i.c5;
},
set: function (v) {
this.i.c5 = ensureBool(v);
this._a("summaryOptionsVisible", this.i.c5);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "sortHeaderCaption", {
get: function () {
return this.i.e4;
},
set: function (v) {
this.i.e4 = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "sortAscendingCaption", {
get: function () {
return this.i.ey;
},
set: function (v) {
this.i.ey = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "sortDescendingCaption", {
get: function () {
return this.i.e1;
},
set: function (v) {
this.i.e1 = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "moveHeaderCaption", {
get: function () {
return this.i.ea;
},
set: function (v) {
this.i.ea = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "moveLeftCaption", {
get: function () {
return this.i.ed;
},
set: function (v) {
this.i.ed = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "moveRightCaption", {
get: function () {
return this.i.eh;
},
set: function (v) {
this.i.eh = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "pinHeaderCaption", {
get: function () {
return this.i.eo;
},
set: function (v) {
this.i.eo = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "pinLeftCaption", {
get: function () {
return this.i.er;
},
set: function (v) {
this.i.er = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "pinRightCaption", {
get: function () {
return this.i.ev;
},
set: function (v) {
this.i.ev = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "applyFiltersButtonCaption", {
get: function () {
return this.i.dp;
},
set: function (v) {
this.i.dp = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "cancelFiltersButtonCaption", {
get: function () {
return this.i.ds;
},
set: function (v) {
this.i.ds = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "clearColumnFiltersCaption", {
get: function () {
return this.i.dv;
},
set: function (v) {
this.i.dv = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "summaryListDensity", {
/**
* Gets or sets the display density to use for the summary list menu.
*/
get: function () {
return this.i.summaryListDensity;
},
set: function (v) {
this.i.summaryListDensity = ensureEnum(ControlDisplayDensity_$type, v);
this._a("summaryListDensity", enumToString(ControlDisplayDensity_$type, this.i.summaryListDensity));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "actualSummaryListDensity", {
/**
* Gets the actual display density used for the summary list menu.
*/
get: function () {
return this.i.b8;
},
set: function (v) {
this.i.b8 = ensureEnum(ControlDisplayDensity_$type, v);
this._a("actualSummaryListDensity", enumToString(ControlDisplayDensity_$type, this.i.b8));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "filterListDensity", {
/**
* Gets or sets the display Density to use for the buttons in the component.
*/
get: function () {
return this.i.filterListDensity;
},
set: function (v) {
this.i.filterListDensity = ensureEnum(ControlDisplayDensity_$type, v);
this._a("filterListDensity", enumToString(ControlDisplayDensity_$type, this.i.filterListDensity));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "actualFilterListDensity", {
/**
* Gets the actual display filterListDensity to use for the component.
*/
get: function () {
return this.i.b7;
},
set: function (v) {
this.i.b7 = ensureEnum(ControlDisplayDensity_$type, v);
this._a("actualFilterListDensity", enumToString(ControlDisplayDensity_$type, this.i.b7));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "filterListPlaceholderText", {
get: function () {
return this.i.d1;
},
set: function (v) {
this.i.d1 = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "summaryListTextColor", {
/**
* Gets or sets the text color for the summary options menu.
*/
get: function () {
return brushToString(this.i.fm);
},
set: function (v) {
this.i.fm = stringToBrush(v);
this._a("summaryListTextColor", brushToString(this.i.fm));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "summaryListBackground", {
/**
* Gets or sets the background color for the summary options menu.
*/
get: function () {
return brushToString(this.i.fl);
},
set: function (v) {
this.i.fl = stringToBrush(v);
this._a("summaryListBackground", brushToString(this.i.fl));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "applyButtonClick", {
get: function () {
return this._applyButtonClick;
},
set: function (ev) {
var _this = this;
if (this._applyButtonClick_wrapped !== null) {
this.i.applyButtonClick = delegateRemove(this.i.applyButtonClick, this._applyButtonClick_wrapped);
this._applyButtonClick_wrapped = null;
this._applyButtonClick = null;
}
this._applyButtonClick = ev;
this._applyButtonClick_wrapped = function (o, e) {
var outerArgs = new IgcApplyButtonClickEventArgs();
outerArgs._provideImplementation(e);
if (_this.beforeApplyButtonClick) {
_this.beforeApplyButtonClick(_this, outerArgs);
}
if (_this._applyButtonClick) {
_this._applyButtonClick(_this, outerArgs);
}
};
this.i.applyButtonClick = delegateCombine(this.i.applyButtonClick, this._applyButtonClick_wrapped);
;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcGridColumnOptionsComponent.prototype, "cancelButtonClick", {
get: function () {
return this._cancelButtonClick;
},
set: function (ev) {
var _this = this;
if (this._cancelButtonClick_wrapped !== null) {
this.i.cancelButtonClick = delegateRemove(this.i.cancelButtonClick, this._cancelButtonClick_wrapped);
this._cancelButtonClick_wrapped = null;
this._cancelButtonClick = null;
}
this._cancelButtonClick = ev;
this._cancelButtonClick_wrapped = function (o, e) {
var outerArgs = new IgcCancelButtonClickEventArgs();
outerArgs._provideImplementation(e);
if (_this.beforeCancelButtonClick) {
_this.beforeCancelButtonClick(_this, outerArgs);
}
if (_this._cancelButtonClick) {
_this._cancelButtonClick(_this, outerArgs);
}
};
this.i.cancelButtonClick = delegateCombine(this.i.cancelButtonClick, this._cancelButtonClick_wrapped);
;
},
enumerable: false,
configurable: true
});
IgcGridColumnOptionsComponent._observedAttributesIgcGridColumnOptionsComponent = null;
IgcGridColumnOptionsComponent.htmlTagName = "igc-grid-column-options";
IgcGridColumnOptionsComponent._isElementRegistered = false;
return IgcGridColumnOptionsComponent;
}(IgcGridColumnOptionsBaseComponent));
export { IgcGridColumnOptionsComponent };