@omegagrid/editor 0.10.2 → 0.10.5

package/dist/ui/editorZoom.js

@@ -0,0 +1,82 @@
+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 { LitElement, html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+let EditorZoom = class EditorZoom extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._onSlideStart = (_e) => {
+            this.group.hideSelectors();
+        };
+        this._onSlide = (e) => {
+            this.updateText(e.value);
+            this.group.previewZoom(this.translateValue(e.value));
+        };
+        this._onSlideEnd = (e) => {
+            this.group.showSelectors();
+            this.slider.value = Math.round(e.value / 10) * 10;
+            this.updateText(this.slider.value);
+            this.group.zoom = this.translateValue(this.slider.value);
+        };
+        this.render = () => html `
+		<div id="inner">
+			<og-slider
+				cursor="ew-resize"
+				maxValue="200"
+				pageSize="80"
+				value="100"
+				@slideStart="${this._onSlideStart}"
+				@slide="${this._onSlide}"
+				@slideEnd="${this._onSlideEnd}">
+			</og-slider>
+		</div>
+	`;
+    }
+    translateValue(value) {
+        return Math.round(value < 100 ? (50 + value / 2) : value) / 100;
+    }
+    updateText(value) {
+        this.slider.setText(`${Math.round((this.translateValue(value) * 100)).toString()}%`);
+    }
+    async updated() {
+        let value = 1;
+        if (this.group) {
+            await this.group.updateComplete;
+            value = this.group.zoom;
+        }
+        await this.updateComplete;
+        this.slider.value = value * 100;
+        this.updateText(this.slider.value);
+    }
+};
+EditorZoom.styles = [css `
+		:host {
+			display: block;
+		}
+
+		#inner {
+			height: 100%;
+			display: flex;
+			flex-direction: row;
+		}
+
+		og-slider {
+			width: 200px;
+			height: 100%;
+		}
+	`];
+__decorate([
+    property({ type: Object })
+], EditorZoom.prototype, "group", void 0);
+__decorate([
+    query('og-slider')
+], EditorZoom.prototype, "slider", void 0);
+EditorZoom = __decorate([
+    customElement('og-editor-zoom')
+], EditorZoom);
+export { EditorZoom };
+//# sourceMappingURL=editorZoom.js.map

package/dist/ui/editorZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorZoom.js","sourceRoot":"","sources":["../../src/ui/editorZoom.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI5D,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAiCN,kBAAa,GAAG,CAAC,EAAc,EAAE,EAAE;YAClC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;QAC5B,CAAC,CAAA;QAED,aAAQ,GAAG,CAAC,CAAa,EAAE,EAAE;YAC5B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;YACzB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACtD,CAAC,CAAA;QAED,gBAAW,GAAG,CAAC,CAAa,EAAE,EAAE;YAC/B,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;YAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;YAClD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACnC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC1D,CAAC,CAAA;QAcD,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;mBAOD,IAAI,CAAC,aAAa;cACvB,IAAI,CAAC,QAAQ;iBACV,IAAI,CAAC,WAAW;;;EAG/B,CAAC;IAEH,CAAC;IAlDA,cAAc,CAAC,KAAa;QAC3B,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;IACjE,CAAC;IAED,UAAU,CAAC,KAAa;QACvB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IACtF,CAAC;IAkBD,KAAK,CAAC,OAAO;QACZ,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,MAAM,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;YAChC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACzB,CAAC;QAED,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,GAAG,GAAG,CAAC;QAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;;AAzDM,iBAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;EAenB,CAAC,AAfW,CAeV;AAGH;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yCACR;AAGjB;IADC,KAAK,CAAC,WAAW,CAAC;0CACJ;AAvBH,UAAU;IADtB,aAAa,CAAC,gBAAgB,CAAC;GACnB,UAAU,CA2EtB","sourcesContent":["import { GridGroup } from '@omegagrid/grid';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { SlideEvent, Slider } from '@omegagrid/core';\n\n@customElement('og-editor-zoom')\nexport class EditorZoom extends LitElement {\n\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t#inner {\n\t\t\theight: 100%;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t}\n\n\t\tog-slider {\n\t\t\twidth: 200px;\n\t\t\theight: 100%;\n\t\t}\n\t`];\n\n\t@property({type: Object})\n\tgroup: GridGroup;\n\n\t@query('og-slider')\n\tslider: Slider;\n\n\ttranslateValue(value: number) {\n\t\treturn Math.round(value < 100 ? (50 + value / 2) : value) / 100;\n\t}\n\n\tupdateText(value: number) {\n\t\tthis.slider.setText(`${Math.round((this.translateValue(value) * 100)).toString()}%`);\n\t}\n\n\t_onSlideStart = (_e: SlideEvent) => {\n\t\tthis.group.hideSelectors();\n\t}\n\n\t_onSlide = (e: SlideEvent) => {\n\t\tthis.updateText(e.value);\n\t\tthis.group.previewZoom(this.translateValue(e.value));\n\t}\n\n\t_onSlideEnd = (e: SlideEvent) => {\n\t\tthis.group.showSelectors();\n\t\tthis.slider.value = Math.round(e.value / 10) * 10;\n\t\tthis.updateText(this.slider.value);\n\t\tthis.group.zoom = this.translateValue(this.slider.value);\n\t}\n\n\tasync updated() {\n\t\tlet value = 1;\n\t\tif (this.group) {\n\t\t\tawait this.group.updateComplete;\n\t\t\tvalue = this.group.zoom;\n\t\t}\n\n\t\tawait this.updateComplete;\n\t\tthis.slider.value = value * 100;\n\t\tthis.updateText(this.slider.value);\n\t}\n\n\trender = () => html`\n\t\t<div id=\"inner\">\n\t\t\t<og-slider\n\t\t\t\tcursor=\"ew-resize\"\n\t\t\t\tmaxValue=\"200\"\n\t\t\t\tpageSize=\"80\"\n\t\t\t\tvalue=\"100\"\n\t\t\t\t@slideStart=\"${this._onSlideStart}\"\n\t\t\t\t@slide=\"${this._onSlide}\"\n\t\t\t\t@slideEnd=\"${this._onSlideEnd}\">\n\t\t\t</og-slider>\n\t\t</div>\n\t`;\n\n}"]}

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

@@ -0,0 +1,10 @@
+import { Input, OmegaComponent } from "@omegagrid/core";
+export declare class HyperlinkEditor extends OmegaComponent {
+    static styles: import("lit").CSSResultGroup[];
+    href: string;
+    input: Input;
+    focus(): void;
+    updateValue(value: string, dispatchEvent?: boolean): void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=hyperlinkEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyperlinkEditor.d.ts","sourceRoot":"","sources":["../../../src/ui/editors/hyperlinkEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIhE,qBACa,eAAgB,SAAQ,cAAc;IAElD,MAAM,CAAC,MAAM,iCAkBV;IAGH,IAAI,EAAE,MAAM,CAAM;IAGlB,KAAK,EAAE,KAAK,CAAC;IAEb,KAAK;IAKL,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,UAAO;IAO/C,MAAM,6CAcJ;CAEF"}

package/dist/ui/editors/hyperlinkEditor.js

@@ -0,0 +1,70 @@
+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, OmegaComponent } from "@omegagrid/core";
+import { customElement, property, query } from "lit/decorators.js";
+import { html, css } from "lit";
+let HyperlinkEditor = class HyperlinkEditor extends OmegaComponent {
+    constructor() {
+        super(...arguments);
+        this.href = '';
+        this.render = () => html `
+		<div>
+			<og-input 
+				.value="${this.href || ''}"
+				@change="${(e) => this.updateValue(e.value)}">
+			</og-input>
+
+			<og-button
+				id="cross"
+				@click="${() => this.updateValue(null)}"
+				icon="xmark"
+				color="red">
+			</og-button>
+		</div>
+	`;
+    }
+    focus() {
+        this.input?.focus();
+        this.input?.selectAll();
+    }
+    updateValue(value, dispatchEvent = true) {
+        this.href = value;
+        if (dispatchEvent) {
+            this.dispatchEvent(new events.ChangeEvent({ value: this.href }));
+        }
+    }
+};
+HyperlinkEditor.styles = [OmegaComponent.styles, css `
+		:host {
+			width: 200px;
+		}
+
+		div {
+			display: flex;
+			flex-direction: row;
+			padding: 5px;
+		}
+
+		og-input {
+			flex: 1;
+		}
+
+		og-button {
+			flex: 0 20px;
+		}
+	`];
+__decorate([
+    property({ type: String })
+], HyperlinkEditor.prototype, "href", void 0);
+__decorate([
+    query('og-input')
+], HyperlinkEditor.prototype, "input", void 0);
+HyperlinkEditor = __decorate([
+    customElement('og-hyperlinkeditor')
+], HyperlinkEditor);
+export { HyperlinkEditor };
+//# sourceMappingURL=hyperlinkEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyperlinkEditor.js","sourceRoot":"","sources":["../../../src/ui/editors/hyperlinkEditor.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,MAAM,EAAS,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAGzB,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,cAAc;IAA5C;;QAuBN,SAAI,GAAW,EAAE,CAAC;QAiBlB,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;cAGN,IAAI,CAAC,IAAI,IAAI,EAAE;eACd,CAAC,CAA6B,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC;;;;;cAK7D,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;;;;;EAKxC,CAAC;IAEH,CAAC;IA5BA,KAAK;QACJ,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC;QACpB,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC;IACzB,CAAC;IAED,WAAW,CAAC,KAAa,EAAE,aAAa,GAAG,IAAI;QAC9C,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,aAAa,EAAE,CAAC;YACnB,IAAI,CAAC,aAAa,CAAC,IAAI,MAAM,CAAC,WAAW,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC,CAAC;QAChE,CAAC;IACF,CAAC;;AApCM,sBAAM,GAAG,CAAC,cAAc,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;EAkB1C,CAAC,AAlBW,CAkBV;AAGH;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACP;AAGlB;IADC,KAAK,CAAC,UAAU,CAAC;8CACL;AA1BD,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAwD3B","sourcesContent":["import { events, Input, OmegaComponent } from \"@omegagrid/core\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { html, css } from \"lit\";\n\n@customElement('og-hyperlinkeditor')\nexport class HyperlinkEditor extends OmegaComponent {\n\n\tstatic styles = [OmegaComponent.styles, css`\n\t\t:host {\n\t\t\twidth: 200px;\n\t\t}\n\n\t\tdiv {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tpadding: 5px;\n\t\t}\n\n\t\tog-input {\n\t\t\tflex: 1;\n\t\t}\n\n\t\tog-button {\n\t\t\tflex: 0 20px;\n\t\t}\n\t`];\n\n\t@property({type: String})\n\thref: string = '';\n\n\t@query('og-input')\n\tinput: Input;\n\n\tfocus() {\n\t\tthis.input?.focus();\n\t\tthis.input?.selectAll();\n\t}\n\n\tupdateValue(value: string, dispatchEvent = true) {\n\t\tthis.href = value;\n\t\tif (dispatchEvent) {\n\t\t\tthis.dispatchEvent(new events.ChangeEvent({value: this.href}));\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t<div>\n\t\t\t<og-input \n\t\t\t\t.value=\"${this.href || ''}\"\n\t\t\t\t@change=\"${(e: events.ChangeEvent<string>) => this.updateValue(e.value)}\">\n\t\t\t</og-input>\n\n\t\t\t<og-button\n\t\t\t\tid=\"cross\"\n\t\t\t\t@click=\"${() => this.updateValue(null)}\"\n\t\t\t\ticon=\"xmark\"\n\t\t\t\tcolor=\"red\">\n\t\t\t</og-button>\n\t\t</div>\n\t`;\n\n}"]}

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

@@ -0,0 +1,6 @@
+export * from './themeEditor';
+export * from './themeItemEditor';
+export * from './ruleEditor';
+export * from './styleEditor';
+export * from './hyperlinkEditor';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/editors/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC"}

package/dist/ui/editors/index.js

@@ -0,0 +1,6 @@
+export * from './themeEditor';
+export * from './themeItemEditor';
+export * from './ruleEditor';
+export * from './styleEditor';
+export * from './hyperlinkEditor';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/editors/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './themeEditor';\nexport * from './themeItemEditor';\nexport * from './ruleEditor';\nexport * from './styleEditor';\nexport * from './hyperlinkEditor';"]}

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

@@ -0,0 +1,27 @@
+import { ConditionalFormat } from '@omegagrid/grid';
+import { DropdownColorPicker, DropdownList, Input, MenuItem, OmegaComponent } from '@omegagrid/core';
+import { RuleThreshold, StyleForm } from '../forms';
+export declare class RuleEditor extends OmegaComponent {
+    static styles: import("lit").CSSResultGroup[];
+    format: ConditionalFormat;
+    rangesInput: Input;
+    conditionInput: Input;
+    cminColorInput: DropdownColorPicker;
+    cmidColorInput: DropdownColorPicker;
+    cmaxColorInput: DropdownColorPicker;
+    colorInput: DropdownColorPicker;
+    iconList: DropdownList;
+    styleForm: StyleForm;
+    thresholds: NodeListOf<RuleThreshold>;
+    cmin: RuleThreshold;
+    cmid: RuleThreshold;
+    cmax: RuleThreshold;
+    updateFormat(): void;
+    renderFormulaForm: () => import("lit-html").TemplateResult<1>;
+    renderScaleForm: () => import("lit-html").TemplateResult<1>;
+    renderBarForm: () => import("lit-html").TemplateResult<1>;
+    iconItemRenderer: (div: HTMLDivElement, index: number, item: MenuItem) => import("lit-html").TemplateResult<1>;
+    renderIconForm: () => import("lit-html").TemplateResult<1>;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=ruleEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ruleEditor.d.ts","sourceRoot":"","sources":["../../../src/ui/editors/ruleEditor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAuC,MAAM,iBAAiB,CAAC;AAEzF,OAAO,EAAU,mBAAmB,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE7G,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAIpD,qBACa,UAAW,SAAQ,cAAc;IAE7C,MAAM,CAAC,MAAM,iCAEV;IAGH,MAAM,EAAE,iBAAiB,CAAC;IAG1B,WAAW,EAAE,KAAK,CAAC;IAGnB,cAAc,EAAE,KAAK,CAAC;IAGtB,cAAc,EAAE,mBAAmB,CAAC;IAGpC,cAAc,EAAE,mBAAmB,CAAC;IAGpC,cAAc,EAAE,mBAAmB,CAAC;IAGpC,UAAU,EAAE,mBAAmB,CAAC;IAGhC,QAAQ,EAAE,YAAY,CAAC;IAGvB,SAAS,EAAE,SAAS,CAAC;IAGrB,UAAU,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IAGtC,IAAI,EAAE,aAAa,CAAC;IAGpB,IAAI,EAAE,aAAa,CAAC;IAGpB,IAAI,EAAE,aAAa,CAAC;IAEpB,YAAY;IAkDZ,iBAAiB,6CAqBf;IAEF,eAAe,6CAwBb;IAEF,aAAa,6CAgCX;IAEF,gBAAgB,GAAI,KAAK,cAAc,EAAE,OAAO,MAAM,EAAE,MAAM,QAAQ,0CAMpE;IAEF,cAAc,6CA8BZ;IAEF,MAAM,6CAKJ;CACF"}

package/dist/ui/editors/ruleEditor.js

@@ -0,0 +1,251 @@
+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, queryAll } from 'lit/decorators.js';
+import { iconSets } from '@omegagrid/grid';
+import { css, html } from 'lit';
+import { colors, OmegaComponent } from '@omegagrid/core';
+import { msg } from '@omegagrid/localize';
+import { map } from 'lit-html/directives/map.js';
+import { choose } from 'lit-html/directives/choose.js';
+let RuleEditor = class RuleEditor extends OmegaComponent {
+    constructor() {
+        super(...arguments);
+        this.renderFormulaForm = () => html `
+		<div class="row">${msg('Condition')}</div>
+
+		<div class="row">
+			<og-input
+				id="condition"
+				.value="${this.format.condition || ''}"
+				style="width: 100%"
+				@change="${() => this.updateFormat()}">
+			</og-input>
+		</div>
+
+		<div class="row">${msg('Style')}</div>
+
+		<div class="row">
+			<og-editor-styleeditor
+				id="style"
+				.data="${this.format.style || {}}"
+				@change="${() => this.updateFormat()}">
+			</og-editor-styleeditor>
+		</div>
+	`;
+        this.renderScaleForm = () => html `
+		<div class="row">${msg('Colors')}</div>
+		<div class="row" style="display: flex; gap: 4px;">
+			<og-dropdown-colorpicker
+				id="cminColor"
+				style="flex: 1"
+				.value="${colors.css(this.format.cmin?.color)}"
+				@change="${() => this.updateFormat()}">
+			</og-dropdown-colorpicker>
+
+			<og-dropdown-colorpicker
+				id="cmidColor"
+				style="flex: 1"
+				.value="${colors.css(this.format.cmid?.color)}"
+				@change="${() => this.updateFormat()}">
+			</og-dropdown-colorpicker>
+
+			<og-dropdown-colorpicker
+				id="cmaxColor"
+				style="flex: 1"
+				.value="${colors.css(this.format.cmax?.color)}"
+				@change="${() => this.updateFormat()}">
+			</og-dropdown-colorpicker>
+		</div>
+	`;
+        this.renderBarForm = () => html `
+		<div class="row">${msg('Minimum')}</div>
+		<div class="row">
+			<og-editor-rule-threshold
+				id="cmin"
+				.value="${this.format?.cmin}"
+				.allowedTypes="${['auto', 'num', 'percent']}"
+				?first="${false}"
+				@change="${() => this.updateFormat()}">
+			</og-editor-rule-threshold>
+		</div>
+
+		<div class="row">${msg('Maximum')}</div>
+		<div class="row">
+			<og-editor-rule-threshold
+				id="cmax"
+				.value="${this.format?.cmax}" 
+				.allowedTypes="${['auto', 'num', 'percent']}"
+				?first="${false}"
+				@change="${() => this.updateFormat()}">
+			</og-editor-rule-threshold>
+		</div>
+		
+		<div class="row">${msg('Color')}</div>
+		<div class="row" style="display: flex; gap: 4px;">
+			<og-dropdown-colorpicker
+				id="color"
+				style="flex: 1"
+				.value="${colors.css(this.format.color)}"
+				@change="${() => this.updateFormat()}">
+			</og-dropdown-colorpicker>
+		</div>
+	`;
+        this.iconItemRenderer = (div, index, item) => html `
+		<div style="padding-left: 5px">
+			${map(iconSets.get(item.key), icon => html `
+				<og-icon .icon="${icon}"></og-icon>
+			`)}&nbsp;(${item.key})
+		</div>
+	`;
+        this.renderIconForm = () => html `
+		<div class="row">${msg('Icons')}</div>
+		<div class="row" style="display: flex; gap: 4px;">
+			<og-dropdown-list
+				id="icons"
+				style="flex: 1"
+				.items="${Array.from(iconSets.entries()).map(item => ({
+            key: item[0],
+            value: item[0],
+            renderer: this.iconItemRenderer
+        }))}"
+				.value="${this.format.v}"
+				@change="${() => this.updateFormat()}">
+			</og-dropdown-list>
+		</div>
+
+		${this.format.v && iconSets.has(this.format.v) ? html `
+			<div class="row">${msg('Thresholds')}</div>
+			<div style="display: flex; flex-direction: column; gap: 2px; margin-top: 2px">
+				${map(iconSets.get(this.format.v), (_icon, i) => html `
+					<og-editor-rule-threshold
+						class="threshold"
+						.allowedTypes="${['num', 'percent']}"
+						.value="${this.format?.thresh[i]}" 
+						?first="${i == 0}"
+						@change="${() => this.updateFormat()}">
+					</og-editor-rule-threshold>
+				`)}
+			</div>
+		` : ''}
+	`;
+        this.render = () => choose(this.format?.type, [
+            ['formula', this.renderFormulaForm],
+            ['scale', this.renderScaleForm],
+            ['bar', this.renderBarForm],
+            ['icon', this.renderIconForm],
+        ]);
+    }
+    updateFormat() {
+        if (!this.format)
+            return;
+        let update = false;
+        if (this.conditionInput)
+            this.format.condition = this.conditionInput.value;
+        else
+            this.format.condition = null;
+        if (this.styleForm)
+            this.format.style = this.styleForm.data;
+        else
+            this.format.style = null;
+        if (this.cminColorInput) {
+            this.format.cmin = this.format.cmin ?? {};
+            this.format.cmin.t = 'min';
+            this.format.cmin.color = colors.plainHex(this.cminColorInput.value);
+        }
+        else
+            this.format.cmin = null;
+        if (this.cmidColorInput) {
+            this.format.cmid = this.format.cmid ?? {};
+            this.format.cmid.color = colors.plainHex(this.cmidColorInput.value);
+        }
+        else
+            this.format.cmid = null;
+        if (this.cmaxColorInput) {
+            this.format.cmax = this.format.cmax ?? {};
+            this.format.cmax.t = 'max';
+            this.format.cmax.color = colors.plainHex(this.cmaxColorInput.value);
+        }
+        else
+            this.format.cmax = null;
+        if (this.colorInput)
+            this.format.color = colors.plainHex(this.colorInput.value);
+        else
+            this.format.color = null;
+        if (this.iconList) {
+            if (this.format.v != this.iconList.value)
+                update = true;
+            this.format.v = this.iconList.value;
+        }
+        else
+            this.format.v = null;
+        if (this.thresholds)
+            this.format.thresh = Array.from(this.thresholds).map(t => t.value);
+        else
+            this.format.thresh = null;
+        if (this.cmin)
+            this.format.cmin = this.cmin.value;
+        else
+            this.format.cmin = null;
+        if (this.cmid)
+            this.format.cmid = this.cmid.value;
+        else
+            this.format.cmid = null;
+        if (this.cmax)
+            this.format.cmax = this.cmax.value;
+        else
+            this.format.cmax = null;
+        if (update)
+            this.requestUpdate();
+    }
+};
+RuleEditor.styles = [OmegaComponent.styles, css `
+		
+	`];
+__decorate([
+    property({ type: Object })
+], RuleEditor.prototype, "format", void 0);
+__decorate([
+    query('og-input#ranges')
+], RuleEditor.prototype, "rangesInput", void 0);
+__decorate([
+    query('og-input#condition')
+], RuleEditor.prototype, "conditionInput", void 0);
+__decorate([
+    query('og-dropdown-colorpicker#cminColor')
+], RuleEditor.prototype, "cminColorInput", void 0);
+__decorate([
+    query('og-dropdown-colorpicker#cmidColor')
+], RuleEditor.prototype, "cmidColorInput", void 0);
+__decorate([
+    query('og-dropdown-colorpicker#cmaxColor')
+], RuleEditor.prototype, "cmaxColorInput", void 0);
+__decorate([
+    query('og-dropdown-colorpicker#color')
+], RuleEditor.prototype, "colorInput", void 0);
+__decorate([
+    query('og-dropdown-list#icons')
+], RuleEditor.prototype, "iconList", void 0);
+__decorate([
+    query('og-editor-styleeditor#style')
+], RuleEditor.prototype, "styleForm", void 0);
+__decorate([
+    queryAll('og-editor-rule-threshold.threshold')
+], RuleEditor.prototype, "thresholds", void 0);
+__decorate([
+    query('og-editor-rule-threshold#cmin')
+], RuleEditor.prototype, "cmin", void 0);
+__decorate([
+    query('og-editor-rule-threshold#cmid')
+], RuleEditor.prototype, "cmid", void 0);
+__decorate([
+    query('og-editor-rule-threshold#cmax')
+], RuleEditor.prototype, "cmax", void 0);
+RuleEditor = __decorate([
+    customElement('og-editor-ruleeditor')
+], RuleEditor);
+export { RuleEditor };
+//# sourceMappingURL=ruleEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ruleEditor.js","sourceRoot":"","sources":["../../../src/ui/editors/ruleEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement, property, query, queryAll } from 'lit/decorators.js';\nimport { ConditionalFormat, ConditionalFormatIconType, iconSets } from '@omegagrid/grid';\nimport { css, html } from 'lit';\nimport { colors, DropdownColorPicker, DropdownList, Input, MenuItem, OmegaComponent } from '@omegagrid/core';\nimport { msg } from '@omegagrid/localize';\nimport { RuleThreshold, StyleForm } from '../forms';\nimport { map } from 'lit-html/directives/map.js';\nimport { choose } from 'lit-html/directives/choose.js';\n\n@customElement('og-editor-ruleeditor')\nexport class RuleEditor extends OmegaComponent {\n\n\tstatic styles = [OmegaComponent.styles, css`\n\t\t\n\t`];\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\t@query('og-dropdown-colorpicker#cminColor')\n\tcminColorInput: DropdownColorPicker;\n\n\t@query('og-dropdown-colorpicker#cmidColor')\n\tcmidColorInput: DropdownColorPicker;\n\n\t@query('og-dropdown-colorpicker#cmaxColor')\n\tcmaxColorInput: DropdownColorPicker;\n\n\t@query('og-dropdown-colorpicker#color')\n\tcolorInput: DropdownColorPicker;\n\n\t@query('og-dropdown-list#icons')\n\ticonList: DropdownList;\n\n\t@query('og-editor-styleeditor#style')\n\tstyleForm: StyleForm;\n\n\t@queryAll('og-editor-rule-threshold.threshold')\n\tthresholds: NodeListOf<RuleThreshold>;\n\n\t@query('og-editor-rule-threshold#cmin')\n\tcmin: RuleThreshold;\n\n\t@query('og-editor-rule-threshold#cmid')\n\tcmid: RuleThreshold;\n\n\t@query('og-editor-rule-threshold#cmax')\n\tcmax: RuleThreshold;\n\n\tupdateFormat() {\n\t\tif (!this.format) return;\n\t\tlet update = false;\n\n\t\tif (this.conditionInput) this.format.condition = this.conditionInput.value;\n\t\telse this.format.condition = null;\n\n\t\tif (this.styleForm) this.format.style = this.styleForm.data;\n\t\telse this.format.style = null;\n\n\t\tif (this.cminColorInput) {\n\t\t\tthis.format.cmin = this.format.cmin ?? {};\n\t\t\tthis.format.cmin.t = 'min';\n\t\t\tthis.format.cmin.color = colors.plainHex(this.cminColorInput.value);\n\t\t} else this.format.cmin = null;\n\n\t\tif (this.cmidColorInput) {\n\t\t\tthis.format.cmid = this.format.cmid ?? {};\n\t\t\tthis.format.cmid.color = colors.plainHex(this.cmidColorInput.value);\n\t\t} else this.format.cmid = null;\n\n\t\tif (this.cmaxColorInput) {\n\t\t\tthis.format.cmax = this.format.cmax ?? {};\n\t\t\tthis.format.cmax.t = 'max';\n\t\t\tthis.format.cmax.color = colors.plainHex(this.cmaxColorInput.value);\n\t\t} else this.format.cmax = null;\n\n\t\tif (this.colorInput) this.format.color = colors.plainHex(this.colorInput.value);\n\t\telse this.format.color = null;\n\n\t\tif (this.iconList) {\n\t\t\tif (this.format.v != this.iconList.value) update = true;\n\t\t\tthis.format.v = this.iconList.value;\t\n\t\t} else this.format.v = null;\n\n\t\tif (this.thresholds) this.format.thresh = Array.from(this.thresholds).map(t => t.value);\n\t\telse this.format.thresh = null;\n\n\t\tif (this.cmin) this.format.cmin = this.cmin.value;\n\t\telse this.format.cmin = null;\n\n\t\tif (this.cmid) this.format.cmid = this.cmid.value;\n\t\telse this.format.cmid = null;\n\n\t\tif (this.cmax) this.format.cmax = this.cmax.value;\n\t\telse this.format.cmax = null;\n\n\t\tif (update) this.requestUpdate();\n\t}\n\n\trenderFormulaForm = () => html`\n\t\t<div class=\"row\">${msg('Condition')}</div>\n\n\t\t<div class=\"row\">\n\t\t\t<og-input\n\t\t\t\tid=\"condition\"\n\t\t\t\t.value=\"${this.format.condition || ''}\"\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<div class=\"row\">${msg('Style')}</div>\n\n\t\t<div class=\"row\">\n\t\t\t<og-editor-styleeditor\n\t\t\t\tid=\"style\"\n\t\t\t\t.data=\"${this.format.style || {}}\"\n\t\t\t\t@change=\"${() => this.updateFormat()}\">\n\t\t\t</og-editor-styleeditor>\n\t\t</div>\n\t`;\n\n\trenderScaleForm = () => html`\n\t\t<div class=\"row\">${msg('Colors')}</div>\n\t\t<div class=\"row\" style=\"display: flex; gap: 4px;\">\n\t\t\t<og-dropdown-colorpicker\n\t\t\t\tid=\"cminColor\"\n\t\t\t\tstyle=\"flex: 1\"\n\t\t\t\t.value=\"${colors.css(this.format.cmin?.color)}\"\n\t\t\t\t@change=\"${() => this.updateFormat()}\">\n\t\t\t</og-dropdown-colorpicker>\n\n\t\t\t<og-dropdown-colorpicker\n\t\t\t\tid=\"cmidColor\"\n\t\t\t\tstyle=\"flex: 1\"\n\t\t\t\t.value=\"${colors.css(this.format.cmid?.color)}\"\n\t\t\t\t@change=\"${() => this.updateFormat()}\">\n\t\t\t</og-dropdown-colorpicker>\n\n\t\t\t<og-dropdown-colorpicker\n\t\t\t\tid=\"cmaxColor\"\n\t\t\t\tstyle=\"flex: 1\"\n\t\t\t\t.value=\"${colors.css(this.format.cmax?.color)}\"\n\t\t\t\t@change=\"${() => this.updateFormat()}\">\n\t\t\t</og-dropdown-colorpicker>\n\t\t</div>\n\t`;\n\n\trenderBarForm = () => html`\n\t\t<div class=\"row\">${msg('Minimum')}</div>\n\t\t<div class=\"row\">\n\t\t\t<og-editor-rule-threshold\n\t\t\t\tid=\"cmin\"\n\t\t\t\t.value=\"${this.format?.cmin}\"\n\t\t\t\t.allowedTypes=\"${['auto', 'num', 'percent']}\"\n\t\t\t\t?first=\"${false}\"\n\t\t\t\t@change=\"${() => this.updateFormat()}\">\n\t\t\t</og-editor-rule-threshold>\n\t\t</div>\n\n\t\t<div class=\"row\">${msg('Maximum')}</div>\n\t\t<div class=\"row\">\n\t\t\t<og-editor-rule-threshold\n\t\t\t\tid=\"cmax\"\n\t\t\t\t.value=\"${this.format?.cmax}\" \n\t\t\t\t.allowedTypes=\"${['auto', 'num', 'percent']}\"\n\t\t\t\t?first=\"${false}\"\n\t\t\t\t@change=\"${() => this.updateFormat()}\">\n\t\t\t</og-editor-rule-threshold>\n\t\t</div>\n\t\t\n\t\t<div class=\"row\">${msg('Color')}</div>\n\t\t<div class=\"row\" style=\"display: flex; gap: 4px;\">\n\t\t\t<og-dropdown-colorpicker\n\t\t\t\tid=\"color\"\n\t\t\t\tstyle=\"flex: 1\"\n\t\t\t\t.value=\"${colors.css(this.format.color)}\"\n\t\t\t\t@change=\"${() => this.updateFormat()}\">\n\t\t\t</og-dropdown-colorpicker>\n\t\t</div>\n\t`;\n\n\ticonItemRenderer = (div: HTMLDivElement, index: number, item: MenuItem) => html`\n\t\t<div style=\"padding-left: 5px\">\n\t\t\t${map(iconSets.get(item.key as ConditionalFormatIconType), icon => html`\n\t\t\t\t<og-icon .icon=\"${icon}\"></og-icon>\n\t\t\t`)}&nbsp;(${item.key})\n\t\t</div>\n\t`;\n\n\trenderIconForm = () => html`\n\t\t<div class=\"row\">${msg('Icons')}</div>\n\t\t<div class=\"row\" style=\"display: flex; gap: 4px;\">\n\t\t\t<og-dropdown-list\n\t\t\t\tid=\"icons\"\n\t\t\t\tstyle=\"flex: 1\"\n\t\t\t\t.items=\"${Array.from(iconSets.entries()).map(item => ({\n\t\t\t\t\tkey: item[0],\n\t\t\t\t\tvalue: item[0],\n\t\t\t\t\trenderer: this.iconItemRenderer\n\t\t\t\t}))}\"\n\t\t\t\t.value=\"${this.format.v as string}\"\n\t\t\t\t@change=\"${() => this.updateFormat()}\">\n\t\t\t</og-dropdown-list>\n\t\t</div>\n\n\t\t${this.format.v && iconSets.has(this.format.v as ConditionalFormatIconType) ? html`\n\t\t\t<div class=\"row\">${msg('Thresholds')}</div>\n\t\t\t<div style=\"display: flex; flex-direction: column; gap: 2px; margin-top: 2px\">\n\t\t\t\t${map(iconSets.get(this.format.v as ConditionalFormatIconType), (_icon, i) => html`\n\t\t\t\t\t<og-editor-rule-threshold\n\t\t\t\t\t\tclass=\"threshold\"\n\t\t\t\t\t\t.allowedTypes=\"${['num', 'percent']}\"\n\t\t\t\t\t\t.value=\"${this.format?.thresh[i]}\" \n\t\t\t\t\t\t?first=\"${i == 0}\"\n\t\t\t\t\t\t@change=\"${() => this.updateFormat()}\">\n\t\t\t\t\t</og-editor-rule-threshold>\n\t\t\t\t`)}\n\t\t\t</div>\n\t\t` : ''}\n\t`;\n\n\trender = () => choose(this.format?.type, [\n\t\t['formula', this.renderFormulaForm],\n\t\t['scale', this.renderScaleForm],\n\t\t['bar', this.renderBarForm],\n\t\t['icon', this.renderIconForm],\n\t])\n}"]}

package/dist/ui/editors/styleEditor.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 StyleEditor 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=styleEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styleEditor.d.ts","sourceRoot":"","sources":["../../../src/ui/editors/styleEditor.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;AA+C1D,qBACa,WAAY,SAAQ,UAAU;IAE1C,MAAM,CAAC,MAAM,4BAcV;IAGH,IAAI,EAAE,KAAK,CAAM;IAGjB,OAAO,EAAE,OAAO,CAAC;IAEjB,oBAAoB,CAAC,CAAC,EAAE,KAAK;IAW7B,iBAAiB;IAIjB,SAAS,GAAI,GAAG,OAAO,CAAC,WAAW,UA2BlC;IAED,MAAM,6CAMJ;CAEF"}