@operato/input 9.0.0-beta.5 → 9.0.0-beta.6

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.0.0-beta.6](https://github.com/hatiolab/operato/compare/v9.0.0-beta.5...v9.0.0-beta.6) (2025-01-20)
+
+
+### :bug: Bug Fix
+
+* esm module ([9642b97](https://github.com/hatiolab/operato/commit/9642b97650623d9ce71f6db0fd1995a2379205b5))
+
+
+
 ## [9.0.0-beta.5](https://github.com/hatiolab/operato/compare/v9.0.0-beta.4...v9.0.0-beta.5) (2025-01-20)
 
 **Note:** Version bump only for package @operato/input

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

@@ -2,9 +2,9 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import '@operato/i18n/ox-i18n.js';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
-import '@polymer/paper-listbox/paper-listbox';
-import '@polymer/paper-item/paper-item';
+import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
+import '@polymer/paper-listbox/paper-listbox.js';
+import '@polymer/paper-item/paper-item.js';
 import '@operato/input/ox-input-angle.js';
 import '@operato/input/ox-input-color-stops.js';
 import { ColorStop } from './ox-input-color-stops.js';

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

@@ -3,9 +3,9 @@
  */
 import { __decorate } from "tslib";
 import '@operato/i18n/ox-i18n.js';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
-import '@polymer/paper-listbox/paper-listbox';
-import '@polymer/paper-item/paper-item';
+import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
+import '@polymer/paper-listbox/paper-listbox.js';
+import '@polymer/paper-item/paper-item.js';
 import '@operato/input/ox-input-angle.js';
 import '@operato/input/ox-input-color-stops.js';
 import { css, html } from 'lit';

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-color-gradient.js","sourceRoot":"","sources":["../../src/ox-input-color-gradient.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu'\nimport '@polymer/paper-listbox/paper-listbox'\nimport '@polymer/paper-item/paper-item'\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/input/ox-input-color-stops.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ColorStop } from './ox-input-color-stops.js'\nimport { OxFormField } from './ox-form-field.js'\n\nexport type GradientOption = {\n  type: 'linear' | 'radial'\n  rotation: number\n  direction?:\n    | 'left-to-right'\n    | 'lefttop-to-rightbottom'\n    | 'top-to-bottom'\n    | 'righttop-to-leftbottom'\n    | 'right-to-left'\n    | 'rightbottom-to-lefttop'\n    | 'bottom-to-top'\n    | 'leftbottom-to-righttop'\n    | 'left-to-right'\n    | 'center-to-corner'\n  center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom'\n  colorStops?: ColorStop[]\n}\n\n@customElement('ox-input-color-gradient')\nexport class OxInputColorGradient extends OxFormField {\n  static styles = css`\n    :host {\n      display: grid;\n\n      grid-template-columns: repeat(10, 1fr);\n      grid-gap: 5px;\n      grid-auto-rows: minmax(24px, auto);\n\n      align-items: center;\n    }\n\n    :host > * {\n      align-self: stretch;\n    }\n\n    :host > label {\n      grid-column: span 2;\n      text-align: right;\n      text-transform: capitalize;\n      align-self: center;\n    }\n\n    :host > .icon-only-label {\n      grid-column: span 1;\n    }\n\n    :host > input,\n    :host > [editors] {\n      grid-column: span 8;\n    }\n\n    :host > select {\n      grid-column: span 4;\n      height: 100%;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n\n    :host > ox-input-angle {\n      grid-column: span 3;\n    }\n\n    ox-input-color-stops {\n      grid-column: span 10;\n    }\n\n    .host > input[type='checkbox'] {\n      grid-column: 3 / 4;\n    }\n\n    .host > input[type='checkbox'] ~ label {\n      grid-column: span 7;\n      text-align: left;\n    }\n\n    [editors] > :not([active-selector]) {\n      display: none;\n    }\n\n    [gradient-direction] {\n      overflow: hidden;\n      max-width: 210px;\n    }\n\n    [gradient-direction] paper-item {\n      background: url(/assets/images/icon-editor-gradient-direction.png) 50% 0 no-repeat;\n      min-height: 32px;\n      padding: 3px 5px;\n      width: 30px;\n      float: left;\n    }\n\n    [gradient-direction] [name='lefttop-to-rightbottom'] {\n      background-position: 50% 4px;\n    }\n\n    [gradient-direction] [name='left-top'] {\n      background-position: 50% 4px;\n    }\n\n    [gradient-direction] [name='top-to-bottom'] {\n      background-position: 50% -46px;\n    }\n\n    [gradient-direction] [name='righttop-to-leftbottom'] {\n      background-position: 50% -96px;\n    }\n\n    [gradient-direction] [name='right-top'] {\n      background-position: 50% -96px;\n    }\n\n    [gradient-direction] [name='right-to-left'] {\n      background-position: 50% -146px;\n    }\n\n    [gradient-direction] [name='rightbottom-to-lefttop'] {\n      background-position: 50% -196px;\n    }\n\n    [gradient-direction] [name='right-bottom'] {\n      background-position: 50% -196px;\n    }\n\n    [gradient-direction] [name='bottom-to-top'] {\n      background-position: 50% -246px;\n    }\n\n    [gradient-direction] [name='leftbottom-to-righttop'] {\n      background-position: 50% -296px;\n    }\n\n    [gradient-direction] [name='left-bottom'] {\n      background-position: 50% -296px;\n    }\n\n    [gradient-direction] [name='left-to-right'] {\n      background-position: 50% -346px;\n    }\n\n    [gradient-direction] [name='center-to-corner'] {\n      background-position: 50% -396px;\n    }\n\n    [gradient-direction] [name='center'] {\n      background-position: 50% -396px;\n    }\n\n    [gradient-direction] paper-item[focused] {\n      background-color: rgba(255, 246, 143, 0.5);\n    }\n\n    .icon-only-label {\n      top: 0 !important;\n      width: 30px !important;\n      height: 24px;\n      background: url(/assets/images/icon-properties-label.png) no-repeat;\n    }\n\n    .icon-only-label.color {\n      background-position: 70% -198px;\n    }\n  `\n\n  @property({ type: Object }) value: GradientOption = {\n    type: 'linear',\n    direction: 'left-to-right',\n    rotation: 0\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  _onChange(e: Event) {\n    var element = e.target as HTMLElement & { type: string }\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    var value\n\n    switch (element.tagName) {\n      case 'INPUT':\n        switch (element.type) {\n          case 'checkbox':\n            value = (element as HTMLInputElement).checked\n            break\n          case 'number':\n            value = Number((element as HTMLInputElement).value) || 0\n            break\n          case 'text':\n            value = String((element as HTMLInputElement).value)\n        }\n        break\n\n      case 'PAPER-BUTTON':\n        value = (element as any).active\n        break\n\n      case 'PAPER-LISTBOX':\n        value = (element as any).selected\n        break\n\n      default:\n        value = (element as HTMLInputElement).value\n        break\n    }\n\n    if (key === 'rotation') {\n      this.value = {\n        ...this.value,\n        rotation: value,\n        direction: undefined\n      }\n    } else if (key === 'direction') {\n      if (value) {\n        this.value = {\n          ...this.value,\n          direction: value,\n          rotation: this._convertDirectionToRotation(value)\n        }\n      }\n    } else {\n      this.value = {\n        ...this.value,\n        [key]: value\n      }\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  render() {\n    var selector = (this.value && this.value.type) || 'linear'\n    var value = this.value || {}\n\n    return html`\n      <label> <ox-i18n msgid=\"label.type\">type</ox-i18n> </label>\n      <select value-key=\"type\" .value=${value.type || 'linear'} ?disabled=${this.disabled}>\n        <option>linear</option>\n        <option>radial</option>\n      </select>\n\n      <label class=\"icon-only-label color\"></label>\n      <ox-input-angle value-key=\"rotation\" .value=${value.rotation || 0} ?disabled=${this.disabled}> </ox-input-angle>\n\n      <label> <ox-i18n msgid=\"label.direction\">direction</ox-i18n> </label>\n      <div editors>\n        <paper-dropdown-menu no-label-float=\"true\" ?active-selector=${selector == 'linear'} .value=${value.direction}>\n          <paper-listbox\n            @selected-changed=${(e: Event) => this._onChange(e)}\n            value-key=\"direction\"\n            slot=\"dropdown-content\"\n            gradient-direction\n            .selected=${value.direction}\n            attr-for-selected=\"name\"\n          >\n            <paper-item name=\"lefttop-to-rightbottom\"></paper-item>\n            <paper-item name=\"top-to-bottom\"></paper-item>\n            <paper-item name=\"righttop-to-leftbottom\"></paper-item>\n            <paper-item name=\"right-to-left\"></paper-item>\n            <paper-item name=\"rightbottom-to-lefttop\"></paper-item>\n            <paper-item name=\"bottom-to-top\"></paper-item>\n            <paper-item name=\"leftbottom-to-righttop\"></paper-item>\n            <paper-item name=\"left-to-right\"></paper-item>\n            <paper-item name=\"center-to-corner\"></paper-item>\n          </paper-listbox>\n        </paper-dropdown-menu>\n\n        <paper-dropdown-menu no-label-float=\"true\" ?active-selector=${selector == 'radial'} .value=${value.center}>\n          <paper-listbox\n            @selected-changed=${(e: Event) => this._onChange(e)}\n            value-key=\"center\"\n            slot=\"dropdown-content\"\n            gradient-direction\n            .selected=${value.center || 'center'}\n            attr-for-selected=\"name\"\n          >\n            <paper-item name=\"center\"></paper-item>\n            <paper-item name=\"left-top\"></paper-item>\n            <paper-item name=\"right-top\"></paper-item>\n            <paper-item name=\"right-bottom\"></paper-item>\n            <paper-item name=\"left-bottom\"></paper-item>\n          </paper-listbox>\n        </paper-dropdown-menu>\n      </div>\n\n      <ox-input-color-stops\n        value-key=\"colorStops\"\n        type=\"gradient\"\n        .value=${value.colorStops}\n        ?disabled=${this.disabled}\n      >\n      </ox-input-color-stops>\n    `\n  }\n\n  _convertDirectionToRotation(direction: string): number {\n    var rotation\n    switch (direction) {\n      case 'lefttop-to-rightbottom':\n        rotation = 45\n        break\n      case 'top-to-bottom':\n        rotation = 90\n        break\n      case 'righttop-to-leftbottom':\n        rotation = 135\n        break\n      case 'right-to-left':\n        rotation = 180\n        break\n      case 'rightbottom-to-lefttop':\n        rotation = 215\n        break\n      case 'bottom-to-top':\n        rotation = 270\n        break\n      case 'leftbottom-to-righttop':\n        rotation = 315\n        break\n      case 'left-to-right':\n      default:\n        rotation = 0\n        break\n    }\n\n    return (rotation / 360) * Math.PI * 2\n  }\n}\n"]}
+{"version":3,"file":"ox-input-color-gradient.js","sourceRoot":"","sources":["../../src/ox-input-color-gradient.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu.js'\nimport '@polymer/paper-listbox/paper-listbox.js'\nimport '@polymer/paper-item/paper-item.js'\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/input/ox-input-color-stops.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ColorStop } from './ox-input-color-stops.js'\nimport { OxFormField } from './ox-form-field.js'\n\nexport type GradientOption = {\n  type: 'linear' | 'radial'\n  rotation: number\n  direction?:\n    | 'left-to-right'\n    | 'lefttop-to-rightbottom'\n    | 'top-to-bottom'\n    | 'righttop-to-leftbottom'\n    | 'right-to-left'\n    | 'rightbottom-to-lefttop'\n    | 'bottom-to-top'\n    | 'leftbottom-to-righttop'\n    | 'left-to-right'\n    | 'center-to-corner'\n  center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom'\n  colorStops?: ColorStop[]\n}\n\n@customElement('ox-input-color-gradient')\nexport class OxInputColorGradient extends OxFormField {\n  static styles = css`\n    :host {\n      display: grid;\n\n      grid-template-columns: repeat(10, 1fr);\n      grid-gap: 5px;\n      grid-auto-rows: minmax(24px, auto);\n\n      align-items: center;\n    }\n\n    :host > * {\n      align-self: stretch;\n    }\n\n    :host > label {\n      grid-column: span 2;\n      text-align: right;\n      text-transform: capitalize;\n      align-self: center;\n    }\n\n    :host > .icon-only-label {\n      grid-column: span 1;\n    }\n\n    :host > input,\n    :host > [editors] {\n      grid-column: span 8;\n    }\n\n    :host > select {\n      grid-column: span 4;\n      height: 100%;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n\n    :host > ox-input-angle {\n      grid-column: span 3;\n    }\n\n    ox-input-color-stops {\n      grid-column: span 10;\n    }\n\n    .host > input[type='checkbox'] {\n      grid-column: 3 / 4;\n    }\n\n    .host > input[type='checkbox'] ~ label {\n      grid-column: span 7;\n      text-align: left;\n    }\n\n    [editors] > :not([active-selector]) {\n      display: none;\n    }\n\n    [gradient-direction] {\n      overflow: hidden;\n      max-width: 210px;\n    }\n\n    [gradient-direction] paper-item {\n      background: url(/assets/images/icon-editor-gradient-direction.png) 50% 0 no-repeat;\n      min-height: 32px;\n      padding: 3px 5px;\n      width: 30px;\n      float: left;\n    }\n\n    [gradient-direction] [name='lefttop-to-rightbottom'] {\n      background-position: 50% 4px;\n    }\n\n    [gradient-direction] [name='left-top'] {\n      background-position: 50% 4px;\n    }\n\n    [gradient-direction] [name='top-to-bottom'] {\n      background-position: 50% -46px;\n    }\n\n    [gradient-direction] [name='righttop-to-leftbottom'] {\n      background-position: 50% -96px;\n    }\n\n    [gradient-direction] [name='right-top'] {\n      background-position: 50% -96px;\n    }\n\n    [gradient-direction] [name='right-to-left'] {\n      background-position: 50% -146px;\n    }\n\n    [gradient-direction] [name='rightbottom-to-lefttop'] {\n      background-position: 50% -196px;\n    }\n\n    [gradient-direction] [name='right-bottom'] {\n      background-position: 50% -196px;\n    }\n\n    [gradient-direction] [name='bottom-to-top'] {\n      background-position: 50% -246px;\n    }\n\n    [gradient-direction] [name='leftbottom-to-righttop'] {\n      background-position: 50% -296px;\n    }\n\n    [gradient-direction] [name='left-bottom'] {\n      background-position: 50% -296px;\n    }\n\n    [gradient-direction] [name='left-to-right'] {\n      background-position: 50% -346px;\n    }\n\n    [gradient-direction] [name='center-to-corner'] {\n      background-position: 50% -396px;\n    }\n\n    [gradient-direction] [name='center'] {\n      background-position: 50% -396px;\n    }\n\n    [gradient-direction] paper-item[focused] {\n      background-color: rgba(255, 246, 143, 0.5);\n    }\n\n    .icon-only-label {\n      top: 0 !important;\n      width: 30px !important;\n      height: 24px;\n      background: url(/assets/images/icon-properties-label.png) no-repeat;\n    }\n\n    .icon-only-label.color {\n      background-position: 70% -198px;\n    }\n  `\n\n  @property({ type: Object }) value: GradientOption = {\n    type: 'linear',\n    direction: 'left-to-right',\n    rotation: 0\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  _onChange(e: Event) {\n    var element = e.target as HTMLElement & { type: string }\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    var value\n\n    switch (element.tagName) {\n      case 'INPUT':\n        switch (element.type) {\n          case 'checkbox':\n            value = (element as HTMLInputElement).checked\n            break\n          case 'number':\n            value = Number((element as HTMLInputElement).value) || 0\n            break\n          case 'text':\n            value = String((element as HTMLInputElement).value)\n        }\n        break\n\n      case 'PAPER-BUTTON':\n        value = (element as any).active\n        break\n\n      case 'PAPER-LISTBOX':\n        value = (element as any).selected\n        break\n\n      default:\n        value = (element as HTMLInputElement).value\n        break\n    }\n\n    if (key === 'rotation') {\n      this.value = {\n        ...this.value,\n        rotation: value,\n        direction: undefined\n      }\n    } else if (key === 'direction') {\n      if (value) {\n        this.value = {\n          ...this.value,\n          direction: value,\n          rotation: this._convertDirectionToRotation(value)\n        }\n      }\n    } else {\n      this.value = {\n        ...this.value,\n        [key]: value\n      }\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  render() {\n    var selector = (this.value && this.value.type) || 'linear'\n    var value = this.value || {}\n\n    return html`\n      <label> <ox-i18n msgid=\"label.type\">type</ox-i18n> </label>\n      <select value-key=\"type\" .value=${value.type || 'linear'} ?disabled=${this.disabled}>\n        <option>linear</option>\n        <option>radial</option>\n      </select>\n\n      <label class=\"icon-only-label color\"></label>\n      <ox-input-angle value-key=\"rotation\" .value=${value.rotation || 0} ?disabled=${this.disabled}> </ox-input-angle>\n\n      <label> <ox-i18n msgid=\"label.direction\">direction</ox-i18n> </label>\n      <div editors>\n        <paper-dropdown-menu no-label-float=\"true\" ?active-selector=${selector == 'linear'} .value=${value.direction}>\n          <paper-listbox\n            @selected-changed=${(e: Event) => this._onChange(e)}\n            value-key=\"direction\"\n            slot=\"dropdown-content\"\n            gradient-direction\n            .selected=${value.direction}\n            attr-for-selected=\"name\"\n          >\n            <paper-item name=\"lefttop-to-rightbottom\"></paper-item>\n            <paper-item name=\"top-to-bottom\"></paper-item>\n            <paper-item name=\"righttop-to-leftbottom\"></paper-item>\n            <paper-item name=\"right-to-left\"></paper-item>\n            <paper-item name=\"rightbottom-to-lefttop\"></paper-item>\n            <paper-item name=\"bottom-to-top\"></paper-item>\n            <paper-item name=\"leftbottom-to-righttop\"></paper-item>\n            <paper-item name=\"left-to-right\"></paper-item>\n            <paper-item name=\"center-to-corner\"></paper-item>\n          </paper-listbox>\n        </paper-dropdown-menu>\n\n        <paper-dropdown-menu no-label-float=\"true\" ?active-selector=${selector == 'radial'} .value=${value.center}>\n          <paper-listbox\n            @selected-changed=${(e: Event) => this._onChange(e)}\n            value-key=\"center\"\n            slot=\"dropdown-content\"\n            gradient-direction\n            .selected=${value.center || 'center'}\n            attr-for-selected=\"name\"\n          >\n            <paper-item name=\"center\"></paper-item>\n            <paper-item name=\"left-top\"></paper-item>\n            <paper-item name=\"right-top\"></paper-item>\n            <paper-item name=\"right-bottom\"></paper-item>\n            <paper-item name=\"left-bottom\"></paper-item>\n          </paper-listbox>\n        </paper-dropdown-menu>\n      </div>\n\n      <ox-input-color-stops\n        value-key=\"colorStops\"\n        type=\"gradient\"\n        .value=${value.colorStops}\n        ?disabled=${this.disabled}\n      >\n      </ox-input-color-stops>\n    `\n  }\n\n  _convertDirectionToRotation(direction: string): number {\n    var rotation\n    switch (direction) {\n      case 'lefttop-to-rightbottom':\n        rotation = 45\n        break\n      case 'top-to-bottom':\n        rotation = 90\n        break\n      case 'righttop-to-leftbottom':\n        rotation = 135\n        break\n      case 'right-to-left':\n        rotation = 180\n        break\n      case 'rightbottom-to-lefttop':\n        rotation = 215\n        break\n      case 'bottom-to-top':\n        rotation = 270\n        break\n      case 'leftbottom-to-righttop':\n        rotation = 315\n        break\n      case 'left-to-right':\n      default:\n        rotation = 0\n        break\n    }\n\n    return (rotation / 360) * Math.PI * 2\n  }\n}\n"]}

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

@@ -6,7 +6,7 @@ import './ox-input-color.js';
 import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
-import deepEquals from 'lodash-es/isEqual';
+import deepEquals from 'lodash-es/isEqual.js';
 /**
 범위내에서 여러 컬러셋(포지션과 색깔) 배열을 편집하는 컴포넌트이다.
 

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.js'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputColor } from './ox-input-color.js'\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"]}
+{"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.js'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputColor } from './ox-input-color.js'\nimport deepEquals from 'lodash-es/isEqual.js'\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-search.js

@@ -3,7 +3,7 @@
  */
 import { __decorate } from "tslib";
 import '@material/web/icon/icon.js';
-// import debounce from 'lodash-es/debounce'
+// import debounce from 'lodash-es/debounce.js'
 import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-search.js","sourceRoot":"","sources":["../../src/ox-input-search.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\n// import debounce from 'lodash-es/debounce'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-search')\nexport class OxInputSearch extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        position: relative;\n        align-items: center;\n\n        color: var(--ox-input-search-color, var(--md-sys-color-on-surface-variant));\n        background-color: var(--ox-input-search-background-color, var(--md-sys-color-surface-variant));\n\n        --md-icon-size: 20px;\n      }\n\n      [type='text'] {\n        flex: 1;\n        color: inherit;\n        background-color: transparent;\n        border: 0;\n        padding: var(--input-search-padding, var(--spacing-tiny));\n        padding-left: 25px;\n        overflow: hidden;\n      }\n\n      [type='text']:focus {\n        outline: none;\n      }\n\n      md-icon {\n        position: absolute;\n      }\n\n      input {\n        width: 100%;\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n\n  @query('input') input!: HTMLInputElement\n\n  // private dispatchChangeEventDebouncer = debounce((value: string) => this.dispatchChangeEvent(value), 100)\n\n  render() {\n    return html`\n      <md-icon @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</md-icon>\n      <input\n        type=\"text\"\n        .value=${this.value || ''}\n        .placeholder=${this.placeholder || ''}\n        @change=${(e: Event) => {\n          e.stopPropagation()\n          this.dispatchChangeEvent((e.target as HTMLInputElement).value)\n          // this.dispatchChangeEventDebouncer((e.target as HTMLInputElement).value)\n        }}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            if ((e.target as HTMLInputElement).value == this.value) {\n              /* Even if the value has not changed, the enter key triggers a change event. */\n              e.preventDefault() /* Prevent change event from occurring twice. */\n\n              this.input.dispatchEvent(\n                new CustomEvent('change', {\n                  detail: (e.target as HTMLInputElement).value\n                })\n              )\n            }\n          }\n        }}\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n\n  firstUpdated() {\n    if (this.autofocus) {\n      this.input.focus()\n    }\n  }\n\n  dispatchChangeEvent(value: string) {\n    this.value = value\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: value\n      })\n    )\n\n    if (this.selectAfterChange) {\n      requestAnimationFrame(() => {\n        this.input.select()\n      })\n    }\n  }\n\n  _onClickSearch(e: Event) {\n    if (this._form) {\n      e.stopPropagation()\n      this._form.requestSubmit()\n    } else {\n      this.input.dispatchEvent(\n        new CustomEvent('change', {\n          detail: this.input.value\n        })\n      )\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-input-search.js","sourceRoot":"","sources":["../../src/ox-input-search.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\n// import debounce from 'lodash-es/debounce.js'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-search')\nexport class OxInputSearch extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        position: relative;\n        align-items: center;\n\n        color: var(--ox-input-search-color, var(--md-sys-color-on-surface-variant));\n        background-color: var(--ox-input-search-background-color, var(--md-sys-color-surface-variant));\n\n        --md-icon-size: 20px;\n      }\n\n      [type='text'] {\n        flex: 1;\n        color: inherit;\n        background-color: transparent;\n        border: 0;\n        padding: var(--input-search-padding, var(--spacing-tiny));\n        padding-left: 25px;\n        overflow: hidden;\n      }\n\n      [type='text']:focus {\n        outline: none;\n      }\n\n      md-icon {\n        position: absolute;\n      }\n\n      input {\n        width: 100%;\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n\n  @query('input') input!: HTMLInputElement\n\n  // private dispatchChangeEventDebouncer = debounce((value: string) => this.dispatchChangeEvent(value), 100)\n\n  render() {\n    return html`\n      <md-icon @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</md-icon>\n      <input\n        type=\"text\"\n        .value=${this.value || ''}\n        .placeholder=${this.placeholder || ''}\n        @change=${(e: Event) => {\n          e.stopPropagation()\n          this.dispatchChangeEvent((e.target as HTMLInputElement).value)\n          // this.dispatchChangeEventDebouncer((e.target as HTMLInputElement).value)\n        }}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            if ((e.target as HTMLInputElement).value == this.value) {\n              /* Even if the value has not changed, the enter key triggers a change event. */\n              e.preventDefault() /* Prevent change event from occurring twice. */\n\n              this.input.dispatchEvent(\n                new CustomEvent('change', {\n                  detail: (e.target as HTMLInputElement).value\n                })\n              )\n            }\n          }\n        }}\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n\n  firstUpdated() {\n    if (this.autofocus) {\n      this.input.focus()\n    }\n  }\n\n  dispatchChangeEvent(value: string) {\n    this.value = value\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: value\n      })\n    )\n\n    if (this.selectAfterChange) {\n      requestAnimationFrame(() => {\n        this.input.select()\n      })\n    }\n  }\n\n  _onClickSearch(e: Event) {\n    if (this._form) {\n      e.stopPropagation()\n      this._form.requestSubmit()\n    } else {\n      this.input.dispatchEvent(\n        new CustomEvent('change', {\n          detail: this.input.value\n        })\n      )\n    }\n  }\n}\n"]}

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

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import '@material/web/icon/icon.js';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
-import '@polymer/paper-item/paper-item';
+import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
+import '@polymer/paper-item/paper-item.js';
 import '@operato/i18n/ox-i18n.js';
 import './ox-input-color.js';

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

@@ -3,8 +3,8 @@
  */
 import { __decorate } from "tslib";
 import '@material/web/icon/icon.js';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
-import '@polymer/paper-item/paper-item';
+import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
+import '@polymer/paper-item/paper-item.js';
 import '@operato/i18n/ox-i18n.js';
 import './ox-input-color.js';
 import { css, html } from 'lit';

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-table.js","sourceRoot":"","sources":["../../src/ox-input-table.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu'\nimport '@polymer/paper-item/paper-item'\nimport '@operato/i18n/ox-i18n.js'\nimport './ox-input-color.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\ntype BorderStyle =\n  | 'solid'\n  | 'round-dot'\n  | 'square-dot'\n  | 'dash'\n  | 'dash-dot'\n  | 'long-dash'\n  | 'long-dash-dot'\n  | 'long-dash-dot-dot'\n\n/**\n * 테이블 셀의 좌,우,상,하 경계선의 스타일을 편집하는 컴포넌트이다.\n * Example:\n * <ox-input-table value=${border}>\n * </ox-input-table>\n */\n\n@customElement('ox-input-table')\nclass OxInputTable extends OxFormField {\n  static get styles() {\n    return [\n      css`\n        :host {\n          display: block;\n        }\n\n        fieldset {\n          border: none;\n          border-bottom: 1px solid #cfd8dc;\n          color: var(--md-sys-color-on-primary-container);\n          font-size: 12px;\n          padding: 0 0 10px 0;\n          margin: 0 0 10px 0;\n        }\n\n        fieldset legend {\n          padding: 5px 0 0 5px;\n          font-size: 11px;\n          color: #e46c2e;\n          font-weight: bold;\n          text-transform: capitalize;\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        .property-grid {\n          display: grid;\n          grid-template-columns: repeat(10, 1fr);\n          grid-gap: 5px;\n          grid-auto-rows: minmax(24px, auto);\n          margin: 10px 0 0 0;\n        }\n\n        .property-grid > * {\n          line-height: 1.5;\n        }\n\n        #border-set > md-icon {\n          grid-column: span 2;\n          margin: 0 0 0 8px;\n          width: 32px;\n          height: 32px;\n        }\n\n        .property-grid > label {\n          grid-column: span 3;\n          text-align: right;\n          text-transform: capitalize;\n        }\n\n        .property-grid > label.icon-only-label {\n          grid-column: span 1;\n        }\n\n        .property-grid > ox-input-color,\n        .property-grid > input[type='number'] {\n          grid-column: span 4;\n          padding: 0;\n          margin: 0;\n        }\n\n        .property-grid > paper-dropdown-menu {\n          grid-column: span 7;\n          padding: 0;\n          margin: 0;\n        }\n\n        [table-event] {\n          position: relative;\n          background: url('/assets/images/icon-properties-table.png') no-repeat;\n          grid-column: span 2;\n          min-height: 65px;\n        }\n\n        [table-event] span {\n          position: absolute;\n          bottom: 0;\n          font-size: 0.9em;\n          line-height: 1.2;\n          text-transform: capitalize;\n          text-align: center;\n          vertical-align: bottom;\n        }\n\n        #merge-cells {\n          background-position: 50% 3px;\n        }\n\n        #split-cells {\n          background-position: 50% -97px;\n        }\n\n        #delete-row {\n          background-position: 50% -197px;\n        }\n\n        #delete-column {\n          background-position: 50% -297px;\n        }\n\n        #insert-above {\n          background-position: 50% -397px;\n        }\n\n        #insert-below {\n          background-position: 50% -497px;\n        }\n\n        #insert-left {\n          background-position: 50% -597px;\n        }\n\n        #insert-right {\n          background-position: 50% -697px;\n        }\n\n        #distribute-horizontal {\n          background-position: 50% -797px;\n        }\n\n        #distribute-vertical {\n          background-position: 50% -897px;\n        }\n\n        .line-type paper-item {\n          background: no-repeat url(/assets/images/icon-properties-line-type.png);\n          width: 80px;\n          min-height: 25px;\n        }\n        .line-type paper-item.solid {\n          background-position: 50% 12px;\n        }\n        .line-type paper-item.round-dot {\n          background-position: 50% -38px;\n        }\n        .line-type paper-item.square-dot {\n          background-position: 50% -88px;\n        }\n        .line-type paper-item.dash {\n          background-position: 50% -138px;\n        }\n        .line-type paper-item.dash-dot {\n          background-position: 50% -188px;\n        }\n        .line-type paper-item.long-dash {\n          background-position: 50% -238px;\n        }\n        .line-type paper-item.long-dash-dot {\n          background-position: 50% -288px;\n        }\n        .line-type paper-item.long-dash-dot-dot {\n          background-position: 50% -338px;\n        }\n      `\n    ]\n  }\n\n  @property({ type: Number }) borderWidth: number = 1\n  @property({ type: String }) borderColor: string = 'black'\n  @property({ type: String }) borderStyle: BorderStyle = 'solid'\n  @property({ type: Object }) value: any\n\n  @query('#border-fieldset') borderFieldSet!: HTMLElement\n\n  firstUpdated() {\n    this.borderFieldSet.addEventListener('change', this._onClickType.bind(this))\n  }\n\n  render() {\n    return html`\n      <fieldset id=\"border-fieldset\">\n        <legend><ox-i18n msgid=\"label.border-style\">border style</ox-i18n></legend>\n\n        <div\n          id=\"border-set\"\n          class=\"property-grid\n          border-style-btn\"\n          @click=${(e: Event) => this._onClickType(e)}\n        >\n          <md-icon data-value=\"out\">border_outer</md-icon>\n          <md-icon data-value=\"in\">border_inner</md-icon>\n          <md-icon data-value=\"all\">border_all</md-icon>\n          <md-icon data-value=\"left\">border_left</md-icon>\n          <md-icon data-value=\"center\">border_vertical</md-icon>\n          <md-icon data-value=\"right\">border_right</md-icon>\n          <md-icon data-value=\"top\">border_top</md-icon>\n          <md-icon data-value=\"middle\">border_horizontal</md-icon>\n          <md-icon data-value=\"bottom\">border_bottom</md-icon>\n          <md-icon data-value=\"clear\">border_clear</md-icon>\n        </div>\n\n        <div class=\"property-grid\">\n          <label class=\"icon-only-label linewidth\"> </label>\n          <input\n            type=\"number\"\n            id=\"border-width\"\n            @change=${(e: Event) => (this.borderWidth = Number((e.target as HTMLInputElement).value))}\n            .value=${this.borderWidth}\n          />\n\n          <label class=\"icon-only-label color\"> </label>\n          <ox-input-color\n            id=\"border-color\"\n            @change=${(e: Event) => (this.borderColor = (e.target as any).value)}\n            .value=${this.borderColor}\n          >\n          </ox-input-color>\n\n          <label> <ox-i18n msgid=\"label.border-type\">border type</ox-i18n> </label>\n          <paper-dropdown-menu no-label-float=\"true\" class=\"line-type solid\">\n            <!-- solid는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n            <paper-listbox\n              id=\"border-style\"\n              @iron-select=${(e: Event) => (this.borderStyle = (e.target as any).selected)}\n              slot=\"dropdown-content\"\n              .selected=${this.borderStyle}\n              attr-for-selected=\"name\"\n            >\n              <paper-item class=\"solid\" name=\"solid\"></paper-item>\n              <paper-item class=\"round-dot\" name=\"round-dot\"></paper-item>\n              <paper-item class=\"square-dot\" name=\"square-dot\"></paper-item>\n              <paper-item class=\"dash\" name=\"dash\"></paper-item>\n              <paper-item class=\"dash-dot\" name=\"dash-dot\"></paper-item>\n              <paper-item class=\"long-dash\" name=\"long-dash\"></paper-item>\n              <paper-item class=\"long-dash-dot\" name=\"long-dash-dot\"></paper-item>\n              <paper-item class=\"long-dash-dot-dot\" name=\"long-dash-dot-dot\"></paper-item>\n            </paper-listbox>\n          </paper-dropdown-menu>\n        </div>\n      </fieldset>\n\n      <fieldset id=\"cell-fieldset\" @click=${(e: Event) => this._onClickCell(e)}>\n        <div class=\"property-grid\">\n          <div id=\"merge-cells\" table-event><span>merge cells</span></div>\n          <div id=\"split-cells\" table-event><span>split cells</span></div>\n          <div id=\"delete-row\" table-event><span>delete row</span></div>\n          <div id=\"delete-column\" table-event><span>delete column</span></div>\n          <div id=\"insert-above\" table-event><span>insert above</span></div>\n          <div id=\"insert-below\" table-event><span>insert below</span></div>\n          <div id=\"insert-left\" table-event><span>insert left</span></div>\n          <div id=\"insert-right\" table-event><span>insert right</span></div>\n          <div id=\"distribute-horizontal\" table-event><span>distribute horizontal</span></div>\n          <div id=\"distribute-vertical\" table-event><span>distribute vertical</span></div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  _onClickCell(e: Event) {\n    var target = e.target as HTMLElement\n\n    const event = target?.closest('[table-event]')?.getAttribute('id')\n    if (!event) {\n      return\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('i-need-selected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          callback: (selected: any[]) => {\n            const table = selected[0].parent\n\n            switch (event) {\n              case 'delete-row':\n                table.deleteRows(selected)\n                break\n              case 'delete-column':\n                table.deleteColumns(selected)\n                break\n              case 'insert-above':\n                table.insertCellsAbove(selected)\n                break\n              case 'insert-below':\n                table.insertCellsBelow(selected)\n                break\n              case 'insert-left':\n                table.insertCellsLeft(selected)\n                break\n              case 'insert-right':\n                table.insertCellsRight(selected)\n                break\n              case 'merge-cells':\n                table.mergeCells(selected)\n                break\n              case 'split-cells':\n                table.splitCells(selected)\n                break\n              case 'distribute-horizontal':\n                table.distributeHorizontal(selected)\n                break\n              case 'distribute-vertical':\n                table.distributeVertical(selected)\n                break\n            }\n          }\n        }\n      })\n    )\n\n    this.value = {\n      borderWidth: this.borderWidth,\n      borderColor: this.borderColor,\n      borderStyle: this.borderStyle\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    e.stopPropagation()\n  }\n\n  _onClickType(e: Event) {\n    var target = e.target as HTMLElement\n\n    const where = target?.closest('[data-value]')?.getAttribute('data-value')\n    if (!where) {\n      return\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('i-need-selected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          callback: (selected: any[]) => {\n            const table = selected[0].parent\n\n            table.setCellsStyle(\n              selected,\n              {\n                strokeStyle: this.borderColor,\n                lineDash: this.borderStyle,\n                lineWidth: this.borderWidth\n              },\n              where\n            )\n          }\n        }\n      })\n    )\n\n    this.value = {\n      borderWidth: this.borderWidth,\n      borderColor: this.borderColor,\n      borderStyle: this.borderStyle\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    e.stopPropagation()\n  }\n}\n"]}
+{"version":3,"file":"ox-input-table.js","sourceRoot":"","sources":["../../src/ox-input-table.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu.js'\nimport '@polymer/paper-item/paper-item.js'\nimport '@operato/i18n/ox-i18n.js'\nimport './ox-input-color.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\ntype BorderStyle =\n  | 'solid'\n  | 'round-dot'\n  | 'square-dot'\n  | 'dash'\n  | 'dash-dot'\n  | 'long-dash'\n  | 'long-dash-dot'\n  | 'long-dash-dot-dot'\n\n/**\n * 테이블 셀의 좌,우,상,하 경계선의 스타일을 편집하는 컴포넌트이다.\n * Example:\n * <ox-input-table value=${border}>\n * </ox-input-table>\n */\n\n@customElement('ox-input-table')\nclass OxInputTable extends OxFormField {\n  static get styles() {\n    return [\n      css`\n        :host {\n          display: block;\n        }\n\n        fieldset {\n          border: none;\n          border-bottom: 1px solid #cfd8dc;\n          color: var(--md-sys-color-on-primary-container);\n          font-size: 12px;\n          padding: 0 0 10px 0;\n          margin: 0 0 10px 0;\n        }\n\n        fieldset legend {\n          padding: 5px 0 0 5px;\n          font-size: 11px;\n          color: #e46c2e;\n          font-weight: bold;\n          text-transform: capitalize;\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        .property-grid {\n          display: grid;\n          grid-template-columns: repeat(10, 1fr);\n          grid-gap: 5px;\n          grid-auto-rows: minmax(24px, auto);\n          margin: 10px 0 0 0;\n        }\n\n        .property-grid > * {\n          line-height: 1.5;\n        }\n\n        #border-set > md-icon {\n          grid-column: span 2;\n          margin: 0 0 0 8px;\n          width: 32px;\n          height: 32px;\n        }\n\n        .property-grid > label {\n          grid-column: span 3;\n          text-align: right;\n          text-transform: capitalize;\n        }\n\n        .property-grid > label.icon-only-label {\n          grid-column: span 1;\n        }\n\n        .property-grid > ox-input-color,\n        .property-grid > input[type='number'] {\n          grid-column: span 4;\n          padding: 0;\n          margin: 0;\n        }\n\n        .property-grid > paper-dropdown-menu {\n          grid-column: span 7;\n          padding: 0;\n          margin: 0;\n        }\n\n        [table-event] {\n          position: relative;\n          background: url('/assets/images/icon-properties-table.png') no-repeat;\n          grid-column: span 2;\n          min-height: 65px;\n        }\n\n        [table-event] span {\n          position: absolute;\n          bottom: 0;\n          font-size: 0.9em;\n          line-height: 1.2;\n          text-transform: capitalize;\n          text-align: center;\n          vertical-align: bottom;\n        }\n\n        #merge-cells {\n          background-position: 50% 3px;\n        }\n\n        #split-cells {\n          background-position: 50% -97px;\n        }\n\n        #delete-row {\n          background-position: 50% -197px;\n        }\n\n        #delete-column {\n          background-position: 50% -297px;\n        }\n\n        #insert-above {\n          background-position: 50% -397px;\n        }\n\n        #insert-below {\n          background-position: 50% -497px;\n        }\n\n        #insert-left {\n          background-position: 50% -597px;\n        }\n\n        #insert-right {\n          background-position: 50% -697px;\n        }\n\n        #distribute-horizontal {\n          background-position: 50% -797px;\n        }\n\n        #distribute-vertical {\n          background-position: 50% -897px;\n        }\n\n        .line-type paper-item {\n          background: no-repeat url(/assets/images/icon-properties-line-type.png);\n          width: 80px;\n          min-height: 25px;\n        }\n        .line-type paper-item.solid {\n          background-position: 50% 12px;\n        }\n        .line-type paper-item.round-dot {\n          background-position: 50% -38px;\n        }\n        .line-type paper-item.square-dot {\n          background-position: 50% -88px;\n        }\n        .line-type paper-item.dash {\n          background-position: 50% -138px;\n        }\n        .line-type paper-item.dash-dot {\n          background-position: 50% -188px;\n        }\n        .line-type paper-item.long-dash {\n          background-position: 50% -238px;\n        }\n        .line-type paper-item.long-dash-dot {\n          background-position: 50% -288px;\n        }\n        .line-type paper-item.long-dash-dot-dot {\n          background-position: 50% -338px;\n        }\n      `\n    ]\n  }\n\n  @property({ type: Number }) borderWidth: number = 1\n  @property({ type: String }) borderColor: string = 'black'\n  @property({ type: String }) borderStyle: BorderStyle = 'solid'\n  @property({ type: Object }) value: any\n\n  @query('#border-fieldset') borderFieldSet!: HTMLElement\n\n  firstUpdated() {\n    this.borderFieldSet.addEventListener('change', this._onClickType.bind(this))\n  }\n\n  render() {\n    return html`\n      <fieldset id=\"border-fieldset\">\n        <legend><ox-i18n msgid=\"label.border-style\">border style</ox-i18n></legend>\n\n        <div\n          id=\"border-set\"\n          class=\"property-grid\n          border-style-btn\"\n          @click=${(e: Event) => this._onClickType(e)}\n        >\n          <md-icon data-value=\"out\">border_outer</md-icon>\n          <md-icon data-value=\"in\">border_inner</md-icon>\n          <md-icon data-value=\"all\">border_all</md-icon>\n          <md-icon data-value=\"left\">border_left</md-icon>\n          <md-icon data-value=\"center\">border_vertical</md-icon>\n          <md-icon data-value=\"right\">border_right</md-icon>\n          <md-icon data-value=\"top\">border_top</md-icon>\n          <md-icon data-value=\"middle\">border_horizontal</md-icon>\n          <md-icon data-value=\"bottom\">border_bottom</md-icon>\n          <md-icon data-value=\"clear\">border_clear</md-icon>\n        </div>\n\n        <div class=\"property-grid\">\n          <label class=\"icon-only-label linewidth\"> </label>\n          <input\n            type=\"number\"\n            id=\"border-width\"\n            @change=${(e: Event) => (this.borderWidth = Number((e.target as HTMLInputElement).value))}\n            .value=${this.borderWidth}\n          />\n\n          <label class=\"icon-only-label color\"> </label>\n          <ox-input-color\n            id=\"border-color\"\n            @change=${(e: Event) => (this.borderColor = (e.target as any).value)}\n            .value=${this.borderColor}\n          >\n          </ox-input-color>\n\n          <label> <ox-i18n msgid=\"label.border-type\">border type</ox-i18n> </label>\n          <paper-dropdown-menu no-label-float=\"true\" class=\"line-type solid\">\n            <!-- solid는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n            <paper-listbox\n              id=\"border-style\"\n              @iron-select=${(e: Event) => (this.borderStyle = (e.target as any).selected)}\n              slot=\"dropdown-content\"\n              .selected=${this.borderStyle}\n              attr-for-selected=\"name\"\n            >\n              <paper-item class=\"solid\" name=\"solid\"></paper-item>\n              <paper-item class=\"round-dot\" name=\"round-dot\"></paper-item>\n              <paper-item class=\"square-dot\" name=\"square-dot\"></paper-item>\n              <paper-item class=\"dash\" name=\"dash\"></paper-item>\n              <paper-item class=\"dash-dot\" name=\"dash-dot\"></paper-item>\n              <paper-item class=\"long-dash\" name=\"long-dash\"></paper-item>\n              <paper-item class=\"long-dash-dot\" name=\"long-dash-dot\"></paper-item>\n              <paper-item class=\"long-dash-dot-dot\" name=\"long-dash-dot-dot\"></paper-item>\n            </paper-listbox>\n          </paper-dropdown-menu>\n        </div>\n      </fieldset>\n\n      <fieldset id=\"cell-fieldset\" @click=${(e: Event) => this._onClickCell(e)}>\n        <div class=\"property-grid\">\n          <div id=\"merge-cells\" table-event><span>merge cells</span></div>\n          <div id=\"split-cells\" table-event><span>split cells</span></div>\n          <div id=\"delete-row\" table-event><span>delete row</span></div>\n          <div id=\"delete-column\" table-event><span>delete column</span></div>\n          <div id=\"insert-above\" table-event><span>insert above</span></div>\n          <div id=\"insert-below\" table-event><span>insert below</span></div>\n          <div id=\"insert-left\" table-event><span>insert left</span></div>\n          <div id=\"insert-right\" table-event><span>insert right</span></div>\n          <div id=\"distribute-horizontal\" table-event><span>distribute horizontal</span></div>\n          <div id=\"distribute-vertical\" table-event><span>distribute vertical</span></div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  _onClickCell(e: Event) {\n    var target = e.target as HTMLElement\n\n    const event = target?.closest('[table-event]')?.getAttribute('id')\n    if (!event) {\n      return\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('i-need-selected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          callback: (selected: any[]) => {\n            const table = selected[0].parent\n\n            switch (event) {\n              case 'delete-row':\n                table.deleteRows(selected)\n                break\n              case 'delete-column':\n                table.deleteColumns(selected)\n                break\n              case 'insert-above':\n                table.insertCellsAbove(selected)\n                break\n              case 'insert-below':\n                table.insertCellsBelow(selected)\n                break\n              case 'insert-left':\n                table.insertCellsLeft(selected)\n                break\n              case 'insert-right':\n                table.insertCellsRight(selected)\n                break\n              case 'merge-cells':\n                table.mergeCells(selected)\n                break\n              case 'split-cells':\n                table.splitCells(selected)\n                break\n              case 'distribute-horizontal':\n                table.distributeHorizontal(selected)\n                break\n              case 'distribute-vertical':\n                table.distributeVertical(selected)\n                break\n            }\n          }\n        }\n      })\n    )\n\n    this.value = {\n      borderWidth: this.borderWidth,\n      borderColor: this.borderColor,\n      borderStyle: this.borderStyle\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    e.stopPropagation()\n  }\n\n  _onClickType(e: Event) {\n    var target = e.target as HTMLElement\n\n    const where = target?.closest('[data-value]')?.getAttribute('data-value')\n    if (!where) {\n      return\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('i-need-selected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          callback: (selected: any[]) => {\n            const table = selected[0].parent\n\n            table.setCellsStyle(\n              selected,\n              {\n                strokeStyle: this.borderColor,\n                lineDash: this.borderStyle,\n                lineWidth: this.borderWidth\n              },\n              where\n            )\n          }\n        }\n      })\n    )\n\n    this.value = {\n      borderWidth: this.borderWidth,\n      borderColor: this.borderColor,\n      borderStyle: this.borderStyle\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    e.stopPropagation()\n  }\n}\n"]}

package/dist/stories/ox-buttons-radio.stories.js

@@ -2,7 +2,7 @@ import '@material/web/all.js';
 import '../src/ox-buttons-radio.js';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 export default {
     title: 'ox-buttons-radio',
     component: 'ox-buttons-radio',

package/dist/stories/ox-buttons-radio.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-buttons-radio.stories.js","sourceRoot":"","sources":["../../stories/ox-buttons-radio.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBnE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;gBAqBf,CAAC,CAAc,EAAE,EAAE;IAC3B,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAClC,CAAC;cACO,SAAS,CAAC,KAAK,CAAC;kBACZ,QAAQ;;;;;;;;;CASzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,KAAK;CAChB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '../src/ox-buttons-radio.js'\n\nimport { TemplateResult, html } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-buttons-radio',\n  component: 'ox-buttons-radio',\n  argTypes: {\n    value: { control: 'boolean' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  value?: string\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value, disabled }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      padding: 20px;\n    }\n\n    ox-buttons-radio {\n      padding: 20px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-buttons-radio\n      @change=${(e: CustomEvent) => {\n        console.log('changed', e.detail)\n      }}\n      value=${ifDefined(value)}\n      ?disabled=${disabled}\n    >\n      <md-filled-button data-value=\"1\">Option 1</md-filled-button>\n      <md-filled-button data-value=\"2\">Option 2</md-filled-button>\n      <md-outlined-button data-value=\"3\">Option 3</md-outlined-button>\n      <md-text-button trailing-icon>Open<md-icon slot=\"icon\">upload</md-icon></md-text-button>\n      <md-elevated-button>Elevated</md-elevated-button>\n    </ox-buttons-radio>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  value: '',\n  disabled: false\n}\n"]}
+{"version":3,"file":"ox-buttons-radio.stories.js","sourceRoot":"","sources":["../../stories/ox-buttons-radio.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBnE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;gBAqBf,CAAC,CAAc,EAAE,EAAE;IAC3B,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAClC,CAAC;cACO,SAAS,CAAC,KAAK,CAAC;kBACZ,QAAQ;;;;;;;;;CASzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,KAAK;CAChB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '../src/ox-buttons-radio.js'\n\nimport { TemplateResult, html } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'ox-buttons-radio',\n  component: 'ox-buttons-radio',\n  argTypes: {\n    value: { control: 'boolean' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  value?: string\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value, disabled }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      padding: 20px;\n    }\n\n    ox-buttons-radio {\n      padding: 20px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-buttons-radio\n      @change=${(e: CustomEvent) => {\n        console.log('changed', e.detail)\n      }}\n      value=${ifDefined(value)}\n      ?disabled=${disabled}\n    >\n      <md-filled-button data-value=\"1\">Option 1</md-filled-button>\n      <md-filled-button data-value=\"2\">Option 2</md-filled-button>\n      <md-outlined-button data-value=\"3\">Option 3</md-outlined-button>\n      <md-text-button trailing-icon>Open<md-icon slot=\"icon\">upload</md-icon></md-text-button>\n      <md-elevated-button>Elevated</md-elevated-button>\n    </ox-buttons-radio>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  value: '',\n  disabled: false\n}\n"]}

package/dist/stories/ox-checkbox.stories.js

@@ -1,7 +1,7 @@
 import '@material/web/all.js';
 import '../src/ox-checkbox.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 export default {
     title: 'ox-checkbox',
     component: 'ox-checkbox',

package/dist/stories/ox-checkbox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-checkbox.stories.js","sourceRoot":"","sources":["../../stories/ox-checkbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7B,gBAAgB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACxC,aAAa,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACrC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAiBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,UAAU,EAClB,IAAI,GAAG,OAAO,EACd,KAAK,EACL,gBAAgB,GAAG,KAAK,EACxB,aAAa,GAAG,KAAK,EACrB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;eAgBhB,CAAC,CAAa,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC;aAC3C,IAAI;iBACA,KAAK;0BACI,gBAAgB;uBACnB,aAAa;kBAClB,QAAQ;;QAElB,KAAK;;;CAGZ,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,KAAK;CACb,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAChD,eAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,WAAW;IACjB,aAAa,EAAE,KAAK;IACpB,KAAK,EAAE,IAAI;CACZ,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrD,oBAAoB,CAAC,IAAI,GAAG;IAC1B,KAAK,EAAE,gBAAgB;IACvB,gBAAgB,EAAE,IAAI;IACtB,aAAa,EAAE,IAAI;CACpB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '../src/ox-checkbox.js'\n\nimport { TemplateResult, html } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-checkbox',\n  component: 'ox-checkbox',\n  argTypes: {\n    label: { control: 'text' },\n    name: { control: 'text' },\n    value: { control: 'boolean' },\n    indeterminatable: { control: 'boolean' },\n    indeterminate: { control: 'boolean' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  label?: string\n  name?: string\n  value?: boolean\n  indeterminatable?: boolean\n  indeterminate?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  label = 'Checkbox',\n  name = 'hello',\n  value,\n  indeterminatable = false,\n  indeterminate = false,\n  disabled\n}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n      padding: 20px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-checkbox\n      @click=${(e: MouseEvent) => console.log('clicked')}\n      name=${name}\n      .checked=${value}\n      ?indeterminatable=${indeterminatable}\n      ?indeterminate=${indeterminate}\n      ?disabled=${disabled}\n    >\n      ${label}\n    </ox-checkbox>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'label',\n  name: 'label',\n  value: false\n}\n\nexport const CustomActivated = Template.bind({})\nCustomActivated.args = {\n  label: 'Activated',\n  name: 'activated',\n  indeterminate: false,\n  value: true\n}\n\nexport const CustomIndeterminated = Template.bind({})\nCustomIndeterminated.args = {\n  label: 'Indeterminated',\n  indeterminatable: true,\n  indeterminate: true\n}\n"]}
+{"version":3,"file":"ox-checkbox.stories.js","sourceRoot":"","sources":["../../stories/ox-checkbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7B,gBAAgB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACxC,aAAa,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACrC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAiBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,UAAU,EAClB,IAAI,GAAG,OAAO,EACd,KAAK,EACL,gBAAgB,GAAG,KAAK,EACxB,aAAa,GAAG,KAAK,EACrB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;eAgBhB,CAAC,CAAa,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC;aAC3C,IAAI;iBACA,KAAK;0BACI,gBAAgB;uBACnB,aAAa;kBAClB,QAAQ;;QAElB,KAAK;;;CAGZ,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,KAAK;CACb,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAChD,eAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,WAAW;IACjB,aAAa,EAAE,KAAK;IACpB,KAAK,EAAE,IAAI;CACZ,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrD,oBAAoB,CAAC,IAAI,GAAG;IAC1B,KAAK,EAAE,gBAAgB;IACvB,gBAAgB,EAAE,IAAI;IACtB,aAAa,EAAE,IAAI;CACpB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '../src/ox-checkbox.js'\n\nimport { TemplateResult, html } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'ox-checkbox',\n  component: 'ox-checkbox',\n  argTypes: {\n    label: { control: 'text' },\n    name: { control: 'text' },\n    value: { control: 'boolean' },\n    indeterminatable: { control: 'boolean' },\n    indeterminate: { control: 'boolean' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  label?: string\n  name?: string\n  value?: boolean\n  indeterminatable?: boolean\n  indeterminate?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  label = 'Checkbox',\n  name = 'hello',\n  value,\n  indeterminatable = false,\n  indeterminate = false,\n  disabled\n}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n      padding: 20px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-checkbox\n      @click=${(e: MouseEvent) => console.log('clicked')}\n      name=${name}\n      .checked=${value}\n      ?indeterminatable=${indeterminatable}\n      ?indeterminate=${indeterminate}\n      ?disabled=${disabled}\n    >\n      ${label}\n    </ox-checkbox>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'label',\n  name: 'label',\n  value: false\n}\n\nexport const CustomActivated = Template.bind({})\nCustomActivated.args = {\n  label: 'Activated',\n  name: 'activated',\n  indeterminate: false,\n  value: true\n}\n\nexport const CustomIndeterminated = Template.bind({})\nCustomIndeterminated.args = {\n  label: 'Indeterminated',\n  indeterminatable: true,\n  indeterminate: true\n}\n"]}

package/dist/stories/ox-input-3axis.stories.js

@@ -1,7 +1,7 @@
 import '../src/ox-input-3axis.js';
 import '../src/locale/locale-picker.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 export default {
     title: 'ox-input-3axis',
     component: 'ox-input-3axis',

package/dist/stories/ox-input-3axis.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-3axis.stories.js","sourceRoot":"","sources":["../../stories/ox-input-3axis.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBxE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;gBAgBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;eACQ,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;CAClC,CAAA","sourcesContent":["import '../src/ox-input-3axis.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-input-3axis',\n  component: 'ox-input-3axis',\n  argTypes: {\n    value: { control: 'object' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  value?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value = {}, disabled }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-input-3axis\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n    </ox-input-3axis>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  value: { x: 100, y: 120, z: 130 }\n}\n"]}
+{"version":3,"file":"ox-input-3axis.stories.js","sourceRoot":"","sources":["../../stories/ox-input-3axis.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBxE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;gBAgBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;eACQ,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;CAClC,CAAA","sourcesContent":["import '../src/ox-input-3axis.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'ox-input-3axis',\n  component: 'ox-input-3axis',\n  argTypes: {\n    value: { control: 'object' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  value?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value = {}, disabled }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-input-3axis\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n    </ox-input-3axis>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  value: { x: 100, y: 120, z: 130 }\n}\n"]}

package/dist/stories/ox-input-3dish.stories.js

@@ -1,7 +1,7 @@
 import '../src/ox-input-3dish.js';
 import '../src/locale/locale-picker.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 export default {
     title: 'ox-input-3dish',
     component: 'ox-input-3dish',

package/dist/stories/ox-input-3dish.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-3dish.stories.js","sourceRoot":"","sources":["../../stories/ox-input-3dish.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBxF,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;gBAmBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,OAAO;IACb,KAAK,EAAE;QACL;YACE,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,CAAC,CAAC;YACZ,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;QACD;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;QACD;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-input-3dish.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-input-3dish',\n  component: 'ox-input-3dish',\n  argTypes: {\n    value: { control: 'object' },\n    name: { control: 'text' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <locale-picker></locale-picker>\n    <br /><br />\n\n    <ox-input-3dish\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n    </ox-input-3dish>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: '3dish',\n  value: [\n    {\n      name: 'DAY',\n      fromDate: -1,\n      fromTime: '22:00',\n      toDate: 0,\n      toTime: '06:00'\n    },\n    {\n      name: 'SWING',\n      fromDate: 0,\n      fromTime: '06:00',\n      toDate: 0,\n      toTime: '14:00'\n    },\n    {\n      name: 'NIGHT',\n      fromDate: 0,\n      fromTime: '14:00',\n      toDate: 0,\n      toTime: '22:00'\n    }\n  ]\n}\n"]}
+{"version":3,"file":"ox-input-3dish.stories.js","sourceRoot":"","sources":["../../stories/ox-input-3dish.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBxF,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;gBAmBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,OAAO;IACb,KAAK,EAAE;QACL;YACE,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,CAAC,CAAC;YACZ,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;QACD;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;QACD;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-input-3dish.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'ox-input-3dish',\n  component: 'ox-input-3dish',\n  argTypes: {\n    value: { control: 'object' },\n    name: { control: 'text' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <locale-picker></locale-picker>\n    <br /><br />\n\n    <ox-input-3dish\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n    </ox-input-3dish>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: '3dish',\n  value: [\n    {\n      name: 'DAY',\n      fromDate: -1,\n      fromTime: '22:00',\n      toDate: 0,\n      toTime: '06:00'\n    },\n    {\n      name: 'SWING',\n      fromDate: 0,\n      fromTime: '06:00',\n      toDate: 0,\n      toTime: '14:00'\n    },\n    {\n      name: 'NIGHT',\n      fromDate: 0,\n      fromTime: '14:00',\n      toDate: 0,\n      toTime: '22:00'\n    }\n  ]\n}\n"]}

package/dist/stories/ox-input-angle.stories.js

@@ -1,7 +1,7 @@
 import '../src/ox-input-angle.js';
 import '../src/locale/locale-picker.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 export default {
     title: 'ox-input-angle',
     component: 'ox-input-angle',

package/dist/stories/ox-input-angle.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-angle.stories.js","sourceRoot":"","sources":["../../stories/ox-input-angle.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBvF,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;gBAmBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,CAAC;CACT,CAAA","sourcesContent":["import '../src/ox-input-angle.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-input-angle',\n  component: 'ox-input-angle',\n  argTypes: {\n    value: { control: 'number' },\n    name: { control: 'text' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: number\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <locale-picker></locale-picker>\n    <br /><br />\n\n    <ox-input-angle\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n    </ox-input-angle>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'angle',\n  value: 0\n}\n"]}
+{"version":3,"file":"ox-input-angle.stories.js","sourceRoot":"","sources":["../../stories/ox-input-angle.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBvF,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;gBAmBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,CAAC;CACT,CAAA","sourcesContent":["import '../src/ox-input-angle.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'ox-input-angle',\n  component: 'ox-input-angle',\n  argTypes: {\n    value: { control: 'number' },\n    name: { control: 'text' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: number\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <locale-picker></locale-picker>\n    <br /><br />\n\n    <ox-input-angle\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n    </ox-input-angle>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'angle',\n  value: 0\n}\n"]}

package/dist/stories/ox-input-barcode.stories.js

@@ -1,6 +1,6 @@
 import '../src/ox-input-barcode.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 export default {
     title: 'ox-input-barcode',
     component: 'ox-input-barcode',