@omegagrid/editor 0.10.90 → 0.10.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ui/editors/ruleEditor.d.ts.map +1 -1
- package/dist/ui/editors/ruleEditor.js +2 -1
- package/dist/ui/editors/ruleEditor.js.map +1 -1
- package/dist/ui/editors/themeEditor.d.ts +5 -0
- package/dist/ui/editors/themeEditor.d.ts.map +1 -1
- package/dist/ui/editors/themeEditor.js +10 -0
- package/dist/ui/editors/themeEditor.js.map +1 -1
- package/dist/ui/editors/themeItemEditor.d.ts +4 -0
- package/dist/ui/editors/themeItemEditor.d.ts.map +1 -1
- package/dist/ui/editors/themeItemEditor.js +42 -5
- package/dist/ui/editors/themeItemEditor.js.map +1 -1
- package/dist/ui/sidebars/themeEditorSidebar.d.ts.map +1 -1
- package/dist/ui/sidebars/themeEditorSidebar.js +6 -1
- package/dist/ui/sidebars/themeEditorSidebar.js.map +1 -1
- package/package.json +10 -10
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,EAAU,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErH,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"}
|
|
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
7
|
import { customElement, property, query, queryAll } from 'lit/decorators.js';
|
|
8
8
|
import { iconSets } from '@omegagrid/grid';
|
|
9
9
|
import { css, html } from 'lit';
|
|
10
|
-
import { colors, OmegaComponent } from '@omegagrid/core';
|
|
10
|
+
import { colors, events, OmegaComponent } from '@omegagrid/core';
|
|
11
11
|
import { msg } from '@omegagrid/localize';
|
|
12
12
|
import { map } from 'lit-html/directives/map.js';
|
|
13
13
|
import { choose } from 'lit-html/directives/choose.js';
|
|
@@ -191,6 +191,7 @@ let RuleEditor = class RuleEditor extends OmegaComponent {
|
|
|
191
191
|
this.format.cmax = this.cmax.value;
|
|
192
192
|
if (update)
|
|
193
193
|
this.requestUpdate();
|
|
194
|
+
this.dispatchEvent(new events.ChangeEvent(this.format));
|
|
194
195
|
}
|
|
195
196
|
};
|
|
196
197
|
RuleEditor.styles = [OmegaComponent.styles, css `
|
|
@@ -1 +1 @@
|
|
|
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\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\tthis.format.cmin = null\n\t\tthis.format.cmid = null\n\t\tthis.format.cmax = null\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}\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}\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}\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;\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\tif (this.cmid) this.format.cmid = this.cmid.value;\n\t\tif (this.cmax) this.format.cmax = this.cmax.value;\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\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`)} (${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}\n"]}
|
|
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, events, 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\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\tthis.format.cmin = null\n\t\tthis.format.cmid = null\n\t\tthis.format.cmax = null\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}\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}\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}\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;\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\tif (this.cmid) this.format.cmid = this.cmid.value;\n\t\tif (this.cmax) this.format.cmax = this.cmax.value;\n\n\t\tif (update) this.requestUpdate();\n\t\tthis.dispatchEvent(new events.ChangeEvent(this.format));\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\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`)} (${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}\n"]}
|
|
@@ -14,6 +14,11 @@ export declare class ThemeEditor extends OmegaComponent {
|
|
|
14
14
|
updateList(type: ThemeItemType): void;
|
|
15
15
|
moveItemUp(index: number, type: ThemeItemType): void;
|
|
16
16
|
moveItemDown(index: number, type: ThemeItemType): void;
|
|
17
|
+
/**
|
|
18
|
+
* Notifies the host about any edit of the theme object. The theme is
|
|
19
|
+
* mutated in place, so this event is the only change signal the host gets.
|
|
20
|
+
*/
|
|
21
|
+
dispatchThemeChange(): void;
|
|
17
22
|
moveItem(fromIndex: number, toIndex: number, type: ThemeItemType): void;
|
|
18
23
|
deleteItem(index: number, type: ThemeItemType): void;
|
|
19
24
|
addItem(type: ThemeItemType): void;
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;;;OAGG;IACH,mBAAmB;IAInB,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa;IAShE,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa;IAS7C,OAAO,CAAC,IAAI,EAAE,aAAa;IAS3B,eAAe,GAAI,IAAI,aAAa,kBAgBnC;IAED,MAAM,6CAuBJ;CAEF"}
|
|
@@ -96,6 +96,13 @@ let ThemeEditor = class ThemeEditor extends OmegaComponent {
|
|
|
96
96
|
return;
|
|
97
97
|
this.moveItem(index, index + 1, type);
|
|
98
98
|
}
|
|
99
|
+
/**
|
|
100
|
+
* Notifies the host about any edit of the theme object. The theme is
|
|
101
|
+
* mutated in place, so this event is the only change signal the host gets.
|
|
102
|
+
*/
|
|
103
|
+
dispatchThemeChange() {
|
|
104
|
+
this.dispatchEvent(new CustomEvent('theme.change', { detail: { theme: this.theme }, bubbles: true, composed: true }));
|
|
105
|
+
}
|
|
99
106
|
moveItem(fromIndex, toIndex, type) {
|
|
100
107
|
const items = this.theme[type];
|
|
101
108
|
if (!this.theme[type])
|
|
@@ -103,6 +110,7 @@ let ThemeEditor = class ThemeEditor extends OmegaComponent {
|
|
|
103
110
|
const item = items.splice(fromIndex, 1)[0];
|
|
104
111
|
items.splice(toIndex, 0, item);
|
|
105
112
|
this.updateList(type);
|
|
113
|
+
this.dispatchThemeChange();
|
|
106
114
|
}
|
|
107
115
|
deleteItem(index, type) {
|
|
108
116
|
const items = this.theme[type];
|
|
@@ -111,6 +119,7 @@ let ThemeEditor = class ThemeEditor extends OmegaComponent {
|
|
|
111
119
|
items.splice(index, 1);
|
|
112
120
|
this.theme[type] = items;
|
|
113
121
|
this.updateList(type);
|
|
122
|
+
this.dispatchThemeChange();
|
|
114
123
|
}
|
|
115
124
|
addItem(type) {
|
|
116
125
|
const items = this.theme[type] ?? [];
|
|
@@ -118,6 +127,7 @@ let ThemeEditor = class ThemeEditor extends OmegaComponent {
|
|
|
118
127
|
this.theme[type] = items;
|
|
119
128
|
this.updateList(type);
|
|
120
129
|
this.lists[type].scrollToIndex(items.length - 1);
|
|
130
|
+
this.dispatchThemeChange();
|
|
121
131
|
}
|
|
122
132
|
};
|
|
123
133
|
ThemeEditor.styles = [OmegaComponent.styles, css `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeEditor.js","sourceRoot":"","sources":["../../../src/ui/editors/themeEditor.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,EAAE,GAAG,EAAiB,cAAc,EAAgB,MAAM,iBAAiB,CAAC;AACnF,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAOnC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,cAAc;IAAxC;;QA6BN,qBAAgB,GAAG,CAAC,IAAmB,EAAE,EAAE,CAAC,CAAC,GAAmB,EAAE,KAAa,EAAE,EAAE;YAClF,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;YACtC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAClD,IAAI,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAC9E,IAAI,CAAC,MAAM,EAAE,CAAC;gBACb,MAAM,GAAG,GAAG,CAAC,aAAa,CAAkB,qBAAqB,EAAE;oBAClE,KAAK,EAAE,KAAK;oBACZ,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;oBAClC,QAAQ,EAAE,IAAI;oBACd,MAAM,EAAE,IAAI;iBACZ,CAAC,CAAC;gBACH,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC;YACtC,CAAC;YACD,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACf,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QACzB,CAAC,CAAA;
|
|
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\t/**\n\t * Notifies the host about any edit of the theme object. The theme is\n\t * mutated in place, so this event is the only change signal the host gets.\n\t */\n\tdispatchThemeChange() {\n\t\tthis.dispatchEvent(new CustomEvent('theme.change', {detail: {theme: this.theme}, bubbles: true, composed: true}));\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\tthis.dispatchThemeChange();\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\tthis.dispatchThemeChange();\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\tthis.dispatchThemeChange();\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}"]}
|
|
@@ -16,6 +16,10 @@ export declare class ThemeItemEditor extends OmegaComponent {
|
|
|
16
16
|
willUpdate(): void;
|
|
17
17
|
updateRuleType(type: ConditionalFormatType): void;
|
|
18
18
|
_onStyleChange: (e: events.ChangeEvent<Style>) => void;
|
|
19
|
+
_dispatchChange: () => void;
|
|
20
|
+
/** empty input deletes the property - the matchers test level/index > -1 and a truthy name */
|
|
21
|
+
_onMatcherChange(key: 'level' | 'index' | 'height' | 'width', value: number | string | null): void;
|
|
22
|
+
_onNameChange: (e: events.ChangeEvent<string>) => void;
|
|
19
23
|
render: () => import("lit-html").TemplateResult<1>;
|
|
20
24
|
}
|
|
21
25
|
export {};
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,UAG7C;IAED,eAAe,aAEd;IAED,8FAA8F;IAC9F,gBAAgB,CAAC,GAAG,EAAE,OAAO,GAAC,OAAO,GAAC,QAAQ,GAAC,OAAO,EAAE,KAAK,EAAE,MAAM,GAAC,MAAM,GAAC,IAAI;IAMjF,aAAa,GAAI,GAAG,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,UAI7C;IAED,MAAM,6CAwFJ;CACF"}
|
|
@@ -20,6 +20,17 @@ let ThemeItemEditor = class ThemeItemEditor extends OmegaComponent {
|
|
|
20
20
|
super(...arguments);
|
|
21
21
|
this._onStyleChange = (e) => {
|
|
22
22
|
this.themeItem.style = e.value;
|
|
23
|
+
this._dispatchChange();
|
|
24
|
+
};
|
|
25
|
+
this._dispatchChange = () => {
|
|
26
|
+
this.editor?.dispatchThemeChange();
|
|
27
|
+
};
|
|
28
|
+
this._onNameChange = (e) => {
|
|
29
|
+
if (e.value == null || e.value === '')
|
|
30
|
+
delete this.themeItem.name;
|
|
31
|
+
else
|
|
32
|
+
this.themeItem.name = e.value;
|
|
33
|
+
this._dispatchChange();
|
|
23
34
|
};
|
|
24
35
|
this.render = () => html `
|
|
25
36
|
<div class="header">
|
|
@@ -58,14 +69,31 @@ let ThemeItemEditor = class ThemeItemEditor extends OmegaComponent {
|
|
|
58
69
|
|
|
59
70
|
<div class="row">
|
|
60
71
|
<label>${msg('Level')}</label>
|
|
61
|
-
<og-numericinput buttons min="0"
|
|
72
|
+
<og-numericinput buttons min="0"
|
|
73
|
+
.value="${this.themeItem?.level}"
|
|
74
|
+
@change="${(e) => this._onMatcherChange('level', e.value)}">
|
|
75
|
+
</og-numericinput>
|
|
62
76
|
<label>${msg('Index')}</label>
|
|
63
|
-
<og-numericinput buttons min="0"
|
|
77
|
+
<og-numericinput buttons min="0"
|
|
78
|
+
.value="${this.themeItem?.index}"
|
|
79
|
+
@change="${(e) => this._onMatcherChange('index', e.value)}">
|
|
80
|
+
</og-numericinput>
|
|
64
81
|
</div>
|
|
65
82
|
|
|
66
83
|
<div class="row">
|
|
67
84
|
<label>${msg('Name')}</label>
|
|
68
|
-
<og-input
|
|
85
|
+
<og-input
|
|
86
|
+
.value="${this.themeItem?.name ?? ''}"
|
|
87
|
+
@change="${this._onNameChange}">
|
|
88
|
+
</og-input>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<div class="row">
|
|
92
|
+
<label>${msg(this.itemType == 'rows' ? 'Height' : 'Width')}</label>
|
|
93
|
+
<og-numericinput buttons min="0"
|
|
94
|
+
.value="${this.itemType == 'rows' ? this.themeItem?.height : this.themeItem?.width}"
|
|
95
|
+
@change="${(e) => this._onMatcherChange(this.itemType == 'rows' ? 'height' : 'width', e.value)}">
|
|
96
|
+
</og-numericinput>
|
|
69
97
|
</div>
|
|
70
98
|
` : ''}
|
|
71
99
|
|
|
@@ -75,14 +103,15 @@ let ThemeItemEditor = class ThemeItemEditor extends OmegaComponent {
|
|
|
75
103
|
<og-dropdown-list
|
|
76
104
|
.value = "${this.themeItem?.type ?? null}"
|
|
77
105
|
.items="${ruleTypes}"
|
|
78
|
-
@change="${(e) => this.updateRuleType(e.value)}">
|
|
106
|
+
@change="${(e) => { this.updateRuleType(e.value); this._dispatchChange(); }}">
|
|
79
107
|
</og-dropdown-list>
|
|
80
108
|
</div>
|
|
81
109
|
|
|
82
110
|
<div>
|
|
83
111
|
${this.themeItem?.type ? html `
|
|
84
112
|
<og-editor-ruleeditor
|
|
85
|
-
.format="${this.themeItem}"
|
|
113
|
+
.format="${this.themeItem}"
|
|
114
|
+
@change="${this._dispatchChange}">
|
|
86
115
|
</og-editor-ruleeditor>
|
|
87
116
|
` : html `
|
|
88
117
|
<og-editor-styleeditor
|
|
@@ -106,6 +135,14 @@ let ThemeItemEditor = class ThemeItemEditor extends OmegaComponent {
|
|
|
106
135
|
this.requestUpdate();
|
|
107
136
|
this.ruleEditor?.requestUpdate();
|
|
108
137
|
}
|
|
138
|
+
/** empty input deletes the property - the matchers test level/index > -1 and a truthy name */
|
|
139
|
+
_onMatcherChange(key, value) {
|
|
140
|
+
if (value == null || value === '')
|
|
141
|
+
delete this.themeItem[key];
|
|
142
|
+
else
|
|
143
|
+
this.themeItem[key] = Number(value);
|
|
144
|
+
this._dispatchChange();
|
|
145
|
+
}
|
|
109
146
|
};
|
|
110
147
|
ThemeItemEditor.styles = [OmegaComponent.styles, css `
|
|
111
148
|
:host {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeItemEditor.js","sourceRoot":"","sources":["../../../src/ui/editors/themeItemEditor.ts"],"names":[],"mappings":"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","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"]}
|
|
1
|
+
{"version":3,"file":"themeItemEditor.js","sourceRoot":"","sources":["../../../src/ui/editors/themeItemEditor.ts"],"names":[],"mappings":"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","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\tthis._dispatchChange();\n\t}\n\n\t_dispatchChange = () => {\n\t\tthis.editor?.dispatchThemeChange();\n\t}\n\n\t/** empty input deletes the property - the matchers test level/index > -1 and a truthy name */\n\t_onMatcherChange(key: 'level'|'index'|'height'|'width', value: number|string|null) {\n\t\tif (value == null || value === '') delete this.themeItem[key];\n\t\telse this.themeItem[key] = Number(value);\n\t\tthis._dispatchChange();\n\t}\n\n\t_onNameChange = (e: events.ChangeEvent<string>) => {\n\t\tif (e.value == null || e.value === '') delete this.themeItem.name;\n\t\telse this.themeItem.name = e.value;\n\t\tthis._dispatchChange();\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\"\n\t\t\t\t\t.value=\"${this.themeItem?.level}\"\n\t\t\t\t\t@change=\"${(e: events.ChangeEvent<number>) => this._onMatcherChange('level', e.value)}\">\n\t\t\t\t</og-numericinput>\n\t\t\t\t<label>${msg('Index')}</label>\n\t\t\t\t<og-numericinput buttons min=\"0\"\n\t\t\t\t\t.value=\"${this.themeItem?.index}\"\n\t\t\t\t\t@change=\"${(e: events.ChangeEvent<number>) => this._onMatcherChange('index', e.value)}\">\n\t\t\t\t</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\n\t\t\t\t\t.value=\"${this.themeItem?.name ?? ''}\"\n\t\t\t\t\t@change=\"${this._onNameChange}\">\n\t\t\t\t</og-input>\n\t\t\t</div>\n\n\t\t\t<div class=\"row\">\n\t\t\t\t<label>${msg(this.itemType == 'rows' ? 'Height' : 'Width')}</label>\n\t\t\t\t<og-numericinput buttons min=\"0\"\n\t\t\t\t\t.value=\"${this.itemType == 'rows' ? this.themeItem?.height : this.themeItem?.width}\"\n\t\t\t\t\t@change=\"${(e: events.ChangeEvent<number>) => this._onMatcherChange(this.itemType == 'rows' ? 'height' : 'width', e.value)}\">\n\t\t\t\t</og-numericinput>\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); this._dispatchChange(); }}\">\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\t@change=\"${this._dispatchChange}\">\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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeEditorSidebar.d.ts","sourceRoot":"","sources":["../../../src/ui/sidebars/themeEditorSidebar.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAa,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,qBACa,kBAAmB,SAAQ,WAAW;IAElD,MAAM,CAAC,MAAM,+DA6BV;IAGH,SAAS,EAAE,YAAY,CAAC;IAGxB,KAAK,EAAE,UAAU,CAAC;IAElB,UAAU;IAMV,OAAO;IAaP,QAAQ;IAUR,aAAa,aAGZ;IAED,MAAM,
|
|
1
|
+
{"version":3,"file":"themeEditorSidebar.d.ts","sourceRoot":"","sources":["../../../src/ui/sidebars/themeEditorSidebar.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAa,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,qBACa,kBAAmB,SAAQ,WAAW;IAElD,MAAM,CAAC,MAAM,+DA6BV;IAGH,SAAS,EAAE,YAAY,CAAC;IAGxB,KAAK,EAAE,UAAU,CAAC;IAElB,UAAU;IAMV,OAAO;IAaP,QAAQ;IAUR,aAAa,aAGZ;IAED,MAAM,6CAyBJ;CAEF"}
|
|
@@ -33,7 +33,12 @@ let ThemeEditorSidebar = class ThemeEditorSidebar extends BaseSidebar {
|
|
|
33
33
|
</div>
|
|
34
34
|
|
|
35
35
|
<div class="body">
|
|
36
|
-
<og-input
|
|
36
|
+
<og-input
|
|
37
|
+
.value="${this.theme?.name}"
|
|
38
|
+
style="flex: 0 20px"
|
|
39
|
+
@change="${(e) => { if (this.theme)
|
|
40
|
+
this.theme.name = e.value; }}">
|
|
41
|
+
</og-input>
|
|
37
42
|
<og-editor-theme .theme="${this.theme}" style="flex: 1"></og-editor-theme>
|
|
38
43
|
</div>
|
|
39
44
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeEditorSidebar.js","sourceRoot":"","sources":["../../../src/ui/sidebars/themeEditorSidebar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAGnC,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,WAAW;IAA5C;;QAoEN,kBAAa,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YAC9C,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;QACrB,CAAC,CAAA;QAED,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;eAGL,CAAC,CAAY,EAAE,EAAE;YAC3B,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACtE,CAAC;;cAES,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;;;wBAG3C,IAAI,CAAC,aAAa;6DACmB,GAAG,CAAC,OAAO,CAAC;;;2DAGd,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE
|
|
1
|
+
{"version":3,"file":"themeEditorSidebar.js","sourceRoot":"","sources":["../../../src/ui/sidebars/themeEditorSidebar.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement, property, query } from 'lit/decorators.js';\nimport { html, css } from 'lit';\nimport { BaseSidebar } from './baseSidebar';\nimport { TreeDropdown, TreeEvent } from '@omegagrid/tree';\nimport { TableTheme } from '@omegagrid/grid';\nimport { msg } from '@omegagrid/localize';\n\n@customElement('og-editor-themesidebar')\nexport class ThemeEditorSidebar extends BaseSidebar {\n\n\tstatic styles = [BaseSidebar.styles, css`\n\t\t:host {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t.header {\n\t\t\tflex: 0;\n\t\t\tpadding: 0 4px 4px;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tgap: 4px;\n\t\t}\n\n\t\t.body {\n\t\t\tflex: 1;\n\t\t\tpadding: 0 4px 4px;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\tog-editor-theme {\n\t\t\tmargin-top: 4px;\n\t\t}\n\n\t\tog-input {\n\t\t\tdisplay: block;\n\t\t}\n\t`];\n\n\t@query('og-tree-dropdown')\n\tthemeList: TreeDropdown;\n\n\t@property({type: Object})\n\ttheme: TableTheme;\n\n\twillUpdate() {\n\t\tif (this.theme == null && this.group?.model?.themes?.size) {\n\t\t\tthis.theme = [...this.group.model.themes.values()][0];\n\t\t}\n\t}\n\n\tupdated() {\n\t\tif (this.group?.model?.themes) {\n\t\t\tthis.themeList.setSourceData([...this.group.model.themes.values()].map((theme) => ({\n\t\t\t\tk: theme.name, \n\t\t\t\tv: theme.name\n\t\t\t})), {\n\t\t\t\tcheckboxes: false,\n\t\t\t\tselectMode: 'single',\n\t\t\t\tautoClose: true,\n\t\t\t});\n\t\t}\n\t}\n\n\taddTheme() {\n\t\tconst model = this.group?.model;\n\t\tif (!model) return;\n\t\tlet i = model.themes.size + 1;\n\t\twhile (model.themes.has(`Theme ${i}`)) ++i;\n\t\tconst theme = {name: `Theme ${i}`} as TableTheme;\n\t\tmodel.themes.set(theme.name, theme);\n\t\tthis.theme = theme;\n\t}\n\n\t_onApplyClick = () => {\n\t\tthis.grid?.model.applyTheme(this.theme, true);\n\t\tthis.grid.refresh();\n\t}\n\n\trender = () => html`\n\t\t<div class=\"header\">\n\t\t\t<og-tree-dropdown\n\t\t\t\t@change=\"${(e: TreeEvent) => {\n\t\t\t\t\tthis.theme = e.node ? this.group.model.themes.get(e.node.key) : null;\n\t\t\t\t}}\"\n\t\t\t\tstyle=\"flex: 1\" \n\t\t\t\t.value=\"${this.theme == null ? null : [[this.theme.name, 0, 1]]}\">\n\t\t\t</og-tree-dropdown>\n\n\t\t\t<og-button @click=\"${this._onApplyClick}\">\n\t\t\t\t<div slot=\"content\"><og-icon icon=\"refresh\"></og-icon> ${msg('Apply')}</div>\n\t\t\t</og-button>\n\t\t\t\n\t\t\t<og-button icon=\"plus\" style=\"flex: 0 0 20px\" @click=\"${() => this.addTheme()}\"></og-button>\n\t\t</div>\n\n\t\t<div class=\"body\">\n\t\t\t<og-input\n\t\t\t\t.value=\"${this.theme?.name}\"\n\t\t\t\tstyle=\"flex: 0 20px\"\n\t\t\t\t@change=\"${(e: {value?: string}) => { if (this.theme) this.theme.name = e.value; }}\">\n\t\t\t</og-input>\n\t\t\t<og-editor-theme .theme=\"${this.theme}\" style=\"flex: 1\"></og-editor-theme>\n\t\t</div>\n\t`;\n\n}"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omegagrid/editor",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.92",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"description": "Spreadsheet editor",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -27,15 +27,15 @@
|
|
|
27
27
|
"_prepublish": "yarn test && yarn lint"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@omegagrid/commands": "^0.10.
|
|
31
|
-
"@omegagrid/core": "^0.10.
|
|
32
|
-
"@omegagrid/form": "^0.10.
|
|
33
|
-
"@omegagrid/grid": "^0.10.
|
|
34
|
-
"@omegagrid/localize": "^0.10.
|
|
35
|
-
"@omegagrid/statusbar": "^0.10.
|
|
36
|
-
"@omegagrid/tabs": "^0.10.
|
|
37
|
-
"@omegagrid/toolbar": "^0.10.
|
|
38
|
-
"@omegagrid/tree": "^0.10.
|
|
30
|
+
"@omegagrid/commands": "^0.10.92",
|
|
31
|
+
"@omegagrid/core": "^0.10.92",
|
|
32
|
+
"@omegagrid/form": "^0.10.92",
|
|
33
|
+
"@omegagrid/grid": "^0.10.92",
|
|
34
|
+
"@omegagrid/localize": "^0.10.92",
|
|
35
|
+
"@omegagrid/statusbar": "^0.10.92",
|
|
36
|
+
"@omegagrid/tabs": "^0.10.92",
|
|
37
|
+
"@omegagrid/toolbar": "^0.10.92",
|
|
38
|
+
"@omegagrid/tree": "^0.10.92",
|
|
39
39
|
"lit": "^3.1.1",
|
|
40
40
|
"lit-html": "^3.1.1",
|
|
41
41
|
"ts-debounce": "^4.0.0"
|