igniteui-webcomponents-grids
Version:
Ignite UI Web Components grid components.
301 lines (300 loc) • 12.1 kB
JavaScript
import { __extends } from "tslib";
import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core";
import { IgcTemplateCellUpdatingEventArgs } from "./igc-template-cell-updating-event-args";
import { IgcDataGridColumnComponent } from "./igc-data-grid-column-component";
import { TemplateColumn } from "./TemplateColumn";
import { getAllPropertyNames, toSpinal } from "igniteui-webcomponents-core";
import { RegisterElementHelper } from "igniteui-webcomponents-core";
/**
* A column with customizable content.
*/
var IgcTemplateColumnComponent = /** @class */ /*@__PURE__*/ (function (_super) {
__extends(IgcTemplateColumnComponent, _super);
function IgcTemplateColumnComponent() {
var _this = _super.call(this) || this;
_this._templateCells = [];
_this._activeCellContent = new Map();
_this._activeCellContentElements = new Map();
_this._templateCellInitialData = new Map();
_this._templateCellInitialTemplate = new Map();
_this._currCellInfo = null;
_this._template = null;
_this._templateSelector = null;
_this._hasSelector = false;
_this._selectorStyles = new Map();
_this._selectorTemplates = new Map();
_this._keyCount = 0;
_this._cellUpdating = null;
_this._cellUpdating_wrapped = null;
_this.cellInfoChanged = _this.cellInfoChanged.bind(_this);
return _this;
}
IgcTemplateColumnComponent.prototype.createImplementation = function () {
return new TemplateColumn();
};
Object.defineProperty(IgcTemplateColumnComponent.prototype, "i", {
get: function () {
return this._implementation;
},
enumerable: false,
configurable: true
});
IgcTemplateColumnComponent.prototype.beforeStyleKeyRequested = function (s, e) {
if (this.template == null && this.templateSelector == null) {
return;
}
if (!this._hasSelector) {
return;
}
var selector = this._templateSelector;
if (selector == null) {
return;
}
var actualTemplate = this._templateSelector(this, e.resolvedValue);
if (actualTemplate == null) {
return;
}
var key;
if (this._selectorStyles.has(actualTemplate)) {
key = this._selectorStyles.get(actualTemplate);
e.styleKey = key;
}
else {
if (this._selectorStyles.size < 1000) {
key = "template_" + this.field + "_" + this._keyCount;
this._selectorStyles.set(actualTemplate, key);
this._selectorTemplates[key] = actualTemplate;
this._keyCount++;
e.styleKey = key;
}
}
};
IgcTemplateColumnComponent.prototype.beforeCellUpdating = function (s, e) {
if (this.template == null && this.templateSelector == null) {
return;
}
var info = e.cellInfo;
var existingView;
if (!info.isContentDirty &&
!info.isDataDirty &&
!info.isSizeDirty) {
return;
}
var actualTemplate = this._template;
if (this._hasSelector) {
if (this._selectorTemplates.has(info.styleKey)) {
actualTemplate = this._selectorTemplates.get(info.styleKey);
}
}
var internalContent = e.content;
if (internalContent == null) {
return;
}
if (this._activeCellContent.has(internalContent)) {
var templateView = this._activeCellContent.get(internalContent);
templateView.context = info;
this.updateCellInfo(info);
if (templateView.template != actualTemplate) {
templateView.template = actualTemplate;
}
else {
existingView = templateView;
}
}
else {
this._templateCells.push(internalContent);
this._templateCellInitialData.set(internalContent, info);
this.updateCellInfo(info);
this._templateCellInitialTemplate.set(internalContent, actualTemplate);
this.updateTemplates();
}
};
IgcTemplateColumnComponent.prototype.updateCellInfo = function (info) {
var oldInfo = this._currCellInfo;
if (oldInfo != null) {
oldInfo.removeOnChangedListener(this.cellInfoChanged);
}
this._currCellInfo = info;
if (this._currCellInfo != null) {
this._currCellInfo.addOnChangedListener(this.cellInfoChanged);
}
};
IgcTemplateColumnComponent.prototype.cellInfoChanged = function () {
this.updateTemplates();
};
IgcTemplateColumnComponent.prototype.dummyStyleKeyRequested = function (s, e) {
};
IgcTemplateColumnComponent.prototype.dummyCellUpdating = function (s, e) {
};
Object.defineProperty(IgcTemplateColumnComponent.prototype, "hasTemplate", {
get: function () {
return this._template != null || this._templateSelector != null;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcTemplateColumnComponent.prototype, "template", {
get: function () {
return this._template;
},
set: function (value) {
var oldValue = this.hasTemplate;
this._template = value;
this.ensureTemplateEvents(oldValue);
this.onTemplateChanged();
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcTemplateColumnComponent.prototype, "templateSelector", {
get: function () {
return this._templateSelector;
},
set: function (value) {
var oldValue = this.hasTemplate;
this._templateSelector = value;
this._hasSelector = this._templateSelector != null;
this.ensureTemplateEvents(oldValue);
this.onTemplateChanged();
},
enumerable: false,
configurable: true
});
IgcTemplateColumnComponent.prototype.onTemplateChanged = function () {
this._selectorStyles.clear();
this._selectorTemplates.clear();
this._keyCount = 0;
};
IgcTemplateColumnComponent.prototype.updateTemplates = function () {
var templates = [];
if (this._templateCells && this._templateCells.length > 0) {
for (var i = 0; i < this._templateCells.length; i++) {
var t = this._templateCells[i];
if (this._activeCellContentElements.has(t)) {
templates.push(this._activeCellContentElements.get(t));
}
else {
var templ = document.createElement("igc-template-content");
templ.owner = this._templateCells[i];
this._activeCellContentElements.set(t, templ);
this._activeCellContent.set(t, templ);
templates.push(templ);
t.appendChild(templ);
if (this._templateCellInitialTemplate.has(templ.owner)) {
templ.template = this._templateCellInitialTemplate.get(templ.owner);
this._templateCellInitialTemplate.delete(templ.owner);
}
if (this._templateCellInitialData.has(templ.owner)) {
templ.context = this._templateCellInitialData.get(templ.owner);
this._templateCellInitialTemplate.delete(templ.owner);
}
}
}
}
};
IgcTemplateColumnComponent.prototype.ensureTemplateEvents = function (oldValue) {
if (this.hasTemplate && !oldValue) {
if (!this.cellStyleKeyRequested) {
this.cellStyleKeyRequested = this.dummyStyleKeyRequested;
this._styleKeyRequested = null;
}
if (!this.cellUpdating) {
this.cellUpdating = this.dummyCellUpdating;
this._cellUpdating = null;
}
}
if (!this.hasTemplate && oldValue) {
if (!this.cellStyleKeyRequested) {
this.cellStyleKeyRequested = null;
}
if (!this.cellUpdating) {
this.cellUpdating = null;
}
}
};
IgcTemplateColumnComponent.prototype.connectedCallback = function () {
if (_super.prototype["connectedCallback"]) {
_super.prototype["connectedCallback"].call(this);
}
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();
}
};
IgcTemplateColumnComponent.prototype.disconnectedCallback = function () {
if (_super.prototype["disconnectedCallback"]) {
_super.prototype["disconnectedCallback"].call(this);
}
if (this.i.disconnectedCallback) {
this.i.disconnectedCallback();
}
if (this._attached) {
this._attached = false;
}
};
Object.defineProperty(IgcTemplateColumnComponent, "observedAttributes", {
get: function () {
if (IgcTemplateColumnComponent._observedAttributesIgcTemplateColumnComponent == null) {
var names = getAllPropertyNames(IgcTemplateColumnComponent);
for (var i = 0; i < names.length; i++) {
names[i] = toSpinal(names[i]);
}
IgcTemplateColumnComponent._observedAttributesIgcTemplateColumnComponent = names;
}
return IgcTemplateColumnComponent._observedAttributesIgcTemplateColumnComponent;
},
enumerable: false,
configurable: true
});
IgcTemplateColumnComponent.register = function () {
if (!IgcTemplateColumnComponent._isElementRegistered) {
IgcTemplateColumnComponent._isElementRegistered = true;
RegisterElementHelper.registerElement(IgcTemplateColumnComponent.htmlTagName, IgcTemplateColumnComponent);
}
};
Object.defineProperty(IgcTemplateColumnComponent.prototype, "cellUpdating", {
/**
* Called when the cell content is being created or updated.
*/
get: function () {
return this._cellUpdating;
},
set: function (ev) {
var _this = this;
if (this._cellUpdating_wrapped !== null) {
this.i.cellUpdating = delegateRemove(this.i.cellUpdating, this._cellUpdating_wrapped);
this._cellUpdating_wrapped = null;
this._cellUpdating = null;
}
this._cellUpdating = ev;
this._cellUpdating_wrapped = function (o, e) {
var outerArgs = new IgcTemplateCellUpdatingEventArgs();
outerArgs._provideImplementation(e);
if (_this.beforeCellUpdating) {
_this.beforeCellUpdating(_this, outerArgs);
}
if (_this._cellUpdating) {
_this._cellUpdating(_this, outerArgs);
}
};
this.i.cellUpdating = delegateCombine(this.i.cellUpdating, this._cellUpdating_wrapped);
;
},
enumerable: false,
configurable: true
});
IgcTemplateColumnComponent._observedAttributesIgcTemplateColumnComponent = null;
IgcTemplateColumnComponent.htmlTagName = "igc-template-column";
IgcTemplateColumnComponent._isElementRegistered = false;
return IgcTemplateColumnComponent;
}(IgcDataGridColumnComponent));
export { IgcTemplateColumnComponent };