@operato/property-panel 9.0.0-beta.14

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

@@ -0,0 +1,147 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/input/ox-input-angle.js';
+import '@operato/i18n/ox-i18n.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';
+/**
+ * 컴포넌트의 animation 속성을 편집하는 element
+
+Example:
+
+    <property-animation .value=${animation}>
+    </property-animation>
+*/
+export class PropertyAnimation extends LitElement {
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this.onValueChange.bind(this));
+    }
+    render() {
+        var _a;
+        const value = this.value || {};
+        return html `
+      <div class="property-grid">
+        <label>Animation Type</label>
+        <select value-key="type" .value=${value.type}>
+          <option value="">None</option>
+          <option value="rotation">Rotation</option>
+          <option value="vibration">Vibration</option>
+          <option value="heartbeat">Heartbeat</option>
+          <option value="moving">Moving</option>
+          <option value="fade">Fade</option>
+          <option value="outline">Outline</option>
+        </select>
+
+        <label> <ox-i18n msgid="label.waiting-time">waiting time</ox-i18n> </label>
+        <input type="number" value-key="delay" .value=${value.delay} placeholder="ms" />
+
+        <label> <ox-i18n msgid="label.duration">duration</ox-i18n> </label>
+        <input type="number" value-key="duration" .value=${value.duration} placeholder="ms" />
+
+        <label> <ox-i18n msgid="label.animation-interval">interval</ox-i18n> </label>
+        <input type="number" value-key="interval" .value=${value.interval} placeholder="ms" />
+
+        ${value.type == 'rotation' || value.type == 'vibration'
+            ? html `
+              <label> <ox-i18n msgid="label.theta">theta</ox-i18n> </label>
+              <ox-input-angle value-key="theta" .value=${value.theta}> </ox-input-angle>
+            `
+            : html ``}
+        ${value.type == 'heartbeat'
+            ? html `
+              <label> <ox-i18n msgid="label.scale">scale</ox-i18n> </label>
+              <input type="number" value-key="scale" .value=${value.scale} />
+            `
+            : html ``}
+        ${value.type == 'moving'
+            ? html `
+              <label> <ox-i18n msgid="label.x-axes">X-axes</ox-i18n> </label>
+              <input type="number" value-key="x" .value=${value.x} />
+
+              <label> <ox-i18n msgid="label.y-axes">Y-axes</ox-i18n> </label>
+              <input type="number" value-key="y" .value=${value.y} />
+            `
+            : html ``}
+        ${value.type == 'fade'
+            ? html `
+              <label> <ox-i18n msgid="label.start-alpha">start alpha</ox-i18n> </label>
+              <input type="number" value-key="startAlpha" .value=${value.startAlpha} />
+
+              <label> <ox-i18n msgid="label.end-alpha">end alpha</ox-i18n> </label>
+              <input type="number" value-key="endAlpha" .value=${value.endAlpha} />
+            `
+            : html ``}
+        ${value.type == 'outline'
+            ? html `
+              <label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
+              <input value-key="rideOn" .value=${value.rideOn || ''} list="target-list" />
+              <datalist id="target-list">
+                ${this.scene.ids.map(info => info.key).map(id => html ` <option value=${id}></option> `)}
+              </datalist>
+            `
+            : html ``}
+
+        <input id="checkbox-repeat" value-key="repeat" type="checkbox" .checked=${value.repeat} />
+        <label for="checkbox-repeat" class="checkbox-label"> <ox-i18n msgid="label.repeat">repeat</ox-i18n> </label>
+
+        <input
+          id="checkbox-autoplay"
+          value-key="autoplay"
+          type="checkbox"
+          .checked=${value.autoplay || ((_a = value.autoplay) !== null && _a !== void 0 ? _a : true)}
+        />
+        <label for="checkbox-autoplay" class="checkbox-label">
+          <ox-i18n msgid="label.autoplay">autoplay</ox-i18n>
+        </label>
+
+        <label>delta</label>
+        <select value-key="delta" .value=${value.delta}>
+          <option value="linear">linear</option>
+          <option value="quad">quad</option>
+          <option value="circ">circ</option>
+          <option value="back">back</option>
+          <option value="bounce">bounce</option>
+          <option value="elastic">elastic</option>
+        </select>
+
+        <label>ease</label>
+        <select value-key="ease" .value=${value.ease}>
+          <option value="in">in</option>
+          <option value="out">out</option>
+          <option value="inout">inout</option>
+        </select>
+      </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 }));
+    }
+}
+PropertyAnimation.styles = [
+    PropertyGridStyles,
+    css `
+      :host {
+        display: flex;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], PropertyAnimation.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], PropertyAnimation.prototype, "scene", void 0);
+//# sourceMappingURL=property-animation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"property-animation.js","sourceRoot":"","sources":["../../../../src/property-panel/effects/property-animation.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.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\n/**\n * 컴포넌트의 animation 속성을 편집하는 element\n\nExample:\n\n    <property-animation .value=${animation}>\n    </property-animation>\n*/\n\nexport class PropertyAnimation 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  firstUpdated() {\n    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n  }\n\n  render() {\n    const value = this.value || {}\n\n    return html`\n      <div class=\"property-grid\">\n        <label>Animation Type</label>\n        <select value-key=\"type\" .value=${value.type}>\n          <option value=\"\">None</option>\n          <option value=\"rotation\">Rotation</option>\n          <option value=\"vibration\">Vibration</option>\n          <option value=\"heartbeat\">Heartbeat</option>\n          <option value=\"moving\">Moving</option>\n          <option value=\"fade\">Fade</option>\n          <option value=\"outline\">Outline</option>\n        </select>\n\n        <label> <ox-i18n msgid=\"label.waiting-time\">waiting time</ox-i18n> </label>\n        <input type=\"number\" value-key=\"delay\" .value=${value.delay} placeholder=\"ms\" />\n\n        <label> <ox-i18n msgid=\"label.duration\">duration</ox-i18n> </label>\n        <input type=\"number\" value-key=\"duration\" .value=${value.duration} placeholder=\"ms\" />\n\n        <label> <ox-i18n msgid=\"label.animation-interval\">interval</ox-i18n> </label>\n        <input type=\"number\" value-key=\"interval\" .value=${value.interval} placeholder=\"ms\" />\n\n        ${value.type == 'rotation' || value.type == 'vibration'\n          ? html`\n              <label> <ox-i18n msgid=\"label.theta\">theta</ox-i18n> </label>\n              <ox-input-angle value-key=\"theta\" .value=${value.theta}> </ox-input-angle>\n            `\n          : html``}\n        ${value.type == 'heartbeat'\n          ? html`\n              <label> <ox-i18n msgid=\"label.scale\">scale</ox-i18n> </label>\n              <input type=\"number\" value-key=\"scale\" .value=${value.scale} />\n            `\n          : html``}\n        ${value.type == 'moving'\n          ? html`\n              <label> <ox-i18n msgid=\"label.x-axes\">X-axes</ox-i18n> </label>\n              <input type=\"number\" value-key=\"x\" .value=${value.x} />\n\n              <label> <ox-i18n msgid=\"label.y-axes\">Y-axes</ox-i18n> </label>\n              <input type=\"number\" value-key=\"y\" .value=${value.y} />\n            `\n          : html``}\n        ${value.type == 'fade'\n          ? html`\n              <label> <ox-i18n msgid=\"label.start-alpha\">start alpha</ox-i18n> </label>\n              <input type=\"number\" value-key=\"startAlpha\" .value=${value.startAlpha} />\n\n              <label> <ox-i18n msgid=\"label.end-alpha\">end alpha</ox-i18n> </label>\n              <input type=\"number\" value-key=\"endAlpha\" .value=${value.endAlpha} />\n            `\n          : html``}\n        ${value.type == 'outline'\n          ? html`\n              <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n              <input value-key=\"rideOn\" .value=${value.rideOn || ''} list=\"target-list\" />\n              <datalist id=\"target-list\">\n                ${this.scene!.ids.map(info => info.key).map(id => html` <option value=${id}></option> `)}\n              </datalist>\n            `\n          : html``}\n\n        <input id=\"checkbox-repeat\" value-key=\"repeat\" type=\"checkbox\" .checked=${value.repeat} />\n        <label for=\"checkbox-repeat\" class=\"checkbox-label\"> <ox-i18n msgid=\"label.repeat\">repeat</ox-i18n> </label>\n\n        <input\n          id=\"checkbox-autoplay\"\n          value-key=\"autoplay\"\n          type=\"checkbox\"\n          .checked=${value.autoplay || (value.autoplay ?? true)}\n        />\n        <label for=\"checkbox-autoplay\" class=\"checkbox-label\">\n          <ox-i18n msgid=\"label.autoplay\">autoplay</ox-i18n>\n        </label>\n\n        <label>delta</label>\n        <select value-key=\"delta\" .value=${value.delta}>\n          <option value=\"linear\">linear</option>\n          <option value=\"quad\">quad</option>\n          <option value=\"circ\">circ</option>\n          <option value=\"back\">back</option>\n          <option value=\"bounce\">bounce</option>\n          <option value=\"elastic\">elastic</option>\n        </select>\n\n        <label>ease</label>\n        <select value-key=\"ease\" .value=${value.ease}>\n          <option value=\"in\">in</option>\n          <option value=\"out\">out</option>\n          <option value=\"inout\">inout</option>\n        </select>\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-animations.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/web/icon/icon.js';
+import '@operato/help/ox-title-with-help.js';
+import { LitElement } from 'lit';
+import { Properties, Scene } from '@hatiolab/things-scene';
+import { PropertyAnimation } from './property-animation.js';
+declare const PropertyAnimations_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
+export declare class PropertyAnimations extends PropertyAnimations_base {
+    static styles: import("lit").CSSResult[];
+    value?: Properties;
+    scene: Scene;
+    _expanded: boolean;
+    firstUpdated(): void;
+    static get scopedElements(): {
+        'property-animation': typeof PropertyAnimation;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    onValueChange(e: Event): void;
+}
+export {};

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

@@ -0,0 +1,70 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/help/ox-title-with-help.js';
+import { html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
+import { PropertyAnimation } from './property-animation.js';
+import { convert } from './value-converter.js';
+export class PropertyAnimations extends ScopedElementsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this._expanded = false;
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this.onValueChange.bind(this));
+    }
+    static get scopedElements() {
+        return {
+            'property-animation': PropertyAnimation
+        };
+    }
+    render() {
+        const value = this.value || {};
+        return html `
+      <fieldset collapsable ?collapsed=${!this._expanded}>
+        <legend>
+          <ox-title-with-help topic="board-modeller/effects/animation" msgid="label.animation"
+            >animation</ox-title-with-help
+          >
+          <md-icon
+            @click=${() => {
+            this._expanded = !this._expanded;
+        }}
+            >${this._expanded ? 'expand_less' : 'expand_more'}</md-icon
+          >
+        </legend>
+
+        <property-animation value-key="oncreate" .scene=${this.scene} .value=${value.oncreate || {}}>
+        </property-animation>
+      </fieldset>
+    `;
+    }
+    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 }));
+    }
+}
+PropertyAnimations.styles = [PropertyGridStyles];
+__decorate([
+    property({ type: Object })
+], PropertyAnimations.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], PropertyAnimations.prototype, "scene", void 0);
+__decorate([
+    state()
+], PropertyAnimations.prototype, "_expanded", void 0);
+//# sourceMappingURL=property-animations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"property-animations.js","sourceRoot":"","sources":["../../../../src/property-panel/effects/property-animations.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AACnC,OAAO,qCAAqC,CAAA;AAE5C,OAAO,EAAO,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAG9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAE9C,MAAM,OAAO,kBAAmB,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAAvE;;QAMW,cAAS,GAAY,KAAK,CAAA;IAkDrC,CAAC;IAhDC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC3E,CAAC;IAED,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,oBAAoB,EAAE,iBAAiB;SACxC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;yCAC0B,CAAC,IAAI,CAAC,SAAS;;;;;;qBAMnC,GAAG,EAAE;YACZ,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAA;QAClC,CAAC;eACE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa;;;;0DAIH,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,QAAQ,IAAI,EAAE;;;KAG9F,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,yBAAM,GAAG,CAAC,kBAAkB,CAAC,AAAvB,CAAuB;AAER;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAc;AAEhC;IAAR,KAAK,EAAE;qDAA2B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/help/ox-title-with-help.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.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 { PropertyAnimation } from './property-animation.js'\nimport { convert } from './value-converter.js'\n\nexport class PropertyAnimations extends ScopedElementsMixin(LitElement) {\n  static styles = [PropertyGridStyles]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene!: Scene\n\n  @state() _expanded: boolean = false\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n  }\n\n  static get scopedElements() {\n    return {\n      'property-animation': PropertyAnimation\n    }\n  }\n\n  render() {\n    const value = this.value || {}\n\n    return html`\n      <fieldset collapsable ?collapsed=${!this._expanded}>\n        <legend>\n          <ox-title-with-help topic=\"board-modeller/effects/animation\" msgid=\"label.animation\"\n            >animation</ox-title-with-help\n          >\n          <md-icon\n            @click=${() => {\n              this._expanded = !this._expanded\n            }}\n            >${this._expanded ? 'expand_less' : 'expand_more'}</md-icon\n          >\n        </legend>\n\n        <property-animation value-key=\"oncreate\" .scene=${this.scene} .value=${value.oncreate || {}}>\n        </property-animation>\n      </fieldset>\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

@@ -0,0 +1,21 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+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 {
+    static styles: import("lit").CSSResult[];
+    value?: Properties;
+    scene?: Scene;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    _getPlaceHoder(action: string): "" | "SCENE-100" | "http://www.hatiolab.com/";
+    _getTargetList(action: string): {
+        value: string;
+        description?: string;
+        class?: string;
+    }[];
+    onValueChange(e: Event): void;
+}

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

@@ -0,0 +1,193 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/input/ox-input-data.js';
+import '@operato/i18n/ox-i18n.js';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
+import { convert } from './value-converter.js';
+const SETS_ACTION = ['data-set', 'partial-data-set', 'value-set', 'partial-value-set'];
+export class PropertyEventHover extends LitElement {
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this.onValueChange.bind(this));
+    }
+    render() {
+        var { action, value = '', target = '', emphasize, restore } = this.value || {};
+        return html `
+      <div class="property-grid">
+        <input id="checkbox-emphasize" type="checkbox" value-key="emphasize" .checked=${emphasize} />
+        <label for="checkbox-emphasize" class="checkbox-label">
+          <ox-i18n msgid="label.emphasize">emphasize</ox-i18n>
+        </label>
+
+        <label> <ox-i18n msgid="label.action">action</ox-i18n> </label>
+        <select id="tap-select" value-key="action" .value=${action || ''}>
+          <option value=""></option>
+          <option value="popup">popup target board</option>
+          <option value="info-window">open infowindow</option>
+          <option value="data-toggle">toggle(true/false) target component data</option>
+          <option value="data-tristate">tristate(0/1/2) target component data</option>
+          <option value="data-set">set value to target component data</option>
+          <option value="value-set">set value to target component value</option>
+          <option value="mouse-cursor">change mouse cursor to target style</option>
+        </select>
+
+        <label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
+
+        ${action == 'popup'
+            ? html `
+              <ox-editor-board-selector
+                class="custom-editor"
+                value-key="target"
+                .value=${target}
+              ></ox-editor-board-selector>
+            `
+            : html `
+              <input
+                value-key="target"
+                .value=${target || ''}
+                list="target-list"
+                .placeholder="${this._getPlaceHoder(action)}"
+              />
+
+              <datalist id="target-list">
+                ${this._getTargetList(action).map(({ value, description, class: clazz }) => html `
+                    <option .value=${value} class=${ifDefined(clazz)}>${description}</option>
+                  `)}
+              </datalist>
+            `}
+        ${SETS_ACTION.indexOf(action) != -1
+            ? html `
+              <label> <ox-i18n msgid="label.value">value</ox-i18n> </label>
+              <ox-input-data
+                class="custom-editor property-full-bleed"
+                value-key="value"
+                .value=${value}
+                fullwidth
+              ></ox-input-data>
+            `
+            : html ``}
+
+        <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>
+        </label>
+      </div>
+    `;
+    }
+    _getPlaceHoder(action) {
+        switch (action) {
+            case 'popup':
+            case 'goto':
+                return 'SCENE-100';
+            case 'link-open':
+            case 'link-move':
+                return 'http://www.hatiolab.com/';
+            default:
+                return '';
+        }
+    }
+    _getTargetList(action) {
+        switch (action) {
+            case 'data-toggle':
+            case 'data-tristate':
+            case 'data-set':
+            case 'value-set':
+            case 'partial-data-set':
+            case 'partial-value-set':
+                let ids = (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') };
+                    })) ||
+                    [];
+                ids.unshift({ value: '(self)', description: 'self component' });
+                return ids;
+            case 'info-window':
+                return ((this.scene &&
+                    this.scene.ids
+                        .filter(i => {
+                        return this.scene.findById(i.key).get('type') == 'info-window';
+                    })
+                        .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') };
+                    })) ||
+                    []);
+            case 'mouse-cursor':
+                return ['auto', 'pointer', 'default', 'move', 'text', 'wait', 'help', 'crosshair', 'not-allowed', 'grab'].map(style => {
+                    return { value: style, class: `cursor-${style}` };
+                });
+            default:
+                return [];
+        }
+    }
+    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 }));
+    }
+}
+PropertyEventHover.styles = [
+    PropertyGridStyles,
+    css `
+      datalist option.cursor-auto {
+        cursor: auto;
+      }
+
+      datalist option.cursor-pointer {
+        cursor: pointer;
+      }
+
+      datalist option.cursor-default {
+        cursor: default;
+      }
+
+      datalist option.cursor-move {
+        cursor: move;
+      }
+
+      datalist option.cursor-text {
+        cursor: text;
+      }
+
+      datalist option.cursor-wait {
+        cursor: wait;
+      }
+
+      datalist option.cursor-help {
+        cursor: help;
+      }
+
+      datalist option.cursor-crosshair {
+        cursor: crosshair;
+      }
+
+      datalist option.cursor-not-allowed {
+        cursor: not-allowed;
+      }
+
+      datalist option.cursor-grab {
+        cursor: grab;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], PropertyEventHover.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], PropertyEventHover.prototype, "scene", void 0);
+//# sourceMappingURL=property-event-hover.js.map

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

@@ -0,0 +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 property-full-bleed\"\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"]}

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

@@ -0,0 +1,36 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+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 PropertyEventTap extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value?: Properties;
+    scene?: Scene;
+    scenarios: {
+        value: string;
+        description: string;
+    }[];
+    playlists: {
+        value: string;
+        description: string;
+    }[];
+    targetList: {
+        value: string;
+        description: string;
+    }[];
+    firstUpdated(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    _getPlaceHoder(action: string): "" | "http://www.hatiolab.com/" | "abc.xlsx";
+    _getTargetList(action: string): {
+        value: string;
+        description: string;
+    }[];
+    _getInputList(action: string): {
+        value: string;
+        description: string;
+    }[];
+    onValueChange(e: Event): void;
+}