@omegagrid/editor 0.10.2 → 0.10.4

package/dist/ui/forms/sparklineForm.js

@@ -0,0 +1,199 @@
+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 { CellRange } from '@omegagrid/grid';
+import { html, LitElement } from 'lit';
+import { itemStyle, style } from './sparklineForm.style';
+import { msg } from '@omegagrid/localize';
+const minMaxItems = [
+    { k: 'auto', v: 'auto' },
+    { k: 'common', v: 'common' }
+];
+const optionToolbarItems = [
+    { type: 'dropdown', id: 'chartType', width: 80, items: [
+            { k: 'column', v: 'column', icon: 'chart-column' },
+            { k: 'line', v: 'line', icon: 'chart-line' }
+        ] },
+    { type: 'color', id: 'color', icon: { icon: 'fill' } },
+    { type: 'text', id: 'min', width: 80, items: minMaxItems, placeholder: '<min>' },
+    { type: 'text', id: 'max', width: 80, items: minMaxItems, placeholder: '<max>' }
+];
+function stringToSparklineExtrme(v) {
+    if (v === '' || v == null)
+        return 'auto';
+    if (v == 'auto' || v == 'common')
+        return v;
+    return parseFloat(v);
+}
+let SparklineForm = class SparklineForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.updateList = () => {
+            this._groupIndexMap = null;
+            this.list.size = this.model.sparklines.groups.size;
+            this.list.renderItems(true);
+        };
+        this._onApplyClick = () => {
+            this.grid.model.refreshSparklines();
+            this.grid.rendering.render(true);
+        };
+        this._onOptionsToolbarAction = (e, groupIndex) => {
+            const a = e.action;
+            const group = this.model.sparklines.groups.get(groupIndex);
+            if (/^preview/.test(a.type))
+                return;
+            switch (a.key) {
+                case 'chartType':
+                    group.type = a.value;
+                    break;
+                case 'color':
+                    group.style.color = a.value.substring(1);
+                    break;
+                case 'min':
+                    group.minValue = stringToSparklineExtrme(a.value);
+                    break;
+                case 'max':
+                    group.maxValue = stringToSparklineExtrme(a.value);
+                    break;
+            }
+        };
+        this._itemRenderer = (_div, index) => {
+            const groupIndex = this.groupIndexMap.get(index);
+            const group = this.model.sparklines.groups.get(groupIndex);
+            return html `
+			<div class="item-content p">
+				<div class="item-form">
+					<div class="row item-header">
+						<div class="item-header-title">Definition #${index + 1}</div>
+						<div class="item-header-controls">
+							<og-button
+								icon="trash"
+								color="red"
+								@click="${() => this.deleteGroup(groupIndex)}">
+							</og-button>
+						</div>
+					</div>
+					
+					<div class="row">Location range</div>
+					<div class="row">
+						<og-input
+							data-id="locRange"
+							.value="${group.locRange?.A1 || ''}"
+							style="width: 100%"
+							@change="${(e) => this._onInputChange(e, groupIndex)}">
+						</og-input>
+					</div>
+
+					<div class="row">Data range</div>
+					<div class="row">
+						<og-input
+							data-id="dataRange"
+							.value="${(group.dataRanges ? CellRange.toA1s(group.dataRanges.map(item => item[0])) : null) || ''}"
+							style="width: 100%"
+							@change="${(e) => this._onInputChange(e, groupIndex)}">
+						</og-input>
+					</div>
+
+					<div class="row">Options</div>
+					<div class="row">
+						<og-toolbar 
+							.items="${optionToolbarItems}"
+							.values="${this.getToolbarValues(group)}"
+							@toolbar.action="${(e) => this._onOptionsToolbarAction(e, groupIndex)}">
+						</og-toolbar>
+					</div>
+				</div>
+			</div>
+		`;
+        };
+        this.render = () => this.model ? html `
+		<div class="controls p">
+			<og-button text="+" @click="${() => this.addGroup()}"></og-button>
+			<og-button @click="${this._onApplyClick}">
+				<div slot="content"><og-icon icon="refresh"></og-icon> ${msg('Apply')}</div>
+			</og-button>
+		</div>
+		<div class="body">
+			<og-list ?nativeHeight="${true}"
+				itemHeight="170"
+				.customStyle=${itemStyle}
+				.itemRenderer="${this._itemRenderer}"
+				.size="${this.model.sparklines.groups.size}">
+			</og-list>
+		</div>
+	` : '';
+    }
+    get groupIndexMap() {
+        if (!this._groupIndexMap) {
+            this._groupIndexMap = new Map();
+            let i = 0;
+            this.model.sparklines.groups.forEach((_group, index) => this._groupIndexMap.set(i++, index));
+        }
+        return this._groupIndexMap;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    // moveRuleUp(index: number) {
+    // 	if (index == 0) return;
+    // 	const formats = this.model.conditionalFormats.formats;
+    // 	formats.splice(index - 1, 0, formats.splice(index, 1)[0]);
+    // 	this.updateList();
+    // }
+    // moveRuleDown(index: number) {
+    // 	const formats = this.model.conditionalFormats.formats;
+    // 	if (index >= formats.length) return;
+    // 	formats.splice(index + 1, 0, formats.splice(index, 1)[0]);
+    // 	this.updateList();
+    // }
+    deleteGroup(index) {
+        this.model.sparklines.delete(index);
+        this.updateList();
+    }
+    addGroup() {
+        this.model.sparklines.add(null, null);
+        this.updateList();
+    }
+    _onInputChange(e, groupIndex) {
+        const sparklines = this.model.sparklines;
+        const group = sparklines.groups.get(groupIndex);
+        const input = e.target;
+        switch (input.dataset.id) {
+            case 'locRange':
+                sparklines.update(groupIndex, input.value ? CellRange.fromA1(input.value) : null, group.dataRanges);
+                break;
+            case 'dataRange':
+                sparklines.update(groupIndex, group.locRange, input.value
+                    ? CellRange.fromA1s(input.value).map(r => ([r, null]))
+                    : null);
+                break;
+        }
+    }
+    getToolbarValues(options) {
+        return {
+            chartType: options.type,
+            color: `#${options.style.color}`,
+            min: options.minValue,
+            max: options.maxValue,
+        };
+    }
+};
+SparklineForm.styles = [style];
+__decorate([
+    property({ type: Object })
+], SparklineForm.prototype, "grid", void 0);
+__decorate([
+    property({ type: Object })
+], SparklineForm.prototype, "model", void 0);
+__decorate([
+    query('og-list')
+], SparklineForm.prototype, "list", void 0);
+SparklineForm = __decorate([
+    customElement('og-editor-form-sparklines')
+], SparklineForm);
+export { SparklineForm };
+//# sourceMappingURL=sparklineForm.js.map

package/dist/ui/forms/sparklineForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparklineForm.js","sourceRoot":"","sources":["../../../src/ui/forms/sparklineForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { actions, Input, List } from '@omegagrid/core';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { CellRange, Grid, GridModel, SparklineExtremeValue, SparklineOptions, SparklineType } from '@omegagrid/grid';\nimport { html, LitElement } from 'lit';\nimport { itemStyle, style } from './sparklineForm.style';\nimport { ToolbarItem } from '@omegagrid/toolbar';\nimport { msg } from '@omegagrid/localize';\n\nconst minMaxItems = [\n\t{k: 'auto', v: 'auto'},\n\t{k: 'common', v: 'common'}\n];\n\nconst optionToolbarItems: ToolbarItem[] = [\n\t{type: 'dropdown', id: 'chartType', width: 80, items: [\n\t\t{k: 'column', v: 'column', icon: 'chart-column'},\n\t\t{k: 'line', v: 'line', icon: 'chart-line'}\n\t]},\n\t{type: 'color', id: 'color', icon: {icon: 'fill'}},\n\t{type: 'text', id: 'min', width: 80, items: minMaxItems, placeholder: '<min>'},\n\t{type: 'text', id: 'max', width: 80, items: minMaxItems, placeholder: '<max>'}\n];\n\nfunction stringToSparklineExtrme(v: string): SparklineExtremeValue {\n\tif (v === '' || v == null) return 'auto';\n\tif (v == 'auto' || v == 'common') return v;\n\treturn parseFloat(v);\n}\n\n@customElement('og-editor-form-sparklines')\nexport class SparklineForm extends LitElement {\n\n\tstatic styles = [style];\n\n\t@property({type: Object})\n\tgrid: Grid;\n\n\t@property({type: Object})\n\tmodel: GridModel;\n\n\t@query('og-list')\n\tlist: List;\n\n\t_groupIndexMap: Map<number, number>;\n\tget groupIndexMap() {\n\t\tif (!this._groupIndexMap) {\n\t\t\tthis._groupIndexMap = new Map();\n\t\t\tlet i = 0;\n\t\t\tthis.model.sparklines.groups.forEach((_group, index) => this._groupIndexMap.set(i++, index));\n\t\t}\n\t\treturn this._groupIndexMap;\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t}\n\n\tupdateList = () => {\n\t\tthis._groupIndexMap = null;\n\t\tthis.list.size = this.model.sparklines.groups.size;\n\t\tthis.list.renderItems(true);\n\t}\n\n\t// moveRuleUp(index: number) {\n\t// \tif (index == 0) return;\n\t// \tconst formats = this.model.conditionalFormats.formats;\n\t// \tformats.splice(index - 1, 0, formats.splice(index, 1)[0]);\n\t// \tthis.updateList();\n\t// }\n\t\n\t// moveRuleDown(index: number) {\n\t// \tconst formats = this.model.conditionalFormats.formats;\n\t// \tif (index >= formats.length) return;\n\t// \tformats.splice(index + 1, 0, formats.splice(index, 1)[0]);\n\t// \tthis.updateList();\n\t// }\n\n\tdeleteGroup(index: number) {\n\t\tthis.model.sparklines.delete(index);\n\t\tthis.updateList();\n\t}\n\n\taddGroup() {\n\t\tthis.model.sparklines.add(null, null);\n\t\tthis.updateList();\n\t}\n\n\t_onApplyClick = () => {\n\t\tthis.grid.model.refreshSparklines();\n\t\tthis.grid.rendering.render(true);\n\t}\n\n\t_onInputChange(e: Event, groupIndex: number) {\n\t\tconst sparklines = this.model.sparklines;\n\t\tconst group = sparklines.groups.get(groupIndex);\n\t\tconst input = e.target as Input;\n\t\tswitch (input.dataset.id) {\n\t\t\tcase 'locRange': sparklines.update(groupIndex, input.value ? CellRange.fromA1(input.value) : null, group.dataRanges); break;\n\t\t\tcase 'dataRange': \n\t\t\t\tsparklines.update(groupIndex, group.locRange, input.value \n\t\t\t\t\t? CellRange.fromA1s(input.value).map(r => ([r, null as string])) \n\t\t\t\t\t: null);\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t_onOptionsToolbarAction = (e: actions.ActionEvent, groupIndex: number) => {\n\t\tconst a = e.action;\n\t\tconst group = this.model.sparklines.groups.get(groupIndex);\n\t\tif (/^preview/.test(a.type)) return;\n\t\tswitch (a.key) {\n\t\t\tcase 'chartType': group.type = a.value as SparklineType; break;\n\t\t\tcase 'color': group.style.color = (a.value as string).substring(1); break;\n\t\t\tcase 'min': group.minValue = stringToSparklineExtrme(a.value as string); break;\n\t\t\tcase 'max': group.maxValue = stringToSparklineExtrme(a.value as string); break;\n\t\t}\n\t}\n\n\tgetToolbarValues(options: SparklineOptions): Record<string, unknown> {\n\t\treturn {\n\t\t\tchartType: options.type,\n\t\t\tcolor: `#${options.style.color}`,\n\t\t\tmin: options.minValue,\n\t\t\tmax: options.maxValue,\n\t\t};\n\t}\n\n\t_itemRenderer = (_div: HTMLDivElement, index: number) => {\n\t\tconst groupIndex = this.groupIndexMap.get(index);\n\t\tconst group = this.model.sparklines.groups.get(groupIndex);\n\t\treturn html`\n\t\t\t<div class=\"item-content p\">\n\t\t\t\t<div class=\"item-form\">\n\t\t\t\t\t<div class=\"row item-header\">\n\t\t\t\t\t\t<div class=\"item-header-title\">Definition #${index + 1}</div>\n\t\t\t\t\t\t<div class=\"item-header-controls\">\n\t\t\t\t\t\t\t<og-button\n\t\t\t\t\t\t\t\ticon=\"trash\"\n\t\t\t\t\t\t\t\tcolor=\"red\"\n\t\t\t\t\t\t\t\t@click=\"${() => this.deleteGroup(groupIndex)}\">\n\t\t\t\t\t\t\t</og-button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t\n\t\t\t\t\t<div class=\"row\">Location range</div>\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t<og-input\n\t\t\t\t\t\t\tdata-id=\"locRange\"\n\t\t\t\t\t\t\t.value=\"${group.locRange?.A1 || ''}\"\n\t\t\t\t\t\t\tstyle=\"width: 100%\"\n\t\t\t\t\t\t\t@change=\"${(e: Event) => this._onInputChange(e, groupIndex)}\">\n\t\t\t\t\t\t</og-input>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class=\"row\">Data range</div>\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t<og-input\n\t\t\t\t\t\t\tdata-id=\"dataRange\"\n\t\t\t\t\t\t\t.value=\"${(group.dataRanges ? CellRange.toA1s(group.dataRanges.map(item => item[0])) : null) || ''}\"\n\t\t\t\t\t\t\tstyle=\"width: 100%\"\n\t\t\t\t\t\t\t@change=\"${(e: Event) => this._onInputChange(e, groupIndex)}\">\n\t\t\t\t\t\t</og-input>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class=\"row\">Options</div>\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t<og-toolbar \n\t\t\t\t\t\t\t.items=\"${optionToolbarItems}\"\n\t\t\t\t\t\t\t.values=\"${this.getToolbarValues(group)}\"\n\t\t\t\t\t\t\t@toolbar.action=\"${(e: actions.ActionEvent) => this._onOptionsToolbarAction(e, groupIndex)}\">\n\t\t\t\t\t\t</og-toolbar>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\trender = () => this.model ? html`\n\t\t<div class=\"controls p\">\n\t\t\t<og-button text=\"+\" @click=\"${() => this.addGroup()}\"></og-button>\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</div>\n\t\t<div class=\"body\">\n\t\t\t<og-list ?nativeHeight=\"${true}\"\n\t\t\t\titemHeight=\"170\"\n\t\t\t\t.customStyle=${itemStyle}\n\t\t\t\t.itemRenderer=\"${this._itemRenderer}\"\n\t\t\t\t.size=\"${this.model.sparklines.groups.size}\">\n\t\t\t</og-list>\n\t\t</div>\n\t` : '';\n}"]}

package/dist/ui/forms/sparklineForm.style.d.ts

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

package/dist/ui/forms/sparklineForm.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparklineForm.style.d.ts","sourceRoot":"","sources":["../../../src/ui/forms/sparklineForm.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBAgCjB,CAAC;AAEF,eAAO,MAAM,SAAS,yBA0DrB,CAAC"}

package/dist/ui/forms/sparklineForm.style.js

@@ -0,0 +1,94 @@
+import { css } from 'lit';
+export const style = css `
+	* {
+		box-sizing: border-box;
+	}
+
+	:host {
+		font-size: var(--og-font-size);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.controls {
+		flex: 0;
+		display: flex;
+		flex-direction: row;
+		gap: 2px;
+		padding: 2px;
+	}
+
+	.controls > * {
+		flex: 1;
+		text-align: center
+	}
+
+	.body {
+		flex: 1;
+		overflow: hidden;
+	}
+
+	og-list {
+		height: 100%;
+	}
+`;
+export const itemStyle = css `
+	.p {
+		padding: 5px;
+	}
+
+	.row {
+		line-height: 22px;
+		max-height: 22px;
+	}
+
+	og-input {
+		display: block;
+	}
+
+	.item-header {
+		padding-left: 4px;
+		background-color: var(--og-accent-color);
+		color: var(--og-colortype-accent-text-color);
+		display: flex;
+	}
+
+	.item-header-controls {
+		flex: 1;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		align-items: center;
+		padding-right: 2px;
+		gap: 2px;
+	}
+
+	.item-header-controls og-button {
+		min-width: 20px;
+		height: 20px;
+	}
+
+	.item-content {
+		height: 100%;
+		display: flex;
+		flex-direction: row;
+	}
+
+	.item-form {
+		flex: 1;
+	}
+
+	.item-controls {
+		flex: 0;
+		padding: 0 2px;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+	
+	.item-controls og-button {
+		width: 24px;
+		display: block;
+	}
+`;
+//# sourceMappingURL=sparklineForm.style.js.map

package/dist/ui/forms/sparklineForm.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparklineForm.style.js","sourceRoot":"","sources":["../../../src/ui/forms/sparklineForm.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCvB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D3B,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\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.controls {\n\t\tflex: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 2px;\n\t\tpadding: 2px;\n\t}\n\n\t.controls > * {\n\t\tflex: 1;\n\t\ttext-align: center\n\t}\n\n\t.body {\n\t\tflex: 1;\n\t\toverflow: hidden;\n\t}\n\n\tog-list {\n\t\theight: 100%;\n\t}\n`;\n\nexport const itemStyle = css`\n\t.p {\n\t\tpadding: 5px;\n\t}\n\n\t.row {\n\t\tline-height: 22px;\n\t\tmax-height: 22px;\n\t}\n\n\tog-input {\n\t\tdisplay: block;\n\t}\n\n\t.item-header {\n\t\tpadding-left: 4px;\n\t\tbackground-color: var(--og-accent-color);\n\t\tcolor: var(--og-colortype-accent-text-color);\n\t\tdisplay: flex;\n\t}\n\n\t.item-header-controls {\n\t\tflex: 1;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-end;\n\t\talign-items: center;\n\t\tpadding-right: 2px;\n\t\tgap: 2px;\n\t}\n\n\t.item-header-controls og-button {\n\t\tmin-width: 20px;\n\t\theight: 20px;\n\t}\n\n\t.item-content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t}\n\n\t.item-form {\n\t\tflex: 1;\n\t}\n\n\t.item-controls {\n\t\tflex: 0;\n\t\tpadding: 0 2px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 2px;\n\t}\n\t\n\t.item-controls og-button {\n\t\twidth: 24px;\n\t\tdisplay: block;\n\t}\n`;"]}

package/dist/ui/forms/styleForm.d.ts

@@ -0,0 +1,14 @@
+import { actions } from '@omegagrid/core';
+import { Style } from '@omegagrid/grid';
+import { LitElement } from 'lit';
+import { Toolbar } from '@omegagrid/toolbar';
+export declare class StyleForm extends LitElement {
+    static styles: import("lit").CSSResult[];
+    data: Style;
+    toolbar: Toolbar;
+    styleToToolbarValues(s: Style): Record<string, unknown>;
+    connectedCallback(): void;
+    _onAction: (e: actions.ActionEvent) => void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=styleForm.d.ts.map

package/dist/ui/forms/styleForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleForm.d.ts","sourceRoot":"","sources":["../../../src/ui/forms/styleForm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAiB,MAAM,iBAAiB,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAe,MAAM,oBAAoB,CAAC;AAyC1D,qBACa,SAAU,SAAQ,UAAU;IAExC,MAAM,CAAC,MAAM,4BAcV;IAGH,IAAI,EAAE,KAAK,CAAM;IAGjB,OAAO,EAAE,OAAO,CAAC;IAEjB,oBAAoB,CAAC,CAAC,EAAE,KAAK;IAU7B,iBAAiB;IAIjB,SAAS,GAAI,GAAG,OAAO,CAAC,WAAW,UA0BlC;IAED,MAAM,6CAMJ;CAEF"}

package/dist/ui/forms/styleForm.js

@@ -0,0 +1,151 @@
+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 { events, utils } from '@omegagrid/core';
+import { customElement, property, query } from 'lit/decorators.js';
+import { css, html, LitElement } from 'lit';
+import { createBorderIcon } from '../toolbar.config';
+const items = [
+    { type: 'togglebutton', id: 'bold', icon: { icon: 'bold' } },
+    { type: 'togglebutton', id: 'italic', icon: { icon: 'italic' } },
+    { type: 'togglebutton', id: 'underline', icon: { icon: 'underline' } },
+    { type: 'dropdown-button', id: 'alignment', icon: { icon: 'align-center' }, items: [[
+                { type: 'button', id: 'alignTopLeft', icon: { icon: 'align-left' } },
+                { type: 'button', id: 'alignTopCenter', icon: { icon: 'align-center' } },
+                { type: 'button', id: 'alignTopRight', icon: { icon: 'align-right' } },
+            ], [
+                { type: 'button', id: 'alignCenterLeft', icon: { icon: 'align-left' } },
+                { type: 'button', id: 'alignCenterCenter', icon: { icon: 'align-center' } },
+                { type: 'button', id: 'alignCenterRight', icon: { icon: 'align-right' } },
+            ], [
+                { type: 'button', id: 'alignBottomLeft', icon: { icon: 'align-left' } },
+                { type: 'button', id: 'alignBottomCenter', icon: { icon: 'align-center' } },
+                { type: 'button', id: 'alignBottomRight', icon: { icon: 'align-right' } },
+            ]] },
+    { type: 'color', id: 'color', icon: { icon: 'font' } },
+    { type: 'color', id: 'fgColor', icon: { icon: 'fill' } },
+    { type: 'dropdown-button', id: 'border', icon: { icon: 'align-center' }, items: [[
+                { type: 'button', id: 'borderLeft', value: { left: { style: 'thin' } }, content: createBorderIcon('left') },
+                { type: 'button', id: 'borderRight', value: { right: { style: 'thin' } }, content: createBorderIcon('right') },
+                { type: 'button', id: 'borderTop', value: { top: { style: 'thin' } }, content: createBorderIcon('top') },
+                { type: 'button', id: 'borderBottom', value: { bottom: { style: 'thin' } }, content: createBorderIcon('bottom') },
+            ], [
+                { type: 'button', id: 'borderNone', value: { left: null, top: null, right: null, bottom: null }, content: createBorderIcon('none') },
+                { type: 'button', id: 'borderAll', value: { left: { style: 'thin' }, top: { style: 'thin' }, right: { style: 'thin' }, bottom: { style: 'thin' } }, content: createBorderIcon('all') },
+                { type: 'button', id: 'borderOutside', value: { left: { style: 'thin' }, top: { style: 'thin' }, right: { style: 'thin' }, bottom: { style: 'thin' } }, content: createBorderIcon('outside') },
+                { type: 'button', id: 'borderOutsideThick', value: { left: { style: 'thick' }, top: { style: 'thick' }, right: { style: 'thick' }, bottom: { style: 'thick' } }, content: createBorderIcon('outside-thick') },
+            ], [
+                { type: 'button', id: 'borderBottomDouble', value: { bottom: { style: 'double' } }, content: createBorderIcon('bottom-double') },
+                { type: 'button', id: 'borderBottomThick', value: { bottom: { style: 'thick' } }, content: createBorderIcon('bottom-thick') },
+                { type: 'button', id: 'borderTopBottom', value: { top: { style: 'thin' }, bottom: { style: 'thin' } }, content: createBorderIcon('top-bottom') },
+                { type: 'button', id: 'borderTopBottomThick', value: { top: { style: 'thin' }, bottom: { style: 'thick' } }, content: createBorderIcon('top-bottom-thick') },
+            ], [{ type: 'color', id: 'borderColor', colspan: 4, icon: { icon: 'fill' } }]] },
+];
+let StyleForm = class StyleForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.data = {};
+        this._onAction = (e) => {
+            const a = e.action;
+            if (/^preview/.test(a.type))
+                return;
+            const data = utils.cloneDeep(this.data);
+            delete data.id;
+            delete data.hash;
+            switch (a.key) {
+                case 'bold':
+                    data.bold = a.value ? true : false;
+                    break;
+                case 'italic':
+                    data.italic = a.value ? true : false;
+                    break;
+                case 'underline':
+                    data.underline = a.value ? true : false;
+                    break;
+                case 'color':
+                    data.color = a.value.substring(1);
+                    break;
+                case 'fgColor':
+                    data.fgColor = a.value.substring(1);
+                    break;
+                case 'alignCenterCenter':
+                    data.alignment = { vertical: 'center', horizontal: 'center' };
+                    break;
+                case 'alignTopLeft':
+                    data.alignment = { vertical: 'top', horizontal: 'left' };
+                    break;
+                case 'alignTopCenter':
+                    data.alignment = { vertical: 'top', horizontal: 'center' };
+                    break;
+                case 'alignTopRight':
+                    data.alignment = { vertical: 'top', horizontal: 'right' };
+                    break;
+                case 'alignCenterLeft':
+                    data.alignment = { vertical: 'center', horizontal: 'left' };
+                    break;
+                case 'alignCenterRight':
+                    data.alignment = { vertical: 'center', horizontal: 'right' };
+                    break;
+                case 'alignBottomLeft':
+                    data.alignment = { vertical: 'bottom', horizontal: 'left' };
+                    break;
+                case 'alignBottomCenter':
+                    data.alignment = { vertical: 'bottom', horizontal: 'center' };
+                    break;
+                case 'alignBottomRight':
+                    data.alignment = { vertical: 'bottom', horizontal: 'right' };
+                    break;
+            }
+            this.data = data;
+            this.dispatchEvent(new events.ChangeEvent({ value: data }));
+        };
+        this.render = () => html `
+		<og-toolbar 
+			.items="${items}"
+			.values="${this.styleToToolbarValues(this.data)}"
+			@toolbar.action="${this._onAction}">
+		</og-toolbar>
+	`;
+    }
+    styleToToolbarValues(s) {
+        const values = {};
+        values.bold = s.bold;
+        values.italic = s.italic;
+        values.underline = s.underline;
+        values.color = `#${s.color}`;
+        values.fgColor = `#${s.fgColor || s.bgColor}`;
+        return values;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+};
+StyleForm.styles = [css `
+		.row {
+			height: 30px;
+			line-height: 30px;
+			display: flex;
+			flex-direction: row;
+			gap: 3px;
+		}
+
+		.row > og-button {
+			min-width: 24px;
+			height: 24px;
+			padding: 0;
+		}
+	`];
+__decorate([
+    property({ type: Object })
+], StyleForm.prototype, "data", void 0);
+__decorate([
+    query('og-toolbar')
+], StyleForm.prototype, "toolbar", void 0);
+StyleForm = __decorate([
+    customElement('og-editor-form-style')
+], StyleForm);
+export { StyleForm };
+//# sourceMappingURL=styleForm.js.map

package/dist/ui/forms/styleForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleForm.js","sourceRoot":"","sources":["../../../src/ui/forms/styleForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { actions, events, utils } from '@omegagrid/core';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { Style } from '@omegagrid/grid';\nimport { css, html, LitElement } from 'lit';\nimport { Toolbar, ToolbarItem } from '@omegagrid/toolbar';\nimport { createBorderIcon } from '../toolbar.config';\n\nconst items: ToolbarItem[] = [\n\t{type: 'togglebutton', id: 'bold', icon: {icon: 'bold'}},\n\t{type: 'togglebutton', id: 'italic', icon: {icon: 'italic'}},\n\t{type: 'togglebutton', id: 'underline', icon: {icon: 'underline'}},\n\t{type: 'dropdown-button', id: 'alignment', icon: {icon: 'align-center'}, items: [[\n\t\t{type: 'button', id: 'alignTopLeft', icon: {icon: 'align-left'}},\n\t\t{type: 'button', id: 'alignTopCenter', icon: {icon: 'align-center'}},\n\t\t{type: 'button', id: 'alignTopRight', icon: {icon: 'align-right'}},\n\t], [\n\t\t{type: 'button', id: 'alignCenterLeft', icon: {icon: 'align-left'}},\n\t\t{type: 'button', id: 'alignCenterCenter', icon: {icon: 'align-center'}},\n\t\t{type: 'button', id: 'alignCenterRight', icon: {icon: 'align-right'}},\n\t], [\n\t\t{type: 'button', id: 'alignBottomLeft', icon: {icon: 'align-left'}},\n\t\t{type: 'button', id: 'alignBottomCenter', icon: {icon: 'align-center'}},\n\t\t{type: 'button', id: 'alignBottomRight', icon: {icon: 'align-right'}},\n\t]]},\n\t{type: 'color', id: 'color', icon: {icon: 'font'}},\n\t{type: 'color', id: 'fgColor', icon: {icon: 'fill'}},\n\t{type: 'dropdown-button', id: 'border', icon: {icon: 'align-center'}, items: [[\n\t\t{type: 'button', id: 'borderLeft', value: {left: {style: 'thin'}}, content: createBorderIcon('left')},\n\t\t{type: 'button', id: 'borderRight', value: {right: {style: 'thin'}}, content: createBorderIcon('right')},\n\t\t{type: 'button', id: 'borderTop', value: {top: {style: 'thin'}}, content: createBorderIcon('top')},\n\t\t{type: 'button', id: 'borderBottom', value: {bottom: {style: 'thin'}}, content: createBorderIcon('bottom')},\n\t], [\n\t\t{type: 'button', id: 'borderNone', value: {left: null, top: null, right: null, bottom: null}, content: createBorderIcon('none')},\n\t\t{type: 'button', id: 'borderAll', value: {left: {style: 'thin'}, top: {style: 'thin'}, right: {style: 'thin'}, bottom: {style: 'thin'}}, content: createBorderIcon('all')},\n\t\t{type: 'button', id: 'borderOutside', value: {left: {style: 'thin'}, top: {style: 'thin'}, right: {style: 'thin'}, bottom: {style: 'thin'}}, content: createBorderIcon('outside')},\n\t\t{type: 'button', id: 'borderOutsideThick', value: {left: {style: 'thick'}, top: {style: 'thick'}, right: {style: 'thick'}, bottom: {style: 'thick'}}, content: createBorderIcon('outside-thick')},\n\t], [\n\t\t{type: 'button', id: 'borderBottomDouble', value: {bottom: {style: 'double'}}, content: createBorderIcon('bottom-double')},\n\t\t{type: 'button', id: 'borderBottomThick', value: {bottom: {style: 'thick'}}, content: createBorderIcon('bottom-thick')},\n\t\t{type: 'button', id: 'borderTopBottom', value: {top: {style: 'thin'}, bottom: {style: 'thin'}}, content: createBorderIcon('top-bottom')},\n\t\t{type: 'button', id: 'borderTopBottomThick', value: {top: {style: 'thin'}, bottom: {style: 'thick'}}, content: createBorderIcon('top-bottom-thick')},\n\t], [{type: 'color', id: 'borderColor', colspan: 4, icon: {icon: 'fill'}}]]},\n\t\n];\n\n@customElement('og-editor-form-style')\nexport class StyleForm extends LitElement {\n\n\tstatic styles = [css`\n\t\t.row {\n\t\t\theight: 30px;\n\t\t\tline-height: 30px;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tgap: 3px;\n\t\t}\n\n\t\t.row > og-button {\n\t\t\tmin-width: 24px;\n\t\t\theight: 24px;\n\t\t\tpadding: 0;\n\t\t}\n\t`];\n\n\t@property({type: Object})\n\tdata: Style = {};\n\n\t@query('og-toolbar')\n\ttoolbar: Toolbar;\n\n\tstyleToToolbarValues(s: Style) {\n\t\tconst values: Record<string, unknown> = {};\n\t\tvalues.bold = s.bold;\n\t\tvalues.italic = s.italic;\n\t\tvalues.underline = s.underline;\n\t\tvalues.color = `#${s.color}`;\n\t\tvalues.fgColor = `#${s.fgColor || s.bgColor}`;\n\t\treturn values;\n\t}\n\t\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t}\n\n\t_onAction = (e: actions.ActionEvent) => {\n\t\tconst a = e.action;\n\t\tif (/^preview/.test(a.type)) return;\n\n\t\tconst data: Style = utils.cloneDeep(this.data);\n\t\tdelete data.id;\n\t\tdelete data.hash;\n\t\tswitch (a.key) {\n\t\t\tcase 'bold': data.bold = a.value ? true : false; break;\n\t\t\tcase 'italic': data.italic = a.value ? true : false; break;\n\t\t\tcase 'underline': data.underline = a.value ? true : false; break;\n\t\t\tcase 'color': data.color = (a.value as string).substring(1); break;\n\t\t\tcase 'fgColor': data.fgColor = (a.value as string).substring(1); break;\n\t\t\tcase 'alignCenterCenter': data.alignment = {vertical: 'center', horizontal: 'center'}; break;\n\t\t\tcase 'alignTopLeft': data.alignment = {vertical: 'top', horizontal: 'left'}; break;\n\t\t\tcase 'alignTopCenter': data.alignment = {vertical: 'top', horizontal: 'center'}; break;\n\t\t\tcase 'alignTopRight': data.alignment = {vertical: 'top', horizontal: 'right'}; break;\n\t\t\tcase 'alignCenterLeft': data.alignment = {vertical: 'center', horizontal: 'left'}; break;\n\t\t\tcase 'alignCenterRight': data.alignment = {vertical: 'center', horizontal: 'right'}; break;\n\t\t\tcase 'alignBottomLeft': data.alignment = {vertical: 'bottom', horizontal: 'left'}; break;\n\t\t\tcase 'alignBottomCenter': data.alignment = {vertical: 'bottom', horizontal: 'center'}; break;\n\t\t\tcase 'alignBottomRight': data.alignment = {vertical: 'bottom', horizontal: 'right'}; break;\n\t\t}\n\n\t\tthis.data = data;\n\t\tthis.dispatchEvent(new events.ChangeEvent({value: data}));\n\t}\n\n\trender = () => html`\n\t\t<og-toolbar \n\t\t\t.items=\"${items}\"\n\t\t\t.values=\"${this.styleToToolbarValues(this.data)}\"\n\t\t\t@toolbar.action=\"${this._onAction}\">\n\t\t</og-toolbar>\n\t`;\n\n}"]}

package/dist/ui/formulabar.d.ts

@@ -0,0 +1,23 @@
+import { ElementModel, Grid, FormulaInput, FormulaInputEvent, SelectorEvent, GridEvent } from '@omegagrid/grid';
+import { LitElement } from 'lit';
+export declare class EditorFormula extends LitElement {
+    static styles: import("lit").CSSResult[];
+    grid: Grid;
+    gridElement: ElementModel;
+    addressInput: HTMLInputElement;
+    formulaInput: FormulaInput;
+    private isInputActive;
+    get gridElementValue(): string;
+    _onGridSelectorUpdate: (e: SelectorEvent) => void;
+    _onGridSelect: (e: GridEvent) => void;
+    willUpdate(props: Map<PropertyKey, unknown>): void;
+    _onInputPreview: (e: FormulaInputEvent) => void;
+    commit(): void;
+    _onInputCommit: () => void;
+    _onInputDiscard: () => void;
+    _onAddressFocus: () => void;
+    _onInputFocus: () => void;
+    _onInput: () => void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=formulabar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"formulabar.d.ts","sourceRoot":"","sources":["../../src/ui/formulabar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACtI,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,qBACa,aAAc,SAAQ,UAAU;IAE5C,MAAM,CAAC,MAAM,4BAAW;IAExB,IAAI,EAAE,IAAI,CAAC;IAGX,WAAW,EAAE,YAAY,CAAC;IAG1B,YAAY,EAAE,gBAAgB,CAAC;IAG/B,YAAY,EAAE,YAAY,CAAC;IAE3B,OAAO,CAAC,aAAa,CAAS;IAE9B,IAAI,gBAAgB,WAAyD;IAE7E,qBAAqB,GAAI,GAAG,aAAa,UAMxC;IAED,aAAa,GAAI,GAAG,SAAS,UAiB5B;IAED,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAY3C,eAAe,GAAI,GAAG,iBAAiB,UAGtC;IAED,MAAM;IAsBN,cAAc,aAEb;IAED,eAAe,aAMd;IAED,eAAe,aAKd;IAED,aAAa,aAGZ;IAED,QAAQ,aAEP;IAED,MAAM,6CAqBJ;CAEF"}