@omegagrid/editor 0.10.2 → 0.10.4

package/dist/ui/forms/configForm.js

@@ -0,0 +1,101 @@
+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 { SelectMode } from '@omegagrid/tree';
+import { customElement, property } from 'lit/decorators.js';
+import { FormContainer, FormControlType } from "@omegagrid/form";
+import { utils } from '@omegagrid/grid';
+const visibilityControlItem = {
+    type: FormControlType.List, value: [], content: {
+        sourceData: [{ k: true, v: 'Visible', icon: 'eye' }, { k: false, v: 'Hidden', icon: 'eye-slash' }],
+        options: { allowEmpty: false, checkboxes: false, selectMode: SelectMode.Single, autoClose: true }
+    }
+};
+const formContainerSettings = [{
+        caption: 'Sheet Settings',
+        controls: [
+            { row: 0, col: 0, type: FormControlType.Label, value: 'Name' },
+            { row: 0, col: 1, type: FormControlType.TextInput, key: 'name', pattern: utils.SHEET_NAME_REGEX },
+            { row: 1, col: 0, type: FormControlType.Label, value: 'Sheet' },
+            Object.assign({ row: 1, col: 1, key: 'visible' }, visibilityControlItem),
+            { row: 2, col: 0, type: FormControlType.Label, value: 'Color' },
+            { row: 2, col: 1, type: FormControlType.ColorInput, key: 'color' },
+            { row: 3, col: 0, type: FormControlType.Label, value: 'Grid' },
+            Object.assign({ row: 3, col: 1, key: 'grid' }, visibilityControlItem),
+            { row: 4, col: 0, type: FormControlType.Label, value: 'Row numbers' },
+            Object.assign({ row: 4, col: 1, key: 'rowNumbers' }, visibilityControlItem),
+            { row: 5, col: 0, type: FormControlType.Label, value: 'Column letters' },
+            Object.assign({ row: 5, col: 1, key: 'colLetters' }, visibilityControlItem),
+        ], columns: [{ width: 120 }, { width: null }]
+    }, {
+        caption: 'Workbook Settings',
+        controls: [
+            { row: 0, col: 0, type: FormControlType.Label, value: 'Hidden Sheets' },
+            Object.assign({ row: 0, col: 1, key: 'hiddenSheetsVisible' }, visibilityControlItem),
+        ], columns: [{ width: 120 }, { width: null }]
+    }];
+let ConfigForm = class ConfigForm extends FormContainer {
+    connectedCallback() {
+        super.connectedCallback();
+        this.setSourceData(formContainerSettings);
+    }
+    firstUpdated() {
+        this.addEventListener('form.change', (e) => {
+            if (!e.valid)
+                return;
+            const values = this.forms[0].values;
+            const globalValues = this.forms[1].values;
+            const model = this.model;
+            model.options.grid = values['grid'];
+            model.options.rowNumbers = values['rowNumbers'];
+            model.options.colLetters = values['colLetters'];
+            if (model.name != values['name']) {
+                try {
+                    this.group.renameSheet(model.name, values['name']);
+                }
+                catch (error) {
+                    setTimeout(() => this.forms[0].setValue('name', model.name), 100);
+                }
+            }
+            model.tab = model.tab || {};
+            model.tab.color = values['color'];
+            model.tab.hidden = !values['visible'];
+            this.group.options.showHiddenTabs = !!globalValues['hiddenSheetsVisible'];
+            this.group.updateTabs();
+            this.grid?.table.refresh();
+        });
+    }
+    async updated() {
+        await this.forms[0].updateComplete;
+        await this.forms[1].updateComplete;
+        this.forms[0].values = this.model ? {
+            name: this.model.name,
+            color: this.model.tab?.color,
+            visible: !this.model.tab?.hidden,
+            grid: this.model.options.grid,
+            rowNumbers: this.model.options.rowNumbers,
+            colLetters: this.model.options.colLetters
+        } : {};
+        this.forms[1].values = this.model ? {
+            hiddenSheetsVisible: !!this.group.options.showHiddenTabs
+        } : {};
+    }
+};
+ConfigForm.styles = [...FormContainer.styles];
+__decorate([
+    property({ type: Object })
+], ConfigForm.prototype, "model", void 0);
+__decorate([
+    property({ type: Object })
+], ConfigForm.prototype, "grid", void 0);
+__decorate([
+    property({ type: Object })
+], ConfigForm.prototype, "group", void 0);
+ConfigForm = __decorate([
+    customElement('og-editor-form-config')
+], ConfigForm);
+export { ConfigForm };
+//# sourceMappingURL=configForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"configForm.js","sourceRoot":"","sources":["../../../src/ui/forms/configForm.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAyB,eAAe,EAAa,MAAM,iBAAiB,CAAC;AACnG,OAAO,EAA8B,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,qBAAqB,GAAmC;IAC7D,IAAI,EAAE,eAAe,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE;QAChD,UAAU,EAAE,CAAC,EAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAC,EAAE,EAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAC,CAAC;QAC9F,OAAO,EAAE,EAAC,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAC;KAC/F;CAAC,CAAC;AAEH,MAAM,qBAAqB,GAAG,CAAC;QAC9B,OAAO,EAAE,gBAAgB;QACzB,QAAQ,EAAE;YACT,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAC;YAC5D,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,eAAe,CAAC,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,gBAAgB,EAAC;YAC/F,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC;YAC7D,MAAM,CAAC,MAAM,CAAC,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,SAAS,EAAC,EAAE,qBAAqB,CAAC;YACtE,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC;YAC7D,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,eAAe,CAAC,UAAU,EAAE,GAAG,EAAE,OAAO,EAAC;YAChE,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAC;YAC5D,MAAM,CAAC,MAAM,CAAC,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAC,EAAE,qBAAqB,CAAC;YACnE,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAC;YACnE,MAAM,CAAC,MAAM,CAAC,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,YAAY,EAAC,EAAE,qBAAqB,CAAC;YACzE,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAC;YACtE,MAAM,CAAC,MAAM,CAAC,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,YAAY,EAAC,EAAE,qBAAqB,CAAC;SACzE,EAAE,OAAO,EAAE,CAAC,EAAC,KAAK,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAE,IAAI,EAAC,CAAC;KACzC,EAAE;QACF,OAAO,EAAE,mBAAmB;QAC5B,QAAQ,EAAE;YACT,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,eAAe,EAAC;YACrE,MAAM,CAAC,MAAM,CAAC,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,qBAAqB,EAAC,EAAE,qBAAqB,CAAC;SAClF,EAAE,OAAO,EAAE,CAAC,EAAC,KAAK,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAE,IAAI,EAAC,CAAC;KACzC,CAAC,CAAC;AAGI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,aAAa;IAa5C,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC;IAED,YAAY;QACX,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,CAAC,CAAY,EAAE,EAAE;YACrD,IAAI,CAAC,CAAC,CAAC,KAAK;gBAAE,OAAO;YAErB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;YACpC,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;YAE1C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YAEzB,KAAK,CAAC,OAAO,CAAC,IAAI,GAAG,MAAM,CAAC,MAAM,CAAY,CAAC;YAC/C,KAAK,CAAC,OAAO,CAAC,UAAU,GAAG,MAAM,CAAC,YAAY,CAAY,CAAC;YAC3D,KAAK,CAAC,OAAO,CAAC,UAAU,GAAG,MAAM,CAAC,YAAY,CAAY,CAAC;YAE3D,IAAI,KAAK,CAAC,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;gBAClC,IAAI,CAAC;oBACJ,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,CAAW,CAAC,CAAC;gBAC9D,CAAC;gBAAC,OAAO,KAAK,EAAE,CAAC;oBAChB,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;gBACnE,CAAC;YACF,CAAC;YAED,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC;YAC5B,KAAK,CAAC,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,OAAO,CAAW,CAAC;YAC5C,KAAK,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;YAEtC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,GAAG,CAAC,CAAC,YAAY,CAAC,qBAAqB,CAAC,CAAC;YAE1E,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;QAC5B,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,OAAO;QACZ,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;QACnC,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;QAEnC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;YACnC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK;YAC5B,OAAO,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM;YAChC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;YAC7B,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU;YACzC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU;SACzC,CAAC,CAAC,CAAC,EAAE,CAAC;QAEP,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;YACnC,mBAAmB,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;SACxD,CAAC,CAAC,CAAC,EAAE,CAAC;IAER,CAAC;;AAjEM,iBAAM,GAAG,CAAC,GAAG,aAAa,CAAC,MAAM,CAAC,AAA5B,CAA6B;AAG1C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yCACR;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;wCACd;AAGX;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yCACR;AAXL,UAAU;IADtB,aAAa,CAAC,uBAAuB,CAAC;GAC1B,UAAU,CAqEtB","sourcesContent":["import { SelectMode } from '@omegagrid/tree';\nimport { customElement, property } from 'lit/decorators.js';\nimport { FormContainer, FormControlProperties, FormControlType, FormEvent } from \"@omegagrid/form\";\nimport { Grid, GridGroup, GridModel, utils } from '@omegagrid/grid';\n\nconst visibilityControlItem: Partial<FormControlProperties> = {\n\ttype: FormControlType.List, value: [], content: {\n\tsourceData: [{k: true, v: 'Visible', icon: 'eye'}, {k: false, v: 'Hidden', icon: 'eye-slash'}],\n\toptions: {allowEmpty: false, checkboxes: false, selectMode: SelectMode.Single, autoClose: true}\n}};\t\n\nconst formContainerSettings = [{\n\tcaption: 'Sheet Settings',\n\tcontrols: [\n\t\t{row: 0, col: 0, type: FormControlType.Label, value: 'Name'},\n\t\t{row: 0, col: 1, type: FormControlType.TextInput, key: 'name', pattern: utils.SHEET_NAME_REGEX},\n\t\t{row: 1, col: 0, type: FormControlType.Label, value: 'Sheet'},\n\t\tObject.assign({row: 1, col: 1, key: 'visible'}, visibilityControlItem),\n\t\t{row: 2, col: 0, type: FormControlType.Label, value: 'Color'},\n\t\t{row: 2, col: 1, type: FormControlType.ColorInput, key: 'color'},\n\t\t{row: 3, col: 0, type: FormControlType.Label, value: 'Grid'},\n\t\tObject.assign({row: 3, col: 1, key: 'grid'}, visibilityControlItem),\n\t\t{row: 4, col: 0, type: FormControlType.Label, value: 'Row numbers'},\n\t\tObject.assign({row: 4, col: 1, key: 'rowNumbers'}, visibilityControlItem),\n\t\t{row: 5, col: 0, type: FormControlType.Label, value: 'Column letters'},\n\t\tObject.assign({row: 5, col: 1, key: 'colLetters'}, visibilityControlItem),\n\t], columns: [{width: 120}, {width: null}]\n}, {\n\tcaption: 'Workbook Settings',\n\tcontrols: [\n\t\t{row: 0, col: 0, type: FormControlType.Label, value: 'Hidden Sheets'},\n\t\tObject.assign({row: 0, col: 1, key: 'hiddenSheetsVisible'}, visibilityControlItem),\n\t], columns: [{width: 120}, {width: null}]\n}];\n\n@customElement('og-editor-form-config')\nexport class ConfigForm extends FormContainer {\n\n\tstatic styles = [...FormContainer.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\t\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.setSourceData(formContainerSettings);\n\t}\n\n\tfirstUpdated() {\n\t\tthis.addEventListener('form.change', (e: FormEvent) => {\n\t\t\tif (!e.valid) return;\n\n\t\t\tconst values = this.forms[0].values;\n\t\t\tconst globalValues = this.forms[1].values;\n\n\t\t\tconst model = this.model;\n\n\t\t\tmodel.options.grid = values['grid'] as boolean;\n\t\t\tmodel.options.rowNumbers = values['rowNumbers'] as boolean;\n\t\t\tmodel.options.colLetters = values['colLetters'] as boolean;\n\n\t\t\tif (model.name != values['name']) {\n\t\t\t\ttry {\n\t\t\t\t\tthis.group.renameSheet(model.name, values['name'] as string);\n\t\t\t\t} catch (error) {\n\t\t\t\t\tsetTimeout(() => this.forms[0].setValue('name', model.name), 100);\n\t\t\t\t}\n\t\t\t}\n\t\t\t\n\t\t\tmodel.tab = model.tab || {};\n\t\t\tmodel.tab.color = values['color'] as string;\n\t\t\tmodel.tab.hidden = !values['visible'];\n\t\t\t\n\t\t\tthis.group.options.showHiddenTabs = !!globalValues['hiddenSheetsVisible'];\n\n\t\t\tthis.group.updateTabs();\n\t\t\tthis.grid?.table.refresh();\n\t\t});\n\t}\n\n\tasync updated() {\n\t\tawait this.forms[0].updateComplete;\n\t\tawait this.forms[1].updateComplete;\n\t\t\n\t\tthis.forms[0].values = this.model ? {\n\t\t\tname: this.model.name,\n\t\t\tcolor: this.model.tab?.color,\n\t\t\tvisible: !this.model.tab?.hidden,\n\t\t\tgrid: this.model.options.grid,\n\t\t\trowNumbers: this.model.options.rowNumbers,\n\t\t\tcolLetters: this.model.options.colLetters\n\t\t} : {};\n\n\t\tthis.forms[1].values = this.model ? {\n\t\t\thiddenSheetsVisible: !!this.group.options.showHiddenTabs\n\t\t} : {};\n\n\t}\n\n}"]}

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

@@ -0,0 +1,18 @@
+import { FormContainer, FormSettings } from "@omegagrid/form";
+import { CellRange, Grid } from '@omegagrid/grid';
+import { LitElement } from 'lit';
+export declare class HeaderForm extends LitElement {
+    grid: Grid;
+    range: CellRange;
+    formContainer: FormContainer;
+    headerCount: number;
+    formConfig: FormSettings[];
+    connectedCallback(): void;
+    getGridColumn(): import("@omegagrid/grid").ColumnModel;
+    getFormContainerConfig(): FormSettings[];
+    constructor();
+    willUpdate(props: Map<PropertyKey, unknown>): void;
+    updated(props: Map<PropertyKey, unknown>): void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=headerForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"headerForm.d.ts","sourceRoot":"","sources":["../../../src/ui/forms/headerForm.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,YAAY,EAA8B,MAAM,iBAAiB,CAAC;AAC1F,OAAO,EAAE,SAAS,EAAqB,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,qBACa,UAAW,SAAQ,UAAU;IAGzC,IAAI,EAAE,IAAI,CAAC;IAGX,KAAK,EAAE,SAAS,CAAC;IAGjB,aAAa,EAAE,aAAa,CAAC;IAG7B,WAAW,EAAE,MAAM,CAAC;IAEpB,UAAU,EAAE,YAAY,EAAE,CAAC;IAE3B,iBAAiB;IAIjB,aAAa;IAIb,sBAAsB,IA4EI,YAAY,EAAE;;IA6BxC,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAM3C,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAMxC,MAAM,6CAEJ;CAEF"}

package/dist/ui/forms/headerForm.js

@@ -0,0 +1,144 @@
+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, state } from 'lit/decorators.js';
+import { FormControlType } from "@omegagrid/form";
+import { html, LitElement } from 'lit';
+let HeaderForm = class HeaderForm extends LitElement {
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    getGridColumn() {
+        return this.grid.model.columns[this.range.c1];
+    }
+    getFormContainerConfig() {
+        const formSettings = {
+            caption: 'Headers',
+            controls: [],
+            columns: [{ width: null }, { width: 60 }, { width: 60 }, { width: 20 }]
+        };
+        if (this.range) {
+            if (this.headerCount > 0) {
+                formSettings.controls.push({
+                    row: 0,
+                    col: 0,
+                    type: FormControlType.Label,
+                    value: 'Label'
+                });
+                formSettings.controls.push({
+                    row: 0,
+                    col: 1,
+                    type: FormControlType.Label,
+                    value: 'Colspan'
+                });
+                formSettings.controls.push({
+                    row: 0,
+                    col: 2,
+                    type: FormControlType.Label,
+                    value: 'Rowspan'
+                });
+            }
+            const column = this.getGridColumn();
+            for (let h = 0; h < this.headerCount; h++) {
+                const r = h + 1;
+                formSettings.controls.push({
+                    row: r,
+                    col: 0,
+                    type: FormControlType.TextInput,
+                    key: `label-${h}`,
+                    value: column.header[h]?.label
+                });
+                formSettings.controls.push({
+                    row: r,
+                    col: 1,
+                    type: FormControlType.NumericInput,
+                    key: `colspan-${h}`,
+                    value: column.header[h]?.cs || 1
+                });
+                formSettings.controls.push({
+                    row: r,
+                    col: 2,
+                    type: FormControlType.NumericInput,
+                    key: `rowspan-${h}`,
+                    value: column.header[h]?.rs || 1
+                });
+                formSettings.controls.push({
+                    row: r,
+                    col: 3,
+                    type: FormControlType.Button,
+                    key: `remove-${h}`,
+                    options: { color: 'red', icon: 'trash' }
+                });
+            }
+            formSettings.controls.push({
+                row: this.headerCount + 1,
+                col: 0,
+                type: FormControlType.Button,
+                key: 'add',
+                value: '+',
+                cs: 3
+            });
+        }
+        return [formSettings];
+    }
+    constructor() {
+        super();
+        this.render = () => html `
+		<og-form-container></og-form-container>
+	`;
+        this.addEventListener('form.change', (e) => {
+            if (e.key == 'add')
+                ++this.headerCount;
+            else if (e.key.startsWith('remove-')) {
+                const h = parseInt(e.key.substring(7));
+                this.grid.model.removeHeader(h);
+                this.grid.rendering.updateHeaders();
+                --this.headerCount;
+            }
+            else {
+                const values = this.formContainer.forms[0].values;
+                const column = this.getGridColumn();
+                const headers = [];
+                for (let h = 0; h < this.headerCount; h++) {
+                    headers.push(Object.assign(column.header[h] || {}, {
+                        label: values[`label-${h}`],
+                        cs: values[`colspan-${h}`],
+                        rs: values[`rowspan-${h}`]
+                    }));
+                }
+                column.header = headers;
+                this.grid.rendering.updateHeaders();
+            }
+        });
+    }
+    willUpdate(props) {
+        if (props.has('range') && !props.has('headerCount')) {
+            this.headerCount = this.grid ? this.grid.model.headerCount : 0;
+        }
+    }
+    updated(props) {
+        if (props.has('range') || props.has('headerCount')) {
+            this.formContainer.setSourceData(this.getFormContainerConfig());
+        }
+    }
+};
+__decorate([
+    property({ type: Object })
+], HeaderForm.prototype, "grid", void 0);
+__decorate([
+    property({ type: Object })
+], HeaderForm.prototype, "range", void 0);
+__decorate([
+    query('og-form-container')
+], HeaderForm.prototype, "formContainer", void 0);
+__decorate([
+    state()
+], HeaderForm.prototype, "headerCount", void 0);
+HeaderForm = __decorate([
+    customElement('og-editor-form-headers')
+], HeaderForm);
+export { HeaderForm };
+//# sourceMappingURL=headerForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"headerForm.js","sourceRoot":"","sources":["../../../src/ui/forms/headerForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement, property, query, state } from 'lit/decorators.js';\nimport { FormContainer, FormSettings, FormControlType, FormEvent } from \"@omegagrid/form\";\nimport { CellRange, ColumnHeaderModel, Grid } from '@omegagrid/grid';\nimport { html, LitElement } from 'lit';\n\n@customElement('og-editor-form-headers')\nexport class HeaderForm extends LitElement {\n\n\t@property({type: Object})\n\tgrid: Grid;\n\n\t@property({type: Object})\n\trange: CellRange;\n\n\t@query('og-form-container')\n\tformContainer: FormContainer;\n\n\t@state()\n\theaderCount: number;\n\n\tformConfig: FormSettings[];\n\t\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t}\n\n\tgetGridColumn() {\n\t\treturn this.grid.model.columns[this.range.c1];\n\t}\n\n\tgetFormContainerConfig() {\n\t\tconst formSettings: FormSettings = {\n\t\t\tcaption: 'Headers',\n\t\t\tcontrols: [],\n\t\t\tcolumns: [{width: null}, {width: 60}, {width: 60}, {width: 20}]\n\t\t};\n\t\t\n\t\tif (this.range) {\n\t\t\tif (this.headerCount > 0) {\n\t\t\t\tformSettings.controls.push({\n\t\t\t\t\trow: 0,\n\t\t\t\t\tcol: 0,\n\t\t\t\t\ttype: FormControlType.Label,\n\t\t\t\t\tvalue: 'Label'\n\t\t\t\t});\n\t\n\t\t\t\tformSettings.controls.push({\n\t\t\t\t\trow: 0,\n\t\t\t\t\tcol: 1,\n\t\t\t\t\ttype: FormControlType.Label,\n\t\t\t\t\tvalue: 'Colspan'\n\t\t\t\t});\n\t\n\t\t\t\tformSettings.controls.push({\n\t\t\t\t\trow: 0,\n\t\t\t\t\tcol: 2,\n\t\t\t\t\ttype: FormControlType.Label,\n\t\t\t\t\tvalue: 'Rowspan'\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tconst column = this.getGridColumn();\n\t\t\tfor (let h = 0; h < this.headerCount; h++) {\n\t\t\t\tconst r = h + 1;\n\t\t\t\tformSettings.controls.push({\n\t\t\t\t\trow: r,\n\t\t\t\t\tcol: 0,\n\t\t\t\t\ttype: FormControlType.TextInput,\n\t\t\t\t\tkey: `label-${h}`,\n\t\t\t\t\tvalue: column.header[h]?.label\n\t\t\t\t});\n\n\t\t\t\tformSettings.controls.push({\n\t\t\t\t\trow: r,\n\t\t\t\t\tcol: 1,\n\t\t\t\t\ttype: FormControlType.NumericInput,\n\t\t\t\t\tkey: `colspan-${h}`,\n\t\t\t\t\tvalue: column.header[h]?.cs || 1\n\t\t\t\t});\n\n\t\t\t\tformSettings.controls.push({\n\t\t\t\t\trow: r,\n\t\t\t\t\tcol: 2,\n\t\t\t\t\ttype: FormControlType.NumericInput,\n\t\t\t\t\tkey: `rowspan-${h}`,\n\t\t\t\t\tvalue: column.header[h]?.rs || 1\n\t\t\t\t});\n\n\t\t\t\tformSettings.controls.push({\n\t\t\t\t\trow: r,\n\t\t\t\t\tcol: 3,\n\t\t\t\t\ttype: FormControlType.Button,\n\t\t\t\t\tkey: `remove-${h}`,\n\t\t\t\t\toptions: {color: 'red', icon: 'trash'}\n\t\t\t\t});\n\t\t\t}\n\t\t\tformSettings.controls.push({\n\t\t\t\trow: this.headerCount + 1,\n\t\t\t\tcol: 0,\n\t\t\t\ttype: FormControlType.Button,\n\t\t\t\tkey: 'add',\n\t\t\t\tvalue: '+',\n\t\t\t\tcs: 3\n\t\t\t});\n\t\t}\n\n\t\treturn [formSettings] as FormSettings[];\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('form.change', (e: FormEvent) => {\n\t\t\tif (e.key == 'add') ++this.headerCount;\n\t\t\telse if (e.key.startsWith('remove-')) {\n\t\t\t\tconst h = parseInt(e.key.substring(7));\n\t\t\t\tthis.grid.model.removeHeader(h);\n\t\t\t\tthis.grid.rendering.updateHeaders();\n\t\t\t\t--this.headerCount;\n\t\t\t} else {\n\t\t\t\tconst values = this.formContainer.forms[0].values;\n\t\t\t\tconst column = this.getGridColumn();\n\t\t\t\tconst headers: ColumnHeaderModel[] = [];\n\t\t\t\tfor (let h = 0; h < this.headerCount; h++) {\n\t\t\t\t\theaders.push(Object.assign(column.header[h] || {}, {\n\t\t\t\t\t\tlabel: values[`label-${h}`],\n\t\t\t\t\t\tcs: values[`colspan-${h}`],\n\t\t\t\t\t\trs: values[`rowspan-${h}`]\n\t\t\t\t\t}));\n\t\t\t\t}\n\t\t\t\tcolumn.header = headers;\n\t\t\t\tthis.grid.rendering.updateHeaders();\n\t\t\t}\n\t\t});\n\t}\n\n\twillUpdate(props: Map<PropertyKey, unknown>) {\n\t\tif (props.has('range') && !props.has('headerCount')) {\n\t\t\tthis.headerCount = this.grid ? this.grid.model.headerCount : 0;\n\t\t}\n\t}\n\n\tupdated(props: Map<PropertyKey, unknown>) {\n\t\tif (props.has('range') || props.has('headerCount')) {\n\t\t\tthis.formContainer.setSourceData(this.getFormContainerConfig());\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t<og-form-container></og-form-container>\n\t`;\n\n}"]}

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

@@ -0,0 +1,9 @@
+export * from './configForm';
+export * from './headerForm';
+export * from './namesForm';
+export * from './ruleForm';
+export * from './ruleList';
+export * from './ruleFormThreshold';
+export * from './styleForm';
+export * from './sparklineForm';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}

package/dist/ui/forms/index.js

@@ -0,0 +1,9 @@
+export * from './configForm';
+export * from './headerForm';
+export * from './namesForm';
+export * from './ruleForm';
+export * from './ruleList';
+export * from './ruleFormThreshold';
+export * from './styleForm';
+export * from './sparklineForm';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './configForm';\nexport * from './headerForm';\nexport * from './namesForm';\nexport * from './ruleForm';\nexport * from './ruleList';\nexport * from './ruleFormThreshold';\nexport * from './styleForm';\nexport * from './sparklineForm';"]}

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

@@ -0,0 +1,21 @@
+import { List } from '@omegagrid/core';
+import { CellRange, Grid, GridModel } from '@omegagrid/grid';
+import { LitElement } from 'lit';
+export declare class NamesForm extends LitElement {
+    static styles: import("lit").CSSResult[];
+    grid: Grid;
+    model: GridModel;
+    list: List;
+    _items: [string, CellRange][];
+    get items(): [string, CellRange][];
+    connectedCallback(): void;
+    updateList: () => void;
+    deleteName(index: number): void;
+    addName(): void;
+    _onApplyClick: () => void;
+    _onInputChange(e: Event, groupIndex: number): void;
+    _itemRenderer: (_div: HTMLDivElement, index: number) => import("lit-html").TemplateResult<1>;
+    updated(): void;
+    render: () => "" | import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=namesForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"namesForm.d.ts","sourceRoot":"","sources":["../../../src/ui/forms/namesForm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAGvC,qBACa,SAAU,SAAQ,UAAU;IAExC,MAAM,CAAC,MAAM,4BAAW;IAGxB,IAAI,EAAE,IAAI,CAAC;IAGX,KAAK,EAAE,SAAS,CAAC;IAGjB,IAAI,EAAE,IAAI,CAAC;IAEX,MAAM,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,CAAC;IAC9B,IAAI,KAAK,0BAA+E;IAExF,iBAAiB;IAIjB,UAAU,aAIT;IAED,UAAU,CAAC,KAAK,EAAE,MAAM;IAKxB,OAAO;IAMP,aAAa,aAEZ;IAED,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM;IAe3C,aAAa,GAAI,MAAM,cAAc,EAAE,OAAO,MAAM,0CAsCnD;IAED,OAAO;IAIP,MAAM,kDAeC;CACP"}

package/dist/ui/forms/namesForm.js

@@ -0,0 +1,124 @@
+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';
+let NamesForm = class NamesForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.updateList = () => {
+            this._items = null;
+            this.list.size = this.items.length;
+            this.list.renderItems(true);
+        };
+        this._onApplyClick = () => {
+            this.grid.rendering.render(false);
+        };
+        this._itemRenderer = (_div, index) => {
+            const item = this.items[index];
+            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.deleteName(index)}">
+							</og-button>
+						</div>
+					</div>
+					
+					<div class="row">Name</div>
+					<div class="row">
+						<og-input
+							data-id="name"
+							.value="${item[0] || ''}"
+							style="width: 100%"
+							@change="${(e) => this._onInputChange(e, index)}">
+						</og-input>
+					</div>
+
+					<div class="row">Range</div>
+					<div class="row">
+						<og-input
+							data-id="range"
+							.value="${item[1] ? item[1].A1 : ''}"
+							style="width: 100%"
+							@change="${(e) => this._onInputChange(e, index)}">
+						</og-input>
+					</div>
+				</div>
+			</div>
+		`;
+        };
+        this.render = () => this.model ? html `
+		<div class="controls p">
+			<og-button text="+" @click="${() => this.addName()}"></og-button>
+			<og-button @click="${this._onApplyClick}">
+				<div slot="content"><og-icon icon="refresh"></og-icon> Apply</div>
+			</og-button>
+		</div>
+		<div class="body">
+			<og-list ?nativeHeight="${true}"
+				itemHeight="120"
+				.customStyle=${itemStyle}
+				.itemRenderer="${this._itemRenderer}"
+				.size="${this.model.names.names.size}">
+			</og-list>
+		</div>
+	` : '';
+    }
+    get items() { return this._items ?? (this._items = Array.from(this.model.names.names)); }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    deleteName(index) {
+        this.model.names.delete(this.items[index][0]);
+        this.updateList();
+    }
+    addName() {
+        const range = this.grid.selection.range.clone();
+        this.model.names.set(`${range.bounds[0][0].A1}_${range.bounds[1][1].A1}`, range);
+        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;
+        }
+    }
+    updated() {
+        this.updateList();
+    }
+};
+NamesForm.styles = [style];
+__decorate([
+    property({ type: Object })
+], NamesForm.prototype, "grid", void 0);
+__decorate([
+    property({ type: Object })
+], NamesForm.prototype, "model", void 0);
+__decorate([
+    query('og-list')
+], NamesForm.prototype, "list", void 0);
+NamesForm = __decorate([
+    customElement('og-editor-form-names')
+], NamesForm);
+export { NamesForm };
+//# sourceMappingURL=namesForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"namesForm.js","sourceRoot":"","sources":["../../../src/ui/forms/namesForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Input, List } from '@omegagrid/core';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { CellRange, Grid, GridModel } from '@omegagrid/grid';\nimport { html, LitElement } from 'lit';\nimport { itemStyle, style } from './sparklineForm.style';\n\n@customElement('og-editor-form-names')\nexport class NamesForm 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_items: [string, CellRange][];\n\tget items() { return this._items ?? (this._items = Array.from(this.model.names.names)) }\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t}\n\n\tupdateList = () => {\n\t\tthis._items = null;\n\t\tthis.list.size = this.items.length;\n\t\tthis.list.renderItems(true);\n\t}\n\n\tdeleteName(index: number) {\n\t\tthis.model.names.delete(this.items[index][0]);\n\t\tthis.updateList();\n\t}\n\n\taddName() {\n\t\tconst range = this.grid.selection.range.clone();\n\t\tthis.model.names.set(`${range.bounds[0][0].A1}_${range.bounds[1][1].A1}`, range);\n\t\tthis.updateList();\n\t}\n\n\t_onApplyClick = () => {\n\t\tthis.grid.rendering.render(false);\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\t);\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t_itemRenderer = (_div: HTMLDivElement, index: number) => {\n\t\tconst item = this.items[index];\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.deleteName(index)}\">\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\">Name</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=\"name\"\n\t\t\t\t\t\t\t.value=\"${item[0] || ''}\"\n\t\t\t\t\t\t\tstyle=\"width: 100%\"\n\t\t\t\t\t\t\t@change=\"${(e: Event) => this._onInputChange(e, index)}\">\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\">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=\"range\"\n\t\t\t\t\t\t\t.value=\"${item[1] ? item[1].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, index)}\">\n\t\t\t\t\t\t</og-input>\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\tupdated() {\n\t\tthis.updateList();\n\t}\n\n\trender = () => this.model ? html`\n\t\t<div class=\"controls p\">\n\t\t\t<og-button text=\"+\" @click=\"${() => this.addName()}\"></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> 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=\"120\"\n\t\t\t\t.customStyle=${itemStyle}\n\t\t\t\t.itemRenderer=\"${this._itemRenderer}\"\n\t\t\t\t.size=\"${this.model.names.names.size}\">\n\t\t\t</og-list>\n\t\t</div>\n\t` : '';\n}"]}

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

@@ -0,0 +1,13 @@
+import { Input } from '@omegagrid/core';
+import { ConditionalFormat, GridModel } from '@omegagrid/grid';
+import { LitElement } from 'lit';
+export declare class RuleForm extends LitElement {
+    static styles: import("lit").CSSResult[];
+    model: GridModel;
+    format: ConditionalFormat;
+    rangesInput: Input;
+    conditionInput: Input;
+    updateFormat(): void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=ruleForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ruleForm.d.ts","sourceRoot":"","sources":["../../../src/ui/forms/ruleForm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,OAAO,EAAa,iBAAiB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,qBACa,QAAS,SAAQ,UAAU;IAEvC,MAAM,CAAC,MAAM,4BAAW;IAGxB,KAAK,EAAE,SAAS,CAAC;IAGjB,MAAM,EAAE,iBAAiB,CAAC;IAG1B,WAAW,EAAE,KAAK,CAAC;IAGnB,cAAc,EAAE,KAAK,CAAC;IAEtB,YAAY;IAMZ,MAAM,6CAaG;CACT"}

package/dist/ui/forms/ruleForm.js

@@ -0,0 +1,56 @@
+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 { style } from './ruleForm.style';
+import { msg } from '@omegagrid/localize';
+let RuleForm = class RuleForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.render = () => this.format ? html `
+		<div class="row">${msg('Range')}</div>
+
+		<div class="row">
+			<og-input
+				id="ranges"
+				.value="${this.format.ranges ? CellRange.toA1s(this.format.ranges) : ''}"
+				style="width: 100%"
+				@change="${() => this.updateFormat()}">
+			</og-input>
+		</div>
+
+		<og-editor-ruleeditor .format="${this.format}"></og-editor-ruleeditor>
+	` : null;
+    }
+    updateFormat() {
+        if (!this.format)
+            return;
+        if (this.rangesInput)
+            this.format.ranges = CellRange.fromA1s(this.rangesInput.value);
+        else
+            this.format.ranges = null;
+    }
+};
+RuleForm.styles = [style];
+__decorate([
+    property({ type: Object })
+], RuleForm.prototype, "model", void 0);
+__decorate([
+    property({ type: Object })
+], RuleForm.prototype, "format", void 0);
+__decorate([
+    query('og-input#ranges')
+], RuleForm.prototype, "rangesInput", void 0);
+__decorate([
+    query('og-input#condition')
+], RuleForm.prototype, "conditionInput", void 0);
+RuleForm = __decorate([
+    customElement('og-editor-form-rule')
+], RuleForm);
+export { RuleForm };
+//# sourceMappingURL=ruleForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ruleForm.js","sourceRoot":"","sources":["../../../src/ui/forms/ruleForm.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAgC,MAAM,iBAAiB,CAAC;AAC1E,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAGnC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAsBN,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;qBACb,GAAG,CAAC,OAAO,CAAC;;;;;cAKnB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;;eAE5D,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;;;;mCAIL,IAAI,CAAC,MAAM;EAC5C,CAAC,CAAC,CAAC,IAAI,CAAC;IACV,CAAC;IApBA,YAAY;QACX,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QACzB,IAAI,IAAI,CAAC,WAAW;YAAE,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;;YAChF,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;IAChC,CAAC;;AAlBM,eAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAGxB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;uCACR;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;wCACC;AAG1B;IADC,KAAK,CAAC,iBAAiB,CAAC;6CACN;AAGnB;IADC,KAAK,CAAC,oBAAoB,CAAC;gDACN;AAdV,QAAQ;IADpB,aAAa,CAAC,qBAAqB,CAAC;GACxB,QAAQ,CAoCpB","sourcesContent":["import { Input } from '@omegagrid/core';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { CellRange, ConditionalFormat, GridModel } from '@omegagrid/grid';\nimport { html, LitElement } from 'lit';\nimport { style } from './ruleForm.style';\nimport { msg } from '@omegagrid/localize';\n\n@customElement('og-editor-form-rule')\nexport class RuleForm extends LitElement {\n\n\tstatic styles = [style];\n\n\t@property({type: Object})\n\tmodel: GridModel;\n\n\t@property({type: Object})\n\tformat: ConditionalFormat;\n\n\t@query('og-input#ranges')\n\trangesInput: Input;\n\n\t@query('og-input#condition')\n\tconditionInput: Input;\n\n\tupdateFormat() {\n\t\tif (!this.format) return;\n\t\tif (this.rangesInput) this.format.ranges = CellRange.fromA1s(this.rangesInput.value);\n\t\telse this.format.ranges = null;\n\t}\n\n\trender = () => this.format ? html`\n\t\t<div class=\"row\">${msg('Range')}</div>\n\n\t\t<div class=\"row\">\n\t\t\t<og-input\n\t\t\t\tid=\"ranges\"\n\t\t\t\t.value=\"${this.format.ranges ? CellRange.toA1s(this.format.ranges) : ''}\"\n\t\t\t\tstyle=\"width: 100%\"\n\t\t\t\t@change=\"${() => this.updateFormat()}\">\n\t\t\t</og-input>\n\t\t</div>\n\n\t\t<og-editor-ruleeditor .format=\"${this.format}\"></og-editor-ruleeditor>\n\t` : null;\n}\n"]}

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

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

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

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

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

@@ -0,0 +1,50 @@
+import { css } from 'lit';
+export const style = css `
+	* {
+		box-sizing: border-box;
+	}
+
+	:host {
+		display: block;
+	}
+
+	.p {
+		padding: 5px;
+	}
+
+	.row {
+		line-height: 22px;
+	}
+
+	og-dropdown-list, og-dropdown-colorpicker {
+		height: 22px;
+	}
+
+	og-input {
+		display: block;
+	}
+
+	.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=ruleForm.style.js.map