@operato/input 9.0.0-beta.10 → 9.0.0-beta.11

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-range.js","sourceRoot":"","sources":["../../src/ox-input-range.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IACpC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGlB,CAAA;IAE2B,KAAK,GAAW,CAAC,CAAA;IACjB,IAAI,GAAW,CAAC,CAAA;IAChB,GAAG,GAAW,CAAC,GAAG,CAAA;IAClB,GAAG,GAAW,GAAG,CAAA;IAE7C,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;iBACN,CAAC,CAAa,EAAE,EAAE;YACzB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;oBACW,IAAI,CAAC,QAAQ;;;;;iBAKhB,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;kBACL,CAAC,CAAQ,EAAE,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;oBACW,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;;AAnC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAkB;AAtGzC,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAuIjB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-range')\nclass OxInputRange extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      gap: var(--spacing-medium);\n      align-items: center;\n\n      width: 100%;\n      user-select: text;\n    }\n\n    input[type='number'] {\n      width: 48px;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: var(--spacing-tiny);\n      font: var(--input-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n    input[type='number']:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    input[type='range'] {\n      -webkit-appearance: none;\n      border: none;\n      outline: none;\n      width: 100%;\n      flex: 1;\n      height: 16px;\n      background-color: transparent;\n    }\n    input[type='range']::-webkit-slider-runnable-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: 5px;\n    }\n    input[type='range']::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--md-sys-color-on-primary-container);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n    input[type='range']:focus {\n      outline: none;\n    }\n\n    input[type='range']::-moz-range-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: 5px;\n    }\n    input[type='range']::-moz-range-thumb {\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--md-sys-color-on-primary-container);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n\n    input[type='range']:-moz-focusring {\n      outline: 1px solid black;\n      outline-offset: -1px;\n    }\n\n    input[type='range']::-ms-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: 5px;\n    }\n    input[type='range']::-ms-thumb {\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--md-sys-color-on-primary-container);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n\n    input:focus {\n      outline: none;\n      opacity: 1;\n    }\n  `\n\n  @property({ type: Number }) value: number = 0\n  @property({ type: Number }) step: number = 1\n  @property({ type: Number }) min: number = -100\n  @property({ type: Number }) max: number = 100\n\n  render() {\n    return html`\n      <input\n        type=\"range\"\n        .value=${this.value}\n        .step=${this.step}\n        .min=${this.min}\n        .max=${this.max}\n        @input=${(e: InputEvent) => {\n          e.stopPropagation()\n          this.value = Number((e.target as HTMLInputElement).value)\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n        }}\n        ?disabled=${this.disabled}\n      />\n\n      <input\n        type=\"number\"\n        .value=${this.value}\n        .step=${this.step}\n        .min=${this.min}\n        .max=${this.max}\n        @change=${(e: Event) => {\n          e.stopPropagation()\n          this.value = Number((e.target as HTMLInputElement).value)\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n        }}\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-input-range.js","sourceRoot":"","sources":["../../src/ox-input-range.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;QAmG8B,UAAK,GAAW,CAAC,CAAA;QACjB,SAAI,GAAW,CAAC,CAAA;QAChB,QAAG,GAAW,CAAC,GAAG,CAAA;QAClB,QAAG,GAAW,GAAG,CAAA;IAiC/C,CAAC;aAtIQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGlB,AAhGY,CAgGZ;IAOD,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;iBACN,CAAC,CAAa,EAAE,EAAE;YACzB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;oBACW,IAAI,CAAC,QAAQ;;;;;iBAKhB,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;kBACL,CAAC,CAAQ,EAAE,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;oBACW,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;;AAnC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAkB;AAtGzC,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAuIjB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-range')\nclass OxInputRange extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      gap: var(--spacing-medium);\n      align-items: center;\n\n      width: 100%;\n      user-select: text;\n    }\n\n    input[type='number'] {\n      width: 48px;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: var(--spacing-tiny);\n      font: var(--input-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n    input[type='number']:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    input[type='range'] {\n      -webkit-appearance: none;\n      border: none;\n      outline: none;\n      width: 100%;\n      flex: 1;\n      height: 16px;\n      background-color: transparent;\n    }\n    input[type='range']::-webkit-slider-runnable-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: 5px;\n    }\n    input[type='range']::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--md-sys-color-on-primary-container);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n    input[type='range']:focus {\n      outline: none;\n    }\n\n    input[type='range']::-moz-range-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: 5px;\n    }\n    input[type='range']::-moz-range-thumb {\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--md-sys-color-on-primary-container);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n\n    input[type='range']:-moz-focusring {\n      outline: 1px solid black;\n      outline-offset: -1px;\n    }\n\n    input[type='range']::-ms-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: 5px;\n    }\n    input[type='range']::-ms-thumb {\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--md-sys-color-on-primary-container);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n\n    input:focus {\n      outline: none;\n      opacity: 1;\n    }\n  `\n\n  @property({ type: Number }) value: number = 0\n  @property({ type: Number }) step: number = 1\n  @property({ type: Number }) min: number = -100\n  @property({ type: Number }) max: number = 100\n\n  render() {\n    return html`\n      <input\n        type=\"range\"\n        .value=${this.value}\n        .step=${this.step}\n        .min=${this.min}\n        .max=${this.max}\n        @input=${(e: InputEvent) => {\n          e.stopPropagation()\n          this.value = Number((e.target as HTMLInputElement).value)\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n        }}\n        ?disabled=${this.disabled}\n      />\n\n      <input\n        type=\"number\"\n        .value=${this.value}\n        .step=${this.step}\n        .min=${this.min}\n        .max=${this.max}\n        @change=${(e: Event) => {\n          e.stopPropagation()\n          this.value = Number((e.target as HTMLInputElement).value)\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n        }}\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n}\n"]}

package/dist/src/ox-input-scene-component-id.js

@@ -6,7 +6,11 @@ import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
 let OxInputId = class OxInputId extends OxFormField {
-    static styles = css `
+    constructor() {
+        super(...arguments);
+        this._ids = [];
+    }
+    static { this.styles = css `
     :host {
       position: relative;
       display: inline-flex;
@@ -20,9 +24,7 @@ let OxInputId = class OxInputId extends OxFormField {
       box-sizing: border-box;
       border: 1px solid rgba(0, 0, 0, 0.2);
     }
-  `;
-    property;
-    _ids = [];
+  `; }
     render() {
         const ids = this._ids || [];
         return html `

package/dist/src/ox-input-scene-component-id.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-scene-component-id.js","sourceRoot":"","sources":["../../src/ox-input-scene-component-id.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;GAclB,CAAA;IAE2B,QAAQ,CAAwC;IAEnE,IAAI,GAAkB,EAAE,CAAA;IAEjC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAE3B,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK,IAAI,EAAE;mBACd,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;kBAC3C,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;uBACrC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE;;oBAEzC,IAAI,CAAC,QAAQ;;;2BAGN,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,EAAE,aAAa,CAAC;KAC1E,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAEvC,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,6BAA6B,EAAE;YAC7C,MAAM,EAAE;gBACN,SAAS;gBACT,QAAQ,EAAE,CAAC,GAAa,EAAE,EAAE;oBAC1B,IAAI,CAAC,IAAI,GAAG,GAAG,CAAA;gBACjB,CAAC;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;QAEjD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AA5C2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAiD;AAEnE;IAAR,KAAK,EAAE;uCAAyB;AAnBtB,SAAS;IADrB,aAAa,CAAC,6BAA6B,CAAC;GAChC,SAAS,CA8DrB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-scene-component-id')\nexport class OxInputId extends OxFormField {\n  static styles = css`\n    :host {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: flex-end;\n    }\n\n    input {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n  `\n\n  @property({ type: Object }) property: { component?: any } | null | undefined\n\n  @state() _ids: Array<string> = []\n\n  render() {\n    const ids = this._ids || []\n\n    return html`\n      <input\n        id=\"text\"\n        type=\"text\"\n        .value=${this.value || ''}\n        @focusin=${(e: FocusEvent) => this._onInputFocused(e)}\n        @change=${(e: InputEvent) => this._onInputChanged(e)}\n        .placeholder=${this.getAttribute('placeholder') || ''}\n        list=\"ids\"\n        ?disabled=${this.disabled}\n      />\n\n      <datalist id=\"ids\">${ids.map(id => html` <option value=${id}></option> `)}</datalist>\n    `\n  }\n\n  _onInputFocused(e: FocusEvent) {\n    var { component } = this.property || {}\n\n    document.dispatchEvent(\n      new CustomEvent('get-all-scene-component-ids', {\n        detail: {\n          component,\n          callback: (ids: string[]) => {\n            this._ids = ids\n          }\n        }\n      })\n    )\n  }\n\n  _onInputChanged(e: InputEvent) {\n    e.stopPropagation()\n\n    this.value = (e.target as HTMLInputElement).value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-scene-component-id.js","sourceRoot":"","sources":["../../src/ox-input-scene-component-id.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAAnC;;QAmBI,SAAI,GAAkB,EAAE,CAAA;IA2CnC,CAAC;aA7DQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;GAclB,AAdY,CAcZ;IAMD,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAE3B,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK,IAAI,EAAE;mBACd,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;kBAC3C,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;uBACrC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE;;oBAEzC,IAAI,CAAC,QAAQ;;;2BAGN,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,EAAE,aAAa,CAAC;KAC1E,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAEvC,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,6BAA6B,EAAE;YAC7C,MAAM,EAAE;gBACN,SAAS;gBACT,QAAQ,EAAE,CAAC,GAAa,EAAE,EAAE;oBAC1B,IAAI,CAAC,IAAI,GAAG,GAAG,CAAA;gBACjB,CAAC;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;QAEjD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AA5C2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAiD;AAEnE;IAAR,KAAK,EAAE;uCAAyB;AAnBtB,SAAS;IADrB,aAAa,CAAC,6BAA6B,CAAC;GAChC,SAAS,CA8DrB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-scene-component-id')\nexport class OxInputId extends OxFormField {\n  static styles = css`\n    :host {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: flex-end;\n    }\n\n    input {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n  `\n\n  @property({ type: Object }) property: { component?: any } | null | undefined\n\n  @state() _ids: Array<string> = []\n\n  render() {\n    const ids = this._ids || []\n\n    return html`\n      <input\n        id=\"text\"\n        type=\"text\"\n        .value=${this.value || ''}\n        @focusin=${(e: FocusEvent) => this._onInputFocused(e)}\n        @change=${(e: InputEvent) => this._onInputChanged(e)}\n        .placeholder=${this.getAttribute('placeholder') || ''}\n        list=\"ids\"\n        ?disabled=${this.disabled}\n      />\n\n      <datalist id=\"ids\">${ids.map(id => html` <option value=${id}></option> `)}</datalist>\n    `\n  }\n\n  _onInputFocused(e: FocusEvent) {\n    var { component } = this.property || {}\n\n    document.dispatchEvent(\n      new CustomEvent('get-all-scene-component-ids', {\n        detail: {\n          component,\n          callback: (ids: string[]) => {\n            this._ids = ids\n          }\n        }\n      })\n    )\n  }\n\n  _onInputChanged(e: InputEvent) {\n    e.stopPropagation()\n\n    this.value = (e.target as HTMLInputElement).value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -8,7 +8,7 @@ import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
 let OxInputSearch = class OxInputSearch extends OxFormField {
-    static styles = [
+    static { this.styles = [
         css `
       :host {
         display: flex;
@@ -43,10 +43,7 @@ let OxInputSearch = class OxInputSearch extends OxFormField {
         width: 100%;
       }
     `
-    ];
-    placeholder;
-    selectAfterChange;
-    input;
+    ]; }
     // private dispatchChangeEventDebouncer = debounce((value: string) => this.dispatchChangeEvent(value), 100)
     render() {
         return html `

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.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"]}
+{"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-select-buttons.js

@@ -8,7 +8,13 @@ import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
 let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
-    static styles = css `
+    constructor() {
+        super(...arguments);
+        this.value = [];
+        this.options = [];
+        this.multiple = false;
+    }
+    static { this.styles = css `
     :host {
       display: flex;
       flex-flow: row;
@@ -17,10 +23,7 @@ let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
 
       text-transform: capitalize;
     }
-  `;
-    value = [];
-    options = [];
-    multiple = false;
+  `; }
     render() {
         const options = this.options.filter(option => !!option.value);
         const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : [];

package/dist/src/ox-input-select-buttons.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-select-buttons.js","sourceRoot":"","sources":["../../src/ox-input-select-buttons.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/chips/filter-chip.js'\nimport '@material/web/chips/chip-set.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { MdFilterChip } from '@material/web/chips/filter-chip.js'\n\ntype Option = { display: string; value: string }\n\n@customElement('ox-input-select-buttons')\nexport class OxInputSelectButtons extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-flow: row;\n      flex-wrap: wrap;\n      gap: var(--spacing-medium);\n\n      text-transform: capitalize;\n    }\n  `\n\n  @property({ type: Array }) value: string[] | string | undefined = []\n  @property({ type: Array }) options: Option[] = []\n  @property({ type: Boolean }) multiple: boolean = false\n\n  render() {\n    const options = this.options.filter(option => !!option.value)\n    const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n    return html`\n      <md-chip-set>\n        ${(options || []).map(\n          ({ display, value }) => html`\n            <md-filter-chip\n              data-value=${value}\n              label=${display}\n              ?selected=${values.includes(value)}\n              @tap=${(e: MouseEvent | TouchEvent) => !this.disabled && this.onTap(e)}\n            ></md-filter-chip>\n          `\n        )}\n      </md-chip-set>\n    `\n  }\n\n  onTap(e: MouseEvent | TouchEvent) {\n    e.stopPropagation()\n\n    const target = e.target as MdFilterChip\n    const value = target.getAttribute('data-value') as string\n\n    if (this.multiple) {\n      const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n      const idx = (this.value || []).indexOf(value)\n      if (idx != -1) {\n        values.splice(idx, 1)\n      } else {\n        values.push(value)\n      }\n      this.value = [...values]\n    } else {\n      this.value = this.value === value ? undefined : value\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-select-buttons.js","sourceRoot":"","sources":["../../src/ox-input-select-buttons.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/chips/filter-chip.js'\nimport '@material/web/chips/chip-set.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { MdFilterChip } from '@material/web/chips/filter-chip.js'\n\ntype Option = { display: string; value: string }\n\n@customElement('ox-input-select-buttons')\nexport class OxInputSelectButtons extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-flow: row;\n      flex-wrap: wrap;\n      gap: var(--spacing-medium);\n\n      text-transform: capitalize;\n    }\n  `\n\n  @property({ type: Array }) value: string[] | string | undefined = []\n  @property({ type: Array }) options: Option[] = []\n  @property({ type: Boolean }) multiple: boolean = false\n\n  render() {\n    const options = this.options.filter(option => !!option.value)\n    const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n    return html`\n      <md-chip-set>\n        ${(options || []).map(\n          ({ display, value }) => html`\n            <md-filter-chip\n              data-value=${value}\n              label=${display}\n              ?selected=${values.includes(value)}\n              @tap=${(e: MouseEvent | TouchEvent) => !this.disabled && this.onTap(e)}\n            ></md-filter-chip>\n          `\n        )}\n      </md-chip-set>\n    `\n  }\n\n  onTap(e: MouseEvent | TouchEvent) {\n    e.stopPropagation()\n\n    const target = e.target as MdFilterChip\n    const value = target.getAttribute('data-value') as string\n\n    if (this.multiple) {\n      const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n      const idx = (this.value || []).indexOf(value)\n      if (idx != -1) {\n        values.splice(idx, 1)\n      } else {\n        values.push(value)\n      }\n      this.value = [...values]\n    } else {\n      this.value = this.value === value ? undefined : value\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}

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

@@ -4,7 +4,12 @@ import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
 let OxInputSignature = class OxInputSignature extends OxFormField {
-    static styles = [
+    constructor() {
+        super(...arguments);
+        this.value = null;
+        this.isDrawing = false;
+    }
+    static { this.styles = [
         css `
       :host {
         display: flex;
@@ -55,13 +60,7 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
         transition: background-color 0.3s ease;
       }
     `
-    ];
-    value = null;
-    previewDiv;
-    dialog;
-    canvas;
-    ctx;
-    isDrawing = false;
+    ]; }
     render() {
         return html `
       <div class="signature-preview" @click=${this.openDialog}></div>

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

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

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

@@ -6,7 +6,14 @@ import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
 let OxInputStack = class OxInputStack extends OxFormField {
-    static styles = [
+    constructor() {
+        super(...arguments);
+        /**
+         * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.
+         */
+        this.stack = [];
+    }
+    static { this.styles = [
         css `
       :host {
         display: block;
@@ -37,11 +44,7 @@ let OxInputStack = class OxInputStack extends OxFormField {
         min-height: 20px;
       }
     `
-    ];
-    /**
-     * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.
-     */
-    stack = [];
+    ]; }
     /**
      * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-stack.js","sourceRoot":"","sources":["../../src/ox-input-stack.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-stack')\nexport class OxInputStack extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      #add-floor {\n        width: 100%;\n        height: 20px;\n        background-color: blue;\n        color: white;\n      }\n\n      div {\n        background-color: blue;\n        width: calc(100% - 40px);\n        width: -webkit-calc(100% - 40px);\n        min-height: 20px;\n      }\n\n      div[active] {\n        background-color: red;\n      }\n\n      div button {\n        position: absolute;\n        right: 10px;\n        width: 30px;\n        min-height: 20px;\n      }\n    `\n  ]\n\n  /**\n   * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.\n   */\n  @property({ type: Array }) stack: { name: string; active?: boolean }[] = []\n\n  /**\n   * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.\n   */\n  // @property({ type: Number }) activeIndex: number = 0\n\n  render() {\n    const stack = [...this.stack].reverse()\n    const length = stack.length\n\n    return html`\n      <button id=\"add-floor\" @click=${(e: Event) => this._onClickAddFloor(e)} ?disabled=${this.disabled}>+</button>\n\n      ${stack.map(\n        (item, index) => html`\n          <div\n            floor\n            ?active=${item.active}\n            @click=${(e: Event) => !this.disabled && this._onClickToActive(e)}\n            idx=${length - index - 1}\n          >\n            ${item.name}\n            <button @click=${(e: Event) => this._onClickRemoveFloor(e)} ?disabled=${this.disabled}>-</button>\n          </div>\n        `\n      )}\n    `\n  }\n\n  _notifyChange() {\n    this.value = this.stack\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  _onClickAddFloor(e: Event) {\n    this.stack.push({ name: String(this.stack.length + 1) })\n    this.requestUpdate()\n\n    this._notifyChange()\n  }\n\n  _onClickToActive(e: Event) {\n    const floor = (e.target as HTMLElement).closest('[floor]')\n\n    if (!floor) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const activeIndex = Number(floor.getAttribute('idx'))\n    this.stack = this.stack.map((floor, index) => {\n      return activeIndex === index\n        ? {\n            name: floor.name,\n            active: true\n          }\n        : { name: floor.name }\n    })\n\n    this._notifyChange()\n  }\n\n  _onClickRemoveFloor(e: Event) {\n    const floor = (e.target as HTMLElement).closest('[floor]')\n\n    if (!floor) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const idx = Number(floor.getAttribute('idx'))\n\n    this.stack.splice(idx, 1)\n\n    this.requestUpdate()\n\n    this._notifyChange()\n  }\n}\n"]}
+{"version":3,"file":"ox-input-stack.js","sourceRoot":"","sources":["../../src/ox-input-stack.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-stack')\nexport class OxInputStack extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      #add-floor {\n        width: 100%;\n        height: 20px;\n        background-color: blue;\n        color: white;\n      }\n\n      div {\n        background-color: blue;\n        width: calc(100% - 40px);\n        width: -webkit-calc(100% - 40px);\n        min-height: 20px;\n      }\n\n      div[active] {\n        background-color: red;\n      }\n\n      div button {\n        position: absolute;\n        right: 10px;\n        width: 30px;\n        min-height: 20px;\n      }\n    `\n  ]\n\n  /**\n   * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.\n   */\n  @property({ type: Array }) stack: { name: string; active?: boolean }[] = []\n\n  /**\n   * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.\n   */\n  // @property({ type: Number }) activeIndex: number = 0\n\n  render() {\n    const stack = [...this.stack].reverse()\n    const length = stack.length\n\n    return html`\n      <button id=\"add-floor\" @click=${(e: Event) => this._onClickAddFloor(e)} ?disabled=${this.disabled}>+</button>\n\n      ${stack.map(\n        (item, index) => html`\n          <div\n            floor\n            ?active=${item.active}\n            @click=${(e: Event) => !this.disabled && this._onClickToActive(e)}\n            idx=${length - index - 1}\n          >\n            ${item.name}\n            <button @click=${(e: Event) => this._onClickRemoveFloor(e)} ?disabled=${this.disabled}>-</button>\n          </div>\n        `\n      )}\n    `\n  }\n\n  _notifyChange() {\n    this.value = this.stack\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  _onClickAddFloor(e: Event) {\n    this.stack.push({ name: String(this.stack.length + 1) })\n    this.requestUpdate()\n\n    this._notifyChange()\n  }\n\n  _onClickToActive(e: Event) {\n    const floor = (e.target as HTMLElement).closest('[floor]')\n\n    if (!floor) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const activeIndex = Number(floor.getAttribute('idx'))\n    this.stack = this.stack.map((floor, index) => {\n      return activeIndex === index\n        ? {\n            name: floor.name,\n            active: true\n          }\n        : { name: floor.name }\n    })\n\n    this._notifyChange()\n  }\n\n  _onClickRemoveFloor(e: Event) {\n    const floor = (e.target as HTMLElement).closest('[floor]')\n\n    if (!floor) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const idx = Number(floor.getAttribute('idx'))\n\n    this.stack.splice(idx, 1)\n\n    this.requestUpdate()\n\n    this._notifyChange()\n  }\n}\n"]}

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

@@ -3,7 +3,13 @@ import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
 let OxInputSwitch = class OxInputSwitch extends OxFormField {
-    static styles = css `
+    constructor() {
+        super(...arguments);
+        this.round = false;
+        this.value = false;
+        this.disabled = false;
+    }
+    static { this.styles = css `
     :host {
       --ox-simple-switch-fullwidth: 2em;
       --ox-simple-switch-fullheight: 1em;
@@ -78,10 +84,7 @@ let OxInputSwitch = class OxInputSwitch extends OxFormField {
     span[round]:before {
       border-radius: calc((var(--ox-simple-switch-thumbnail-size) - 8px) / 2);
     }
-  `;
-    round = false;
-    value = false;
-    disabled = false;
+  `; }
     render() {
         return html `
       <label>

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-switch.js","sourceRoot":"","sources":["../../src/ox-input-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAC5C,MAAM,CAAC,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2ElB,CAAA;IAE4B,KAAK,GAAY,KAAK,CAAA;IACtB,KAAK,GAAY,KAAK,CAAA;IACtB,QAAQ,GAAY,KAAK,CAAA;IAEtD,MAAM;QACJ,OAAO,IAAI,CAAA;;0CAE2B,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,QAAQ;uBACxD,IAAI,CAAC,KAAK;;KAE5B,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE;YACtD,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,EAAE,OAAO,CAAA;YACpD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,IAAI,CAAC,KAAK;aACnB,CAAC,CACH,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IACxE,CAAC;;AA/B4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAuB;AACtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAuB;AACtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAA0B;AAhF3C,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CA8GzB","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-switch')\nexport class OxInputSwitch extends OxFormField {\n  static styles = css`\n    :host {\n      --ox-simple-switch-fullwidth: 2em;\n      --ox-simple-switch-fullheight: 1em;\n      --ox-simple-switch-thumbnail-size: 1em;\n    }\n\n    label {\n      position: relative;\n      display: inline-block;\n      width: 100%;\n      height: 100%;\n    }\n\n    label input {\n      opacity: 0;\n      width: 0;\n      height: 0;\n    }\n\n    span {\n      position: absolute;\n      cursor: pointer;\n      width: var(--ox-simple-switch-fullwidth);\n      height: var(--ox-simple-switch-fullheight);\n      top: calc(0 - var(--ox-simple-switch-thumbnail-size));\n      left: 0;\n      background-color: var(--ox-simple-switch-off-color, #ccc);\n      -webkit-transition: 0.4s;\n      transition: 0.4s;\n    }\n\n    span:before {\n      position: absolute;\n      content: '';\n      height: calc(var(--ox-simple-switch-thumbnail-size) - 8px);\n      width: calc(var(--ox-simple-switch-thumbnail-size) - 8px);\n      left: 4px;\n      top: 4px;\n      background-color: var(--ox-simple-switch-thumbnail-color, white);\n      -webkit-transition: 0.4s;\n      transition: 0.4s;\n    }\n\n    input:checked + span {\n      background-color: var(--ox-simple-switch-on-color, #2196f3);\n    }\n\n    input + span:before {\n      -webkit-transform: translateY(\n        calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2)\n      );\n      -ms-transform: translateY(\n        calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2)\n      );\n      transform: translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));\n    }\n\n    input:checked + span:before {\n      -webkit-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))\n        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));\n      -ms-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))\n        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));\n      transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))\n        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));\n    }\n\n    /* Rounded sliders */\n    span[round] {\n      border-radius: calc(var(--ox-simple-switch-thumbnail-size) / 2);\n    }\n\n    span[round]:before {\n      border-radius: calc((var(--ox-simple-switch-thumbnail-size) - 8px) / 2);\n    }\n  `\n\n  @property({ type: Boolean }) round: boolean = false\n  @property({ type: Boolean }) value: boolean = false\n  @property({ type: Boolean }) disabled: boolean = false\n\n  render() {\n    return html`\n      <label>\n        <input type=\"checkbox\" .checked=${this.value} ?disabled=${this.disabled} />\n        <span ?round=${this.round}></span>\n      </label>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', (e: Event) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      this.value = (e.target as HTMLInputElement)?.checked\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: this.value\n        })\n      )\n    })\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && formData.append(this.name, this.value ? 'true' : 'false')\n  }\n}\n"]}
+{"version":3,"file":"ox-input-switch.js","sourceRoot":"","sources":["../../src/ox-input-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAAvC;;QA8EwB,UAAK,GAAY,KAAK,CAAA;QACtB,UAAK,GAAY,KAAK,CAAA;QACtB,aAAQ,GAAY,KAAK,CAAA;IA8BxD,CAAC;aA7GQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2ElB,AA3EY,CA2EZ;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;0CAE2B,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,QAAQ;uBACxD,IAAI,CAAC,KAAK;;KAE5B,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE;YACtD,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,EAAE,OAAO,CAAA;YACpD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,IAAI,CAAC,KAAK;aACnB,CAAC,CACH,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IACxE,CAAC;;AA/B4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAuB;AACtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAuB;AACtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAA0B;AAhF3C,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CA8GzB","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-switch')\nexport class OxInputSwitch extends OxFormField {\n  static styles = css`\n    :host {\n      --ox-simple-switch-fullwidth: 2em;\n      --ox-simple-switch-fullheight: 1em;\n      --ox-simple-switch-thumbnail-size: 1em;\n    }\n\n    label {\n      position: relative;\n      display: inline-block;\n      width: 100%;\n      height: 100%;\n    }\n\n    label input {\n      opacity: 0;\n      width: 0;\n      height: 0;\n    }\n\n    span {\n      position: absolute;\n      cursor: pointer;\n      width: var(--ox-simple-switch-fullwidth);\n      height: var(--ox-simple-switch-fullheight);\n      top: calc(0 - var(--ox-simple-switch-thumbnail-size));\n      left: 0;\n      background-color: var(--ox-simple-switch-off-color, #ccc);\n      -webkit-transition: 0.4s;\n      transition: 0.4s;\n    }\n\n    span:before {\n      position: absolute;\n      content: '';\n      height: calc(var(--ox-simple-switch-thumbnail-size) - 8px);\n      width: calc(var(--ox-simple-switch-thumbnail-size) - 8px);\n      left: 4px;\n      top: 4px;\n      background-color: var(--ox-simple-switch-thumbnail-color, white);\n      -webkit-transition: 0.4s;\n      transition: 0.4s;\n    }\n\n    input:checked + span {\n      background-color: var(--ox-simple-switch-on-color, #2196f3);\n    }\n\n    input + span:before {\n      -webkit-transform: translateY(\n        calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2)\n      );\n      -ms-transform: translateY(\n        calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2)\n      );\n      transform: translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));\n    }\n\n    input:checked + span:before {\n      -webkit-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))\n        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));\n      -ms-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))\n        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));\n      transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))\n        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));\n    }\n\n    /* Rounded sliders */\n    span[round] {\n      border-radius: calc(var(--ox-simple-switch-thumbnail-size) / 2);\n    }\n\n    span[round]:before {\n      border-radius: calc((var(--ox-simple-switch-thumbnail-size) - 8px) / 2);\n    }\n  `\n\n  @property({ type: Boolean }) round: boolean = false\n  @property({ type: Boolean }) value: boolean = false\n  @property({ type: Boolean }) disabled: boolean = false\n\n  render() {\n    return html`\n      <label>\n        <input type=\"checkbox\" .checked=${this.value} ?disabled=${this.disabled} />\n        <span ?round=${this.round}></span>\n      </label>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', (e: Event) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      this.value = (e.target as HTMLInputElement)?.checked\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: this.value\n        })\n      )\n    })\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && formData.append(this.name, this.value ? 'true' : 'false')\n  }\n}\n"]}

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

@@ -4,7 +4,11 @@ import { customElement, property } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
 import '@material/web/icon/icon.js';
 let OxInputTableColumnConfig = class OxInputTableColumnConfig extends OxFormField {
-    static styles = [
+    constructor() {
+        super(...arguments);
+        this.value = [];
+    }
+    static { this.styles = [
         css `
       :host {
         display: block;
@@ -83,8 +87,7 @@ let OxInputTableColumnConfig = class OxInputTableColumnConfig extends OxFormFiel
         color: var(--ox-input-table-column-config-disabled-color, var(--md-sys-color-surface-variant, #ccc));
       }
     `
-    ];
-    value = [];
+    ]; }
     render() {
         console.log('this.value', this.value);
         return html `

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-table-column-config.js","sourceRoot":"","sources":["../../src/ox-input-table-column-config.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { OxFormField } from './ox-form-field.js'\nimport '@material/web/icon/icon.js'\n\nexport interface ColumnConfig {\n  name: string\n  label: string\n  visible: boolean\n  width: number\n  order: number\n}\n\n@customElement('ox-input-table-column-config')\nexport class OxInputTableColumnConfig extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        padding: 4px;\n        border: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));\n        background-color: var(--ox-input-table-column-config-background-color, var(--md-sys-color-surface));\n        color: var(--ox-input-table-column-config-color, var(--md-sys-color-on-surface));\n      }\n\n      table {\n        width: auto;\n        border-collapse: collapse;\n        font-size: 12px;\n        border: 0;\n      }\n\n      tr {\n        border-bottom: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));\n      }\n\n      th,\n      td {\n        padding: 0 var(--spacing-small, 2px);\n        text-align: left;\n      }\n\n      th {\n        text-transform: capitalize;\n        text-align: center;\n        background-color: var(\n          --ox-input-table-column-config-header-background-color,\n          var(--md-sys-color-secondary-container)\n        );\n        color: var(--ox-input-table-column-config-header-background-color, var(--md-sys-color-on-secondary-container));\n        white-space: nowrap;\n      }\n\n      th *,\n      td * {\n        vertical-align: middle;\n      }\n\n      td[width] {\n        width: 60px;\n        text-align: right;\n      }\n\n      input {\n        font-size: 12px;\n        padding: 0;\n        margin: 0;\n        border: none;\n        width: 100%;\n        box-sizing: border-box;\n        outline: none;\n        background-color: var(--ox-input-table-column-config-input-background-color, var(--md-sys-color-surface));\n        color: var(--ox-input-table-column-config-input-color, var(--md-sys-color-on-surface));\n      }\n\n      input[type='number'] {\n        text-align: right;\n      }\n\n      md-icon {\n        cursor: pointer;\n        padding: 0;\n        margin: 0;\n        border: none;\n        background: none;\n\n        --md-icon-size: 16px;\n      }\n\n      md-icon[disabled] {\n        cursor: not-allowed;\n        color: var(--ox-input-table-column-config-disabled-color, var(--md-sys-color-surface-variant, #ccc));\n      }\n    `\n  ]\n\n  @property({ type: Array }) value: ColumnConfig[] = []\n\n  render() {\n    console.log('this.value', this.value)\n    return html`\n      <table>\n        <thead>\n          <tr>\n            <th></th>\n            <th>name</th>\n            <th>label</th>\n            <th>width</th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          ${(this.value || []).map(\n            (col, index) => html`\n              <tr name=${col.name}>\n                <td>\n                  <input\n                    type=\"checkbox\"\n                    .checked=${col.visible}\n                    @change=${(e: Event) => this._updateVisibility(e, index)}\n                  />\n                </td>\n                <td name>${col.name}</td>\n                <td>\n                  <input type=\"text\" .value=${col.label} @input=${(e: Event) => this._updateLabel(e, index)} />\n                </td>\n                <td width>\n                  <input\n                    type=\"number\"\n                    .value=${String(col.width)}\n                    @input=${(e: Event) => this._updateWidth(e, index)}\n                  />\n                </td>\n                <td buttons>\n                  <md-icon class=\"icon-button\" @click=${() => this._moveUp(index)} ?disabled=${index === 0}>\n                    arrow_upward\n                  </md-icon>\n                  <md-icon\n                    class=\"icon-button\"\n                    @click=${() => this._moveDown(index)}\n                    ?disabled=${index === this.value.length - 1}\n                  >\n                    arrow_downward\n                  </md-icon>\n                </td>\n              </tr>\n            `\n          )}\n        </tbody>\n      </table>\n    `\n  }\n\n  private _updateVisibility(event: Event, index: number) {\n    const target = event.target as HTMLInputElement\n    this.value[index].visible = target.checked\n    this.requestUpdate()\n    this._notifyChange()\n  }\n\n  private _updateLabel(event: Event, index: number) {\n    const target = event.target as HTMLInputElement\n    this.value[index].label = target.value\n    this.requestUpdate()\n    this._notifyChange()\n  }\n\n  private _updateWidth(event: Event, index: number) {\n    const target = event.target as HTMLInputElement\n    this.value[index].width = target.valueAsNumber\n    this.requestUpdate()\n    this._notifyChange()\n  }\n\n  private _moveUp(index: number) {\n    if (index === 0) return\n    const temp = this.value[index]\n    this.value[index] = this.value[index - 1]\n    this.value[index - 1] = temp\n    this._updateOrder()\n    this.requestUpdate()\n    this._notifyChange()\n  }\n\n  private _moveDown(index: number) {\n    if (index === this.value.length - 1) return\n    const temp = this.value[index]\n    this.value[index] = this.value[index + 1]\n    this.value[index + 1] = temp\n    this._updateOrder()\n    this.requestUpdate()\n    this._notifyChange()\n  }\n\n  private _updateOrder() {\n    this.value = this.value.map((col, index) => ({\n      ...col,\n      order: index + 1\n    }))\n  }\n\n  private _notifyChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-table-column-config.js","sourceRoot":"","sources":["../../src/ox-input-table-column-config.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { OxFormField } from './ox-form-field.js'\nimport '@material/web/icon/icon.js'\n\nexport interface ColumnConfig {\n  name: string\n  label: string\n  visible: boolean\n  width: number\n  order: number\n}\n\n@customElement('ox-input-table-column-config')\nexport class OxInputTableColumnConfig extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        padding: 4px;\n        border: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));\n        background-color: var(--ox-input-table-column-config-background-color, var(--md-sys-color-surface));\n        color: var(--ox-input-table-column-config-color, var(--md-sys-color-on-surface));\n      }\n\n      table {\n        width: auto;\n        border-collapse: collapse;\n        font-size: 12px;\n        border: 0;\n      }\n\n      tr {\n        border-bottom: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));\n      }\n\n      th,\n      td {\n        padding: 0 var(--spacing-small, 2px);\n        text-align: left;\n      }\n\n      th {\n        text-transform: capitalize;\n        text-align: center;\n        background-color: var(\n          --ox-input-table-column-config-header-background-color,\n          var(--md-sys-color-secondary-container)\n        );\n        color: var(--ox-input-table-column-config-header-background-color, var(--md-sys-color-on-secondary-container));\n        white-space: nowrap;\n      }\n\n      th *,\n      td * {\n        vertical-align: middle;\n      }\n\n      td[width] {\n        width: 60px;\n        text-align: right;\n      }\n\n      input {\n        font-size: 12px;\n        padding: 0;\n        margin: 0;\n        border: none;\n        width: 100%;\n        box-sizing: border-box;\n        outline: none;\n        background-color: var(--ox-input-table-column-config-input-background-color, var(--md-sys-color-surface));\n        color: var(--ox-input-table-column-config-input-color, var(--md-sys-color-on-surface));\n      }\n\n      input[type='number'] {\n        text-align: right;\n      }\n\n      md-icon {\n        cursor: pointer;\n        padding: 0;\n        margin: 0;\n        border: none;\n        background: none;\n\n        --md-icon-size: 16px;\n      }\n\n      md-icon[disabled] {\n        cursor: not-allowed;\n        color: var(--ox-input-table-column-config-disabled-color, var(--md-sys-color-surface-variant, #ccc));\n      }\n    `\n  ]\n\n  @property({ type: Array }) value: ColumnConfig[] = []\n\n  render() {\n    console.log('this.value', this.value)\n    return html`\n      <table>\n        <thead>\n          <tr>\n            <th></th>\n            <th>name</th>\n            <th>label</th>\n            <th>width</th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          ${(this.value || []).map(\n            (col, index) => html`\n              <tr name=${col.name}>\n                <td>\n                  <input\n                    type=\"checkbox\"\n                    .checked=${col.visible}\n                    @change=${(e: Event) => this._updateVisibility(e, index)}\n                  />\n                </td>\n                <td name>${col.name}</td>\n                <td>\n                  <input type=\"text\" .value=${col.label} @input=${(e: Event) => this._updateLabel(e, index)} />\n                </td>\n                <td width>\n                  <input\n                    type=\"number\"\n                    .value=${String(col.width)}\n                    @input=${(e: Event) => this._updateWidth(e, index)}\n                  />\n                </td>\n                <td buttons>\n                  <md-icon class=\"icon-button\" @click=${() => this._moveUp(index)} ?disabled=${index === 0}>\n                    arrow_upward\n                  </md-icon>\n                  <md-icon\n                    class=\"icon-button\"\n                    @click=${() => this._moveDown(index)}\n                    ?disabled=${index === this.value.length - 1}\n                  >\n                    arrow_downward\n                  </md-icon>\n                </td>\n              </tr>\n            `\n          )}\n        </tbody>\n      </table>\n    `\n  }\n\n  private _updateVisibility(event: Event, index: number) {\n    const target = event.target as HTMLInputElement\n    this.value[index].visible = target.checked\n    this.requestUpdate()\n    this._notifyChange()\n  }\n\n  private _updateLabel(event: Event, index: number) {\n    const target = event.target as HTMLInputElement\n    this.value[index].label = target.value\n    this.requestUpdate()\n    this._notifyChange()\n  }\n\n  private _updateWidth(event: Event, index: number) {\n    const target = event.target as HTMLInputElement\n    this.value[index].width = target.valueAsNumber\n    this.requestUpdate()\n    this._notifyChange()\n  }\n\n  private _moveUp(index: number) {\n    if (index === 0) return\n    const temp = this.value[index]\n    this.value[index] = this.value[index - 1]\n    this.value[index - 1] = temp\n    this._updateOrder()\n    this.requestUpdate()\n    this._notifyChange()\n  }\n\n  private _moveDown(index: number) {\n    if (index === this.value.length - 1) return\n    const temp = this.value[index]\n    this.value[index] = this.value[index + 1]\n    this.value[index + 1] = temp\n    this._updateOrder()\n    this.requestUpdate()\n    this._notifyChange()\n  }\n\n  private _updateOrder() {\n    this.value = this.value.map((col, index) => ({\n      ...col,\n      order: index + 1\n    }))\n  }\n\n  private _notifyChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}

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

@@ -17,6 +17,13 @@ import { OxFormField } from './ox-form-field.js';
  * </ox-input-table>
  */
 let OxInputTable = class OxInputTable extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.borderWidth = 1;
+        this.borderColor = 'black';
+        this.borderStyle = 'solid';
+        this.value = null;
+    }
     static get styles() {
         return [
             css `
@@ -178,11 +185,6 @@ let OxInputTable = class OxInputTable extends OxFormField {
       `
         ];
     }
-    borderWidth = 1;
-    borderColor = 'black';
-    borderStyle = 'solid';
-    value = null;
-    borderFieldSet;
     firstUpdated() {
         this.borderFieldSet.addEventListener('change', this._onClickType.bind(this));
     }

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.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 = null\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":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AACnC,OAAO,qDAAqD,CAAA;AAC5D,OAAO,mCAAmC,CAAA;AAC1C,OAAO,0BAA0B,CAAA;AACjC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAYhD;;;;;GAKG;AAGH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;QAmK8B,gBAAW,GAAW,CAAC,CAAA;QACvB,gBAAW,GAAW,OAAO,CAAA;QAC7B,gBAAW,GAAgB,OAAO,CAAA;QAClC,UAAK,GAAQ,IAAI,CAAA;IA4M/C,CAAC;IAjXC,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4JF;SACF,CAAA;IACH,CAAC;IASD,YAAY;QACV,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC9E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;mBAQI,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;sBAmB/B,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;qBAChF,IAAI,CAAC,WAAW;;;;;;sBAMf,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAI,CAAC,CAAC,MAAc,CAAC,KAAK,CAAC;qBAC3D,IAAI,CAAC,WAAW;;;;;;;;;6BASR,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAI,CAAC,CAAC,MAAc,CAAC,QAAQ,CAAC;;0BAEhE,IAAI,CAAC,WAAW;;;;;;;;;;;;;;;;4CAgBE,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;;;;;;;;;;;;;;KAczE,CAAA;IACH,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,IAAI,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAA;QAEpC,MAAM,KAAK,GAAG,MAAM,EAAE,OAAO,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;QAClE,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAM;QACR,CAAC;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,QAAQ,EAAE,CAAC,QAAe,EAAE,EAAE;oBAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAA;oBAEhC,QAAQ,KAAK,EAAE,CAAC;wBACd,KAAK,YAAY;4BACf,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAA;4BAC1B,MAAK;wBACP,KAAK,eAAe;4BAClB,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;4BAC7B,MAAK;wBACP,KAAK,cAAc;4BACjB,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAA;4BAChC,MAAK;wBACP,KAAK,cAAc;4BACjB,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAA;4BAChC,MAAK;wBACP,KAAK,aAAa;4BAChB,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;4BAC/B,MAAK;wBACP,KAAK,cAAc;4BACjB,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAA;4BAChC,MAAK;wBACP,KAAK,aAAa;4BAChB,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAA;4BAC1B,MAAK;wBACP,KAAK,aAAa;4BAChB,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAA;4BAC1B,MAAK;wBACP,KAAK,uBAAuB;4BAC1B,KAAK,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAA;4BACpC,MAAK;wBACP,KAAK,qBAAqB;4BACxB,KAAK,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAA;4BAClC,MAAK;oBACT,CAAC;gBACH,CAAC;aACF;SACF,CAAC,CACH,CAAA;QAED,IAAI,CAAC,KAAK,GAAG;YACX,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAA;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,KAAK;YAClB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;QAED,CAAC,CAAC,eAAe,EAAE,CAAA;IACrB,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,IAAI,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAA;QAEpC,MAAM,KAAK,GAAG,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,CAAA;QACzE,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAM;QACR,CAAC;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,QAAQ,EAAE,CAAC,QAAe,EAAE,EAAE;oBAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAA;oBAEhC,KAAK,CAAC,aAAa,CACjB,QAAQ,EACR;wBACE,WAAW,EAAE,IAAI,CAAC,WAAW;wBAC7B,QAAQ,EAAE,IAAI,CAAC,WAAW;wBAC1B,SAAS,EAAE,IAAI,CAAC,WAAW;qBAC5B,EACD,KAAK,CACN,CAAA;gBACH,CAAC;aACF;SACF,CAAC,CACH,CAAA;QAED,IAAI,CAAC,KAAK,GAAG;YACX,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAA;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,KAAK;YAClB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;QAED,CAAC,CAAC,eAAe,EAAE,CAAA;IACrB,CAAC;CACF,CAAA;AA/M6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA8B;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAkB;AAElB;IAA1B,KAAK,CAAC,kBAAkB,CAAC;oDAA6B;AAxKnD,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAkXjB","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 = null\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/src/ox-input-textarea.js

@@ -6,7 +6,11 @@ import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
 let OxInputTextarea = class OxInputTextarea extends OxFormField {
-    static styles = [
+    constructor() {
+        super(...arguments);
+        this.value = '';
+    }
+    static { this.styles = [
         css `
       :host {
         display: flex;
@@ -26,9 +30,7 @@ let OxInputTextarea = class OxInputTextarea extends OxFormField {
         font-weight: inherit;
       }
     `
-    ];
-    value = '';
-    textarea;
+    ]; }
     render() {
         return html `
       <textarea

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-textarea.js","sourceRoot":"","sources":["../../src/ox-input-textarea.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAC9C,MAAM,CAAC,MAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;KAkBF;KACF,CAAA;IAE2B,KAAK,GAAW,EAAE,CAAA;IAE3B,QAAQ,CAAmB;IAE9C,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;iBACV,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;mBACrB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;kBAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;oBACtB,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAA;QACvB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;YACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAA;QAChE,CAAC;IACH,CAAC;IAED,OAAO,CAAC,CAAQ;QACd,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;QACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAA;IAChE,CAAC;IAED,SAAS,CAAC,CAAgB;QACxB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,CAAQ;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAA;QAEhC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,KAAK;YAClB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;;AAnD2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmB;AAE3B;IAAlB,KAAK,CAAC,UAAU,CAAC;iDAA4B;AAzBnC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA2E3B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-textarea')\nexport class OxInputTextarea extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n      }\n\n      textarea {\n        flex: 1;\n        height: auto;\n        resize: none;\n        overflow: hidden;\n        border: none;\n        outline: none;\n        background-color: transparent;\n\n        font-family: inherit;\n        font-size: inherit;\n        font-weight: inherit;\n      }\n    `\n  ]\n\n  @property({ type: String }) value: string = ''\n\n  @query('textarea') textarea!: HTMLInputElement\n\n  render() {\n    return html`\n      <textarea\n        .value=${this.value}\n        @input=${this.onInput.bind(this)}\n        @keydown=${this.onKeydown.bind(this)}\n        @change=${this.onChange.bind(this)}\n        ?disabled=${this.disabled}\n      ></textarea>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    requestAnimationFrame(() => {\n      this.textarea.focus()\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.textarea.style.height = 'auto'\n      this.textarea.style.height = this.textarea.scrollHeight + 'px'\n    }\n  }\n\n  onInput(e: Event) {\n    this.textarea.style.height = 'auto'\n    this.textarea.style.height = this.textarea.scrollHeight + 'px'\n  }\n\n  onKeydown(e: KeyboardEvent) {\n    if (e.key === 'Enter') {\n      e.stopPropagation()\n    }\n  }\n\n  onChange(e: Event) {\n    this.value = this.textarea.value\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-textarea.js","sourceRoot":"","sources":["../../src/ox-input-textarea.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAAzC;;QAuBuB,UAAK,GAAW,EAAE,CAAA;IAoDhD,CAAC;aA1EQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;KAkBF;KACF,AApBY,CAoBZ;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;iBACV,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;mBACrB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;kBAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;oBACtB,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAA;QACvB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;YACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAA;QAChE,CAAC;IACH,CAAC;IAED,OAAO,CAAC,CAAQ;QACd,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;QACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAA;IAChE,CAAC;IAED,SAAS,CAAC,CAAgB;QACxB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,CAAQ;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAA;QAEhC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,KAAK;YAClB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;;AAnD2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmB;AAE3B;IAAlB,KAAK,CAAC,UAAU,CAAC;iDAA4B;AAzBnC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA2E3B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-textarea')\nexport class OxInputTextarea extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n      }\n\n      textarea {\n        flex: 1;\n        height: auto;\n        resize: none;\n        overflow: hidden;\n        border: none;\n        outline: none;\n        background-color: transparent;\n\n        font-family: inherit;\n        font-size: inherit;\n        font-weight: inherit;\n      }\n    `\n  ]\n\n  @property({ type: String }) value: string = ''\n\n  @query('textarea') textarea!: HTMLInputElement\n\n  render() {\n    return html`\n      <textarea\n        .value=${this.value}\n        @input=${this.onInput.bind(this)}\n        @keydown=${this.onKeydown.bind(this)}\n        @change=${this.onChange.bind(this)}\n        ?disabled=${this.disabled}\n      ></textarea>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    requestAnimationFrame(() => {\n      this.textarea.focus()\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.textarea.style.height = 'auto'\n      this.textarea.style.height = this.textarea.scrollHeight + 'px'\n    }\n  }\n\n  onInput(e: Event) {\n    this.textarea.style.height = 'auto'\n    this.textarea.style.height = this.textarea.scrollHeight + 'px'\n  }\n\n  onKeydown(e: KeyboardEvent) {\n    if (e.key === 'Enter') {\n      e.stopPropagation()\n    }\n  }\n\n  onChange(e: Event) {\n    this.value = this.textarea.value\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}