@operato/input 1.0.0-alpha.1 → 1.0.0-alpha.12

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

@@ -0,0 +1,298 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/color-picker/paper-color-picker.js';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { OxFormField } from './ox-form-field';
+import { tinycolor } from '@thebespokepixel/es-tinycolor';
+/**
+색상을 입력하는데 사용되는 입력 컴포넌트이다.
+화면상에는 두개의 입력 필드가 보이며, 하나는 색상값을 키보드로 직접 입력하는 입력 픽드이며,
+다른 하나는 마우스로 클릭하여 컬러 파레트를 팝업 시키는 입력 필드이다.
+컬러 파레트를 팝업시키는 입력필드는 현재 입력된 색상으로 표시된다.
+
+색상값을 직접 입력하는 필드에서는 'white', 'red', 'yellow' 등 색상의미 단어를 사용할 수도 있고,
+#fff, #123456 와 같이 스타일에서 지정하는 방식의 3자리 및 6자리 숫자 표현도 가능하다.
+컬러 파레트를 팝업시키는 입력 필드에서 색상을 지정하게되면, 모두 6자리 숫자 표현방식만을 사용한다.
+
+의미 단어를 지원하는 색상은 다음과 같다.
+
+aliceblue : #f0f8ff<br>
+antiquewhite : #faebd7<br>
+aqua : #00ffff<br>
+aquamarine : #7fffd4<br>
+azure : #f0ffff<br>
+beige : #f5f5dc<br>
+bisque : #ffe4c4<br>
+black : #000000<br>
+blanchedalmond : #ffebcd<br>
+blue : #0000ff<br>
+blueviolet : #8a2be2<br>
+brown : #a52a2a<br>
+burlywood : #deb887<br>
+cadetblue : #5f9ea0<br>
+chartreuse : #7fff00<br>
+chocolate : #d2691e<br>
+coral : #ff7f50<br>
+cornflowerblue : #6495ed<br>
+cornsilk : #fff8dc<br>
+crimson : #dc143c<br>
+cyan : #00ffff<br>
+darkblue : #00008b<br>
+darkcyan : #008b8b<br>
+darkgoldenrod : #b8860b<br>
+darkgray : #a9a9a9<br>
+darkgreen : #006400<br>
+darkkhaki : #bdb76b<br>
+darkmagenta : #8b008b<br>
+darkolivegreen : #556b2f<br>
+darkorange : #ff8c00<br>
+darkorchid : #9932cc<br>
+darkred : #8b0000<br>
+darksalmon : #e9967a<br>
+darkseagreen : #8fbc8f<br>
+darkslateblue : #483d8b<br>
+darkslategray : #2f4f4f<br>
+darkturquoise : #00ced1<br>
+darkviolet : #9400d3<br>
+deeppink : #ff1493<br>
+deepskyblue : #00bfff<br>
+dimgray : #696969<br>
+dodgerblue : #1e90ff<br>
+firebrick : #b22222<br>
+floralwhite : #fffaf0<br>
+forestgreen : #228b22<br>
+fuchsia : #ff00ff<br>
+gainsboro : #dcdcdc<br>
+ghostwhite : #f8f8ff<br>
+gold : #ffd700<br>
+goldenrod : #daa520<br>
+gray : #808080<br>
+green : #008000<br>
+greenyellow : #adff2f<br>
+honeydew : #f0fff0<br>
+hotpink : #ff69b4<br>
+indianred  : #cd5c5c<br>
+indigo : #4b0082<br>
+ivory : #fffff0<br>
+khaki : #f0e68c<br>
+lavender : #e6e6fa<br>
+lavenderblush : #fff0f5<br>
+lawngreen : #7cfc00<br>
+lemonchiffon : #fffacd<br>
+lightblue : #add8e6<br>
+lightcoral : #f08080<br>
+lightcyan : #e0ffff<br>
+lightgoldenrodyellow : #fafad2<br>
+lightgrey : #d3d3d3<br>
+lightgreen : #90ee90<br>
+lightpink : #ffb6c1<br>
+lightsalmon : #ffa07a<br>
+lightseagreen : #20b2aa<br>
+lightskyblue : #87cefa<br>
+lightslategray : #778899<br>
+lightsteelblue : #b0c4de<br>
+lightyellow : #ffffe0<br>
+lime : #00ff00<br>
+limegreen : #32cd32<br>
+linen : #faf0e6<br>
+magenta : #ff00ff<br>
+maroon : #800000<br>
+mediumaquamarine : #66cdaa<br>
+mediumblue : #0000cd<br>
+mediumorchid : #ba55d3<br>
+mediumpurple : #9370d8<br>
+mediumseagreen : #3cb371<br>
+mediumslateblue : #7b68ee<br>
+mediumspringgreen : #00fa9a<br>
+mediumturquoise : #48d1cc<br>
+mediumvioletred : #c71585<br>
+midnightblue : #191970<br>
+mintcream : #f5fffa<br>
+mistyrose : #ffe4e1<br>
+moccasin : #ffe4b5<br>
+navajowhite : #ffdead<br>
+navy : #000080<br>
+oldlace : #fdf5e6<br>
+olive : #808000<br>
+olivedrab : #6b8e23<br>
+orange : #ffa500<br>
+orangered : #ff4500<br>
+orchid : #da70d6<br>
+palegoldenrod : #eee8aa<br>
+palegreen : #98fb98<br>
+paleturquoise : #afeeee<br>
+palevioletred : #d87093<br>
+papayawhip : #ffefd5<br>
+peachpuff : #ffdab9<br>
+peru : #cd853f<br>
+pink : #ffc0cb<br>
+plum : #dda0dd<br>
+powderblue : #b0e0e6<br>
+purple : #800080<br>
+red : #ff0000<br>
+rosybrown : #bc8f8f<br>
+royalblue : #4169e1<br>
+saddlebrown : #8b4513<br>
+salmon : #fa8072<br>
+sandybrown : #f4a460<br>
+seagreen : #2e8b57<br>
+seashell : #fff5ee<br>
+sienna : #a0522d<br>
+silver : #c0c0c0<br>
+skyblue : #87ceeb<br>
+slateblue : #6a5acd<br>
+slategray : #708090<br>
+snow : #fffafa<br>
+springgreen : #00ff7f<br>
+steelblue : #4682b4<br>
+tan : #d2b48c<br>
+teal : #008080<br>
+thistle : #d8bfd8<br>
+tomato : #ff6347<br>
+turquoise : #40e0d0<br>
+violet : #ee82ee<br>
+wheat : #f5deb3<br>
+white : #ffffff<br>
+whitesmoke : #f5f5f5<br>
+yellow : #ffff00<br>
+yellowgreen : #9acd32<br>
+
+Example:
+
+    <ox-input-color .value=${color}>
+    </ox-input-color>
+*/
+let OxInputColor = class OxInputColor extends OxFormField {
+    static { this.styles = css `
+    :host {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    input[type='text'] {
+      padding-right: 24px;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+    }
+
+    a {
+      -webkit-appearance: none;
+      display: flex;
+      position: absolute;
+      width: 24px;
+      height: 100%;
+      box-sizing: border-box;
+      align-items: center;
+      justify-content: center;
+    }
+
+    span {
+      width: 18px;
+      height: 100%;
+      max-height: 18px;
+      border-radius: 10%;
+      border: 1px solid #eee;
+    }
+
+    span.transparent {
+      background-color: #fefefe;
+      background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
+        linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);
+      background-position: 0 0, 9px 9px;
+      background-size: 18px 18px;
+    }
+  `; }
+    render() {
+        return html `
+      <input
+        id="text"
+        type="text"
+        .value=${this.value || ''}
+        @change=${(e) => this._onInputChanged(e)}
+        .placeholder=${this.getAttribute('placeholder') || ''}
+      />
+
+      <a @click=${(e) => this.showPicker()}>
+        <span id="color-thumbnail" .style="background-color:${this._thumbnail()}" class=${this._thumbnail()}> </span>
+      </a>
+    `;
+    }
+    set colorString(colorString) {
+        var color = tinycolor(colorString, {});
+        var { withoutAlpha, valueType } = this.properties || {};
+        if (color.isValid()) {
+            if (valueType == 'hex' || withoutAlpha) {
+                this.value = color.toHexString(false);
+            }
+            else
+                this.value = color.toRgbString();
+            this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+        }
+    }
+    _thumbnail() {
+        return tinycolor(this.value || 'transparent', {}).toRgbString();
+    }
+    _onInputChanged(e) {
+        e.stopPropagation();
+        this.value = e.target.value;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+    /**
+     * 외부에서 호출 가능한 메쏘드임.
+     */
+    showPicker() {
+        var { withoutAlpha } = this.properties || {};
+        var color = tinycolor(this.value, {});
+        var picker = document.createElement('paper-color-picker');
+        picker.shape = 'huebox';
+        picker.color = color;
+        picker.colorAsString = color.toRgbString();
+        if (!withoutAlpha) {
+            picker.allowAlpha = true;
+            picker.alwaysShowAlpha = true;
+        }
+        picker.type = 'hsl';
+        if (color.isValid()) {
+            let rgb = color.toRgb();
+            let alpha = color.getAlpha();
+            picker._initialAlphaValueHack = alpha;
+            picker.set('immediateColor.red', rgb.r);
+            picker.set('immediateColor.green', rgb.g);
+            picker.set('immediateColor.blue', rgb.b);
+            if (alpha != undefined) {
+                picker.set('immediateColor.alpha', alpha);
+            }
+        }
+        document.body.appendChild(picker);
+        var _ = (e) => {
+            if (!e?.detail?.confirmed) {
+                return;
+            }
+            if (picker.colorAsString) {
+                this.colorString = picker.colorAsString;
+            }
+            picker.removeEventListener('iron-overlay-closed', _);
+            picker.parentNode?.removeChild(picker);
+        };
+        picker.addEventListener('iron-overlay-closed', _);
+        setTimeout(() => picker.open());
+    }
+};
+__decorate([
+    property({ type: String })
+], OxInputColor.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], OxInputColor.prototype, "properties", void 0);
+OxInputColor = __decorate([
+    customElement('ox-input-color')
+], OxInputColor);
+export { OxInputColor };
+//# sourceMappingURL=ox-input-color.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-color.js","sourceRoot":"","sources":["../../src/ox-input-color.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/color-picker/paper-color-picker.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\nimport { tinycolor } from '@thebespokepixel/es-tinycolor'\n\n/**\n색상을 입력하는데 사용되는 입력 컴포넌트이다.\n화면상에는 두개의 입력 필드가 보이며, 하나는 색상값을 키보드로 직접 입력하는 입력 픽드이며,\n다른 하나는 마우스로 클릭하여 컬러 파레트를 팝업 시키는 입력 필드이다.\n컬러 파레트를 팝업시키는 입력필드는 현재 입력된 색상으로 표시된다.\n\n색상값을 직접 입력하는 필드에서는 'white', 'red', 'yellow' 등 색상의미 단어를 사용할 수도 있고,\n#fff, #123456 와 같이 스타일에서 지정하는 방식의 3자리 및 6자리 숫자 표현도 가능하다.\n컬러 파레트를 팝업시키는 입력 필드에서 색상을 지정하게되면, 모두 6자리 숫자 표현방식만을 사용한다.\n\n의미 단어를 지원하는 색상은 다음과 같다.\n\naliceblue : #f0f8ff<br>\nantiquewhite : #faebd7<br>\naqua : #00ffff<br>\naquamarine : #7fffd4<br>\nazure : #f0ffff<br>\nbeige : #f5f5dc<br>\nbisque : #ffe4c4<br>\nblack : #000000<br>\nblanchedalmond : #ffebcd<br>\nblue : #0000ff<br>\nblueviolet : #8a2be2<br>\nbrown : #a52a2a<br>\nburlywood : #deb887<br>\ncadetblue : #5f9ea0<br>\nchartreuse : #7fff00<br>\nchocolate : #d2691e<br>\ncoral : #ff7f50<br>\ncornflowerblue : #6495ed<br>\ncornsilk : #fff8dc<br>\ncrimson : #dc143c<br>\ncyan : #00ffff<br>\ndarkblue : #00008b<br>\ndarkcyan : #008b8b<br>\ndarkgoldenrod : #b8860b<br>\ndarkgray : #a9a9a9<br>\ndarkgreen : #006400<br>\ndarkkhaki : #bdb76b<br>\ndarkmagenta : #8b008b<br>\ndarkolivegreen : #556b2f<br>\ndarkorange : #ff8c00<br>\ndarkorchid : #9932cc<br>\ndarkred : #8b0000<br>\ndarksalmon : #e9967a<br>\ndarkseagreen : #8fbc8f<br>\ndarkslateblue : #483d8b<br>\ndarkslategray : #2f4f4f<br>\ndarkturquoise : #00ced1<br>\ndarkviolet : #9400d3<br>\ndeeppink : #ff1493<br>\ndeepskyblue : #00bfff<br>\ndimgray : #696969<br>\ndodgerblue : #1e90ff<br>\nfirebrick : #b22222<br>\nfloralwhite : #fffaf0<br>\nforestgreen : #228b22<br>\nfuchsia : #ff00ff<br>\ngainsboro : #dcdcdc<br>\nghostwhite : #f8f8ff<br>\ngold : #ffd700<br>\ngoldenrod : #daa520<br>\ngray : #808080<br>\ngreen : #008000<br>\ngreenyellow : #adff2f<br>\nhoneydew : #f0fff0<br>\nhotpink : #ff69b4<br>\nindianred  : #cd5c5c<br>\nindigo : #4b0082<br>\nivory : #fffff0<br>\nkhaki : #f0e68c<br>\nlavender : #e6e6fa<br>\nlavenderblush : #fff0f5<br>\nlawngreen : #7cfc00<br>\nlemonchiffon : #fffacd<br>\nlightblue : #add8e6<br>\nlightcoral : #f08080<br>\nlightcyan : #e0ffff<br>\nlightgoldenrodyellow : #fafad2<br>\nlightgrey : #d3d3d3<br>\nlightgreen : #90ee90<br>\nlightpink : #ffb6c1<br>\nlightsalmon : #ffa07a<br>\nlightseagreen : #20b2aa<br>\nlightskyblue : #87cefa<br>\nlightslategray : #778899<br>\nlightsteelblue : #b0c4de<br>\nlightyellow : #ffffe0<br>\nlime : #00ff00<br>\nlimegreen : #32cd32<br>\nlinen : #faf0e6<br>\nmagenta : #ff00ff<br>\nmaroon : #800000<br>\nmediumaquamarine : #66cdaa<br>\nmediumblue : #0000cd<br>\nmediumorchid : #ba55d3<br>\nmediumpurple : #9370d8<br>\nmediumseagreen : #3cb371<br>\nmediumslateblue : #7b68ee<br>\nmediumspringgreen : #00fa9a<br>\nmediumturquoise : #48d1cc<br>\nmediumvioletred : #c71585<br>\nmidnightblue : #191970<br>\nmintcream : #f5fffa<br>\nmistyrose : #ffe4e1<br>\nmoccasin : #ffe4b5<br>\nnavajowhite : #ffdead<br>\nnavy : #000080<br>\noldlace : #fdf5e6<br>\nolive : #808000<br>\nolivedrab : #6b8e23<br>\norange : #ffa500<br>\norangered : #ff4500<br>\norchid : #da70d6<br>\npalegoldenrod : #eee8aa<br>\npalegreen : #98fb98<br>\npaleturquoise : #afeeee<br>\npalevioletred : #d87093<br>\npapayawhip : #ffefd5<br>\npeachpuff : #ffdab9<br>\nperu : #cd853f<br>\npink : #ffc0cb<br>\nplum : #dda0dd<br>\npowderblue : #b0e0e6<br>\npurple : #800080<br>\nred : #ff0000<br>\nrosybrown : #bc8f8f<br>\nroyalblue : #4169e1<br>\nsaddlebrown : #8b4513<br>\nsalmon : #fa8072<br>\nsandybrown : #f4a460<br>\nseagreen : #2e8b57<br>\nseashell : #fff5ee<br>\nsienna : #a0522d<br>\nsilver : #c0c0c0<br>\nskyblue : #87ceeb<br>\nslateblue : #6a5acd<br>\nslategray : #708090<br>\nsnow : #fffafa<br>\nspringgreen : #00ff7f<br>\nsteelblue : #4682b4<br>\ntan : #d2b48c<br>\nteal : #008080<br>\nthistle : #d8bfd8<br>\ntomato : #ff6347<br>\nturquoise : #40e0d0<br>\nviolet : #ee82ee<br>\nwheat : #f5deb3<br>\nwhite : #ffffff<br>\nwhitesmoke : #f5f5f5<br>\nyellow : #ffff00<br>\nyellowgreen : #9acd32<br>\n\nExample:\n\n    <ox-input-color .value=${color}>\n    </ox-input-color>\n*/\n\n@customElement('ox-input-color')\nexport class OxInputColor 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[type='text'] {\n      padding-right: 24px;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n\n    a {\n      -webkit-appearance: none;\n      display: flex;\n      position: absolute;\n      width: 24px;\n      height: 100%;\n      box-sizing: border-box;\n      align-items: center;\n      justify-content: center;\n    }\n\n    span {\n      width: 18px;\n      height: 100%;\n      max-height: 18px;\n      border-radius: 10%;\n      border: 1px solid #eee;\n    }\n\n    span.transparent {\n      background-color: #fefefe;\n      background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),\n        linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);\n      background-position: 0 0, 9px 9px;\n      background-size: 18px 18px;\n    }\n  `\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) properties: any\n\n  render() {\n    return html`\n      <input\n        id=\"text\"\n        type=\"text\"\n        .value=${this.value || ''}\n        @change=${(e: Event) => this._onInputChanged(e)}\n        .placeholder=${this.getAttribute('placeholder') || ''}\n      />\n\n      <a @click=${(e: MouseEvent) => this.showPicker()}>\n        <span id=\"color-thumbnail\" .style=\"background-color:${this._thumbnail()}\" class=${this._thumbnail()}> </span>\n      </a>\n    `\n  }\n\n  set colorString(colorString: string) {\n    var color = tinycolor(colorString, {})\n    var { withoutAlpha, valueType } = this.properties || {}\n\n    if (color.isValid()) {\n      if (valueType == 'hex' || withoutAlpha) {\n        this.value = color.toHexString(false)\n      } else this.value = color.toRgbString()\n\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    }\n  }\n\n  _thumbnail() {\n    return tinycolor(this.value || 'transparent', {}).toRgbString()\n  }\n\n  _onInputChanged(e: Event) {\n    e.stopPropagation()\n    this.value = (e.target as HTMLInputElement).value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  /**\n   * 외부에서 호출 가능한 메쏘드임.\n   */\n  showPicker() {\n    var { withoutAlpha } = this.properties || {}\n\n    var color = tinycolor(this.value, {})\n\n    var picker = document.createElement('paper-color-picker') as HTMLElement & {\n      shape: string\n      color: any\n      colorAsString: string\n      allowAlpha: boolean\n      alwaysShowAlpha: boolean\n      type: string\n      _initialAlphaValueHack: number\n      set: (name: string, value: number) => void\n      open: () => void\n    }\n\n    picker.shape = 'huebox'\n    picker.color = color\n    picker.colorAsString = color.toRgbString()\n    if (!withoutAlpha) {\n      picker.allowAlpha = true\n      picker.alwaysShowAlpha = true\n    }\n    picker.type = 'hsl'\n\n    if (color.isValid()) {\n      let rgb = color.toRgb() as { r: number; g: number; b: number }\n      let alpha = color.getAlpha()\n\n      picker._initialAlphaValueHack = alpha\n\n      picker.set('immediateColor.red', rgb.r)\n      picker.set('immediateColor.green', rgb.g)\n      picker.set('immediateColor.blue', rgb.b)\n\n      if (alpha != undefined) {\n        picker.set('immediateColor.alpha', alpha)\n      }\n    }\n\n    document.body.appendChild(picker)\n\n    var _ = (e: Event) => {\n      if (!(e as CustomEvent)?.detail?.confirmed) {\n        return\n      }\n\n      if (picker.colorAsString) {\n        this.colorString = picker.colorAsString\n      }\n\n      picker.removeEventListener('iron-overlay-closed', _)\n      picker.parentNode?.removeChild(picker)\n    }\n    picker.addEventListener('iron-overlay-closed', _)\n\n    setTimeout(() => picker.open())\n  }\n}\n"]}

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

@@ -3,7 +3,7 @@
  */
 import './ox-input-code';
 import { PropertyValues } from 'lit';
-import { OxFormField } from './ox-form-field';
+import { OxFormField } from './ox-form-field.js';
 /**
 WEB Component for code-mirror based data editor.
 
@@ -12,7 +12,7 @@ Example:
   <ox-input-data value=${text}>
   </ox-input-data>
 */
-export default class OxInputData extends OxFormField {
+export declare class OxInputData extends OxFormField {
     static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): void;

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

@@ -4,8 +4,8 @@
 import { __decorate } from "tslib";
 import './ox-input-code';
 import { css, html } from 'lit';
+import { OxFormField } from './ox-form-field.js';
 import { customElement } from 'lit/decorators.js';
-import { OxFormField } from './ox-form-field';
 /**
 WEB Component for code-mirror based data editor.
 
@@ -131,5 +131,5 @@ let OxInputData = class OxInputData extends OxFormField {
 OxInputData = __decorate([
     customElement('ox-input-data')
 ], OxInputData);
-export default OxInputData;
+export { OxInputData };
 //# sourceMappingURL=ox-input-data.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-code'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\nimport OxInputCode from './ox-input-code'\n\n/**\nWEB Component for code-mirror based data editor.\n\nExample:\n\n  <ox-input-data value=${text}>\n  </ox-input-data>\n*/\n@customElement('ox-input-data')\nexport default class OxInputData extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n      }\n\n      div[datatype] {\n        display: flex;\n        align-items: center;\n        padding: 2px;\n        background-color: rgba(0, 0, 0, 0.08);\n        font-size: small;\n      }\n\n      div[datatype] mwc-icon {\n        margin-left: auto;\n      }\n\n      ox-input-code {\n        flex: 1;\n        max-width: 260px;\n        overflow: auto;\n      }\n    `\n  ]\n\n  render() {\n    return html`\n      <div datatype>\n        <input\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"string\"\n          .checked=${typeof this.value == 'string'}\n          @click=${() => this._setDataType('string')}\n        />string\n\n        <input\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"number\"\n          .checked=${typeof this.value == 'number'}\n          @click=${() => this._setDataType('number')}\n        />number\n\n        <input\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"object\"\n          .checked=${typeof this.value == 'object'}\n          @click=${() => this._setDataType('object')}\n        />object\n        <mwc-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</mwc-icon>\n      </div>\n\n      <ox-input-code .value=${this._getData(this.value)} editor> </ox-input-code>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', e => {\n      e.stopPropagation()\n      const target = e.target as OxInputCode\n      if (target.hasAttribute('editor')) {\n        this.value = target.value\n      }\n\n      const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value')\n      this._setDataType(type)\n    })\n  }\n\n  udpated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.value = this._getData(this.value)\n    }\n  }\n\n  _setDataType(type: string | undefined | null) {\n    if (typeof this.value !== type) {\n      var value = this.value\n\n      try {\n        switch (type) {\n          case 'string':\n            this.value = String(value || '')\n            break\n          case 'number':\n            if (!isNaN(value)) {\n              this.value = Number(value)\n            }\n            break\n          case 'object':\n            this.value = eval('(' + value + ')')\n            break\n        }\n      } catch (e) {\n        console.log(e)\n      }\n    }\n\n    this._onAfterValueChange()\n  }\n\n  _clearData() {\n    this.value = undefined\n    this._onAfterValueChange()\n  }\n\n  _getData(data: any) {\n    return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1)\n  }\n\n  _onAfterValueChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-code'\n\nimport { PropertyValues, css, html } from 'lit'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputCode } from './ox-input-code.js'\nimport { customElement } from 'lit/decorators.js'\n\n/**\nWEB Component for code-mirror based data editor.\n\nExample:\n\n  <ox-input-data value=${text}>\n  </ox-input-data>\n*/\n@customElement('ox-input-data')\nexport class OxInputData extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n      }\n\n      div[datatype] {\n        display: flex;\n        align-items: center;\n        padding: 2px;\n        background-color: rgba(0, 0, 0, 0.08);\n        font-size: small;\n      }\n\n      div[datatype] mwc-icon {\n        margin-left: auto;\n      }\n\n      ox-input-code {\n        flex: 1;\n        max-width: 260px;\n        overflow: auto;\n      }\n    `\n  ]\n\n  render() {\n    return html`\n      <div datatype>\n        <input\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"string\"\n          .checked=${typeof this.value == 'string'}\n          @click=${() => this._setDataType('string')}\n        />string\n\n        <input\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"number\"\n          .checked=${typeof this.value == 'number'}\n          @click=${() => this._setDataType('number')}\n        />number\n\n        <input\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"object\"\n          .checked=${typeof this.value == 'object'}\n          @click=${() => this._setDataType('object')}\n        />object\n        <mwc-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</mwc-icon>\n      </div>\n\n      <ox-input-code .value=${this._getData(this.value)} editor> </ox-input-code>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', e => {\n      e.stopPropagation()\n      const target = e.target as OxInputCode\n      if (target.hasAttribute('editor')) {\n        this.value = target.value\n      }\n\n      const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value')\n      this._setDataType(type)\n    })\n  }\n\n  udpated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.value = this._getData(this.value)\n    }\n  }\n\n  _setDataType(type: string | undefined | null) {\n    if (typeof this.value !== type) {\n      var value = this.value\n\n      try {\n        switch (type) {\n          case 'string':\n            this.value = String(value || '')\n            break\n          case 'number':\n            if (!isNaN(value)) {\n              this.value = Number(value)\n            }\n            break\n          case 'object':\n            this.value = eval('(' + value + ')')\n            break\n        }\n      } catch (e) {\n        console.log(e)\n      }\n    }\n\n    this._onAfterValueChange()\n  }\n\n  _clearData() {\n    this.value = undefined\n    this._onAfterValueChange()\n  }\n\n  _getData(data: any) {\n    return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1)\n  }\n\n  _onAfterValueChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}

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

@@ -1,4 +1,5 @@
 import '@material/mwc-icon';
+import { PropertyValues } from 'lit';
 import { OxFormField } from './ox-form-field.js';
 export declare class OxInputFile extends OxFormField {
     static styles: import("lit").CSSResult[];
@@ -11,6 +12,7 @@ export declare class OxInputFile extends OxFormField {
     attachFileList: boolean;
     fileInput: HTMLInputElement;
     render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
     firstUpdated(): void;
     get files(): any;
     reset(): void;

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

@@ -2,9 +2,9 @@ import { __decorate } from "tslib";
 import '@material/mwc-icon';
 import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { ScrollbarStyles } from '@operato/styles';
 import { FileDropHelper } from '@operato/utils';
 import { OxFormField } from './ox-form-field.js';
+import { ScrollbarStyles } from '@operato/styles';
 let OxInputFile = class OxInputFile extends OxFormField {
     constructor() {
         super(...arguments);
@@ -122,6 +122,11 @@ let OxInputFile = class OxInputFile extends OxFormField {
             : html ``}
     `;
     }
+    updated(changes) {
+        if (changes.has('value') && !(this.value instanceof Array)) {
+            this.value = !this.value ? [] : [this.value];
+        }
+    }
     firstUpdated() {
         FileDropHelper.set(this);
         this.addEventListener('file-drop', (e) => {

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-file.js","sourceRoot":"","sources":["../../src/ox-input-file.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { FileDropHelper } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-file')\nexport class OxInputFile extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        border-radius: var(--border-radius);\n        align-items: center;\n        justify-content: center;\n        padding: var(--padding-default, 9px);\n        min-height: 100px;\n        text-transform: capitalize;\n\n        border: var(--file-uploader-border);\n        background-color: var(--main-section-background-color);\n        font: var(--file-uploader-font) !important;\n        color: var(--file-uploader-color);\n      }\n      :host > mwc-icon {\n        color: var(--file-uploader-icon-color);\n        --mdc-icon-size: var(--file-uploader-icon-size, 36px);\n      }\n\n      :host(.candrop) {\n        background-color: var(--file-uploader-candrop-background-color);\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        position: relative;\n        width: auto;\n        border: none;\n        text-transform: capitalize;\n\n        padding: var(--file-uploader-label-padding);\n        border-radius: var(--file-uploader-label-border-radius);\n        background-color: var(--file-uploader-label-background-color);\n        color: var(--file-uploader-label-color);\n        font: var(--file-uploader-label-font) !important;\n      }\n\n      ul {\n        max-width: 500px;\n        width: 100%;\n        list-style: none;\n        margin: 5px 0 0 0;\n        padding: 0;\n        max-height: 46px;\n        overflow: auto;\n        background-color: rgba(var(--primary-color-rgb), 0.1);\n      }\n      li {\n        text-align: left;\n\n        padding: 3px 5px 2px 5px;\n        border-bottom: var(--file-uploader-li-border-bottom);\n        font: normal 14px var(--theme-font);\n      }\n      li mwc-icon {\n        float: right;\n        cursor: pointer;\n        margin: var(--file-uploader-li-icon-margin);\n        font-size: 1em;\n      }\n      li mwc-icon:hover,\n      li mwc-icon:active {\n        color: var(--file-uploader-li-icon-focus-color);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) multiple?: boolean\n  @property({ type: String }) accept?: string\n  @property({ type: String }) icon?: string\n  @property({ type: String }) label?: string\n  @property({ type: String }) description?: string\n  @property({ type: Boolean, reflect: true, attribute: 'hide-filelist' })\n  hideFileList: boolean = false\n  @property({ type: Boolean, reflect: true, attribute: 'attach-filelist' })\n  attachFileList: boolean = false\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  render() {\n    var files: File[] = this.value || []\n\n    return html`\n      <mwc-icon>upload</mwc-icon>\n\n      <span>drop files here!</span>\n\n      <input\n        id=\"input-file\"\n        type=\"file\"\n        accept=${this.accept}\n        ?multiple=${this.multiple}\n        hidden\n        capture=\"environment\"\n        @change=${(e: Event) => this._onChangeValue(e)}\n      />\n\n      <label for=\"input-file\">${this.label || 'select files'}</label>\n\n      ${!this.hideFileList && files?.length\n        ? html` <ul>\n            ${files.map(\n              file => html`\n                <li>\n                  - ${file.name}\n                  <mwc-icon\n                    @click=${(e: Event) => {\n                      files.splice(files.indexOf(file), 1)\n                      this.value = [...files]\n                      this._notifyChange()\n                    }}\n                    >delete_outline</mwc-icon\n                  >\n                </li>\n              `\n            )}\n          </ul>`\n        : html``}\n    `\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n\n    this.addEventListener('file-drop', (e: Event) => {\n      const detail = (e as CustomEvent).detail\n      this.value = this.multiple ? detail : detail[0] ? [detail[0]] : []\n\n      this._notifyChange()\n    })\n  }\n\n  get files() {\n    return this.value\n  }\n\n  reset() {\n    this.fileInput.value = ''\n    this.value = []\n\n    this._notifyChange()\n  }\n\n  _onChangeValue(e: Event) {\n    const fileInput = e.currentTarget as HTMLInputElement\n    const files = this.value || []\n\n    this.value = this.attachFileList\n      ? [...files, ...Array.from(fileInput.files as FileList)]\n      : [...Array.from(fileInput.files as FileList)]\n\n    fileInput.files = null\n\n    this._notifyChange()\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-file.js","sourceRoot":"","sources":["../../src/ox-input-file.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { FileDropHelper } from '@operato/utils'\nimport { OxFormField } from './ox-form-field.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-input-file')\nexport class OxInputFile extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        border-radius: var(--border-radius);\n        align-items: center;\n        justify-content: center;\n        padding: var(--padding-default, 9px);\n        min-height: 100px;\n        text-transform: capitalize;\n\n        border: var(--file-uploader-border);\n        background-color: var(--main-section-background-color);\n        font: var(--file-uploader-font) !important;\n        color: var(--file-uploader-color);\n      }\n      :host > mwc-icon {\n        color: var(--file-uploader-icon-color);\n        --mdc-icon-size: var(--file-uploader-icon-size, 36px);\n      }\n\n      :host(.candrop) {\n        background-color: var(--file-uploader-candrop-background-color);\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        position: relative;\n        width: auto;\n        border: none;\n        text-transform: capitalize;\n\n        padding: var(--file-uploader-label-padding);\n        border-radius: var(--file-uploader-label-border-radius);\n        background-color: var(--file-uploader-label-background-color);\n        color: var(--file-uploader-label-color);\n        font: var(--file-uploader-label-font) !important;\n      }\n\n      ul {\n        max-width: 500px;\n        width: 100%;\n        list-style: none;\n        margin: 5px 0 0 0;\n        padding: 0;\n        max-height: 46px;\n        overflow: auto;\n        background-color: rgba(var(--primary-color-rgb), 0.1);\n      }\n      li {\n        text-align: left;\n\n        padding: 3px 5px 2px 5px;\n        border-bottom: var(--file-uploader-li-border-bottom);\n        font: normal 14px var(--theme-font);\n      }\n      li mwc-icon {\n        float: right;\n        cursor: pointer;\n        margin: var(--file-uploader-li-icon-margin);\n        font-size: 1em;\n      }\n      li mwc-icon:hover,\n      li mwc-icon:active {\n        color: var(--file-uploader-li-icon-focus-color);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) multiple?: boolean\n  @property({ type: String }) accept?: string\n  @property({ type: String }) icon?: string\n  @property({ type: String }) label?: string\n  @property({ type: String }) description?: string\n  @property({ type: Boolean, reflect: true, attribute: 'hide-filelist' })\n  hideFileList: boolean = false\n  @property({ type: Boolean, reflect: true, attribute: 'attach-filelist' })\n  attachFileList: boolean = false\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  render() {\n    var files: File[] = this.value || []\n\n    return html`\n      <mwc-icon>upload</mwc-icon>\n\n      <span>drop files here!</span>\n\n      <input\n        id=\"input-file\"\n        type=\"file\"\n        accept=${this.accept}\n        ?multiple=${this.multiple}\n        hidden\n        capture=\"environment\"\n        @change=${(e: Event) => this._onChangeValue(e)}\n      />\n\n      <label for=\"input-file\">${this.label || 'select files'}</label>\n\n      ${!this.hideFileList && files?.length\n        ? html` <ul>\n            ${files.map(\n              file => html`\n                <li>\n                  - ${file.name}\n                  <mwc-icon\n                    @click=${(e: Event) => {\n                      files.splice(files.indexOf(file), 1)\n                      this.value = [...files]\n                      this._notifyChange()\n                    }}\n                    >delete_outline</mwc-icon\n                  >\n                </li>\n              `\n            )}\n          </ul>`\n        : html``}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value') && !(this.value instanceof Array)) {\n      this.value = !this.value ? [] : [this.value]\n    }\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n\n    this.addEventListener('file-drop', (e: Event) => {\n      const detail = (e as CustomEvent).detail\n      this.value = this.multiple ? detail : detail[0] ? [detail[0]] : []\n\n      this._notifyChange()\n    })\n  }\n\n  get files() {\n    return this.value\n  }\n\n  reset() {\n    this.fileInput.value = ''\n    this.value = []\n\n    this._notifyChange()\n  }\n\n  _onChangeValue(e: Event) {\n    const fileInput = e.currentTarget as HTMLInputElement\n    const files = this.value || []\n\n    this.value = this.attachFileList\n      ? [...files, ...Array.from(fileInput.files as FileList)]\n      : [...Array.from(fileInput.files as FileList)]\n\n    fileInput.files = null\n\n    this._notifyChange()\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-multiple-colors.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import './ox-input-color.js';
+import { OxFormField } from './ox-form-field.js';
+import { OxInputColor } from './ox-input-color.js';
+/**
+색상 배열을 편집하는 컴포넌트이다.
+
+새로운 색상을 추가하고자 할 때는 `+` 버튼을 클릭한다.<br />
+색상을 제거하고자 할 때는 `-` 버튼을 클릭한다.<br />
+
+Example:
+
+    <ox-input-multiple-color values=${values}>
+    </ox-input-multiple-color>
+*/
+export declare class OxInputMultipleColors extends OxFormField {
+    static styles: import("lit").CSSResult;
+    value: string[];
+    colorsContainer: HTMLDivElement;
+    colors: NodeListOf<OxInputColor>;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    _onValueChanged(): void;
+    _appendEditorColor(): void;
+    _removeEditorColor(e: Event): void;
+}

package/dist/src/ox-input-multiple-colors.js

@@ -0,0 +1,113 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import './ox-input-color.js';
+import { css, html } from 'lit';
+import { customElement, property, query, queryAll } from 'lit/decorators.js';
+import { OxFormField } from './ox-form-field.js';
+/**
+색상 배열을 편집하는 컴포넌트이다.
+
+새로운 색상을 추가하고자 할 때는 `+` 버튼을 클릭한다.<br />
+색상을 제거하고자 할 때는 `-` 버튼을 클릭한다.<br />
+
+Example:
+
+    <ox-input-multiple-color values=${values}>
+    </ox-input-multiple-color>
+*/
+let OxInputMultipleColors = class OxInputMultipleColors extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.value = [];
+    }
+    static { this.styles = css `
+    :host {
+      display: inline-block;
+    }
+
+    #colors-container > div {
+      display: grid;
+      grid-template-columns: 22px 1fr 22px;
+      grid-gap: 5px;
+      align-items: center;
+      justify-content: left;
+    }
+
+    ox-input-color {
+      height: 25px;
+      width: 100%;
+    }
+
+    input[type='button'] {
+      width: 22px;
+      height: 25px;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+      padding-top: 0px;
+      padding-bottom: 2px;
+      background-color: #f1f2f4;
+      color: #8f9192;
+      font-size: 16px;
+    }
+  `; }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onValueChanged.bind(this));
+    }
+    render() {
+        return html `
+      <div id="colors-container">
+        ${(this.value || []).map((item, index) => html `
+            <div>
+              <input type="button" value="+" @click=${() => this._appendEditorColor()} data-index=${index} />
+
+              <ox-input-color .value=${item}> </ox-input-color>
+
+              ${(this.value || []).length > 1
+            ? html `
+                    <input
+                      type="button"
+                      value="-"
+                      @click=${(e) => this._removeEditorColor(e)}
+                      data-index=${index}
+                    />
+                  `
+            : html ``}
+            </div>
+          `)}
+      </div>
+    `;
+    }
+    _onValueChanged() {
+        this.value = Array.from(this.colors).map(color => color.value);
+    }
+    _appendEditorColor() {
+        this.value = [...this.value, 'black'];
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+    _removeEditorColor(e) {
+        var values = [];
+        for (var i = 0; i < this.value.length; i++) {
+            if (i == Number(e.target.dataset.index))
+                continue;
+            else
+                values.push(this.value[i]);
+        }
+        this.value = values;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ type: Array })
+], OxInputMultipleColors.prototype, "value", void 0);
+__decorate([
+    query('#colors-container')
+], OxInputMultipleColors.prototype, "colorsContainer", void 0);
+__decorate([
+    queryAll('ox-input-color')
+], OxInputMultipleColors.prototype, "colors", void 0);
+OxInputMultipleColors = __decorate([
+    customElement('ox-input-multiple-colors')
+], OxInputMultipleColors);
+export { OxInputMultipleColors };
+//# sourceMappingURL=ox-input-multiple-colors.js.map

package/dist/src/ox-input-multiple-colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-multiple-colors.js","sourceRoot":"","sources":["../../src/ox-input-multiple-colors.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD;;;;;;;;;;EAUE;AAGF,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,WAAW;IAAtD;;QA+B6B,UAAK,GAAa,EAAE,CAAA;IAwDjD,CAAC;aAtFQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BlB,CAAA;IAOD,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC7E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CACtB,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;sDAEuB,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,eAAe,KAAK;;uCAElE,IAAI;;gBAE3B,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC;YAC7B,CAAC,CAAC,IAAI,CAAA;;;;+BAIS,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;mCACpC,KAAK;;mBAErB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;WAEb,CACF;;KAEJ,CAAA;IACH,CAAC;IAED,eAAe;QACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAM,CAAC,CAAA;IACjE,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;QAErC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,kBAAkB,CAAC,CAAQ;QACzB,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC1C,IAAI,CAAC,IAAI,MAAM,CAAE,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,KAAK,CAAC;gBAAE,SAAQ;;gBAC7D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;SAChC;QAED,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;CACF,CAAA;AAxD4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAqB;AAEnB;IAA3B,KAAK,CAAC,mBAAmB,CAAC;8DAAiC;AAChC;IAA3B,QAAQ,CAAC,gBAAgB,CAAC;qDAAkC;AAlClD,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAuFjC;SAvFY,qBAAqB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-color.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputColor } from './ox-input-color.js'\n\n/**\n색상 배열을 편집하는 컴포넌트이다.\n\n새로운 색상을 추가하고자 할 때는 `+` 버튼을 클릭한다.<br />\n색상을 제거하고자 할 때는 `-` 버튼을 클릭한다.<br />\n\nExample:\n\n    <ox-input-multiple-color values=${values}>\n    </ox-input-multiple-color>\n*/\n\n@customElement('ox-input-multiple-colors')\nexport class OxInputMultipleColors extends OxFormField {\n  static styles = css`\n    :host {\n      display: inline-block;\n    }\n\n    #colors-container > div {\n      display: grid;\n      grid-template-columns: 22px 1fr 22px;\n      grid-gap: 5px;\n      align-items: center;\n      justify-content: left;\n    }\n\n    ox-input-color {\n      height: 25px;\n      width: 100%;\n    }\n\n    input[type='button'] {\n      width: 22px;\n      height: 25px;\n      border: 1px solid rgba(0, 0, 0, 0.15);\n      padding-top: 0px;\n      padding-bottom: 2px;\n      background-color: #f1f2f4;\n      color: #8f9192;\n      font-size: 16px;\n    }\n  `\n\n  @property({ type: Array }) value: string[] = []\n\n  @query('#colors-container') colorsContainer!: HTMLDivElement\n  @queryAll('ox-input-color') colors!: NodeListOf<OxInputColor>\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChanged.bind(this))\n  }\n\n  render() {\n    return html`\n      <div id=\"colors-container\">\n        ${(this.value || []).map(\n          (item, index) => html`\n            <div>\n              <input type=\"button\" value=\"+\" @click=${() => this._appendEditorColor()} data-index=${index} />\n\n              <ox-input-color .value=${item}> </ox-input-color>\n\n              ${(this.value || []).length > 1\n                ? html`\n                    <input\n                      type=\"button\"\n                      value=\"-\"\n                      @click=${(e: Event) => this._removeEditorColor(e)}\n                      data-index=${index}\n                    />\n                  `\n                : html``}\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  _onValueChanged() {\n    this.value = Array.from(this.colors).map(color => color.value!)\n  }\n\n  _appendEditorColor() {\n    this.value = [...this.value, 'black']\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _removeEditorColor(e: Event) {\n    var values = []\n    for (var i = 0; i < this.value.length; i++) {\n      if (i == Number((e.target as HTMLElement).dataset.index)) continue\n      else values.push(this.value[i])\n    }\n\n    this.value = values\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -0,0 +1,22 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { OxFormField } from './ox-form-field';
+declare type Option = {
+    text: string;
+    value: string;
+};
+export declare class OxInputOptions extends OxFormField {
+    static styles: import("lit").CSSResult;
+    value: Option[];
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private _changingNow;
+    _onChange(e: Event): void;
+    _build(includeNewRecord?: any): void;
+    sort(): void;
+    _add(): void;
+    _delete(e: Event): void;
+    protected appendFormData({ formData }: FormDataEvent): void;
+}
+export {};