npm - @operato/board - Versions diffs - 1.4.47 → 1.4.50 - Mend

@operato/board 1.4.47 → 1.4.50

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.

Files changed (7) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [1.4.50](https://github.com/hatiolab/operato/compare/v1.4.49...v1.4.50) (2023-09-07)
+### :bug: Bug Fix
+* add source property into data-mapping ([fe3d7ee](https://github.com/hatiolab/operato/commit/fe3d7ee6d3b55bdf3f8a87c8d74f31fa13ed6014))
+### [1.4.48](https://github.com/hatiolab/operato/compare/v1.4.47...v1.4.48) (2023-09-07)
+### :bug: Bug Fix
+* add source property into data-mapping ([db5d864](https://github.com/hatiolab/operato/commit/db5d864384058b95429b41fcc42cb36931373c7b))
+* add source property into data-mapping ([b175940](https://github.com/hatiolab/operato/commit/b17594013f9ab83048a3988f8dba8b6ac9919e13))
 ### [1.4.47](https://github.com/hatiolab/operato/compare/v1.4.46...v1.4.47) (2023-09-06)
 **Note:** Version bump only for package @operato/board

package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.d.ts CHANGED Viewed

@@ -15,6 +15,7 @@ export type Rule = {
     eval?: string;
 } | any;
 export type Mapping = {
+    source?: string;
     rule: 'map' | 'range' | 'eval' | 'value';
     accessor?: string;
     target?: string;
@@ -42,9 +43,11 @@ export declare class DataBindingMapper extends LitElement {
         description: string;
     }[];
     editor: HTMLInputElement;
+    source: HTMLInputElement;
     target: HTMLInputElement;
     firstUpdated(): void;
     updated(changes: PropertyValues<this>): void;
+    findComponentIds(): void;
     render(): import("lit-html").TemplateResult<1>;
     _valuetype(property: string): any;
     private _keep_saved_rule_params;

package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js CHANGED Viewed

@@ -51,11 +51,31 @@ export class DataBindingMapper extends LitElement {
     updated(changes) {
         changes.has('mapping') && this._onChangedMapping();
     }
+    findComponentIds() {
+        this._componentIds =
+            (this.scene &&
+                this.scene.ids.map(i => {
+                    var _a;
+                    const id = i.key;
+                    return { value: `#${id}`, description: (_a = this.scene.findById(id)) === null || _a === void 0 ? void 0 : _a.get('type') };
+                })) ||
+                [];
+    }
     render() {
         const mapping = this.mapping || {
             rule: 'value'
         };
         return html `
+      <label for="source-input"> <ox-i18n msgid="label.source">source</ox-i18n> </label>
+      <input
+        id="source-input"
+        type="text"
+        value-key="source"
+        list="source-list"
+        .value=${mapping.source || ''}
+        @focusin=${() => this.findComponentIds()}
+      />
       <label for="accessor-input">
         <ox-i18n msgid="label.accessor">accessor</ox-i18n><ox-help-icon topic="board-modeller/accessor"></ox-help-icon>
       </label>
@@ -74,17 +94,18 @@ export class DataBindingMapper extends LitElement {
         value-key="target"
         list="target-list"
         .value=${mapping.target || ''}
-        @focusin=${() => {
-            this._componentIds =
-                (this.scene &&
-                    this.scene.ids.map(i => {
-                        var _a;
-                        const id = i.key;
-                        return { value: `#${id}`, description: (_a = this.scene.findById(id)) === null || _a === void 0 ? void 0 : _a.get('type') };
-                    })) ||
-                    [];
-        }}
+        @focusin=${() => this.findComponentIds()}
       />
+      <datalist id="source-list">
+        <option value="">(self)</option>
+        ${this._componentIds.length
+            ? html `
+              ${this._componentIds.map(({ value, description }) => html ` <option value=${value}>${description}</option> `)}
+            `
+            : html ``}
+      </datalist>
       <datalist id="target-list">
         <option value="(self)"></option>
         <option value="(children)"></option>
@@ -206,7 +227,17 @@ export class DataBindingMapper extends LitElement {
         if (!key)
             return;
         var value = element.value;
-        if (key === 'target') {
+        if (key === 'source') {
+            if (value.length > 0) {
+                value = value.trim();
+                this.source.value = value;
+            }
+            this.mapping = {
+                ...this.mapping,
+                source: value
+            };
+        }
+        else if (key === 'target') {
             if (value.length > 0 && !/^[.#(\[]/.test(value)) {
                 value = '#' + value.trim();
                 this.target.value = value;
@@ -386,6 +417,9 @@ __decorate([
 __decorate([
     query('#eval-editor')
 ], DataBindingMapper.prototype, "editor", void 0);
+__decorate([
+    query('#source-input')
+], DataBindingMapper.prototype, "source", void 0);
 __decorate([
     query('#target-input')
 ], DataBindingMapper.prototype, "target", void 0);

package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-binding-mapper.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding-mapper.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/input/ox-input-code.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-help-icon.js'\nimport './data-binding-value-map.js'\nimport './data-binding-value-range.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nexport type Rule =\n \| {\n map?: Properties\n range?: Properties[]\n eval?: string\n }\n \| any\n\nexport type Mapping = {\n rule: 'map' \| 'range' \| 'eval' \| 'value'\n accessor?: string\n target?: string\n property?: string\n param?: Rule\n ndnsp?: boolean\n}\n\n/\nelement for mapping data value editing\n\nExample:\n\n <data-binding-mapper mapping=${mapping}>\n </data-binding-mapper>\n/\n\nexport class DataBindingMapper extends LitElement {\n static styles = [\n css`\n :host {\n background-color: rgba(255, 255, 255, 0.5);\n overflow: hidden;\n padding: 7px 0 0 0;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-width: 0 1px 1px 1px;\n padding: 4px;\n line-height: 2;\n\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 4px;\n grid-auto-rows: minmax(24px, auto);\n\n align-items: center;\n }\n\n :host > * {\n align-self: stretch;\n }\n\n label {\n grid-column: span 3;\n text-align: right;\n text-transform: capitalize;\n }\n\n input,\n select,\n ox-buttons-radio,\n [mapping-rule] {\n grid-column: span 7;\n }\n input,\n select {\n border: var(--property-sidebar-fieldset-border);\n }\n\n ox-buttons-radio {\n display: flex;\n padding: 0 4px;\n }\n\n ox-buttons-radio > * {\n text-align: center;\n flex: 1;\n margin: 2px;\n border-bottom: 2px solid #fff;\n }\n\n ox-buttons-radio div[active] {\n border-color: #f2471c;\n }\n\n select {\n height: 22px;\n }\n\n [mapping-rule] {\n display: flex;\n }\n\n [mapping-rule] * {\n flex: auto;\n margin: 0;\n text-align: left;\n align-self: center;\n }\n\n [rule-editors] {\n grid-column: span 10;\n\n display: 'flex';\n align-content: auto;\n }\n\n [rule-editors] :not([active]) {\n display: none;\n }\n\n ox-input-code {\n height: 300px;\n overflow: auto;\n }\n\n /* checkbox-row /\n .checkbox-row {\n grid-column: span 10;\n\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n align-items: center;\n }\n\n .checkbox-row > input {\n grid-column: 4 / 5;\n }\n\n .checkbox-row > label {\n grid-column: span 6;\n text-align: left;\n }\n `\n ]\n\n @property({ type: Object }) mapping: Mapping = {\n rule: 'value'\n }\n @property({ type: Object }) rule: Rule = {}\n @property({ type: Array }) properties: Properties[] = []\n @property({ type: Object }) scene?: Scene\n\n @state() _valueTypes: any = {\n play: 'boolean',\n hidden: 'boolean',\n started: 'boolean',\n\n rotation: 'number',\n value: 'number',\n\n fillStyle: 'color',\n strokeStyle: 'color',\n fontColor: 'color',\n\n data: 'object',\n source: 'attachment',\n location: 'object',\n dimension: 'object',\n\n text: 'string',\n ref: 'string'\n }\n @state() _componentIds: { value: string; description: string }[] = []\n\n @query('#eval-editor') editor!: HTMLInputElement\n @query('#target-input') target!: HTMLInputElement\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', e => this._onChange(e))\n }\n\n updated(changes: PropertyValues<this>) {\n changes.has('mapping') && this._onChangedMapping()\n }\n\n render() {\n const mapping = this.mapping \|\| {\n rule: 'value'\n }\n\n return html`\n <label for=\"accessor-input\">\n <ox-i18n msgid=\"label.accessor\">accessor</ox-i18n><ox-help-icon topic=\"board-modeller/accessor\"></ox-help-icon>\n </label>\n <input\n id=\"accessor-input\"\n value-key=\"accessor\"\n type=\"text\"\n data-mapping-accessor\n .value=${mapping.accessor \|\| ''}\n />\n\n <label for=\"target-input\"> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n <input\n id=\"target-input\"\n type=\"text\"\n value-key=\"target\"\n list=\"target-list\"\n .value=${mapping.target \|\| ''}\n @focusin=${() => {\n this._componentIds =\n (this.scene &&\n this.scene.ids.map(i => {\n const id = i.key\n return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n })) \|\|\n []\n }}\n />\n <datalist id=\"target-list\">\n <option value=\"(self)\"></option>\n <option value=\"(children)\"></option>\n <option value=\"(key)\"></option>\n <option value=\"[propkey]\"></option>\n ${this._componentIds.length\n ? html`\n ${this._componentIds.map(\n ({ value, description }) => html` <option value=${value}>${description}</option> `\n )}\n `\n : html``}\n </datalist>\n\n <label for=\"property-input\"> <ox-i18n msgid=\"label.property\">property</ox-i18n> </label>\n <select id=\"property-input\" value-key=\"property\" .value=${mapping.property \|\| ''}>\n ${this.properties.map(\n item => html` <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option> `\n )}\n </select>\n\n <label> <ox-i18n msgid=\"label.rule-type\">rule type</ox-i18n> </label>\n <ox-buttons-radio .value=${mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>\n <div data-value=\"value\"><ox-i18n msgid=\"label.value\"></ox-i18n></div>\n <div data-value=\"map\"><ox-i18n msgid=\"label.map\"></ox-i18n></div>\n <div data-value=\"range\"><ox-i18n msgid=\"label.range\"></ox-i18n></div>\n <div data-value=\"eval\"><ox-i18n msgid=\"label.eval\"></ox-i18n></div>\n </ox-buttons-radio>\n\n <div rule-editors ?hidden=${mapping.rule == 'value'}>\n <data-binding-value-map\n value-key=\"map\"\n .value=${this.rule.map \|\| {}}\n .valuetype=${this._valuetype(mapping.property!)}\n ?active=${mapping.rule == 'map'}\n >\n </data-binding-value-map>\n\n <data-binding-value-range\n value-key=\"range\"\n .value=${this.rule.range \|\| []}\n .valuetype=${this._valuetype(mapping.property!)}\n ?active=${mapping.rule == 'range'}\n >\n </data-binding-value-range>\n\n <ox-input-code\n value-key=\"eval\"\n id=\"eval-editor\"\n .value=${this.rule.eval \|\| ''}\n ?active=${mapping.rule == 'eval'}\n >\n </ox-input-code>\n </div>\n\n <div class=\"checkbox-row\">\n <input id=\"checkbox-ndnsp\" type=\"checkbox\" value-key=\"ndnsp\" .checked=${mapping.ndnsp === true} />\n <label for=\"checkbox-ndnsp\"> <ox-i18n msgid=\"label.ndnsp\">No Data No Spreading</ox-i18n> </label>\n </div>\n `\n }\n\n _valuetype(property: string) {\n return this._valueTypes[property] \|\| 'string'\n }\n\n private _keep_saved_rule_params: boolean = false\n\n async _onChangedMapping() {\n if (this._keep_saved_rule_params) {\n this._keep_saved_rule_params = false\n } else {\n await this.updateComplete\n\n var rule: Rule = {}\n\n if (this.mapping) {\n switch (this.mapping.rule) {\n case 'map':\n rule.map = this.mapping.param \|\| {}\n break\n case 'range':\n rule.range = this.mapping.param \|\| []\n break\n case 'eval':\n rule.eval = this.mapping.param \|\| ''\n break\n default:\n this.mapping.rule = 'value'\n break\n }\n }\n\n this.rule = rule\n this.requestUpdate()\n }\n }\n\n _onChangeRule(e: Event) {\n var element = e.target as HTMLInputElement\n var value = element.value\n\n let param\n\n switch (value) {\n case 'map':\n param = this.rule.map\n break\n case 'range':\n param = this.rule.range\n break\n case 'eval':\n param = this.rule.eval \|\| ''\n\n // rule.eval에 값이 없을 때, ace-editor 내용이 초기화되지 않는 문제때문에 처리함.\n if (!param) {\n this.editor.value = 'return'\n }\n break\n default:\n }\n\n this.mapping = {\n ...this.mapping,\n rule: value as 'value' \| 'map' \| 'range' \| 'eval',\n param\n }\n\n this._keep_saved_rule_params = true\n this.dispatchEvent(new CustomEvent('value-change', { bubbles: true, composed: true }))\n }\n\n _onChange(e: Event) {\n var element = e.target as HTMLInputElement\n var key = element.getAttribute('value-key')\n\n if (!key) return\n\n var value: string \| boolean = element.value\n\n if (key === 'target') {\n if (value.length > 0 && !/^[.#(\\[]/.test(value)) {\n value = '#' + value.trim()\n\n this.target.value = value\n }\n\n this.mapping = {\n ...this.mapping,\n target: value\n }\n } else if (key === 'accessor') {\n this.mapping = {\n ...this.mapping,\n accessor: (value \|\| '').trim()\n }\n } else if (key === 'property') {\n this.mapping = {\n ...this.mapping,\n property: (value \|\| '').trim()\n }\n } else if (key === 'map' \|\| key === 'range' \|\| key === 'eval') {\n this.rule[key] = value\n this.mapping = {\n ...this.mapping,\n param: value\n }\n } else if (key === 'ndnsp' / no data no spreading */) {\n value = element.checked\n\n this.mapping = {\n ...this.mapping,\n ndnsp: value\n }\n }\n\n if (!this.mapping.rule) {\n this.mapping.rule = 'value'\n }\n\n this._keep_saved_rule_params = true\n this.dispatchEvent(\n new CustomEvent('value-change', {\n bubbles: true,\n composed: true,\n detail: {\n changed: {\n [key]: value\n }\n }\n })\n )\n }\n}\n"]}
1	+ {"version":3,"file":"data-binding-mapper.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding-mapper.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/input/ox-input-code.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-help-icon.js'\nimport './data-binding-value-map.js'\nimport './data-binding-value-range.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nexport type Rule =\n \| {\n map?: Properties\n range?: Properties[]\n eval?: string\n }\n \| any\n\nexport type Mapping = {\n source?: string\n rule: 'map' \| 'range' \| 'eval' \| 'value'\n accessor?: string\n target?: string\n property?: string\n param?: Rule\n ndnsp?: boolean\n}\n\n/\nelement for mapping data value editing\n\nExample:\n\n <data-binding-mapper mapping=${mapping}>\n </data-binding-mapper>\n/\n\nexport class DataBindingMapper extends LitElement {\n static styles = [\n css`\n :host {\n background-color: rgba(255, 255, 255, 0.5);\n overflow: hidden;\n padding: 7px 0 0 0;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-width: 0 1px 1px 1px;\n padding: 4px;\n line-height: 2;\n\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 4px;\n grid-auto-rows: minmax(24px, auto);\n\n align-items: center;\n }\n\n :host > * {\n align-self: stretch;\n }\n\n label {\n grid-column: span 3;\n text-align: right;\n text-transform: capitalize;\n }\n\n input,\n select,\n ox-buttons-radio,\n [mapping-rule] {\n grid-column: span 7;\n }\n input,\n select {\n border: var(--property-sidebar-fieldset-border);\n }\n\n ox-buttons-radio {\n display: flex;\n padding: 0 4px;\n }\n\n ox-buttons-radio > * {\n text-align: center;\n flex: 1;\n margin: 2px;\n border-bottom: 2px solid #fff;\n }\n\n ox-buttons-radio div[active] {\n border-color: #f2471c;\n }\n\n select {\n height: 22px;\n }\n\n [mapping-rule] {\n display: flex;\n }\n\n [mapping-rule] * {\n flex: auto;\n margin: 0;\n text-align: left;\n align-self: center;\n }\n\n [rule-editors] {\n grid-column: span 10;\n\n display: 'flex';\n align-content: auto;\n }\n\n [rule-editors] :not([active]) {\n display: none;\n }\n\n ox-input-code {\n height: 300px;\n overflow: auto;\n }\n\n /* checkbox-row /\n .checkbox-row {\n grid-column: span 10;\n\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n align-items: center;\n }\n\n .checkbox-row > input {\n grid-column: 4 / 5;\n }\n\n .checkbox-row > label {\n grid-column: span 6;\n text-align: left;\n }\n `\n ]\n\n @property({ type: Object }) mapping: Mapping = {\n rule: 'value'\n }\n @property({ type: Object }) rule: Rule = {}\n @property({ type: Array }) properties: Properties[] = []\n @property({ type: Object }) scene?: Scene\n\n @state() _valueTypes: any = {\n play: 'boolean',\n hidden: 'boolean',\n started: 'boolean',\n\n rotation: 'number',\n value: 'number',\n\n fillStyle: 'color',\n strokeStyle: 'color',\n fontColor: 'color',\n\n data: 'object',\n source: 'attachment',\n location: 'object',\n dimension: 'object',\n\n text: 'string',\n ref: 'string'\n }\n @state() _componentIds: { value: string; description: string }[] = []\n\n @query('#eval-editor') editor!: HTMLInputElement\n @query('#source-input') source!: HTMLInputElement\n @query('#target-input') target!: HTMLInputElement\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', e => this._onChange(e))\n }\n\n updated(changes: PropertyValues<this>) {\n changes.has('mapping') && this._onChangedMapping()\n }\n\n findComponentIds() {\n this._componentIds =\n (this.scene &&\n this.scene.ids.map(i => {\n const id = i.key\n return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n })) \|\|\n []\n }\n\n render() {\n const mapping = this.mapping \|\| {\n rule: 'value'\n }\n\n return html`\n <label for=\"source-input\"> <ox-i18n msgid=\"label.source\">source</ox-i18n> </label>\n <input\n id=\"source-input\"\n type=\"text\"\n value-key=\"source\"\n list=\"source-list\"\n .value=${mapping.source \|\| ''}\n @focusin=${() => this.findComponentIds()}\n />\n\n <label for=\"accessor-input\">\n <ox-i18n msgid=\"label.accessor\">accessor</ox-i18n><ox-help-icon topic=\"board-modeller/accessor\"></ox-help-icon>\n </label>\n <input\n id=\"accessor-input\"\n value-key=\"accessor\"\n type=\"text\"\n data-mapping-accessor\n .value=${mapping.accessor \|\| ''}\n />\n\n <label for=\"target-input\"> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n <input\n id=\"target-input\"\n type=\"text\"\n value-key=\"target\"\n list=\"target-list\"\n .value=${mapping.target \|\| ''}\n @focusin=${() => this.findComponentIds()}\n />\n\n <datalist id=\"source-list\">\n <option value=\"\">(self)</option>\n ${this._componentIds.length\n ? html`\n ${this._componentIds.map(\n ({ value, description }) => html` <option value=${value}>${description}</option> `\n )}\n `\n : html``}\n </datalist>\n\n <datalist id=\"target-list\">\n <option value=\"(self)\"></option>\n <option value=\"(children)\"></option>\n <option value=\"(key)\"></option>\n <option value=\"[propkey]\"></option>\n ${this._componentIds.length\n ? html`\n ${this._componentIds.map(\n ({ value, description }) => html` <option value=${value}>${description}</option> `\n )}\n `\n : html``}\n </datalist>\n\n <label for=\"property-input\"> <ox-i18n msgid=\"label.property\">property</ox-i18n> </label>\n <select id=\"property-input\" value-key=\"property\" .value=${mapping.property \|\| ''}>\n ${this.properties.map(\n item => html` <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option> `\n )}\n </select>\n\n <label> <ox-i18n msgid=\"label.rule-type\">rule type</ox-i18n> </label>\n <ox-buttons-radio .value=${mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>\n <div data-value=\"value\"><ox-i18n msgid=\"label.value\"></ox-i18n></div>\n <div data-value=\"map\"><ox-i18n msgid=\"label.map\"></ox-i18n></div>\n <div data-value=\"range\"><ox-i18n msgid=\"label.range\"></ox-i18n></div>\n <div data-value=\"eval\"><ox-i18n msgid=\"label.eval\"></ox-i18n></div>\n </ox-buttons-radio>\n\n <div rule-editors ?hidden=${mapping.rule == 'value'}>\n <data-binding-value-map\n value-key=\"map\"\n .value=${this.rule.map \|\| {}}\n .valuetype=${this._valuetype(mapping.property!)}\n ?active=${mapping.rule == 'map'}\n >\n </data-binding-value-map>\n\n <data-binding-value-range\n value-key=\"range\"\n .value=${this.rule.range \|\| []}\n .valuetype=${this._valuetype(mapping.property!)}\n ?active=${mapping.rule == 'range'}\n >\n </data-binding-value-range>\n\n <ox-input-code\n value-key=\"eval\"\n id=\"eval-editor\"\n .value=${this.rule.eval \|\| ''}\n ?active=${mapping.rule == 'eval'}\n >\n </ox-input-code>\n </div>\n\n <div class=\"checkbox-row\">\n <input id=\"checkbox-ndnsp\" type=\"checkbox\" value-key=\"ndnsp\" .checked=${mapping.ndnsp === true} />\n <label for=\"checkbox-ndnsp\"> <ox-i18n msgid=\"label.ndnsp\">No Data No Spreading</ox-i18n> </label>\n </div>\n `\n }\n\n _valuetype(property: string) {\n return this._valueTypes[property] \|\| 'string'\n }\n\n private _keep_saved_rule_params: boolean = false\n\n async _onChangedMapping() {\n if (this._keep_saved_rule_params) {\n this._keep_saved_rule_params = false\n } else {\n await this.updateComplete\n\n var rule: Rule = {}\n\n if (this.mapping) {\n switch (this.mapping.rule) {\n case 'map':\n rule.map = this.mapping.param \|\| {}\n break\n case 'range':\n rule.range = this.mapping.param \|\| []\n break\n case 'eval':\n rule.eval = this.mapping.param \|\| ''\n break\n default:\n this.mapping.rule = 'value'\n break\n }\n }\n\n this.rule = rule\n this.requestUpdate()\n }\n }\n\n _onChangeRule(e: Event) {\n var element = e.target as HTMLInputElement\n var value = element.value\n\n let param\n\n switch (value) {\n case 'map':\n param = this.rule.map\n break\n case 'range':\n param = this.rule.range\n break\n case 'eval':\n param = this.rule.eval \|\| ''\n\n // rule.eval에 값이 없을 때, ace-editor 내용이 초기화되지 않는 문제때문에 처리함.\n if (!param) {\n this.editor.value = 'return'\n }\n break\n default:\n }\n\n this.mapping = {\n ...this.mapping,\n rule: value as 'value' \| 'map' \| 'range' \| 'eval',\n param\n }\n\n this._keep_saved_rule_params = true\n this.dispatchEvent(new CustomEvent('value-change', { bubbles: true, composed: true }))\n }\n\n _onChange(e: Event) {\n var element = e.target as HTMLInputElement\n var key = element.getAttribute('value-key')\n\n if (!key) return\n\n var value: string \| boolean = element.value\n\n if (key === 'source') {\n if (value.length > 0) {\n value = value.trim()\n\n this.source.value = value\n }\n\n this.mapping = {\n ...this.mapping,\n source: value\n }\n } else if (key === 'target') {\n if (value.length > 0 && !/^[.#(\\[]/.test(value)) {\n value = '#' + value.trim()\n\n this.target.value = value\n }\n\n this.mapping = {\n ...this.mapping,\n target: value\n }\n } else if (key === 'accessor') {\n this.mapping = {\n ...this.mapping,\n accessor: (value \|\| '').trim()\n }\n } else if (key === 'property') {\n this.mapping = {\n ...this.mapping,\n property: (value \|\| '').trim()\n }\n } else if (key === 'map' \|\| key === 'range' \|\| key === 'eval') {\n this.rule[key] = value\n this.mapping = {\n ...this.mapping,\n param: value\n }\n } else if (key === 'ndnsp' / no data no spreading */) {\n value = element.checked\n\n this.mapping = {\n ...this.mapping,\n ndnsp: value\n }\n }\n\n if (!this.mapping.rule) {\n this.mapping.rule = 'value'\n }\n\n this._keep_saved_rule_params = true\n this.dispatchEvent(\n new CustomEvent('value-change', {\n bubbles: true,\n composed: true,\n detail: {\n changed: {\n [key]: value\n }\n }\n })\n )\n }\n}\n"]}