@operato/property-panel 10.0.0-beta.53 → 10.0.0-beta.58

package/dist/src/property-panel/event-handlers/event-handlers.js

@@ -0,0 +1,378 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * EventHandlers panel — 컴포넌트의 `state.eventHandlers[]` 편집기.
+ *
+ * 데이터바인딩 panel 의 형제로 *완전 분리*. 데이터바인딩은 데이터 흐름 전용,
+ * eventHandlers 는 사용자 액션 (tap / hover / 등) 의 first-class 핸들러 등록.
+ *
+ * data-binding 패턴 그대로 — tabs (N handlers) + handler mapper + add/delete/copy/paste.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/help/ox-title-with-help.js';
+import '@operato/input/ox-buttons-radio.js';
+import '@operato/i18n/ox-i18n.js';
+import { css, html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
+import { openPopup } from '@operato/layout';
+import { i18next } from '@operato/i18n';
+import { AbstractProperty } from '../abstract-property.js';
+import { EventHandlersMapper } from './event-handlers-mapper.js';
+var clipboard = '{"trigger":"click","action":""}';
+export class PropertyEventHandlers extends ScopedElementsMixin(AbstractProperty) {
+    constructor() {
+        super(...arguments);
+        this.handlerIndex = 0;
+    }
+    /**
+     * 두 속성 통합 — 신규 `eventHandlers` 우선, 없으면 legacy `event` 객체를
+     * *read-only* 변환해 표시. 사용자가 수정 시 `eventHandlers` 에만 저장 — legacy
+     * 는 손대지 않음 (옛 코드 호환 / rollback 안전망).
+     */
+    get handlers() {
+        var _a, _b, _c;
+        const v = this.value;
+        if (!v)
+            return [];
+        // 1. 신규
+        if (Array.isArray(v.eventHandlers))
+            return v.eventHandlers;
+        // 2. legacy 객체 → 변환 (표시만, 저장 시점이 아님)
+        const ev = v.event;
+        if (!ev || typeof ev !== 'object' || Array.isArray(ev))
+            return [];
+        const trigMap = {
+            tap: 'click',
+            hover: 'mouseenter',
+            dblclick: 'dblclick',
+            longpress: 'longpress'
+        };
+        const out = [];
+        for (const key of Object.keys(ev)) {
+            const trig = trigMap[key];
+            const e = ev[key];
+            if (!trig || !e || typeof e !== 'object')
+                continue;
+            if (e.action === 'script') {
+                const code = typeof e.value === 'string' ? e.value : ((_b = (_a = e.value) === null || _a === void 0 ? void 0 : _a.script) !== null && _b !== void 0 ? _b : '');
+                out.push({ trigger: trig, action: 'script', code, target: e.target });
+            }
+            else {
+                out.push({
+                    trigger: trig,
+                    action: e.action,
+                    target: e.target,
+                    value: e.value,
+                    options: { emphasize: e.emphasize, restore: e.restore, pressed: e.pressed, ...((_c = e.options) !== null && _c !== void 0 ? _c : {}) }
+                });
+            }
+        }
+        return out;
+    }
+    firstUpdated() {
+        this.tabContainer.addEventListener('scroll', () => this._onTabScroll());
+    }
+    updated(changes) {
+        if (changes.has('value')) {
+            this.onValueChanged();
+        }
+    }
+    static get scopedElements() {
+        return {
+            'event-handlers-mapper': EventHandlersMapper
+        };
+    }
+    render() {
+        const handlers = this.handlers;
+        const current = handlers[this.handlerIndex] || { trigger: 'click', action: '' };
+        return html `
+      <fieldset>
+        <legend style="box-sizing:border-box;width:100%">
+          <ox-title-with-help topic="board-modeller/event-handlers" msgid="label.event-handlers"
+            >Event Handlers</ox-title-with-help
+          >
+          <span style="font-size:11px;opacity:0.65;margin-left:6px">(${handlers.length})</span>
+          <md-icon
+            style="float:right;font-size:medium;margin:0;cursor:pointer"
+            @click=${() => this._openHandlersPopup()}
+            title="open in popup"
+            >open_in_new</md-icon
+          >
+        </legend>
+
+        <div id="tab-header">
+          <md-icon id="tab-nav-left-button" @click=${() => this._onTabScrollNavLeft()} disabled
+            >chevron_left</md-icon
+          >
+
+          <ox-buttons-radio
+            id="tabs"
+            .value=${String(this.handlerIndex)}
+            @change=${(e) => {
+            e.stopPropagation();
+            this._setHandlerIndex(e.target.value);
+        }}
+          >
+            ${handlers.map((h, i) => html `
+                <div data-value=${i} title="${h.trigger} · ${h.action || '(none)'}${h.disabled ? ' (disabled)' : ''}">
+                  ${h.trigger}
+                </div>
+              `)}
+            <div data-value=${handlers.length} disabled title="add new">+</div>
+          </ox-buttons-radio>
+
+          <md-icon id="tab-nav-right-button" @click=${() => this._onTabScrollNavRight()} disabled
+            >chevron_right</md-icon
+          >
+        </div>
+
+        <div handler-toolbar>
+          <md-icon style="font-size:19px" @click=${() => this._clearHandler()} title="delete current"
+            >delete_forever</md-icon
+          >
+          <md-icon @click=${() => this._pasteHandler()} title="paste">content_paste</md-icon>
+          <md-icon style="font-size:17px" @click=${() => this._copyHandler()} title="copy"
+            >content_copy</md-icon
+          >
+        </div>
+
+        <event-handlers-mapper
+          @value-change=${(e) => this._onHandlerChanged(e)}
+          .scene=${this.scene}
+          .handler=${current}
+        ></event-handlers-mapper>
+      </fieldset>
+    `;
+    }
+    _setHandlerIndex(idx) {
+        this.handlerIndex = isNaN(Number(idx)) ? 0 : Number(idx);
+        this._onTabScroll();
+    }
+    _clearHandler() {
+        const next = [...this.handlers];
+        next.splice(this.handlerIndex, 1);
+        this._dispatchHandlersChange(next.filter(Boolean));
+    }
+    _copyHandler() {
+        var _a;
+        clipboard = JSON.stringify((_a = this.handlers[this.handlerIndex]) !== null && _a !== void 0 ? _a : {});
+    }
+    _pasteHandler() {
+        try {
+            const parsed = JSON.parse(clipboard);
+            const next = [...this.handlers];
+            next[this.handlerIndex] = parsed;
+            this._dispatchHandlersChange(next);
+        }
+        catch (_) {
+            /* invalid clipboard */
+        }
+    }
+    _onHandlerChanged(e) {
+        var _a;
+        const handler = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.handler;
+        if (!handler)
+            return;
+        const next = [...this.handlers];
+        // 신규 — last+1 위치 추가
+        if (this.handlerIndex >= next.length) {
+            next.push(handler);
+        }
+        else {
+            next[this.handlerIndex] = handler;
+        }
+        const currentIdx = this.handlerIndex;
+        this._afterRender = () => {
+            this._setHandlerIndex(currentIdx);
+            this.tabContainer.scrollLeft = this.tabContainer.scrollWidth;
+        };
+        this._dispatchHandlersChange(next.filter(h => !!h && !!h.action));
+    }
+    _dispatchHandlersChange(handlers) {
+        this.dispatchEvent(new CustomEvent('property-change', {
+            bubbles: true,
+            composed: true,
+            detail: { eventHandlers: handlers }
+        }));
+    }
+    async onValueChanged() {
+        await this.updateComplete;
+        if (this._afterRender) {
+            this._afterRender();
+        }
+        else {
+            this._setHandlerIndex(0);
+        }
+        this._afterRender = null;
+    }
+    async _openHandlersPopup() {
+        // 큰 popup 으로 펼치기 — data-binding 의 _openBindingPopup 패턴 동일.
+        await import('./event-handlers-popup.js');
+        const handlers = [...this.handlers];
+        const template = html `
+      <event-handlers-popup
+        .handlers=${handlers}
+        .scene=${this.scene}
+        @handlers-change=${(e) => {
+            var _a;
+            this._dispatchHandlersChange(((_a = e.detail) === null || _a === void 0 ? void 0 : _a.handlers) || []);
+        }}
+      ></event-handlers-popup>
+    `;
+        openPopup(template, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('label.event-handlers')
+        });
+    }
+    get tabContainer() {
+        return this.tabs;
+    }
+    _onTabScroll() {
+        if (!this.tabContainer || !this.tabNavLeftButton)
+            return;
+        if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {
+            this.tabNavLeftButton.setAttribute('disabled', '');
+            this.tabNavRightButton.setAttribute('disabled', '');
+        }
+        else if (this.tabContainer.scrollLeft == 0) {
+            this.tabNavLeftButton.setAttribute('disabled', '');
+            this.tabNavRightButton.removeAttribute('disabled');
+        }
+        else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {
+            this.tabNavLeftButton.removeAttribute('disabled');
+            this.tabNavRightButton.setAttribute('disabled', '');
+        }
+        else {
+            this.tabNavLeftButton.removeAttribute('disabled');
+            this.tabNavRightButton.removeAttribute('disabled');
+        }
+    }
+    _onTabScrollNavLeft() {
+        this.tabContainer.style.scrollBehavior = 'smooth';
+        this.tabContainer.scrollLeft -= this.tabContainer.clientWidth;
+        this.tabContainer.style.scrollBehavior = 'auto';
+    }
+    _onTabScrollNavRight() {
+        this.tabContainer.style.scrollBehavior = 'smooth';
+        this.tabContainer.scrollLeft += this.tabContainer.clientWidth;
+        this.tabContainer.style.scrollBehavior = 'auto';
+    }
+}
+PropertyEventHandlers.styles = [
+    PropertyGridStyles,
+    css `
+      #tab-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      #tab-header > md-icon {
+        padding: 0;
+        margin: 0;
+        width: 25px;
+        height: 25px;
+        font-size: x-large;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+      }
+
+      ox-buttons-radio {
+        flex: 1;
+        height: 25px;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-width: 1px 1px 0 1px;
+        text-align: center;
+        display: flex;
+        padding: 0;
+        box-sizing: border-box;
+        width: 0;
+        overflow-x: hidden;
+      }
+
+      ox-buttons-radio > div {
+        background-color: rgba(0, 0, 0, 0.2);
+        border: 1px solid rgba(0, 0, 0, 0.07);
+        border-width: 0 0 2px 0;
+        padding: 0 8px;
+        margin: 0;
+        color: #fff;
+        font-size: 12px;
+        max-width: 110px;
+        min-width: 40px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: 23px;
+      }
+
+      ox-buttons-radio > div[disabled] {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+
+      ox-buttons-radio > div[active] {
+        border-color: rgb(242, 71, 28);
+      }
+
+      ox-buttons-radio > div.iron-selected {
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      div[handler-toolbar] {
+        display: flex;
+        flex-direction: row-reverse;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+        overflow: hidden;
+        border-style: solid;
+        border-color: rgba(0, 0, 0, 0.2);
+        border-image: initial;
+        border-width: 0px 1px;
+        padding: 7px 5px 2px 5px;
+      }
+
+      md-icon {
+        margin-left: 5px;
+        color: var(--md-sys-color-on-secondary-container);
+        opacity: 0.8;
+        cursor: pointer;
+        --md-icon-size: 18px;
+      }
+
+      md-icon:hover {
+        color: var(--md-sys-color-on-primary-container);
+        opacity: 1;
+      }
+
+      md-icon[disabled] {
+        color: rgba(0, 0, 0, 0.1);
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], PropertyEventHandlers.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], PropertyEventHandlers.prototype, "scene", void 0);
+__decorate([
+    state()
+], PropertyEventHandlers.prototype, "handlerIndex", void 0);
+__decorate([
+    state()
+], PropertyEventHandlers.prototype, "_afterRender", void 0);
+__decorate([
+    query('#tabs')
+], PropertyEventHandlers.prototype, "tabs", void 0);
+__decorate([
+    query('#tab-nav-left-button')
+], PropertyEventHandlers.prototype, "tabNavLeftButton", void 0);
+__decorate([
+    query('#tab-nav-right-button')
+], PropertyEventHandlers.prototype, "tabNavRightButton", void 0);
+customElements.define('property-event-handlers', PropertyEventHandlers);
+//# sourceMappingURL=event-handlers.js.map

package/dist/src/property-panel/event-handlers/event-handlers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-handlers.js","sourceRoot":"","sources":["../../../../src/property-panel/event-handlers/event-handlers.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n *\n * EventHandlers panel — 컴포넌트의 `state.eventHandlers[]` 편집기.\n *\n * 데이터바인딩 panel 의 형제로 *완전 분리*. 데이터바인딩은 데이터 흐름 전용,\n * eventHandlers 는 사용자 액션 (tap / hover / 등) 의 first-class 핸들러 등록.\n *\n * data-binding 패턴 그대로 — tabs (N handlers) + handler mapper + add/delete/copy/paste.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/help/ox-title-with-help.js'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport type { Properties, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { openPopup } from '@operato/layout'\nimport { i18next } from '@operato/i18n'\n\nimport { AbstractProperty } from '../abstract-property.js'\nimport { EventHandlersMapper, type EventHandlerSpec } from './event-handlers-mapper.js'\n\nvar clipboard = '{\"trigger\":\"click\",\"action\":\"\"}'\n\nexport class PropertyEventHandlers extends ScopedElementsMixin(AbstractProperty) {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      #tab-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      #tab-header > md-icon {\n        padding: 0;\n        margin: 0;\n        width: 25px;\n        height: 25px;\n        font-size: x-large;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n      }\n\n      ox-buttons-radio {\n        flex: 1;\n        height: 25px;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-width: 1px 1px 0 1px;\n        text-align: center;\n        display: flex;\n        padding: 0;\n        box-sizing: border-box;\n        width: 0;\n        overflow-x: hidden;\n      }\n\n      ox-buttons-radio > div {\n        background-color: rgba(0, 0, 0, 0.2);\n        border: 1px solid rgba(0, 0, 0, 0.07);\n        border-width: 0 0 2px 0;\n        padding: 0 8px;\n        margin: 0;\n        color: #fff;\n        font-size: 12px;\n        max-width: 110px;\n        min-width: 40px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        line-height: 23px;\n      }\n\n      ox-buttons-radio > div[disabled] {\n        background-color: rgba(0, 0, 0, 0.1);\n      }\n\n      ox-buttons-radio > div[active] {\n        border-color: rgb(242, 71, 28);\n      }\n\n      ox-buttons-radio > div.iron-selected {\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n      }\n\n      div[handler-toolbar] {\n        display: flex;\n        flex-direction: row-reverse;\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n        overflow: hidden;\n        border-style: solid;\n        border-color: rgba(0, 0, 0, 0.2);\n        border-image: initial;\n        border-width: 0px 1px;\n        padding: 7px 5px 2px 5px;\n      }\n\n      md-icon {\n        margin-left: 5px;\n        color: var(--md-sys-color-on-secondary-container);\n        opacity: 0.8;\n        cursor: pointer;\n        --md-icon-size: 18px;\n      }\n\n      md-icon:hover {\n        color: var(--md-sys-color-on-primary-container);\n        opacity: 1;\n      }\n\n      md-icon[disabled] {\n        color: rgba(0, 0, 0, 0.1);\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  @state() handlerIndex: number = 0\n  @state() _afterRender?: Function | null\n\n  @query('#tabs') tabs!: HTMLElement\n  @query('#tab-nav-left-button') tabNavLeftButton!: HTMLElement\n  @query('#tab-nav-right-button') tabNavRightButton!: HTMLElement\n\n  /**\n   * 두 속성 통합 — 신규 `eventHandlers` 우선, 없으면 legacy `event` 객체를\n   * *read-only* 변환해 표시. 사용자가 수정 시 `eventHandlers` 에만 저장 — legacy\n   * 는 손대지 않음 (옛 코드 호환 / rollback 안전망).\n   */\n  get handlers(): EventHandlerSpec[] {\n    const v = this.value as any\n    if (!v) return []\n    // 1. 신규\n    if (Array.isArray(v.eventHandlers)) return v.eventHandlers as EventHandlerSpec[]\n    // 2. legacy 객체 → 변환 (표시만, 저장 시점이 아님)\n    const ev = v.event\n    if (!ev || typeof ev !== 'object' || Array.isArray(ev)) return []\n    const trigMap: Record<string, string> = {\n      tap: 'click',\n      hover: 'mouseenter',\n      dblclick: 'dblclick',\n      longpress: 'longpress'\n    }\n    const out: EventHandlerSpec[] = []\n    for (const key of Object.keys(ev)) {\n      const trig = trigMap[key]\n      const e = ev[key]\n      if (!trig || !e || typeof e !== 'object') continue\n      if (e.action === 'script') {\n        const code = typeof e.value === 'string' ? e.value : (e.value?.script ?? '')\n        out.push({ trigger: trig, action: 'script', code, target: e.target })\n      } else {\n        out.push({\n          trigger: trig,\n          action: e.action,\n          target: e.target,\n          value: e.value,\n          options: { emphasize: e.emphasize, restore: e.restore, pressed: e.pressed, ...(e.options ?? {}) }\n        })\n      }\n    }\n    return out\n  }\n\n  firstUpdated() {\n    this.tabContainer.addEventListener('scroll', () => this._onTabScroll())\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.onValueChanged()\n    }\n  }\n\n  static get scopedElements() {\n    return {\n      'event-handlers-mapper': EventHandlersMapper\n    }\n  }\n\n  render() {\n    const handlers = this.handlers\n    const current = handlers[this.handlerIndex] || { trigger: 'click', action: '' }\n\n    return html`\n      <fieldset>\n        <legend style=\"box-sizing:border-box;width:100%\">\n          <ox-title-with-help topic=\"board-modeller/event-handlers\" msgid=\"label.event-handlers\"\n            >Event Handlers</ox-title-with-help\n          >\n          <span style=\"font-size:11px;opacity:0.65;margin-left:6px\">(${handlers.length})</span>\n          <md-icon\n            style=\"float:right;font-size:medium;margin:0;cursor:pointer\"\n            @click=${() => this._openHandlersPopup()}\n            title=\"open in popup\"\n            >open_in_new</md-icon\n          >\n        </legend>\n\n        <div id=\"tab-header\">\n          <md-icon id=\"tab-nav-left-button\" @click=${() => this._onTabScrollNavLeft()} disabled\n            >chevron_left</md-icon\n          >\n\n          <ox-buttons-radio\n            id=\"tabs\"\n            .value=${String(this.handlerIndex)}\n            @change=${(e: Event) => {\n              e.stopPropagation()\n              this._setHandlerIndex((e.target as any).value)\n            }}\n          >\n            ${handlers.map(\n              (h, i) => html`\n                <div data-value=${i} title=\"${h.trigger} · ${h.action || '(none)'}${h.disabled ? ' (disabled)' : ''}\">\n                  ${h.trigger}\n                </div>\n              `\n            )}\n            <div data-value=${handlers.length} disabled title=\"add new\">+</div>\n          </ox-buttons-radio>\n\n          <md-icon id=\"tab-nav-right-button\" @click=${() => this._onTabScrollNavRight()} disabled\n            >chevron_right</md-icon\n          >\n        </div>\n\n        <div handler-toolbar>\n          <md-icon style=\"font-size:19px\" @click=${() => this._clearHandler()} title=\"delete current\"\n            >delete_forever</md-icon\n          >\n          <md-icon @click=${() => this._pasteHandler()} title=\"paste\">content_paste</md-icon>\n          <md-icon style=\"font-size:17px\" @click=${() => this._copyHandler()} title=\"copy\"\n            >content_copy</md-icon\n          >\n        </div>\n\n        <event-handlers-mapper\n          @value-change=${(e: CustomEvent) => this._onHandlerChanged(e)}\n          .scene=${this.scene}\n          .handler=${current}\n        ></event-handlers-mapper>\n      </fieldset>\n    `\n  }\n\n  _setHandlerIndex(idx: number) {\n    this.handlerIndex = isNaN(Number(idx)) ? 0 : Number(idx)\n    this._onTabScroll()\n  }\n\n  _clearHandler() {\n    const next = [...this.handlers]\n    next.splice(this.handlerIndex, 1)\n    this._dispatchHandlersChange(next.filter(Boolean))\n  }\n\n  _copyHandler() {\n    clipboard = JSON.stringify(this.handlers[this.handlerIndex] ?? {})\n  }\n\n  _pasteHandler() {\n    try {\n      const parsed = JSON.parse(clipboard)\n      const next = [...this.handlers]\n      next[this.handlerIndex] = parsed\n      this._dispatchHandlersChange(next)\n    } catch (_) {\n      /* invalid clipboard */\n    }\n  }\n\n  _onHandlerChanged(e: CustomEvent) {\n    const handler = e.detail?.handler as EventHandlerSpec\n    if (!handler) return\n    const next = [...this.handlers]\n    // 신규 — last+1 위치 추가\n    if (this.handlerIndex >= next.length) {\n      next.push(handler)\n    } else {\n      next[this.handlerIndex] = handler\n    }\n    const currentIdx = this.handlerIndex\n    this._afterRender = () => {\n      this._setHandlerIndex(currentIdx)\n      this.tabContainer.scrollLeft = this.tabContainer.scrollWidth\n    }\n    this._dispatchHandlersChange(next.filter(h => !!h && !!h.action))\n  }\n\n  private _dispatchHandlersChange(handlers: EventHandlerSpec[]) {\n    this.dispatchEvent(\n      new CustomEvent('property-change', {\n        bubbles: true,\n        composed: true,\n        detail: { eventHandlers: handlers }\n      })\n    )\n  }\n\n  async onValueChanged() {\n    await this.updateComplete\n    if (this._afterRender) {\n      this._afterRender()\n    } else {\n      this._setHandlerIndex(0)\n    }\n    this._afterRender = null\n  }\n\n  async _openHandlersPopup() {\n    // 큰 popup 으로 펼치기 — data-binding 의 _openBindingPopup 패턴 동일.\n    await import('./event-handlers-popup.js')\n\n    const handlers = [...this.handlers]\n\n    const template = html`\n      <event-handlers-popup\n        .handlers=${handlers}\n        .scene=${this.scene}\n        @handlers-change=${(e: CustomEvent) => {\n          this._dispatchHandlersChange(e.detail?.handlers || [])\n        }}\n      ></event-handlers-popup>\n    `\n\n    openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('label.event-handlers')\n    })\n  }\n\n  get tabContainer() {\n    return this.tabs\n  }\n\n  _onTabScroll() {\n    if (!this.tabContainer || !this.tabNavLeftButton) return\n    if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    } else if (this.tabContainer.scrollLeft == 0) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.removeAttribute('disabled')\n    } else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    } else {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n  }\n\n  _onTabScrollNavLeft() {\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft -= this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n\n  _onTabScrollNavRight() {\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft += this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n}\n\ncustomElements.define('property-event-handlers', PropertyEventHandlers)\n"]}