@omegagrid/editor 0.10.2 → 0.10.4

package/dist/ui/formulabar.js

@@ -0,0 +1,155 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { isFormula, CellModel } from '@omegagrid/grid';
+import { LitElement, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { style } from './formulabar.style';
+let EditorFormula = class EditorFormula extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isInputActive = false;
+        this._onGridSelectorUpdate = (e) => {
+            if (!this.isInputActive)
+                return;
+            if (e.selector?.index == null)
+                return;
+            const range = e.selector.selection.clone();
+            if (e.selector.grid != this.grid)
+                range.sheet = e.selector.grid.model.name;
+            this.formulaInput.setRange(range, e.selector.index);
+        };
+        this._onGridSelect = (e) => {
+            if (e.grid.editing.isFormulaMode) {
+                if (!this.isInputActive)
+                    return;
+                const range = e.selection.range.clone();
+                if (e.grid != this.grid)
+                    range.sheet = e.grid.model.name;
+                this.formulaInput.setRange(range);
+            }
+            else {
+                if (e.selection.range.isCell) {
+                    this.gridElement = e.grid.selecting.activeCell;
+                }
+                else if (e.selection.range.isColumn) {
+                    this.gridElement = e.grid.selecting.activeCell.column;
+                }
+                else if (e.selection.range.isRow) {
+                    this.gridElement = e.grid.selecting.activeCell.row;
+                }
+                if (this.formulaInput)
+                    this.formulaInput.value = this.gridElementValue;
+            }
+        };
+        this._onInputPreview = (e) => {
+            this.grid.selecting.removeFormulaHighlight();
+            if (e.formula)
+                this.grid.selecting.highlightFormula(e.formula);
+        };
+        this._onInputCommit = () => {
+            this.commit();
+        };
+        this._onInputDiscard = () => {
+            if (!this.formulaInput.isDiscarded)
+                this.commit();
+            this.grid.editing.endFormulaMode();
+            this.grid.focus();
+            this.isInputActive = false;
+            this.formulaInput.value = (this.gridElement ? (this.gridElement.value2 ?? '') : '').toString();
+        };
+        this._onAddressFocus = () => {
+            const range = this.grid?.selection.range;
+            const name = this.gridElement?.name;
+            this.addressInput.selectionStart = name ? (range.A1.length + 2) : 0;
+            this.addressInput.selectionEnd = name ? (this.addressInput.selectionStart + name.length) : range.A1.length;
+        };
+        this._onInputFocus = () => {
+            this.isInputActive = true;
+            if (isFormula(this.formulaInput.inputValue))
+                this.grid.editing.startFormulaMode();
+        };
+        this._onInput = () => {
+            if (isFormula(this.formulaInput.inputValue))
+                this.grid.editing.startFormulaMode();
+        };
+        this.render = () => {
+            const range = this.grid?.selection.range;
+            return html `
+			<div id="address">
+				<input id="addressInput"
+					type="text"
+					@focus="${this._onAddressFocus}"
+					.value="${range ? `${range.A1}${this.gridElement?.name ? ` (${this.gridElement.name})` : ''}` : ''}"
+					readonly>
+			</div>
+			
+			<og-grid-formula id="formulaInput"
+				.tokenizer="${this.grid?.model.calculations.tokenizer}"
+				.value="${this.gridElementValue}"
+				@input="${this._onInput}"
+				@focus="${this._onInputFocus}"
+				@formula.preview="${this._onInputPreview}"
+				@formula.commit="${this._onInputCommit}"
+				@formula.discard="${this._onInputDiscard}">
+			</og-grid-formula>
+		`;
+        };
+    }
+    get gridElementValue() { return (this.gridElement?.value2 ?? '').toString(); }
+    willUpdate(props) {
+        if (props.has('grid') && this.grid) {
+            const eventTarget = this.grid.group ? this.grid.group : this.grid;
+            eventTarget.removeEventListener('grid.selector.resize', this._onGridSelectorUpdate);
+            eventTarget.removeEventListener('grid.selector.move', this._onGridSelectorUpdate);
+            eventTarget.removeEventListener('grid.select', this._onGridSelect);
+            eventTarget.addEventListener('grid.selector.resize', this._onGridSelectorUpdate);
+            eventTarget.addEventListener('grid.selector.move', this._onGridSelectorUpdate);
+            eventTarget.addEventListener('grid.select', this._onGridSelect);
+        }
+    }
+    commit() {
+        if (this.formulaInput.isDiscarded)
+            return;
+        const gridElement = this.gridElement;
+        const value = this.formulaInput.value;
+        if (gridElement instanceof CellModel) {
+            gridElement.value = value;
+            this.grid.rendering.updateCell(gridElement, true);
+        }
+        else if (gridElement && isFormula(value)) {
+            gridElement.formula = value;
+            this.grid.rendering.calculateViewport(true);
+            this.grid.rendering.render(false);
+        }
+        else if (gridElement) {
+            gridElement.formula = null;
+            this.grid.rendering.calculateViewport(true);
+            this.grid.rendering.render(false);
+        }
+        this.grid.editing.endFormulaMode();
+        this.grid.focus();
+        this.isInputActive = false;
+    }
+};
+EditorFormula.styles = [style];
+__decorate([
+    property({ type: Object })
+], EditorFormula.prototype, "grid", void 0);
+__decorate([
+    state()
+], EditorFormula.prototype, "gridElement", void 0);
+__decorate([
+    query('#addressInput')
+], EditorFormula.prototype, "addressInput", void 0);
+__decorate([
+    query('#formulaInput')
+], EditorFormula.prototype, "formulaInput", void 0);
+EditorFormula = __decorate([
+    customElement('og-editor-formula')
+], EditorFormula);
+export { EditorFormula };
+//# sourceMappingURL=formulabar.js.map

package/dist/ui/formulabar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formulabar.js","sourceRoot":"","sources":["../../src/ui/formulabar.ts"],"names":[],"mappings":"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","sourcesContent":["import { isFormula, CellModel, ElementModel, Grid, FormulaInput, FormulaInputEvent, SelectorEvent, GridEvent } from '@omegagrid/grid';\nimport { LitElement, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { style } from './formulabar.style';\n\n@customElement('og-editor-formula')\nexport class EditorFormula extends LitElement {\n\n\tstatic styles = [style];\n\t@property({type: Object})\n\tgrid: Grid;\n\n\t@state()\n\tgridElement: ElementModel;\n\n\t@query('#addressInput')\n\taddressInput: HTMLInputElement;\n\n\t@query('#formulaInput')\n\tformulaInput: FormulaInput;\n\n\tprivate isInputActive = false;\n\t\n\tget gridElementValue() { return (this.gridElement?.value2 ?? '').toString() }\n\n\t_onGridSelectorUpdate = (e: SelectorEvent) => {\n\t\tif (!this.isInputActive) return;\n\t\tif (e.selector?.index == null) return;\n\t\tconst range = e.selector.selection.clone();\n\t\tif (e.selector.grid != this.grid) range.sheet = e.selector.grid.model.name;\n\t\tthis.formulaInput.setRange(range, e.selector.index);\n\t}\n\n\t_onGridSelect = (e: GridEvent) => {\n\t\tif (e.grid.editing.isFormulaMode) {\n\t\t\tif (!this.isInputActive) return;\n\t\t\tconst range = e.selection.range.clone();\n\t\t\tif (e.grid != this.grid) range.sheet = e.grid.model.name;\n\t\t\tthis.formulaInput.setRange(range);\n\t\t} else {\n\t\t\tif (e.selection.range.isCell) {\n\t\t\t\tthis.gridElement = e.grid.selecting.activeCell;\n\t\t\t} else if (e.selection.range.isColumn) {\n\t\t\t\tthis.gridElement = e.grid.selecting.activeCell.column;\n\t\t\t} else if (e.selection.range.isRow) {\n\t\t\t\tthis.gridElement = e.grid.selecting.activeCell.row;\n\t\t\t}\n\n\t\t\tif (this.formulaInput) this.formulaInput.value = this.gridElementValue;\n\t\t}\n\t}\n\n\twillUpdate(props: Map<PropertyKey, unknown>) {\n\t\tif (props.has('grid') && this.grid) {\n\t\t\tconst eventTarget = this.grid.group ? this.grid.group : this.grid;\n\t\t\teventTarget.removeEventListener('grid.selector.resize', this._onGridSelectorUpdate);\n\t\t\teventTarget.removeEventListener('grid.selector.move', this._onGridSelectorUpdate);\n\t\t\teventTarget.removeEventListener('grid.select', this._onGridSelect);\n\t\t\teventTarget.addEventListener('grid.selector.resize', this._onGridSelectorUpdate);\n\t\t\teventTarget.addEventListener('grid.selector.move', this._onGridSelectorUpdate);\n\t\t\teventTarget.addEventListener('grid.select', this._onGridSelect);\n\t\t}\n\t}\n\n\t_onInputPreview = (e: FormulaInputEvent) => {\n\t\tthis.grid.selecting.removeFormulaHighlight();\n\t\tif (e.formula) this.grid.selecting.highlightFormula(e.formula);\n\t}\n\n\tcommit() {\n\t\tif (this.formulaInput.isDiscarded) return;\n\t\tconst gridElement = this.gridElement;\n\t\tconst value = this.formulaInput.value;\n\t\tif (gridElement instanceof CellModel) {\n\t\t\tgridElement.value = value;\n\t\t\tthis.grid.rendering.updateCell(gridElement, true);\n\t\t} else if (gridElement && isFormula(value)) {\n\t\t\tgridElement.formula = value;\n\t\t\tthis.grid.rendering.calculateViewport(true);\n\t\t\tthis.grid.rendering.render(false);\n\t\t} else if (gridElement) {\n\t\t\tgridElement.formula = null;\n\t\t\tthis.grid.rendering.calculateViewport(true);\n\t\t\tthis.grid.rendering.render(false);\n\t\t}\n\n\t\tthis.grid.editing.endFormulaMode();\n\t\tthis.grid.focus();\n\t\tthis.isInputActive = false;\n\t}\n\n\t_onInputCommit = () => {\n\t\tthis.commit();\n\t}\n\n\t_onInputDiscard = () => {\n\t\tif (!this.formulaInput.isDiscarded) this.commit();\n\t\tthis.grid.editing.endFormulaMode();\n\t\tthis.grid.focus();\n\t\tthis.isInputActive = false;\n\t\tthis.formulaInput.value = (this.gridElement ? (this.gridElement.value2 ?? '') : '').toString();\n\t}\n\n\t_onAddressFocus = () => {\n\t\tconst range = this.grid?.selection.range;\n\t\tconst name = this.gridElement?.name;\n\t\tthis.addressInput.selectionStart = name ? (range.A1.length + 2) : 0;\n\t\tthis.addressInput.selectionEnd = name ? (this.addressInput.selectionStart + name.length) : range.A1.length;\n\t}\n\n\t_onInputFocus = () => {\n\t\tthis.isInputActive = true;\n\t\tif (isFormula(this.formulaInput.inputValue)) this.grid.editing.startFormulaMode();\n\t}\n\n\t_onInput = () => {\n\t\tif (isFormula(this.formulaInput.inputValue)) this.grid.editing.startFormulaMode();\n\t}\n\t\n\trender = () => {\n\t\tconst range = this.grid?.selection.range;\n\t\treturn html`\n\t\t\t<div id=\"address\">\n\t\t\t\t<input id=\"addressInput\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t@focus=\"${this._onAddressFocus}\"\n\t\t\t\t\t.value=\"${range ? `${range.A1}${this.gridElement?.name ? ` (${this.gridElement.name})` : ''}` : ''}\"\n\t\t\t\t\treadonly>\n\t\t\t</div>\n\t\t\t\n\t\t\t<og-grid-formula id=\"formulaInput\"\n\t\t\t\t.tokenizer=\"${this.grid?.model.calculations.tokenizer}\"\n\t\t\t\t.value=\"${this.gridElementValue}\"\n\t\t\t\t@input=\"${this._onInput}\"\n\t\t\t\t@focus=\"${this._onInputFocus}\"\n\t\t\t\t@formula.preview=\"${this._onInputPreview}\"\n\t\t\t\t@formula.commit=\"${this._onInputCommit}\"\n\t\t\t\t@formula.discard=\"${this._onInputDiscard}\">\n\t\t\t</og-grid-formula>\n\t\t`;\n\t};\n\n}"]}

package/dist/ui/formulabar.style.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+//# sourceMappingURL=formulabar.style.d.ts.map

package/dist/ui/formulabar.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formulabar.style.d.ts","sourceRoot":"","sources":["../../src/ui/formulabar.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBA6CjB,CAAC"}

package/dist/ui/formulabar.style.js

@@ -0,0 +1,48 @@
+import { css } from 'lit';
+export const style = css `
+	* {
+		box-sizing: border-box;
+	}
+
+	:host {
+		font-size: var(--og-font-size);
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: row;
+		gap: 4px;
+		position: relative;
+		background-color: var(--og-background-color);
+		padding: 4px;
+		outline: none;
+	}
+
+	#address {
+		flex: 0;
+		min-width: 100px;
+		border: 1.5px solid var(--og-accent-color);
+		border-radius: var(--og-base-radius);
+		padding: 0;
+	}
+
+	#address input {
+		outline: none;
+		border: none;
+		color: var(--og-text-color);
+		background-color: transparent;
+		display: block;
+		height: 100%;
+		width: 100%;
+	}
+
+
+	#formulaInput {
+		flex: 1;
+		height: 100%;
+		outline: none;
+		border: 1.5px solid var(--og-accent-color);
+		border-radius: var(--og-base-radius);
+		display: block;
+		padding: 0;
+	}
+`;
+//# sourceMappingURL=formulabar.style.js.map

package/dist/ui/formulabar.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formulabar.style.js","sourceRoot":"","sources":["../../src/ui/formulabar.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host {\n\t\tfont-size: var(--og-font-size);\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 4px;\n\t\tposition: relative;\n\t\tbackground-color: var(--og-background-color);\n\t\tpadding: 4px;\n\t\toutline: none;\n\t}\n\n\t#address {\n\t\tflex: 0;\n\t\tmin-width: 100px;\n\t\tborder: 1.5px solid var(--og-accent-color);\n\t\tborder-radius: var(--og-base-radius);\n\t\tpadding: 0;\n\t}\n\n\t#address input {\n\t\toutline: none;\n\t\tborder: none;\n\t\tcolor: var(--og-text-color);\n\t\tbackground-color: transparent;\n\t\tdisplay: block;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\n\n\t#formulaInput {\n\t\tflex: 1;\n\t\theight: 100%;\n\t\toutline: none;\n\t\tborder: 1.5px solid var(--og-accent-color);\n\t\tborder-radius: var(--og-base-radius);\n\t\tdisplay: block;\n\t\tpadding: 0;\n\t}\n`;"]}

package/dist/ui/gridStats.d.ts

@@ -0,0 +1,11 @@
+import { CellRange, Grid } from '@omegagrid/grid';
+import { LitElement } from 'lit';
+export declare class GridStats extends LitElement {
+    static styles: import("lit").CSSResult[];
+    grid: Grid;
+    range: CellRange;
+    stats: [string, string][];
+    willUpdate(props: Map<PropertyKey, unknown>): void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=gridStats.d.ts.map

package/dist/ui/gridStats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridStats.d.ts","sourceRoot":"","sources":["../../src/ui/gridStats.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,qBACa,SAAU,SAAQ,UAAU;IAExC,MAAM,CAAC,MAAM,4BAYV;IAGH,IAAI,EAAE,IAAI,CAAC;IAGX,KAAK,EAAE,SAAS,CAAC;IAGjB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAM;IAE/B,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAsB3C,MAAM,6CAMJ;CAEF"}

package/dist/ui/gridStats.js

@@ -0,0 +1,71 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { CellRange, functions } from '@omegagrid/grid';
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { map } from 'lit-html/directives/map.js';
+import { numbers } from '@omegagrid/core';
+let GridStats = class GridStats extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.stats = [];
+        this.render = () => html `
+		${map(this.stats, item => html `
+			<div class="item">
+				<span>${item[0]}</span>: <span>${item[1]}</span>
+			</div>
+		`)}
+	`;
+    }
+    willUpdate(props) {
+        if ((props.has('grid') || props.has('range')) && this.range && this.grid?.model) {
+            const stats = [];
+            const values = this.grid.model.getValuesInRange(CellRange.fromA1(this.range.A1));
+            const numberFormatter = numbers.getNumberFormatter(this.grid.options.locale, '#,0.###');
+            // avg
+            const avg = functions._map.get('AVERAGE')(values);
+            if (avg)
+                stats.push(['avg', numberFormatter(avg)]);
+            // cnt
+            const cnt = functions._map.get('COUNT')(values);
+            if (cnt)
+                stats.push(['cnt', cnt.toString()]);
+            // sum
+            const sum = functions._map.get('SUM')(values);
+            if (sum)
+                stats.push(['sum', numberFormatter(sum)]);
+            this.stats = stats;
+        }
+    }
+};
+GridStats.styles = [css `
+		:host {
+			display: flex;
+			flex-direction: row;
+			white-space: nowrap;
+			font-size: var(--og-font-size);
+			gap: 10px;
+		}
+
+		.item {
+			flex: 1;
+		}
+	`];
+__decorate([
+    property({ type: Object })
+], GridStats.prototype, "grid", void 0);
+__decorate([
+    property({ type: Object })
+], GridStats.prototype, "range", void 0);
+__decorate([
+    state()
+], GridStats.prototype, "stats", void 0);
+GridStats = __decorate([
+    customElement('og-editor-gridstats')
+], GridStats);
+export { GridStats };
+//# sourceMappingURL=gridStats.js.map

package/dist/ui/gridStats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridStats.js","sourceRoot":"","sources":["../../src/ui/gridStats.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAQ,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,4BAA4B,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAGnC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAuBN,UAAK,GAAuB,EAAE,CAAC;QAwB/B,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;IAChB,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;YAEpB,IAAI,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,CAAC,CAAC;;GAEzC,CAAC;EACF,CAAC;IAEH,CAAC;IA9BA,UAAU,CAAC,KAAgC;QAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;YACjF,MAAM,KAAK,GAAsB,EAAE,CAAC;YACpC,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;YACjF,MAAM,eAAe,GAAG,OAAO,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;YAExF,MAAM;YACN,MAAM,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,MAAM,CAAW,CAAC;YAC5D,IAAI,GAAG;gBAAE,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YAEnD,MAAM;YACN,MAAM,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,MAAM,CAAW,CAAC;YAC1D,IAAI,GAAG;gBAAE,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;YAE7C,MAAM;YACN,MAAM,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CAAW,CAAC;YACxD,IAAI,GAAG;gBAAE,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YAEnD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACpB,CAAC;IACF,CAAC;;AA3CM,gBAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;;;;;;EAYnB,CAAC,AAZW,CAYV;AAGH;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;uCACd;AAGX;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;wCACR;AAGjB;IADC,KAAK,EAAE;wCACuB;AAvBnB,SAAS;IADrB,aAAa,CAAC,qBAAqB,CAAC;GACxB,SAAS,CAuDrB","sourcesContent":["import { CellRange, functions, Grid } from '@omegagrid/grid';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { map } from 'lit-html/directives/map.js';\nimport { numbers } from '@omegagrid/core';\n\n@customElement('og-editor-gridstats')\nexport class GridStats extends LitElement {\n\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\twhite-space: nowrap;\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tgap: 10px;\n\t\t}\n\n\t\t.item {\n\t\t\tflex: 1;\n\t\t}\n\t`];\n\n\t@property({type: Object})\n\tgrid: Grid;\n\n\t@property({type: Object})\n\trange: CellRange;\n\n\t@state()\n\tstats: [string, string][] = [];\n\t\n\twillUpdate(props: Map<PropertyKey, unknown>) {\n\t\tif ((props.has('grid') || props.has('range')) && this.range && this.grid?.model) {\n\t\t\tconst stats: typeof this.stats = [];\n\t\t\tconst values = this.grid.model.getValuesInRange(CellRange.fromA1(this.range.A1));\n\t\t\tconst numberFormatter = numbers.getNumberFormatter(this.grid.options.locale, '#,0.###');\n\n\t\t\t// avg\n\t\t\tconst avg = functions._map.get('AVERAGE')(values) as number;\n\t\t\tif (avg) stats.push(['avg', numberFormatter(avg)]);\n\n\t\t\t// cnt\n\t\t\tconst cnt = functions._map.get('COUNT')(values) as number;\n\t\t\tif (cnt) stats.push(['cnt', cnt.toString()]);\n\n\t\t\t// sum\n\t\t\tconst sum = functions._map.get('SUM')(values) as number;\n\t\t\tif (sum) stats.push(['sum', numberFormatter(sum)]);\n\t\t\t\n\t\t\tthis.stats = stats;\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t${map(this.stats, item => html`\n\t\t\t<div class=\"item\">\n\t\t\t\t<span>${item[0]}</span>: <span>${item[1]}</span>\n\t\t\t</div>\n\t\t`)}\n\t`;\n\n}"]}

package/dist/ui/index.d.ts

@@ -0,0 +1,11 @@
+export * from './forms/configForm';
+export * from './editor';
+export * from './editorZoom';
+export * from './formulabar';
+export * from './gridStats';
+export * from './statusbar';
+export * from './toolbar';
+export * from './forms';
+export * from './sidebars';
+export * from './editors';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC"}

package/dist/ui/index.js

@@ -0,0 +1,11 @@
+export * from './forms/configForm';
+export * from './editor';
+export * from './editorZoom';
+export * from './formulabar';
+export * from './gridStats';
+export * from './statusbar';
+export * from './toolbar';
+export * from './forms';
+export * from './sidebars';
+export * from './editors';
+//# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC","sourcesContent":["export * from './forms/configForm';\nexport * from './editor';\nexport * from './editorZoom';\nexport * from './formulabar';\nexport * from './gridStats';\nexport * from './statusbar';\nexport * from './toolbar';\nexport * from './forms';\nexport * from './sidebars';\nexport * from './editors';"]}

package/dist/ui/sidebars/baseSidebar.d.ts

@@ -0,0 +1,10 @@
+import { OmegaComponent } from "@omegagrid/core";
+import { CellRange, Grid, GridGroup, GridModel } from "@omegagrid/grid";
+export declare abstract class BaseSidebar extends OmegaComponent {
+    static styles: import("lit").CSSResultGroup[];
+    model: GridModel;
+    grid: Grid;
+    group: GridGroup;
+    range: CellRange;
+}
+//# sourceMappingURL=baseSidebar.d.ts.map

package/dist/ui/sidebars/baseSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"baseSidebar.d.ts","sourceRoot":"","sources":["../../../src/ui/sidebars/baseSidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAGxE,8BAAsB,WAAY,SAAQ,cAAc;IAEvD,MAAM,CAAC,MAAM,iCAA2B;IAGxC,KAAK,EAAE,SAAS,CAAC;IAGjB,IAAI,EAAE,IAAI,CAAC;IAGX,KAAK,EAAE,SAAS,CAAC;IAGjB,KAAK,EAAE,SAAS,CAAC;CAEjB"}

package/dist/ui/sidebars/baseSidebar.js

@@ -0,0 +1,24 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { OmegaComponent } from "@omegagrid/core";
+import { property } from "lit/decorators.js";
+export class BaseSidebar extends OmegaComponent {
+}
+BaseSidebar.styles = [OmegaComponent.styles];
+__decorate([
+    property({ type: Object })
+], BaseSidebar.prototype, "model", void 0);
+__decorate([
+    property({ type: Object })
+], BaseSidebar.prototype, "grid", void 0);
+__decorate([
+    property({ type: Object })
+], BaseSidebar.prototype, "group", void 0);
+__decorate([
+    property({ type: Object })
+], BaseSidebar.prototype, "range", void 0);
+//# sourceMappingURL=baseSidebar.js.map

package/dist/ui/sidebars/baseSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"baseSidebar.js","sourceRoot":"","sources":["../../../src/ui/sidebars/baseSidebar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAgB,WAAY,SAAQ,cAAc;;AAEhD,kBAAM,GAAG,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAGxC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;0CACR;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yCACd;AAGX;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;0CACR;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;0CACR","sourcesContent":["import { OmegaComponent } from \"@omegagrid/core\";\nimport { CellRange, Grid, GridGroup, GridModel } from \"@omegagrid/grid\";\nimport { property } from \"lit/decorators.js\";\n\nexport abstract class BaseSidebar extends OmegaComponent {\n\n\tstatic styles = [OmegaComponent.styles];\n\n\t@property({type: Object})\n\tmodel: GridModel;\n\n\t@property({type: Object})\n\tgrid: Grid;\n\n\t@property({type: Object})\n\tgroup: GridGroup;\n\n\t@property({type: Object})\n\trange: CellRange;\n\n}"]}

package/dist/ui/sidebars/index.d.ts

@@ -0,0 +1,2 @@
+export * from './themeEditorSidebar';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/sidebars/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/sidebars/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/ui/sidebars/index.js

@@ -0,0 +1,2 @@
+export * from './themeEditorSidebar';
+//# sourceMappingURL=index.js.map

package/dist/ui/sidebars/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/sidebars/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './themeEditorSidebar';\n"]}

package/dist/ui/sidebars/themeEditorSidebar.d.ts

@@ -0,0 +1,14 @@
+import { BaseSidebar } from './baseSidebar';
+import { TreeDropdown } from '@omegagrid/tree';
+import { TableTheme } from '@omegagrid/grid';
+export declare class ThemeEditorSidebar extends BaseSidebar {
+    static styles: (import("lit").CSSResult | import("lit").CSSResultGroup[])[];
+    themeList: TreeDropdown;
+    theme: TableTheme;
+    willUpdate(): void;
+    updated(): void;
+    addTheme(): void;
+    _onApplyClick: () => void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=themeEditorSidebar.d.ts.map

package/dist/ui/sidebars/themeEditorSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeEditorSidebar.d.ts","sourceRoot":"","sources":["../../../src/ui/sidebars/themeEditorSidebar.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAa,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,qBACa,kBAAmB,SAAQ,WAAW;IAElD,MAAM,CAAC,MAAM,+DA6BV;IAGH,SAAS,EAAE,YAAY,CAAC;IAGxB,KAAK,EAAE,UAAU,CAAC;IAElB,UAAU;IAMV,OAAO;IAaP,QAAQ;IAUR,aAAa,aAGZ;IAED,MAAM,6CAqBJ;CAEF"}

package/dist/ui/sidebars/themeEditorSidebar.js

@@ -0,0 +1,110 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property, query } from 'lit/decorators.js';
+import { html, css } from 'lit';
+import { BaseSidebar } from './baseSidebar';
+import { msg } from '@omegagrid/localize';
+let ThemeEditorSidebar = class ThemeEditorSidebar extends BaseSidebar {
+    constructor() {
+        super(...arguments);
+        this._onApplyClick = () => {
+            this.grid?.model.applyTheme(this.theme, true);
+            this.grid.refresh();
+        };
+        this.render = () => html `
+		<div class="header">
+			<og-tree-dropdown
+				@change="${(e) => {
+            this.theme = e.node ? this.group.model.themes.get(e.node.key) : null;
+        }}"
+				style="flex: 1" 
+				.value="${this.theme == null ? null : [[this.theme.name, 0, 1]]}">
+			</og-tree-dropdown>
+
+			<og-button @click="${this._onApplyClick}">
+				<div slot="content"><og-icon icon="refresh"></og-icon> ${msg('Apply')}</div>
+			</og-button>
+			
+			<og-button icon="plus" style="flex: 0 0 20px" @click="${() => this.addTheme()}"></og-button>
+		</div>
+
+		<div class="body">
+			<og-input .value="${this.theme?.name}" style="flex: 0 20px"></og-input>
+			<og-editor-theme .theme="${this.theme}" style="flex: 1"></og-editor-theme>
+		</div>
+	`;
+    }
+    willUpdate() {
+        if (this.theme == null && this.group?.model?.themes?.size) {
+            this.theme = [...this.group.model.themes.values()][0];
+        }
+    }
+    updated() {
+        if (this.group?.model?.themes) {
+            this.themeList.setSourceData([...this.group.model.themes.values()].map((theme) => ({
+                k: theme.name,
+                v: theme.name
+            })), {
+                checkboxes: false,
+                selectMode: 'single',
+                autoClose: true,
+            });
+        }
+    }
+    addTheme() {
+        const model = this.group?.model;
+        if (!model)
+            return;
+        let i = model.themes.size + 1;
+        while (model.themes.has(`Theme ${i}`))
+            ++i;
+        const theme = { name: `Theme ${i}` };
+        model.themes.set(theme.name, theme);
+        this.theme = theme;
+    }
+};
+ThemeEditorSidebar.styles = [BaseSidebar.styles, css `
+		:host {
+			display: flex;
+			flex-direction: column;
+		}
+
+		.header {
+			flex: 0;
+			padding: 0 4px 4px;
+			display: flex;
+			flex-direction: row;
+			gap: 4px;
+		}
+
+		.body {
+			flex: 1;
+			padding: 0 4px 4px;
+			display: flex;
+			flex-direction: column;
+			overflow: hidden;
+		}
+
+		og-editor-theme {
+			margin-top: 4px;
+		}
+
+		og-input {
+			display: block;
+		}
+	`];
+__decorate([
+    query('og-tree-dropdown')
+], ThemeEditorSidebar.prototype, "themeList", void 0);
+__decorate([
+    property({ type: Object })
+], ThemeEditorSidebar.prototype, "theme", void 0);
+ThemeEditorSidebar = __decorate([
+    customElement('og-editor-themesidebar')
+], ThemeEditorSidebar);
+export { ThemeEditorSidebar };
+//# sourceMappingURL=themeEditorSidebar.js.map

package/dist/ui/sidebars/themeEditorSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeEditorSidebar.js","sourceRoot":"","sources":["../../../src/ui/sidebars/themeEditorSidebar.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement, property, query } from 'lit/decorators.js';\nimport { html, css } from 'lit';\nimport { BaseSidebar } from './baseSidebar';\nimport { TreeDropdown, TreeEvent } from '@omegagrid/tree';\nimport { TableTheme } from '@omegagrid/grid';\nimport { msg } from '@omegagrid/localize';\n\n@customElement('og-editor-themesidebar')\nexport class ThemeEditorSidebar extends BaseSidebar {\n\n\tstatic styles = [BaseSidebar.styles, css`\n\t\t:host {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t.header {\n\t\t\tflex: 0;\n\t\t\tpadding: 0 4px 4px;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tgap: 4px;\n\t\t}\n\n\t\t.body {\n\t\t\tflex: 1;\n\t\t\tpadding: 0 4px 4px;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\tog-editor-theme {\n\t\t\tmargin-top: 4px;\n\t\t}\n\n\t\tog-input {\n\t\t\tdisplay: block;\n\t\t}\n\t`];\n\n\t@query('og-tree-dropdown')\n\tthemeList: TreeDropdown;\n\n\t@property({type: Object})\n\ttheme: TableTheme;\n\n\twillUpdate() {\n\t\tif (this.theme == null && this.group?.model?.themes?.size) {\n\t\t\tthis.theme = [...this.group.model.themes.values()][0];\n\t\t}\n\t}\n\n\tupdated() {\n\t\tif (this.group?.model?.themes) {\n\t\t\tthis.themeList.setSourceData([...this.group.model.themes.values()].map((theme) => ({\n\t\t\t\tk: theme.name, \n\t\t\t\tv: theme.name\n\t\t\t})), {\n\t\t\t\tcheckboxes: false,\n\t\t\t\tselectMode: 'single',\n\t\t\t\tautoClose: true,\n\t\t\t});\n\t\t}\n\t}\n\n\taddTheme() {\n\t\tconst model = this.group?.model;\n\t\tif (!model) return;\n\t\tlet i = model.themes.size + 1;\n\t\twhile (model.themes.has(`Theme ${i}`)) ++i;\n\t\tconst theme = {name: `Theme ${i}`} as TableTheme;\n\t\tmodel.themes.set(theme.name, theme);\n\t\tthis.theme = theme;\n\t}\n\n\t_onApplyClick = () => {\n\t\tthis.grid?.model.applyTheme(this.theme, true);\n\t\tthis.grid.refresh();\n\t}\n\n\trender = () => html`\n\t\t<div class=\"header\">\n\t\t\t<og-tree-dropdown\n\t\t\t\t@change=\"${(e: TreeEvent) => {\n\t\t\t\t\tthis.theme = e.node ? this.group.model.themes.get(e.node.key) : null;\n\t\t\t\t}}\"\n\t\t\t\tstyle=\"flex: 1\" \n\t\t\t\t.value=\"${this.theme == null ? null : [[this.theme.name, 0, 1]]}\">\n\t\t\t</og-tree-dropdown>\n\n\t\t\t<og-button @click=\"${this._onApplyClick}\">\n\t\t\t\t<div slot=\"content\"><og-icon icon=\"refresh\"></og-icon> ${msg('Apply')}</div>\n\t\t\t</og-button>\n\t\t\t\n\t\t\t<og-button icon=\"plus\" style=\"flex: 0 0 20px\" @click=\"${() => this.addTheme()}\"></og-button>\n\t\t</div>\n\n\t\t<div class=\"body\">\n\t\t\t<og-input .value=\"${this.theme?.name}\" style=\"flex: 0 20px\"></og-input>\n\t\t\t<og-editor-theme .theme=\"${this.theme}\" style=\"flex: 1\"></og-editor-theme>\n\t\t</div>\n\t`;\n\n}"]}

package/dist/ui/statusbar.d.ts

@@ -0,0 +1,19 @@
+import { CellRange, Grid, GridEditEvent, GridGroup } from '@omegagrid/grid';
+import { LitElement } from 'lit';
+import { ComponentId } from '@omegagrid/core';
+export type StatusBarComponent = HTMLElement & {
+    group: GridGroup;
+    grid: Grid;
+    range: CellRange;
+};
+export declare class EditorStatusbar extends LitElement {
+    components: Map<ComponentId, StatusBarComponent>;
+    group: GridGroup;
+    grid: Grid;
+    range: CellRange;
+    _onGridEdit: (_e: GridEditEvent) => void;
+    willUpdate(_props: Map<PropertyKey, unknown>): void;
+    createComponent: (id: ComponentId) => StatusBarComponent;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=statusbar.d.ts.map

package/dist/ui/statusbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"statusbar.d.ts","sourceRoot":"","sources":["../../src/ui/statusbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,WAAW,EAAO,MAAM,iBAAiB,CAAC;AAuBnD,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAAC,KAAK,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAC,CAAC;AAEhG,qBACa,eAAgB,SAAQ,UAAU;IAI9C,UAAU,uCAA8C;IAGxD,KAAK,EAAE,SAAS,CAAC;IAGjB,IAAI,EAAE,IAAI,CAAC;IAGX,KAAK,EAAE,SAAS,CAAC;IAEjB,WAAW,GAAI,IAAI,aAAa,UAE/B;IAED,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAQ5C,eAAe,GAAI,IAAI,WAAW,wBAGhC;IAEF,MAAM,6CAKJ;CAEF"}