@revolist/revogrid 4.0.2-next → 4.0.2

package/dist/collection/components/header/revogr-header.js

@@ -1,304 +1,428 @@
-import { Component, Element, Event, h, Prop } from '@stencil/core';
-import keyBy from 'lodash/keyBy';
-import { HEADER_ACTUAL_ROW_CLASS, HEADER_ROW_CLASS } from '../../utils/consts';
-import HeaderRenderer from './headerRenderer';
-import ColumnGroupsRenderer from '../../plugins/groupingColumn/columnGroupsRenderer';
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { h, } from "@stencil/core";
+import keyBy from "lodash/keyBy";
+import { HEADER_ACTUAL_ROW_CLASS, HEADER_ROW_CLASS } from "../../utils/consts";
+import HeaderRenderer from "./header-renderer";
+import ColumnGroupsRenderer from "../../plugins/groupingColumn/columnGroupsRenderer";
 export class RevogrHeaderComponent {
-  constructor() {
-    this.parent = '';
-    this.groupingDepth = 0;
-  }
-  onResize({ width }, index) {
-    this.headerresize.emit({ [index]: width || 0 });
-  }
-  onResizeGroup(changedX, startIndex, endIndex) {
-    const sizes = {};
-    const cols = keyBy(this.viewportCol.get('items'), 'itemIndex');
-    const change = changedX / (endIndex - startIndex + 1);
-    for (let i = startIndex; i <= endIndex; i++) {
-      const item = cols[i];
-      if (item) {
-        sizes[i] = item.size + change;
-      }
+    constructor() {
+        this.viewportCol = undefined;
+        this.dimensionCol = undefined;
+        this.selectionStore = undefined;
+        this.groups = undefined;
+        this.groupingDepth = 0;
+        this.readonly = undefined;
+        this.canResize = undefined;
+        this.resizeHandler = undefined;
+        this.colData = undefined;
+        this.columnFilter = undefined;
+        this.type = undefined;
+        this.additionalData = {};
     }
-    this.headerresize.emit(sizes);
-  }
-  render() {
-    var _a;
-    const cols = this.viewportCol.get('items');
-    const range = (_a = this.selectionStore) === null || _a === void 0 ? void 0 : _a.get('range');
-    const cells = [];
-    const visibleProps = {};
-    // render header columns
-    for (let rgCol of cols) {
-      const colData = this.colData[rgCol.itemIndex];
-      cells.push(h(HeaderRenderer, { range: range, column: rgCol, data: Object.assign(Object.assign({}, colData), { index: rgCol.itemIndex, providers: this.providers }), canFilter: !!this.columnFilter, canResize: this.canResize, onResize: e => this.onResize(e, rgCol.itemIndex), onDoubleClick: e => this.headerdblClick.emit(e), onClick: e => this.initialHeaderClick.emit(e) }));
-      visibleProps[colData === null || colData === void 0 ? void 0 : colData.prop] = rgCol.itemIndex;
-    }
-    return [
-      h("div", { class: "group-rgRow" },
-        h(ColumnGroupsRenderer, { canResize: this.canResize, visibleProps: visibleProps, providers: this.providers, groups: this.groups, dimensionCol: this.dimensionCol.state, depth: this.groupingDepth, onResize: (changedX, startIndex, endIndex) => this.onResizeGroup(changedX, startIndex, endIndex) })),
-      h("div", { class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}` }, cells),
-    ];
-  }
-  get providers() {
-    return {
-      viewport: this.viewportCol,
-      dimension: this.dimensionCol,
-      selection: this.selectionStore
-    };
-  }
-  static get is() { return "revogr-header"; }
-  static get originalStyleUrls() { return {
-    "$": ["revogr-header-style.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["revogr-header-style.css"]
-  }; }
-  static get properties() { return {
-    "viewportCol": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Observable<RevoGrid.ViewportState>",
-        "resolved": "ObservableMap<ViewportState>",
-        "references": {
-          "Observable": {
-            "location": "import",
-            "path": "../../interfaces"
-          },
-          "RevoGrid": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "dimensionCol": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Observable<RevoGrid.DimensionSettingsState>",
-        "resolved": "ObservableMap<DimensionSettingsState>",
-        "references": {
-          "Observable": {
-            "location": "import",
-            "path": "../../interfaces"
-          },
-          "RevoGrid": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "selectionStore": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Observable<Selection.SelectionStoreState>",
-        "resolved": "ObservableMap<SelectionStoreState>",
-        "references": {
-          "Observable": {
-            "location": "import",
-            "path": "../../interfaces"
-          },
-          "Selection": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "parent": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "parent",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "groups": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Groups",
-        "resolved": "{ [x: string]: any; }",
-        "references": {
-          "Groups": {
-            "location": "import",
-            "path": "../../store/dataSource/data.store"
-          }
+    onResize({ width }, index) {
+        const col = this.colData[index];
+        const event = this.beforeResize.emit([
+            Object.assign(Object.assign({}, col), { size: width || undefined }),
+        ]);
+        if (event.defaultPrevented) {
+            return;
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "groupingDepth": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "grouping-depth",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "canResize": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "can-resize",
-      "reflect": false
-    },
-    "colData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "RevoGrid.ColumnRegular[]",
-        "resolved": "ColumnRegular[]",
-        "references": {
-          "RevoGrid": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "columnFilter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "column-filter",
-      "reflect": false
+        this.headerresize.emit({ [index]: width || 0 });
     }
-  }; }
-  static get events() { return [{
-      "method": "initialHeaderClick",
-      "name": "initialHeaderClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "RevoGrid.InitialHeaderClick",
-        "resolved": "{ index: number; originalEvent: MouseEvent; column: ColumnRegular; }",
-        "references": {
-          "RevoGrid": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
-        }
-      }
-    }, {
-      "method": "headerresize",
-      "name": "headerresize",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "RevoGrid.ViewSettingSizeProp",
-        "resolved": "{ [x: string]: number; }",
-        "references": {
-          "RevoGrid": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
+    onResizeGroup(changedX, startIndex, endIndex) {
+        const sizes = {};
+        const cols = keyBy(this.viewportCol.get('items'), 'itemIndex');
+        const change = changedX / (endIndex - startIndex + 1);
+        for (let i = startIndex; i <= endIndex; i++) {
+            const item = cols[i];
+            if (item) {
+                sizes[i] = item.size + change;
+            }
         }
-      }
-    }, {
-      "method": "headerdblClick",
-      "name": "headerdblClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "RevoGrid.InitialHeaderClick",
-        "resolved": "{ index: number; originalEvent: MouseEvent; column: ColumnRegular; }",
-        "references": {
-          "RevoGrid": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
+        this.headerresize.emit(sizes);
+    }
+    render() {
+        var _a;
+        const cols = this.viewportCol.get('items');
+        const range = (_a = this.selectionStore) === null || _a === void 0 ? void 0 : _a.get('range');
+        const cells = [];
+        const visibleProps = {};
+        // render header columns
+        for (let rgCol of cols) {
+            const colData = this.colData[rgCol.itemIndex];
+            cells.push(h(HeaderRenderer, { range: range, column: rgCol, data: Object.assign(Object.assign({}, colData), { index: rgCol.itemIndex, providers: this.providers }), canFilter: !!this.columnFilter, canResize: this.canResize, active: this.resizeHandler, onResize: e => this.onResize(e, rgCol.itemIndex), onDoubleClick: e => this.headerdblClick.emit(e), onClick: e => this.initialHeaderClick.emit(e), additionalData: this.additionalData }));
+            visibleProps[colData === null || colData === void 0 ? void 0 : colData.prop] = rgCol.itemIndex;
         }
-      }
-    }]; }
-  static get elementRef() { return "element"; }
+        return [
+            h("div", { key: '186c9ac48cd47c05c558772de450b4fb1e022510', class: "group-rgRow" }, h(ColumnGroupsRenderer, { key: '811b7b296e9f8835d744bb3d544d62e2c9a62234', canResize: this.canResize, active: this.resizeHandler, visibleProps: visibleProps, providers: this.providers, groups: this.groups, dimensionCol: this.dimensionCol.state, depth: this.groupingDepth, onResize: (changedX, startIndex, endIndex) => this.onResizeGroup(changedX, startIndex, endIndex), additionalData: this.additionalData })),
+            h("div", { key: '9077358e7cc8e72f4d4845dfb13b48e7839f7230', class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}` }, cells),
+        ];
+    }
+    get providers() {
+        return {
+            type: this.type,
+            readonly: this.readonly,
+            data: this.colData,
+            viewport: this.viewportCol,
+            dimension: this.dimensionCol,
+            selection: this.selectionStore,
+        };
+    }
+    static get is() { return "revogr-header"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["revogr-header-style.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["revogr-header-style.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "viewportCol": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<ViewportState>",
+                    "resolved": "ObservableMap<ViewportState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::Observable"
+                        },
+                        "ViewportState": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::ViewportState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Viewport X"
+                }
+            },
+            "dimensionCol": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<DimensionSettingsState>",
+                    "resolved": "ObservableMap<DimensionSettingsState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::Observable"
+                        },
+                        "DimensionSettingsState": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::DimensionSettingsState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dimension settings X"
+                }
+            },
+            "selectionStore": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<SelectionStoreState>",
+                    "resolved": "ObservableMap<SelectionStoreState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::Observable"
+                        },
+                        "SelectionStoreState": {
+                            "location": "import",
+                            "path": "../../types/selection",
+                            "id": "src/types/selection.ts::SelectionStoreState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selection, range, focus"
+                }
+            },
+            "groups": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Groups",
+                    "resolved": "{ [x: string]: any; }",
+                    "references": {
+                        "Groups": {
+                            "location": "import",
+                            "path": "../../store/dataSource/data.store",
+                            "id": "src/store/dataSource/data.store.ts::Groups"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column groups"
+                }
+            },
+            "groupingDepth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Grouping depth, how many levels of grouping"
+                },
+                "attribute": "grouping-depth",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Readonly mode"
+                },
+                "attribute": "readonly",
+                "reflect": false
+            },
+            "canResize": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If columns can be resized"
+                },
+                "attribute": "can-resize",
+                "reflect": false
+            },
+            "resizeHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ResizeProps['active']",
+                    "resolved": "(\"r\" | \"b\" | \"rt\" | \"lt\" | \"rb\" | \"lb\" | \"l\" | \"t\")[]",
+                    "references": {
+                        "ResizeProps": {
+                            "location": "import",
+                            "path": "../../services/resizable.directive",
+                            "id": "src/services/resizable.directive.tsx::ResizeProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines resize position"
+                }
+            },
+            "colData": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColumnRegular[]",
+                    "resolved": "ColumnRegular[]",
+                    "references": {
+                        "ColumnRegular": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::ColumnRegular"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Columns - defines an array of grid columns."
+                }
+            },
+            "columnFilter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column filter"
+                },
+                "attribute": "column-filter",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DimensionCols | 'rowHeaders'",
+                    "resolved": "\"colPinEnd\" | \"colPinStart\" | \"rgCol\" | \"rowHeaders\"",
+                    "references": {
+                        "DimensionCols": {
+                            "location": "import",
+                            "path": "../../types/dimension",
+                            "id": "src/types/dimension.ts::DimensionCols"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column type"
+                },
+                "attribute": "type",
+                "reflect": false
+            },
+            "additionalData": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Extra properties to pass into header renderer, such as vue or react components to handle parent"
+                },
+                "attribute": "additional-data",
+                "reflect": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "initialHeaderClick",
+                "name": "beforeheaderclick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "On initial header click"
+                },
+                "complexType": {
+                    "original": "InitialHeaderClick",
+                    "resolved": "{ index: number; originalEvent: MouseEvent; column: ColumnRegular; }",
+                    "references": {
+                        "InitialHeaderClick": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::InitialHeaderClick"
+                        }
+                    }
+                }
+            }, {
+                "method": "headerresize",
+                "name": "headerresize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "On header resize"
+                },
+                "complexType": {
+                    "original": "ViewSettingSizeProp",
+                    "resolved": "{ [x: string]: number; }",
+                    "references": {
+                        "ViewSettingSizeProp": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::ViewSettingSizeProp"
+                        }
+                    }
+                }
+            }, {
+                "method": "beforeResize",
+                "name": "beforeheaderresize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "On before header resize"
+                },
+                "complexType": {
+                    "original": "ColumnRegular[]",
+                    "resolved": "ColumnRegular[]",
+                    "references": {
+                        "ColumnRegular": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::ColumnRegular"
+                        }
+                    }
+                }
+            }, {
+                "method": "headerdblClick",
+                "name": "headerdblclick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "On header double click"
+                },
+                "complexType": {
+                    "original": "InitialHeaderClick",
+                    "resolved": "{ index: number; originalEvent: MouseEvent; column: ColumnRegular; }",
+                    "references": {
+                        "InitialHeaderClick": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::InitialHeaderClick"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
 }
+//# sourceMappingURL=revogr-header.js.map