lsp-grid 1.0.0

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

@@ -0,0 +1,573 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { h, } from "@stencil/core";
+import keyBy from "lodash/keyBy";
+import { getItemByIndex } from "../../store/index";
+import { HEADER_ACTUAL_ROW_CLASS, HEADER_ROW_CLASS } from "../../utils/consts";
+import HeaderRenderer from "./header-renderer";
+import GroupHeaderRenderer from "./header-group-renderer";
+export class RevogrHeaderComponent {
+    constructor() {
+        /**
+         * Grouping depth, how many levels of grouping
+         */
+        this.groupingDepth = 0;
+        /**
+         * Extra properties to pass into header renderer, such as vue or react components to handle parent
+         */
+        this.additionalData = {};
+    }
+    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;
+        }
+        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;
+            }
+        }
+        this.headerresize.emit(sizes);
+    }
+    componentDidRender() {
+        this.afterHeaderRender.emit(this.providers);
+    }
+    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 } = this.renderHeaderColumns(cols, range);
+        const groupRow = this.renderGroupingColumns();
+        return [
+            h("div", { key: '3a53e32cca624a748eb75bac2f9159b59a831319', class: "group-rgRow" }, groupRow),
+            h("div", { key: 'd22456b4c752d508bb589d15d515eedc18b808cb', class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}` }, cells),
+        ];
+    }
+    renderHeaderColumns(cols, range) {
+        const cells = [];
+        for (let rgCol of cols) {
+            const colData = this.colData[rgCol.itemIndex];
+            const props = {
+                range,
+                column: rgCol,
+                data: Object.assign(Object.assign({}, colData), { index: rgCol.itemIndex, providers: this.providers }),
+                canFilter: !!this.columnFilter,
+                canResize: this.canResize,
+                active: this.resizeHandler,
+                additionalData: this.additionalData,
+                onResize: e => this.onResize(e, rgCol.itemIndex),
+                onDblClick: e => this.headerdblClick.emit(e),
+                onClick: e => this.initialHeaderClick.emit(e),
+            };
+            const event = this.beforeHeaderRender.emit(props);
+            if (!event.defaultPrevented) {
+                cells.push(h(HeaderRenderer, Object.assign({}, event.detail)));
+            }
+        }
+        return { cells };
+    }
+    renderGroupingColumns() {
+        var _a;
+        const groupRow = [];
+        for (let i = 0; i < this.groupingDepth; i++) {
+            if (this.groups[i]) {
+                for (let group of this.groups[i]) {
+                    const groupStartIndex = (_a = group.indexes[0]) !== null && _a !== void 0 ? _a : -1;
+                    if (groupStartIndex > -1) {
+                        const groupEndIndex = groupStartIndex + group.indexes.length - 1;
+                        const groupStart = getItemByIndex(this.dimensionCol.state, groupStartIndex).start;
+                        const groupEnd = getItemByIndex(this.dimensionCol.state, groupEndIndex).end;
+                        const props = {
+                            providers: this.providers,
+                            start: groupStart,
+                            end: groupEnd,
+                            group,
+                            active: this.resizeHandler,
+                            canResize: this.canResize,
+                            additionalData: this.additionalData,
+                            onResize: e => {
+                                var _a;
+                                return this.onResizeGroup((_a = e.changedX) !== null && _a !== void 0 ? _a : 0, groupStartIndex, groupEndIndex);
+                            },
+                        };
+                        const event = this.beforeGroupHeaderRender.emit(props);
+                        if (!event.defaultPrevented) {
+                            groupRow.push(h(GroupHeaderRenderer, Object.assign({}, event.detail)));
+                        }
+                    }
+                }
+            }
+            groupRow.push(h("div", { class: `${HEADER_ROW_CLASS} group` }));
+        }
+        return groupRow;
+    }
+    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",
+                "attribute": "viewport-col",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<ViewportState>",
+                    "resolved": "ObservableMap<ViewportState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
+                        },
+                        "ViewportState": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ViewportState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Viewport X"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "dimensionCol": {
+                "type": "unknown",
+                "attribute": "dimension-col",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<DimensionSettingsState>",
+                    "resolved": "ObservableMap<DimensionSettingsState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
+                        },
+                        "DimensionSettingsState": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionSettingsState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dimension settings X"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "selectionStore": {
+                "type": "unknown",
+                "attribute": "selection-store",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<SelectionStoreState>",
+                    "resolved": "ObservableMap<SelectionStoreState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
+                        },
+                        "SelectionStoreState": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::SelectionStoreState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selection, range, focus"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "groups": {
+                "type": "unknown",
+                "attribute": "groups",
+                "mutable": false,
+                "complexType": {
+                    "original": "Groups",
+                    "resolved": "{ [x: number]: Group[]; }",
+                    "references": {
+                        "Groups": {
+                            "location": "import",
+                            "path": "@store",
+                            "id": "src/store/index.ts::Groups"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column groups"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "groupingDepth": {
+                "type": "number",
+                "attribute": "grouping-depth",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Grouping depth, how many levels of grouping"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Readonly mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "canResize": {
+                "type": "boolean",
+                "attribute": "can-resize",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If columns can be resized"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "resizeHandler": {
+                "type": "unknown",
+                "attribute": "resize-handler",
+                "mutable": false,
+                "complexType": {
+                    "original": "ResizeProps['active']",
+                    "resolved": "(\"r\" | \"b\" | \"rt\" | \"lt\" | \"rb\" | \"lb\" | \"l\" | \"t\")[]",
+                    "references": {
+                        "ResizeProps": {
+                            "location": "import",
+                            "path": "./resizable.directive",
+                            "id": "src/components/header/resizable.directive.tsx::ResizeProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines resize position"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "colData": {
+                "type": "unknown",
+                "attribute": "col-data",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColumnRegular[]",
+                    "resolved": "ColumnRegular[]",
+                    "references": {
+                        "ColumnRegular": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ColumnRegular"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Columns - defines an array of grid columns."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "columnFilter": {
+                "type": "boolean",
+                "attribute": "column-filter",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column filter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "DimensionCols | 'rowHeaders'",
+                    "resolved": "\"colPinEnd\" | \"colPinStart\" | \"rgCol\" | \"rowHeaders\"",
+                    "references": {
+                        "DimensionCols": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionCols"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "additionalData": {
+                "type": "any",
+                "attribute": "additional-data",
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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; providers: ProvidersColumns<DimensionCols | \"rowHeaders\">; }",
+                    "references": {
+                        "InitialHeaderClick": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.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": "@type",
+                            "id": "src/types/index.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": "@type",
+                            "id": "src/types/index.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; providers: ProvidersColumns<DimensionCols | \"rowHeaders\">; }",
+                    "references": {
+                        "InitialHeaderClick": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::InitialHeaderClick"
+                        }
+                    }
+                }
+            }, {
+                "method": "beforeHeaderRender",
+                "name": "beforeheaderrender",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Before each header cell render function. Allows to override cell properties"
+                },
+                "complexType": {
+                    "original": "HeaderRenderProps",
+                    "resolved": "{ column: VirtualPositionItem; additionalData: any; data: ColumnTemplateProp; range?: RangeArea | null | undefined; canResize?: boolean | undefined; canFilter?: boolean | undefined; onResize?(e: ResizeEvent): void; onClick?(data: InitialHeaderClick): void; onDblClick?(data: InitialHeaderClick): void; } & Partial<Pick<ResizeProps, \"active\">>",
+                    "references": {
+                        "HeaderRenderProps": {
+                            "location": "import",
+                            "path": "./header-renderer",
+                            "id": "src/components/header/header-renderer.tsx::HeaderRenderProps"
+                        }
+                    }
+                }
+            }, {
+                "method": "beforeGroupHeaderRender",
+                "name": "beforegroupheaderrender",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Before each group header cell render function. Allows to override group header cell properties"
+                },
+                "complexType": {
+                    "original": "HeaderGroupRendererProps",
+                    "resolved": "{ start: number; end: number; group: Group; providers: ProvidersColumns<DimensionCols | \"rowHeaders\">; additionalData: any; canResize?: boolean | undefined; onResize?(e: ResizeEvent): void; } & Partial<Pick<ResizeProps, \"active\">>",
+                    "references": {
+                        "HeaderGroupRendererProps": {
+                            "location": "import",
+                            "path": "./header-group-renderer",
+                            "id": "src/components/header/header-group-renderer.tsx::HeaderGroupRendererProps"
+                        }
+                    }
+                }
+            }, {
+                "method": "afterHeaderRender",
+                "name": "afterheaderrender",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "After all header cells rendered. Finalizes cell rendering."
+                },
+                "complexType": {
+                    "original": "ProvidersColumns",
+                    "resolved": "ProvidersColumns<DimensionCols | \"rowHeaders\">",
+                    "references": {
+                        "ProvidersColumns": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ProvidersColumns"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
+}
+//# sourceMappingURL=revogr-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"revogr-header.js","sourceRoot":"","sources":["../../../src/components/header/revogr-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,GAEL,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,MAAM,cAAc,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAU,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,cAAqC,MAAM,mBAAmB,CAAC;AAetE,OAAO,mBAEN,MAAM,yBAAyB,CAAC;AAMjC,MAAM,OAAO,qBAAqB;IAJlC;QAoBE;;WAEG;QACK,kBAAa,GAAG,CAAC,CAAC;QA8B1B;;WAEG;QACK,mBAAc,GAAQ,EAAE,CAAC;KAiMlC;IAxIS,QAAQ,CAAC,EAAE,KAAK,EAAsB,EAAE,KAAa;QAC3D,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;4CAE9B,GAAG,KACN,IAAI,EAAE,KAAK,IAAI,SAAS;SAE3B,CAAC,CAAC;QACH,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QACD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;IAClD,CAAC;IAEO,aAAa,CACnB,QAAgB,EAChB,UAAkB,EAClB,QAAgB;QAEhB,MAAM,KAAK,GAAwB,EAAE,CAAC;QACtC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC;QAC/D,MAAM,MAAM,GAAG,QAAQ,GAAG,CAAC,QAAQ,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC;QACtD,KAAK,IAAI,CAAC,GAAG,UAAU,EAAE,CAAC,IAAI,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5C,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;YACrB,IAAI,IAAI,EAAE,CAAC;gBACT,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;YAChC,CAAC;QACH,CAAC;QACD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM;;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC3C,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,cAAc,0CAAE,GAAG,CAAC,OAAO,CAAC,CAAC;QAEhD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAE9C,OAAO;YACL,4DAAK,KAAK,EAAC,aAAa,IAAE,QAAQ,CAAO;YACzC,4DAAK,KAAK,EAAE,GAAG,gBAAgB,IAAI,uBAAuB,EAAE,IACzD,KAAK,CACF;SACP,CAAC;IACJ,CAAC;IAEO,mBAAmB,CACzB,IAA2B,EAC3B,KAAuB;QAEvB,MAAM,KAAK,GAAY,EAAE,CAAC;QAC1B,KAAK,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;YACvB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YAC9C,MAAM,KAAK,GAAsB;gBAC/B,KAAK;gBACL,MAAM,EAAE,KAAK;gBACb,IAAI,kCACC,OAAO,KACV,KAAK,EAAE,KAAK,CAAC,SAAS,EACtB,SAAS,EAAE,IAAI,CAAC,SAAS,GAC1B;gBACD,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY;gBAC9B,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,MAAM,EAAE,IAAI,CAAC,aAAa;gBAC1B,cAAc,EAAE,IAAI,CAAC,cAAc;gBACnC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;gBAChD,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;aAC9C,CAAC;YACF,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAClD,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;gBAC5B,KAAK,CAAC,IAAI,CAAC,EAAC,cAAc,oBAAK,KAAK,CAAC,MAAM,EAAI,CAAC,CAAC;YACnD,CAAC;QACH,CAAC;QACD,OAAO,EAAE,KAAK,EAAE,CAAC;IACnB,CAAC;IAEO,qBAAqB;;QAC3B,MAAM,QAAQ,GAAY,EAAE,CAAC;QAC7B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5C,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;gBACnB,KAAK,IAAI,KAAK,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;oBACjC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,mCAAI,CAAC,CAAC,CAAC;oBAC/C,IAAI,eAAe,GAAG,CAAC,CAAC,EAAE,CAAC;wBACzB,MAAM,aAAa,GAAG,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;wBAEjE,MAAM,UAAU,GAAG,cAAc,CAC/B,IAAI,CAAC,YAAY,CAAC,KAAK,EACvB,eAAe,CAChB,CAAC,KAAK,CAAC;wBACR,MAAM,QAAQ,GAAG,cAAc,CAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,EACvB,aAAa,CACd,CAAC,GAAG,CAAC;wBAEN,MAAM,KAAK,GAA6B;4BACtC,SAAS,EAAE,IAAI,CAAC,SAAS;4BACzB,KAAK,EAAE,UAAU;4BACjB,GAAG,EAAE,QAAQ;4BACb,KAAK;4BACL,MAAM,EAAE,IAAI,CAAC,aAAa;4BAC1B,SAAS,EAAE,IAAI,CAAC,SAAS;4BACzB,cAAc,EAAE,IAAI,CAAC,cAAc;4BACnC,QAAQ,EAAE,CAAC,CAAC,EAAE;;gCACZ,OAAA,IAAI,CAAC,aAAa,CAChB,MAAA,CAAC,CAAC,QAAQ,mCAAI,CAAC,EACf,eAAe,EACf,aAAa,CACd,CAAA;6BAAA;yBACJ,CAAC;wBACF,MAAM,KAAK,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;wBACvD,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;4BAC5B,QAAQ,CAAC,IAAI,CAAC,EAAC,mBAAmB,oBAAK,KAAK,CAAC,MAAM,EAAI,CAAC,CAAC;wBAC3D,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC;YACD,QAAQ,CAAC,IAAI,CAAC,WAAK,KAAK,EAAE,GAAG,gBAAgB,QAAQ,GAAI,CAAC,CAAC;QAC7D,CAAC;QACD,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,IAAI,SAAS;QACX,OAAO;YACL,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,IAAI,EAAE,IAAI,CAAC,OAAO;YAClB,QAAQ,EAAE,IAAI,CAAC,WAAW;YAC1B,SAAS,EAAE,IAAI,CAAC,YAAY;YAC5B,SAAS,EAAE,IAAI,CAAC,cAAc;SAC/B,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\r\n  Component,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  h,\r\n  Prop,\r\n  type VNode,\r\n} from '@stencil/core';\r\nimport keyBy from 'lodash/keyBy';\r\n\r\nimport { getItemByIndex, Groups } from '@store';\r\nimport { HEADER_ACTUAL_ROW_CLASS, HEADER_ROW_CLASS } from '../../utils/consts';\r\nimport HeaderRenderer, { HeaderRenderProps } from './header-renderer';\r\nimport { ResizeProps } from './resizable.directive';\r\nimport type {\r\n  ColumnRegular,\r\n  DimensionSettingsState,\r\n  InitialHeaderClick,\r\n  ViewportState,\r\n  ViewSettingSizeProp,\r\n  DimensionCols,\r\n  SelectionStoreState,\r\n  RangeArea,\r\n  VirtualPositionItem,\r\n  ProvidersColumns,\r\n} from '@type';\r\nimport type { Observable } from '../../utils';\r\nimport GroupHeaderRenderer, {\r\n  HeaderGroupRendererProps,\r\n} from './header-group-renderer';\r\n\r\n@Component({\r\n  tag: 'revogr-header',\r\n  styleUrl: 'revogr-header-style.scss',\r\n})\r\nexport class RevogrHeaderComponent {\r\n  // #region Properties\r\n  /**\r\n   * Stores\r\n   */\r\n  /** Viewport X */\r\n  @Prop() viewportCol: Observable<ViewportState>;\r\n  /** Dimension settings X */\r\n  @Prop() dimensionCol: Observable<DimensionSettingsState>;\r\n  /** Selection, range, focus */\r\n  @Prop() selectionStore: Observable<SelectionStoreState>;\r\n\r\n  /**\r\n   * Column groups\r\n   */\r\n  @Prop() groups: Groups;\r\n  /**\r\n   * Grouping depth, how many levels of grouping\r\n   */\r\n  @Prop() groupingDepth = 0;\r\n\r\n  /**\r\n   * Readonly mode\r\n   */\r\n  @Prop() readonly: boolean;\r\n  /**\r\n   * If columns can be resized\r\n   */\r\n  @Prop() canResize: boolean;\r\n  /**\r\n   * Defines resize position\r\n   */\r\n  @Prop() resizeHandler: ResizeProps['active'];\r\n\r\n  /**\r\n   * Columns - defines an array of grid columns.\r\n   */\r\n  @Prop() colData: ColumnRegular[];\r\n\r\n  /**\r\n   * Column filter\r\n   */\r\n  @Prop() columnFilter: boolean;\r\n\r\n  /**\r\n   * Column type\r\n   */\r\n  @Prop() type!: DimensionCols | 'rowHeaders';\r\n\r\n  /**\r\n   * Extra properties to pass into header renderer, such as vue or react components to handle parent\r\n   */\r\n  @Prop() additionalData: any = {};\r\n  // #endregion\r\n\r\n  // #region Events\r\n\r\n  /**\r\n   * On initial header click\r\n   */\r\n  @Event({\r\n    eventName: 'beforeheaderclick',\r\n  })\r\n  initialHeaderClick: EventEmitter<InitialHeaderClick>;\r\n\r\n  /**\r\n   * On header resize\r\n   */\r\n  @Event({\r\n    eventName: 'headerresize',\r\n  })\r\n  headerresize: EventEmitter<ViewSettingSizeProp>;\r\n\r\n  /**\r\n   * On before header resize\r\n   */\r\n  @Event({ eventName: 'beforeheaderresize', cancelable: true })\r\n  beforeResize: EventEmitter<ColumnRegular[]>;\r\n\r\n  /**\r\n   * On header double click\r\n   */\r\n  @Event({\r\n    eventName: 'headerdblclick',\r\n  })\r\n  headerdblClick: EventEmitter<InitialHeaderClick>;\r\n\r\n  /**\r\n   * Before each header cell render function. Allows to override cell properties\r\n   */\r\n  @Event({ eventName: 'beforeheaderrender' })\r\n  beforeHeaderRender: EventEmitter<HeaderRenderProps>;\r\n\r\n  /**\r\n   * Before each group header cell render function. Allows to override group header cell properties\r\n   */\r\n  @Event({ eventName: 'beforegroupheaderrender' })\r\n  beforeGroupHeaderRender: EventEmitter<HeaderGroupRendererProps>;\r\n\r\n  /**\r\n   * After all header cells rendered. Finalizes cell rendering.\r\n   */\r\n  @Event({ eventName: 'afterheaderrender' })\r\n  afterHeaderRender: EventEmitter<ProvidersColumns>;\r\n\r\n  // #endregion\r\n\r\n  @Element() element!: HTMLElement;\r\n\r\n  private onResize({ width }: { width?: number }, index: number) {\r\n    const col = this.colData[index];\r\n    const event = this.beforeResize.emit([\r\n      {\r\n        ...col,\r\n        size: width || undefined,\r\n      },\r\n    ]);\r\n    if (event.defaultPrevented) {\r\n      return;\r\n    }\r\n    this.headerresize.emit({ [index]: width || 0 });\r\n  }\r\n\r\n  private onResizeGroup(\r\n    changedX: number,\r\n    startIndex: number,\r\n    endIndex: number,\r\n  ) {\r\n    const sizes: ViewSettingSizeProp = {};\r\n    const cols = keyBy(this.viewportCol.get('items'), 'itemIndex');\r\n    const change = changedX / (endIndex - startIndex + 1);\r\n    for (let i = startIndex; i <= endIndex; i++) {\r\n      const item = cols[i];\r\n      if (item) {\r\n        sizes[i] = item.size + change;\r\n      }\r\n    }\r\n    this.headerresize.emit(sizes);\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.afterHeaderRender.emit(this.providers);\r\n  }\r\n\r\n  render() {\r\n    const cols = this.viewportCol.get('items');\r\n    const range = this.selectionStore?.get('range');\r\n\r\n    const { cells } = this.renderHeaderColumns(cols, range);\r\n    const groupRow = this.renderGroupingColumns();\r\n\r\n    return [\r\n      <div class=\"group-rgRow\">{groupRow}</div>,\r\n      <div class={`${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}`}>\r\n        {cells}\r\n      </div>,\r\n    ];\r\n  }\r\n\r\n  private renderHeaderColumns(\r\n    cols: VirtualPositionItem[],\r\n    range: RangeArea | null,\r\n  ) {\r\n    const cells: VNode[] = [];\r\n    for (let rgCol of cols) {\r\n      const colData = this.colData[rgCol.itemIndex];\r\n      const props: HeaderRenderProps = {\r\n        range,\r\n        column: rgCol,\r\n        data: {\r\n          ...colData,\r\n          index: rgCol.itemIndex,\r\n          providers: this.providers,\r\n        },\r\n        canFilter: !!this.columnFilter,\r\n        canResize: this.canResize,\r\n        active: this.resizeHandler,\r\n        additionalData: this.additionalData,\r\n        onResize: e => this.onResize(e, rgCol.itemIndex),\r\n        onDblClick: e => this.headerdblClick.emit(e),\r\n        onClick: e => this.initialHeaderClick.emit(e),\r\n      };\r\n      const event = this.beforeHeaderRender.emit(props);\r\n      if (!event.defaultPrevented) {\r\n        cells.push(<HeaderRenderer {...event.detail} />);\r\n      }\r\n    }\r\n    return { cells };\r\n  }\r\n\r\n  private renderGroupingColumns(): VNode[] {\r\n    const groupRow: VNode[] = [];\r\n    for (let i = 0; i < this.groupingDepth; i++) {\r\n      if (this.groups[i]) {\r\n        for (let group of this.groups[i]) {\r\n          const groupStartIndex = group.indexes[0] ?? -1;\r\n          if (groupStartIndex > -1) {\r\n            const groupEndIndex = groupStartIndex + group.indexes.length - 1;\r\n\r\n            const groupStart = getItemByIndex(\r\n              this.dimensionCol.state,\r\n              groupStartIndex,\r\n            ).start;\r\n            const groupEnd = getItemByIndex(\r\n              this.dimensionCol.state,\r\n              groupEndIndex,\r\n            ).end;\r\n\r\n            const props: HeaderGroupRendererProps = {\r\n              providers: this.providers,\r\n              start: groupStart,\r\n              end: groupEnd,\r\n              group,\r\n              active: this.resizeHandler,\r\n              canResize: this.canResize,\r\n              additionalData: this.additionalData,\r\n              onResize: e =>\r\n                this.onResizeGroup(\r\n                  e.changedX ?? 0,\r\n                  groupStartIndex,\r\n                  groupEndIndex,\r\n                ),\r\n            };\r\n            const event = this.beforeGroupHeaderRender.emit(props);\r\n            if (!event.defaultPrevented) {\r\n              groupRow.push(<GroupHeaderRenderer {...event.detail} />);\r\n            }\r\n          }\r\n        }\r\n      }\r\n      groupRow.push(<div class={`${HEADER_ROW_CLASS} group`} />);\r\n    }\r\n    return groupRow;\r\n  }\r\n\r\n  get providers(): ProvidersColumns<DimensionCols | 'rowHeaders'> {\r\n    return {\r\n      type: this.type,\r\n      readonly: this.readonly,\r\n      data: this.colData,\r\n      viewport: this.viewportCol,\r\n      dimension: this.dimensionCol,\r\n      selection: this.selectionStore,\r\n    };\r\n  }\r\n}\r\n"]}

package/dist/collection/components/order/order-renderer.js

@@ -0,0 +1,50 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { h } from "@stencil/core";
+/**
+ * Draw drag
+ */
+export class OrdererService {
+    constructor() {
+        this.parentY = 0;
+    }
+    start(parent, { pos, text, event }) {
+        var _a;
+        const { top } = parent.getBoundingClientRect();
+        this.parentY = top;
+        if (this.text) {
+            this.text.innerText = text;
+        }
+        this.move(pos);
+        this.moveTip({ x: event.x, y: event.y });
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.remove('hidden');
+    }
+    end() {
+        var _a;
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.add('hidden');
+    }
+    move(pos) {
+        this.moveElement(pos.end - this.parentY);
+    }
+    moveTip({ x, y }) {
+        if (!this.draggable) {
+            return;
+        }
+        this.draggable.style.left = `${x}px`;
+        this.draggable.style.top = `${y}px`;
+    }
+    moveElement(y) {
+        if (!this.rgRow) {
+            return;
+        }
+        this.rgRow.style.transform = `translateY(${y}px)`;
+    }
+}
+const OrderRenderer = ({ ref }) => {
+    const service = new OrdererService();
+    ref(service);
+    return (h("div", { class: "draggable-wrapper hidden", ref: e => (service.el = e) }, h("div", { class: "draggable", ref: el => (service.draggable = el) }, h("span", { class: "revo-alt-icon" }), h("span", { ref: e => (service.text = e) })), h("div", { class: "drag-position", ref: e => (service.rgRow = e) })));
+};
+export default OrderRenderer;
+//# sourceMappingURL=order-renderer.js.map

package/dist/collection/components/order/order-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"order-renderer.js","sourceRoot":"","sources":["../../../src/components/order/order-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAc,MAAM,eAAe,CAAC;AAM9C;;GAEG;AACH,MAAM,OAAO,cAAc;IAA3B;QACU,YAAO,GAAG,CAAC,CAAC;IAoCtB,CAAC;IA9BC,KAAK,CAAC,MAAmB,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAA0D;;QACrG,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QAC/C,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAC7B,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACf,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;QACzC,MAAA,IAAI,CAAC,EAAE,0CAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC;IACD,GAAG;;QACD,MAAA,IAAI,CAAC,EAAE,0CAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IACD,IAAI,CAAC,GAAiB;QACpB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IACD,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAQ;QACpB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;QACrC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC;IACtC,CAAC;IAEO,WAAW,CAAC,CAAS;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC;IACpD,CAAC;CACF;AAED,MAAM,aAAa,GAAG,CAAC,EAAE,GAAG,EAAS,EAAW,EAAE;IAChD,MAAM,OAAO,GAAG,IAAI,cAAc,EAAE,CAAC;IACrC,GAAG,CAAC,OAAO,CAAC,CAAC;IACb,OAAO,CACL,WAAK,KAAK,EAAC,0BAA0B,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC;QAC9D,WAAK,KAAK,EAAC,WAAW,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;YACxD,YAAM,KAAK,EAAC,eAAe,GAAG;YAC9B,YAAM,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,GAAI,CAClC;QACN,WAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,GAAI,CACxD,CACP,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,aAAa,CAAC","sourcesContent":["import { h, type VNode } from '@stencil/core';\r\nimport { PositionItem } from '@type';\r\nimport { Cell } from '@type';\r\n\r\ntype Props = { ref: { (e: OrdererService): void } };\r\n\r\n/**\r\n * Draw drag\r\n */\r\nexport class OrdererService {\r\n  private parentY = 0;\r\n  el?: HTMLElement;\r\n  rgRow?: HTMLElement;\r\n  text?: HTMLElement;\r\n  draggable?: HTMLElement;\r\n\r\n  start(parent: HTMLElement, { pos, text, event }: { pos: PositionItem; text: string; event: MouseEvent }) {\r\n    const { top } = parent.getBoundingClientRect();\r\n    this.parentY = top;\r\n    if (this.text) {\r\n      this.text.innerText = text;\r\n    }\r\n    this.move(pos);\r\n    this.moveTip({ x: event.x, y: event.y });\r\n    this.el?.classList.remove('hidden');\r\n  }\r\n  end() {\r\n    this.el?.classList.add('hidden');\r\n  }\r\n  move(pos: PositionItem) {\r\n    this.moveElement(pos.end - this.parentY);\r\n  }\r\n  moveTip({ x, y }: Cell) {\r\n    if (!this.draggable) {\r\n      return;\r\n    }\r\n    this.draggable.style.left = `${x}px`;\r\n    this.draggable.style.top = `${y}px`;\r\n  }\r\n\r\n  private moveElement(y: number) {\r\n    if (!this.rgRow) {\r\n      return;\r\n    }\r\n    this.rgRow.style.transform = `translateY(${y}px)`;\r\n  }\r\n}\r\n\r\nconst OrderRenderer = ({ ref }: Props): VNode[] => {\r\n  const service = new OrdererService();\r\n  ref(service);\r\n  return (\r\n    <div class=\"draggable-wrapper hidden\" ref={e => (service.el = e)}>\r\n      <div class=\"draggable\" ref={el => (service.draggable = el)}>\r\n        <span class=\"revo-alt-icon\" />\r\n        <span ref={e => (service.text = e)} />\r\n      </div>\r\n      <div class=\"drag-position\" ref={e => (service.rgRow = e)} />\r\n    </div>\r\n  );\r\n};\r\nexport default OrderRenderer;\r\n"]}