@operato/board 9.0.0-beta.5 → 9.0.0-beta.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "9.0.0-beta.5",
+  "version": "9.0.0-beta.51",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "type": "module",
@@ -100,26 +100,25 @@
   "dependencies": {
     "@material/web": "^2.0.0",
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^9.0.0-beta.5",
-    "@operato/data-grist": "^9.0.0-beta.5",
-    "@operato/font": "^9.0.0-beta.5",
-    "@operato/graphql": "^9.0.0-beta.4",
-    "@operato/i18n": "^9.0.0-beta.5",
-    "@operato/input": "^9.0.0-beta.5",
-    "@operato/layout": "^9.0.0-beta.5",
-    "@operato/markdown": "^9.0.0-beta.5",
-    "@operato/popup": "^9.0.0-beta.5",
-    "@operato/property-editor": "^9.0.0-beta.5",
-    "@operato/styles": "^9.0.0-beta.4",
-    "@operato/utils": "^9.0.0-beta.4",
-    "@polymer/paper-dropdown-menu": "^3.2.0",
+    "@operato/app": "^9.0.0-beta.49",
+    "@operato/data-grist": "^9.0.0-beta.49",
+    "@operato/font": "^9.0.0-beta.49",
+    "@operato/graphql": "^9.0.0-beta.38",
+    "@operato/i18n": "^9.0.0-beta.37",
+    "@operato/input": "^9.0.0-beta.49",
+    "@operato/layout": "^9.0.0-beta.49",
+    "@operato/markdown": "^9.0.0-beta.47",
+    "@operato/popup": "^9.0.0-beta.49",
+    "@operato/property-editor": "^9.0.0-beta.49",
+    "@operato/property-panel": "^9.0.0-beta.49",
+    "@operato/styles": "^9.0.0-beta.47",
+    "@operato/utils": "^9.0.0-beta.38",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
     "dexie": "^3.2.2",
     "file-saver": "^2.0.5",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21",
-    "sortablejs": "^1.15.2",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
@@ -160,5 +159,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "d1b2da3d89cfb76336bfe4a596f6e77e0c93d2fd"
+  "gitHead": "d1536ccecdab9a40ef55201490adf789d6cef873"
 }

package/dist/src/modeller/property-sidebar/abstract-property.d.ts

@@ -1,10 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { LitElement } from 'lit';
-export declare class AbstractProperty extends LitElement {
-    firstUpdated(): void;
-    _onValueChange(e: Event): void;
-    _getValueFromEventTarget(element: HTMLElement): any;
-    _onAfterValueChange(key: string, value: any): void;
-}

package/dist/src/modeller/property-sidebar/abstract-property.js

@@ -1,55 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { LitElement } from 'lit';
-export class AbstractProperty extends LitElement {
-    firstUpdated() {
-        this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
-    }
-    _onValueChange(e) {
-        var element = e.target;
-        var key = element.getAttribute('value-key');
-        if (!key) {
-            return;
-        }
-        var value = this._getValueFromEventTarget(element);
-        this._onAfterValueChange(key, value);
-    }
-    _getValueFromEventTarget(element) {
-        var value;
-        switch (element.tagName) {
-            case 'INPUT':
-                switch (element.type) {
-                    case 'checkbox':
-                        value = element.checked;
-                        break;
-                    case 'number':
-                        value = Number(element.valueAsNumber);
-                        break;
-                    case 'text':
-                        value = String(element.value);
-                }
-                break;
-            case 'PAPER-BUTTON':
-                value = element.active;
-                break;
-            case 'PAPER-LISTBOX':
-                value = element.selected;
-                break;
-            default:
-                value = element.value;
-                break;
-        }
-        return value;
-    }
-    _onAfterValueChange(key, value) {
-        this.dispatchEvent(new CustomEvent('property-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                [key]: value
-            }
-        }));
-    }
-}
-//# sourceMappingURL=abstract-property.js.map

package/dist/src/modeller/property-sidebar/abstract-property.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"abstract-property.js","sourceRoot":"","sources":["../../../../src/modeller/property-sidebar/abstract-property.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAEhC,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAC9C,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,OAAM;QACR,CAAC;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAA;QAElD,IAAI,CAAC,mBAAmB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;IACtC,CAAC;IAED,wBAAwB,CAAC,OAAoB;QAC3C,IAAI,KAAK,CAAA;QAET,QAAQ,OAAO,CAAC,OAAO,EAAE,CAAC;YACxB,KAAK,OAAO;gBACV,QAAS,OAAe,CAAC,IAAI,EAAE,CAAC;oBAC9B,KAAK,UAAU;wBACb,KAAK,GAAI,OAAe,CAAC,OAAO,CAAA;wBAChC,MAAK;oBACP,KAAK,QAAQ;wBACX,KAAK,GAAG,MAAM,CAAE,OAAe,CAAC,aAAa,CAAC,CAAA;wBAC9C,MAAK;oBACP,KAAK,MAAM;wBACT,KAAK,GAAG,MAAM,CAAE,OAAe,CAAC,KAAK,CAAC,CAAA;gBAC1C,CAAC;gBACD,MAAK;YAEP,KAAK,cAAc;gBACjB,KAAK,GAAI,OAAe,CAAC,MAAM,CAAA;gBAC/B,MAAK;YAEP,KAAK,eAAe;gBAClB,KAAK,GAAI,OAAe,CAAC,QAAQ,CAAA;gBACjC,MAAK;YAEP;gBACE,KAAK,GAAI,OAAe,CAAC,KAAK,CAAA;gBAC9B,MAAK;QACT,CAAC;QAED,OAAO,KAAK,CAAA;IACd,CAAC;IAED,mBAAmB,CAAC,GAAW,EAAE,KAAU;QACzC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,CAAC,GAAG,CAAC,EAAE,KAAK;aACb;SACF,CAAC,CACH,CAAA;IACH,CAAC;CACF","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement } from 'lit'\n\nexport class AbstractProperty extends LitElement {\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    var value = this._getValueFromEventTarget(element)\n\n    this._onAfterValueChange(key, value)\n  }\n\n  _getValueFromEventTarget(element: HTMLElement) {\n    var value\n\n    switch (element.tagName) {\n      case 'INPUT':\n        switch ((element as any).type) {\n          case 'checkbox':\n            value = (element as any).checked\n            break\n          case 'number':\n            value = Number((element as any).valueAsNumber)\n            break\n          case 'text':\n            value = String((element as any).value)\n        }\n        break\n\n      case 'PAPER-BUTTON':\n        value = (element as any).active\n        break\n\n      case 'PAPER-LISTBOX':\n        value = (element as any).selected\n        break\n\n      default:\n        value = (element as any).value\n        break\n    }\n\n    return value\n  }\n\n  _onAfterValueChange(key: string, value: any) {\n    this.dispatchEvent(\n      new CustomEvent('property-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          [key]: value\n        }\n      })\n    )\n  }\n}\n"]}

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

@@ -1,58 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import '@operato/input/ox-buttons-radio.js';
-import '@operato/input/ox-input-code.js';
-import '@operato/i18n/ox-i18n.js';
-import '@operato/help/ox-help-icon.js';
-import './data-binding-value-map.js';
-import './data-binding-value-range.js';
-import { LitElement, PropertyValues } from 'lit';
-import { Properties, Scene } from '@hatiolab/things-scene';
-export type Rule = {
-    map?: Properties;
-    range?: Properties[];
-    eval?: string;
-} | any;
-export type Mapping = {
-    source?: string;
-    rule: 'map' | 'range' | 'eval' | 'value';
-    accessor?: string;
-    target?: string;
-    property?: string;
-    param?: Rule;
-    ndnsp?: boolean;
-    partial?: boolean;
-};
-/**
-element for mapping data value editing
-
-Example:
-
-  <data-binding-mapper mapping=${mapping}>
-  </data-binding-mapper>
-*/
-export declare class DataBindingMapper extends LitElement {
-    static styles: import("lit").CSSResult[];
-    mapping: Mapping;
-    rule: Rule;
-    properties: Properties[];
-    scene?: Scene;
-    _valueTypes: any;
-    _componentIds: {
-        value: string;
-        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;
-    _onChangedMapping(): Promise<void>;
-    _onChangeRule(e: Event): void;
-    _onChange(e: Event): void;
-}

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

@@ -1,443 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import '@operato/input/ox-buttons-radio.js';
-import '@operato/input/ox-input-code.js';
-import '@operato/i18n/ox-i18n.js';
-import '@operato/help/ox-help-icon.js';
-import './data-binding-value-map.js';
-import './data-binding-value-range.js';
-import { css, html, LitElement } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-/**
-element for mapping data value editing
-
-Example:
-
-  <data-binding-mapper mapping=${mapping}>
-  </data-binding-mapper>
-*/
-export class DataBindingMapper extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.mapping = {
-            rule: 'value'
-        };
-        this.rule = {};
-        this.properties = [];
-        this._valueTypes = {
-            play: 'boolean',
-            hidden: 'boolean',
-            started: 'boolean',
-            rotation: 'number',
-            value: 'number',
-            fillStyle: 'color',
-            strokeStyle: 'color',
-            fontColor: 'color',
-            data: 'object',
-            source: 'attachment',
-            location: 'object',
-            dimension: 'object',
-            text: 'string',
-            ref: 'string'
-        };
-        this._componentIds = [];
-        this._keep_saved_rule_params = false;
-    }
-    firstUpdated() {
-        this.renderRoot.addEventListener('change', e => this._onChange(e));
-    }
-    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>
-      <input
-        id="accessor-input"
-        value-key="accessor"
-        type="text"
-        data-mapping-accessor
-        .value=${mapping.accessor || ''}
-      />
-
-      <label for="target-input"> <ox-i18n msgid="label.target">target</ox-i18n> </label>
-      <input
-        id="target-input"
-        type="text"
-        value-key="target"
-        list="target-list"
-        .value=${mapping.target || ''}
-        @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>
-        <option value="(key)"></option>
-        <option value="[propkey]"></option>
-        ${this._componentIds.length
-            ? html `
-              ${this._componentIds.map(({ value, description }) => html ` <option value=${value}>${description}</option> `)}
-            `
-            : html ``}
-      </datalist>
-
-      <label for="property-input">
-        <ox-i18n msgid="label.property">property</ox-i18n
-        ><ox-help-icon topic="board-modeller/data-binding-property"></ox-help-icon
-      ></label>
-      <select id="property-input" value-key="property" .value=${mapping.property || ''}>
-        ${this.properties.map(item => html ` <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option> `)}
-      </select>
-
-      <label> <ox-i18n msgid="label.rule-type">rule type</ox-i18n> </label>
-      <ox-buttons-radio .value=${mapping.rule} @change=${(e) => this._onChangeRule(e)}>
-        <div data-value="value"><ox-i18n msgid="label.value"></ox-i18n></div>
-        <div data-value="map"><ox-i18n msgid="label.map"></ox-i18n></div>
-        <div data-value="range"><ox-i18n msgid="label.range"></ox-i18n></div>
-        <div data-value="eval"><ox-i18n msgid="label.eval"></ox-i18n></div>
-      </ox-buttons-radio>
-
-      <div rule-editors ?hidden=${mapping.rule == 'value'}>
-        <data-binding-value-map
-          value-key="map"
-          .value=${this.rule.map || {}}
-          .valuetype=${this._valuetype(mapping.property)}
-          ?active=${mapping.rule == 'map'}
-        >
-        </data-binding-value-map>
-
-        <data-binding-value-range
-          value-key="range"
-          .value=${this.rule.range || []}
-          .valuetype=${this._valuetype(mapping.property)}
-          ?active=${mapping.rule == 'range'}
-        >
-        </data-binding-value-range>
-
-        <ox-input-code
-          value-key="eval"
-          id="eval-editor"
-          .value=${this.rule.eval || ''}
-          ?active=${mapping.rule == 'eval'}
-          language="javascript"
-        >
-        </ox-input-code>
-      </div>
-
-      <div class="checkbox-row">
-        <input id="checkbox-partial" type="checkbox" value-key="partial" .checked=${mapping.partial === true} />
-        <label for="checkbox-partial"> <ox-i18n msgid="label.partial-spreading">Partial Spreading</ox-i18n> </label>
-      </div>
-
-      <div class="checkbox-row">
-        <input id="checkbox-ndnsp" type="checkbox" value-key="ndnsp" .checked=${mapping.ndnsp === true} />
-        <label for="checkbox-ndnsp"> <ox-i18n msgid="label.ndnsp">No Data No Spreading</ox-i18n> </label>
-      </div>
-    `;
-    }
-    _valuetype(property) {
-        return this._valueTypes[property] || 'string';
-    }
-    async _onChangedMapping() {
-        if (this._keep_saved_rule_params) {
-            this._keep_saved_rule_params = false;
-        }
-        else {
-            await this.updateComplete;
-            var rule = {};
-            if (this.mapping) {
-                switch (this.mapping.rule) {
-                    case 'map':
-                        rule.map = this.mapping.param || {};
-                        break;
-                    case 'range':
-                        rule.range = this.mapping.param || [];
-                        break;
-                    case 'eval':
-                        rule.eval = this.mapping.param || '';
-                        break;
-                    default:
-                        this.mapping.rule = 'value';
-                        break;
-                }
-            }
-            this.rule = rule;
-            this.requestUpdate();
-        }
-    }
-    _onChangeRule(e) {
-        var element = e.target;
-        var value = element.value;
-        let param;
-        switch (value) {
-            case 'map':
-                param = this.rule.map;
-                break;
-            case 'range':
-                param = this.rule.range;
-                break;
-            case 'eval':
-                param = this.rule.eval || '';
-                // rule.eval에 값이 없을 때, ace-editor 내용이 초기화되지 않는 문제때문에 처리함.
-                if (!param) {
-                    this.editor.value = 'return';
-                }
-                break;
-            default:
-        }
-        this.mapping = {
-            ...this.mapping,
-            rule: value,
-            param
-        };
-        this._keep_saved_rule_params = true;
-        this.dispatchEvent(new CustomEvent('value-change', { bubbles: true, composed: true }));
-    }
-    _onChange(e) {
-        var element = e.target;
-        var key = element.getAttribute('value-key');
-        if (!key)
-            return;
-        var value = element.value;
-        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;
-            }
-            this.mapping = {
-                ...this.mapping,
-                target: value
-            };
-        }
-        else if (key === 'accessor') {
-            this.mapping = {
-                ...this.mapping,
-                accessor: (value || '').trim()
-            };
-        }
-        else if (key === 'property') {
-            this.mapping = {
-                ...this.mapping,
-                property: (value || '').trim()
-            };
-        }
-        else if (key === 'map' || key === 'range' || key === 'eval') {
-            this.rule[key] = value;
-            this.mapping = {
-                ...this.mapping,
-                param: value
-            };
-        }
-        else if (key === 'ndnsp' /* no data no spreading */) {
-            value = element.checked;
-            this.mapping = {
-                ...this.mapping,
-                ndnsp: value
-            };
-        }
-        else if (key === 'partial' /* partial spreading */) {
-            value = element.checked;
-            this.mapping = {
-                ...this.mapping,
-                partial: value
-            };
-        }
-        if (!this.mapping.rule) {
-            this.mapping.rule = 'value';
-        }
-        this._keep_saved_rule_params = true;
-        this.dispatchEvent(new CustomEvent('value-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                changed: {
-                    [key]: value
-                }
-            }
-        }));
-    }
-}
-DataBindingMapper.styles = [
-    css `
-      :host {
-        background-color: var(--md-sys-color-surface);
-        color: var(--md-sys-color-on-surface);
-        overflow: hidden;
-        padding: 7px 0 0 0;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        border-width: 0 1px 1px 1px;
-        padding: 4px;
-        line-height: 2;
-
-        display: grid;
-        grid-template-columns: repeat(10, 1fr);
-        grid-gap: 4px;
-        grid-auto-rows: minmax(24px, auto);
-
-        align-items: center;
-      }
-
-      :host > * {
-        align-self: stretch;
-      }
-
-      label {
-        grid-column: span 3;
-        text-align: right;
-        text-transform: capitalize;
-      }
-
-      input,
-      select,
-      ox-buttons-radio,
-      [mapping-rule] {
-        grid-column: span 7;
-      }
-      input,
-      select {
-        border: var(--property-sidebar-fieldset-border);
-      }
-
-      ox-buttons-radio {
-        display: flex;
-        padding: 0 4px;
-      }
-
-      ox-buttons-radio > * {
-        text-align: center;
-        flex: 1;
-        margin: 2px;
-        border-bottom: 2px solid #fff;
-      }
-
-      ox-buttons-radio div[active] {
-        border-color: #f2471c;
-      }
-
-      select {
-        height: 22px;
-      }
-
-      [mapping-rule] {
-        display: flex;
-      }
-
-      [mapping-rule] * {
-        flex: auto;
-        margin: 0;
-        text-align: left;
-        align-self: center;
-      }
-
-      [rule-editors] {
-        grid-column: span 10;
-
-        display: 'flex';
-        align-content: auto;
-      }
-
-      [rule-editors] :not([active]) {
-        display: none;
-      }
-
-      ox-input-code {
-        height: 300px;
-        overflow: auto;
-      }
-
-      /* checkbox-row */
-      .checkbox-row {
-        grid-column: span 10;
-
-        display: grid;
-        grid-template-columns: repeat(10, 1fr);
-        grid-gap: 5px;
-        grid-auto-rows: minmax(24px, auto);
-        align-items: center;
-      }
-
-      .checkbox-row > input {
-        grid-column: 4 / 5;
-      }
-
-      .checkbox-row > label {
-        grid-column: span 6;
-        text-align: left;
-      }
-    `
-];
-__decorate([
-    property({ type: Object })
-], DataBindingMapper.prototype, "mapping", void 0);
-__decorate([
-    property({ type: Object })
-], DataBindingMapper.prototype, "rule", void 0);
-__decorate([
-    property({ type: Array })
-], DataBindingMapper.prototype, "properties", void 0);
-__decorate([
-    property({ type: Object })
-], DataBindingMapper.prototype, "scene", void 0);
-__decorate([
-    state()
-], DataBindingMapper.prototype, "_valueTypes", void 0);
-__decorate([
-    state()
-], DataBindingMapper.prototype, "_componentIds", void 0);
-__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);
-//# sourceMappingURL=data-binding-mapper.js.map

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

@@ -1 +0,0 @@
-{"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  partial?: 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: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\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\">\n        <ox-i18n msgid=\"label.property\">property</ox-i18n\n        ><ox-help-icon topic=\"board-modeller/data-binding-property\"></ox-help-icon\n      ></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          language=\"javascript\"\n        >\n        </ox-input-code>\n      </div>\n\n      <div class=\"checkbox-row\">\n        <input id=\"checkbox-partial\" type=\"checkbox\" value-key=\"partial\" .checked=${mapping.partial === true} />\n        <label for=\"checkbox-partial\"> <ox-i18n msgid=\"label.partial-spreading\">Partial Spreading</ox-i18n> </label>\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    } else if (key === 'partial' /* partial spreading */) {\n      value = element.checked\n\n      this.mapping = {\n        ...this.mapping,\n        partial: 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"]}