@operato/input 8.0.0-alpha.4 → 8.0.0-alpha.41

package/CHANGELOG.md

@@ -3,6 +3,113 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-alpha.41](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.40...v8.0.0-alpha.41) (2024-10-21)
+
+
+### :bug: Bug Fix
+
+* add inbound property for ox-input-direction ([c1e8b99](https://github.com/hatiolab/operato/commit/c1e8b99bccb179b883a04c2463391865055116bc))
+
+
+
+## [8.0.0-alpha.37](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.36...v8.0.0-alpha.37) (2024-10-20)
+
+
+### :bug: Bug Fix
+
+* update dev-dependencies version ([d6fe342](https://github.com/hatiolab/operato/commit/d6fe342de738c6bad3528550a862b5a1d2573161))
+
+
+
+## [8.0.0-alpha.34](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.33...v8.0.0-alpha.34) (2024-10-15)
+
+
+### :bug: Bug Fix
+
+* select-floor 층 간격 속성 추가 ([cba8523](https://github.com/hatiolab/operato/commit/cba85236422485dcb96f6c2d907adb4d4c2dc6e7))
+
+
+
+## [8.0.0-alpha.33](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.32...v8.0.0-alpha.33) (2024-10-14)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [8.0.0-alpha.30](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.29...v8.0.0-alpha.30) (2024-10-11)
+
+
+### :bug: Bug Fix
+
+* ox-select-floor event handling for toggling active card ([c1b2662](https://github.com/hatiolab/operato/commit/c1b2662a0923df506eae7c3cf4ed5baa3e4c0dc3))
+
+
+
+## [8.0.0-alpha.29](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.28...v8.0.0-alpha.29) (2024-10-10)
+
+
+### :bug: Bug Fix
+
+* apply pointer-event ([ecc73a1](https://github.com/hatiolab/operato/commit/ecc73a1d2df0d8ce7ba462965062a91461c504c3))
+
+
+
+## [8.0.0-alpha.27](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.26...v8.0.0-alpha.27) (2024-10-06)
+
+
+### :bug: Bug Fix
+
+* calendar css variables ([9ea1918](https://github.com/hatiolab/operato/commit/9ea191844c72de5f920a8da85ad50209ba77cc07))
+
+
+
+## [8.0.0-alpha.26](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.25...v8.0.0-alpha.26) (2024-10-06)
+
+
+### :bug: Bug Fix
+
+* ox-input-signature ([dfd4e67](https://github.com/hatiolab/operato/commit/dfd4e67c213b33c78f6ef380fcc5e8642356e76c))
+
+
+
+## [8.0.0-alpha.21](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.20...v8.0.0-alpha.21) (2024-10-05)
+
+
+### :bug: Bug Fix
+
+* support touch gesture for ox-select-floor ([217b1b6](https://github.com/hatiolab/operato/commit/217b1b6bf6415a893a9bb08524b546ec7a8fdca4))
+
+
+
+## [8.0.0-alpha.20](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.19...v8.0.0-alpha.20) (2024-10-04)
+
+
+### :rocket: New Features
+
+* ox-select-floor input component ([ad71891](https://github.com/hatiolab/operato/commit/ad718914cd44d16abc62109bfd17594dce43b349))
+
+
+
+## [8.0.0-alpha.19](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.18...v8.0.0-alpha.19) (2024-10-04)
+
+
+### :rocket: New Features
+
+* ox-select-floor input component ([3d5c53e](https://github.com/hatiolab/operato/commit/3d5c53e8ecac718b3713fc244c36739c977f5dcf))
+
+
+
+## [8.0.0-alpha.10](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.9...v8.0.0-alpha.10) (2024-09-18)
+
+
+### :bug: Bug Fix
+
+* remove unused files ([7c84a82](https://github.com/hatiolab/operato/commit/7c84a82e62897f0844423f6e2cb27d8f4ef0942f))
+
+
+
 ## [8.0.0-alpha.4](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.3...v8.0.0-alpha.4) (2024-09-07)
 
 

package/dist/src/ox-input-color-stops.d.ts

@@ -60,7 +60,7 @@ export declare class OxInputColorStops extends OxFormField {
     _onChangeSubComponent(e: Event): void;
     _onDblClickColorbar(e: MouseEvent): void;
     _onDblClickMarkers(e: MouseEvent): void;
-    _onMouseDown(e: MouseEvent): void;
+    _onPointerDown(e: PointerEvent): void;
     private dragstart;
     _onDragStart(e: DragEvent): void;
     _throttled(delay: number, fn: (...args: any[]) => any): (...args: any[]) => any;

package/dist/src/ox-input-color-stops.js

@@ -182,7 +182,7 @@ let OxInputColorStops = class OxInputColorStops extends OxFormField {
           <div
             id="markers"
             @dblclick=${(e) => this._onDblClickMarkers(e)}
-            @mousedown=${(e) => this._onMouseDown(e)}
+            @pointerdown=${(e) => this._onPointerDown(e)}
             @dragstart=${(e) => this._onDragStart(e)}
             @drag=${this._throttled(100, this._onDrag.bind(this))}
             @dragend=${(e) => this._onDragEnd(e)}
@@ -360,7 +360,7 @@ let OxInputColorStops = class OxInputColorStops extends OxFormField {
         }
         this.colorEditor.showPicker();
     }
-    _onMouseDown(e) {
+    _onPointerDown(e) {
         if (this.disabled) {
             return;
         }

package/dist/src/ox-input-color-stops.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-color-stops.js","sourceRoot":"","sources":["../../src/ox-input-color-stops.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-color'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\nimport { OxInputColor } from './ox-input-color'\nimport deepEquals from 'lodash-es/isEqual'\n\nexport type ColorStop = {\n  color: string\n  position: number\n}\n\n/**\n범위내에서 여러 컬러셋(포지션과 색깔) 배열을 편집하는 컴포넌트이다.\n\n미리보기 Bar에서는 gradient나, solid 형태의 컬러셋을 보여준다.\n\n새로운 컬러셋을 추가고자 할 때는 미리보기 Bar를 더블클릭한다.\n컬러셋을 제거하고자 할 때는 컬러셋 마커를 아래방향으로 드래깅한다.\n컬러셋의 위치를 옮기고자 할 때는, 컬러셋 마커를 좌우로 드래깅하여 이동시키거나,\n옮기고자하는 컬러셋 마커를 마우스로 선택하고, 포지션 입력 에디터에서 직접 수정한다.\n컬러셋의 색상을 바꾸고자 할 때는, 컬러셋 마커를 더블클릭하여 컬러파레트를 팝업시켜서 색상을 선택하거나, 색상 입력 에디터에서 직접 색상을 수정할 수 있다.\n\nExample:\n\n    <ox-input-color-stops type=\"gradient\" .value=${gradient.colorStops}>\n    </ox-input-color-stops>\n*/\n@customElement('ox-input-color-stops')\nexport class OxInputColorStops extends OxFormField {\n  static styles = css`\n    :host {\n      display: grid;\n      grid-template-columns: repeat(10, 1fr);\n      grid-gap: 0;\n      grid-auto-rows: minmax(0, auto);\n    }\n\n    #color-stops {\n      grid-column: 1 / 11;\n      grid-row: 1;\n\n      clear: both;\n      margin-bottom: -3px;\n    }\n\n    #colorbar {\n      width: 95%;\n      height: 12px;\n      margin: auto;\n      margin-bottom: 25px;\n      border: 1px solid #ccc;\n    }\n\n    #markers {\n      position: relative;\n      top: 30px;\n    }\n\n    #markers div {\n      width: 10px;\n      height: 10px;\n      margin-top: -15px;\n      position: absolute;\n      border: 2px solid #fff;\n      cursor: pointer;\n      -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n      -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n      box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n    }\n\n    #markers div::before {\n      border-bottom: 6px solid #fff;\n      border-left: 7px solid transparent;\n      border-right: 7px solid transparent;\n      content: '';\n      width: 0;\n      height: 0;\n      left: -2px;\n      position: absolute;\n      top: -8px;\n    }\n\n    #markers div[focused] {\n      border-color: var(--things-editor-colorbar-marker-focused-color, #585858);\n    }\n\n    #markers div[focused]:before {\n      border-bottom: 7px solid var(--things-editor-colorbar-marker-focused-color, #585858);\n    }\n\n    .icon-only-label {\n      background: url(/assets/images/icon-properties-label.png) no-repeat;\n      width: 30px;\n      height: 24px;\n    }\n\n    .icon-only-label.color {\n      grid-column: 1 / 2;\n      grid-row: 2;\n\n      background-position: 70% -498px;\n      float: left;\n      margin-top: 0;\n    }\n\n    .icon-only-label.position {\n      grid-column: 7 / 8;\n      grid-row: 2;\n\n      background-position: 70% -797px;\n      float: left;\n      margin-top: 0;\n    }\n\n    ox-input-color {\n      grid-column: 2 / 7;\n      grid-row: 2;\n    }\n\n    input[type='number'] {\n      grid-column: 8 / 11;\n      grid-row: 2;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n  `\n\n  /**\n   * `type`은 color-stop bar의 표시 방법을 의미한다.\n   * - 'solid' : 컬러스톱위치에서 다음 컬러스톱까지 solid color로 채운다.\n   * - 'gradient' : 컬러스톱위치에서 다음 컬러스톱까지 gradient color로 채운다.\n   */\n  @property({ type: String }) type: 'solid' | 'gradient' = 'solid'\n  /**\n   * `min`은 color-stop bar의 위치값 범위의 최소값을 의미한다.\n   */\n  @property({ type: Number }) min: number = 0\n  /**\n   * `max`은 color-stop bar의 위치값 범위의 최대값을 의미한다.\n   */\n  @property({ type: Number }) max: number = 1\n  /**\n   * `value`은 color-stops에 의해 만들어진 color-stop 배열을 유지한다.\n   */\n  @property({ type: Array }) value?: ColorStop[]\n  @property({ type: Object }) focused: any\n\n  @query('#colorbar') colorbar!: HTMLElement\n  @query('#color-editor') colorEditor!: OxInputColor\n\n  private _dragImage?: HTMLImageElement\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this._dragImage = new Image()\n    this._dragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='\n  }\n\n  firstUpdated() {\n    window.addEventListener('resize', () => {\n      this.requestUpdate()\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    var needRerenderColorBar = false\n\n    if (changes.has('value') && this.value instanceof Array) {\n      var oldValue = changes.get('value')\n      if (\n        this.focused &&\n        (!oldValue ||\n          this.value.findIndex(v => v.position == this.focused.position && v.color == this.focused.color) == -1)\n      ) {\n        /* 이전 값이 없었던 경우에 focused를 클리어시킨다.\n         * 이전 값이 있던 경우에도, focused는 이 에디터 내부에서만 선택될 수 있으며, 수정될 수 있으므로 동일한 포지션을 갖는 value가 없으면, 새로운 에디터가 시작된 것으로 판단하여 focused를 클리어시킨다.\n         */\n        this.focused = null\n      }\n\n      if (!deepEquals(oldValue, this.value)) {\n        needRerenderColorBar = true\n      }\n    }\n\n    if (needRerenderColorBar || changes.has('min') || changes.has('max')) {\n      if (!this.value) {\n        this.value = [\n          { color: 'white', position: this.min },\n          { color: 'white', position: this.max }\n        ]\n      }\n\n      this._renderColorBar(this.min, this.max, this.type)\n      this.requestUpdate()\n    }\n  }\n\n  render() {\n    return html`\n      <div id=\"color-stops\">\n        <div id=\"colorbar\" @dblclick=${(e: MouseEvent) => this._onDblClickColorbar(e)}>\n          <div\n            id=\"markers\"\n            @dblclick=${(e: MouseEvent) => this._onDblClickMarkers(e)}\n            @mousedown=${(e: MouseEvent) => this._onMouseDown(e)}\n            @dragstart=${(e: DragEvent) => this._onDragStart(e)}\n            @drag=${this._throttled(100, this._onDrag.bind(this))}\n            @dragend=${(e: DragEvent) => this._onDragEnd(e)}\n          >\n            ${this._refinedValue(this.value).map(\n              (item, index) => html`\n                <div\n                  .style=\"background-color:${item.color};margin-left:${this._calculatePosition(\n                    item.position,\n                    this.min,\n                    this.max\n                  )}px;\"\n                  marker-index=${index}\n                  draggable=\"true\"\n                ></div>\n              `\n            )}\n          </div>\n        </div>\n      </div>\n\n      <label class=\"icon-only-label color\"></label>\n      <ox-input-color\n        id=\"color-editor\"\n        .value=${this.focused && this.focused.color}\n        @change=${(e: Event) => this._onChangeSubComponent(e)}\n        ?disabled=${this.disabled}\n      >\n      </ox-input-color>\n\n      <label class=\"icon-only-label position\"></label>\n      <input\n        type=\"number\"\n        id=\"color-position\"\n        .value=${this.focused && this.focused.position}\n        @change=${(e: Event) => this._onChangeSubComponent(e)}\n        step=\"0.01\"\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n\n  _refinedValue(value: any) {\n    return value instanceof Array ? value : []\n  }\n\n  _setFocused(index: number) {\n    if (this.focused && this.focused.index === index) {\n      return\n    }\n\n    var marker = this.renderRoot.querySelector(`#markers div[marker-index='${index}']`) as HTMLElement\n    var olds = this.renderRoot.querySelectorAll('#markers div[focused]')\n    olds.length > 0 && olds.forEach(old => old.removeAttribute('focused'))\n    marker && marker.setAttribute('focused', '')\n\n    if (!marker) {\n      this.focused = null\n      return\n    }\n\n    var colorStop = this.value![index]\n\n    this._changeFocused({\n      index: index,\n      color: colorStop.color,\n      position: Math.max(this.min, Math.min(colorStop.position, this.max))\n    })\n  }\n\n  _changeFocused(focused: any) {\n    if (!focused) {\n      this._setFocused(-1) // clear focused marker\n\n      return\n    }\n\n    this.focused = focused\n\n    this.value = this.value!.map((colorStop, index): ColorStop => {\n      if (index != focused.index) {\n        return colorStop\n      }\n\n      return {\n        color: focused.color,\n        position: focused.position\n      }\n    }).sort((a: ColorStop, b: ColorStop) => {\n      return b.position < a.position ? 1 : -1\n    })\n\n    var colorStop = this.value[focused.index]\n\n    if (focused.position != colorStop.position || focused.color != colorStop.color) {\n      var index = -1\n      for (var i = 0; i < this.value.length; i++) {\n        colorStop = this.value[i]\n        if (focused.position == colorStop.position && focused.color == colorStop.color) {\n          index = i\n          break\n        }\n      }\n\n      this._setFocused(index)\n    }\n  }\n\n  _renderColorBar(min: number, max: number, type: 'solid' | 'gradient') {\n    var value = this._refinedValue(this.value)\n    var gradient = ''\n\n    if (value instanceof Array && value.length > 0) {\n      if (this.type == 'gradient') {\n        var stopsStrings = (value || []).map(function (stop) {\n          var position = (stop.position - min) / (max - min)\n          return `${stop.color} ${position * 100}%`\n        })\n      } else {\n        var stops = value || []\n        var last: ColorStop | undefined\n        var last_position = 0\n        var stopsStrings = stops.map(function (stop) {\n          var stop_position = (stop.position - min) / (max - min)\n          if (last) {\n            last_position = (last.position - min) / (max - min)\n            var step = `${stop.color} ${last_position * 100}%, ${stop.color} ${stop_position * 100}%`\n          } else {\n            var step = `${stop.color} ${stop_position * 100}%`\n          }\n          last = stop\n          return step\n        })\n        if (last) {\n          last_position = (last.position - min) / (max - min)\n          stopsStrings.push(`${last.color} ${last_position * 100}%, white ${last_position * 100}%, white 100%`)\n        }\n      }\n\n      gradient = stopsStrings.join(',')\n    } else {\n      gradient = 'black 0%, black 100%'\n    }\n\n    this.colorbar!.style.background = `linear-gradient(to right, ${gradient})`\n    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */\n  }\n\n  _onChangeSubComponent(e: Event) {\n    var element = e.target as HTMLInputElement\n    var id = element.id\n\n    if (!this.focused) {\n      return\n    }\n\n    switch (id) {\n      case 'color-editor':\n        this._changeFocused({\n          ...this.focused,\n          color: element.value\n        })\n        break\n      case 'color-position':\n        this._changeFocused({\n          ...this.focused,\n          position: Math.max(this.min, Math.min(Number(element.value), this.max))\n        })\n        break\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onDblClickColorbar(e: MouseEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    /* 마커를 클릭한 경우를 걸러낸다. */\n    if (e.target !== this.colorbar) return\n\n    var width = this.colorbar.offsetWidth\n    var position = this.min + (this.max - this.min) * (e.offsetX / width)\n    var colorStops = this.value ? this.value.slice() : []\n\n    for (var i = 0; i < colorStops.length; i++) {\n      if (colorStops[i].position > position) break\n    }\n\n    colorStops.splice(i, 0, {\n      position: position,\n      color: '#fff'\n    })\n\n    this.value = colorStops\n\n    this.focused = null\n    this._setFocused(i)\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onDblClickMarkers(e: MouseEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    this.colorEditor.showPicker()\n  }\n\n  _onMouseDown(e: MouseEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    var marker = e.target as HTMLElement\n    var index = marker.getAttribute('marker-index')\n\n    this._setFocused(Number(index))\n  }\n\n  private dragstart: { position: number; x: number; y: number } = { position: 0, x: 0, y: 0 }\n\n  _onDragStart(e: DragEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    /* drag 시에 ghost image를 보이지 않게 하려고 함 */\n    e.dataTransfer?.setDragImage(this._dragImage!, 0, 0)\n\n    this.dragstart = {\n      position: this.focused.position,\n      x: e.clientX,\n      y: e.clientY\n    }\n  }\n\n  // TODO onDrag 이벤트가 계속 발생하므로 처리하는 성능 저하됨. 그래서 throttling 하도록 함\n  _throttled(delay: number, fn: (...args: any[]) => any) {\n    let lastCall = 0\n    return function (...args: any[]) {\n      const now = new Date().getTime()\n      if (now - lastCall < delay) {\n        return\n      }\n      lastCall = now\n      return fn(...args)\n    }\n  }\n\n  _onDrag(e: DragEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    if (e.clientX <= 0) {\n      return\n    }\n\n    var width = this.colorbar.offsetWidth\n    var position = this.dragstart.position + ((e.clientX - this.dragstart.x) / width) * (this.max - this.min)\n\n    if (position != this.focused.position) {\n      this._changeFocused({\n        ...this.focused,\n        position: Math.max(this.min, Math.min(position, this.max))\n      })\n\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    }\n  }\n\n  _onDragEnd(e: DragEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    if (e.clientY - this.dragstart.y > 40) {\n      this.value!.splice(this.focused.index, 1)\n      this.value = this.value!.slice()\n\n      this._setFocused(-1)\n\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    }\n  }\n\n  _calculatePosition(position: number, min: number, max: number) {\n    /* TODO 7 ==> 마커 폭의 절반으로 계산해야함. */\n    var calculated = position\n\n    if (calculated > this.max) calculated = this.max\n    else if (calculated < this.min) calculated = this.min\n\n    var width = (this.colorbar && this.colorbar.offsetWidth) || 0\n\n    return ((calculated - this.min) / (this.max - this.min)) * width - 7\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    if (!this.name) return\n\n    const value = this.value\n\n    formData.append(\n      this.name!,\n      typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-color-stops.js","sourceRoot":"","sources":["../../src/ox-input-color-stops.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-color'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\nimport { OxInputColor } from './ox-input-color'\nimport deepEquals from 'lodash-es/isEqual'\n\nexport type ColorStop = {\n  color: string\n  position: number\n}\n\n/**\n범위내에서 여러 컬러셋(포지션과 색깔) 배열을 편집하는 컴포넌트이다.\n\n미리보기 Bar에서는 gradient나, solid 형태의 컬러셋을 보여준다.\n\n새로운 컬러셋을 추가고자 할 때는 미리보기 Bar를 더블클릭한다.\n컬러셋을 제거하고자 할 때는 컬러셋 마커를 아래방향으로 드래깅한다.\n컬러셋의 위치를 옮기고자 할 때는, 컬러셋 마커를 좌우로 드래깅하여 이동시키거나,\n옮기고자하는 컬러셋 마커를 마우스로 선택하고, 포지션 입력 에디터에서 직접 수정한다.\n컬러셋의 색상을 바꾸고자 할 때는, 컬러셋 마커를 더블클릭하여 컬러파레트를 팝업시켜서 색상을 선택하거나, 색상 입력 에디터에서 직접 색상을 수정할 수 있다.\n\nExample:\n\n    <ox-input-color-stops type=\"gradient\" .value=${gradient.colorStops}>\n    </ox-input-color-stops>\n*/\n@customElement('ox-input-color-stops')\nexport class OxInputColorStops extends OxFormField {\n  static styles = css`\n    :host {\n      display: grid;\n      grid-template-columns: repeat(10, 1fr);\n      grid-gap: 0;\n      grid-auto-rows: minmax(0, auto);\n    }\n\n    #color-stops {\n      grid-column: 1 / 11;\n      grid-row: 1;\n\n      clear: both;\n      margin-bottom: -3px;\n    }\n\n    #colorbar {\n      width: 95%;\n      height: 12px;\n      margin: auto;\n      margin-bottom: 25px;\n      border: 1px solid #ccc;\n    }\n\n    #markers {\n      position: relative;\n      top: 30px;\n    }\n\n    #markers div {\n      width: 10px;\n      height: 10px;\n      margin-top: -15px;\n      position: absolute;\n      border: 2px solid #fff;\n      cursor: pointer;\n      -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n      -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n      box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n    }\n\n    #markers div::before {\n      border-bottom: 6px solid #fff;\n      border-left: 7px solid transparent;\n      border-right: 7px solid transparent;\n      content: '';\n      width: 0;\n      height: 0;\n      left: -2px;\n      position: absolute;\n      top: -8px;\n    }\n\n    #markers div[focused] {\n      border-color: var(--things-editor-colorbar-marker-focused-color, #585858);\n    }\n\n    #markers div[focused]:before {\n      border-bottom: 7px solid var(--things-editor-colorbar-marker-focused-color, #585858);\n    }\n\n    .icon-only-label {\n      background: url(/assets/images/icon-properties-label.png) no-repeat;\n      width: 30px;\n      height: 24px;\n    }\n\n    .icon-only-label.color {\n      grid-column: 1 / 2;\n      grid-row: 2;\n\n      background-position: 70% -498px;\n      float: left;\n      margin-top: 0;\n    }\n\n    .icon-only-label.position {\n      grid-column: 7 / 8;\n      grid-row: 2;\n\n      background-position: 70% -797px;\n      float: left;\n      margin-top: 0;\n    }\n\n    ox-input-color {\n      grid-column: 2 / 7;\n      grid-row: 2;\n    }\n\n    input[type='number'] {\n      grid-column: 8 / 11;\n      grid-row: 2;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n  `\n\n  /**\n   * `type`은 color-stop bar의 표시 방법을 의미한다.\n   * - 'solid' : 컬러스톱위치에서 다음 컬러스톱까지 solid color로 채운다.\n   * - 'gradient' : 컬러스톱위치에서 다음 컬러스톱까지 gradient color로 채운다.\n   */\n  @property({ type: String }) type: 'solid' | 'gradient' = 'solid'\n  /**\n   * `min`은 color-stop bar의 위치값 범위의 최소값을 의미한다.\n   */\n  @property({ type: Number }) min: number = 0\n  /**\n   * `max`은 color-stop bar의 위치값 범위의 최대값을 의미한다.\n   */\n  @property({ type: Number }) max: number = 1\n  /**\n   * `value`은 color-stops에 의해 만들어진 color-stop 배열을 유지한다.\n   */\n  @property({ type: Array }) value?: ColorStop[]\n  @property({ type: Object }) focused: any\n\n  @query('#colorbar') colorbar!: HTMLElement\n  @query('#color-editor') colorEditor!: OxInputColor\n\n  private _dragImage?: HTMLImageElement\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this._dragImage = new Image()\n    this._dragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='\n  }\n\n  firstUpdated() {\n    window.addEventListener('resize', () => {\n      this.requestUpdate()\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    var needRerenderColorBar = false\n\n    if (changes.has('value') && this.value instanceof Array) {\n      var oldValue = changes.get('value')\n      if (\n        this.focused &&\n        (!oldValue ||\n          this.value.findIndex(v => v.position == this.focused.position && v.color == this.focused.color) == -1)\n      ) {\n        /* 이전 값이 없었던 경우에 focused를 클리어시킨다.\n         * 이전 값이 있던 경우에도, focused는 이 에디터 내부에서만 선택될 수 있으며, 수정될 수 있으므로 동일한 포지션을 갖는 value가 없으면, 새로운 에디터가 시작된 것으로 판단하여 focused를 클리어시킨다.\n         */\n        this.focused = null\n      }\n\n      if (!deepEquals(oldValue, this.value)) {\n        needRerenderColorBar = true\n      }\n    }\n\n    if (needRerenderColorBar || changes.has('min') || changes.has('max')) {\n      if (!this.value) {\n        this.value = [\n          { color: 'white', position: this.min },\n          { color: 'white', position: this.max }\n        ]\n      }\n\n      this._renderColorBar(this.min, this.max, this.type)\n      this.requestUpdate()\n    }\n  }\n\n  render() {\n    return html`\n      <div id=\"color-stops\">\n        <div id=\"colorbar\" @dblclick=${(e: MouseEvent) => this._onDblClickColorbar(e)}>\n          <div\n            id=\"markers\"\n            @dblclick=${(e: MouseEvent) => this._onDblClickMarkers(e)}\n            @pointerdown=${(e: PointerEvent) => this._onPointerDown(e)}\n            @dragstart=${(e: DragEvent) => this._onDragStart(e)}\n            @drag=${this._throttled(100, this._onDrag.bind(this))}\n            @dragend=${(e: DragEvent) => this._onDragEnd(e)}\n          >\n            ${this._refinedValue(this.value).map(\n              (item, index) => html`\n                <div\n                  .style=\"background-color:${item.color};margin-left:${this._calculatePosition(\n                    item.position,\n                    this.min,\n                    this.max\n                  )}px;\"\n                  marker-index=${index}\n                  draggable=\"true\"\n                ></div>\n              `\n            )}\n          </div>\n        </div>\n      </div>\n\n      <label class=\"icon-only-label color\"></label>\n      <ox-input-color\n        id=\"color-editor\"\n        .value=${this.focused && this.focused.color}\n        @change=${(e: Event) => this._onChangeSubComponent(e)}\n        ?disabled=${this.disabled}\n      >\n      </ox-input-color>\n\n      <label class=\"icon-only-label position\"></label>\n      <input\n        type=\"number\"\n        id=\"color-position\"\n        .value=${this.focused && this.focused.position}\n        @change=${(e: Event) => this._onChangeSubComponent(e)}\n        step=\"0.01\"\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n\n  _refinedValue(value: any) {\n    return value instanceof Array ? value : []\n  }\n\n  _setFocused(index: number) {\n    if (this.focused && this.focused.index === index) {\n      return\n    }\n\n    var marker = this.renderRoot.querySelector(`#markers div[marker-index='${index}']`) as HTMLElement\n    var olds = this.renderRoot.querySelectorAll('#markers div[focused]')\n    olds.length > 0 && olds.forEach(old => old.removeAttribute('focused'))\n    marker && marker.setAttribute('focused', '')\n\n    if (!marker) {\n      this.focused = null\n      return\n    }\n\n    var colorStop = this.value![index]\n\n    this._changeFocused({\n      index: index,\n      color: colorStop.color,\n      position: Math.max(this.min, Math.min(colorStop.position, this.max))\n    })\n  }\n\n  _changeFocused(focused: any) {\n    if (!focused) {\n      this._setFocused(-1) // clear focused marker\n\n      return\n    }\n\n    this.focused = focused\n\n    this.value = this.value!.map((colorStop, index): ColorStop => {\n      if (index != focused.index) {\n        return colorStop\n      }\n\n      return {\n        color: focused.color,\n        position: focused.position\n      }\n    }).sort((a: ColorStop, b: ColorStop) => {\n      return b.position < a.position ? 1 : -1\n    })\n\n    var colorStop = this.value[focused.index]\n\n    if (focused.position != colorStop.position || focused.color != colorStop.color) {\n      var index = -1\n      for (var i = 0; i < this.value.length; i++) {\n        colorStop = this.value[i]\n        if (focused.position == colorStop.position && focused.color == colorStop.color) {\n          index = i\n          break\n        }\n      }\n\n      this._setFocused(index)\n    }\n  }\n\n  _renderColorBar(min: number, max: number, type: 'solid' | 'gradient') {\n    var value = this._refinedValue(this.value)\n    var gradient = ''\n\n    if (value instanceof Array && value.length > 0) {\n      if (this.type == 'gradient') {\n        var stopsStrings = (value || []).map(function (stop) {\n          var position = (stop.position - min) / (max - min)\n          return `${stop.color} ${position * 100}%`\n        })\n      } else {\n        var stops = value || []\n        var last: ColorStop | undefined\n        var last_position = 0\n        var stopsStrings = stops.map(function (stop) {\n          var stop_position = (stop.position - min) / (max - min)\n          if (last) {\n            last_position = (last.position - min) / (max - min)\n            var step = `${stop.color} ${last_position * 100}%, ${stop.color} ${stop_position * 100}%`\n          } else {\n            var step = `${stop.color} ${stop_position * 100}%`\n          }\n          last = stop\n          return step\n        })\n        if (last) {\n          last_position = (last.position - min) / (max - min)\n          stopsStrings.push(`${last.color} ${last_position * 100}%, white ${last_position * 100}%, white 100%`)\n        }\n      }\n\n      gradient = stopsStrings.join(',')\n    } else {\n      gradient = 'black 0%, black 100%'\n    }\n\n    this.colorbar!.style.background = `linear-gradient(to right, ${gradient})`\n    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */\n  }\n\n  _onChangeSubComponent(e: Event) {\n    var element = e.target as HTMLInputElement\n    var id = element.id\n\n    if (!this.focused) {\n      return\n    }\n\n    switch (id) {\n      case 'color-editor':\n        this._changeFocused({\n          ...this.focused,\n          color: element.value\n        })\n        break\n      case 'color-position':\n        this._changeFocused({\n          ...this.focused,\n          position: Math.max(this.min, Math.min(Number(element.value), this.max))\n        })\n        break\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onDblClickColorbar(e: MouseEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    /* 마커를 클릭한 경우를 걸러낸다. */\n    if (e.target !== this.colorbar) return\n\n    var width = this.colorbar.offsetWidth\n    var position = this.min + (this.max - this.min) * (e.offsetX / width)\n    var colorStops = this.value ? this.value.slice() : []\n\n    for (var i = 0; i < colorStops.length; i++) {\n      if (colorStops[i].position > position) break\n    }\n\n    colorStops.splice(i, 0, {\n      position: position,\n      color: '#fff'\n    })\n\n    this.value = colorStops\n\n    this.focused = null\n    this._setFocused(i)\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onDblClickMarkers(e: MouseEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    this.colorEditor.showPicker()\n  }\n\n  _onPointerDown(e: PointerEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    var marker = e.target as HTMLElement\n    var index = marker.getAttribute('marker-index')\n\n    this._setFocused(Number(index))\n  }\n\n  private dragstart: { position: number; x: number; y: number } = { position: 0, x: 0, y: 0 }\n\n  _onDragStart(e: DragEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    /* drag 시에 ghost image를 보이지 않게 하려고 함 */\n    e.dataTransfer?.setDragImage(this._dragImage!, 0, 0)\n\n    this.dragstart = {\n      position: this.focused.position,\n      x: e.clientX,\n      y: e.clientY\n    }\n  }\n\n  // TODO onDrag 이벤트가 계속 발생하므로 처리하는 성능 저하됨. 그래서 throttling 하도록 함\n  _throttled(delay: number, fn: (...args: any[]) => any) {\n    let lastCall = 0\n    return function (...args: any[]) {\n      const now = new Date().getTime()\n      if (now - lastCall < delay) {\n        return\n      }\n      lastCall = now\n      return fn(...args)\n    }\n  }\n\n  _onDrag(e: DragEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    if (e.clientX <= 0) {\n      return\n    }\n\n    var width = this.colorbar.offsetWidth\n    var position = this.dragstart.position + ((e.clientX - this.dragstart.x) / width) * (this.max - this.min)\n\n    if (position != this.focused.position) {\n      this._changeFocused({\n        ...this.focused,\n        position: Math.max(this.min, Math.min(position, this.max))\n      })\n\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    }\n  }\n\n  _onDragEnd(e: DragEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    if (e.clientY - this.dragstart.y > 40) {\n      this.value!.splice(this.focused.index, 1)\n      this.value = this.value!.slice()\n\n      this._setFocused(-1)\n\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    }\n  }\n\n  _calculatePosition(position: number, min: number, max: number) {\n    /* TODO 7 ==> 마커 폭의 절반으로 계산해야함. */\n    var calculated = position\n\n    if (calculated > this.max) calculated = this.max\n    else if (calculated < this.min) calculated = this.min\n\n    var width = (this.colorbar && this.colorbar.offsetWidth) || 0\n\n    return ((calculated - this.min) / (this.max - this.min)) * width - 7\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    if (!this.name) return\n\n    const value = this.value\n\n    formData.append(\n      this.name!,\n      typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n    )\n  }\n}\n"]}

package/dist/src/ox-input-direction.d.ts

@@ -6,6 +6,7 @@ import { OxFormField } from './ox-form-field';
 export declare class OxInputDirection extends OxFormField {
     static styles: import("lit").CSSResult;
     value?: string;
+    inbound?: boolean;
     render(): import("lit-html").TemplateResult<1>;
     onClick(e: MouseEvent): void;
 }

package/dist/src/ox-input-direction.js

@@ -7,6 +7,10 @@ import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field';
 let OxInputDirection = class OxInputDirection extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.inbound = false;
+    }
     static { this.styles = css `
     :host {
       --md-icon-size: 1.4em;
@@ -27,15 +31,41 @@ let OxInputDirection = class OxInputDirection extends OxFormField {
       color: var(--md-sys-color-on-primary);
       background-color: var(--md-sys-color-primary);
     }
+
+    /* 아이콘 회전 */
+    md-icon[data-value='W'] {
+      transform: rotate(-90deg);
+    }
+
+    md-icon[data-value='N'] {
+      transform: rotate(0deg);
+    }
+
+    md-icon[data-value='S'] {
+      transform: rotate(180deg);
+    }
+
+    md-icon[data-value='E'] {
+      transform: rotate(90deg);
+    }
   `; }
     render() {
         const value = this.value;
         return html `
       <div @click=${this.onClick.bind(this)}>
-        <md-icon ?selected=${value == 'W'} data-value="W">arrow_back</md-icon>
-        <md-icon ?selected=${value == 'N'} data-value="N">arrow_upward</md-icon>
-        <md-icon ?selected=${value == 'S'} data-value="S">arrow_downward</md-icon>
-        <md-icon ?selected=${value == 'E'} data-value="E">arrow_forward</md-icon>
+        ${this.inbound
+            ? html `
+              <md-icon ?selected=${value == 'W'} data-value="W">step_into</md-icon>
+              <md-icon ?selected=${value == 'N'} data-value="N">step_into</md-icon>
+              <md-icon ?selected=${value == 'S'} data-value="S">step_into</md-icon>
+              <md-icon ?selected=${value == 'E'} data-value="E">step_into</md-icon>
+            `
+            : html `
+              <md-icon ?selected=${value == 'W'} data-value="W">step_out</md-icon>
+              <md-icon ?selected=${value == 'N'} data-value="N">step_out</md-icon>
+              <md-icon ?selected=${value == 'S'} data-value="S">step_out</md-icon>
+              <md-icon ?selected=${value == 'E'} data-value="E">step_out</md-icon>
+            `}
       </div>
     `;
     }
@@ -53,6 +83,9 @@ let OxInputDirection = class OxInputDirection extends OxFormField {
 __decorate([
     property({ type: String })
 ], OxInputDirection.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxInputDirection.prototype, "inbound", void 0);
 OxInputDirection = __decorate([
     customElement('ox-input-direction')
 ], OxInputDirection);

package/dist/src/ox-input-direction.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-direction.js","sourceRoot":"","sources":["../../src/ox-input-direction.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGtC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;aACxC,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;GAoBlB,AApBY,CAoBZ;IAID,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;6BACd,KAAK,IAAI,GAAG;6BACZ,KAAK,IAAI,GAAG;6BACZ,KAAK,IAAI,GAAG;6BACZ,KAAK,IAAI,GAAG;;KAEpC,CAAA;IACH,CAAC;IAED,OAAO,CAAC,CAAa;QACnB,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAAiB,CAAA;QAClC,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,YAAY,CAAW,CAAA;QAEzD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAA;QAErD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;IACtG,CAAC;;AA5B2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAe;AAvB/B,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAoD5B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-direction')\nexport class OxInputDirection extends OxFormField {\n  static styles = css`\n    :host {\n      --md-icon-size: 1.4em;\n    }\n\n    div {\n      display: flex;\n      justify-content: space-between;\n      max-width: 140px;\n    }\n\n    md-icon {\n      color: var(--md-sys-color-on-background);\n      background-color: var(--md-sys-color-background);\n    }\n\n    md-icon[selected] {\n      color: var(--md-sys-color-on-primary);\n      background-color: var(--md-sys-color-primary);\n    }\n  `\n\n  @property({ type: String }) value?: string\n\n  render() {\n    const value = this.value\n\n    return html`\n      <div @click=${this.onClick.bind(this)}>\n        <md-icon ?selected=${value == 'W'} data-value=\"W\">arrow_back</md-icon>\n        <md-icon ?selected=${value == 'N'} data-value=\"N\">arrow_upward</md-icon>\n        <md-icon ?selected=${value == 'S'} data-value=\"S\">arrow_downward</md-icon>\n        <md-icon ?selected=${value == 'E'} data-value=\"E\">arrow_forward</md-icon>\n      </div>\n    `\n  }\n\n  onClick(e: MouseEvent) {\n    e.stopPropagation()\n\n    if (this.disabled) {\n      return\n    }\n\n    const target = e.target as Element\n    const value = target.getAttribute('data-value') as string\n\n    this.value = this.value === value ? undefined : value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-direction.js","sourceRoot":"","sources":["../../src/ox-input-direction.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGtC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAA1C;;QAyCwB,YAAO,GAAa,KAAK,CAAA;IAsCxD,CAAC;aA9EQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqClB,AArCY,CAqCZ;IAKD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;UACjC,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;mCACmB,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;aAClC;YACH,CAAC,CAAC,IAAI,CAAA;mCACmB,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;aAClC;;KAER,CAAA;IACH,CAAC;IAED,OAAO,CAAC,CAAa;QACnB,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAAiB,CAAA;QAClC,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,YAAY,CAAW,CAAA;QAEzD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAA;QAErD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;IACtG,CAAC;;AAtC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAe;AACb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAA0B;AAzC3C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA+E5B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-direction')\nexport class OxInputDirection extends OxFormField {\n  static styles = css`\n    :host {\n      --md-icon-size: 1.4em;\n    }\n\n    div {\n      display: flex;\n      justify-content: space-between;\n      max-width: 140px;\n    }\n\n    md-icon {\n      color: var(--md-sys-color-on-background);\n      background-color: var(--md-sys-color-background);\n    }\n\n    md-icon[selected] {\n      color: var(--md-sys-color-on-primary);\n      background-color: var(--md-sys-color-primary);\n    }\n\n    /* 아이콘 회전 */\n    md-icon[data-value='W'] {\n      transform: rotate(-90deg);\n    }\n\n    md-icon[data-value='N'] {\n      transform: rotate(0deg);\n    }\n\n    md-icon[data-value='S'] {\n      transform: rotate(180deg);\n    }\n\n    md-icon[data-value='E'] {\n      transform: rotate(90deg);\n    }\n  `\n\n  @property({ type: String }) value?: string\n  @property({ type: Boolean }) inbound?: boolean = false\n\n  render() {\n    const value = this.value\n\n    return html`\n      <div @click=${this.onClick.bind(this)}>\n        ${this.inbound\n          ? html`\n              <md-icon ?selected=${value == 'W'} data-value=\"W\">step_into</md-icon>\n              <md-icon ?selected=${value == 'N'} data-value=\"N\">step_into</md-icon>\n              <md-icon ?selected=${value == 'S'} data-value=\"S\">step_into</md-icon>\n              <md-icon ?selected=${value == 'E'} data-value=\"E\">step_into</md-icon>\n            `\n          : html`\n              <md-icon ?selected=${value == 'W'} data-value=\"W\">step_out</md-icon>\n              <md-icon ?selected=${value == 'N'} data-value=\"N\">step_out</md-icon>\n              <md-icon ?selected=${value == 'S'} data-value=\"S\">step_out</md-icon>\n              <md-icon ?selected=${value == 'E'} data-value=\"E\">step_out</md-icon>\n            `}\n      </div>\n    `\n  }\n\n  onClick(e: MouseEvent) {\n    e.stopPropagation()\n\n    if (this.disabled) {\n      return\n    }\n\n    const target = e.target as Element\n    const value = target.getAttribute('data-value') as string\n\n    this.value = this.value === value ? undefined : value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}

package/dist/src/ox-input-signature.d.ts

@@ -1,4 +1,5 @@
 import '@material/web/icon/icon.js';
+import { PropertyValues } from 'lit';
 import { OxFormField } from './ox-form-field.js';
 export declare class OxInputSignature extends OxFormField {
     static styles: import("lit").CSSResult[];
@@ -10,14 +11,15 @@ export declare class OxInputSignature extends OxFormField {
     private isDrawing;
     render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): void;
+    updated(changes: PropertyValues<this>): void;
     openDialog(): void;
     closeDialog(): void;
     startDrawing(event: MouseEvent | TouchEvent): void;
-    stopDrawing(): void;
+    stopDrawing(event: MouseEvent | TouchEvent): void;
     draw(event: MouseEvent | TouchEvent): void;
     clearCanvas(): void;
     saveSignature(): void;
-    loadSignature(dataUrl: string): void;
+    loadSignature(dataUrl: string | null): void;
     getEventPosition(event: MouseEvent | TouchEvent): {
         x: number;
         y: number;

package/dist/src/ox-input-signature.js

@@ -33,8 +33,6 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
       }
 
       dialog canvas {
-        width: 100%;
-        height: 100%;
         border: 1px solid var(--md-sys-color-outline);
       }
 
@@ -48,6 +46,19 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
       .filler {
         flex: 1;
       }
+
+      /* 버튼 스타일 */
+      button {
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
+        padding: 10px 20px;
+        border: none;
+        border-radius: var(--spacing-small);
+        font-family: 'Roboto', sans-serif;
+        font-size: 14px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+      }
     `
     ]; }
     render() {
@@ -58,13 +69,10 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
         <canvas
           width="800"
           height="400"
-          @mousedown=${this.startDrawing}
-          @mouseup=${this.stopDrawing}
-          @mousemove=${this.draw}
-          @mouseleave=${this.stopDrawing}
-          @touchstart=${this.startDrawing}
-          @touchend=${this.stopDrawing}
-          @touchmove=${this.draw}
+          @pointerdown=${this.startDrawing}
+          @pointerup=${this.stopDrawing}
+          @pointermove=${this.draw}
+          @pointerleave=${this.stopDrawing}
         ></canvas>
         <div class="controls">
           <button @click="${this.clearCanvas}">Clear</button>
@@ -84,11 +92,16 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
             this.loadSignature(this.value);
         }
     }
+    updated(changes) {
+        if (changes.has('value')) {
+            this.loadSignature(this.value);
+        }
+    }
     openDialog() {
-        if (this.disabled)
+        if (this.disabled) {
             return;
+        }
         this.dialog.showModal();
-        // 다이아로그가 열릴 때 현재 value를 캔버스에 그리기
         if (this.value) {
             const img = new Image();
             img.onload = () => {
@@ -104,17 +117,24 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
         if (this.disabled) {
             return;
         }
+        event.preventDefault();
+        event.stopPropagation();
         this.isDrawing = true;
         this.ctx.beginPath();
         const position = this.getEventPosition(event);
         this.ctx.moveTo(position.x, position.y);
     }
-    stopDrawing() {
+    stopDrawing(event) {
+        event.preventDefault();
+        event.stopPropagation();
         this.isDrawing = false;
     }
     draw(event) {
-        if (!this.isDrawing)
+        if (!this.isDrawing) {
             return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
         const position = this.getEventPosition(event);
         this.ctx.lineTo(position.x, position.y);
         this.ctx.stroke();
@@ -129,7 +149,7 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
         this.closeDialog();
     }
     loadSignature(dataUrl) {
-        this.previewDiv.style.backgroundImage = `url(${dataUrl})`;
+        this.previewDiv.style.backgroundImage = dataUrl ? `url(${dataUrl})` : 'none';
     }
     getEventPosition(event) {
         const rect = this.canvas.getBoundingClientRect();

package/dist/src/ox-input-signature.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-signature.js","sourceRoot":"","sources":["../../src/ox-input-signature.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAW,MAAM,KAAK,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAA1C;;QA2CuB,UAAK,GAAkB,IAAI,CAAA;QAU/C,cAAS,GAAG,KAAK,CAAA;IAsH3B,CAAC;aA1KQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCF;KACF,AAxCY,CAwCZ;IAcD,MAAM;QACJ,OAAO,IAAI,CAAA;8CAC+B,IAAI,CAAC,UAAU;;;;;;uBAMtC,IAAI,CAAC,YAAY;qBACnB,IAAI,CAAC,WAAW;uBACd,IAAI,CAAC,IAAI;wBACR,IAAI,CAAC,WAAW;wBAChB,IAAI,CAAC,YAAY;sBACnB,IAAI,CAAC,WAAW;uBACf,IAAI,CAAC,IAAI;;;4BAGJ,IAAI,CAAC,WAAW;;4BAEhB,IAAI,CAAC,aAAa;4BAClB,IAAI,CAAC,WAAW;;;KAGvC,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAE,CAAA;QACxC,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,MAAM,CAAA;QAC7B,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,CAAC,CAAA;QAEtB,+BAA+B;QAC/B,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAChC,CAAC;IACH,CAAC;IAED,UAAU;QACR,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAM;QACzB,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAA;QAEvB,iCAAiC;QACjC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,GAAG,GAAG,IAAI,KAAK,EAAE,CAAA;YACvB,GAAG,CAAC,MAAM,GAAG,GAAG,EAAE;gBAChB,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;YACtE,CAAC,CAAA;YACD,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAA;QACtB,CAAC;IACH,CAAC;IAED,WAAW;QACT,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;IACrB,CAAC;IAED,YAAY,CAAC,KAA8B;QACzC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;QACrB,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,CAAA;QACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAA;QAC7C,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IACzC,CAAC;IAED,WAAW;QACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;IACxB,CAAC;IAED,IAAI,CAAC,KAA8B;QACjC,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAM;QAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAA;QAC7C,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;QACvC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAA;IACnB,CAAC;IAED,WAAW;QACT,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IACjE,CAAC;IAED,aAAa;QACX,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAA;QACpC,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,eAAe,GAAG,OAAO,IAAI,CAAC,KAAK,GAAG,CAAA;QAC5D,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED,aAAa,CAAC,OAAe;QAC3B,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,eAAe,GAAG,OAAO,OAAO,GAAG,CAAA;IAC3D,CAAC;IAED,gBAAgB,CAAC,KAA8B;QAC7C,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAA;QAEhD,+BAA+B;QAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;QAE/C,WAAW;QACX,MAAM,YAAY,GAAG,KAAK,YAAY,UAAU,CAAA;QAChD,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAE,KAAoB,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,MAAM,CAAA;QACpH,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAE,KAAoB,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAA;QAElH,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;IACjB,CAAC;IAED,aAAa;QACX,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;;AA/H2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAA4B;AAG/C;IADP,KAAK,CAAC,oBAAoB,CAAC;oDACO;AAE3B;IADP,KAAK,CAAC,QAAQ,CAAC;gDACkB;AAE1B;IADP,KAAK,CAAC,QAAQ,CAAC;gDACkB;AAlDvB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA2K5B","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-signature')\nexport class OxInputSignature extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        min-height: var(--signature-min-height, 80px);\n        min-width: var(--signature-min-width, 120px);\n\n        background-color: var(--signature-background-color, white);\n\n        overflow: hidden;\n      }\n\n      .signature-preview {\n        flex: 1;\n        align-self: stretch;\n\n        border: 1px solid var(--md-sys-color-outline);\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center;\n      }\n\n      dialog canvas {\n        width: 100%;\n        height: 100%;\n        border: 1px solid var(--md-sys-color-outline);\n      }\n\n      .controls {\n        margin-top: 10px;\n        display: flex;\n        flex-direction: row;\n        gap: var(--spacing-medium);\n      }\n\n      .filler {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: String }) value: string | null = null\n\n  @query('.signature-preview')\n  private previewDiv!: HTMLDivElement\n  @query('dialog')\n  private dialog!: HTMLDialogElement\n  @query('canvas')\n  private canvas!: HTMLCanvasElement\n\n  private ctx!: CanvasRenderingContext2D\n  private isDrawing = false\n\n  render() {\n    return html`\n      <div class=\"signature-preview\" @click=${this.openDialog}></div>\n\n      <dialog>\n        <canvas\n          width=\"800\"\n          height=\"400\"\n          @mousedown=${this.startDrawing}\n          @mouseup=${this.stopDrawing}\n          @mousemove=${this.draw}\n          @mouseleave=${this.stopDrawing}\n          @touchstart=${this.startDrawing}\n          @touchend=${this.stopDrawing}\n          @touchmove=${this.draw}\n        ></canvas>\n        <div class=\"controls\">\n          <button @click=\"${this.clearCanvas}\">Clear</button>\n          <div class=\"filler\"></div>\n          <button @click=\"${this.saveSignature}\">Save</button>\n          <button @click=\"${this.closeDialog}\">Close</button>\n        </div>\n      </dialog>\n    `\n  }\n\n  firstUpdated() {\n    this.ctx = this.canvas.getContext('2d')!\n    this.ctx.strokeStyle = '#000'\n    this.ctx.lineWidth = 2\n\n    // 처음 로딩 시 서명 데이터를 미리보기 div에 표시\n    if (this.value) {\n      this.loadSignature(this.value)\n    }\n  }\n\n  openDialog() {\n    if (this.disabled) return\n    this.dialog.showModal()\n\n    // 다이아로그가 열릴 때 현재 value를 캔버스에 그리기\n    if (this.value) {\n      const img = new Image()\n      img.onload = () => {\n        this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)\n      }\n      img.src = this.value\n    }\n  }\n\n  closeDialog() {\n    this.dialog.close()\n  }\n\n  startDrawing(event: MouseEvent | TouchEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    this.isDrawing = true\n    this.ctx.beginPath()\n    const position = this.getEventPosition(event)\n    this.ctx.moveTo(position.x, position.y)\n  }\n\n  stopDrawing() {\n    this.isDrawing = false\n  }\n\n  draw(event: MouseEvent | TouchEvent) {\n    if (!this.isDrawing) return\n    const position = this.getEventPosition(event)\n    this.ctx.lineTo(position.x, position.y)\n    this.ctx.stroke()\n  }\n\n  clearCanvas() {\n    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)\n  }\n\n  saveSignature() {\n    this.value = this.canvas.toDataURL()\n    this._notifyChange()\n    this.previewDiv.style.backgroundImage = `url(${this.value})`\n    this.closeDialog()\n  }\n\n  loadSignature(dataUrl: string) {\n    this.previewDiv.style.backgroundImage = `url(${dataUrl})`\n  }\n\n  getEventPosition(event: MouseEvent | TouchEvent) {\n    const rect = this.canvas.getBoundingClientRect()\n\n    // 캔버스의 실제 크기와 CSS 크기 간의 비율을 계산\n    const scaleX = this.canvas.width / rect.width\n    const scaleY = this.canvas.height / rect.height\n\n    // 실제 좌표 계산\n    const isTouchEvent = event instanceof TouchEvent\n    const x = (isTouchEvent ? event.touches[0].clientX - rect.left : (event as MouseEvent).clientX - rect.left) * scaleX\n    const y = (isTouchEvent ? event.touches[0].clientY - rect.top : (event as MouseEvent).clientY - rect.top) * scaleY\n\n    return { x, y }\n  }\n\n  _notifyChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-signature.js","sourceRoot":"","sources":["../../src/ox-input-signature.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-signature')\nexport class OxInputSignature extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        min-height: var(--signature-min-height, 80px);\n        min-width: var(--signature-min-width, 120px);\n\n        background-color: var(--signature-background-color, white);\n\n        overflow: hidden;\n      }\n\n      .signature-preview {\n        flex: 1;\n        align-self: stretch;\n\n        border: 1px solid var(--md-sys-color-outline);\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center;\n      }\n\n      dialog canvas {\n        border: 1px solid var(--md-sys-color-outline);\n      }\n\n      .controls {\n        margin-top: 10px;\n        display: flex;\n        flex-direction: row;\n        gap: var(--spacing-medium);\n      }\n\n      .filler {\n        flex: 1;\n      }\n\n      /* 버튼 스타일 */\n      button {\n        background-color: var(--md-sys-color-primary);\n        color: var(--md-sys-color-on-primary);\n        padding: 10px 20px;\n        border: none;\n        border-radius: var(--spacing-small);\n        font-family: 'Roboto', sans-serif;\n        font-size: 14px;\n        cursor: pointer;\n        transition: background-color 0.3s ease;\n      }\n    `\n  ]\n\n  @property({ type: String }) value: string | null = null\n\n  @query('.signature-preview')\n  private previewDiv!: HTMLDivElement\n  @query('dialog')\n  private dialog!: HTMLDialogElement\n  @query('canvas')\n  private canvas!: HTMLCanvasElement\n\n  private ctx!: CanvasRenderingContext2D\n  private isDrawing = false\n\n  render() {\n    return html`\n      <div class=\"signature-preview\" @click=${this.openDialog}></div>\n\n      <dialog>\n        <canvas\n          width=\"800\"\n          height=\"400\"\n          @pointerdown=${this.startDrawing}\n          @pointerup=${this.stopDrawing}\n          @pointermove=${this.draw}\n          @pointerleave=${this.stopDrawing}\n        ></canvas>\n        <div class=\"controls\">\n          <button @click=\"${this.clearCanvas}\">Clear</button>\n          <div class=\"filler\"></div>\n          <button @click=\"${this.saveSignature}\">Save</button>\n          <button @click=\"${this.closeDialog}\">Close</button>\n        </div>\n      </dialog>\n    `\n  }\n\n  firstUpdated() {\n    this.ctx = this.canvas.getContext('2d')!\n    this.ctx.strokeStyle = '#000'\n    this.ctx.lineWidth = 2\n\n    // 처음 로딩 시 서명 데이터를 미리보기 div에 표시\n    if (this.value) {\n      this.loadSignature(this.value)\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.loadSignature(this.value)\n    }\n  }\n\n  openDialog() {\n    if (this.disabled) {\n      return\n    }\n\n    this.dialog.showModal()\n\n    if (this.value) {\n      const img = new Image()\n      img.onload = () => {\n        this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)\n      }\n      img.src = this.value\n    }\n  }\n\n  closeDialog() {\n    this.dialog.close()\n  }\n\n  startDrawing(event: MouseEvent | TouchEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    event.preventDefault()\n    event.stopPropagation()\n\n    this.isDrawing = true\n    this.ctx.beginPath()\n    const position = this.getEventPosition(event)\n    this.ctx.moveTo(position.x, position.y)\n  }\n\n  stopDrawing(event: MouseEvent | TouchEvent) {\n    event.preventDefault()\n    event.stopPropagation()\n\n    this.isDrawing = false\n  }\n\n  draw(event: MouseEvent | TouchEvent) {\n    if (!this.isDrawing) {\n      return\n    }\n\n    event.preventDefault()\n    event.stopPropagation()\n\n    const position = this.getEventPosition(event)\n    this.ctx.lineTo(position.x, position.y)\n    this.ctx.stroke()\n  }\n\n  clearCanvas() {\n    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)\n  }\n\n  saveSignature() {\n    this.value = this.canvas.toDataURL()\n    this._notifyChange()\n    this.previewDiv.style.backgroundImage = `url(${this.value})`\n    this.closeDialog()\n  }\n\n  loadSignature(dataUrl: string | null) {\n    this.previewDiv.style.backgroundImage = dataUrl ? `url(${dataUrl})` : 'none'\n  }\n\n  getEventPosition(event: MouseEvent | TouchEvent) {\n    const rect = this.canvas.getBoundingClientRect()\n\n    // 캔버스의 실제 크기와 CSS 크기 간의 비율을 계산\n    const scaleX = this.canvas.width / rect.width\n    const scaleY = this.canvas.height / rect.height\n\n    // 실제 좌표 계산\n    const isTouchEvent = event instanceof TouchEvent\n    const x = (isTouchEvent ? event.touches[0].clientX - rect.left : (event as MouseEvent).clientX - rect.left) * scaleX\n    const y = (isTouchEvent ? event.touches[0].clientY - rect.top : (event as MouseEvent).clientY - rect.top) * scaleY\n\n    return { x, y }\n  }\n\n  _notifyChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}

package/dist/src/ox-select-floor.d.ts

@@ -0,0 +1,35 @@
+import { PropertyValues } from 'lit';
+import { OxFormField } from './ox-form-field';
+type Card = {
+    name: string;
+    image: string;
+};
+export declare class OxSelectFloor extends OxFormField {
+    static styles: import("lit").CSSResult[];
+    cards: Card[];
+    value?: string;
+    bottomLimit: number;
+    interval: number;
+    private selectedIndex;
+    private activeIndex;
+    private carouselContainer;
+    private isDragging;
+    private lastMouseY;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+    firstUpdated(): void;
+    getClassForCard(index: number): "selected" | "compressed";
+    isActive(index: number): boolean;
+    handleWheel(event: WheelEvent): void;
+    handlePointerDown(event: PointerEvent): void;
+    handlePointerMove(event: PointerEvent): void;
+    handlePointerUp(event: PointerEvent): void;
+    handlePointerLeave(event: PointerEvent): void;
+    private toggleActiveCard;
+    private updateSelectedIndex;
+    private scrollToSelectedCard;
+    private selectCard;
+    private notifySelection;
+    private adjustCardHeight;
+}
+export {};