UNPKG

igniteui-webcomponents-grids

Version:

Ignite UI Web Components grid components.

891 lines (886 loc) 32.8 kB
import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core"; import { CellContentHorizontalAlignment_$type } from "./CellContentHorizontalAlignment"; import { CellContentVerticalAlignment_$type } from "./CellContentVerticalAlignment"; import { TextCellLineBreakMode_$type } from "./TextCellLineBreakMode"; import { IgcDataBindingEventArgs } from "./igc-data-binding-event-args"; import { IgcCellStyleRequestedEventArgs } from "./igc-cell-style-requested-event-args"; import { TypeRegistrar } from "igniteui-webcomponents-core"; import { ensureBool, NamePatcher, getAllPropertyNames, fromSpinal, toSpinal, brushToString, stringToBrush, ensureEnum, enumToString, initializePropertiesFromCss, CollectionAdapter } from "igniteui-webcomponents-core"; import { FontInfo } from "igniteui-webcomponents-core"; import { ColumnPropertyUpdatingAnimationMode } from "./ColumnPropertyUpdatingAnimationMode"; import { IgcHTMLElement } from "igniteui-webcomponents-core"; import { IgcGridConditionalStyleCollection } from './igc-grid-conditional-style-collection'; import { IgcGridConditionalStyleComponent } from './igc-grid-conditional-style-component'; import { NotifyCollectionChangedAction } from "igniteui-webcomponents-core"; /** * Base class for various definition types for the grid. */ export let IgcDefinitionBaseComponent = /*@__PURE__*/ (() => { class IgcDefinitionBaseComponent extends IgcHTMLElement { createImplementation() { return null; } /** * @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); } onImplementationCreated() { } _initializeAdapters() { if (!this.__observingChildren) { this.__observingChildren = true; let mut = new MutationObserver((list) => { for (var mutation of list) { if (mutation.type == 'childList') { if (this.updateContentChildren) { this.updateContentChildren(); } else if (this._initializeAdapters) { this.initializeAdapters(); } } } }); mut.observe(this, { childList: true }); } this._conditionalStylesAdapter = new CollectionAdapter(this.contentConditionalStyles, this.i.conditionalStyles, this.actualConditionalStyles, (c) => c.i, (i) => { if (this._initializeElement) { this._initializeElement(i); } }, (i) => { if (this._destroyElement) { this._destroyElement(i); } }); if (super["_initializeAdapters"]) { super["_initializeAdapters"](); } } _updateAdapters() { if (super["_updateAdapters"]) { super["_updateAdapters"](); } this.contentConditionalStyles.length = 0; for (var i = 0; i < this.children.length; i++) { if (this.children[i] instanceof IgcGridConditionalStyleComponent) { this.contentConditionalStyles.push(this.children[i]); } } if (this._conditionalStylesAdapter != null) { this._conditionalStylesAdapter.notifyContentChanged(); } } constructor() { super(); this._renderer = null; this.__p = null; this._hasUserValues = new Set(); this._stylingContainer = null; this._stylingParent = null; this._inStyling = false; this._settingAttributes = false; this._attached = false; this._queuedSetAttributes = []; this._updatingFromAttribute = false; this._conditionalStyles = null; this._dataBinding = null; this._dataBinding_wrapped = null; this._dataBound = null; this._dataBound_wrapped = null; this._cellStyleKeyRequested = null; this._cellStyleKeyRequested_wrapped = null; if (this._styling) { NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this)); } this._implementation = this.createImplementation(); this._implementation.externalObject = this; this.onImplementationCreated(); if (this._initializeAdapters) { this._initializeAdapters(); } } _provideRenderer(renderer) { this._renderer = renderer; } get hasUserValues() { return this._hasUserValues; } __m(propertyName) { if (!this._inStyling) { this._hasUserValues.add(propertyName); } } _styling(container, component, parent) { this._stylingContainer = container; this._stylingParent = component; if (this._inStyling) { return; } this._inStyling = true; let grid = component._grid; var prev; if (grid) { prev = grid.columnPropertyUpdatingAnimationMode; grid.columnPropertyUpdatingAnimationMode = ColumnPropertyUpdatingAnimationMode.None; } let genericPrefix = ""; let typeName = this.i.$type.name; let lowerTypeName = typeName.toLowerCase(); if (lowerTypeName.indexOf("column") >= 0) { genericPrefix = "column"; } else if (lowerTypeName.indexOf("sectionheader") >= 0) { genericPrefix = "section-header"; } else if (lowerTypeName.indexOf("sectionfooter") >= 0) { genericPrefix = "section-footer"; } else if (lowerTypeName.indexOf("rowseparator") >= 0) { genericPrefix = "row-separator"; } else if (lowerTypeName.indexOf("summaryrowroot") >= 0) { genericPrefix = "summary-row-root"; } else if (lowerTypeName.indexOf("summaryrowsection") >= 0) { genericPrefix = "summary-row-section"; } else if (lowerTypeName.indexOf("headerseparator") >= 0) { genericPrefix = "header-separator"; } else { genericPrefix = "header"; } let additionalPrefixes = []; let prefix = toSpinal(typeName); additionalPrefixes.push(prefix + "-"); if (parent) { let parentTypeName = parent.i.$type.name; if (parentTypeName == "Grid") { parentTypeName = "DataGrid"; } let parentPrefix = toSpinal(parentTypeName); additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-"); additionalPrefixes.push(parentPrefix + "-" + prefix + "-"); } initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes); if (grid) { grid.columnPropertyUpdatingAnimationMode = prev; } this._inStyling = false; } _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; } 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 (IgcDefinitionBaseComponent._observedAttributesIgcDefinitionBaseComponent == null) { let names = getAllPropertyNames(IgcDefinitionBaseComponent); for (let i = 0; i < names.length; i++) { names[i] = toSpinal(names[i]); } IgcDefinitionBaseComponent._observedAttributesIgcDefinitionBaseComponent = names; } return IgcDefinitionBaseComponent._observedAttributesIgcDefinitionBaseComponent; } attributeChangedCallback(name, oldValue, newValue) { if (this._settingAttributes) { return; } let setName = fromSpinal(name); this._updatingFromAttribute = true; this[setName] = newValue; this._updatingFromAttribute = false; } /** * Gets or sets the background color to use. */ get background() { return brushToString(this.i.ge); } set background(v) { this.i.ge = stringToBrush(v); this._a("background", brushToString(this.i.ge)); } get actualConditionalStyles() { if (!this._actualConditionalStyles) { this._actualConditionalStyles = []; } return this._actualConditionalStyles; } get contentConditionalStyles() { if (!this._contentConditionalStyles) { this._contentConditionalStyles = []; } return this._contentConditionalStyles; } /** * Gets the style key information to use for judging when a property will be set later by a style */ get conditionalStyles() { if (this._conditionalStyles === null) { let coll = new IgcGridConditionalStyleCollection(); let inner = coll._innerColl; this._conditionalStyles = coll; inner.addListener((sender, e) => { switch (e.action) { case NotifyCollectionChangedAction.Add: this._conditionalStylesAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0)); break; case NotifyCollectionChangedAction.Remove: this._conditionalStylesAdapter.removeManualItemAt(e.oldStartingIndex); break; case NotifyCollectionChangedAction.Replace: this._conditionalStylesAdapter.removeManualItemAt(e.oldStartingIndex); this._conditionalStylesAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0)); break; case NotifyCollectionChangedAction.Reset: this._conditionalStylesAdapter.clearManualItems(); break; } }); ; } return this._conditionalStyles; } /** * Gets or sets the background color to use. */ get border() { return brushToString(this.i.gh); } set border(v) { this.i.gh = stringToBrush(v); this._a("border", brushToString(this.i.gh)); } /** * Gets or sets the background color to use. */ get activationBorder() { return brushToString(this.i.f3); } set activationBorder(v) { this.i.f3 = stringToBrush(v); this._a("activationBorder", brushToString(this.i.f3)); } /** * Gets or sets the error border color to use. */ get errorBorder() { return brushToString(this.i.gi); } set errorBorder(v) { this.i.gi = stringToBrush(v); this._a("errorBorder", brushToString(this.i.gi)); } /** * Gets the actual border color that will be used. */ get actualBorder() { return brushToString(this.i.f8); } set actualBorder(v) { this.i.f8 = stringToBrush(v); this._a("actualBorder", brushToString(this.i.f8)); } /** * Gets or sets the amount of left border to use for the cell content for this column. */ get borderLeftWidth() { return this.i.cc; } set borderLeftWidth(v) { this.i.cc = +v; this._a("borderLeftWidth", this.i.cc); } /** * Gets or sets the amount of top border to use for the cell content for this column. */ get borderTopWidth() { return this.i.ce; } set borderTopWidth(v) { this.i.ce = +v; this._a("borderTopWidth", this.i.ce); } /** * Gets or sets the amount of right border to use for the cell content of this column. */ get borderRightWidth() { return this.i.cd; } set borderRightWidth(v) { this.i.cd = +v; this._a("borderRightWidth", this.i.cd); } /** * Gets or sets the amount of bottom border to use for the cell content of this column. */ get borderBottomWidth() { return this.i.cb; } set borderBottomWidth(v) { this.i.cb = +v; this._a("borderBottomWidth", this.i.cb); } /** * Gets or sets the amount of left activation border to use for the cell content for this column. */ get activationBorderLeftWidth() { return this.i.b4; } set activationBorderLeftWidth(v) { this.i.b4 = +v; this._a("activationBorderLeftWidth", this.i.b4); } /** * Gets or sets the amount of top activation border to use for the cell content for this column. */ get activationBorderTopWidth() { return this.i.b6; } set activationBorderTopWidth(v) { this.i.b6 = +v; this._a("activationBorderTopWidth", this.i.b6); } /** * Gets or sets the amount of right activation border to use for the cell content of this column. */ get activationBorderRightWidth() { return this.i.b5; } set activationBorderRightWidth(v) { this.i.b5 = +v; this._a("activationBorderRightWidth", this.i.b5); } /** * Gets or sets the amount of bottom activation border to use for the cell content of this column. */ get activationBorderBottomWidth() { return this.i.b3; } set activationBorderBottomWidth(v) { this.i.b3 = +v; this._a("activationBorderBottomWidth", this.i.b3); } get errorBorderLeftWidth() { return this.i.cg; } set errorBorderLeftWidth(v) { this.i.cg = +v; this._a("errorBorderLeftWidth", this.i.cg); } get errorBorderTopWidth() { return this.i.ci; } set errorBorderTopWidth(v) { this.i.ci = +v; this._a("errorBorderTopWidth", this.i.ci); } get errorBorderRightWidth() { return this.i.ch; } set errorBorderRightWidth(v) { this.i.ch = +v; this._a("errorBorderRightWidth", this.i.ch); } get errorBorderBottomWidth() { return this.i.cf; } set errorBorderBottomWidth(v) { this.i.cf = +v; this._a("errorBorderBottomWidth", this.i.cf); } /** * Gets the actual background color that will be used. */ get actualBackground() { return brushToString(this.i.f5); } set actualBackground(v) { this.i.f5 = stringToBrush(v); this._a("actualBackground", brushToString(this.i.f5)); } /** * Gets the actual background color that will be used. */ get actualActivationBorder() { return brushToString(this.i.f4); } set actualActivationBorder(v) { this.i.f4 = stringToBrush(v); this._a("actualActivationBorder", brushToString(this.i.f4)); } /** * Gets the actual error border color that will be used. */ get actualErrorBorder() { return brushToString(this.i.f9); } set actualErrorBorder(v) { this.i.f9 = stringToBrush(v); this._a("actualErrorBorder", brushToString(this.i.f9)); } /** * Gets or sets the background color for content that sticks to the top of the grid. */ get stickyRowBackground() { return brushToString(this.i.gw); } set stickyRowBackground(v) { this.i.gw = stringToBrush(v); this._a("stickyRowBackground", brushToString(this.i.gw)); } /** * Gets the actual background color for content that sticks to the top of the grid. */ get actualStickyRowBackground() { return brushToString(this.i.gc); } set actualStickyRowBackground(v) { this.i.gc = stringToBrush(v); this._a("actualStickyRowBackground", brushToString(this.i.gc)); } /** * Gets or sets the background color for cells belonging to rows marked as pinned. */ get pinnedRowBackground() { return brushToString(this.i.gv); } set pinnedRowBackground(v) { this.i.gv = stringToBrush(v); this._a("pinnedRowBackground", brushToString(this.i.gv)); } /** * Gets the actual background color for cells belonging to rows marked as pinned. */ get actualPinnedRowBackground() { return brushToString(this.i.gb); } set actualPinnedRowBackground(v) { this.i.gb = stringToBrush(v); this._a("actualPinnedRowBackground", brushToString(this.i.gb)); } /** * Gets or sets the color for the last row in the sticky row area. */ get lastStickyRowBackground() { return brushToString(this.i.gu); } set lastStickyRowBackground(v) { this.i.gu = stringToBrush(v); this._a("lastStickyRowBackground", brushToString(this.i.gu)); } /** * Gets the actual color for the last row in the sticky row area. */ get actualLastStickyRowBackground() { return brushToString(this.i.ga); } set actualLastStickyRowBackground(v) { this.i.ga = stringToBrush(v); this._a("actualLastStickyRowBackground", brushToString(this.i.ga)); } /** * Gets or sets the opacity of the content. */ get contentOpacity() { return this.i.bh; } set contentOpacity(v) { this.i.bh = +v; this._a("contentOpacity", this.i.bh); } /** * Gets or sets the horizontal alignment to use for the cell content. */ get horizontalAlignment() { return this.i.g; } set horizontalAlignment(v) { this.i.g = ensureEnum(CellContentHorizontalAlignment_$type, v); this._a("horizontalAlignment", enumToString(CellContentHorizontalAlignment_$type, this.i.g)); } /** * Gets or sets the vertical alignment to use for the cell content. */ get verticalAlignment() { return this.i.l; } set verticalAlignment(v) { this.i.l = ensureEnum(CellContentVerticalAlignment_$type, v); this._a("verticalAlignment", enumToString(CellContentVerticalAlignment_$type, this.i.l)); } /** * Gets or sets the line breaking mode to use if text is present in the cell. */ get lineBreakMode() { return this.i.ac; } set lineBreakMode(v) { this.i.ac = ensureEnum(TextCellLineBreakMode_$type, v); this._a("lineBreakMode", enumToString(TextCellLineBreakMode_$type, this.i.ac)); } /** * Gets the actual line break mode which will be used if text is present in the cell. */ get actualLineBreakMode() { return this.i.ab; } set actualLineBreakMode(v) { this.i.ab = ensureEnum(TextCellLineBreakMode_$type, v); this._a("actualLineBreakMode", enumToString(TextCellLineBreakMode_$type, this.i.ab)); } /** * Gets or sets the color to use for displaying text. */ get textColor() { return brushToString(this.i.gx); } set textColor(v) { this.i.gx = stringToBrush(v); this._a("textColor", brushToString(this.i.gx)); } /** * Gets the actual color used for displaying text. */ get actualTextColor() { return brushToString(this.i.gd); } set actualTextColor(v) { this.i.gd = stringToBrush(v); this._a("actualTextColor", brushToString(this.i.gd)); } /** * Gets or sets whether the bar is supported. */ get isBarSupported() { return this.i.ar; } set isBarSupported(v) { this.i.ar = ensureBool(v); this._a("isBarSupported", this.i.ar); } /** * Gets or sets the color to use for value bars. */ get barBackground() { return brushToString(this.i.gf); } set barBackground(v) { this.i.gf = stringToBrush(v); this._a("barBackground", brushToString(this.i.gf)); } /** * Gets the actual color used for value bars. */ get actualBarBackground() { return brushToString(this.i.f6); } set actualBarBackground(v) { this.i.f6 = stringToBrush(v); this._a("actualBarBackground", brushToString(this.i.f6)); } /** * Gets or sets the Outline color to use for value bars. */ get barOutline() { return brushToString(this.i.gg); } set barOutline(v) { this.i.gg = stringToBrush(v); this._a("barOutline", brushToString(this.i.gg)); } /** * Gets the actual Outline color used for value bars. */ get actualBarOutline() { return brushToString(this.i.f7); } set actualBarOutline(v) { this.i.f7 = stringToBrush(v); this._a("actualBarOutline", brushToString(this.i.f7)); } /** * Gets or sets the stroke thickness to use for value bars. */ get barStrokeThickness() { return this.i.ca; } set barStrokeThickness(v) { this.i.ca = +v; this._a("barStrokeThickness", this.i.ca); } /** * Gets the actual stroke thickness used for value bars. */ get actualBarStrokeThickness() { return this.i.b8; } set actualBarStrokeThickness(v) { this.i.b8 = +v; this._a("actualBarStrokeThickness", this.i.b8); } /** * Gets or sets the stroke thickness to use for value bars. */ get barCornerRadius() { return this.i.b9; } set barCornerRadius(v) { this.i.b9 = +v; this._a("barCornerRadius", this.i.b9); } /** * Gets the actual stroke thickness used for value bars. */ get actualBarCornerRadius() { return this.i.b7; } set actualBarCornerRadius(v) { this.i.b7 = +v; this._a("actualBarCornerRadius", this.i.b7); } /** * Gets or sets the color to use for displaying text. */ get pinnedRowOpacity() { return this.i.bm; } set pinnedRowOpacity(v) { this.i.bm = +v; this._a("pinnedRowOpacity", this.i.bm); } /** * Gets or sets the color to use for displaying text. */ get actualPinnedRowOpacity() { return this.i.bf; } set actualPinnedRowOpacity(v) { this.i.bf = +v; this._a("actualPinnedRowOpacity", this.i.bf); } get textStyle() { if (this.i.textStyle == null) { return null; } return this.i.textStyle.fontString; } set textStyle(v) { let fi = new FontInfo(); fi.fontString = v; this.i.textStyle = fi; this._a("textStyle", this.i.textStyle != null ? this.i.textStyle.fontString : ""); } get isBarRequired() { return this.i.aq; } findByName(name) { if (this.findEphemera) { if (name && name.indexOf("@@e:") == 0) { return this.findEphemera(name); } } if (this.conditionalStyles != null && this.conditionalStyles.findByName && this.conditionalStyles.findByName(name)) { return this.conditionalStyles.findByName(name); } return null; } transitionStyleOut(style) { this.i.e3((style == null ? null : style.i)); } transitionStyleIn(style) { this.i.e2((style == null ? null : style.i)); } isStyleTransitioningOut(style) { let iv = this.i.as((style == null ? null : style.i)); return (iv); } setNamedValue(valueName, animationType, value) { this.i.e1(valueName, (animationType == null ? null : animationType), value); } /** * Returns if this definition has named value. */ hasNamedValues() { let iv = this.i.ap(); return (iv); } /** * Returns if this definition has a named value with a given name. * @param valueName * The named value name to check for. */ hasNamedValue(valueName) { let iv = this.i.ao(valueName); return (iv); } /** * Removes the named value from this definition by name. * @param valueName * The named value name to remove. */ removeNamedValue(valueName) { this.i.ew(valueName); } /** * Gets the value for a named value from this definition. * @param valueName * The named value name to check for. */ getNamedValue(valueName) { let iv = this.i.co(valueName); return (iv); } /** * Called when a cell is data binding. */ get dataBinding() { return this._dataBinding; } set dataBinding(ev) { if (this._dataBinding_wrapped !== null) { this.i.dataBinding = delegateRemove(this.i.dataBinding, this._dataBinding_wrapped); this._dataBinding_wrapped = null; this._dataBinding = null; } this._dataBinding = ev; this._dataBinding_wrapped = (o, e) => { let outerArgs = new IgcDataBindingEventArgs(); outerArgs._provideImplementation(e); if (this.beforeDataBinding) { this.beforeDataBinding(this, outerArgs); } if (this._dataBinding) { this._dataBinding(this, outerArgs); } }; this.i.dataBinding = delegateCombine(this.i.dataBinding, this._dataBinding_wrapped); ; } /** * Called when a cell has been data bound. */ get dataBound() { return this._dataBound; } set dataBound(ev) { if (this._dataBound_wrapped !== null) { this.i.dataBound = delegateRemove(this.i.dataBound, this._dataBound_wrapped); this._dataBound_wrapped = null; this._dataBound = null; } this._dataBound = ev; this._dataBound_wrapped = (o, e) => { let outerArgs = new IgcDataBindingEventArgs(); outerArgs._provideImplementation(e); if (this.beforeDataBound) { this.beforeDataBound(this, outerArgs); } if (this._dataBound) { this._dataBound(this, outerArgs); } }; this.i.dataBound = delegateCombine(this.i.dataBound, this._dataBound_wrapped); ; } /** * Called when the style key for a cell is needed. Used for recycling the cell. */ get cellStyleKeyRequested() { return this._cellStyleKeyRequested; } set cellStyleKeyRequested(ev) { if (this._cellStyleKeyRequested_wrapped !== null) { this.i.cellStyleKeyRequested = delegateRemove(this.i.cellStyleKeyRequested, this._cellStyleKeyRequested_wrapped); this._cellStyleKeyRequested_wrapped = null; this._cellStyleKeyRequested = null; } this._cellStyleKeyRequested = ev; this._cellStyleKeyRequested_wrapped = (o, e) => { let outerArgs = new IgcCellStyleRequestedEventArgs(); outerArgs._provideImplementation(e); if (this.beforeCellStyleKeyRequested) { this.beforeCellStyleKeyRequested(this, outerArgs); } if (this._cellStyleKeyRequested) { this._cellStyleKeyRequested(this, outerArgs); } }; this.i.cellStyleKeyRequested = delegateCombine(this.i.cellStyleKeyRequested, this._cellStyleKeyRequested_wrapped); ; } } IgcDefinitionBaseComponent._observedAttributesIgcDefinitionBaseComponent = null; return IgcDefinitionBaseComponent; })();