@omegagrid/editor 0.10.2 → 0.10.4

package/dist/ui/editors/styleEditor.js

@@ -0,0 +1,160 @@
+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 fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26].map(sz => ({
+    k: sz.toString(),
+    v: sz.toString(),
+}));
+const items = [
+    { type: 'togglebutton', id: 'bold', icon: { icon: 'bold' } },
+    { type: 'togglebutton', id: 'italic', icon: { icon: 'italic' } },
+    { type: 'togglebutton', id: 'underline', icon: { icon: 'underline' } },
+    { type: 'text', id: 'sz', width: 40, items: fontSizes, placeholder: '' },
+    { type: 'dropdown-button', id: 'alignment', icon: { icon: 'align-center' }, items: [[
+                { type: 'button', id: 'alignTopLeft', icon: { icon: 'align-right', rotation: 180 } },
+                { type: 'button', id: 'alignTopCenter', icon: { icon: 'align-center' } },
+                { type: 'button', id: 'alignTopRight', icon: { icon: 'align-left', rotation: 180 } },
+            ], [
+                { 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 StyleEditor = class StyleEditor 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 'sz':
+                    data.sz = a.value ? parseInt(a.value) : null;
+                    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}`;
+        values.sz = s.sz ? s.sz.toString() : null;
+        return values;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+};
+StyleEditor.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 })
+], StyleEditor.prototype, "data", void 0);
+__decorate([
+    query('og-toolbar')
+], StyleEditor.prototype, "toolbar", void 0);
+StyleEditor = __decorate([
+    customElement('og-editor-styleeditor')
+], StyleEditor);
+export { StyleEditor };
+//# sourceMappingURL=styleEditor.js.map

package/dist/ui/editors/styleEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleEditor.js","sourceRoot":"","sources":["../../../src/ui/editors/styleEditor.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 fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26].map(sz => ({\n\tk: sz.toString(),\n\tv: sz.toString(),\n}));\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: 'text', id: 'sz', width: 40, items: fontSizes, placeholder: ''},\n\t{type: 'dropdown-button', id: 'alignment', icon: {icon: 'align-center'}, items: [[\n\t\t{type: 'button', id: 'alignTopLeft', icon: {icon: 'align-right', rotation: 180}},\n\t\t{type: 'button', id: 'alignTopCenter', icon: {icon: 'align-center'}},\n\t\t{type: 'button', id: 'alignTopRight', icon: {icon: 'align-left', rotation: 180}},\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-styleeditor')\nexport class StyleEditor 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\tvalues.sz = s.sz ? s.sz.toString() : null;\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 'sz': data.sz = a.value ? parseInt(a.value as string) : null; 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/editors/themeEditor.d.ts

@@ -0,0 +1,24 @@
+import { TableTheme } from '@omegagrid/grid';
+import { OmegaComponent, SortableList } from '@omegagrid/core';
+import { TabContainer } from '@omegagrid/tabs';
+type ThemeItemType = 'rows' | 'columns' | 'cells';
+export declare class ThemeEditor extends OmegaComponent {
+    static styles: import("lit").CSSResultGroup[];
+    theme: TableTheme;
+    tabContainer: TabContainer;
+    private lists;
+    private listItems;
+    willUpdate(props: Map<string, unknown>): void;
+    updated(props: Map<string, unknown>): void;
+    createItemEditor: (type: ThemeItemType) => (div: HTMLDivElement, index: number) => void;
+    updateList(type: ThemeItemType): void;
+    moveItemUp(index: number, type: ThemeItemType): void;
+    moveItemDown(index: number, type: ThemeItemType): void;
+    moveItem(fromIndex: number, toIndex: number, type: ThemeItemType): void;
+    deleteItem(index: number, type: ThemeItemType): void;
+    addItem(type: ThemeItemType): void;
+    createComponent: (id: ThemeItemType) => SortableList;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=themeEditor.d.ts.map

package/dist/ui/editors/themeEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeEditor.d.ts","sourceRoot":"","sources":["../../../src/ui/editors/themeEditor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAsB,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGnF,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,KAAK,aAAa,GAAG,MAAM,GAAC,SAAS,GAAC,OAAO,CAAC;AAE9C,qBACa,WAAY,SAAQ,cAAc;IAE9C,MAAM,CAAC,MAAM,iCAIV;IAGH,KAAK,EAAE,UAAU,CAAC;IAGlB,YAAY,EAAE,YAAY,CAAC;IAE3B,OAAO,CAAC,KAAK,CAA+C;IAC5D,OAAO,CAAC,SAAS,CAAoD;IAErE,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQtC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAInC,gBAAgB,GAAI,MAAM,aAAa,MAAM,KAAK,cAAc,EAAE,OAAO,MAAM,UAe9E;IAED,UAAU,CAAC,IAAI,EAAE,aAAa;IAM9B,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa;IAK7C,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa;IAK/C,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa;IAQhE,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa;IAQ7C,OAAO,CAAC,IAAI,EAAE,aAAa;IAQ3B,eAAe,GAAI,IAAI,aAAa,kBAgBnC;IAED,MAAM,6CAuBJ;CAEF"}

package/dist/ui/editors/themeEditor.js

@@ -0,0 +1,138 @@
+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 { css, html } from 'lit';
+import { dom, OmegaComponent } from '@omegagrid/core';
+import { msg } from '@omegagrid/localize';
+let ThemeEditor = class ThemeEditor extends OmegaComponent {
+    constructor() {
+        super(...arguments);
+        this.createItemEditor = (type) => (div, index) => {
+            this.listItems = this.listItems || {};
+            this.listItems[type] = this.listItems[type] || [];
+            let editor = this.listItems[type][index] ? this.listItems[type][index] : null;
+            if (!editor) {
+                editor = dom.createElement('og-editor-themeitem', {
+                    index: index,
+                    themeItem: this.theme[type][index],
+                    itemType: type,
+                    editor: this
+                });
+                this.listItems[type][index] = editor;
+            }
+            dom.empty(div);
+            div.appendChild(editor);
+        };
+        this.createComponent = (id) => {
+            this.lists = this.lists || {};
+            if (this.lists[id])
+                return this.lists[id];
+            const list = dom.createElement('og-sortablelist');
+            list.style.height = '100%';
+            list.style.overflow = 'hidden';
+            list.scrollbarPadding = true;
+            list.disabledSelect = true;
+            list.customHandle = true;
+            list.dynamicItemHeight = true;
+            list.nativeHeight = true;
+            list.size = this.theme && this.theme[id] ? this.theme[id].length : 0;
+            list.itemRenderer = this.createItemEditor(id);
+            list.addEventListener('list.sort', (e) => this.moveItem(e.fromIndex, e.toIndex, id));
+            this.lists[id] = list;
+            return list;
+        };
+        this.render = () => html `
+		<div style="display: flex; flex-direction: column; height: 100%">
+			<div style="flex: 1; overflow: hidden">
+				<og-tabcontainer 
+					fixed
+					style="height: 100%"
+					.createComponent="${this.createComponent}"
+					.items="${[
+            { id: 'rows', title: msg('Rows') },
+            { id: 'columns', title: msg('Columns') },
+            { id: 'cells', title: msg('Cells') }
+        ]}">
+				</og-tabcontainer>
+			</div>
+			
+			<div style="flex: 0; padding-top: 5px">
+				<og-button
+					@click="${() => this.addItem(this.tabContainer.selectedId)}"
+					icon="plus"
+					style="width: 100%">
+				</og-button>
+			</div>
+		</div>
+	`;
+    }
+    willUpdate(props) {
+        this.theme = this.theme || { name: '' };
+        if (props.has('theme')) {
+            this.listItems = {};
+            this.lists = {};
+        }
+    }
+    updated(props) {
+        if (props.has('theme'))
+            this.tabContainer?.refresh();
+    }
+    updateList(type) {
+        this.listItems[type] = [];
+        this.lists[type].size = this.theme[type].length;
+        this.lists[type].renderItems(true);
+    }
+    moveItemUp(index, type) {
+        if (index === 0)
+            return;
+        this.moveItem(index, index - 1, type);
+    }
+    moveItemDown(index, type) {
+        if (index >= this.listItems[type].length - 1)
+            return;
+        this.moveItem(index, index + 1, type);
+    }
+    moveItem(fromIndex, toIndex, type) {
+        const items = this.theme[type];
+        if (!this.theme[type])
+            return;
+        const item = items.splice(fromIndex, 1)[0];
+        items.splice(toIndex, 0, item);
+        this.updateList(type);
+    }
+    deleteItem(index, type) {
+        const items = this.theme[type];
+        if (!this.theme[type])
+            return;
+        items.splice(index, 1);
+        this.theme[type] = items;
+        this.updateList(type);
+    }
+    addItem(type) {
+        const items = this.theme[type] ?? [];
+        items.push({});
+        this.theme[type] = items;
+        this.updateList(type);
+        this.lists[type].scrollToIndex(items.length - 1);
+    }
+};
+ThemeEditor.styles = [OmegaComponent.styles, css `
+		:host {
+			overflow: hidden;
+		}
+	`];
+__decorate([
+    property({ type: Object })
+], ThemeEditor.prototype, "theme", void 0);
+__decorate([
+    query('og-tabcontainer')
+], ThemeEditor.prototype, "tabContainer", void 0);
+ThemeEditor = __decorate([
+    customElement('og-editor-theme')
+], ThemeEditor);
+export { ThemeEditor };
+//# sourceMappingURL=themeEditor.js.map

package/dist/ui/editors/themeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeEditor.js","sourceRoot":"","sources":["../../../src/ui/editors/themeEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement, property, query } from 'lit/decorators.js';\nimport { TableTheme } from '@omegagrid/grid';\nimport { css, html } from 'lit';\nimport { dom, ListSortEvent, OmegaComponent, SortableList } from '@omegagrid/core';\nimport { msg } from '@omegagrid/localize';\nimport { ThemeItemEditor } from './themeItemEditor';\nimport { TabContainer } from '@omegagrid/tabs';\n\ntype ThemeItemType = 'rows'|'columns'|'cells';\n\n@customElement('og-editor-theme')\nexport class ThemeEditor extends OmegaComponent {\n\n\tstatic styles = [OmegaComponent.styles, css`\n\t\t:host {\n\t\t\toverflow: hidden;\n\t\t}\n\t`];\n\n\t@property({type: Object})\n\ttheme: TableTheme;\n\n\t@query('og-tabcontainer')\n\ttabContainer: TabContainer;\n\n\tprivate lists: Partial<Record<ThemeItemType, SortableList>>;\n\tprivate listItems: Partial<Record<ThemeItemType, ThemeItemEditor[]>>;\n\n\twillUpdate(props: Map<string, unknown>) {\n\t\tthis.theme = this.theme || {name: ''};\n\t\tif (props.has('theme')) {\n\t\t\tthis.listItems = {};\n\t\t\tthis.lists = {};\n\t\t}\n\t}\n\n\tupdated(props: Map<string, unknown>) {\n\t\tif (props.has('theme')) this.tabContainer?.refresh();\n\t}\n\n\tcreateItemEditor = (type: ThemeItemType) => (div: HTMLDivElement, index: number) => {\n\t\tthis.listItems = this.listItems || {};\n\t\tthis.listItems[type] = this.listItems[type] || [];\n\t\tlet editor = this.listItems[type][index] ? this.listItems[type][index] : null;\n\t\tif (!editor) {\n\t\t\teditor = dom.createElement<ThemeItemEditor>('og-editor-themeitem', {\n\t\t\t\tindex: index,\n\t\t\t\tthemeItem: this.theme[type][index],\n\t\t\t\titemType: type,\n\t\t\t\teditor: this\n\t\t\t});\n\t\t\tthis.listItems[type][index] = editor;\n\t\t}\n\t\tdom.empty(div);\n\t\tdiv.appendChild(editor);\n\t}\n\n\tupdateList(type: ThemeItemType) {\n\t\tthis.listItems[type] = [];\n\t\tthis.lists[type].size = this.theme[type].length;\n\t\tthis.lists[type].renderItems(true);\n\t}\n\n\tmoveItemUp(index: number, type: ThemeItemType) {\n\t\tif (index === 0) return;\n\t\tthis.moveItem(index, index - 1, type);\n\t}\n\n\tmoveItemDown(index: number, type: ThemeItemType) {\n\t\tif (index >= this.listItems[type].length - 1) return;\n\t\tthis.moveItem(index, index + 1, type);\n\t}\n\n\tmoveItem(fromIndex: number, toIndex: number, type: ThemeItemType) {\n\t\tconst items = this.theme[type];\n\t\tif (!this.theme[type]) return;\n\t\tconst item = items.splice(fromIndex, 1)[0];\n\t\titems.splice(toIndex, 0, item);\n\t\tthis.updateList(type);\n\t}\n\n\tdeleteItem(index: number, type: ThemeItemType) {\n\t\tconst items = this.theme[type];\n\t\tif (!this.theme[type]) return;\n\t\titems.splice(index, 1);\n\t\tthis.theme[type] = items;\n\t\tthis.updateList(type);\n\t}\n\n\taddItem(type: ThemeItemType) {\n\t\tconst items = this.theme[type] ?? [];\n\t\titems.push({});\n\t\tthis.theme[type] = items;\n\t\tthis.updateList(type);\n\t\tthis.lists[type].scrollToIndex(items.length - 1);\n\t}\n\n\tcreateComponent = (id: ThemeItemType) => {\n\t\tthis.lists = this.lists || {};\n\t\tif (this.lists[id]) return this.lists[id];\n\t\tconst list = dom.createElement<SortableList>('og-sortablelist');\n\t\tlist.style.height = '100%';\n\t\tlist.style.overflow = 'hidden';\n\t\tlist.scrollbarPadding = true;\n\t\tlist.disabledSelect = true;\n\t\tlist.customHandle = true;\n\t\tlist.dynamicItemHeight = true;\n\t\tlist.nativeHeight = true;\n\t\tlist.size = this.theme && this.theme[id] ? this.theme[id].length : 0;\n\t\tlist.itemRenderer = this.createItemEditor(id);\n\t\tlist.addEventListener('list.sort', (e: ListSortEvent) => this.moveItem(e.fromIndex, e.toIndex, id));\n\t\tthis.lists[id] = list;\n\t\treturn list;\n\t}\n\n\trender = () => html`\n\t\t<div style=\"display: flex; flex-direction: column; height: 100%\">\n\t\t\t<div style=\"flex: 1; overflow: hidden\">\n\t\t\t\t<og-tabcontainer \n\t\t\t\t\tfixed\n\t\t\t\t\tstyle=\"height: 100%\"\n\t\t\t\t\t.createComponent=\"${this.createComponent}\"\n\t\t\t\t\t.items=\"${[\n\t\t\t\t\t\t{id: 'rows', title: msg('Rows')},\n\t\t\t\t\t\t{id: 'columns', title: msg('Columns')},\n\t\t\t\t\t\t{id: 'cells', title: msg('Cells')}\n\t\t\t\t\t]}\">\n\t\t\t\t</og-tabcontainer>\n\t\t\t</div>\n\t\t\t\n\t\t\t<div style=\"flex: 0; padding-top: 5px\">\n\t\t\t\t<og-button\n\t\t\t\t\t@click=\"${() => this.addItem(this.tabContainer.selectedId as ThemeItemType)}\"\n\t\t\t\t\ticon=\"plus\"\n\t\t\t\t\tstyle=\"width: 100%\">\n\t\t\t\t</og-button>\n\t\t\t</div>\n\t\t</div>\n\t`;\n\n}"]}

package/dist/ui/editors/themeItemEditor.d.ts

@@ -0,0 +1,22 @@
+import { ConditionalFormatType, Style, ThemeColumnItem, ThemeRowItem } from '@omegagrid/grid';
+import { events, OmegaComponent } from '@omegagrid/core';
+import { RuleEditor } from './ruleEditor';
+import { StyleEditor } from './styleEditor';
+import { ThemeEditor } from './themeEditor';
+type ThemeItemType = 'rows' | 'columns' | 'cells';
+export declare class ThemeItemEditor extends OmegaComponent {
+    index: number;
+    themeItem: ThemeColumnItem & ThemeRowItem;
+    itemType: ThemeItemType;
+    editor: ThemeEditor;
+    moveHandle: HTMLElement;
+    ruleEditor: RuleEditor;
+    styleEditor: StyleEditor;
+    static styles: import("lit").CSSResultGroup[];
+    willUpdate(): void;
+    updateRuleType(type: ConditionalFormatType): void;
+    _onStyleChange: (e: events.ChangeEvent<Style>) => void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=themeItemEditor.d.ts.map

package/dist/ui/editors/themeItemEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeItemEditor.d.ts","sourceRoot":"","sources":["../../../src/ui/editors/themeItemEditor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,eAAe,EAAa,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEzG,OAAO,EAAE,MAAM,EAAY,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,KAAK,aAAa,GAAG,MAAM,GAAC,SAAS,GAAC,OAAO,CAAC;AAU9C,qBACa,eAAgB,SAAQ,cAAc;IAGlD,KAAK,EAAE,MAAM,CAAC;IAGd,SAAS,EAAE,eAAe,GAAG,YAAY,CAAC;IAG1C,QAAQ,EAAE,aAAa,CAAC;IAGxB,MAAM,EAAE,WAAW,CAAC;IAGpB,UAAU,EAAE,WAAW,CAAC;IAGxB,UAAU,EAAE,UAAU,CAAC;IAGvB,WAAW,EAAE,WAAW,CAAC;IAEzB,MAAM,CAAC,MAAM,iCA6CV;IAEH,UAAU;IAKV,cAAc,CAAC,IAAI,EAAE,qBAAqB;IAS1C,cAAc,GAAI,GAAG,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,UAE7C;IAED,MAAM,6CAsEJ;CACF"}

package/dist/ui/editors/themeItemEditor.js

@@ -0,0 +1,181 @@
+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 { css, html } from 'lit';
+import { OmegaComponent } from '@omegagrid/core';
+import { msg } from '@omegagrid/localize';
+const ruleTypes = [
+    { key: null, value: 'Static style' },
+    { key: 'formula', value: 'Formula' },
+    { key: 'scale', value: 'Scale' },
+    { key: 'bar', value: 'Data Bar' },
+    { key: 'icon', value: 'Icon Set' },
+];
+let ThemeItemEditor = class ThemeItemEditor extends OmegaComponent {
+    constructor() {
+        super(...arguments);
+        this._onStyleChange = (e) => {
+            this.themeItem.style = e.value;
+        };
+        this.render = () => html `
+		<div class="header">
+			<div style="flex: 1" class="move-handle">${msg('Rule')} #${this.index + 1}</div>
+
+			<div>
+				<og-dropdown-menu
+					noCaret
+					dynamicWidth
+					alignment="right"
+					color="transparent"
+					.items="${[{
+                key: 'moveUp',
+                value: msg('Move up'),
+                icon: 'arrow-up',
+                exec: () => this.editor.moveItemUp(this.index, this.itemType)
+            }, {
+                key: 'moveDown',
+                value: msg('Move down'),
+                icon: 'arrow-down',
+                exec: () => this.editor.moveItemDown(this.index, this.itemType)
+            }, {
+                key: 'delete',
+                value: msg('Delete'),
+                icon: 'trash',
+                color: 'red',
+                exec: () => this.editor.deleteItem(this.index, this.itemType)
+            }]}">
+					<div slot="label"><og-icon icon="ellipsis"></og-icon></div>
+				</og-dropdown-menu>
+			</div>
+		</div>
+
+		${this.itemType != 'cells' ? html `
+			<div class="row">${msg('Conditions')}</div>
+
+			<div class="row">
+				<label>${msg('Level')}</label>
+				<og-numericinput buttons min="0" .value="${this.themeItem?.level}"></og-numericinput>
+				<label>${msg('Index')}</label>
+				<og-numericinput buttons min="0" .value="${this.themeItem?.index}"></og-numericinput>
+			</div>
+
+			<div class="row">
+				<label>${msg('Name')}</label>
+				<og-input></og-input>
+			</div>
+		` : ''}
+
+		<div class="row">${msg('Style definition')}</div>
+
+		<div class="row">
+			<og-dropdown-list
+				.value = "${this.themeItem?.type ?? null}"
+				.items="${ruleTypes}"
+				@change="${(e) => this.updateRuleType(e.value)}">
+			</og-dropdown-list>
+		</div>
+
+		<div>
+			${this.themeItem?.type ? html `
+				<og-editor-ruleeditor 
+					.format="${this.themeItem}">
+				</og-editor-ruleeditor>
+			` : html `
+				<og-editor-styleeditor 
+					@change="${this._onStyleChange}"
+					.data="${this.themeItem.style}">
+				</og-editor-styleeditor>
+			`}
+		</div>
+	`;
+    }
+    willUpdate() {
+        this.themeItem = this.themeItem || {};
+        this.updateRuleType(this.themeItem.type);
+    }
+    updateRuleType(type) {
+        this.themeItem.type = type;
+        if (type)
+            delete this.themeItem.style;
+        else
+            this.themeItem.style = this.themeItem.style || {};
+        this.requestUpdate();
+        this.ruleEditor?.requestUpdate();
+    }
+};
+ThemeItemEditor.styles = [OmegaComponent.styles, css `
+		:host {
+			line-height: 22px;
+		}
+
+		.row {
+			display: flex;
+			flex-direction: row;
+			margin: 2px 0;
+			align-items: center;
+		}
+
+		label {
+			flex: 0 60px;
+			text-align: right;
+			margin-right: 10px;
+		}
+
+		og-dropdown-list, og-dropdown-menu, og-editor-ruleeditor {
+			line-height: 16px;
+		}
+
+		og-numericinput, og-input {
+			flex: 1;
+			display: block;
+			width: 100%;
+			line-height: 20px;
+			text-align: center;
+		}
+
+		.move-handle {
+			cursor: move;
+		}
+
+		og-dropdown-list {
+			flex: 1;
+		}
+
+		.header {
+			padding-left: 5px;
+			border-top: 1px solid var(--og-border-color);
+			border-bottom: 1px solid var(--og-border-color);
+			display: flex;
+			flex-direction: row;
+		}
+	`];
+__decorate([
+    property({ type: Number })
+], ThemeItemEditor.prototype, "index", void 0);
+__decorate([
+    property({ type: Object })
+], ThemeItemEditor.prototype, "themeItem", void 0);
+__decorate([
+    property({ type: String })
+], ThemeItemEditor.prototype, "itemType", void 0);
+__decorate([
+    property({ type: Object })
+], ThemeItemEditor.prototype, "editor", void 0);
+__decorate([
+    query('.move-handle')
+], ThemeItemEditor.prototype, "moveHandle", void 0);
+__decorate([
+    query('og-editor-ruleeditor')
+], ThemeItemEditor.prototype, "ruleEditor", void 0);
+__decorate([
+    query('og-editor-styleeditor')
+], ThemeItemEditor.prototype, "styleEditor", void 0);
+ThemeItemEditor = __decorate([
+    customElement('og-editor-themeitem')
+], ThemeItemEditor);
+export { ThemeItemEditor };
+//# sourceMappingURL=themeItemEditor.js.map

package/dist/ui/editors/themeItemEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeItemEditor.js","sourceRoot":"","sources":["../../../src/ui/editors/themeItemEditor.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAoB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAO1C,MAAM,SAAS,GAAe;IAC7B,EAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAC;IAClC,EAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAC;IAClC,EAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAC;IAC9B,EAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAC;IAC/B,EAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAC;CAChC,CAAC;AAGK,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,cAAc;IAA5C;;QAoFN,mBAAc,GAAG,CAAC,CAA4B,EAAE,EAAE;YACjD,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;QAChC,CAAC,CAAA;QAED,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;8CAE0B,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC;;;;;;;;eAQ7D,CAAC;gBACV,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,GAAG,CAAC,SAAS,CAAC;gBACrB,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC;aAC7D,EAAE;gBACF,GAAG,EAAE,UAAU;gBACf,KAAK,EAAE,GAAG,CAAC,WAAW,CAAC;gBACvB,IAAI,EAAE,YAAY;gBAClB,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC;aAC/D,EAAE;gBACF,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,GAAG,CAAC,QAAQ,CAAC;gBACpB,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,KAAK;gBACZ,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC;aAC7D,CAAC;;;;;;IAMH,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;sBACb,GAAG,CAAC,YAAY,CAAC;;;aAG1B,GAAG,CAAC,OAAO,CAAC;+CACsB,IAAI,CAAC,SAAS,EAAE,KAAK;aACvD,GAAG,CAAC,OAAO,CAAC;+CACsB,IAAI,CAAC,SAAS,EAAE,KAAK;;;;aAIvD,GAAG,CAAC,MAAM,CAAC;;;GAGrB,CAAC,CAAC,CAAC,EAAE;;qBAEa,GAAG,CAAC,kBAAkB,CAAC;;;;gBAI5B,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,IAAI;cAC9B,SAAS;eACR,CAAC,CAA4C,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC;;;;;KAKxF,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;gBAEhB,IAAI,CAAC,SAAS;;IAE1B,CAAA,CAAC,CAAC,IAAI,CAAA;;gBAEM,IAAI,CAAC,cAAc;cACrB,IAAI,CAAC,SAAS,CAAC,KAAK;;IAE9B;;EAEF,CAAC;IACH,CAAC;IAzFA,UAAU;QACT,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,EAAe,CAAC;QACnD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC;IAED,cAAc,CAAC,IAA2B;QACzC,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC;QAC3B,IAAI,IAAI;YAAE,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;;YACjC,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,EAAW,CAAC;QAEhE,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,UAAU,EAAE,aAAa,EAAE,CAAC;IAClC,CAAC;;AA3DM,sBAAM,GAAG,CAAC,cAAc,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6C1C,CAAC,AA7CW,CA6CV;AAjEH;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;8CACX;AAGd;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kDACiB;AAG1C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;iDACD;AAGxB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;+CACL;AAGpB;IADC,KAAK,CAAC,cAAc,CAAC;mDACE;AAGxB;IADC,KAAK,CAAC,sBAAsB,CAAC;mDACP;AAGvB;IADC,KAAK,CAAC,uBAAuB,CAAC;oDACN;AArBb,eAAe;IAD3B,aAAa,CAAC,qBAAqB,CAAC;GACxB,eAAe,CA+J3B","sourcesContent":["import { customElement, property, query } from 'lit/decorators.js';\nimport { ConditionalFormatType, Style, ThemeColumnItem, ThemeItem, ThemeRowItem } from '@omegagrid/grid';\nimport { css, html } from 'lit';\nimport { events, MenuItem, OmegaComponent } from '@omegagrid/core';\nimport { msg } from '@omegagrid/localize';\nimport { RuleEditor } from './ruleEditor';\nimport { StyleEditor } from './styleEditor';\nimport { ThemeEditor } from './themeEditor';\n\ntype ThemeItemType = 'rows'|'columns'|'cells';\n\nconst ruleTypes: MenuItem[] = [\n\t{key: null, value: 'Static style'},\n\t{key: 'formula', value: 'Formula'},\n\t{key: 'scale', value: 'Scale'},\n\t{key: 'bar', value: 'Data Bar'},\n\t{key: 'icon', value: 'Icon Set'},\n];\n\n@customElement('og-editor-themeitem')\nexport class ThemeItemEditor extends OmegaComponent {\n\t\n\t@property({type: Number})\n\tindex: number;\n\n\t@property({type: Object})\n\tthemeItem: ThemeColumnItem & ThemeRowItem;\n\n\t@property({type: String})\n\titemType: ThemeItemType;\n\n\t@property({type: Object})\n\teditor: ThemeEditor;\n\n\t@query('.move-handle')\n\tmoveHandle: HTMLElement;\n\n\t@query('og-editor-ruleeditor')\n\truleEditor: RuleEditor;\n\n\t@query('og-editor-styleeditor')\n\tstyleEditor: StyleEditor;\n\n\tstatic styles = [OmegaComponent.styles, css`\n\t\t:host {\n\t\t\tline-height: 22px;\n\t\t}\n\n\t\t.row {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tmargin: 2px 0;\n\t\t\talign-items: center;\n\t\t}\n\n\t\tlabel {\n\t\t\tflex: 0 60px;\n\t\t\ttext-align: right;\n\t\t\tmargin-right: 10px;\n\t\t}\n\n\t\tog-dropdown-list, og-dropdown-menu, og-editor-ruleeditor {\n\t\t\tline-height: 16px;\n\t\t}\n\n\t\tog-numericinput, og-input {\n\t\t\tflex: 1;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\tline-height: 20px;\n\t\t\ttext-align: center;\n\t\t}\n\n\t\t.move-handle {\n\t\t\tcursor: move;\n\t\t}\n\n\t\tog-dropdown-list {\n\t\t\tflex: 1;\n\t\t}\n\n\t\t.header {\n\t\t\tpadding-left: 5px;\n\t\t\tborder-top: 1px solid var(--og-border-color);\n\t\t\tborder-bottom: 1px solid var(--og-border-color);\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t}\n\t`];\n\n\twillUpdate() {\n\t\tthis.themeItem = this.themeItem || {} as ThemeItem;\n\t\tthis.updateRuleType(this.themeItem.type);\n\t}\n\n\tupdateRuleType(type: ConditionalFormatType) {\n\t\tthis.themeItem.type = type;\n\t\tif (type) delete this.themeItem.style;\n\t\telse this.themeItem.style = this.themeItem.style || {} as Style;\n\n\t\tthis.requestUpdate();\n\t\tthis.ruleEditor?.requestUpdate();\n\t}\n\n\t_onStyleChange = (e: events.ChangeEvent<Style>) => {\n\t\tthis.themeItem.style = e.value;\n\t}\n\n\trender = () => html`\n\t\t<div class=\"header\">\n\t\t\t<div style=\"flex: 1\" class=\"move-handle\">${msg('Rule')} #${this.index + 1}</div>\n\n\t\t\t<div>\n\t\t\t\t<og-dropdown-menu\n\t\t\t\t\tnoCaret\n\t\t\t\t\tdynamicWidth\n\t\t\t\t\talignment=\"right\"\n\t\t\t\t\tcolor=\"transparent\"\n\t\t\t\t\t.items=\"${[{\n\t\t\t\t\t\tkey: 'moveUp',\n\t\t\t\t\t\tvalue: msg('Move up'),\n\t\t\t\t\t\ticon: 'arrow-up',\n\t\t\t\t\t\texec: () => this.editor.moveItemUp(this.index, this.itemType)\n\t\t\t\t\t}, {\n\t\t\t\t\t\tkey: 'moveDown',\n\t\t\t\t\t\tvalue: msg('Move down'),\n\t\t\t\t\t\ticon: 'arrow-down',\n\t\t\t\t\t\texec: () => this.editor.moveItemDown(this.index, this.itemType)\n\t\t\t\t\t}, {\n\t\t\t\t\t\tkey: 'delete',\n\t\t\t\t\t\tvalue: msg('Delete'),\n\t\t\t\t\t\ticon: 'trash',\n\t\t\t\t\t\tcolor: 'red',\n\t\t\t\t\t\texec: () => this.editor.deleteItem(this.index, this.itemType)\n\t\t\t\t\t}]}\">\n\t\t\t\t\t<div slot=\"label\"><og-icon icon=\"ellipsis\"></og-icon></div>\n\t\t\t\t</og-dropdown-menu>\n\t\t\t</div>\n\t\t</div>\n\n\t\t${this.itemType != 'cells' ? html`\n\t\t\t<div class=\"row\">${msg('Conditions')}</div>\n\n\t\t\t<div class=\"row\">\n\t\t\t\t<label>${msg('Level')}</label>\n\t\t\t\t<og-numericinput buttons min=\"0\" .value=\"${this.themeItem?.level}\"></og-numericinput>\n\t\t\t\t<label>${msg('Index')}</label>\n\t\t\t\t<og-numericinput buttons min=\"0\" .value=\"${this.themeItem?.index}\"></og-numericinput>\n\t\t\t</div>\n\n\t\t\t<div class=\"row\">\n\t\t\t\t<label>${msg('Name')}</label>\n\t\t\t\t<og-input></og-input>\n\t\t\t</div>\n\t\t` : ''}\n\n\t\t<div class=\"row\">${msg('Style definition')}</div>\n\n\t\t<div class=\"row\">\n\t\t\t<og-dropdown-list\n\t\t\t\t.value = \"${this.themeItem?.type ?? null}\"\n\t\t\t\t.items=\"${ruleTypes}\"\n\t\t\t\t@change=\"${(e: events.ChangeEvent<ConditionalFormatType>) => this.updateRuleType(e.value)}\">\n\t\t\t</og-dropdown-list>\n\t\t</div>\n\n\t\t<div>\n\t\t\t${this.themeItem?.type ? html`\n\t\t\t\t<og-editor-ruleeditor \n\t\t\t\t\t.format=\"${this.themeItem}\">\n\t\t\t\t</og-editor-ruleeditor>\n\t\t\t`: html`\n\t\t\t\t<og-editor-styleeditor \n\t\t\t\t\t@change=\"${this._onStyleChange}\"\n\t\t\t\t\t.data=\"${this.themeItem.style}\">\n\t\t\t\t</og-editor-styleeditor>\n\t\t\t`}\n\t\t</div>\n\t`;\n}\n"]}

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

@@ -0,0 +1,12 @@
+import { FormContainer } from "@omegagrid/form";
+import { Grid, GridGroup, GridModel } from '@omegagrid/grid';
+export declare class ConfigForm extends FormContainer {
+    static styles: import("lit").CSSResult[];
+    model: GridModel;
+    grid: Grid;
+    group: GridGroup;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    updated(): Promise<void>;
+}
+//# sourceMappingURL=configForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"configForm.d.ts","sourceRoot":"","sources":["../../../src/ui/forms/configForm.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAqD,MAAM,iBAAiB,CAAC;AACnG,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAS,MAAM,iBAAiB,CAAC;AAgCpE,qBACa,UAAW,SAAQ,aAAa;IAE5C,MAAM,CAAC,MAAM,4BAA6B;IAG1C,KAAK,EAAE,SAAS,CAAC;IAGjB,IAAI,EAAE,IAAI,CAAC;IAGX,KAAK,EAAE,SAAS,CAAC;IAEjB,iBAAiB;IAKjB,YAAY;IAgCN,OAAO;CAmBb"}