@digital-realty/ix-grid 1.0.58 → 1.0.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/IxGrid.d.ts +1 -0
  2. package/dist/IxGrid.js +8 -0
  3. package/dist/IxGrid.js.map +1 -1
  4. package/dist/components/IxGridColumnFilter.d.ts +3 -0
  5. package/dist/components/IxGridColumnFilter.js +47 -27
  6. package/dist/components/IxGridColumnFilter.js.map +1 -1
  7. package/dist/ix-grid.min.js +2 -2
  8. package/package.json +2 -2
  9. package/src/IxGrid.ts +7 -0
  10. package/src/components/IxGridColumnFilter.ts +43 -29
package/dist/IxGrid.d.ts CHANGED
@@ -43,6 +43,7 @@ export declare class IxGrid extends LitElement {
43
43
  showDownload: boolean;
44
44
  downloadMenuItems: IxGridDownloadMenuItemModel[];
45
45
  addParamsToURL: boolean;
46
+ refreshDataOnColumnVisibilityChange: boolean;
46
47
  private filters;
47
48
  isLoading: boolean;
48
49
  isExpanded: boolean;
package/dist/IxGrid.js CHANGED
@@ -34,6 +34,7 @@ export class IxGrid extends LitElement {
34
34
  this.showDownload = true;
35
35
  this.downloadMenuItems = [];
36
36
  this.addParamsToURL = true;
37
+ this.refreshDataOnColumnVisibilityChange = true;
37
38
  this.filters = [];
38
39
  this.isLoading = false;
39
40
  this.isExpanded = false;
@@ -73,6 +74,10 @@ export class IxGrid extends LitElement {
73
74
  columnsLocalStorageKey=${ifDefined(this.columnsLocalStorageKey)}
74
75
  @columnFilter=${(e) => this.handleOnColumnFilter(e)}
75
76
  @reorderColumns=${this.reorderColumnsFromFilter}
77
+ .columnReorderingAllowed=${this.columnReorderingAllowed}
78
+ .refreshDataOnColumnVisibilityChange=${this
79
+ .refreshDataOnColumnVisibilityChange}
80
+ .requestGridUpdate=${() => this.requestUpdate()}
76
81
  ></ix-grid-column-filter>
77
82
  ${this.showDownload
78
83
  ? html `<ix-grid-download-menu
@@ -361,6 +366,9 @@ __decorate([
361
366
  __decorate([
362
367
  property({ type: Boolean, attribute: 'add-params-to-url' })
363
368
  ], IxGrid.prototype, "addParamsToURL", void 0);
369
+ __decorate([
370
+ property({ type: Boolean })
371
+ ], IxGrid.prototype, "refreshDataOnColumnVisibilityChange", void 0);
364
372
  __decorate([
365
373
  state()
366
374
  ], IxGrid.prototype, "filters", void 0);
package/dist/IxGrid.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IxGrid.js","sourceRoot":"","sources":["../src/IxGrid.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,kDAAkD,CAAC;AAC1D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,8BAA8B,CAAC;AACtC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAqBzC,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAME,4BAAuB,GAAY,KAAK,CAAC;QAEb,iBAAY,GAAG,EAAE,CAAC;QAEnB,YAAO,GAAa,EAAE,CAAC;QAEvB,SAAI,GAAU,EAAE,CAAC;QAEhB,qBAAgB,GAAG,oBAAoB,CAAC;QAExC,iBAAY,GAAG,EAAE,CAAC;QAElB,kBAAa,GAAG,EAAE,CAAC;QAElB,eAAU,GAAG,KAAK,CAAC;QAEQ,gBAAW,GAAG,KAAK,CAAC;QAEhD,aAAQ,GAAW,CAAC,CAAC;QAErB,SAAI,GAAG,CAAC,CAAC;QAET,aAAQ,GAAG,EAAE,CAAC;QAEf,cAAS,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;QAEtC,gBAAW,GAAG,CAAC,CAAC;QAEhB,mBAAc,GAAuB,SAAS,CAAC;QAE9C,iBAAY,GAAG,IAAI,CAAC;QAEtB,sBAAiB,GAC1C,EAAE,CAAC;QAEwD,mBAAc,GACzE,IAAI,CAAC;QAEU,YAAO,GAAa,EAAE,CAAC;QAE/B,cAAS,GAAG,KAAK,CAAC;QAElB,eAAU,GAAG,KAAK,CAAC;QAuGpB,uBAAkB,GAAG,CAC3B,MAAc,EACd,KAAa,EACb,MAAc,EACd,EAAE;YACF,MAAM,aAAa,GAAG,QAAQ,CAAC;gBAC7B,MAAM,EAAE,IAAI;gBACZ,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,WAAW;gBAC5B,KAAK,EAAE,KAAK,KAAK,CAAC;gBAClB,IAAI,EAAE,KAAK,KAAK,MAAM,GAAG,CAAC;aAC3B,CAAC,CAAC;YAEH,OAAO,IAAI,CAAA;;iBAEE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC;mBACnD,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC;gBACxD,aAAa;;qCAEQ,MAAM,CAAC,MAAM;UACxC,MAAM,CAAC,QAAQ;gBACf,CAAC,CAAC,IAAI,CAAA;iBACC,IAAI,CAAC,aAAa,KAAK,MAAM;oBAChC,IAAI,CAAC,YAAY,KAAK,MAAM,CAAC,IAAI;oBAC/B,CAAC,CAAC,cAAc;oBAChB,CAAC,CAAC,gBAAgB;cACpB;gBACJ,CAAC,CAAC,OAAO;;KAEd,CAAC;QACJ,CAAC,CAAC;QA8EM,iBAAY,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;QAG3B,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;yBAEW,IAAI,CAAC,eAAe;uCACN,SAAS,CAAC,IAAI,CAAC,sBAAsB,CAAC;8BAC/C,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC;gCAC9C,IAAI,CAAC,wBAAwB;;cAE/C,IAAI,CAAC,YAAY;gBACjB,CAAC,CAAC,IAAI,CAAA;2BACO,IAAI,CAAC,iBAAiB;0CACP;gBAC5B,CAAC,CAAC,OAAO;;yBAEE,IAAI,CAAC,OAAO;2BACV,CAAC,CAAc,EAAE,EAAE;gBAC9B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;gBAChC,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;;iBAEE;;;;;GAKd,CAAC;QAEM,2BAAsB,GAAG,GAAG,EAAE;YACpC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO,OAAO,CAAC;YAEtD,OAAO,IAAI,CAAA;;;;mBAII,GAAG,EAAE;gBACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;YACrC,CAAC;;;YAGC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;iCAC1B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;;;KAG9D,CAAC;QACJ,CAAC,CAAC;QAEM,6BAAwB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;cAEjC,IAAI,CAAC,IAAI;kBACL,IAAI,CAAC,QAAQ;mBACZ,IAAI,CAAC,SAAS;qBACZ,IAAI,CAAC,WAAW;0BACX,CAAC,CAAc,EAAE,EAAE;YACrC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;YAClC,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;;GAEJ,CAAC;IA0DJ,CAAC;IAxUC,IAAI,aAAa;QACf,IAAI,IAAI,CAAC,cAAc;YAAE,OAAO,IAAI,CAAC;QAErC,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IAED,IAAI,sBAAsB;QACxB,OAAO,WAAW,IAAI,CAAC,cAAc,UAAU,CAAC;IAClD,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,MAAM,GAAa,EAAE,CAAC;QAE1B,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CACjC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAI,IAAI,CAC1D,CAAC;YAEF,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC;gBAC7B,MAAM,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAS,EAAE,EAAE;oBAC1C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAC9B,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,CAC3B,CAAC;oBAEZ,OAAO;wBACL,GAAG,MAAM;wBACT,MAAM,EAAE,CAAC,CAAC,MAAM;wBAChB,WAAW,EAAE,CAAC,CAAC,WAAW;wBAC1B,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK;qBACtC,CAAC;gBACJ,CAAC,CAAC,CAAC;SACN;QAED,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAEpD,OAAO,MAAM;aACV,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC;aAClB,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,CAAC;YACxB,GAAG,MAAM;YACT,KAAK,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK;SAChD,CAAC,CAAC,CAAC;IACR,CAAC;IAEO,KAAK,CAAC,UAAU;QACtB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CACjC,CAAC,aAAwC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YACrE,GAAG,aAAa;YAChB,CAAC,WAAW,CAAC,EAAE,KAAK;SACrB,CAAC,EACF,EAAE,CACH,CAAC;QAEF,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,MAAM,SAAS,GAA8B;gBAC3C,IAAI,EAAE,IAAI,CAAC,YAAY;gBACvB,KAAK,EAAE,IAAI,CAAC,aAAa;gBACzB,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAC1B,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;gBAC9B,GAAG,OAAO;aACX,CAAC;YAEF,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAC1C,MAAM,YAAY,GAAG,IAAI,eAAe,CAAC,SAAS,CAAC,CAAC;YACpD,GAAG,CAAC,MAAM,GAAG,YAAY,CAAC,QAAQ,EAAE,CAAC;YACrC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;SACvD;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE;gBACN,UAAU,EAAE,IAAI,CAAC,YAAY;gBAC7B,SAAS,EAAE,IAAI,CAAC,aAAa;gBAC7B,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO;gBACP,gBAAgB,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC;oBACjD,WAAW,EAAE,CAAC,CAAC,WAAW;oBAC1B,QAAQ,EAAE,CAAC,CAAC,aAAa;iBAC1B,CAAC,CAAC;aACJ;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,UAAU,CAAC,SAAiB,EAAE;QAC5B,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;YAChC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;aAAM;YACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;SACpE;QACD,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAE3B,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAiCD,wBAAwB,CAAC,OAAiB;QACxC,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,YAAY,CAAC,OAAO,CAClB,IAAI,CAAC,sBAAsB,EAC3B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CACxB,CAAC;SACH;IACH,CAAC;IAED,KAAK,CAAC,uBAAuB;;QAC3B,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAChD,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,KAAK,IAAI,CAC3C,CAAC;QACF,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAC/C,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,KAAK,IAAI,CAC3C,CAAC;QACF,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAC/C,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,KAAK,IAAI,CAChD,CAAC;QAEF,MAAM,UAAU,GAAG;YACjB,GAAG,cAAc,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,MAAK,IAAI,CAAC;YAChE,GAAG,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,MAAK,IAAI,CAAC;YAC/D,GAAG,aAAa;SACjB,CAAC;QAEF,qDAAqD;QACrD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAC5B,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,0CAAE,gBAAgB,CAAC,IAAI,CAAC,KAAI,EAAE,CACpD,CAAC;QACF,IAAI,WAAW,CAAC,MAAM,EAAE;YACtB,MAAM,WAAW,GAAG,WAAW;iBAC5B,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;iBAC/D,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,YAAY,CAAC;iBAC/C,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YAEpB,MAAM,uBAAuB,GAAG,WAAW,CAAC,KAAK,CAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAC5C,CAAC;YACF,IAAI,gBAAgB,GAAa,EAAE,CAAC;YACpC,IAAI,CAAC,uBAAuB,EAAE;gBAC5B,gBAAgB,GAAG,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;gBACzD,IAAI,CAAC,OAAO,GAAG;oBACb,GAAG,gBAAgB,CAAC,MAAM,CACxB,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,KAAK,IAAI,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,MAAK,IAAI,CACjE;oBACD,GAAG,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,MAAK,IAAI,CAAC;oBAC/D,GAAG,aAAa;iBACjB,CAAC;gBAEF,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBACtB,MAAM,IAAI,CAAC,cAAc,CAAC;gBAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;aACxB;YACD,IAAI,CAAC,wBAAwB,CAC3B,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAClE,CAAC;SACH;IACH,CAAC;IAED,KAAK,CAAC,wBAAwB,CAAC,CAAc;QAC3C,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;QAC9C,IAAI,CAAC,wBAAwB,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAEjD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,oBAAoB,CAAC,CAAc;QACjC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAc,EAAE,EAAU,EAAE,EAAE;YACtD,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAC;QAC3C,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAkED,aAAa;QACX,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAU,EAAE,EAAE;gBACpE,IAAI,MAAM,CAAC,MAAM,KAAK,IAAI;oBAAE,OAAO,OAAO,CAAC;gBAE3C,OAAO,IAAI,CAAA;YACP,oBAAoB,CACpB,GAAG,EAAE,CACH,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAClE,IAAI,CAAC,aAAa,CACnB;YACC,kBAAkB,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE,CAAC;;kBAErC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC;oBACrB,MAAM,CAAC,MAAM;2BACN,MAAM,CAAC,WAAW;iBAC5B,MAAM,CAAC,IAAI;+BACG,CAAC;YAC1B,CAAC,CAAC,EAAE,CAAC;SACN;QAED,OAAO,IAAI,CAAA,2CAA2C,CAAC;IACzD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,kBAAkB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IACvD,IAAI,CAAC,YACP,EAAE;;UAEA,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE;UAC/C,CAAC,IAAI,CAAC,SAAS;YACf,CAAC,CAAC,IAAI,CAAA;yBACS,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU;gBAC5C,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC;gBACnC,CAAC,CAAC,IAAI,CAAC,IAAI;;6CAEgB,IAAI,CAAC,uBAAuB;;2BAE9C,IAAI,CAAC,uBAAuB;;kBAErC,IAAI,CAAC,aAAa,EAAE;;gBAEtB,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS;gBACzC,CAAC,CAAC,IAAI,CAAA,8BAA8B;gBACpC,CAAC,CAAC,OAAO,EAAE;YACjB,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,QAAQ,GAAG,CAAC;YACjB,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE;YAC/B,CAAC,CAAC,IAAI,CAAC,wBAAwB,EAAE;;;;KAItC,CAAC;IACJ,CAAC;;AAxXe,aAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAEtB;IAArB,KAAK,CAAC,aAAa,CAAC;oCAAoB;AAGzC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,2BAA2B,EAAE,CAAC;uDAC3B;AAEb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAmB;AAEnB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uCAAwB;AAEvB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oCAAkB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAyC;AAExC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAoB;AAElB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAoB;AAEQ;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CAAqB;AAEhD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAsB;AAErB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAU;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAe;AAEf;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yCAAwC;AAEtC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAiB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgD;AAE9C;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAqB;AAEtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iDACrB;AAEwD;IAA5D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;8CACrD;AAEE;IAAR,KAAK,EAAE;uCAAgC;AAE/B;IAAR,KAAK,EAAE;yCAAmB;AAElB;IAAR,KAAK,EAAE;0CAAoB","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '@vaadin/grid';\nimport { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './components/IxGridDownloadMenu.js';\nimport './components/IxPagination.js';\nimport './components/IxGridColumnFilter.js';\nimport './components/IxGridRowFilter.js';\nimport type { Filter } from './components/IxGridRowFilter.js';\nimport { IxGridViewStyles } from './grid-view-styles.js';\nimport { copy } from './ix-grid-copy.js';\nimport { IxGridDownloadMenuItemModel } from './models/IxGridDownloadMenuItemModel.js';\n\nexport interface Row {\n [key: string]: string;\n}\n\nexport type FilterOperator = 'equals' | 'contains';\n\nexport interface Column {\n name: string;\n header: string;\n bodyRenderer: (row: Row) => any;\n width?: string;\n sortable?: boolean;\n filterable?: boolean;\n hidden?: boolean;\n frozenToEnd?: boolean;\n filterOperators?: FilterOperator[];\n}\n\nexport class IxGrid extends LitElement {\n static readonly styles = [IxGridViewStyles];\n\n @query('vaadin-grid') grid!: HTMLElement;\n\n @property({ type: Boolean, attribute: 'column-reordering-allowed' })\n columnReorderingAllowed: boolean = false;\n\n @property({ type: String }) variantClass = '';\n\n @property({ type: Array }) columns: Column[] = [];\n\n @property({ type: Array }) rows: Row[] = [];\n\n @property({ type: String }) defaultEmptyText = 'No data to display';\n\n @property({ type: String }) sortedColumn = '';\n\n @property({ type: String }) sortDirection = '';\n\n @property({ type: Boolean }) hideHeader = false;\n\n @property({ type: Boolean, attribute: 'hide-filters' }) hideFilters = false;\n\n @property({ type: Number }) rowLimit: number = 0;\n\n @property({ type: Number }) page = 1;\n\n @property({ type: Number }) pageSize = 10;\n\n @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];\n\n @property({ type: Number }) recordCount = 0;\n\n @property({ type: String }) localStorageID: string | undefined = undefined;\n\n @property({ type: Boolean }) showDownload = true;\n\n @property({ type: Array }) downloadMenuItems: IxGridDownloadMenuItemModel[] =\n [];\n\n @property({ type: Boolean, attribute: 'add-params-to-url' }) addParamsToURL =\n true;\n\n @state() private filters: Filter[] = [];\n\n @state() isLoading = false;\n\n @state() isExpanded = false;\n\n get isPersistable() {\n if (this.localStorageID) return true;\n\n return false;\n }\n\n get columnNames() {\n return this.columns.map((column: Column) => column.name);\n }\n\n get columnsLocalStorageKey() {\n return `ix-grid-${this.localStorageID}-columns`;\n }\n\n get arrangedColumns() {\n let colums: Column[] = [];\n\n if (this.isPersistable) {\n const preservedColumns = JSON.parse(\n localStorage.getItem(this.columnsLocalStorageKey) || '[]'\n );\n\n if (preservedColumns.length > 0)\n colums = preservedColumns.map((c: Column) => {\n const column = this.columns.find(\n (col: Column) => col.name === c.name\n ) as Column;\n\n return {\n ...column,\n hidden: c.hidden,\n frozenToEnd: c.frozenToEnd,\n width: !c.width ? undefined : c.width,\n };\n });\n }\n\n if (colums.length === 0) colums = [...this.columns];\n\n return colums\n .filter(col => col)\n .map((column: Column) => ({\n ...column,\n width: !column.width ? undefined : column.width,\n }));\n }\n\n private async updatePage() {\n const filters = this.filters.reduce(\n (columnFilters: { [key: string]: string }, { columnField, value }) => ({\n ...columnFilters,\n [columnField]: value,\n }),\n {}\n );\n\n if (this.addParamsToURL) {\n const urlParams: { [key: string]: string } = {\n sort: this.sortedColumn,\n order: this.sortDirection,\n page: this.page.toString(),\n size: this.pageSize.toString(),\n ...filters,\n };\n\n const url = new URL(window.location.href);\n const searchParams = new URLSearchParams(urlParams);\n url.search = searchParams.toString();\n window.history.replaceState(null, '', url.toString());\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {\n columnName: this.sortedColumn,\n sortOrder: this.sortDirection,\n page: this.page,\n pageSize: this.pageSize,\n filters,\n filtersOperators: this.filters.map((f: Filter) => ({\n columnField: f.columnField,\n operator: f.operatorValue,\n })),\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n handleSort(column: string = '') {\n if (this.sortedColumn !== column) {\n this.sortDirection = 'asc';\n } else {\n this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';\n }\n this.sortedColumn = column;\n\n this.updatePage();\n }\n\n private renderColumnHeader = (\n column: Column,\n index: number,\n length: number\n ) => {\n const headerClasses = classMap({\n header: true,\n frozen: !!column.frozenToEnd,\n first: index === 0,\n last: index === length - 1,\n });\n\n return html`\n <div\n @click=${() => column.sortable && this.handleSort(column.name)}\n @keyDown=${() => column.sortable && this.handleSort(column.name)}\n class=${headerClasses}\n >\n <span class=\"header-label\">${column.header}</span>\n ${column.sortable\n ? html`<ix-icon title=\"Sort\" class=\"header-sort-icon\"\n >${this.sortDirection === 'desc' &&\n this.sortedColumn === column.name\n ? `arrow_upward`\n : `arrow_downward`}</ix-icon\n >`\n : nothing}\n </div>\n `;\n };\n\n setColumnsToLocalStorage(columns: Column[]) {\n if (this.isPersistable) {\n localStorage.setItem(\n this.columnsLocalStorageKey,\n JSON.stringify(columns)\n );\n }\n }\n\n async reorderColumnsFromTable() {\n const visibleColumns = this.arrangedColumns.filter(\n (column: Column) => column.hidden !== true\n );\n const hiddenColumns = this.arrangedColumns.filter(\n (column: Column) => column.hidden === true\n );\n const frozenColumns = this.arrangedColumns.filter(\n (column: Column) => column.frozenToEnd === true\n );\n\n const allColumns = [\n ...visibleColumns.filter(column => column?.frozenToEnd !== true),\n ...hiddenColumns.filter(column => column?.frozenToEnd !== true),\n ...frozenColumns,\n ];\n\n // calulate column order from table header flex order\n const headerNodes = Array.from(\n this.grid?.shadowRoot?.querySelectorAll('th') || []\n );\n if (headerNodes.length) {\n const columnOrder = headerNodes\n .map((el, id) => ({ id, flexPosition: Number(el.style.order) }))\n .sort((a, b) => a.flexPosition - b.flexPosition)\n .map(el => el.id);\n\n const columnsCorrectlyOrdered = columnOrder.every(\n (x, i) => i === 0 || x > columnOrder[i - 1]\n );\n let reorderedColumns: Column[] = [];\n if (!columnsCorrectlyOrdered) {\n reorderedColumns = columnOrder.map(id => allColumns[id]);\n this.columns = [\n ...reorderedColumns.filter(\n column => column.hidden !== true && column?.frozenToEnd !== true\n ),\n ...hiddenColumns.filter(column => column?.frozenToEnd !== true),\n ...frozenColumns,\n ];\n\n this.isLoading = true;\n await this.updateComplete;\n this.isLoading = false;\n }\n this.setColumnsToLocalStorage(\n reorderedColumns.length > 0 ? [...this.columns] : [...allColumns]\n );\n }\n }\n\n async reorderColumnsFromFilter(e: CustomEvent) {\n this.columns = [...e.detail.reorderedColumns];\n this.setColumnsToLocalStorage([...this.columns]);\n\n this.isLoading = true;\n await this.updateComplete;\n this.isLoading = false;\n }\n\n handleOnColumnFilter(e: CustomEvent) {\n e.detail.columns.forEach((column: Column, id: number) => {\n this.columns[id].hidden = column?.hidden;\n });\n this.updatePage();\n }\n\n private renderHeader = () => html`\n <div class=\"grid-header\">\n <slot name=\"header\"><div class=\"empty\"></div></slot>\n ${this.hideFilters\n ? nothing\n : html`<div class=\"grid-menu\">\n <ix-grid-column-filter\n .columns=${this.arrangedColumns}\n columnsLocalStorageKey=${ifDefined(this.columnsLocalStorageKey)}\n @columnFilter=${(e: CustomEvent) => this.handleOnColumnFilter(e)}\n @reorderColumns=${this.reorderColumnsFromFilter}\n ></ix-grid-column-filter>\n ${this.showDownload\n ? html`<ix-grid-download-menu\n .items=${this.downloadMenuItems}\n ></ix-grid-download-menu>`\n : nothing}\n <ix-grid-row-filter\n .columns=${this.columns}\n @rowFilter=${(e: CustomEvent) => {\n this.filters = e.detail.filters;\n this.updatePage();\n }}\n ></ix-grid-row-filter>\n </div>`}\n </div>\n <div class=\"touch-edge\">\n <slot name=\"under-header\"></slot>\n </div>\n `;\n\n private renderRowLimitControls = () => {\n if (this.rows.length <= this.rowLimit) return nothing;\n\n return html`\n <div class=\"row-limit\">\n <ix-button\n appearance=\"text\"\n @click=${() => {\n this.isExpanded = !this.isExpanded;\n }}\n has-icon\n >\n ${this.isExpanded ? copy.viewLess : copy.viewMore}\n <ix-icon slot=\"icon\">${this.isExpanded ? 'remove' : 'add'}</ix-icon>\n </ix-button>\n </div>\n `;\n };\n\n private renderPaginationControls = () => html`\n <ix-pagination\n .page=${this.page}\n .pageSize=${this.pageSize}\n .pageSizes=${this.pageSizes}\n .recordCount=${this.recordCount}\n @updatePagination=${(e: CustomEvent) => {\n this.page = e.detail.page;\n this.pageSize = e.detail.pageSize;\n this.updatePage();\n }}\n ></ix-pagination>\n `;\n\n renderColumns() {\n if (this.arrangedColumns.length > 0) {\n return html`${this.arrangedColumns.map((column: Column, id: number) => {\n if (column.hidden === true) return nothing;\n\n return html`<vaadin-grid-column\n ${columnHeaderRenderer(\n () =>\n this.renderColumnHeader(column, id, this.arrangedColumns.length),\n this.sortDirection\n )}\n ${columnBodyRenderer(column.bodyRenderer, [])}\n resizable\n width=${ifDefined(column.width)}\n ?hidden=${column.hidden}\n ?frozen-to-end=${column.frozenToEnd}\n path=${column.name}\n ></vaadin-grid-column>`;\n })}`;\n }\n\n return html`<vaadin-grid-column></vaadin-grid-column>`;\n }\n\n render() {\n return html`\n <div\n class=${`grid-container ${this.isLoading ? 'loading' : ''} ${\n this.variantClass\n }`}\n >\n ${this.hideHeader ? nothing : this.renderHeader()}\n ${!this.isLoading\n ? html`<vaadin-grid\n .items=${this.rowLimit > 0 && !this.isExpanded\n ? this.rows.slice(0, this.rowLimit)\n : this.rows}\n all-rows-visible\n ?column-reordering-allowed=${this.columnReorderingAllowed}\n theme=\"no-border\"\n @mouseup=${this.reorderColumnsFromTable}\n >\n ${this.renderColumns()}\n </vaadin-grid>\n ${this.rows.length === 0 && !this.isLoading\n ? html`<slot name=\"no-rows\"></slot>`\n : nothing}`\n : nothing}\n ${this.rowLimit > 0\n ? this.renderRowLimitControls()\n : this.renderPaginationControls()}\n\n <slot name=\"footer\"></slot>\n </div>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"IxGrid.js","sourceRoot":"","sources":["../src/IxGrid.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,kDAAkD,CAAC;AAC1D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,8BAA8B,CAAC;AACtC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAqBzC,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAME,4BAAuB,GAAY,KAAK,CAAC;QAEb,iBAAY,GAAG,EAAE,CAAC;QAEnB,YAAO,GAAa,EAAE,CAAC;QAEvB,SAAI,GAAU,EAAE,CAAC;QAEhB,qBAAgB,GAAG,oBAAoB,CAAC;QAExC,iBAAY,GAAG,EAAE,CAAC;QAElB,kBAAa,GAAG,EAAE,CAAC;QAElB,eAAU,GAAG,KAAK,CAAC;QAEQ,gBAAW,GAAG,KAAK,CAAC;QAEhD,aAAQ,GAAW,CAAC,CAAC;QAErB,SAAI,GAAG,CAAC,CAAC;QAET,aAAQ,GAAG,EAAE,CAAC;QAEf,cAAS,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;QAEtC,gBAAW,GAAG,CAAC,CAAC;QAEhB,mBAAc,GAAuB,SAAS,CAAC;QAE9C,iBAAY,GAAG,IAAI,CAAC;QAEtB,sBAAiB,GAC1C,EAAE,CAAC;QAEwD,mBAAc,GACzE,IAAI,CAAC;QAEsB,wCAAmC,GAC9D,IAAI,CAAC;QAEU,YAAO,GAAa,EAAE,CAAC;QAE/B,cAAS,GAAG,KAAK,CAAC;QAElB,eAAU,GAAG,KAAK,CAAC;QAuGpB,uBAAkB,GAAG,CAC3B,MAAc,EACd,KAAa,EACb,MAAc,EACd,EAAE;YACF,MAAM,aAAa,GAAG,QAAQ,CAAC;gBAC7B,MAAM,EAAE,IAAI;gBACZ,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,WAAW;gBAC5B,KAAK,EAAE,KAAK,KAAK,CAAC;gBAClB,IAAI,EAAE,KAAK,KAAK,MAAM,GAAG,CAAC;aAC3B,CAAC,CAAC;YAEH,OAAO,IAAI,CAAA;;iBAEE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC;mBACnD,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC;gBACxD,aAAa;;qCAEQ,MAAM,CAAC,MAAM;UACxC,MAAM,CAAC,QAAQ;gBACf,CAAC,CAAC,IAAI,CAAA;iBACC,IAAI,CAAC,aAAa,KAAK,MAAM;oBAChC,IAAI,CAAC,YAAY,KAAK,MAAM,CAAC,IAAI;oBAC/B,CAAC,CAAC,cAAc;oBAChB,CAAC,CAAC,gBAAgB;cACpB;gBACJ,CAAC,CAAC,OAAO;;KAEd,CAAC;QACJ,CAAC,CAAC;QA8EM,iBAAY,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;QAG3B,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;yBAEW,IAAI,CAAC,eAAe;uCACN,SAAS,CAAC,IAAI,CAAC,sBAAsB,CAAC;8BAC/C,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC;gCAC9C,IAAI,CAAC,wBAAwB;yCACpB,IAAI,CAAC,uBAAuB;qDAChB,IAAI;iBACxC,mCAAmC;mCACjB,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;cAE/C,IAAI,CAAC,YAAY;gBACjB,CAAC,CAAC,IAAI,CAAA;2BACO,IAAI,CAAC,iBAAiB;0CACP;gBAC5B,CAAC,CAAC,OAAO;;yBAEE,IAAI,CAAC,OAAO;2BACV,CAAC,CAAc,EAAE,EAAE;gBAC9B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;gBAChC,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;;iBAEE;;;;;GAKd,CAAC;QAEM,2BAAsB,GAAG,GAAG,EAAE;YACpC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO,OAAO,CAAC;YAEtD,OAAO,IAAI,CAAA;;;;mBAII,GAAG,EAAE;gBACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;YACrC,CAAC;;;YAGC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;iCAC1B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;;;KAG9D,CAAC;QACJ,CAAC,CAAC;QAEM,6BAAwB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;cAEjC,IAAI,CAAC,IAAI;kBACL,IAAI,CAAC,QAAQ;mBACZ,IAAI,CAAC,SAAS;qBACZ,IAAI,CAAC,WAAW;0BACX,CAAC,CAAc,EAAE,EAAE;YACrC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;YAClC,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;;GAEJ,CAAC;IA0DJ,CAAC;IA5UC,IAAI,aAAa;QACf,IAAI,IAAI,CAAC,cAAc;YAAE,OAAO,IAAI,CAAC;QAErC,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IAED,IAAI,sBAAsB;QACxB,OAAO,WAAW,IAAI,CAAC,cAAc,UAAU,CAAC;IAClD,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,MAAM,GAAa,EAAE,CAAC;QAE1B,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CACjC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAI,IAAI,CAC1D,CAAC;YAEF,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC;gBAC7B,MAAM,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAS,EAAE,EAAE;oBAC1C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAC9B,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,CAC3B,CAAC;oBAEZ,OAAO;wBACL,GAAG,MAAM;wBACT,MAAM,EAAE,CAAC,CAAC,MAAM;wBAChB,WAAW,EAAE,CAAC,CAAC,WAAW;wBAC1B,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK;qBACtC,CAAC;gBACJ,CAAC,CAAC,CAAC;SACN;QAED,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAEpD,OAAO,MAAM;aACV,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC;aAClB,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,CAAC;YACxB,GAAG,MAAM;YACT,KAAK,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK;SAChD,CAAC,CAAC,CAAC;IACR,CAAC;IAEO,KAAK,CAAC,UAAU;QACtB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CACjC,CAAC,aAAwC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YACrE,GAAG,aAAa;YAChB,CAAC,WAAW,CAAC,EAAE,KAAK;SACrB,CAAC,EACF,EAAE,CACH,CAAC;QAEF,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,MAAM,SAAS,GAA8B;gBAC3C,IAAI,EAAE,IAAI,CAAC,YAAY;gBACvB,KAAK,EAAE,IAAI,CAAC,aAAa;gBACzB,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAC1B,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;gBAC9B,GAAG,OAAO;aACX,CAAC;YAEF,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAC1C,MAAM,YAAY,GAAG,IAAI,eAAe,CAAC,SAAS,CAAC,CAAC;YACpD,GAAG,CAAC,MAAM,GAAG,YAAY,CAAC,QAAQ,EAAE,CAAC;YACrC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;SACvD;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE;gBACN,UAAU,EAAE,IAAI,CAAC,YAAY;gBAC7B,SAAS,EAAE,IAAI,CAAC,aAAa;gBAC7B,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO;gBACP,gBAAgB,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC;oBACjD,WAAW,EAAE,CAAC,CAAC,WAAW;oBAC1B,QAAQ,EAAE,CAAC,CAAC,aAAa;iBAC1B,CAAC,CAAC;aACJ;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,UAAU,CAAC,SAAiB,EAAE;QAC5B,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;YAChC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;aAAM;YACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;SACpE;QACD,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAE3B,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAiCD,wBAAwB,CAAC,OAAiB;QACxC,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,YAAY,CAAC,OAAO,CAClB,IAAI,CAAC,sBAAsB,EAC3B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CACxB,CAAC;SACH;IACH,CAAC;IAED,KAAK,CAAC,uBAAuB;;QAC3B,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAChD,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,KAAK,IAAI,CAC3C,CAAC;QACF,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAC/C,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,KAAK,IAAI,CAC3C,CAAC;QACF,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAC/C,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,KAAK,IAAI,CAChD,CAAC;QAEF,MAAM,UAAU,GAAG;YACjB,GAAG,cAAc,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,MAAK,IAAI,CAAC;YAChE,GAAG,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,MAAK,IAAI,CAAC;YAC/D,GAAG,aAAa;SACjB,CAAC;QAEF,qDAAqD;QACrD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAC5B,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,0CAAE,gBAAgB,CAAC,IAAI,CAAC,KAAI,EAAE,CACpD,CAAC;QACF,IAAI,WAAW,CAAC,MAAM,EAAE;YACtB,MAAM,WAAW,GAAG,WAAW;iBAC5B,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;iBAC/D,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,YAAY,CAAC;iBAC/C,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YAEpB,MAAM,uBAAuB,GAAG,WAAW,CAAC,KAAK,CAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAC5C,CAAC;YACF,IAAI,gBAAgB,GAAa,EAAE,CAAC;YACpC,IAAI,CAAC,uBAAuB,EAAE;gBAC5B,gBAAgB,GAAG,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;gBACzD,IAAI,CAAC,OAAO,GAAG;oBACb,GAAG,gBAAgB,CAAC,MAAM,CACxB,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,KAAK,IAAI,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,MAAK,IAAI,CACjE;oBACD,GAAG,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,MAAK,IAAI,CAAC;oBAC/D,GAAG,aAAa;iBACjB,CAAC;gBAEF,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBACtB,MAAM,IAAI,CAAC,cAAc,CAAC;gBAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;aACxB;YACD,IAAI,CAAC,wBAAwB,CAC3B,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAClE,CAAC;SACH;IACH,CAAC;IAED,KAAK,CAAC,wBAAwB,CAAC,CAAc;QAC3C,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;QAC9C,IAAI,CAAC,wBAAwB,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAEjD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,oBAAoB,CAAC,CAAc;QACjC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAc,EAAE,EAAU,EAAE,EAAE;YACtD,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAC;QAC3C,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAsED,aAAa;QACX,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAU,EAAE,EAAE;gBACpE,IAAI,MAAM,CAAC,MAAM,KAAK,IAAI;oBAAE,OAAO,OAAO,CAAC;gBAE3C,OAAO,IAAI,CAAA;YACP,oBAAoB,CACpB,GAAG,EAAE,CACH,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAClE,IAAI,CAAC,aAAa,CACnB;YACC,kBAAkB,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE,CAAC;;kBAErC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC;oBACrB,MAAM,CAAC,MAAM;2BACN,MAAM,CAAC,WAAW;iBAC5B,MAAM,CAAC,IAAI;+BACG,CAAC;YAC1B,CAAC,CAAC,EAAE,CAAC;SACN;QAED,OAAO,IAAI,CAAA,2CAA2C,CAAC;IACzD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,kBAAkB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IACvD,IAAI,CAAC,YACP,EAAE;;UAEA,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE;UAC/C,CAAC,IAAI,CAAC,SAAS;YACf,CAAC,CAAC,IAAI,CAAA;yBACS,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU;gBAC5C,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC;gBACnC,CAAC,CAAC,IAAI,CAAC,IAAI;;6CAEgB,IAAI,CAAC,uBAAuB;;2BAE9C,IAAI,CAAC,uBAAuB;;kBAErC,IAAI,CAAC,aAAa,EAAE;;gBAEtB,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS;gBACzC,CAAC,CAAC,IAAI,CAAA,8BAA8B;gBACpC,CAAC,CAAC,OAAO,EAAE;YACjB,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,QAAQ,GAAG,CAAC;YACjB,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE;YAC/B,CAAC,CAAC,IAAI,CAAC,wBAAwB,EAAE;;;;KAItC,CAAC;IACJ,CAAC;;AA/Xe,aAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAEtB;IAArB,KAAK,CAAC,aAAa,CAAC;oCAAoB;AAGzC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,2BAA2B,EAAE,CAAC;uDAC3B;AAEb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAmB;AAEnB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uCAAwB;AAEvB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oCAAkB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAyC;AAExC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAoB;AAElB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAoB;AAEQ;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CAAqB;AAEhD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAsB;AAErB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAU;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAe;AAEf;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yCAAwC;AAEtC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAiB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgD;AAE9C;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAqB;AAEtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iDACrB;AAEwD;IAA5D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;8CACrD;AAEsB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mEACrB;AAEE;IAAR,KAAK,EAAE;uCAAgC;AAE/B;IAAR,KAAK,EAAE;yCAAmB;AAElB;IAAR,KAAK,EAAE;0CAAoB","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '@vaadin/grid';\nimport { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './components/IxGridDownloadMenu.js';\nimport './components/IxPagination.js';\nimport './components/IxGridColumnFilter.js';\nimport './components/IxGridRowFilter.js';\nimport type { Filter } from './components/IxGridRowFilter.js';\nimport { IxGridViewStyles } from './grid-view-styles.js';\nimport { copy } from './ix-grid-copy.js';\nimport { IxGridDownloadMenuItemModel } from './models/IxGridDownloadMenuItemModel.js';\n\nexport interface Row {\n [key: string]: string;\n}\n\nexport type FilterOperator = 'equals' | 'contains';\n\nexport interface Column {\n name: string;\n header: string;\n bodyRenderer: (row: Row) => any;\n width?: string;\n sortable?: boolean;\n filterable?: boolean;\n hidden?: boolean;\n frozenToEnd?: boolean;\n filterOperators?: FilterOperator[];\n}\n\nexport class IxGrid extends LitElement {\n static readonly styles = [IxGridViewStyles];\n\n @query('vaadin-grid') grid!: HTMLElement;\n\n @property({ type: Boolean, attribute: 'column-reordering-allowed' })\n columnReorderingAllowed: boolean = false;\n\n @property({ type: String }) variantClass = '';\n\n @property({ type: Array }) columns: Column[] = [];\n\n @property({ type: Array }) rows: Row[] = [];\n\n @property({ type: String }) defaultEmptyText = 'No data to display';\n\n @property({ type: String }) sortedColumn = '';\n\n @property({ type: String }) sortDirection = '';\n\n @property({ type: Boolean }) hideHeader = false;\n\n @property({ type: Boolean, attribute: 'hide-filters' }) hideFilters = false;\n\n @property({ type: Number }) rowLimit: number = 0;\n\n @property({ type: Number }) page = 1;\n\n @property({ type: Number }) pageSize = 10;\n\n @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];\n\n @property({ type: Number }) recordCount = 0;\n\n @property({ type: String }) localStorageID: string | undefined = undefined;\n\n @property({ type: Boolean }) showDownload = true;\n\n @property({ type: Array }) downloadMenuItems: IxGridDownloadMenuItemModel[] =\n [];\n\n @property({ type: Boolean, attribute: 'add-params-to-url' }) addParamsToURL =\n true;\n\n @property({ type: Boolean }) refreshDataOnColumnVisibilityChange: boolean =\n true;\n\n @state() private filters: Filter[] = [];\n\n @state() isLoading = false;\n\n @state() isExpanded = false;\n\n get isPersistable() {\n if (this.localStorageID) return true;\n\n return false;\n }\n\n get columnNames() {\n return this.columns.map((column: Column) => column.name);\n }\n\n get columnsLocalStorageKey() {\n return `ix-grid-${this.localStorageID}-columns`;\n }\n\n get arrangedColumns() {\n let colums: Column[] = [];\n\n if (this.isPersistable) {\n const preservedColumns = JSON.parse(\n localStorage.getItem(this.columnsLocalStorageKey) || '[]'\n );\n\n if (preservedColumns.length > 0)\n colums = preservedColumns.map((c: Column) => {\n const column = this.columns.find(\n (col: Column) => col.name === c.name\n ) as Column;\n\n return {\n ...column,\n hidden: c.hidden,\n frozenToEnd: c.frozenToEnd,\n width: !c.width ? undefined : c.width,\n };\n });\n }\n\n if (colums.length === 0) colums = [...this.columns];\n\n return colums\n .filter(col => col)\n .map((column: Column) => ({\n ...column,\n width: !column.width ? undefined : column.width,\n }));\n }\n\n private async updatePage() {\n const filters = this.filters.reduce(\n (columnFilters: { [key: string]: string }, { columnField, value }) => ({\n ...columnFilters,\n [columnField]: value,\n }),\n {}\n );\n\n if (this.addParamsToURL) {\n const urlParams: { [key: string]: string } = {\n sort: this.sortedColumn,\n order: this.sortDirection,\n page: this.page.toString(),\n size: this.pageSize.toString(),\n ...filters,\n };\n\n const url = new URL(window.location.href);\n const searchParams = new URLSearchParams(urlParams);\n url.search = searchParams.toString();\n window.history.replaceState(null, '', url.toString());\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {\n columnName: this.sortedColumn,\n sortOrder: this.sortDirection,\n page: this.page,\n pageSize: this.pageSize,\n filters,\n filtersOperators: this.filters.map((f: Filter) => ({\n columnField: f.columnField,\n operator: f.operatorValue,\n })),\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n handleSort(column: string = '') {\n if (this.sortedColumn !== column) {\n this.sortDirection = 'asc';\n } else {\n this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';\n }\n this.sortedColumn = column;\n\n this.updatePage();\n }\n\n private renderColumnHeader = (\n column: Column,\n index: number,\n length: number\n ) => {\n const headerClasses = classMap({\n header: true,\n frozen: !!column.frozenToEnd,\n first: index === 0,\n last: index === length - 1,\n });\n\n return html`\n <div\n @click=${() => column.sortable && this.handleSort(column.name)}\n @keyDown=${() => column.sortable && this.handleSort(column.name)}\n class=${headerClasses}\n >\n <span class=\"header-label\">${column.header}</span>\n ${column.sortable\n ? html`<ix-icon title=\"Sort\" class=\"header-sort-icon\"\n >${this.sortDirection === 'desc' &&\n this.sortedColumn === column.name\n ? `arrow_upward`\n : `arrow_downward`}</ix-icon\n >`\n : nothing}\n </div>\n `;\n };\n\n setColumnsToLocalStorage(columns: Column[]) {\n if (this.isPersistable) {\n localStorage.setItem(\n this.columnsLocalStorageKey,\n JSON.stringify(columns)\n );\n }\n }\n\n async reorderColumnsFromTable() {\n const visibleColumns = this.arrangedColumns.filter(\n (column: Column) => column.hidden !== true\n );\n const hiddenColumns = this.arrangedColumns.filter(\n (column: Column) => column.hidden === true\n );\n const frozenColumns = this.arrangedColumns.filter(\n (column: Column) => column.frozenToEnd === true\n );\n\n const allColumns = [\n ...visibleColumns.filter(column => column?.frozenToEnd !== true),\n ...hiddenColumns.filter(column => column?.frozenToEnd !== true),\n ...frozenColumns,\n ];\n\n // calulate column order from table header flex order\n const headerNodes = Array.from(\n this.grid?.shadowRoot?.querySelectorAll('th') || []\n );\n if (headerNodes.length) {\n const columnOrder = headerNodes\n .map((el, id) => ({ id, flexPosition: Number(el.style.order) }))\n .sort((a, b) => a.flexPosition - b.flexPosition)\n .map(el => el.id);\n\n const columnsCorrectlyOrdered = columnOrder.every(\n (x, i) => i === 0 || x > columnOrder[i - 1]\n );\n let reorderedColumns: Column[] = [];\n if (!columnsCorrectlyOrdered) {\n reorderedColumns = columnOrder.map(id => allColumns[id]);\n this.columns = [\n ...reorderedColumns.filter(\n column => column.hidden !== true && column?.frozenToEnd !== true\n ),\n ...hiddenColumns.filter(column => column?.frozenToEnd !== true),\n ...frozenColumns,\n ];\n\n this.isLoading = true;\n await this.updateComplete;\n this.isLoading = false;\n }\n this.setColumnsToLocalStorage(\n reorderedColumns.length > 0 ? [...this.columns] : [...allColumns]\n );\n }\n }\n\n async reorderColumnsFromFilter(e: CustomEvent) {\n this.columns = [...e.detail.reorderedColumns];\n this.setColumnsToLocalStorage([...this.columns]);\n\n this.isLoading = true;\n await this.updateComplete;\n this.isLoading = false;\n }\n\n handleOnColumnFilter(e: CustomEvent) {\n e.detail.columns.forEach((column: Column, id: number) => {\n this.columns[id].hidden = column?.hidden;\n });\n this.updatePage();\n }\n\n private renderHeader = () => html`\n <div class=\"grid-header\">\n <slot name=\"header\"><div class=\"empty\"></div></slot>\n ${this.hideFilters\n ? nothing\n : html`<div class=\"grid-menu\">\n <ix-grid-column-filter\n .columns=${this.arrangedColumns}\n columnsLocalStorageKey=${ifDefined(this.columnsLocalStorageKey)}\n @columnFilter=${(e: CustomEvent) => this.handleOnColumnFilter(e)}\n @reorderColumns=${this.reorderColumnsFromFilter}\n .columnReorderingAllowed=${this.columnReorderingAllowed}\n .refreshDataOnColumnVisibilityChange=${this\n .refreshDataOnColumnVisibilityChange}\n .requestGridUpdate=${() => this.requestUpdate()}\n ></ix-grid-column-filter>\n ${this.showDownload\n ? html`<ix-grid-download-menu\n .items=${this.downloadMenuItems}\n ></ix-grid-download-menu>`\n : nothing}\n <ix-grid-row-filter\n .columns=${this.columns}\n @rowFilter=${(e: CustomEvent) => {\n this.filters = e.detail.filters;\n this.updatePage();\n }}\n ></ix-grid-row-filter>\n </div>`}\n </div>\n <div class=\"touch-edge\">\n <slot name=\"under-header\"></slot>\n </div>\n `;\n\n private renderRowLimitControls = () => {\n if (this.rows.length <= this.rowLimit) return nothing;\n\n return html`\n <div class=\"row-limit\">\n <ix-button\n appearance=\"text\"\n @click=${() => {\n this.isExpanded = !this.isExpanded;\n }}\n has-icon\n >\n ${this.isExpanded ? copy.viewLess : copy.viewMore}\n <ix-icon slot=\"icon\">${this.isExpanded ? 'remove' : 'add'}</ix-icon>\n </ix-button>\n </div>\n `;\n };\n\n private renderPaginationControls = () => html`\n <ix-pagination\n .page=${this.page}\n .pageSize=${this.pageSize}\n .pageSizes=${this.pageSizes}\n .recordCount=${this.recordCount}\n @updatePagination=${(e: CustomEvent) => {\n this.page = e.detail.page;\n this.pageSize = e.detail.pageSize;\n this.updatePage();\n }}\n ></ix-pagination>\n `;\n\n renderColumns() {\n if (this.arrangedColumns.length > 0) {\n return html`${this.arrangedColumns.map((column: Column, id: number) => {\n if (column.hidden === true) return nothing;\n\n return html`<vaadin-grid-column\n ${columnHeaderRenderer(\n () =>\n this.renderColumnHeader(column, id, this.arrangedColumns.length),\n this.sortDirection\n )}\n ${columnBodyRenderer(column.bodyRenderer, [])}\n resizable\n width=${ifDefined(column.width)}\n ?hidden=${column.hidden}\n ?frozen-to-end=${column.frozenToEnd}\n path=${column.name}\n ></vaadin-grid-column>`;\n })}`;\n }\n\n return html`<vaadin-grid-column></vaadin-grid-column>`;\n }\n\n render() {\n return html`\n <div\n class=${`grid-container ${this.isLoading ? 'loading' : ''} ${\n this.variantClass\n }`}\n >\n ${this.hideHeader ? nothing : this.renderHeader()}\n ${!this.isLoading\n ? html`<vaadin-grid\n .items=${this.rowLimit > 0 && !this.isExpanded\n ? this.rows.slice(0, this.rowLimit)\n : this.rows}\n all-rows-visible\n ?column-reordering-allowed=${this.columnReorderingAllowed}\n theme=\"no-border\"\n @mouseup=${this.reorderColumnsFromTable}\n >\n ${this.renderColumns()}\n </vaadin-grid>\n ${this.rows.length === 0 && !this.isLoading\n ? html`<slot name=\"no-rows\"></slot>`\n : nothing}`\n : nothing}\n ${this.rowLimit > 0\n ? this.renderRowLimitControls()\n : this.renderPaginationControls()}\n\n <slot name=\"footer\"></slot>\n </div>\n `;\n }\n}\n"]}
package/dist/components/IxGridColumnFilter.d.ts CHANGED
@@ -7,6 +7,9 @@ export declare class IxGridColumnFilter extends LitElement {
7
7
  static readonly styles: import("lit").CSSResult[];
8
8
  columns: Column[];
9
9
  columnsLocalStorageKey: string | undefined;
10
+ columnReorderingAllowed: boolean;
11
+ refreshDataOnColumnVisibilityChange: boolean;
12
+ requestGridUpdate: any;
10
13
  private isDropdownVisible;
11
14
  disabledColumns: string[];
12
15
  dragEvent: {
package/dist/components/IxGridColumnFilter.js CHANGED
@@ -16,6 +16,8 @@ let IxGridColumnFilter = class IxGridColumnFilter extends LitElement {
16
16
  super(...arguments);
17
17
  this.columns = [];
18
18
  this.columnsLocalStorageKey = undefined;
19
+ this.columnReorderingAllowed = false;
20
+ this.refreshDataOnColumnVisibilityChange = true;
19
21
  this.isDropdownVisible = false;
20
22
  this.disabledColumns = [];
21
23
  this.dragEvent = {
@@ -79,7 +81,10 @@ let IxGridColumnFilter = class IxGridColumnFilter extends LitElement {
79
81
  if (this.columnsLocalStorageKey) {
80
82
  localStorage.setItem(this.columnsLocalStorageKey, JSON.stringify([...this.columns]));
81
83
  }
82
- this.dispatchUpdate();
84
+ if (this.refreshDataOnColumnVisibilityChange)
85
+ this.dispatchUpdate();
86
+ else
87
+ this.requestGridUpdate();
83
88
  }
84
89
  dispatchUpdate(columns = this.columns) {
85
90
  this.dispatchEvent(new CustomEvent('columnFilter', {
@@ -91,38 +96,44 @@ let IxGridColumnFilter = class IxGridColumnFilter extends LitElement {
91
96
  }));
92
97
  }
93
98
  dragstart(e) {
94
- const el = e.target;
95
- this.dragEvent.sourceEl = el;
96
- el.style.opacity = '0.3';
97
- const id = Number(el.getAttribute('data-id'));
98
- this.dragEvent.startId = id;
99
+ if (this.columnReorderingAllowed) {
100
+ const el = e.target;
101
+ this.dragEvent.sourceEl = el;
102
+ el.style.opacity = '0.3';
103
+ const id = Number(el.getAttribute('data-id'));
104
+ this.dragEvent.startId = id;
105
+ }
99
106
  }
100
107
  dragend() {
101
108
  var _a;
102
- if (this.dragEvent.startId !== this.dragEvent.targetId) {
103
- const reorderedColumns = [...this.columns];
104
- const el = reorderedColumns.splice(this.dragEvent.startId, 1)[0];
105
- reorderedColumns.splice(this.dragEvent.targetId, 0, el);
106
- this.dispatchEvent(new CustomEvent('reorderColumns', {
107
- detail: {
108
- reorderedColumns,
109
- },
110
- bubbles: true,
111
- composed: true,
112
- }));
109
+ if (this.columnReorderingAllowed) {
110
+ if (this.dragEvent.startId !== this.dragEvent.targetId) {
111
+ const reorderedColumns = [...this.columns];
112
+ const el = reorderedColumns.splice(this.dragEvent.startId, 1)[0];
113
+ reorderedColumns.splice(this.dragEvent.targetId, 0, el);
114
+ this.dispatchEvent(new CustomEvent('reorderColumns', {
115
+ detail: {
116
+ reorderedColumns,
117
+ },
118
+ bubbles: true,
119
+ composed: true,
120
+ }));
121
+ }
122
+ (_a = this.dragEvent.sourceEl) === null || _a === void 0 ? void 0 : _a.style.removeProperty('opacity');
123
+ this.dragEvent = {
124
+ sourceEl: null,
125
+ startId: -1,
126
+ targetId: -1,
127
+ };
113
128
  }
114
- (_a = this.dragEvent.sourceEl) === null || _a === void 0 ? void 0 : _a.style.removeProperty('opacity');
115
- this.dragEvent = {
116
- sourceEl: null,
117
- startId: -1,
118
- targetId: -1,
119
- };
120
129
  }
121
130
  dragenter(e) {
122
- const el = e.target;
123
- if (el.classList.contains('drag-target')) {
124
- const target = Number(el.getAttribute('data-id'));
125
- this.dragEvent.targetId = target;
131
+ if (this.columnReorderingAllowed) {
132
+ const el = e.target;
133
+ if (el.classList.contains('drag-target')) {
134
+ const target = Number(el.getAttribute('data-id'));
135
+ this.dragEvent.targetId = target;
136
+ }
126
137
  }
127
138
  }
128
139
  render() {
@@ -196,6 +207,15 @@ __decorate([
196
207
  __decorate([
197
208
  property({ type: String })
198
209
  ], IxGridColumnFilter.prototype, "columnsLocalStorageKey", void 0);
210
+ __decorate([
211
+ property({ type: Boolean })
212
+ ], IxGridColumnFilter.prototype, "columnReorderingAllowed", void 0);
213
+ __decorate([
214
+ property({ type: Boolean })
215
+ ], IxGridColumnFilter.prototype, "refreshDataOnColumnVisibilityChange", void 0);
216
+ __decorate([
217
+ property({ attribute: false })
218
+ ], IxGridColumnFilter.prototype, "requestGridUpdate", void 0);
199
219
  __decorate([
200
220
  state()
201
221
  ], IxGridColumnFilter.prototype, "isDropdownVisible", void 0);
package/dist/components/IxGridColumnFilter.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IxGridColumnFilter.js","sourceRoot":"","sources":["../../src/components/IxGridColumnFilter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wCAAwC,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAG1E,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;AAEnC,MAAM,UAAU,GAAG,GAAG,CAAA;;OAEf,CAAC;AAGD,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAGsB,YAAO,GAAa,EAAE,CAAC;QAEtB,2BAAsB,GAChD,SAAS,CAAC;QAEK,sBAAiB,GAAY,KAAK,CAAC;QAE3C,oBAAe,GAAa,EAAE,CAAC;QAE/B,cAAS,GAId;YACF,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,CAAC,CAAC;YACX,QAAQ,EAAE,CAAC,CAAC;SACb,CAAC;QAaF,qBAAgB,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;gBACpC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;aAChC;QACH,CAAC,CAAC;IAwLJ,CAAC;IAvMC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC1D,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAChC,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC/D,CAAC;IAQD,IAAI,gBAAgB;QAClB,IAAI,gBAAgB,GAAa,EAAE,CAAC;QAEpC,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAC3B,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAI,IAAI,CAC1D,CAAC;SACH;QACD,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IAED,sBAAsB;QACpB,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE;YACpC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,gBAAgB;iBACzC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;iBACrB,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YACpB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE;gBAClC,IAAI,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;oBAC9C,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC;iBAChC;YACH,CAAC,CAAC,CAAC;SACJ;QACD,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,YAAY,CAAC,EAAU;QACrB,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC;QAEnD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO;aAChC,MAAM,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;aACzC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAExC,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,YAAY,CAAC,OAAO,CAClB,IAAI,CAAC,sBAAsB,EAC3B,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAClC,CAAC;SACH;QAED,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,YAAY,CAAC,CAAQ,EAAE,EAAU;;QAC/B,MAAM,KAAK,GAAG,CAAC,CAAC,MAAqB,CAAC;QACtC,MAAM,EAAE,GAAG,MAAA,KAAK,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAEpD,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,OAAO,CAAA,CAAC;QAEvC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO;aAChC,MAAM,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;aACzC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAExC,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,YAAY,CAAC,OAAO,CAClB,IAAI,CAAC,sBAAsB,EAC3B,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAClC,CAAC;SACH;QAED,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;QACnC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE;gBACN,OAAO;aACR;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,SAAS,CAAC,CAAY;QACpB,MAAM,EAAE,GAAG,CAAC,CAAC,MAAqB,CAAC;QACnC,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,EAAE,CAAC;QAC7B,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,MAAM,EAAE,GAAG,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAW,CAAC,CAAC;QACxD,IAAI,CAAC,SAAS,CAAC,OAAO,GAAG,EAAE,CAAC;IAC9B,CAAC;IAED,OAAO;;QACL,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE;YACtD,MAAM,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;YAC3C,MAAM,EAAE,GAAG,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACjE,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;YACxD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;gBAChC,MAAM,EAAE;oBACN,gBAAgB;iBACjB;gBACD,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;SACH;QACD,MAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,0CAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QACzD,IAAI,CAAC,SAAS,GAAG;YACf,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,CAAC,CAAC;YACX,QAAQ,EAAE,CAAC,CAAC;SACb,CAAC;IACJ,CAAC;IAED,SAAS,CAAC,CAAY;QACpB,MAAM,EAAE,GAAG,CAAC,CAAC,MAAqB,CAAC;QACnC,IAAI,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;YACxC,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAW,CAAC,CAAC;YAC5D,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,MAAM,CAAC;SAClC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,GAAG,EAAE;YACZ,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAChC,CAAC;mBACU,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;gBAC/B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;aAC/B;QACH,CAAC;;;;;;;;;;;;;;;;;;;;UAoBC,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC;YAC/B,CAAC,CAAC,IAAI,CAAA,4BAA4B;YAClC,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,iBAAiB;YACtB,CAAC,CAAC,IAAI,CAAA;;0BAEU,CAAC,CAAY,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;2BACnC,IAAI,CAAC,SAAS;yBAChB,IAAI,CAAC,OAAO;2BACV,IAAI,CAAC,SAAS;;gBAEzB,MAAM,CACN,IAAI,CAAC,OAAO,EACZ,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EACzB,CAAC,GAAW,EAAE,EAAU,EAAE,EAAE,CAAC,IAAI,CAAA;0BACvB,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;4BAG1B,+BACN,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EACjD,EAAE;;8BAEQ,EAAE;;;kCAGE,CAAC,GAAG,CAAC,MAAM;gCACb,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC;;;yBAG7C,GAAG,CAAC,MAAM;6CACU,UAAU;;uBAEhC,CACR;mBACI;YACT,CAAC,CAAC,OAAO;;WAER,CAAC;IACV,CAAC;;AA3Ne,yBAAM,GAAG,CAAC,gBAAgB,EAAE,wBAAwB,CAAC,CAAC;AAE3C;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;mDAAwB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEACf;AAEH;IAAR,KAAK,EAAE;6DAA4C;AAE3C;IAAR,KAAK,EAAE;2DAAgC;AAE/B;IAAR,KAAK,EAAE;qDAQN;AApBS,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CA6N9B;SA7NY,kBAAkB","sourcesContent":["import { LitElement, html, nothing, svg } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-switch/ix-switch.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { IxGridColumnFilterStyles } from './grid-column-filter-styles.js';\nimport type { Column } from '../IxGrid.js';\n\nconst triggerKeys = [' ', 'Enter'];\n\nconst handleIcon = svg`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM7 12C7 10.9 7.9 10 9 10C10.1 10 11 10.9 11 12C11 13.1 10.1 14 9 14C7.9 14 7 13.1 7 12ZM9 20C10.1 20 11 19.1 11 18C11 16.9 10.1 16 9 16C7.9 16 7 16.9 7 18C7 19.1 7.9 20 9 20ZM17 6C17 7.1 16.1 8 15 8C13.9 8 13 7.1 13 6C13 4.9 13.9 4 15 4C16.1 4 17 4.9 17 6ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM13 18C13 16.9 13.9 16 15 16C16.1 16 17 16.9 17 18C17 19.1 16.1 20 15 20C13.9 20 13 19.1 13 18Z\" fill=\"#1456e0\" />\n</svg>`;\n\n@customElement('ix-grid-column-filter')\nexport class IxGridColumnFilter extends LitElement {\n static readonly styles = [IxGridViewStyles, IxGridColumnFilterStyles];\n\n @property({ type: Array }) columns: Column[] = [];\n\n @property({ type: String }) columnsLocalStorageKey: string | undefined =\n undefined;\n\n @state() private isDropdownVisible: boolean = false;\n\n @state() disabledColumns: string[] = [];\n\n @state() dragEvent: {\n sourceEl: HTMLElement | null;\n startId: number;\n targetId: number;\n } = {\n sourceEl: null,\n startId: -1,\n targetId: -1,\n };\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this.outerInteraction);\n this.initializeLocalStorage();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener('click', this.outerInteraction);\n }\n\n outerInteraction = (e: Event) => {\n if (!e.composedPath().includes(this)) {\n this.isDropdownVisible = false;\n }\n };\n\n get preservedColumns() {\n let preservedColumns: Column[] = [];\n\n if (this.columnsLocalStorageKey) {\n preservedColumns = JSON.parse(\n localStorage.getItem(this.columnsLocalStorageKey) || '[]'\n );\n }\n return preservedColumns;\n }\n\n initializeLocalStorage() {\n if (this.preservedColumns.length > 0) {\n this.disabledColumns = this.preservedColumns\n .filter(c => c.hidden)\n .map(c => c.name);\n this.columns.forEach((column, id) => {\n if (this.disabledColumns.includes(column.name)) {\n this.columns[id].hidden = true;\n }\n });\n }\n this.dispatchUpdate();\n }\n\n toggleColumn(id: number) {\n this.columns[id].hidden = !this.columns[id].hidden;\n\n this.disabledColumns = this.columns\n .filter((column: Column) => column.hidden)\n .map((column: Column) => column.name);\n\n if (this.columnsLocalStorageKey) {\n localStorage.setItem(\n this.columnsLocalStorageKey,\n JSON.stringify([...this.columns])\n );\n }\n\n this.dispatchUpdate();\n }\n\n updateColumn(e: Event, id: number) {\n const input = e.target as HTMLElement;\n const el = input.shadowRoot?.querySelector('input');\n\n this.columns[id].hidden = !el?.checked;\n\n this.disabledColumns = this.columns\n .filter((column: Column) => column.hidden)\n .map((column: Column) => column.name);\n\n if (this.columnsLocalStorageKey) {\n localStorage.setItem(\n this.columnsLocalStorageKey,\n JSON.stringify([...this.columns])\n );\n }\n\n this.dispatchUpdate();\n }\n\n dispatchUpdate(columns = this.columns) {\n this.dispatchEvent(\n new CustomEvent('columnFilter', {\n detail: {\n columns,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n dragstart(e: DragEvent) {\n const el = e.target as HTMLElement;\n this.dragEvent.sourceEl = el;\n el.style.opacity = '0.3';\n const id = Number(el.getAttribute('data-id') as string);\n this.dragEvent.startId = id;\n }\n\n dragend() {\n if (this.dragEvent.startId !== this.dragEvent.targetId) {\n const reorderedColumns = [...this.columns];\n const el = reorderedColumns.splice(this.dragEvent.startId, 1)[0];\n reorderedColumns.splice(this.dragEvent.targetId, 0, el);\n this.dispatchEvent(\n new CustomEvent('reorderColumns', {\n detail: {\n reorderedColumns,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n this.dragEvent.sourceEl?.style.removeProperty('opacity');\n this.dragEvent = {\n sourceEl: null,\n startId: -1,\n targetId: -1,\n };\n }\n\n dragenter(e: DragEvent) {\n const el = e.target as HTMLElement;\n if (el.classList.contains('drag-target')) {\n const target = Number(el.getAttribute('data-id') as string);\n this.dragEvent.targetId = target;\n }\n }\n\n render() {\n return html`<div class=\"grid-menu\">\n <span\n @click=${() => {\n this.isDropdownVisible = true;\n }}\n @keyDown=${(e: KeyboardEvent) => {\n if (triggerKeys.includes(e.key)) {\n this.isDropdownVisible = true;\n }\n }}\n class=\"list list-dropdown\"\n >\n <ix-icon-button appearance=\"default\">\n <svg\n slot=\"default\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M3 9H7V5H3V9ZM7 14H3V10H7V14ZM7 19H3V15H7V19ZM20 14H8V10H20V14ZM8 19H20V15H8V19ZM8 9V5H20V9H8Z\"\n fill=\"#1456E0\"\n />\n </svg>\n </ix-icon-button>\n ${this.disabledColumns.length > 0\n ? html`<div class=\"active\"></div>`\n : nothing}\n ${this.isDropdownVisible\n ? html` <div\n class=\"dropdown-content\"\n @dragover=${(e: DragEvent) => e.preventDefault()}\n @dragstart=${this.dragstart}\n @dragend=${this.dragend}\n @dragenter=${this.dragenter}\n >\n ${repeat(\n this.columns,\n (col: Column) => col.name,\n (col: Column, id: number) => html`<div\n class=${col.hidden ? 'disabled' : ''}\n >\n <label\n class=${`ix-switch-label drag-target ${\n this.dragEvent.startId === id ? 'dragOrigin' : ''\n }`}\n draggable=\"true\"\n data-id=${id}\n >\n <ix-switch\n .selected=${!col.hidden}\n @change=${(e: Event) => this.updateColumn(e, id)}\n >\n </ix-switch>\n <p>${col.header}</p>\n <div class=\"draggable\">${handleIcon}</ix-div>\n </label>\n </div>`\n )}\n </div>`\n : nothing}\n </span>\n </div>`;\n }\n}\n"]}
1
+ {"version":3,"file":"IxGridColumnFilter.js","sourceRoot":"","sources":["../../src/components/IxGridColumnFilter.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing, svg } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-switch/ix-switch.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { IxGridColumnFilterStyles } from './grid-column-filter-styles.js';\nimport type { Column } from '../IxGrid.js';\n\nconst triggerKeys = [' ', 'Enter'];\n\nconst handleIcon = svg`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM7 12C7 10.9 7.9 10 9 10C10.1 10 11 10.9 11 12C11 13.1 10.1 14 9 14C7.9 14 7 13.1 7 12ZM9 20C10.1 20 11 19.1 11 18C11 16.9 10.1 16 9 16C7.9 16 7 16.9 7 18C7 19.1 7.9 20 9 20ZM17 6C17 7.1 16.1 8 15 8C13.9 8 13 7.1 13 6C13 4.9 13.9 4 15 4C16.1 4 17 4.9 17 6ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM13 18C13 16.9 13.9 16 15 16C16.1 16 17 16.9 17 18C17 19.1 16.1 20 15 20C13.9 20 13 19.1 13 18Z\" fill=\"#1456e0\" />\n</svg>`;\n\n@customElement('ix-grid-column-filter')\nexport class IxGridColumnFilter extends LitElement {\n static readonly styles = [IxGridViewStyles, IxGridColumnFilterStyles];\n\n @property({ type: Array }) columns: Column[] = [];\n\n @property({ type: String }) columnsLocalStorageKey: string | undefined =\n undefined;\n\n @property({ type: Boolean }) columnReorderingAllowed: boolean = false;\n\n @property({ type: Boolean }) refreshDataOnColumnVisibilityChange: boolean =\n true;\n\n @property({ attribute: false }) requestGridUpdate: any;\n\n @state() private isDropdownVisible: boolean = false;\n\n @state() disabledColumns: string[] = [];\n\n @state() dragEvent: {\n sourceEl: HTMLElement | null;\n startId: number;\n targetId: number;\n } = {\n sourceEl: null,\n startId: -1,\n targetId: -1,\n };\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this.outerInteraction);\n this.initializeLocalStorage();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener('click', this.outerInteraction);\n }\n\n outerInteraction = (e: Event) => {\n if (!e.composedPath().includes(this)) {\n this.isDropdownVisible = false;\n }\n };\n\n get preservedColumns() {\n let preservedColumns: Column[] = [];\n\n if (this.columnsLocalStorageKey) {\n preservedColumns = JSON.parse(\n localStorage.getItem(this.columnsLocalStorageKey) || '[]'\n );\n }\n return preservedColumns;\n }\n\n initializeLocalStorage() {\n if (this.preservedColumns.length > 0) {\n this.disabledColumns = this.preservedColumns\n .filter(c => c.hidden)\n .map(c => c.name);\n this.columns.forEach((column, id) => {\n if (this.disabledColumns.includes(column.name)) {\n this.columns[id].hidden = true;\n }\n });\n }\n this.dispatchUpdate();\n }\n\n toggleColumn(id: number) {\n this.columns[id].hidden = !this.columns[id].hidden;\n\n this.disabledColumns = this.columns\n .filter((column: Column) => column.hidden)\n .map((column: Column) => column.name);\n\n if (this.columnsLocalStorageKey) {\n localStorage.setItem(\n this.columnsLocalStorageKey,\n JSON.stringify([...this.columns])\n );\n }\n\n this.dispatchUpdate();\n }\n\n updateColumn(e: Event, id: number) {\n const input = e.target as HTMLElement;\n const el = input.shadowRoot?.querySelector('input');\n\n this.columns[id].hidden = !el?.checked;\n\n this.disabledColumns = this.columns\n .filter((column: Column) => column.hidden)\n .map((column: Column) => column.name);\n\n if (this.columnsLocalStorageKey) {\n localStorage.setItem(\n this.columnsLocalStorageKey,\n JSON.stringify([...this.columns])\n );\n }\n\n if (this.refreshDataOnColumnVisibilityChange) this.dispatchUpdate();\n else this.requestGridUpdate();\n }\n\n dispatchUpdate(columns = this.columns) {\n this.dispatchEvent(\n new CustomEvent('columnFilter', {\n detail: {\n columns,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n dragstart(e: DragEvent) {\n if (this.columnReorderingAllowed) {\n const el = e.target as HTMLElement;\n this.dragEvent.sourceEl = el;\n el.style.opacity = '0.3';\n const id = Number(el.getAttribute('data-id') as string);\n this.dragEvent.startId = id;\n }\n }\n\n dragend() {\n if (this.columnReorderingAllowed) {\n if (this.dragEvent.startId !== this.dragEvent.targetId) {\n const reorderedColumns = [...this.columns];\n const el = reorderedColumns.splice(this.dragEvent.startId, 1)[0];\n reorderedColumns.splice(this.dragEvent.targetId, 0, el);\n this.dispatchEvent(\n new CustomEvent('reorderColumns', {\n detail: {\n reorderedColumns,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n this.dragEvent.sourceEl?.style.removeProperty('opacity');\n this.dragEvent = {\n sourceEl: null,\n startId: -1,\n targetId: -1,\n };\n }\n }\n\n dragenter(e: DragEvent) {\n if (this.columnReorderingAllowed) {\n const el = e.target as HTMLElement;\n if (el.classList.contains('drag-target')) {\n const target = Number(el.getAttribute('data-id') as string);\n this.dragEvent.targetId = target;\n }\n }\n }\n\n render() {\n return html`<div class=\"grid-menu\">\n <span\n @click=${() => {\n this.isDropdownVisible = true;\n }}\n @keyDown=${(e: KeyboardEvent) => {\n if (triggerKeys.includes(e.key)) {\n this.isDropdownVisible = true;\n }\n }}\n class=\"list list-dropdown\"\n >\n <ix-icon-button appearance=\"default\">\n <svg\n slot=\"default\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M3 9H7V5H3V9ZM7 14H3V10H7V14ZM7 19H3V15H7V19ZM20 14H8V10H20V14ZM8 19H20V15H8V19ZM8 9V5H20V9H8Z\"\n fill=\"#1456E0\"\n />\n </svg>\n </ix-icon-button>\n ${this.disabledColumns.length > 0\n ? html`<div class=\"active\"></div>`\n : nothing}\n ${this.isDropdownVisible\n ? html` <div\n class=\"dropdown-content\"\n @dragover=${(e: DragEvent) => e.preventDefault()}\n @dragstart=${this.dragstart}\n @dragend=${this.dragend}\n @dragenter=${this.dragenter}\n >\n ${repeat(\n this.columns,\n (col: Column) => col.name,\n (col: Column, id: number) => html`<div\n class=${col.hidden ? 'disabled' : ''}\n >\n <label\n class=${`ix-switch-label drag-target ${\n this.dragEvent.startId === id ? 'dragOrigin' : ''\n }`}\n draggable=\"true\"\n data-id=${id}\n >\n <ix-switch\n .selected=${!col.hidden}\n @change=${(e: Event) => this.updateColumn(e, id)}\n >\n </ix-switch>\n <p>${col.header}</p>\n <div class=\"draggable\">${handleIcon}</ix-div>\n </label>\n </div>`\n )}\n </div>`\n : nothing}\n </span>\n </div>`;\n }\n}\n"]}
package/dist/ix-grid.min.js CHANGED
@@ -3,6 +3,6 @@ import{__decorate}from"tslib";import{css,LitElement,html,svg,nothing}from"lit";i
3
3
  12px
4
4
  )}.pagination{display:flex;align-items:center;justify-content:end;gap:0;font-size:12px;margin:1rem}.pagination-nav{display:flex;margin-left:2rem}.rows-per-page{color:var(--ix-text-dark-second,rgba(9,34,65,.6))}ix-icon-button{--md-icon-button-icon-color:black;--md-icon-button-hover-icon-color:black;--md-icon-button-pressed-icon-color:black;--md-icon-button-focus-icon-color:black;--ix-icon-line-height:1}ix-select{--md-menu-container-color:#fff;--md-filled-select-text-field-container-color:#fff;--md-filled-select-text-field-active-indicator-height:0px;--md-filled-select-text-field-hover-indicator-height:0px;--md-filled-field-hover-active-indicator-height:0px;--md-filled-field-focus-active-indicator-height:0px;--md-filled-field-bottom-space:4px;--md-filled-field-top-space:4px;--md-filled-select-text-field-focus-trailing-icon-color:rgb(20, 86, 224);--md-filled-select-text-field-focus-active-indicator-color:var(
5
5
  --md-filled-select-text-field-focus-trailing-icon-color
6
- )}ix-select-option{--md-menu-item-selected-container-color:rgba(20, 86, 224, 0.1)}`),copy={activeFilter:"active filter",filters:"Filters",hideFilters:"Hide Filters",showFilters:"Show Filters",rowsPerPage:"Rows per page",user:"user",viewMore:"VIEW MORE",viewLess:"VIEW LESS"},IxPagination=class extends LitElement{constructor(){super(...arguments),this.recordCount=0,this.page=1,this.pageSize=10,this.pageSizes=[5,10,25,100]}changePage(e){this.page+=e,this.updatePagination()}updatePagination(e=this.page,t=this.pageSize){this.dispatchEvent(new CustomEvent("updatePagination",{detail:{page:e,pageSize:t},bubbles:!0,composed:!0}))}render(){let e=1<this.page,t=this.recordCount>this.page*this.pageSize;return html`<div class="pagination"><p class="rows-per-page">${copy.rowsPerPage}:</p><ix-select wide-menu menu-positioning="fixed" class="pagination__select-input" @request-selection="${e=>{e=e.target;this.pageSize=Number(e.value),this.updatePagination()}}" selected-index="${this.pageSizes.indexOf(this.pageSize)}" filled>${this.pageSizes.map(e=>html`<ix-select-option class="select-option" value="${e}"><div slot="headline">${e}</div></ix-select-option>`)}</ix-select><p>${(this.page-1)*this.pageSize+1} - ${this.page*this.pageSize>this.recordCount?html`${this.recordCount}`:html`${this.page*this.pageSize}`} of ${this.recordCount}</p><div class="pagination-nav"><ix-icon-button ?disabled="${!e}" @click="${()=>e&&this.changePage(-1)}" icon="chevron_left"></ix-icon-button><ix-icon-button ?disabled="${!t}" @click="${()=>t&&this.changePage(1)}" icon="chevron_right"></ix-icon-button></div></div>`}},IxGridColumnFilterStyles=(IxPagination.styles=[IxGridViewStyles,PaginationStyles],__decorate([property({type:Number})],IxPagination.prototype,"recordCount",void 0),__decorate([property({type:Number})],IxPagination.prototype,"page",void 0),__decorate([property({type:Number})],IxPagination.prototype,"pageSize",void 0),__decorate([property({type:Array})],IxPagination.prototype,"pageSizes",void 0),IxPagination=__decorate([customElement("ix-pagination")],IxPagination),css`.dropdown-content{position:absolute;background-color:#fff;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;-webkit-box-align:center;align-items:center;cursor:pointer;vertical-align:middle;-webkit-tap-highlight-color:transparent;padding:10px;width:247px;left:-100px;border-radius:16px}.dropdown-content>div{margin:0;font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:24px;letter-spacing:.25px;color:#092241;display:block;cursor:pointer}.dropdown-content span:hover{background-color:#f1f1f1}.dropdown-content label{display:flex;align-items:center}.dropdown-content label.dragOrigin{background:#ff000017;outline:1px #ff9d9d dashed}.dropdown-content label p{width:158px}.dropdown-content label .draggable{font-size:24px;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.dropdown-content label .draggable path{fill:var(--md-sys-color-primary,#1456e0)}.active{position:absolute;right:0;top:0;height:8px;width:8px;background-color:#db0028;border-radius:50%}ix-switch{padding:0 0 0 6px;--md-switch-selected-handle-color:var(--ix-sys-primary);--md-switch-selected-pressed-handle-color:var(--ix-sys-primary);--md-switch-selected-hover-handle-color:var(--ix-sys-primary);--md-switch-selected-focus-handle-color:var(--ix-sys-primary);--md-switch-selected-track-color:#7ba0ee;--md-switch-selected-pressed-track-color:#7ba0ee;--md-switch-selected-hover-track-color:#7ba0ee;--md-switch-selected-focus-track-color:#7ba0ee;--md-switch-track-height:14px;--md-switch-track-width:36px;--md-switch-track-outline-width:0;--md-switch-handle-color:white;--md-switch-pressed-handle-color:white;--md-switch-hover-handle-color:white;--md-switch-focus-handle-color:white;--md-switch-handle-width:20px;--md-switch-handle-height:20px;--md-switch-selected-handle-width:20px;--md-switch-selected-handle-height:20px;display:flex;width:48px}.list{position:relative}`),triggerKeys=[" ","Enter"],handleIcon=svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM7 12C7 10.9 7.9 10 9 10C10.1 10 11 10.9 11 12C11 13.1 10.1 14 9 14C7.9 14 7 13.1 7 12ZM9 20C10.1 20 11 19.1 11 18C11 16.9 10.1 16 9 16C7.9 16 7 16.9 7 18C7 19.1 7.9 20 9 20ZM17 6C17 7.1 16.1 8 15 8C13.9 8 13 7.1 13 6C13 4.9 13.9 4 15 4C16.1 4 17 4.9 17 6ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM13 18C13 16.9 13.9 16 15 16C16.1 16 17 16.9 17 18C17 19.1 16.1 20 15 20C13.9 20 13 19.1 13 18Z" fill="#1456e0"/></svg>`,IxGridColumnFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.columnsLocalStorageKey=void 0,this.isDropdownVisible=!1,this.disabledColumns=[],this.dragEvent={sourceEl:null,startId:-1,targetId:-1},this.outerInteraction=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.outerInteraction),this.initializeLocalStorage()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.outerInteraction)}get preservedColumns(){let e=[];return e=this.columnsLocalStorageKey?JSON.parse(localStorage.getItem(this.columnsLocalStorageKey)||"[]"):e}initializeLocalStorage(){0<this.preservedColumns.length&&(this.disabledColumns=this.preservedColumns.filter(e=>e.hidden).map(e=>e.name),this.columns.forEach((e,t)=>{this.disabledColumns.includes(e.name)&&(this.columns[t].hidden=!0)})),this.dispatchUpdate()}toggleColumn(e){this.columns[e].hidden=!this.columns[e].hidden,this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),this.columnsLocalStorageKey&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify([...this.columns])),this.dispatchUpdate()}updateColumn(e,t){e=null==(e=e.target.shadowRoot)?void 0:e.querySelector("input");this.columns[t].hidden=!(null!=e&&e.checked),this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),this.columnsLocalStorageKey&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify([...this.columns])),this.dispatchUpdate()}dispatchUpdate(e=this.columns){this.dispatchEvent(new CustomEvent("columnFilter",{detail:{columns:e},bubbles:!0,composed:!0}))}dragstart(e){e=e.target,(this.dragEvent.sourceEl=e).style.opacity="0.3",e=Number(e.getAttribute("data-id"));this.dragEvent.startId=e}dragend(){var e,t;this.dragEvent.startId!==this.dragEvent.targetId&&(t=(e=[...this.columns]).splice(this.dragEvent.startId,1)[0],e.splice(this.dragEvent.targetId,0,t),this.dispatchEvent(new CustomEvent("reorderColumns",{detail:{reorderedColumns:e},bubbles:!0,composed:!0}))),null!=(t=this.dragEvent.sourceEl)&&t.style.removeProperty("opacity"),this.dragEvent={sourceEl:null,startId:-1,targetId:-1}}dragenter(e){var e=e.target;e.classList.contains("drag-target")&&(e=Number(e.getAttribute("data-id")),this.dragEvent.targetId=e)}render(){return html`<div class="grid-menu"><span @click="${()=>{this.isDropdownVisible=!0}}" @keyDown="${e=>{triggerKeys.includes(e.key)&&(this.isDropdownVisible=!0)}}" class="list list-dropdown"><ix-icon-button appearance="default"><svg slot="default" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 9H7V5H3V9ZM7 14H3V10H7V14ZM7 19H3V15H7V19ZM20 14H8V10H20V14ZM8 19H20V15H8V19ZM8 9V5H20V9H8Z" fill="#1456E0"/></svg></ix-icon-button>${0<this.disabledColumns.length?html`<div class="active"></div>`:nothing} ${this.isDropdownVisible?html`<div class="dropdown-content" @dragover="${e=>e.preventDefault()}" @dragstart="${this.dragstart}" @dragend="${this.dragend}" @dragenter="${this.dragenter}">${repeat(this.columns,e=>e.name,(e,t)=>html`<div class="${e.hidden?"disabled":""}"><label class="${"ix-switch-label drag-target "+(this.dragEvent.startId===t?"dragOrigin":"")}" draggable="true" data-id="${t}"><ix-switch .selected="${!e.hidden}" @change="${e=>this.updateColumn(e,t)}"></ix-switch><p>${e.header}</p><div class="draggable">${handleIcon}</div></label></div>`)}</div>`:nothing}</span></div>`}},IxGridRowFilterStyles=(IxGridColumnFilter.styles=[IxGridViewStyles,IxGridColumnFilterStyles],__decorate([property({type:Array})],IxGridColumnFilter.prototype,"columns",void 0),__decorate([property({type:String})],IxGridColumnFilter.prototype,"columnsLocalStorageKey",void 0),__decorate([state()],IxGridColumnFilter.prototype,"isDropdownVisible",void 0),__decorate([state()],IxGridColumnFilter.prototype,"disabledColumns",void 0),__decorate([state()],IxGridColumnFilter.prototype,"dragEvent",void 0),IxGridColumnFilter=__decorate([customElement("ix-grid-column-filter")],IxGridColumnFilter),css`.slot-wrap{display:flex}.slot-wrap ix-icon{--ix-icon-font-size:24px;color:#1456e0;margin-right:5px}.grid-menu ix-button .filter{font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;margin-top:2px}.filter-form{white-space:nowrap;padding:9px;font-family:'Open Sans',sans-serif;color:#5d6d82}.filter-form-column{display:inline-block;vertical-align:middle}.filter-remove span{margin-right:0;color:#5d6d82}.filter-dropdown-content{position:absolute;display:inline;right:0;top:78%;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:3;transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0s;border-radius:12px;box-shadow:rgba(0,0,0,.2) 0 5px 5px -3px,rgba(0,0,0,.14) 0 8px 10px 1px,rgba(0,0,0,.12) 0 3px 14px 2px;background-color:#fff}.filter-form input,.filter-form option,.filter-form select{border-radius:0;cursor:pointer;letter-spacing:1.44px;line-height:1.4375em;box-sizing:content-box;background:0 0;height:1.4375em;margin:0;animation-name:mui-auto-fill-cancel;animation-duration:10ms;border:none;border-image:initial;font-size:16px;box-sizing:border-box;cursor:text;user-select:none;color:currentcolor;-webkit-tap-highlight-color:transparent;display:block;min-width:0;width:100%;font-family:'Open Sans',sans-serif;height:25px;border-bottom:1px solid #000}.filter-form option{-webkit-tap-highlight-color:#9ca6b2}.filter-form input:hover,.filter-form select:hover{outline:0!important;border-bottom:2px solid #000}.filter-form input:focus,.filter-form select:focus{outline:0!important;border-bottom:2px solid #1456e0}.filter-form select:focus{background-color:rgba(0,0,0,.05)}.form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:'Open Sans',sans-serif}.form-group label{font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.4375em;letter-spacing:.44px;padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label span{font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.4375em;letter-spacing:.44px;padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label:focus-within span{color:#1456e0}.filter-form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:'Open Sans',sans-serif}option{font-weight:400;display:block;min-height:1.2em;padding:0 2px 1px;white-space:nowrap}.add-filter-button .add{margin-right:0;margin-left:-6px}.filter-footer{margin-top:auto;display:flex;align-items:left;padding:0;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;width:100%}.filter-footer button{align-items:center!important;margin-left:0}.filter-footer .add{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px}.filter-footer .clear{margin-left:auto!important}.form-group .close{user-select:none;width:1em;height:1em;display:inline-block;fill:currentcolor;flex-shrink:0;transition:fill .2s cubic-bezier(.4,0,.2,1) 0s;font-size:1.25rem;font-weight:lighter}.no-display{display:none}.filter-local-operator-empty{width:54px;border:none}.grid-menu span.filter-superscript{position:absolute;top:6px;left:14px;z-index:1;display:flex;align-items:center;justify-content:center;font-size:.75rem;padding:0;height:16px;width:16px;border-radius:50%;background-color:#1456e0;color:#fff}.filterlist{width:40px}.filterColumnField{width:150px}.filterValueField{width:190px}.filterOperatorField{width:120px}.add-filter-button.disabled{opacity:.5;cursor:not-allowed}select:hover{cursor:pointer}input:hover{cursor:text}.tooltip-container{position:relative;display:inline-block}.tool-tip{color:#fff;overflow-wrap:break-word;border-radius:3px;background-color:#071454;padding:5px 8px;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;position:absolute;top:42px;right:0;z-index:3;white-space:nowrap;display:none}.filter-button:hover~.tool-tip{display:block}.tool-tip li{margin-left:-21px;color:#fff;overflow-wrap:break-word;border-radius:3px;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;max-width:250px;min-width:200px;white-space:wrap}.tool-tip p{margin:0;padding:0;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px}.add-filter-button{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;color:#fff;min-width:64px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px;border-radius:100px;background-color:unset}.add-filter-button:disabled,.clear:disabled{opacity:.25;cursor:not-allowed}button{-webkit-box-align:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;color:#fff;min-width:64px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px;border-radius:100px;background-color:unset}ix-button.filter-button{padding-inline:0}.grid-menu ix-button{align-items:center;display:flex}`),IxGridRowFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.isDropdownVisible=!1,this.filters=[],this.filterableColumns=[],this.filterColumns=[],this.activeFilters=[],this.mapSelect=!1,this.closeOnOuterClick=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}updateActiveFilters(){this.activeFilters=this.filters.filter(e=>0<e.value.length)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.closeOnOuterClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.closeOnOuterClick)}firstUpdated(){this.filterableColumns=this.columns.filter(e=>e.filterable),this.filterColumns=this.filterableColumns.map(e=>e.name),this.filters=this.parseFilterQueryString(),this.filters.length||this.addFilter(),this.updateActiveFilters(),this.dispatchUpdate()}get filterNames(){return this.filters.map(e=>e.columnField)}get unselectedFilters(){return this.filterColumns.filter(e=>!this.filterNames.includes(e))}parseFilterQueryString(){var i=[];for(let[t,e]of new URLSearchParams(window.location.search)){var o=(null==(o=this.filterableColumns.find(e=>e.name===t))?void 0:o.filterOperators)||["contains"];this.filterColumns.includes(t)&&i.push({columnField:t,operatorValue:o[0],value:e})}return i}dispatchUpdate(){this.dispatchEvent(new CustomEvent("rowFilter",{detail:{filters:this.filters.filter(e=>3<=e.value.length)},bubbles:!0,composed:!0}))}addFilter(){let e,t=this.filterColumns.find(e=>!this.filterNames.includes(e))||"";var i=(null==(e=this.filterableColumns.find(e=>e.name===t))?void 0:e.filterOperators)||["contains"];this.filters=[...this.filters,{columnField:t,operatorValue:i[0],value:""}],this.updateActiveFilters()}clearFilters(){this.filters=[],this.addFilter(),this.dispatchUpdate()}removeFilter(i){this.filters=this.filters.filter((e,t)=>t!==i),this.dispatchUpdate(),0===this.filters.length&&(this.isDropdownVisible=!1,this.addFilter())}onfilterColumnChange(e,t){t=t.target.value;this.filters[e].columnField=t,this.filters=[...this.filters],3<=this.filters[e].value.length&&this.dispatchUpdate()}onfilterOperatorChange(e,t){t=t.target.value;this.filters[e].operatorValue=t,this.filters=[...this.filters],3<=this.filters[e].value.length&&this.dispatchUpdate()}onfilterValueChange(e,t){var i=this.filters[e].value.length,t=t.target.value,t=(this.filters[e].value=t,this.filters[e].value.length);0<this.filters[e].columnField.length&&(3<=t||t<i)&&this.dispatchUpdate(),this.updateActiveFilters()}formatCamelCaseToEnglish(e){e=e.replace(/([A-Z])/g," $1").toLowerCase();return e.charAt(0).toUpperCase()+e.slice(1)}renderToolTip(){return this.isDropdownVisible?copy.hideFilters:this.activeFilters.length?html`<p>${this.activeFilters.length} ${copy.activeFilter}</p><ul>${this.activeFilters.map(e=>html`<li>${this.formatCamelCaseToEnglish(e.columnField)} ${e.operatorValue} ${e.value}</li>`)}</ul>`:copy.showFilters}renderFilterInput(t,i){let e,o,r=[t.columnField,...this.unselectedFilters];var l=this.filterableColumns.filter(e=>r.includes(e.name));return html`<div class="filter-form"><div class="filter-remove filter-form-column"><div class="form-group"><ix-icon-button icon="close" @click="${()=>this.removeFilter(i)}" @keyDown="${e=>{" "!==e.key&&"Enter"!==e.key||this.removeFilter(i)}}"></ix-icon-button></div></div>${this.mapSelect?html`<div class="filter-form-column filter-form-column-border filterColumnField"><div class="form-group"><label class="form-group-column-label" title="select: ${t.columnField}, options: ${l.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
6
+ )}ix-select-option{--md-menu-item-selected-container-color:rgba(20, 86, 224, 0.1)}`),copy={activeFilter:"active filter",filters:"Filters",hideFilters:"Hide Filters",showFilters:"Show Filters",rowsPerPage:"Rows per page",user:"user",viewMore:"VIEW MORE",viewLess:"VIEW LESS"},IxPagination=class extends LitElement{constructor(){super(...arguments),this.recordCount=0,this.page=1,this.pageSize=10,this.pageSizes=[5,10,25,100]}changePage(e){this.page+=e,this.updatePagination()}updatePagination(e=this.page,t=this.pageSize){this.dispatchEvent(new CustomEvent("updatePagination",{detail:{page:e,pageSize:t},bubbles:!0,composed:!0}))}render(){let e=1<this.page,t=this.recordCount>this.page*this.pageSize;return html`<div class="pagination"><p class="rows-per-page">${copy.rowsPerPage}:</p><ix-select wide-menu menu-positioning="fixed" class="pagination__select-input" @request-selection="${e=>{e=e.target;this.pageSize=Number(e.value),this.updatePagination()}}" selected-index="${this.pageSizes.indexOf(this.pageSize)}" filled>${this.pageSizes.map(e=>html`<ix-select-option class="select-option" value="${e}"><div slot="headline">${e}</div></ix-select-option>`)}</ix-select><p>${(this.page-1)*this.pageSize+1} - ${this.page*this.pageSize>this.recordCount?html`${this.recordCount}`:html`${this.page*this.pageSize}`} of ${this.recordCount}</p><div class="pagination-nav"><ix-icon-button ?disabled="${!e}" @click="${()=>e&&this.changePage(-1)}" icon="chevron_left"></ix-icon-button><ix-icon-button ?disabled="${!t}" @click="${()=>t&&this.changePage(1)}" icon="chevron_right"></ix-icon-button></div></div>`}},IxGridColumnFilterStyles=(IxPagination.styles=[IxGridViewStyles,PaginationStyles],__decorate([property({type:Number})],IxPagination.prototype,"recordCount",void 0),__decorate([property({type:Number})],IxPagination.prototype,"page",void 0),__decorate([property({type:Number})],IxPagination.prototype,"pageSize",void 0),__decorate([property({type:Array})],IxPagination.prototype,"pageSizes",void 0),IxPagination=__decorate([customElement("ix-pagination")],IxPagination),css`.dropdown-content{position:absolute;background-color:#fff;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;-webkit-box-align:center;align-items:center;cursor:pointer;vertical-align:middle;-webkit-tap-highlight-color:transparent;padding:10px;width:247px;left:-100px;border-radius:16px}.dropdown-content>div{margin:0;font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:24px;letter-spacing:.25px;color:#092241;display:block;cursor:pointer}.dropdown-content span:hover{background-color:#f1f1f1}.dropdown-content label{display:flex;align-items:center}.dropdown-content label.dragOrigin{background:#ff000017;outline:1px #ff9d9d dashed}.dropdown-content label p{width:158px}.dropdown-content label .draggable{font-size:24px;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.dropdown-content label .draggable path{fill:var(--md-sys-color-primary,#1456e0)}.active{position:absolute;right:0;top:0;height:8px;width:8px;background-color:#db0028;border-radius:50%}ix-switch{padding:0 0 0 6px;--md-switch-selected-handle-color:var(--ix-sys-primary);--md-switch-selected-pressed-handle-color:var(--ix-sys-primary);--md-switch-selected-hover-handle-color:var(--ix-sys-primary);--md-switch-selected-focus-handle-color:var(--ix-sys-primary);--md-switch-selected-track-color:#7ba0ee;--md-switch-selected-pressed-track-color:#7ba0ee;--md-switch-selected-hover-track-color:#7ba0ee;--md-switch-selected-focus-track-color:#7ba0ee;--md-switch-track-height:14px;--md-switch-track-width:36px;--md-switch-track-outline-width:0;--md-switch-handle-color:white;--md-switch-pressed-handle-color:white;--md-switch-hover-handle-color:white;--md-switch-focus-handle-color:white;--md-switch-handle-width:20px;--md-switch-handle-height:20px;--md-switch-selected-handle-width:20px;--md-switch-selected-handle-height:20px;display:flex;width:48px}.list{position:relative}`),triggerKeys=[" ","Enter"],handleIcon=svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM7 12C7 10.9 7.9 10 9 10C10.1 10 11 10.9 11 12C11 13.1 10.1 14 9 14C7.9 14 7 13.1 7 12ZM9 20C10.1 20 11 19.1 11 18C11 16.9 10.1 16 9 16C7.9 16 7 16.9 7 18C7 19.1 7.9 20 9 20ZM17 6C17 7.1 16.1 8 15 8C13.9 8 13 7.1 13 6C13 4.9 13.9 4 15 4C16.1 4 17 4.9 17 6ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM13 18C13 16.9 13.9 16 15 16C16.1 16 17 16.9 17 18C17 19.1 16.1 20 15 20C13.9 20 13 19.1 13 18Z" fill="#1456e0"/></svg>`,IxGridColumnFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.columnsLocalStorageKey=void 0,this.columnReorderingAllowed=!1,this.refreshDataOnColumnVisibilityChange=!0,this.isDropdownVisible=!1,this.disabledColumns=[],this.dragEvent={sourceEl:null,startId:-1,targetId:-1},this.outerInteraction=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.outerInteraction),this.initializeLocalStorage()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.outerInteraction)}get preservedColumns(){let e=[];return e=this.columnsLocalStorageKey?JSON.parse(localStorage.getItem(this.columnsLocalStorageKey)||"[]"):e}initializeLocalStorage(){0<this.preservedColumns.length&&(this.disabledColumns=this.preservedColumns.filter(e=>e.hidden).map(e=>e.name),this.columns.forEach((e,t)=>{this.disabledColumns.includes(e.name)&&(this.columns[t].hidden=!0)})),this.dispatchUpdate()}toggleColumn(e){this.columns[e].hidden=!this.columns[e].hidden,this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),this.columnsLocalStorageKey&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify([...this.columns])),this.dispatchUpdate()}updateColumn(e,t){e=null==(e=e.target.shadowRoot)?void 0:e.querySelector("input");this.columns[t].hidden=!(null!=e&&e.checked),this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),this.columnsLocalStorageKey&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify([...this.columns])),this.refreshDataOnColumnVisibilityChange?this.dispatchUpdate():this.requestGridUpdate()}dispatchUpdate(e=this.columns){this.dispatchEvent(new CustomEvent("columnFilter",{detail:{columns:e},bubbles:!0,composed:!0}))}dragstart(e){this.columnReorderingAllowed&&(e=e.target,(this.dragEvent.sourceEl=e).style.opacity="0.3",e=Number(e.getAttribute("data-id")),this.dragEvent.startId=e)}dragend(){var e,t;this.columnReorderingAllowed&&(this.dragEvent.startId!==this.dragEvent.targetId&&(t=(e=[...this.columns]).splice(this.dragEvent.startId,1)[0],e.splice(this.dragEvent.targetId,0,t),this.dispatchEvent(new CustomEvent("reorderColumns",{detail:{reorderedColumns:e},bubbles:!0,composed:!0}))),null!=(t=this.dragEvent.sourceEl)&&t.style.removeProperty("opacity"),this.dragEvent={sourceEl:null,startId:-1,targetId:-1})}dragenter(e){this.columnReorderingAllowed&&(e=e.target).classList.contains("drag-target")&&(e=Number(e.getAttribute("data-id")),this.dragEvent.targetId=e)}render(){return html`<div class="grid-menu"><span @click="${()=>{this.isDropdownVisible=!0}}" @keyDown="${e=>{triggerKeys.includes(e.key)&&(this.isDropdownVisible=!0)}}" class="list list-dropdown"><ix-icon-button appearance="default"><svg slot="default" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 9H7V5H3V9ZM7 14H3V10H7V14ZM7 19H3V15H7V19ZM20 14H8V10H20V14ZM8 19H20V15H8V19ZM8 9V5H20V9H8Z" fill="#1456E0"/></svg></ix-icon-button>${0<this.disabledColumns.length?html`<div class="active"></div>`:nothing} ${this.isDropdownVisible?html`<div class="dropdown-content" @dragover="${e=>e.preventDefault()}" @dragstart="${this.dragstart}" @dragend="${this.dragend}" @dragenter="${this.dragenter}">${repeat(this.columns,e=>e.name,(e,t)=>html`<div class="${e.hidden?"disabled":""}"><label class="${"ix-switch-label drag-target "+(this.dragEvent.startId===t?"dragOrigin":"")}" draggable="true" data-id="${t}"><ix-switch .selected="${!e.hidden}" @change="${e=>this.updateColumn(e,t)}"></ix-switch><p>${e.header}</p><div class="draggable">${handleIcon}</div></label></div>`)}</div>`:nothing}</span></div>`}},IxGridRowFilterStyles=(IxGridColumnFilter.styles=[IxGridViewStyles,IxGridColumnFilterStyles],__decorate([property({type:Array})],IxGridColumnFilter.prototype,"columns",void 0),__decorate([property({type:String})],IxGridColumnFilter.prototype,"columnsLocalStorageKey",void 0),__decorate([property({type:Boolean})],IxGridColumnFilter.prototype,"columnReorderingAllowed",void 0),__decorate([property({type:Boolean})],IxGridColumnFilter.prototype,"refreshDataOnColumnVisibilityChange",void 0),__decorate([property({attribute:!1})],IxGridColumnFilter.prototype,"requestGridUpdate",void 0),__decorate([state()],IxGridColumnFilter.prototype,"isDropdownVisible",void 0),__decorate([state()],IxGridColumnFilter.prototype,"disabledColumns",void 0),__decorate([state()],IxGridColumnFilter.prototype,"dragEvent",void 0),IxGridColumnFilter=__decorate([customElement("ix-grid-column-filter")],IxGridColumnFilter),css`.slot-wrap{display:flex}.slot-wrap ix-icon{--ix-icon-font-size:24px;color:#1456e0;margin-right:5px}.grid-menu ix-button .filter{font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;margin-top:2px}.filter-form{white-space:nowrap;padding:9px;font-family:'Open Sans',sans-serif;color:#5d6d82}.filter-form-column{display:inline-block;vertical-align:middle}.filter-remove span{margin-right:0;color:#5d6d82}.filter-dropdown-content{position:absolute;display:inline;right:0;top:78%;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:3;transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0s;border-radius:12px;box-shadow:rgba(0,0,0,.2) 0 5px 5px -3px,rgba(0,0,0,.14) 0 8px 10px 1px,rgba(0,0,0,.12) 0 3px 14px 2px;background-color:#fff}.filter-form input,.filter-form option,.filter-form select{border-radius:0;cursor:pointer;letter-spacing:1.44px;line-height:1.4375em;box-sizing:content-box;background:0 0;height:1.4375em;margin:0;animation-name:mui-auto-fill-cancel;animation-duration:10ms;border:none;border-image:initial;font-size:16px;box-sizing:border-box;cursor:text;user-select:none;color:currentcolor;-webkit-tap-highlight-color:transparent;display:block;min-width:0;width:100%;font-family:'Open Sans',sans-serif;height:25px;border-bottom:1px solid #000}.filter-form option{-webkit-tap-highlight-color:#9ca6b2}.filter-form input:hover,.filter-form select:hover{outline:0!important;border-bottom:2px solid #000}.filter-form input:focus,.filter-form select:focus{outline:0!important;border-bottom:2px solid #1456e0}.filter-form select:focus{background-color:rgba(0,0,0,.05)}.form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:'Open Sans',sans-serif}.form-group label{font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.4375em;letter-spacing:.44px;padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label span{font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.4375em;letter-spacing:.44px;padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label:focus-within span{color:#1456e0}.filter-form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:'Open Sans',sans-serif}option{font-weight:400;display:block;min-height:1.2em;padding:0 2px 1px;white-space:nowrap}.add-filter-button .add{margin-right:0;margin-left:-6px}.filter-footer{margin-top:auto;display:flex;align-items:left;padding:0;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;width:100%}.filter-footer button{align-items:center!important;margin-left:0}.filter-footer .add{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px}.filter-footer .clear{margin-left:auto!important}.form-group .close{user-select:none;width:1em;height:1em;display:inline-block;fill:currentcolor;flex-shrink:0;transition:fill .2s cubic-bezier(.4,0,.2,1) 0s;font-size:1.25rem;font-weight:lighter}.no-display{display:none}.filter-local-operator-empty{width:54px;border:none}.grid-menu span.filter-superscript{position:absolute;top:6px;left:14px;z-index:1;display:flex;align-items:center;justify-content:center;font-size:.75rem;padding:0;height:16px;width:16px;border-radius:50%;background-color:#1456e0;color:#fff}.filterlist{width:40px}.filterColumnField{width:150px}.filterValueField{width:190px}.filterOperatorField{width:120px}.add-filter-button.disabled{opacity:.5;cursor:not-allowed}select:hover{cursor:pointer}input:hover{cursor:text}.tooltip-container{position:relative;display:inline-block}.tool-tip{color:#fff;overflow-wrap:break-word;border-radius:3px;background-color:#071454;padding:5px 8px;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;position:absolute;top:42px;right:0;z-index:3;white-space:nowrap;display:none}.filter-button:hover~.tool-tip{display:block}.tool-tip li{margin-left:-21px;color:#fff;overflow-wrap:break-word;border-radius:3px;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;max-width:250px;min-width:200px;white-space:wrap}.tool-tip p{margin:0;padding:0;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px}.add-filter-button{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;color:#fff;min-width:64px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px;border-radius:100px;background-color:unset}.add-filter-button:disabled,.clear:disabled{opacity:.25;cursor:not-allowed}button{-webkit-box-align:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;color:#fff;min-width:64px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px;border-radius:100px;background-color:unset}ix-button.filter-button{padding-inline:0}.grid-menu ix-button{align-items:center;display:flex}`),IxGridRowFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.isDropdownVisible=!1,this.filters=[],this.filterableColumns=[],this.filterColumns=[],this.activeFilters=[],this.mapSelect=!1,this.closeOnOuterClick=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}updateActiveFilters(){this.activeFilters=this.filters.filter(e=>0<e.value.length)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.closeOnOuterClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.closeOnOuterClick)}firstUpdated(){this.filterableColumns=this.columns.filter(e=>e.filterable),this.filterColumns=this.filterableColumns.map(e=>e.name),this.filters=this.parseFilterQueryString(),this.filters.length||this.addFilter(),this.updateActiveFilters(),this.dispatchUpdate()}get filterNames(){return this.filters.map(e=>e.columnField)}get unselectedFilters(){return this.filterColumns.filter(e=>!this.filterNames.includes(e))}parseFilterQueryString(){var i=[];for(let[t,e]of new URLSearchParams(window.location.search)){var o=(null==(o=this.filterableColumns.find(e=>e.name===t))?void 0:o.filterOperators)||["contains"];this.filterColumns.includes(t)&&i.push({columnField:t,operatorValue:o[0],value:e})}return i}dispatchUpdate(){this.dispatchEvent(new CustomEvent("rowFilter",{detail:{filters:this.filters.filter(e=>3<=e.value.length)},bubbles:!0,composed:!0}))}addFilter(){let e,t=this.filterColumns.find(e=>!this.filterNames.includes(e))||"";var i=(null==(e=this.filterableColumns.find(e=>e.name===t))?void 0:e.filterOperators)||["contains"];this.filters=[...this.filters,{columnField:t,operatorValue:i[0],value:""}],this.updateActiveFilters()}clearFilters(){this.filters=[],this.addFilter(),this.dispatchUpdate()}removeFilter(i){this.filters=this.filters.filter((e,t)=>t!==i),this.dispatchUpdate(),0===this.filters.length&&(this.isDropdownVisible=!1,this.addFilter())}onfilterColumnChange(e,t){t=t.target.value;this.filters[e].columnField=t,this.filters=[...this.filters],3<=this.filters[e].value.length&&this.dispatchUpdate()}onfilterOperatorChange(e,t){t=t.target.value;this.filters[e].operatorValue=t,this.filters=[...this.filters],3<=this.filters[e].value.length&&this.dispatchUpdate()}onfilterValueChange(e,t){var i=this.filters[e].value.length,t=t.target.value,t=(this.filters[e].value=t,this.filters[e].value.length);0<this.filters[e].columnField.length&&(3<=t||t<i)&&this.dispatchUpdate(),this.updateActiveFilters()}formatCamelCaseToEnglish(e){e=e.replace(/([A-Z])/g," $1").toLowerCase();return e.charAt(0).toUpperCase()+e.slice(1)}renderToolTip(){return this.isDropdownVisible?copy.hideFilters:this.activeFilters.length?html`<p>${this.activeFilters.length} ${copy.activeFilter}</p><ul>${this.activeFilters.map(e=>html`<li>${this.formatCamelCaseToEnglish(e.columnField)} ${e.operatorValue} ${e.value}</li>`)}</ul>`:copy.showFilters}renderFilterInput(t,i){let e,o,r=[t.columnField,...this.unselectedFilters];var l=this.filterableColumns.filter(e=>r.includes(e.name));return html`<div class="filter-form"><div class="filter-remove filter-form-column"><div class="form-group"><ix-icon-button icon="close" @click="${()=>this.removeFilter(i)}" @keyDown="${e=>{" "!==e.key&&"Enter"!==e.key||this.removeFilter(i)}}"></ix-icon-button></div></div>${this.mapSelect?html`<div class="filter-form-column filter-form-column-border filterColumnField"><div class="form-group"><label class="form-group-column-label" title="select: ${t.columnField}, options: ${l.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
7
7
  `)}">Columns</label> <select @change="${e=>this.onfilterColumnChange(i,e)}" .value="${t.columnField}" data-v="${t.columnField}">${l.map(e=>html`<option value="${e.name}" ?selected="${e.name===t.columnField}">${e.header}</option>`)}</select></div></div>`:nothing}<div class="filter-form-column filter-form-column-border filterColumnField"><div class="filter-form-group"><label class="form-group-column-label" title="select: ${t.columnField}, options: ${l.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
8
- `)}"><span>Columns</span> <select @change="${e=>this.onfilterColumnChange(i,e)}" .value="${t.columnField}" data-v="${t.columnField}">${repeat(l,e=>e.name,e=>html`<option value="${e.name}" ?selected="${e.name===t.columnField}">${e.header}</option>`)}</select></label></div></div><div class="filter-form-column filter-form-column-border filterOperatorField"><div class="filter-form-group"><label class="form-group-operator-label"><span>Operator</span> <select @change="${e=>this.onfilterOperatorChange(i,e)}" .value="${t.operatorValue}" data-v="${t.operatorValue}">${repeat(null!=(o=null==(e=l.find(e=>e.name===t.columnField))?void 0:e.filterOperators)?o:["contains"],e=>html`<option value="${e}" ?selected="${e===t.columnField}">${e}</option>`)}</select></label></div></div><div class="filter-form-column filter-form-column-border filterValueField"><div class="filter-form-group"><label class="form-group-value-label"><span>Value</span> <input placeholder="Filter value" @input="${e=>this.onfilterValueChange(i,e)}" .value="${t.value}"></label></div></div></div>`}renderDropdown(){var e=this.filters.length>=this.filterColumns.length||this.activeFilters.length<this.filters.length;return html`<div class="filter-dropdown-content"><div class="filter-body">${this.filters.map((e,t)=>this.renderFilterInput(e,t))}</div><div class="filter-footer"><button class="add-filter-button" @click="${()=>this.addFilter()}" ?disabled="${e}"><ix-icon-button icon="add"></ix-icon-button><span class="add">ADD FILTER</span></button> <button class="clear" @click="${()=>this.clearFilters()}" ?disabled="${0===this.activeFilters.length}"><span class="add">CLEAR ALL</span></button></div></div>`}render(){return html`<div class="grid-menu"><div class="filter-container tooltip-container">${0<this.activeFilters.length?html`<span class="filter-superscript">${this.activeFilters.length}</span>`:nothing}<ix-button appearance="text" class="filter_list filter-button" @click="${()=>{this.isDropdownVisible=!this.isDropdownVisible}}" @keyDown="${()=>{this.isDropdownVisible=!this.isDropdownVisible}}"><div class="slot-wrap"><ix-icon appearance="default" class="filter-icon">filter_list</ix-icon><span class="filter">${copy.filters}</span></div></ix-button><div class="tool-tip">${this.renderToolTip()}</div>${this.isDropdownVisible?this.renderDropdown():nothing}</div></div>`}};IxGridRowFilter.styles=[IxGridViewStyles,IxGridRowFilterStyles],__decorate([property({type:Array})],IxGridRowFilter.prototype,"columns",void 0),__decorate([state()],IxGridRowFilter.prototype,"isDropdownVisible",void 0),__decorate([state()],IxGridRowFilter.prototype,"filters",void 0),__decorate([state()],IxGridRowFilter.prototype,"filterableColumns",void 0),__decorate([state()],IxGridRowFilter.prototype,"filterColumns",void 0),__decorate([state()],IxGridRowFilter.prototype,"activeFilters",void 0),__decorate([state()],IxGridRowFilter.prototype,"mapSelect",void 0),IxGridRowFilter=__decorate([customElement("ix-grid-row-filter")],IxGridRowFilter);class IxGrid extends LitElement{constructor(){super(...arguments),this.columnReorderingAllowed=!1,this.variantClass="",this.columns=[],this.rows=[],this.defaultEmptyText="No data to display",this.sortedColumn="",this.sortDirection="",this.hideHeader=!1,this.hideFilters=!1,this.rowLimit=0,this.page=1,this.pageSize=10,this.pageSizes=[5,10,25,100],this.recordCount=0,this.localStorageID=void 0,this.showDownload=!0,this.downloadMenuItems=[],this.addParamsToURL=!0,this.filters=[],this.isLoading=!1,this.isExpanded=!1,this.renderColumnHeader=(e,t,i)=>{t=classMap({header:!0,frozen:!!e.frozenToEnd,first:0===t,last:t===i-1});return html`<div @click="${()=>e.sortable&&this.handleSort(e.name)}" @keyDown="${()=>e.sortable&&this.handleSort(e.name)}" class="${t}"><span class="header-label">${e.header}</span> ${e.sortable?html`<ix-icon title="Sort" class="header-sort-icon">${"desc"===this.sortDirection&&this.sortedColumn===e.name?"arrow_upward":"arrow_downward"}</ix-icon>`:nothing}</div>`},this.renderHeader=()=>html`<div class="grid-header"><slot name="header"><div class="empty"></div></slot>${this.hideFilters?nothing:html`<div class="grid-menu"><ix-grid-column-filter .columns="${this.arrangedColumns}" columnsLocalStorageKey="${ifDefined(this.columnsLocalStorageKey)}" @columnFilter="${e=>this.handleOnColumnFilter(e)}" @reorderColumns="${this.reorderColumnsFromFilter}"></ix-grid-column-filter>${this.showDownload?html`<ix-grid-download-menu .items="${this.downloadMenuItems}"></ix-grid-download-menu>`:nothing}<ix-grid-row-filter .columns="${this.columns}" @rowFilter="${e=>{this.filters=e.detail.filters,this.updatePage()}}"></ix-grid-row-filter></div>`}</div><div class="touch-edge"><slot name="under-header"></slot></div>`,this.renderRowLimitControls=()=>this.rows.length<=this.rowLimit?nothing:html`<div class="row-limit"><ix-button appearance="text" @click="${()=>{this.isExpanded=!this.isExpanded}}" has-icon>${this.isExpanded?copy.viewLess:copy.viewMore}<ix-icon slot="icon">${this.isExpanded?"remove":"add"}</ix-icon></ix-button></div>`,this.renderPaginationControls=()=>html`<ix-pagination .page="${this.page}" .pageSize="${this.pageSize}" .pageSizes="${this.pageSizes}" .recordCount="${this.recordCount}" @updatePagination="${e=>{this.page=e.detail.page,this.pageSize=e.detail.pageSize,this.updatePage()}}"></ix-pagination>`}get isPersistable(){return!!this.localStorageID}get columnNames(){return this.columns.map(e=>e.name)}get columnsLocalStorageKey(){return`ix-grid-${this.localStorageID}-columns`}get arrangedColumns(){let e=[];var t;return(e=0===(e=this.isPersistable&&0<(t=JSON.parse(localStorage.getItem(this.columnsLocalStorageKey)||"[]")).length?t.map(t=>({...this.columns.find(e=>e.name===t.name),hidden:t.hidden,frozenToEnd:t.frozenToEnd,width:t.width||void 0})):e).length?[...this.columns]:e).filter(e=>e).map(e=>({...e,width:e.width||void 0}))}async updatePage(){var e,t,i=this.filters.reduce((e,{columnField:t,value:i})=>({...e,[t]:i}),{});this.addParamsToURL&&(t={sort:this.sortedColumn,order:this.sortDirection,page:this.page.toString(),size:this.pageSize.toString(),...i},e=new URL(window.location.href),t=new URLSearchParams(t),e.search=t.toString(),window.history.replaceState(null,"",e.toString())),this.dispatchEvent(new CustomEvent("change",{detail:{columnName:this.sortedColumn,sortOrder:this.sortDirection,page:this.page,pageSize:this.pageSize,filters:i,filtersOperators:this.filters.map(e=>({columnField:e.columnField,operator:e.operatorValue}))},bubbles:!0,composed:!0}))}handleSort(e=""){this.sortedColumn!==e?this.sortDirection="asc":this.sortDirection="asc"===this.sortDirection?"desc":"asc",this.sortedColumn=e,this.updatePage()}setColumnsToLocalStorage(e){this.isPersistable&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify(e))}async reorderColumnsFromTable(){var t=this.arrangedColumns.filter(e=>!0!==e.hidden),o=this.arrangedColumns.filter(e=>!0===e.hidden),r=this.arrangedColumns.filter(e=>!0===e.frozenToEnd);let l=[...t.filter(e=>!0!==(null==e?void 0:e.frozenToEnd)),...o.filter(e=>!0!==(null==e?void 0:e.frozenToEnd)),...r];t=Array.from((null==(t=null==(t=this.grid)?void 0:t.shadowRoot)?void 0:t.querySelectorAll("th"))||[]);if(t.length){let i=t.map((e,t)=>({id:t,flexPosition:Number(e.style.order)})).sort((e,t)=>e.flexPosition-t.flexPosition).map(e=>e.id);let e=[];i.every((e,t)=>0===t||e>i[t-1])||(e=i.map(e=>l[e]),this.columns=[...e.filter(e=>!0!==e.hidden&&!0!==(null==e?void 0:e.frozenToEnd)),...o.filter(e=>!0!==(null==e?void 0:e.frozenToEnd)),...r],this.isLoading=!0,await this.updateComplete,this.isLoading=!1),this.setColumnsToLocalStorage(0<e.length?[...this.columns]:[...l])}}async reorderColumnsFromFilter(e){this.columns=[...e.detail.reorderedColumns],this.setColumnsToLocalStorage([...this.columns]),this.isLoading=!0,await this.updateComplete,this.isLoading=!1}handleOnColumnFilter(e){e.detail.columns.forEach((e,t)=>{this.columns[t].hidden=null==e?void 0:e.hidden}),this.updatePage()}renderColumns(){return 0<this.arrangedColumns.length?html`${this.arrangedColumns.map((e,t)=>!0===e.hidden?nothing:html`<vaadin-grid-column ${columnHeaderRenderer(()=>this.renderColumnHeader(e,t,this.arrangedColumns.length),this.sortDirection)} ${columnBodyRenderer(e.bodyRenderer,[])} resizable width="${ifDefined(e.width)}" ?hidden="${e.hidden}" ?frozen-to-end="${e.frozenToEnd}" path="${e.name}"></vaadin-grid-column>`)}`:html`<vaadin-grid-column></vaadin-grid-column>`}render(){return html`<div class="${`grid-container ${this.isLoading?"loading":""} `+this.variantClass}">${this.hideHeader?nothing:this.renderHeader()} ${this.isLoading?nothing:html`<vaadin-grid .items="${0<this.rowLimit&&!this.isExpanded?this.rows.slice(0,this.rowLimit):this.rows}" all-rows-visible ?column-reordering-allowed="${this.columnReorderingAllowed}" theme="no-border" @mouseup="${this.reorderColumnsFromTable}">${this.renderColumns()}</vaadin-grid>${0!==this.rows.length||this.isLoading?nothing:html`<slot name="no-rows"></slot>`}`} ${0<this.rowLimit?this.renderRowLimitControls():this.renderPaginationControls()}<slot name="footer"></slot></div>`}}IxGrid.styles=[IxGridViewStyles],__decorate([query("vaadin-grid")],IxGrid.prototype,"grid",void 0),__decorate([property({type:Boolean,attribute:"column-reordering-allowed"})],IxGrid.prototype,"columnReorderingAllowed",void 0),__decorate([property({type:String})],IxGrid.prototype,"variantClass",void 0),__decorate([property({type:Array})],IxGrid.prototype,"columns",void 0),__decorate([property({type:Array})],IxGrid.prototype,"rows",void 0),__decorate([property({type:String})],IxGrid.prototype,"defaultEmptyText",void 0),__decorate([property({type:String})],IxGrid.prototype,"sortedColumn",void 0),__decorate([property({type:String})],IxGrid.prototype,"sortDirection",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"hideHeader",void 0),__decorate([property({type:Boolean,attribute:"hide-filters"})],IxGrid.prototype,"hideFilters",void 0),__decorate([property({type:Number})],IxGrid.prototype,"rowLimit",void 0),__decorate([property({type:Number})],IxGrid.prototype,"page",void 0),__decorate([property({type:Number})],IxGrid.prototype,"pageSize",void 0),__decorate([property({type:Array})],IxGrid.prototype,"pageSizes",void 0),__decorate([property({type:Number})],IxGrid.prototype,"recordCount",void 0),__decorate([property({type:String})],IxGrid.prototype,"localStorageID",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"showDownload",void 0),__decorate([property({type:Array})],IxGrid.prototype,"downloadMenuItems",void 0),__decorate([property({type:Boolean,attribute:"add-params-to-url"})],IxGrid.prototype,"addParamsToURL",void 0),__decorate([state()],IxGrid.prototype,"filters",void 0),__decorate([state()],IxGrid.prototype,"isLoading",void 0),__decorate([state()],IxGrid.prototype,"isExpanded",void 0),window.customElements.define("ix-grid",IxGrid);
8
+ `)}"><span>Columns</span> <select @change="${e=>this.onfilterColumnChange(i,e)}" .value="${t.columnField}" data-v="${t.columnField}">${repeat(l,e=>e.name,e=>html`<option value="${e.name}" ?selected="${e.name===t.columnField}">${e.header}</option>`)}</select></label></div></div><div class="filter-form-column filter-form-column-border filterOperatorField"><div class="filter-form-group"><label class="form-group-operator-label"><span>Operator</span> <select @change="${e=>this.onfilterOperatorChange(i,e)}" .value="${t.operatorValue}" data-v="${t.operatorValue}">${repeat(null!=(o=null==(e=l.find(e=>e.name===t.columnField))?void 0:e.filterOperators)?o:["contains"],e=>html`<option value="${e}" ?selected="${e===t.columnField}">${e}</option>`)}</select></label></div></div><div class="filter-form-column filter-form-column-border filterValueField"><div class="filter-form-group"><label class="form-group-value-label"><span>Value</span> <input placeholder="Filter value" @input="${e=>this.onfilterValueChange(i,e)}" .value="${t.value}"></label></div></div></div>`}renderDropdown(){var e=this.filters.length>=this.filterColumns.length||this.activeFilters.length<this.filters.length;return html`<div class="filter-dropdown-content"><div class="filter-body">${this.filters.map((e,t)=>this.renderFilterInput(e,t))}</div><div class="filter-footer"><button class="add-filter-button" @click="${()=>this.addFilter()}" ?disabled="${e}"><ix-icon-button icon="add"></ix-icon-button><span class="add">ADD FILTER</span></button> <button class="clear" @click="${()=>this.clearFilters()}" ?disabled="${0===this.activeFilters.length}"><span class="add">CLEAR ALL</span></button></div></div>`}render(){return html`<div class="grid-menu"><div class="filter-container tooltip-container">${0<this.activeFilters.length?html`<span class="filter-superscript">${this.activeFilters.length}</span>`:nothing}<ix-button appearance="text" class="filter_list filter-button" @click="${()=>{this.isDropdownVisible=!this.isDropdownVisible}}" @keyDown="${()=>{this.isDropdownVisible=!this.isDropdownVisible}}"><div class="slot-wrap"><ix-icon appearance="default" class="filter-icon">filter_list</ix-icon><span class="filter">${copy.filters}</span></div></ix-button><div class="tool-tip">${this.renderToolTip()}</div>${this.isDropdownVisible?this.renderDropdown():nothing}</div></div>`}};IxGridRowFilter.styles=[IxGridViewStyles,IxGridRowFilterStyles],__decorate([property({type:Array})],IxGridRowFilter.prototype,"columns",void 0),__decorate([state()],IxGridRowFilter.prototype,"isDropdownVisible",void 0),__decorate([state()],IxGridRowFilter.prototype,"filters",void 0),__decorate([state()],IxGridRowFilter.prototype,"filterableColumns",void 0),__decorate([state()],IxGridRowFilter.prototype,"filterColumns",void 0),__decorate([state()],IxGridRowFilter.prototype,"activeFilters",void 0),__decorate([state()],IxGridRowFilter.prototype,"mapSelect",void 0),IxGridRowFilter=__decorate([customElement("ix-grid-row-filter")],IxGridRowFilter);class IxGrid extends LitElement{constructor(){super(...arguments),this.columnReorderingAllowed=!1,this.variantClass="",this.columns=[],this.rows=[],this.defaultEmptyText="No data to display",this.sortedColumn="",this.sortDirection="",this.hideHeader=!1,this.hideFilters=!1,this.rowLimit=0,this.page=1,this.pageSize=10,this.pageSizes=[5,10,25,100],this.recordCount=0,this.localStorageID=void 0,this.showDownload=!0,this.downloadMenuItems=[],this.addParamsToURL=!0,this.refreshDataOnColumnVisibilityChange=!0,this.filters=[],this.isLoading=!1,this.isExpanded=!1,this.renderColumnHeader=(e,t,i)=>{t=classMap({header:!0,frozen:!!e.frozenToEnd,first:0===t,last:t===i-1});return html`<div @click="${()=>e.sortable&&this.handleSort(e.name)}" @keyDown="${()=>e.sortable&&this.handleSort(e.name)}" class="${t}"><span class="header-label">${e.header}</span> ${e.sortable?html`<ix-icon title="Sort" class="header-sort-icon">${"desc"===this.sortDirection&&this.sortedColumn===e.name?"arrow_upward":"arrow_downward"}</ix-icon>`:nothing}</div>`},this.renderHeader=()=>html`<div class="grid-header"><slot name="header"><div class="empty"></div></slot>${this.hideFilters?nothing:html`<div class="grid-menu"><ix-grid-column-filter .columns="${this.arrangedColumns}" columnsLocalStorageKey="${ifDefined(this.columnsLocalStorageKey)}" @columnFilter="${e=>this.handleOnColumnFilter(e)}" @reorderColumns="${this.reorderColumnsFromFilter}" .columnReorderingAllowed="${this.columnReorderingAllowed}" .refreshDataOnColumnVisibilityChange="${this.refreshDataOnColumnVisibilityChange}" .requestGridUpdate="${()=>this.requestUpdate()}"></ix-grid-column-filter>${this.showDownload?html`<ix-grid-download-menu .items="${this.downloadMenuItems}"></ix-grid-download-menu>`:nothing}<ix-grid-row-filter .columns="${this.columns}" @rowFilter="${e=>{this.filters=e.detail.filters,this.updatePage()}}"></ix-grid-row-filter></div>`}</div><div class="touch-edge"><slot name="under-header"></slot></div>`,this.renderRowLimitControls=()=>this.rows.length<=this.rowLimit?nothing:html`<div class="row-limit"><ix-button appearance="text" @click="${()=>{this.isExpanded=!this.isExpanded}}" has-icon>${this.isExpanded?copy.viewLess:copy.viewMore}<ix-icon slot="icon">${this.isExpanded?"remove":"add"}</ix-icon></ix-button></div>`,this.renderPaginationControls=()=>html`<ix-pagination .page="${this.page}" .pageSize="${this.pageSize}" .pageSizes="${this.pageSizes}" .recordCount="${this.recordCount}" @updatePagination="${e=>{this.page=e.detail.page,this.pageSize=e.detail.pageSize,this.updatePage()}}"></ix-pagination>`}get isPersistable(){return!!this.localStorageID}get columnNames(){return this.columns.map(e=>e.name)}get columnsLocalStorageKey(){return`ix-grid-${this.localStorageID}-columns`}get arrangedColumns(){let e=[];var t;return(e=0===(e=this.isPersistable&&0<(t=JSON.parse(localStorage.getItem(this.columnsLocalStorageKey)||"[]")).length?t.map(t=>({...this.columns.find(e=>e.name===t.name),hidden:t.hidden,frozenToEnd:t.frozenToEnd,width:t.width||void 0})):e).length?[...this.columns]:e).filter(e=>e).map(e=>({...e,width:e.width||void 0}))}async updatePage(){var e,t,i=this.filters.reduce((e,{columnField:t,value:i})=>({...e,[t]:i}),{});this.addParamsToURL&&(t={sort:this.sortedColumn,order:this.sortDirection,page:this.page.toString(),size:this.pageSize.toString(),...i},e=new URL(window.location.href),t=new URLSearchParams(t),e.search=t.toString(),window.history.replaceState(null,"",e.toString())),this.dispatchEvent(new CustomEvent("change",{detail:{columnName:this.sortedColumn,sortOrder:this.sortDirection,page:this.page,pageSize:this.pageSize,filters:i,filtersOperators:this.filters.map(e=>({columnField:e.columnField,operator:e.operatorValue}))},bubbles:!0,composed:!0}))}handleSort(e=""){this.sortedColumn!==e?this.sortDirection="asc":this.sortDirection="asc"===this.sortDirection?"desc":"asc",this.sortedColumn=e,this.updatePage()}setColumnsToLocalStorage(e){this.isPersistable&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify(e))}async reorderColumnsFromTable(){var t=this.arrangedColumns.filter(e=>!0!==e.hidden),o=this.arrangedColumns.filter(e=>!0===e.hidden),r=this.arrangedColumns.filter(e=>!0===e.frozenToEnd);let l=[...t.filter(e=>!0!==(null==e?void 0:e.frozenToEnd)),...o.filter(e=>!0!==(null==e?void 0:e.frozenToEnd)),...r];t=Array.from((null==(t=null==(t=this.grid)?void 0:t.shadowRoot)?void 0:t.querySelectorAll("th"))||[]);if(t.length){let i=t.map((e,t)=>({id:t,flexPosition:Number(e.style.order)})).sort((e,t)=>e.flexPosition-t.flexPosition).map(e=>e.id);let e=[];i.every((e,t)=>0===t||e>i[t-1])||(e=i.map(e=>l[e]),this.columns=[...e.filter(e=>!0!==e.hidden&&!0!==(null==e?void 0:e.frozenToEnd)),...o.filter(e=>!0!==(null==e?void 0:e.frozenToEnd)),...r],this.isLoading=!0,await this.updateComplete,this.isLoading=!1),this.setColumnsToLocalStorage(0<e.length?[...this.columns]:[...l])}}async reorderColumnsFromFilter(e){this.columns=[...e.detail.reorderedColumns],this.setColumnsToLocalStorage([...this.columns]),this.isLoading=!0,await this.updateComplete,this.isLoading=!1}handleOnColumnFilter(e){e.detail.columns.forEach((e,t)=>{this.columns[t].hidden=null==e?void 0:e.hidden}),this.updatePage()}renderColumns(){return 0<this.arrangedColumns.length?html`${this.arrangedColumns.map((e,t)=>!0===e.hidden?nothing:html`<vaadin-grid-column ${columnHeaderRenderer(()=>this.renderColumnHeader(e,t,this.arrangedColumns.length),this.sortDirection)} ${columnBodyRenderer(e.bodyRenderer,[])} resizable width="${ifDefined(e.width)}" ?hidden="${e.hidden}" ?frozen-to-end="${e.frozenToEnd}" path="${e.name}"></vaadin-grid-column>`)}`:html`<vaadin-grid-column></vaadin-grid-column>`}render(){return html`<div class="${`grid-container ${this.isLoading?"loading":""} `+this.variantClass}">${this.hideHeader?nothing:this.renderHeader()} ${this.isLoading?nothing:html`<vaadin-grid .items="${0<this.rowLimit&&!this.isExpanded?this.rows.slice(0,this.rowLimit):this.rows}" all-rows-visible ?column-reordering-allowed="${this.columnReorderingAllowed}" theme="no-border" @mouseup="${this.reorderColumnsFromTable}">${this.renderColumns()}</vaadin-grid>${0!==this.rows.length||this.isLoading?nothing:html`<slot name="no-rows"></slot>`}`} ${0<this.rowLimit?this.renderRowLimitControls():this.renderPaginationControls()}<slot name="footer"></slot></div>`}}IxGrid.styles=[IxGridViewStyles],__decorate([query("vaadin-grid")],IxGrid.prototype,"grid",void 0),__decorate([property({type:Boolean,attribute:"column-reordering-allowed"})],IxGrid.prototype,"columnReorderingAllowed",void 0),__decorate([property({type:String})],IxGrid.prototype,"variantClass",void 0),__decorate([property({type:Array})],IxGrid.prototype,"columns",void 0),__decorate([property({type:Array})],IxGrid.prototype,"rows",void 0),__decorate([property({type:String})],IxGrid.prototype,"defaultEmptyText",void 0),__decorate([property({type:String})],IxGrid.prototype,"sortedColumn",void 0),__decorate([property({type:String})],IxGrid.prototype,"sortDirection",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"hideHeader",void 0),__decorate([property({type:Boolean,attribute:"hide-filters"})],IxGrid.prototype,"hideFilters",void 0),__decorate([property({type:Number})],IxGrid.prototype,"rowLimit",void 0),__decorate([property({type:Number})],IxGrid.prototype,"page",void 0),__decorate([property({type:Number})],IxGrid.prototype,"pageSize",void 0),__decorate([property({type:Array})],IxGrid.prototype,"pageSizes",void 0),__decorate([property({type:Number})],IxGrid.prototype,"recordCount",void 0),__decorate([property({type:String})],IxGrid.prototype,"localStorageID",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"showDownload",void 0),__decorate([property({type:Array})],IxGrid.prototype,"downloadMenuItems",void 0),__decorate([property({type:Boolean,attribute:"add-params-to-url"})],IxGrid.prototype,"addParamsToURL",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"refreshDataOnColumnVisibilityChange",void 0),__decorate([state()],IxGrid.prototype,"filters",void 0),__decorate([state()],IxGrid.prototype,"isLoading",void 0),__decorate([state()],IxGrid.prototype,"isExpanded",void 0),window.customElements.define("ix-grid",IxGrid);
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent ix-grid following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "Digital Realty",
6
- "version": "1.0.58",
6
+ "version": "1.0.59",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -103,5 +103,5 @@
103
103
  "prettier --write"
104
104
  ]
105
105
  },
106
- "gitHead": "38606c9fa669543932975c06b2d5a8f6c3658219"
106
+ "gitHead": "460bd0621ab15eb3e3bd377da7108aec35b34e9e"
107
107
  }
package/src/IxGrid.ts CHANGED
@@ -77,6 +77,9 @@ export class IxGrid extends LitElement {
77
77
  @property({ type: Boolean, attribute: 'add-params-to-url' }) addParamsToURL =
78
78
  true;
79
79
 
80
+ @property({ type: Boolean }) refreshDataOnColumnVisibilityChange: boolean =
81
+ true;
82
+
80
83
  @state() private filters: Filter[] = [];
81
84
 
82
85
  @state() isLoading = false;
@@ -302,6 +305,10 @@ export class IxGrid extends LitElement {
302
305
  columnsLocalStorageKey=${ifDefined(this.columnsLocalStorageKey)}
303
306
  @columnFilter=${(e: CustomEvent) => this.handleOnColumnFilter(e)}
304
307
  @reorderColumns=${this.reorderColumnsFromFilter}
308
+ .columnReorderingAllowed=${this.columnReorderingAllowed}
309
+ .refreshDataOnColumnVisibilityChange=${this
310
+ .refreshDataOnColumnVisibilityChange}
311
+ .requestGridUpdate=${() => this.requestUpdate()}
305
312
  ></ix-grid-column-filter>
306
313
  ${this.showDownload
307
314
  ? html`<ix-grid-download-menu
package/src/components/IxGridColumnFilter.ts CHANGED
@@ -23,6 +23,13 @@ export class IxGridColumnFilter extends LitElement {
23
23
  @property({ type: String }) columnsLocalStorageKey: string | undefined =
24
24
  undefined;
25
25
 
26
+ @property({ type: Boolean }) columnReorderingAllowed: boolean = false;
27
+
28
+ @property({ type: Boolean }) refreshDataOnColumnVisibilityChange: boolean =
29
+ true;
30
+
31
+ @property({ attribute: false }) requestGridUpdate: any;
32
+
26
33
  @state() private isDropdownVisible: boolean = false;
27
34
 
28
35
  @state() disabledColumns: string[] = [];
@@ -113,7 +120,8 @@ export class IxGridColumnFilter extends LitElement {
113
120
  );
114
121
  }
115
122
 
116
- this.dispatchUpdate();
123
+ if (this.refreshDataOnColumnVisibilityChange) this.dispatchUpdate();
124
+ else this.requestGridUpdate();
117
125
  }
118
126
 
119
127
  dispatchUpdate(columns = this.columns) {
@@ -129,41 +137,47 @@ export class IxGridColumnFilter extends LitElement {
129
137
  }
130
138
 
131
139
  dragstart(e: DragEvent) {
132
- const el = e.target as HTMLElement;
133
- this.dragEvent.sourceEl = el;
134
- el.style.opacity = '0.3';
135
- const id = Number(el.getAttribute('data-id') as string);
136
- this.dragEvent.startId = id;
140
+ if (this.columnReorderingAllowed) {
141
+ const el = e.target as HTMLElement;
142
+ this.dragEvent.sourceEl = el;
143
+ el.style.opacity = '0.3';
144
+ const id = Number(el.getAttribute('data-id') as string);
145
+ this.dragEvent.startId = id;
146
+ }
137
147
  }
138
148
 
139
149
  dragend() {
140
- if (this.dragEvent.startId !== this.dragEvent.targetId) {
141
- const reorderedColumns = [...this.columns];
142
- const el = reorderedColumns.splice(this.dragEvent.startId, 1)[0];
143
- reorderedColumns.splice(this.dragEvent.targetId, 0, el);
144
- this.dispatchEvent(
145
- new CustomEvent('reorderColumns', {
146
- detail: {
147
- reorderedColumns,
148
- },
149
- bubbles: true,
150
- composed: true,
151
- })
152
- );
150
+ if (this.columnReorderingAllowed) {
151
+ if (this.dragEvent.startId !== this.dragEvent.targetId) {
152
+ const reorderedColumns = [...this.columns];
153
+ const el = reorderedColumns.splice(this.dragEvent.startId, 1)[0];
154
+ reorderedColumns.splice(this.dragEvent.targetId, 0, el);
155
+ this.dispatchEvent(
156
+ new CustomEvent('reorderColumns', {
157
+ detail: {
158
+ reorderedColumns,
159
+ },
160
+ bubbles: true,
161
+ composed: true,
162
+ })
163
+ );
164
+ }
165
+ this.dragEvent.sourceEl?.style.removeProperty('opacity');
166
+ this.dragEvent = {
167
+ sourceEl: null,
168
+ startId: -1,
169
+ targetId: -1,
170
+ };
153
171
  }
154
- this.dragEvent.sourceEl?.style.removeProperty('opacity');
155
- this.dragEvent = {
156
- sourceEl: null,
157
- startId: -1,
158
- targetId: -1,
159
- };
160
172
  }
161
173
 
162
174
  dragenter(e: DragEvent) {
163
- const el = e.target as HTMLElement;
164
- if (el.classList.contains('drag-target')) {
165
- const target = Number(el.getAttribute('data-id') as string);
166
- this.dragEvent.targetId = target;
175
+ if (this.columnReorderingAllowed) {
176
+ const el = e.target as HTMLElement;
177
+ if (el.classList.contains('drag-target')) {
178
+ const target = Number(el.getAttribute('data-id') as string);
179
+ this.dragEvent.targetId = target;
180
+ }
167
181
  }
168
182
  }
169
183