@omegagrid/editor 0.2.5

package/dist/ui/forms/ruleForm.js

@@ -0,0 +1,152 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RuleForm = void 0;
+const core_1 = require("@omegagrid/core");
+const decorators_js_1 = require("lit/decorators.js");
+const grid_1 = require("@omegagrid/grid");
+const lit_1 = require("lit");
+const ruleForm_style_1 = require("./ruleForm.style");
+let RuleForm = class RuleForm extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.updateList = () => {
+            this.list.size = this.model.conditionalFormats.formats.length;
+            this.list.renderItems(true);
+        };
+        this._onApplyClick = () => {
+            this.model.clearCalculatedStyles();
+            this.grid.rendering.render(false);
+        };
+        this._itemRenderer = (_div, index) => {
+            const format = this.model.conditionalFormats.formats[index];
+            format.style = format.style || {};
+            return (0, lit_1.html) `
+			<div class="item-content p">
+				<div class="item-form">
+					<div class="row item-header">Rule #${index + 1}</div>
+					
+					<div class="row">Range</div>
+					<div class="row">
+						<og-input
+							data-id="ranges"
+							.value="${format.ranges ? grid_1.CellRange.toA1s(format.ranges) : ''}"
+							style="width: 100%"
+							@change="${(e) => this._onInputChange(e, format)}">
+						</og-input>
+					</div>
+
+					<div class="row">Condition</div>
+					<div class="row">
+						<og-input
+							data-id="condition"
+							.value="${format.condition || ''}"
+							style="width: 100%"
+							@change="${(e) => this._onInputChange(e, format)}">
+						</og-input>
+					</div>
+
+					<div class="row">
+						<og-editor-form-style .data="${format.style}"></og-editor-form-style>
+					</div>
+				</div>
+				<div class="item-controls">
+					<og-button
+						icon="arrow-up"
+						style="flex: 1"
+						@click="${() => this.moveRuleUp(index)}"
+						?disabled="${index == 0}">
+					</og-button>
+					<og-button
+						icon="arrow-down"
+						style="flex: 1"
+						@click="${() => this.moveRuleDown(index)}"
+						?disabled="${index >= this.model.conditionalFormats.formats.length - 1}">
+					</og-button>
+					<og-button
+						icon="trash"
+						color="red"
+						style="min-height: 24px; flex: 0"
+						@click="${() => this.deleteRule(index)}">
+					</og-button>
+				</div>
+			</div>
+		`;
+        };
+        this.render = () => this.model ? (0, lit_1.html) `
+		<div class="controls p">
+			<og-button text="+" @click="${() => this.addRule()}"></og-button>
+			<og-button @click="${this._onApplyClick}">
+				<div slot="content"><og-fa-icon icon="refresh"></og-fa-icon> Apply</div>
+			</og-button>
+		</div>
+		<div class="body">
+			<og-list ?nativeHeight="${true}"
+				itemHeight="150"
+				.customStyle=${ruleForm_style_1.itemStyle}
+				.itemRenderer="${this._itemRenderer}"
+				.size="${this.model.conditionalFormats.formats.length}">
+			</og-list>
+		</div>
+	` : '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    moveRuleUp(index) {
+        if (index == 0)
+            return;
+        const formats = this.model.conditionalFormats.formats;
+        formats.splice(index - 1, 0, formats.splice(index, 1)[0]);
+        this.updateList();
+    }
+    moveRuleDown(index) {
+        const formats = this.model.conditionalFormats.formats;
+        if (index >= formats.length)
+            return;
+        formats.splice(index + 1, 0, formats.splice(index, 1)[0]);
+        this.updateList();
+    }
+    deleteRule(index) {
+        const formats = this.model.conditionalFormats.formats;
+        formats.splice(index, 1);
+        this.updateList();
+    }
+    addRule() {
+        const formats = this.model.conditionalFormats.formats;
+        formats.push({});
+        this.updateList();
+    }
+    _onInputChange(e, format) {
+        const input = e.target;
+        switch (input.dataset.id) {
+            case 'ranges':
+                format.ranges = grid_1.CellRange.fromA1s(input.value);
+                break;
+            case 'condition':
+                format.condition = input.value;
+                break;
+        }
+    }
+};
+exports.RuleForm = RuleForm;
+RuleForm.styles = [ruleForm_style_1.style];
+__decorate([
+    (0, decorators_js_1.property)({ type: Object })
+], RuleForm.prototype, "grid", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Object })
+], RuleForm.prototype, "model", void 0);
+__decorate([
+    (0, decorators_js_1.query)('og-list')
+], RuleForm.prototype, "list", void 0);
+exports.RuleForm = RuleForm = __decorate([
+    (0, decorators_js_1.customElement)('og-editor-form-rules'),
+    (0, core_1.stylable)({ vars: ['background-color', 'font-*', 'accent-color', 'accent-color-highlight', 'text-color-2', 'colortype-*'] })
+], RuleForm);
+//# sourceMappingURL=ruleForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ruleForm.js","sourceRoot":"","sources":["../../../src/ui/forms/ruleForm.ts"],"names":[],"mappings":"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"}

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

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

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

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

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.itemStyle = exports.style = void 0;
+const lit_1 = require("lit");
+exports.style = (0, lit_1.css) `
+	* {
+		box-sizing: border-box;
+	}
+
+	:host {
+		font-size: var(--font-size);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.controls {
+		flex: 0;
+		display: flex;
+		flex-direction: row;
+		gap: 2px;
+		padding: 2px;
+	}
+
+	.controls > * {
+		flex: 1;
+		text-align: center
+	}
+
+	.body {
+		flex: 1;
+		overflow: hidden;
+	}
+
+	og-list {
+		height: 100%;
+	}
+`;
+exports.itemStyle = (0, lit_1.css) `
+	.p {
+		padding: 5px;
+	}
+
+	.row {
+		line-height: 22px;
+		max-height: 22px;
+	}
+
+	og-input {
+		display: block;
+	}
+
+	.item-header {
+		padding-left: 4px;
+		background-color: var(--accent-color);
+		color: var(--colortype-accent-text-color);
+	}
+
+	.item-content {
+		height: 100%;
+		display: flex;
+		flex-direction: row;
+	}
+
+	.item-form {
+		flex: 1;
+	}
+
+	.item-controls {
+		flex: 0;
+		padding: 0 2px;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+	
+	.item-controls og-button {
+		width: 24px;
+		display: block;
+	}
+`;
+//# sourceMappingURL=ruleForm.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ruleForm.style.js","sourceRoot":"","sources":["../../../src/ui/forms/ruleForm.style.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,KAAK,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCvB,CAAC;AAEW,QAAA,SAAS,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0C3B,CAAC"}

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

@@ -0,0 +1,22 @@
+import { actions, List } from '@omegagrid/core';
+import { Grid, GridModel, SparklineOptions } from '@omegagrid/grid';
+import { LitElement } from 'lit';
+export declare class SparklineForm extends LitElement {
+    static styles: import("lit").CSSResult[];
+    grid: Grid;
+    model: GridModel;
+    list: List;
+    _groupIndexMap: Map<number, number>;
+    get groupIndexMap(): Map<number, number>;
+    connectedCallback(): void;
+    updateList: () => void;
+    deleteGroup(index: number): void;
+    addGroup(): void;
+    _onApplyClick: () => void;
+    _onInputChange(e: Event, groupIndex: number): void;
+    _onOptionsToolbarAction: (e: actions.ActionEvent, groupIndex: number) => void;
+    getToolbarValues(options: SparklineOptions): Record<string, unknown>;
+    _itemRenderer: (_div: HTMLDivElement, index: number) => import("lit-html").TemplateResult<1>;
+    render: () => import("lit-html").TemplateResult<1> | "";
+}
+//# sourceMappingURL=sparklineForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sparklineForm.d.ts","sourceRoot":"","sources":["../../../src/ui/forms/sparklineForm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAS,IAAI,EAAY,MAAM,iBAAiB,CAAC;AAEjE,OAAO,EAAa,IAAI,EAAE,SAAS,EAAyB,gBAAgB,EAAiB,MAAM,iBAAiB,CAAC;AACrH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAyBvC,qBAEa,aAAc,SAAQ,UAAU;IAE5C,MAAM,CAAC,MAAM,4BAAW;IAGxB,IAAI,EAAE,IAAI,CAAC;IAGX,KAAK,EAAE,SAAS,CAAC;IAGjB,IAAI,EAAE,IAAI,CAAC;IAEX,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,IAAI,aAAa,wBAOhB;IAED,iBAAiB;IAIjB,UAAU,aAIT;IAgBD,WAAW,CAAC,KAAK,EAAE,MAAM;IAKzB,QAAQ;IAKR,aAAa,aAGZ;IAED,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM;IAU3C,uBAAuB,MAAO,QAAQ,WAAW,cAAc,MAAM,UAUpE;IAED,gBAAgB,CAAC,OAAO,EAAE,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IASpE,aAAa,SAAU,cAAc,SAAS,MAAM,0CAgDnD;IAED,MAAM,kDAeC;CACP"}

package/dist/ui/forms/sparklineForm.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sparklineForm.js","sourceRoot":"","sources":["../../../src/ui/forms/sparklineForm.ts"],"names":[],"mappings":"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"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sparklineForm.style.js","sourceRoot":"","sources":["../../../src/ui/forms/sparklineForm.style.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,KAAK,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCvB,CAAC;AAEW,QAAA,SAAS,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D3B,CAAC"}

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

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

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

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