@operato/property-panel 9.0.0-beta.41 → 9.0.0-beta.43

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.0.0-beta.43](https://github.com/hatiolab/operato/compare/v9.0.0-beta.42...v9.0.0-beta.43) (2025-02-10)
+
+
+### :rocket: New Features
+
+* add `emphasize` property to enable customizable hover effects (e.g… ([4bddf89](https://github.com/hatiolab/operato/commit/4bddf894cd24e065c8ee8eec57c9c9ce2a51fe68))
+
+
+
+## [9.0.0-beta.42](https://github.com/hatiolab/operato/compare/v9.0.0-beta.41...v9.0.0-beta.42) (2025-02-10)
+
+
+### :rocket: New Features
+
+* add `emphasize` property to enable customizable hover effects (e.g., border, color) ([9f3e623](https://github.com/hatiolab/operato/commit/9f3e623b061a1d31d7f077b0e751e274a388efd6))
+
+
+
 ## [9.0.0-beta.41](https://github.com/hatiolab/operato/compare/v9.0.0-beta.40...v9.0.0-beta.41) (2025-02-09)
 
 **Note:** Version bump only for package @operato/property-panel

package/dist/src/property-panel/effects/property-emphasize.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/i18n/ox-i18n.js';
+import '@operato/input/ox-input-color.js';
+import { LitElement } from 'lit';
+import { Properties } from '@hatiolab/things-scene';
+/**
+ * 컴포넌트의 강조 속성을 편집하는 element
+ *
+ * Example:
+ *  <property-emphasize
+ *    @change="${e => { this.emphasize = e.target.value }}"
+ *    value="${this.emphasize}"
+ *  ></property-emphasize>
+ */
+export declare class PropertyEmphasize extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value?: Properties;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    onValueChange(e: Event): void;
+}

package/dist/src/property-panel/effects/property-emphasize.js

@@ -0,0 +1,71 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/i18n/ox-i18n.js';
+import '@operato/input/ox-input-color.js';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
+import { convert } from './value-converter.js';
+/**
+ * 컴포넌트의 강조 속성을 편집하는 element
+ *
+ * Example:
+ *  <property-emphasize
+ *    @change="${e => { this.emphasize = e.target.value }}"
+ *    value="${this.emphasize}"
+ *  ></property-emphasize>
+ */
+export class PropertyEmphasize extends LitElement {
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this.onValueChange.bind(this));
+    }
+    render() {
+        const { distance, lineWidth, animation, color, fillStyle } = this.value || {};
+        return html `
+      <div class="property-grid">
+        <label class="icon-only-label color"><md-icon>format_color_fill</md-icon></label>
+        <ox-input-color value-key="fillStyle" .value=${fillStyle}> </ox-input-color>
+
+        <label class="icon-only-label color"><md-icon>border_color</md-icon></label>
+        <ox-input-color value-key="color" .value=${color}> </ox-input-color>
+
+        <label> <ox-i18n msgid="label.emphasize-distance">emphasize distance</ox-i18n> </label>
+        <input type="number" value-key="distance" .value=${distance} />
+
+        <label> <ox-i18n msgid="label.emphasize-line-width">line width</ox-i18n> </label>
+        <input type="number" value-key="lineWidth" .value=${lineWidth} />
+
+        <input id="checkbox-animation" type="checkbox" value-key="animation" .checked=${animation} />
+        <label for="checkbox-animation" class="checkbox-label">
+          <ox-i18n msgid="label.emphasize-animation">emphasize animation</ox-i18n>
+        </label>
+      </div>
+    `;
+    }
+    onValueChange(e) {
+        var element = e.target;
+        var key = element.getAttribute('value-key');
+        if (!key) {
+            return;
+        }
+        this.value = {
+            ...this.value,
+            [key]: convert(element)
+        };
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+}
+PropertyEmphasize.styles = [
+    PropertyGridStyles,
+    css `
+      :host {
+        display: flex;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], PropertyEmphasize.prototype, "value", void 0);
+//# sourceMappingURL=property-emphasize.js.map

package/dist/src/property-panel/effects/property-emphasize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-emphasize.js","sourceRoot":"","sources":["../../../../src/property-panel/effects/property-emphasize.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAE9C;;;;;;;;GAQG;AAEH,MAAM,OAAO,iBAAkB,SAAQ,UAAU;IAY/C,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC3E,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE7E,OAAO,IAAI,CAAA;;;uDAGwC,SAAS;;;mDAGb,KAAK;;;2DAGG,QAAQ;;;4DAGP,SAAS;;wFAEmB,SAAS;;;;;KAK5F,CAAA;IACH,CAAC;IAED,aAAa,CAAC,CAAQ;QACpB,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,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;SACxB,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AAtDM,wBAAM,GAAG;IACd,kBAAkB;IAClB,GAAG,CAAA;;;;KAIF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAmB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-color.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { convert } from './value-converter.js'\n\n/**\n * 컴포넌트의 강조 속성을 편집하는 element\n *\n * Example:\n *  <property-emphasize\n *    @change=\"${e => { this.emphasize = e.target.value }}\"\n *    value=\"${this.emphasize}\"\n *  ></property-emphasize>\n */\n\nexport class PropertyEmphasize extends LitElement {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      :host {\n        display: flex;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n  }\n\n  render() {\n    const { distance, lineWidth, animation, color, fillStyle } = this.value || {}\n\n    return html`\n      <div class=\"property-grid\">\n        <label class=\"icon-only-label color\"><md-icon>format_color_fill</md-icon></label>\n        <ox-input-color value-key=\"fillStyle\" .value=${fillStyle}> </ox-input-color>\n\n        <label class=\"icon-only-label color\"><md-icon>border_color</md-icon></label>\n        <ox-input-color value-key=\"color\" .value=${color}> </ox-input-color>\n\n        <label> <ox-i18n msgid=\"label.emphasize-distance\">emphasize distance</ox-i18n> </label>\n        <input type=\"number\" value-key=\"distance\" .value=${distance} />\n\n        <label> <ox-i18n msgid=\"label.emphasize-line-width\">line width</ox-i18n> </label>\n        <input type=\"number\" value-key=\"lineWidth\" .value=${lineWidth} />\n\n        <input id=\"checkbox-animation\" type=\"checkbox\" value-key=\"animation\" .checked=${animation} />\n        <label for=\"checkbox-animation\" class=\"checkbox-label\">\n          <ox-i18n msgid=\"label.emphasize-animation\">emphasize animation</ox-i18n>\n        </label>\n      </div>\n    `\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    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/property-panel/effects/property-event-hover-emphasize.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/i18n/ox-i18n.js';
+import '@operato/input/ox-input-color.js';
+import { LitElement } from 'lit';
+import { Properties } from '@hatiolab/things-scene';
+/**
+ * 컴포넌트의 강조 속성을 편집하는 element
+ *
+ * Example:
+ *  <property-event-hover-emphasize
+ *    @change="${e => { this.emphasize = e.target.value }}"
+ *    value="${this.emphasize}"
+ *  ></property-event-hover-emphasize>
+ */
+export declare class PropertyEventHoverEmphasize extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value?: Properties;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    onValueChange(e: Event): void;
+}

package/dist/src/property-panel/effects/property-event-hover-emphasize.js

@@ -0,0 +1,66 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/i18n/ox-i18n.js';
+import '@operato/input/ox-input-color.js';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
+import { convert } from './value-converter.js';
+/**
+ * 컴포넌트의 강조 속성을 편집하는 element
+ *
+ * Example:
+ *  <property-event-hover-emphasize
+ *    @change="${e => { this.emphasize = e.target.value }}"
+ *    value="${this.emphasize}"
+ *  ></property-event-hover-emphasize>
+ */
+export class PropertyEventHoverEmphasize extends LitElement {
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this.onValueChange.bind(this));
+    }
+    render() {
+        const { distance, lineWidth, animation, color, fillStyle } = this.value || {};
+        return html `
+      <div class="property-grid">
+        <label class="icon-only-label color"><md-icon>format_color_fill</md-icon></label>
+        <ox-input-color value-key="fillStyle" .value=${fillStyle}> </ox-input-color>
+
+        <label class="icon-only-label color"><md-icon>border_color</md-icon></label>
+        <ox-input-color value-key="color" .value=${color}> </ox-input-color>
+
+        <label> <ox-i18n msgid="label.emphasize-distance">emphasize distance</ox-i18n> </label>
+        <input type="number" value-key="distance" .value=${distance} />
+
+        <label> <ox-i18n msgid="label.emphasize-line-width">line width</ox-i18n> </label>
+        <input type="number" value-key="lineWidth" .value=${lineWidth} />
+      </div>
+    `;
+    }
+    onValueChange(e) {
+        var element = e.target;
+        var key = element.getAttribute('value-key');
+        if (!key) {
+            return;
+        }
+        this.value = {
+            ...this.value,
+            [key]: convert(element)
+        };
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+}
+PropertyEventHoverEmphasize.styles = [
+    PropertyGridStyles,
+    css `
+      :host {
+        display: flex;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], PropertyEventHoverEmphasize.prototype, "value", void 0);
+//# sourceMappingURL=property-event-hover-emphasize.js.map

package/dist/src/property-panel/effects/property-event-hover-emphasize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-event-hover-emphasize.js","sourceRoot":"","sources":["../../../../src/property-panel/effects/property-event-hover-emphasize.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAE9C;;;;;;;;GAQG;AAEH,MAAM,OAAO,2BAA4B,SAAQ,UAAU;IAYzD,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC3E,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE7E,OAAO,IAAI,CAAA;;;uDAGwC,SAAS;;;mDAGb,KAAK;;;2DAGG,QAAQ;;;4DAGP,SAAS;;KAEhE,CAAA;IACH,CAAC;IAED,aAAa,CAAC,CAAQ;QACpB,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,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;SACxB,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AAjDM,kCAAM,GAAG;IACd,kBAAkB;IAClB,GAAG,CAAA;;;;KAIF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAmB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-color.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { convert } from './value-converter.js'\n\n/**\n * 컴포넌트의 강조 속성을 편집하는 element\n *\n * Example:\n *  <property-event-hover-emphasize\n *    @change=\"${e => { this.emphasize = e.target.value }}\"\n *    value=\"${this.emphasize}\"\n *  ></property-event-hover-emphasize>\n */\n\nexport class PropertyEventHoverEmphasize extends LitElement {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      :host {\n        display: flex;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n  }\n\n  render() {\n    const { distance, lineWidth, animation, color, fillStyle } = this.value || {}\n\n    return html`\n      <div class=\"property-grid\">\n        <label class=\"icon-only-label color\"><md-icon>format_color_fill</md-icon></label>\n        <ox-input-color value-key=\"fillStyle\" .value=${fillStyle}> </ox-input-color>\n\n        <label class=\"icon-only-label color\"><md-icon>border_color</md-icon></label>\n        <ox-input-color value-key=\"color\" .value=${color}> </ox-input-color>\n\n        <label> <ox-i18n msgid=\"label.emphasize-distance\">emphasize distance</ox-i18n> </label>\n        <input type=\"number\" value-key=\"distance\" .value=${distance} />\n\n        <label> <ox-i18n msgid=\"label.emphasize-line-width\">line width</ox-i18n> </label>\n        <input type=\"number\" value-key=\"lineWidth\" .value=${lineWidth} />\n      </div>\n    `\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    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/property-panel/effects/property-event-hover.d.ts

@@ -5,10 +5,16 @@ import '@operato/input/ox-input-data.js';
 import '@operato/i18n/ox-i18n.js';
 import { LitElement } from 'lit';
 import { Properties, Scene } from '@hatiolab/things-scene';
-export declare class PropertyEventHover extends LitElement {
+import { PropertyEventHoverEmphasize } from './property-event-hover-emphasize.js';
+declare const PropertyEventHover_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
+export declare class PropertyEventHover extends PropertyEventHover_base {
     static styles: import("lit").CSSResult[];
     value?: Properties;
     scene?: Scene;
+    private useEmphasize;
+    static get scopedElements(): {
+        'property-event-hover-emphasize': typeof PropertyEventHoverEmphasize;
+    };
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
     _getPlaceHoder(action: string): "" | "SCENE-100" | "http://www.hatiolab.com/";
@@ -19,3 +25,4 @@ export declare class PropertyEventHover extends LitElement {
     }[];
     onValueChange(e: Event): void;
 }
+export {};

package/dist/src/property-panel/effects/property-event-hover.js

@@ -4,26 +4,58 @@
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-data.js';
 import '@operato/i18n/ox-i18n.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
 import { convert } from './value-converter.js';
+import { PropertyEventHoverEmphasize } from './property-event-hover-emphasize.js';
 const SETS_ACTION = ['data-set', 'partial-data-set', 'value-set', 'partial-value-set'];
-export class PropertyEventHover extends LitElement {
+export class PropertyEventHover extends ScopedElementsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.useEmphasize = false;
+    }
+    static get scopedElements() {
+        return {
+            'property-event-hover-emphasize': PropertyEventHoverEmphasize
+        };
+    }
     firstUpdated() {
         this.renderRoot.addEventListener('change', this.onValueChange.bind(this));
     }
     render() {
         var { action, value = '', target = '', emphasize, restore } = this.value || {};
+        if (emphasize === true) {
+            emphasize = {
+                distance: 0,
+                animation: false
+            };
+        }
+        else if (emphasize === false) {
+            emphasize = null;
+        }
+        this.useEmphasize = !!emphasize;
         return html `
       <div class="property-grid">
-        <input id="checkbox-emphasize" type="checkbox" value-key="emphasize" .checked=${emphasize} />
-        <label for="checkbox-emphasize" class="checkbox-label">
+        <input id="checkbox-use-emphasize" type="checkbox" value-key="use-emphasize" .checked=${!!this.useEmphasize} />
+        <label for="checkbox-use-emphasize" class="checkbox-label">
           <ox-i18n msgid="label.emphasize">emphasize</ox-i18n>
         </label>
 
-        <label> <ox-i18n msgid="label.action">action</ox-i18n> </label>
+        ${!!this.useEmphasize
+            ? html `
+              <property-event-hover-emphasize
+                id="emphasize"
+                class="fullwidth"
+                value-key="emphasize"
+                .value=${emphasize}
+              ></property-event-hover-emphasize>
+            `
+            : nothing}
+
+        <label> <ox-i18n msgid="label.hover-action">hover action</ox-i18n> </label>
         <select id="tap-select" value-key="action" .value=${action || ''}>
           <option value=""></option>
           <option value="popup">popup target board</option>
@@ -73,7 +105,7 @@ export class PropertyEventHover extends LitElement {
 
         <input id="checkbox-restore" type="checkbox" value-key="restore" .checked=${restore} />
         <label for="checkbox-restore" class="checkbox-label">
-          <ox-i18n msgid="label.restore-on-leave">restore on leave</ox-i18n>
+          <ox-i18n msgid="label.reset-on-leave">restore on leave</ox-i18n>
         </label>
       </div>
     `;
@@ -133,16 +165,28 @@ export class PropertyEventHover extends LitElement {
         if (!key) {
             return;
         }
-        this.value = {
-            ...this.value,
-            [key]: convert(element)
-        };
+        if (key == 'use-emphasize') {
+            this.value = {
+                ...this.value,
+                emphasize: element.checked ? {} : null
+            };
+        }
+        else {
+            this.value = {
+                ...this.value,
+                [key]: convert(element)
+            };
+        }
         this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
     }
 }
 PropertyEventHover.styles = [
     PropertyGridStyles,
     css `
+      property-event-hover-emphasize {
+        padding-bottom: var(--spacing-large);
+      }
+
       datalist option.cursor-auto {
         cursor: auto;
       }

package/dist/src/property-panel/effects/property-event-hover.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-event-hover.js","sourceRoot":"","sources":["../../../../src/property-panel/effects/property-event-hover.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { convert } from './value-converter.js'\n\nconst SETS_ACTION = ['data-set', 'partial-data-set', 'value-set', 'partial-value-set']\n\nexport class PropertyEventHover extends LitElement {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      datalist option.cursor-auto {\n        cursor: auto;\n      }\n\n      datalist option.cursor-pointer {\n        cursor: pointer;\n      }\n\n      datalist option.cursor-default {\n        cursor: default;\n      }\n\n      datalist option.cursor-move {\n        cursor: move;\n      }\n\n      datalist option.cursor-text {\n        cursor: text;\n      }\n\n      datalist option.cursor-wait {\n        cursor: wait;\n      }\n\n      datalist option.cursor-help {\n        cursor: help;\n      }\n\n      datalist option.cursor-crosshair {\n        cursor: crosshair;\n      }\n\n      datalist option.cursor-not-allowed {\n        cursor: not-allowed;\n      }\n\n      datalist option.cursor-grab {\n        cursor: grab;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', emphasize, restore } = this.value || {}\n\n    return html`\n      <div class=\"property-grid\">\n        <input id=\"checkbox-emphasize\" type=\"checkbox\" value-key=\"emphasize\" .checked=${emphasize} />\n        <label for=\"checkbox-emphasize\" class=\"checkbox-label\">\n          <ox-i18n msgid=\"label.emphasize\">emphasize</ox-i18n>\n        </label>\n\n        <label> <ox-i18n msgid=\"label.action\">action</ox-i18n> </label>\n        <select id=\"tap-select\" value-key=\"action\" .value=${action || ''}>\n          <option value=\"\"></option>\n          <option value=\"popup\">popup target board</option>\n          <option value=\"info-window\">open infowindow</option>\n          <option value=\"data-toggle\">toggle(true/false) target component data</option>\n          <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n          <option value=\"data-set\">set value to target component data</option>\n          <option value=\"value-set\">set value to target component value</option>\n          <option value=\"mouse-cursor\">change mouse cursor to target style</option>\n        </select>\n\n        <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n\n        ${action == 'popup'\n          ? html`\n              <ox-editor-board-selector\n                class=\"custom-editor\"\n                value-key=\"target\"\n                .value=${target}\n              ></ox-editor-board-selector>\n            `\n          : html`\n              <input\n                value-key=\"target\"\n                .value=${target || ''}\n                list=\"target-list\"\n                .placeholder=\"${this._getPlaceHoder(action)}\"\n              />\n\n              <datalist id=\"target-list\">\n                ${this._getTargetList(action).map(\n                  ({ value, description, class: clazz }) => html`\n                    <option .value=${value} class=${ifDefined(clazz)}>${description}</option>\n                  `\n                )}\n              </datalist>\n            `}\n        ${SETS_ACTION.indexOf(action) != -1\n          ? html`\n              <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n              <ox-input-data\n                class=\"custom-editor fullwidth\"\n                value-key=\"value\"\n                .value=${value}\n                fullwidth\n              ></ox-input-data>\n            `\n          : html``}\n\n        <input id=\"checkbox-restore\" type=\"checkbox\" value-key=\"restore\" .checked=${restore} />\n        <label for=\"checkbox-restore\" class=\"checkbox-label\">\n          <ox-i18n msgid=\"label.restore-on-leave\">restore on leave</ox-i18n>\n        </label>\n      </div>\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'popup':\n      case 'goto':\n        return 'SCENE-100'\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      default:\n        return ''\n    }\n  }\n\n  _getTargetList(action: string): { value: string; description?: string; class?: string }[] {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n      case 'partial-data-set':\n      case 'partial-value-set':\n        let ids =\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        ids.unshift({ value: '(self)', description: 'self component' })\n        return ids\n\n      case 'info-window':\n        return (\n          (this.scene &&\n            this.scene.ids\n              .filter(i => {\n                return this.scene!.findById(i.key).get('type') == 'info-window'\n              })\n              .map(i => {\n                const id = i.key\n                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n              })) ||\n          []\n        )\n\n      case 'mouse-cursor':\n        return ['auto', 'pointer', 'default', 'move', 'text', 'wait', 'help', 'crosshair', 'not-allowed', 'grab'].map(\n          style => {\n            return { value: style, class: `cursor-${style}` }\n          }\n        )\n\n      default:\n        return []\n    }\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    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"property-event-hover.js","sourceRoot":"","sources":["../../../../src/property-panel/effects/property-event-hover.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { convert } from './value-converter.js'\nimport { PropertyEventHoverEmphasize } from './property-event-hover-emphasize.js'\n\nconst SETS_ACTION = ['data-set', 'partial-data-set', 'value-set', 'partial-value-set']\n\nexport class PropertyEventHover extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      property-event-hover-emphasize {\n        padding-bottom: var(--spacing-large);\n      }\n\n      datalist option.cursor-auto {\n        cursor: auto;\n      }\n\n      datalist option.cursor-pointer {\n        cursor: pointer;\n      }\n\n      datalist option.cursor-default {\n        cursor: default;\n      }\n\n      datalist option.cursor-move {\n        cursor: move;\n      }\n\n      datalist option.cursor-text {\n        cursor: text;\n      }\n\n      datalist option.cursor-wait {\n        cursor: wait;\n      }\n\n      datalist option.cursor-help {\n        cursor: help;\n      }\n\n      datalist option.cursor-crosshair {\n        cursor: crosshair;\n      }\n\n      datalist option.cursor-not-allowed {\n        cursor: not-allowed;\n      }\n\n      datalist option.cursor-grab {\n        cursor: grab;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  private useEmphasize: boolean = false\n\n  static get scopedElements() {\n    return {\n      'property-event-hover-emphasize': PropertyEventHoverEmphasize\n    }\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', emphasize, restore } = this.value || {}\n\n    if (emphasize === true) {\n      emphasize = {\n        distance: 0,\n        animation: false\n      }\n    } else if (emphasize === false) {\n      emphasize = null\n    }\n\n    this.useEmphasize = !!emphasize\n\n    return html`\n      <div class=\"property-grid\">\n        <input id=\"checkbox-use-emphasize\" type=\"checkbox\" value-key=\"use-emphasize\" .checked=${!!this.useEmphasize} />\n        <label for=\"checkbox-use-emphasize\" class=\"checkbox-label\">\n          <ox-i18n msgid=\"label.emphasize\">emphasize</ox-i18n>\n        </label>\n\n        ${!!this.useEmphasize\n          ? html`\n              <property-event-hover-emphasize\n                id=\"emphasize\"\n                class=\"fullwidth\"\n                value-key=\"emphasize\"\n                .value=${emphasize}\n              ></property-event-hover-emphasize>\n            `\n          : nothing}\n\n        <label> <ox-i18n msgid=\"label.hover-action\">hover action</ox-i18n> </label>\n        <select id=\"tap-select\" value-key=\"action\" .value=${action || ''}>\n          <option value=\"\"></option>\n          <option value=\"popup\">popup target board</option>\n          <option value=\"info-window\">open infowindow</option>\n          <option value=\"data-toggle\">toggle(true/false) target component data</option>\n          <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n          <option value=\"data-set\">set value to target component data</option>\n          <option value=\"value-set\">set value to target component value</option>\n          <option value=\"mouse-cursor\">change mouse cursor to target style</option>\n        </select>\n\n        <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n\n        ${action == 'popup'\n          ? html`\n              <ox-editor-board-selector\n                class=\"custom-editor\"\n                value-key=\"target\"\n                .value=${target}\n              ></ox-editor-board-selector>\n            `\n          : html`\n              <input\n                value-key=\"target\"\n                .value=${target || ''}\n                list=\"target-list\"\n                .placeholder=\"${this._getPlaceHoder(action)}\"\n              />\n\n              <datalist id=\"target-list\">\n                ${this._getTargetList(action).map(\n                  ({ value, description, class: clazz }) => html`\n                    <option .value=${value} class=${ifDefined(clazz)}>${description}</option>\n                  `\n                )}\n              </datalist>\n            `}\n        ${SETS_ACTION.indexOf(action) != -1\n          ? html`\n              <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n              <ox-input-data\n                class=\"custom-editor fullwidth\"\n                value-key=\"value\"\n                .value=${value}\n                fullwidth\n              ></ox-input-data>\n            `\n          : html``}\n\n        <input id=\"checkbox-restore\" type=\"checkbox\" value-key=\"restore\" .checked=${restore} />\n        <label for=\"checkbox-restore\" class=\"checkbox-label\">\n          <ox-i18n msgid=\"label.reset-on-leave\">restore on leave</ox-i18n>\n        </label>\n      </div>\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'popup':\n      case 'goto':\n        return 'SCENE-100'\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      default:\n        return ''\n    }\n  }\n\n  _getTargetList(action: string): { value: string; description?: string; class?: string }[] {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n      case 'partial-data-set':\n      case 'partial-value-set':\n        let ids =\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        ids.unshift({ value: '(self)', description: 'self component' })\n        return ids\n\n      case 'info-window':\n        return (\n          (this.scene &&\n            this.scene.ids\n              .filter(i => {\n                return this.scene!.findById(i.key).get('type') == 'info-window'\n              })\n              .map(i => {\n                const id = i.key\n                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n              })) ||\n          []\n        )\n\n      case 'mouse-cursor':\n        return ['auto', 'pointer', 'default', 'move', 'text', 'wait', 'help', 'crosshair', 'not-allowed', 'grab'].map(\n          style => {\n            return { value: style, class: `cursor-${style}` }\n          }\n        )\n\n      default:\n        return []\n    }\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    if (key == 'use-emphasize') {\n      this.value = {\n        ...this.value,\n        emphasize: (element as HTMLInputElement).checked ? {} : null\n      }\n    } else {\n      this.value = {\n        ...this.value,\n        [key]: convert(element)\n      }\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/property-panel/effects/property-event-tap.js

@@ -29,7 +29,7 @@ export class PropertyEventTap extends LitElement {
         <input id="checkbox-pressed" type="checkbox" value-key="pressed" .checked=${pressed} />
         <label for="checkbox-pressed" class="checkbox-label"> <ox-i18n msgid="label.pressed">pressed</ox-i18n> </label>
 
-        <label> <ox-i18n msgid="label.action">action</ox-i18n> </label>
+        <label> <ox-i18n msgid="label.tap-action">tap action</ox-i18n> </label>
         <select
           id="tap-select"
           value-key="action"

package/dist/src/property-panel/effects/property-event-tap.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-event-tap.js","sourceRoot":"","sources":["../../../../src/property-panel/effects/property-event-tap.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { scenarios } from '../../graphql/scenario.js'\nimport { playlists } from '../../graphql/play-group.js'\nimport { convert } from './value-converter.js'\n\nconst SETS_ACTION = ['data-set', 'partial-data-set', 'value-set', 'partial-value-set', 'start-scenario', 'run-scenario']\n\nexport class PropertyEventTap extends LitElement {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      :host {\n        display: flex;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  @state() scenarios: { value: string; description: string }[] = []\n  @state() playlists: { value: string; description: string }[] = []\n  @state() targetList: { value: string; description: string }[] = []\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', pressed, options } = this.value || {}\n    var { input = '(self)', output = true } = options || {}\n\n    return html`\n      <div class=\"property-grid\">\n        <input id=\"checkbox-pressed\" type=\"checkbox\" value-key=\"pressed\" .checked=${pressed} />\n        <label for=\"checkbox-pressed\" class=\"checkbox-label\"> <ox-i18n msgid=\"label.pressed\">pressed</ox-i18n> </label>\n\n        <label> <ox-i18n msgid=\"label.action\">action</ox-i18n> </label>\n        <select\n          id=\"tap-select\"\n          value-key=\"action\"\n          .value=${action || ''}\n          @change=${async (e: Event) => {\n            if ((e.target as HTMLSelectElement).value.includes('scenario')) {\n              this.scenarios = (await scenarios()).map(({ name, description }) => {\n                return { value: name, description }\n              })\n            } else if ((e.target as HTMLSelectElement).value == 'goto-playlist') {\n              this.playlists = (await playlists()).map(({ name, description }) => {\n                return { value: name, description }\n              })\n            }\n          }}\n        >\n          <option value=\"\"></option>\n          <option value=\"goto\">go to target board</option>\n          <option value=\"goto-playlist\">go to target playlist</option>\n          <option value=\"link-open\">open new window for target link</option>\n          <option value=\"link-move\">move to target link</option>\n          <option value=\"route-page\">route to page</option>\n          <option value=\"popup\">popup target board</option>\n          <option value=\"modal-popup\">modal popup target board</option>\n          <option value=\"close-scene\">close current board</option>\n          <option value=\"infoWindow\">open infowindow</option>\n          <option value=\"toggle-info-window\">toggle infowindow</option>\n          <option value=\"data-toggle\">toggle(true/false) target component data</option>\n          <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n          <option value=\"data-spreading\">forcely execute data spreading of target component</option>\n          <option value=\"data-set\">set value to target component data</option>\n          <option value=\"partial-data-set\">set partial value to target component data</option>\n          <option value=\"value-set\">set value to target component value</option>\n          <option value=\"partial-value-set\">set partial value to target component value</option>\n          <option value=\"start-scenario\">start the given scenario</option>\n          <option value=\"run-scenario\">run the given scenario</option>\n          <option value=\"export-data\">export data</option>\n          <option value=\"import-data\">import data</option>\n        </select>\n\n        <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n\n        ${action === 'goto' || action?.includes('popup')\n          ? html`\n              <ox-editor-board-selector\n                class=\"custom-editor\"\n                value-key=\"target\"\n                .value=${target}\n              ></ox-editor-board-selector>\n            `\n          : html`\n              <input\n                value-key=\"target\"\n                .value=${target}\n                list=\"target-list\"\n                .placeholder=${this._getPlaceHoder(action)}\n                @focusin=${() => {\n                  this.targetList = this._getTargetList(action)\n                }}\n              />\n\n              <datalist id=\"target-list\">\n                ${this.targetList.map(\n                  ({ value, description }) => html` <option .value=${value}>${description}</option> `\n                )}\n              </datalist>\n            `}\n        ${action === 'goto' || action === 'goto-playlist' || action?.includes('popup')\n          ? html`\n              <label for=\"input\"> <ox-i18n msgid=\"label.input-data\">input</ox-i18n> </label>\n              <input\n                id=\"input\"\n                value-key=\"input\"\n                .value=${input}\n                list=\"input-list\"\n                @focusin=${() => {\n                  this.targetList = this._getInputList(action)\n                }}\n              />\n              <datalist id=\"input-list\">\n                ${this.targetList.map(\n                  ({ value, description }) => html` <option .value=${value}>${description}</option> `\n                )}\n              </datalist>\n              ${\n                /* currently 'goto' does not support returning result */\n                action?.includes('popup')\n                  ? html` <input id=\"checkbox-output\" type=\"checkbox\" value-key=\"output\" .checked=${output} />\n                      <label for=\"checkbox-output\" class=\"checkbox-label\">\n                        <ox-i18n msgid=\"label.will-get-return\">will-get-return</ox-i18n>\n                      </label>`\n                  : html``\n              }\n            `\n          : SETS_ACTION.indexOf(action) != -1\n            ? html`\n                <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n                <ox-input-data\n                  class=\"custom-editor fullwidth\"\n                  value-key=\"value\"\n                  .value=${value}\n                  fullwidth\n                ></ox-input-data>\n              `\n            : html``}\n      </div>\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      case 'export-data':\n        return 'abc.xlsx'\n      default:\n        return ''\n    }\n  }\n\n  _getTargetList(action: string): { value: string; description: string }[] {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n      case 'popup':\n      case 'modal-popup':\n      case 'data-spreading':\n        let ids =\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        ids.unshift({ value: '(self)', description: 'self component' })\n        return ids\n      case 'infoWindow':\n      case 'toggle-info-window':\n        return (\n          (this.scene &&\n            this.scene.ids\n              .filter(i => {\n                return this.scene!.findById(i.key).get('type') == 'info-window'\n              })\n              .map(i => {\n                const id = i.key\n                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n              })) ||\n          []\n        )\n      case 'start-scenario':\n      case 'run-scenario':\n        return this.scenarios\n      case 'goto-playlist':\n        return this.playlists\n      case 'export-data':\n      default:\n        return []\n    }\n  }\n\n  _getInputList(action: string): { value: string; description: string }[] {\n    switch (action) {\n      case 'popup':\n      case 'modal-popup':\n      case 'data-spreading':\n      case 'goto':\n      case 'goto-playlist':\n        let ids =\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        ids.unshift({ value: '(self)', description: 'self component' })\n        return ids\n      default:\n        return []\n    }\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    if (key === 'input' || key === 'output') {\n      var { options = {} } = this.value || {}\n\n      this.value = {\n        ...this.value,\n        options: {\n          ...options,\n          [key]: convert(element)\n        }\n      }\n    } else {\n      this.value = {\n        ...this.value,\n        [key]: convert(element)\n      }\n    }\n\n    var { action } = this.value\n    if (action !== 'goto' && action !== 'goto-playlist' && !action?.includes('popup')) {\n      /* clear unused options */\n      delete this.value.options\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"property-event-tap.js","sourceRoot":"","sources":["../../../../src/property-panel/effects/property-event-tap.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { scenarios } from '../../graphql/scenario.js'\nimport { playlists } from '../../graphql/play-group.js'\nimport { convert } from './value-converter.js'\n\nconst SETS_ACTION = ['data-set', 'partial-data-set', 'value-set', 'partial-value-set', 'start-scenario', 'run-scenario']\n\nexport class PropertyEventTap extends LitElement {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      :host {\n        display: flex;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  @state() scenarios: { value: string; description: string }[] = []\n  @state() playlists: { value: string; description: string }[] = []\n  @state() targetList: { value: string; description: string }[] = []\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', pressed, options } = this.value || {}\n    var { input = '(self)', output = true } = options || {}\n\n    return html`\n      <div class=\"property-grid\">\n        <input id=\"checkbox-pressed\" type=\"checkbox\" value-key=\"pressed\" .checked=${pressed} />\n        <label for=\"checkbox-pressed\" class=\"checkbox-label\"> <ox-i18n msgid=\"label.pressed\">pressed</ox-i18n> </label>\n\n        <label> <ox-i18n msgid=\"label.tap-action\">tap action</ox-i18n> </label>\n        <select\n          id=\"tap-select\"\n          value-key=\"action\"\n          .value=${action || ''}\n          @change=${async (e: Event) => {\n            if ((e.target as HTMLSelectElement).value.includes('scenario')) {\n              this.scenarios = (await scenarios()).map(({ name, description }) => {\n                return { value: name, description }\n              })\n            } else if ((e.target as HTMLSelectElement).value == 'goto-playlist') {\n              this.playlists = (await playlists()).map(({ name, description }) => {\n                return { value: name, description }\n              })\n            }\n          }}\n        >\n          <option value=\"\"></option>\n          <option value=\"goto\">go to target board</option>\n          <option value=\"goto-playlist\">go to target playlist</option>\n          <option value=\"link-open\">open new window for target link</option>\n          <option value=\"link-move\">move to target link</option>\n          <option value=\"route-page\">route to page</option>\n          <option value=\"popup\">popup target board</option>\n          <option value=\"modal-popup\">modal popup target board</option>\n          <option value=\"close-scene\">close current board</option>\n          <option value=\"infoWindow\">open infowindow</option>\n          <option value=\"toggle-info-window\">toggle infowindow</option>\n          <option value=\"data-toggle\">toggle(true/false) target component data</option>\n          <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n          <option value=\"data-spreading\">forcely execute data spreading of target component</option>\n          <option value=\"data-set\">set value to target component data</option>\n          <option value=\"partial-data-set\">set partial value to target component data</option>\n          <option value=\"value-set\">set value to target component value</option>\n          <option value=\"partial-value-set\">set partial value to target component value</option>\n          <option value=\"start-scenario\">start the given scenario</option>\n          <option value=\"run-scenario\">run the given scenario</option>\n          <option value=\"export-data\">export data</option>\n          <option value=\"import-data\">import data</option>\n        </select>\n\n        <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n\n        ${action === 'goto' || action?.includes('popup')\n          ? html`\n              <ox-editor-board-selector\n                class=\"custom-editor\"\n                value-key=\"target\"\n                .value=${target}\n              ></ox-editor-board-selector>\n            `\n          : html`\n              <input\n                value-key=\"target\"\n                .value=${target}\n                list=\"target-list\"\n                .placeholder=${this._getPlaceHoder(action)}\n                @focusin=${() => {\n                  this.targetList = this._getTargetList(action)\n                }}\n              />\n\n              <datalist id=\"target-list\">\n                ${this.targetList.map(\n                  ({ value, description }) => html` <option .value=${value}>${description}</option> `\n                )}\n              </datalist>\n            `}\n        ${action === 'goto' || action === 'goto-playlist' || action?.includes('popup')\n          ? html`\n              <label for=\"input\"> <ox-i18n msgid=\"label.input-data\">input</ox-i18n> </label>\n              <input\n                id=\"input\"\n                value-key=\"input\"\n                .value=${input}\n                list=\"input-list\"\n                @focusin=${() => {\n                  this.targetList = this._getInputList(action)\n                }}\n              />\n              <datalist id=\"input-list\">\n                ${this.targetList.map(\n                  ({ value, description }) => html` <option .value=${value}>${description}</option> `\n                )}\n              </datalist>\n              ${\n                /* currently 'goto' does not support returning result */\n                action?.includes('popup')\n                  ? html` <input id=\"checkbox-output\" type=\"checkbox\" value-key=\"output\" .checked=${output} />\n                      <label for=\"checkbox-output\" class=\"checkbox-label\">\n                        <ox-i18n msgid=\"label.will-get-return\">will-get-return</ox-i18n>\n                      </label>`\n                  : html``\n              }\n            `\n          : SETS_ACTION.indexOf(action) != -1\n            ? html`\n                <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n                <ox-input-data\n                  class=\"custom-editor fullwidth\"\n                  value-key=\"value\"\n                  .value=${value}\n                  fullwidth\n                ></ox-input-data>\n              `\n            : html``}\n      </div>\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      case 'export-data':\n        return 'abc.xlsx'\n      default:\n        return ''\n    }\n  }\n\n  _getTargetList(action: string): { value: string; description: string }[] {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n      case 'popup':\n      case 'modal-popup':\n      case 'data-spreading':\n        let ids =\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        ids.unshift({ value: '(self)', description: 'self component' })\n        return ids\n      case 'infoWindow':\n      case 'toggle-info-window':\n        return (\n          (this.scene &&\n            this.scene.ids\n              .filter(i => {\n                return this.scene!.findById(i.key).get('type') == 'info-window'\n              })\n              .map(i => {\n                const id = i.key\n                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n              })) ||\n          []\n        )\n      case 'start-scenario':\n      case 'run-scenario':\n        return this.scenarios\n      case 'goto-playlist':\n        return this.playlists\n      case 'export-data':\n      default:\n        return []\n    }\n  }\n\n  _getInputList(action: string): { value: string; description: string }[] {\n    switch (action) {\n      case 'popup':\n      case 'modal-popup':\n      case 'data-spreading':\n      case 'goto':\n      case 'goto-playlist':\n        let ids =\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        ids.unshift({ value: '(self)', description: 'self component' })\n        return ids\n      default:\n        return []\n    }\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    if (key === 'input' || key === 'output') {\n      var { options = {} } = this.value || {}\n\n      this.value = {\n        ...this.value,\n        options: {\n          ...options,\n          [key]: convert(element)\n        }\n      }\n    } else {\n      this.value = {\n        ...this.value,\n        [key]: convert(element)\n      }\n    }\n\n    var { action } = this.value\n    if (action !== 'goto' && action !== 'goto-playlist' && !action?.includes('popup')) {\n      /* clear unused options */\n      delete this.value.options\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}