UNPKG

igniteui-webcomponents-grids

Version:

Ignite UI Web Components grid components.

847 lines (846 loc) 29.4 kB
/* THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE AGREEMENT ("AGREEMENT") LOCATED HERE: https://www.infragistics.com/legal/license/igultimate-la https://www.infragistics.com/legal/license/igultimate-eula GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE: you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company. */ import { __extends } from "tslib"; import { Base, runOn, Delegate_$type, markType, INotifyPropertyChanged_$type, PropertyChangedEventArgs, delegateRemove, enumGetBox, typeCast, delegateCombine } from "igniteui-webcomponents-core"; import { List$1 } from "igniteui-webcomponents-core"; import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core"; import { Thickness } from "igniteui-webcomponents-core"; import { XButton } from "igniteui-webcomponents-inputs"; import { BrushUtil } from "igniteui-webcomponents-core"; import { ElevationHelper } from "igniteui-webcomponents-inputs"; import { BaseDOMEventProxy } from "igniteui-webcomponents-core"; import { IDataGridComponent_$type } from "./IDataGridComponent"; import { DataGrid } from "./DataGrid"; import { BaseControlTheme_$type } from "igniteui-webcomponents-core"; import { XIcon } from "igniteui-webcomponents-inputs"; import { ToolbarVisualModelExport } from "./ToolbarVisualModelExport"; /** * @hidden */ var DataGridToolbarView = /** @class */ /*@__PURE__*/ (function (_super) { __extends(DataGridToolbarView, _super); function DataGridToolbarView() { var _this = _super.call(this) || this; _this.k = null; _this.f = null; _this.d = null; _this.e = null; _this.h = null; _this.i = null; _this.j = null; _this.g = null; _this.a = null; _this.c = null; _this.b = new List$1(Delegate_$type, 0); return _this; } DataGridToolbarView.prototype.s = function () { }; DataGridToolbarView.prototype.p = function (a) { if (a == null) { this.c = null; return; } this.c = a; var b = Math.round(a.rootWrapper.width()); var c = Math.round(a.rootWrapper.height()); this.c.rootWrapper.setStyleProperty("position", "relative"); this.c.rootWrapper.setStyleProperty("display", "flex"); this.c.rootWrapper.setStyleProperty("justify-content", "space-between"); this.c.rootWrapper.setStyleProperty("align-items", "center"); this.c.rootWrapper.setStyleProperty("padding", "4px 16px 4px 16px"); if (this.a.be != null) { this.c.rootWrapper.setStyleProperty("background-color", this.a.be._fill); } this.aa(); this.c.rootWrapper.setStyleProperty("border-style", "solid"); this.c.rootWrapper.setStyleProperty("box-sizing", "border-box"); this.c.rootWrapper.setStyleProperty("border-color", "rgba(0, 0, 0, 0.2)"); this.c.rootWrapper.setStyleProperty("border-radius", "3px 3px 0px 0px"); this.ad(); this.k = this.c.rootWrapper.getChildAt(0); this.y(); var d = this.c.rootWrapper.getChildAt(1); d.setStyleProperty("justify-content", "space-around"); this.v(); this.x(); }; DataGridToolbarView.prototype.ad = function () { if (this.c != null) { switch (this.a.l) { case 1: this.c.rootWrapper.setStyleProperty("height", "52px"); break; case 2: this.c.rootWrapper.setStyleProperty("height", "46px"); break; case 4: case 3: this.c.rootWrapper.setStyleProperty("height", "44px"); break; case 0: this.c.rootWrapper.setStyleProperty("height", "46px"); break; } } }; DataGridToolbarView.prototype.z = function () { if (this.c != null) { if (this.a.be != null) { this.c.rootWrapper.setStyleProperty("background-color", this.a.be._fill); } } }; DataGridToolbarView.prototype.aa = function () { this.c.rootWrapper.setStyleProperty("border-width", this.a.bi.top + "px " + this.a.bi.right + "px " + this.a.bi.bottom + "px " + this.a.bi.left + "px"); }; DataGridToolbarView.prototype.y = function () { if (this.k != null && this.a.ar != null) { this.k.setText(this.a.ar); this.k.setStyleProperty("font", "16px Verdana"); } this.ah(); this.ai(); }; DataGridToolbarView.prototype.ah = function () { if (this.k != null && this.a.bg != null) { this.k.setStyleProperty("color", this.a.bg._fill); } }; DataGridToolbarView.prototype.ai = function () { if (this.k != null && this.a.n != null) { this.k.setStyleProperty("font", this.a.n.fontString); } }; DataGridToolbarView.prototype.v = function () { if (this.c != null) { var a = this.c.rootWrapper.getChildAt(1); this.f = a.getChildAt(0); this.f.setProperty("id", "hideBtn"); this.e = this.c.rootWrapper.getChildAt(2); this.w(this.e); this.e.setStyleProperty("height", "400px"); this.e.setStyleProperty("width", "250px"); var b = this.e.getChildAt(0); b.setStyleProperty("height", "calc(100% - 16px)"); b.setStyleProperty("padding", "4px 16px 4px 16px"); b.setStyleProperty("box-sizing", "border-box"); if (this.a.q == true) { if (this.a.g == null) { this.d = this.c.createElement("div"); this.a.a5(this.a, this.c, this.f, this.d, "Hiding"); this.f.listen("click", runOn(this, this.n)); } else { this.f.show(); } } else { this.f.hide(); } } }; DataGridToolbarView.prototype.ae = function () { if (this.d != null) { var a = this.d.getChildAt(1); a.setText(this.a.s.toString()); } }; DataGridToolbarView.prototype.ab = function () { if (this.d != null) { if (this.d.getChildCount() > 2) { var a = this.d.getChildAt(2); a.setText(this.a.ad.toString()); } else { var b = this.c.createElement("span"); b.setStyleProperty("display", "inline-block"); b.setStyleProperty("font-size", "14px"); b.setStyleProperty("font-weight", "600"); b.setText(this.a.ad); this.d.append(b); } } }; DataGridToolbarView.prototype.n = function (a) { if (this.e != null) { if (this.g == null || this.g != this.e) { this.l(); var b = this.f.getOffset(); this.e.setOffset(b.left - this.e.width() + this.f.width(), b.top + this.f.height()); this.g = this.e; this.t(); } else { this.l(); } } a.stopPropagation(); }; DataGridToolbarView.prototype.x = function () { if (this.c != null) { var a = this.c.rootWrapper.getChildAt(1); this.h = a.getChildAt(1); this.h.setProperty("id", "pinBtn"); this.j = this.c.rootWrapper.getChildAt(3); this.w(this.j); this.j.setStyleProperty("height", "400px"); this.j.setStyleProperty("width", "250px"); var b = this.j.getChildAt(0); b.setStyleProperty("height", "calc(100% - 16px)"); b.setStyleProperty("padding", "8px 16px 8px 16px"); b.setStyleProperty("box-sizing", "border-box"); if (this.a.r == true) { if (this.a.h == null) { this.i = this.c.createElement("div"); this.a.a5(this.a, this.c, this.h, this.i, "Pinning"); this.h.listen("click", runOn(this, this.u)); } else { this.h.show(); } } else { this.h.hide(); } } }; DataGridToolbarView.prototype.af = function () { if (this.i != null) { var a = this.i.getChildAt(1); a.setText(this.a.t.toString()); } }; DataGridToolbarView.prototype.ag = function () { if (this.i != null) { if (this.i.getChildCount() > 2) { var a = this.i.getChildAt(2); a.setText(this.a.ai); } else { var b = this.c.createElement("span"); b.setStyleProperty("display", "inline-block"); b.setStyleProperty("font-size", "14px"); b.setStyleProperty("font-weight", "600"); b.setText(this.a.ai); this.i.append(b); } } }; DataGridToolbarView.prototype.u = function (a) { if (this.j != null) { if (this.g == null || this.g != this.j) { this.l(); var b = this.h.getOffset(); this.j.setOffset(b.left - this.j.width() + this.h.width(), b.top + this.h.height()); this.g = this.j; this.t(); } else { this.l(); } } a.stopPropagation(); }; DataGridToolbarView.prototype.w = function (a) { var b = ElevationHelper.e(12, BrushUtil.h(66, 0, 0, 0), BrushUtil.h(30, 0, 0, 0), BrushUtil.h(20, 0, 0, 0), 1); a.setStyleProperty("boxShadow", b); a.setStyleProperty("background-color", this.a.bf._fill); a.setStyleProperty("position", "absolute"); a.setStyleProperty("z-index", "12000"); a.setStyleProperty("display", "none"); }; DataGridToolbarView.prototype.ac = function () { if (this.j != null) { this.j.setStyleProperty("background-color", this.a.bf._fill); } if (this.e != null) { this.e.setStyleProperty("background-color", this.a.bf._fill); } }; DataGridToolbarView.prototype.t = function () { if (this.g != null) { this.b.add(this.c.globalListen("document", "keydown", runOn(this, this.q))); this.b.add(this.c.globalListen("document", "click", runOn(this, this.r))); this.g.show(); this.g.listen("click", runOn(this, this.m)); } }; DataGridToolbarView.prototype.l = function () { if (this.g != null) { for (var a = 0; a < this.b.count; a++) { this.b._inner[a](); } this.b.clear(); this.g.unlistenAll(); this.g.hide(); this.g = null; } }; DataGridToolbarView.prototype.m = function (a) { a.stopPropagation(); }; DataGridToolbarView.prototype.q = function (a) { if (BaseDOMEventProxy.c0(a) == 8) { this.a.av(); } }; DataGridToolbarView.prototype.r = function (a) { this.a.av(); }; DataGridToolbarView.prototype.o = function () { }; DataGridToolbarView.$t = markType(DataGridToolbarView, 'DataGridToolbarView'); return DataGridToolbarView; }(Base)); export { DataGridToolbarView }; /** * @hidden */ var DataGridToolbar = /** @class */ /*@__PURE__*/ (function (_super) { __extends(DataGridToolbar, _super); function DataGridToolbar() { var _this = _super.call(this) || this; _this.c = null; _this.a = null; _this.b = null; _this.s = 0; _this.t = 0; _this.g = null; _this.h = null; _this.propertyChanged = null; _this.d = null; _this.y = null; _this.m = null; _this.bd = BrushUtil.h(255, 24, 29, 31); _this.bb = BrushUtil.h(255, 248, 248, 248); _this.bc = BrushUtil.h(255, 248, 248, 248); _this.o = false; _this.u = null; _this.v = null; _this.p = false; _this.w = null; _this.x = null; _this.bh = new Thickness(1, 1, 1, 1, 0); _this.k = 2; _this.i = 1; _this.s = 0; _this.t = 0; var a = new DataGridToolbarView(); a.a = _this; _this.c = a; _this.c.s(); return _this; } DataGridToolbar.prototype.notifySizeChanged = function () { this.c.o(); }; DataGridToolbar.prototype.destroy = function () { this.provideContainer(null, null, null); if (this.e != null) { var a = this.e; a.columnHiddenChanged = delegateRemove(a.columnHiddenChanged, runOn(this, this.a9)); var b = this.e; b.columnPinnedChanged = delegateRemove(b.columnPinnedChanged, runOn(this, this.ba)); } }; DataGridToolbar.prototype.provideContainer = function (a, b, c) { this.a = b; this.b = c; this.a6(); this.a7(); this.c.p(a); }; Object.defineProperty(DataGridToolbar.prototype, "e", { get: function () { return this.d; }, set: function (a) { var b = this.d; this.d = a; if (b != this.d) { this.a0("TargetGrid", b, this.d); } }, enumerable: false, configurable: true }); Object.defineProperty(DataGridToolbar.prototype, "ar", { get: function () { return this.y; }, set: function (a) { var b = this.y; this.y = a; if (b != this.y) { this.a0("ToolbarTitle", b, this.y); } }, enumerable: false, configurable: true }); Object.defineProperty(DataGridToolbar.prototype, "n", { get: function () { return this.m; }, set: function (a) { var b = this.m; this.m = a; if (b != this.m) { this.a0("ToolbarTitleStyle", b, this.m); } }, enumerable: false, configurable: true }); Object.defineProperty(DataGridToolbar.prototype, "bg", { get: function () { return this.bd; }, set: function (a) { var b = this.bd; this.bd = a; if (b != this.bd) { this.a0("ToolbarTitleColor", b, this.bd); } }, enumerable: false, configurable: true }); Object.defineProperty(DataGridToolbar.prototype, "be", { get: function () { return this.bb; }, set: function (a) { var b = this.bb; this.bb = a; if (b != this.bb) { this.a0("BackgroundColor", b, this.bb); } }, enumerable: false, configurable: true }); Object.defineProperty(DataGridToolbar.prototype, "bf", { get: function () { return this.bc; }, set: function (a) { var b = this.bc; this.bc = a; if (b != this.bc) { this.a0("DialogBackgroundColor", b, this.bc); } }, enumerable: false, configurable: true }); Object.defineProperty(DataGridToolbar.prototype, "q", { get: function () { return this.o; }, set: function (a) { var b = this.o; this.o = a; if (b != this.o) { this.a0("ColumnChooser", b, this.o); } }, enumerable: false, configurable: true }); Object.defineProperty(DataGridToolbar.prototype, "ad", { get: function () { return this.u; }, set: function (a) { var b = this.u; this.u = a; if (b != this.u) { this.a0("ColumnChooserText", b, this.u); } }, enumerable: false, configurable: true }); Object.defineProperty(DataGridToolbar.prototype, "af", { get: function () { return this.v; }, set: function (a) { var b = this.v; this.v = a; if (b != this.v) { this.a0("ColumnChooserTitle", b, this.v); } }, enumerable: false, configurable: true }); Object.defineProperty(DataGridToolbar.prototype, "r", { get: function () { return this.p; }, set: function (a) { var b = this.p; this.p = a; if (b != this.p) { this.a0("ColumnPinning", b, this.p); } }, enumerable: false, configurable: true }); Object.defineProperty(DataGridToolbar.prototype, "ai", { get: function () { return this.w; }, set: function (a) { var b = this.w; this.w = a; if (b != this.w) { this.a0("ColumnPinningText", b, this.w); } }, enumerable: false, configurable: true }); Object.defineProperty(DataGridToolbar.prototype, "ak", { get: function () { return this.x; }, set: function (a) { var b = this.x; this.x = a; if (b != this.x) { this.a0("ColumnPinningTitle", b, this.x); } }, enumerable: false, configurable: true }); Object.defineProperty(DataGridToolbar.prototype, "bi", { get: function () { return this.bh; }, set: function (a) { var b = this.bh; this.bh = a; if (b != this.bh) { this.a0("BorderWidth", b, this.bh); } }, enumerable: false, configurable: true }); Object.defineProperty(DataGridToolbar.prototype, "l", { get: function () { return this.k; }, set: function (a) { var b = this.k; this.k = a; if (b != this.k) { this.a0("Density", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(ControlDisplayDensity_$type, this.k)); } }, enumerable: false, configurable: true }); Object.defineProperty(DataGridToolbar.prototype, "j", { get: function () { return this.i; }, set: function (a) { var b = this.i; this.i = a; if (b != this.i) { this.a0("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, this.i)); } }, enumerable: false, configurable: true }); DataGridToolbar.prototype.a0 = function (a, b, c) { if (this.propertyChanged != null) { this.propertyChanged(this, new PropertyChangedEventArgs(a)); } this.a1(a, b, c); }; DataGridToolbar.prototype.a1 = function (a, b, c) { switch (a) { case "TargetGrid": this.a6(); this.a7(); this.a8(typeCast(DataGrid.$, b)); this.c.ad(); break; case "ToolbarTitle": this.c.y(); break; case "ToolbarTitleStyle": this.c.ai(); break; case "ToolbarTitleColor": this.c.ah(); break; case "BackgroundColor": this.c.z(); break; case "DialogBackgroundColor": this.c.ac(); if (this.a != null) { this.a.aq = this.bf; } if (this.b != null) { this.b.an = this.bf; } break; case "ColumnChooser": this.a6(); this.c.v(); break; case "ColumnChooserText": this.c.ab(); break; case "ColumnChooserTitle": if (this.a != null) { this.a.v = this.af; } break; case "ColumnPinning": this.a7(); this.c.x(); break; case "ColumnPinningText": this.c.ag(); break; case "ColumnPinningTitle": if (this.b != null) { this.b.v = this.ak; } break; case "Density": this.a3(); break; case "BaseTheme": this.a4(); break; case "BorderWidth": this.c.aa(); break; } }; DataGridToolbar.prototype.az = function (a, b) { switch (b.propertyName) { case "IsToolbarColumnChooserVisible": this.q = this.e.isToolbarColumnChooserVisible; break; case "IsToolbarColumnPinningVisible": this.r = this.e.isToolbarColumnPinningVisible; break; case "ToolbarTitle": this.ar = this.e.toolbarTitle; break; case "ToolbarColumnChooserText": this.ad = this.e.toolbarColumnChooserText; break; case "ToolbarColumnChooserTitle": this.af = this.e.toolbarColumnChooserTitle; break; case "ToolbarColumnPinningText": this.ai = this.e.toolbarColumnPinningText; break; case "ToolbarColumnPinningTitle": this.ak = this.e.toolbarColumnPinningTitle; break; } }; DataGridToolbar.prototype.a4 = function () { if (this.a != null) { this.a.f = this.j; } if (this.b != null) { this.b.f = this.j; } if (this.g != null) { this.g.n = this.j; } if (this.h != null) { this.h.n = this.j; } }; DataGridToolbar.prototype.a3 = function () { if (this.l == 0) { if (this.e != null) { this.l = this.e.density; } } if (this.g != null) { this.g.r = this.l; } if (this.h != null) { this.h.r = this.l; } if (this.a != null) { this.a.h = this.l; } if (this.b != null) { this.b.h = this.l; } this.c.ad(); }; DataGridToolbar.prototype.a5 = function (a, b, c, d, e) { var f = new XButton(); var g = b.getSubRenderer(c); f.provideContainer(g); var h = g.getExternal(f, g.rootWrapper, g.getExternal(a, null, null)); f.n = this.j; f.r = this.l; var i = null; var j = null; var k = null; switch (e) { case "Hiding": this.g = f; i = DataGridToolbar.ao; j = this.s.toString(); if (this.ad != null) { k = this.ad; } break; case "Pinning": this.h = f; i = DataGridToolbar.ap; j = this.t.toString(); if (this.ai != null) { k = this.ai; } break; } f.e = 2; c.setStyleProperty("display", "inline-block"); c.setStyleProperty("margin-left", "10px"); d.setStyleProperty("display", "flex"); d.setStyleProperty("flexDirection", "row"); d.setStyleProperty("flexWrap", "no-wrap"); d.setStyleProperty("align-items", "center"); var l = b.createElement("div"); l.setStyleProperty("display", "inline-block"); l.setStyleProperty("margin-right", "5px"); var m = b.getSubRenderer(l); var n = new XIcon(); n.provideContainer(m); var o = m.getExternal(n, m.rootWrapper, m.getExternal(a, null, null)); n.svgPath = i; d.append(l); var p = b.createElement("span"); p.setStyleProperty("display", "inline-block"); p.setStyleProperty("font-size", "12px"); p.setStyleProperty("font-weight", "600"); p.setStyleProperty("margin-right", "5px"); p.setText(j); d.append(p); if (k != null) { var q = b.createElement("span"); q.setStyleProperty("display", "inline-block"); q.setStyleProperty("font-size", "12px"); q.setStyleProperty("font-weight", "600"); q.setText(k); d.append(q); } f.appendButtonContent(d); }; DataGridToolbar.prototype.av = function () { this.c.l(); }; DataGridToolbar.prototype.a6 = function () { if (this.q && this.a != null && this.e != null) { if (this.af != null) { this.a.v = this.af; } this.a.c = this.e; this.a.f = this.j; this.a.aq = this.bf; this.a.an(new Thickness(1, -16, 3, -16, 3)); } }; DataGridToolbar.prototype.a7 = function () { if (this.r && this.b != null && this.e != null) { if (this.ak != null) { this.b.v = this.ak; } this.b.c = this.e; this.b.f = this.j; this.b.an = this.bf; this.b.ak(new Thickness(1, -16, 3, -16, 3)); } }; DataGridToolbar.prototype.a8 = function (a) { if (a != null) { a.columnHiddenChanged = delegateRemove(a.columnHiddenChanged, runOn(this, this.a9)); a.columnPinnedChanged = delegateRemove(a.columnPinnedChanged, runOn(this, this.ba)); a.propertyChanged = delegateRemove(a.propertyChanged, runOn(this, this.az)); } if (this.e != null) { var b = this.e; b.columnHiddenChanged = delegateCombine(b.columnHiddenChanged, runOn(this, this.a9)); var c = this.e; c.columnPinnedChanged = delegateCombine(c.columnPinnedChanged, runOn(this, this.ba)); var d = this.e; d.propertyChanged = delegateCombine(d.propertyChanged, runOn(this, this.az)); this.ax(); if (this.e.toolbar != null) { this.ar = this.e.toolbarTitle; this.q = this.e.isToolbarColumnChooserVisible; this.ad = this.e.toolbarColumnChooserText; this.af = this.e.toolbarColumnChooserTitle; this.r = this.e.isToolbarColumnPinningVisible; this.ai = this.e.toolbarColumnPinningText; this.ak = this.e.toolbarColumnPinningTitle; } } }; DataGridToolbar.prototype.ax = function () { if (this.e != null) { var a = this.e.actualColumns.count; this.s = 0; this.t = 0; for (var b = 0; b < a; b++) { if (this.e.actualColumns._inner[b].jo == true) { this.s++; } if (this.e.actualColumns._inner[b].il == 1) { this.t++; } } } this.c.ae(); this.c.af(); }; DataGridToolbar.prototype.a9 = function (a, b) { this.ax(); }; DataGridToolbar.prototype.ba = function (a, b) { this.ax(); }; DataGridToolbar.prototype.exportVisualModel = function () { return this.f(); }; DataGridToolbar.prototype.exportSerializedVisualModel = function () { var a = this.f(); return a.serialize(); }; DataGridToolbar.prototype.f = function () { return new ToolbarVisualModelExport(); }; DataGridToolbar.$t = markType(DataGridToolbar, 'DataGridToolbar', Base.$, [INotifyPropertyChanged_$type, IDataGridComponent_$type]); DataGridToolbar.ao = "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"; DataGridToolbar.ap = "M13.2,3.8l7.1,7.1l-2.8-0.1l-3.4,3.4l0.1,4.2l-3.5-3.5l-5.4,5.4l-1.4,0l0-1.4l5.4-5.4L5.7,9.8l4.2,0.1l3.4-3.4L13.2,3.8z"; return DataGridToolbar; }(Base)); export { DataGridToolbar };