igniteui-webcomponents-grids
Version:
Ignite UI Web Components grid components.
507 lines (506 loc) • 21.3 kB
JavaScript
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";
export let IgcGridColumnOptionsComponent = /*@__PURE__*/ (() => {
class IgcGridColumnOptionsComponent extends IgcGridColumnOptionsBaseComponent {
set height(value) {
this._height = value;
this.style.height = value;
this.i.notifySizeChanged();
}
get height() {
return this._height;
}
set width(value) {
this._width = value;
this.style.width = value;
this.i.notifySizeChanged();
}
get width() {
return this._width;
}
constructor() {
super();
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(() => {
this.i.notifySizeChanged();
});
}
// supports angular themes or custom properties set in CSS
updateStyle() {
this._styling(this, this);
}
destroy() {
this._implementation.destroy();
this._webComponentRenderer.destroy();
}
createImplementation() {
return new GridColumnOptions();
}
get i() {
return this._implementation;
}
disconnectedCallback() {
this._disconnected = true;
}
connectedCallback() {
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();
}
afterContentInit() {
this.i.notifySizeChanged();
}
static get observedAttributes() {
if (IgcGridColumnOptionsComponent._observedAttributesIgcGridColumnOptionsComponent == null) {
let names = getAllPropertyNames(IgcGridColumnOptionsComponent);
for (let i = 0; i < names.length; i++) {
names[i] = toSpinal(names[i]);
}
IgcGridColumnOptionsComponent._observedAttributesIgcGridColumnOptionsComponent = names;
}
return IgcGridColumnOptionsComponent._observedAttributesIgcGridColumnOptionsComponent;
}
static register() {
if (!IgcGridColumnOptionsComponent._isElementRegistered) {
IgcGridColumnOptionsComponent._isElementRegistered = true;
RegisterElementHelper.registerElement(IgcGridColumnOptionsComponent.htmlTagName, IgcGridColumnOptionsComponent);
}
}
get headerOptionsVisibleResolved() {
return this.i.cp;
}
get sortOptionsVisibleResolved() {
return this.i.c3;
}
get moveOptionsVisibleResolved() {
return this.i.cx;
}
get pinOptionsVisibleResolved() {
return this.i.c0;
}
get hideOptionsVisibleResolved() {
return this.i.cu;
}
get groupOptionsVisibleResolved() {
return this.i.co;
}
get filterOptionsVisibleResolved() {
return this.i.cl;
}
get summaryOptionsVisibleResolved() {
return this.i.c6;
}
/**
* Gets or sets the font to use for columnNames.
*/
get columnNameTextStyle() {
if (this.i.cg == null) {
return null;
}
return this.i.cg.fontString;
}
set columnNameTextStyle(v) {
let fi = new FontInfo();
fi.fontString = v;
this.i.cg = fi;
this._a("columnNameTextStyle", this.i.cg != null ? this.i.cg.fontString : "");
}
/**
* Gets or sets the amount of left padding to use for the left edge of the component.
*/
get paddingLeft() {
return this.i.dh;
}
set paddingLeft(v) {
this.i.dh = +v;
this._a("paddingLeft", this.i.dh);
}
/**
* Gets or sets the amount of left padding to use for the top edge of the component.
*/
get paddingTop() {
return this.i.dj;
}
set paddingTop(v) {
this.i.dj = +v;
this._a("paddingTop", this.i.dj);
}
/**
* Gets or sets the amount of left padding to use for the right edge of the component.
*/
get paddingRight() {
return this.i.di;
}
set paddingRight(v) {
this.i.di = +v;
this._a("paddingRight", this.i.di);
}
/**
* Gets or sets the amount of left padding to use for the bottom edge of the component.
*/
get paddingBottom() {
return this.i.dg;
}
set paddingBottom(v) {
this.i.dg = +v;
this._a("paddingBottom", this.i.dg);
}
get headerVisible() {
return this.i.cr;
}
set headerVisible(v) {
this.i.cr = ensureBool(v);
this._a("headerVisible", this.i.cr);
}
get sortOptionsVisible() {
return this.i.c2;
}
set sortOptionsVisible(v) {
this.i.c2 = ensureBool(v);
this._a("sortOptionsVisible", this.i.c2);
}
get moveOptionsVisible() {
return this.i.cw;
}
set moveOptionsVisible(v) {
this.i.cw = ensureBool(v);
this._a("moveOptionsVisible", this.i.cw);
}
get pinOptionsVisible() {
return this.i.cz;
}
set pinOptionsVisible(v) {
this.i.cz = ensureBool(v);
this._a("pinOptionsVisible", this.i.cz);
}
get hideOptionsVisible() {
return this.i.ct;
}
set hideOptionsVisible(v) {
this.i.ct = ensureBool(v);
this._a("hideOptionsVisible", this.i.ct);
}
get groupOptionsVisible() {
return this.i.cn;
}
set groupOptionsVisible(v) {
this.i.cn = ensureBool(v);
this._a("groupOptionsVisible", this.i.cn);
}
get filterOptionsVisible() {
return this.i.ck;
}
set filterOptionsVisible(v) {
this.i.ck = ensureBool(v);
this._a("filterOptionsVisible", this.i.ck);
}
get summaryOptionsVisible() {
return this.i.c5;
}
set summaryOptionsVisible(v) {
this.i.c5 = ensureBool(v);
this._a("summaryOptionsVisible", this.i.c5);
}
get sortHeaderCaption() {
return this.i.e4;
}
set sortHeaderCaption(v) {
this.i.e4 = v;
}
get sortAscendingCaption() {
return this.i.ey;
}
set sortAscendingCaption(v) {
this.i.ey = v;
}
get sortDescendingCaption() {
return this.i.e1;
}
set sortDescendingCaption(v) {
this.i.e1 = v;
}
get moveHeaderCaption() {
return this.i.ea;
}
set moveHeaderCaption(v) {
this.i.ea = v;
}
get moveLeftCaption() {
return this.i.ed;
}
set moveLeftCaption(v) {
this.i.ed = v;
}
get moveRightCaption() {
return this.i.eh;
}
set moveRightCaption(v) {
this.i.eh = v;
}
get pinHeaderCaption() {
return this.i.eo;
}
set pinHeaderCaption(v) {
this.i.eo = v;
}
get pinLeftCaption() {
return this.i.er;
}
set pinLeftCaption(v) {
this.i.er = v;
}
get pinRightCaption() {
return this.i.ev;
}
set pinRightCaption(v) {
this.i.ev = v;
}
get applyFiltersButtonCaption() {
return this.i.dp;
}
set applyFiltersButtonCaption(v) {
this.i.dp = v;
}
get cancelFiltersButtonCaption() {
return this.i.ds;
}
set cancelFiltersButtonCaption(v) {
this.i.ds = v;
}
get clearColumnFiltersCaption() {
return this.i.dv;
}
set clearColumnFiltersCaption(v) {
this.i.dv = v;
}
/**
* Gets or sets the display density to use for the summary list menu.
*/
get summaryListDensity() {
return this.i.summaryListDensity;
}
set summaryListDensity(v) {
this.i.summaryListDensity = ensureEnum(ControlDisplayDensity_$type, v);
this._a("summaryListDensity", enumToString(ControlDisplayDensity_$type, this.i.summaryListDensity));
}
/**
* Gets the actual display density used for the summary list menu.
*/
get actualSummaryListDensity() {
return this.i.b8;
}
set actualSummaryListDensity(v) {
this.i.b8 = ensureEnum(ControlDisplayDensity_$type, v);
this._a("actualSummaryListDensity", enumToString(ControlDisplayDensity_$type, this.i.b8));
}
/**
* Gets or sets the display Density to use for the buttons in the component.
*/
get filterListDensity() {
return this.i.filterListDensity;
}
set filterListDensity(v) {
this.i.filterListDensity = ensureEnum(ControlDisplayDensity_$type, v);
this._a("filterListDensity", enumToString(ControlDisplayDensity_$type, this.i.filterListDensity));
}
/**
* Gets the actual display filterListDensity to use for the component.
*/
get actualFilterListDensity() {
return this.i.b7;
}
set actualFilterListDensity(v) {
this.i.b7 = ensureEnum(ControlDisplayDensity_$type, v);
this._a("actualFilterListDensity", enumToString(ControlDisplayDensity_$type, this.i.b7));
}
get filterListPlaceholderText() {
return this.i.d1;
}
set filterListPlaceholderText(v) {
this.i.d1 = v;
}
/**
* Gets or sets the text color for the summary options menu.
*/
get summaryListTextColor() {
return brushToString(this.i.fm);
}
set summaryListTextColor(v) {
this.i.fm = stringToBrush(v);
this._a("summaryListTextColor", brushToString(this.i.fm));
}
/**
* Gets or sets the background color for the summary options menu.
*/
get summaryListBackground() {
return brushToString(this.i.fl);
}
set summaryListBackground(v) {
this.i.fl = stringToBrush(v);
this._a("summaryListBackground", brushToString(this.i.fl));
}
get applyButtonClick() {
return this._applyButtonClick;
}
set applyButtonClick(ev) {
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 = (o, e) => {
let 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);
;
}
get cancelButtonClick() {
return this._cancelButtonClick;
}
set cancelButtonClick(ev) {
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 = (o, e) => {
let 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);
;
}
}
IgcGridColumnOptionsComponent._observedAttributesIgcGridColumnOptionsComponent = null;
IgcGridColumnOptionsComponent.htmlTagName = "igc-grid-column-options";
IgcGridColumnOptionsComponent._isElementRegistered = false;
return IgcGridColumnOptionsComponent;
})();