@operato/input 0.4.3 → 0.4.4

package/dist/src/ox-input-layout/ox-input-card-layout.js

@@ -0,0 +1,57 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+const DEFAULT = {
+    activeIndex: 0
+};
+let OxInputCardLayout = class OxInputCardLayout extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.activeIndex = 0;
+    }
+    static { this.styles = css `
+    :host {
+      display: inline-block;
+    }
+  `; }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
+    }
+    updated(changes) {
+        if (changes.has('value')) {
+            let { activeIndex } = this.value || DEFAULT;
+            this.activeIndex = activeIndex;
+        }
+    }
+    render() {
+        return html `
+      <label>active index</label>
+      <input type="number" value-key="activeIndex" .value=${this.activeIndex} />
+    `;
+    }
+    _onValueChange(e) {
+        var element = e.target;
+        var key = element.getAttribute('value-key');
+        if (!key) {
+            return;
+        }
+        this[key] = Number(element.value);
+        this.value = {
+            activeIndex: this.activeIndex
+        };
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ type: Object })
+], OxInputCardLayout.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], OxInputCardLayout.prototype, "activeIndex", void 0);
+OxInputCardLayout = __decorate([
+    customElement('ox-input-card-layout')
+], OxInputCardLayout);
+//# sourceMappingURL=ox-input-card-layout.js.map

package/dist/src/ox-input-layout/ox-input-card-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-card-layout.js","sourceRoot":"","sources":["../../../src/ox-input-layout/ox-input-card-layout.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,CAAC;CACf,CAAA;AAGD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAQ8B,gBAAW,GAAW,CAAC,CAAA;IAqCrD,CAAC;aA5CQ,WAAM,GAAG,GAAG,CAAA;;;;GAIlB,CAAA;IAKD,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,OAAO,CAAA;YAE3C,IAAI,CAAC,WAAW,GAAG,WAAW,CAAA;SAC/B;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;4DAE6C,IAAI,CAAC,WAAW;KACvE,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAkB,CAAA;QAE5D,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QAEjC,IAAI,CAAC,KAAK,GAAG;YACX,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAA;QAED,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;AAtC6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAwB;AAR/C,iBAAiB;IADtB,aAAa,CAAC,sBAAsB,CAAC;GAChC,iBAAiB,CA6CtB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nconst DEFAULT = {\n  activeIndex: 0\n}\n\n@customElement('ox-input-card-layout')\nclass OxInputCardLayout extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n    }\n  `\n\n  @property({ type: Object }) value: any\n  @property({ type: Number }) activeIndex: number = 0\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      let { activeIndex } = this.value || DEFAULT\n\n      this.activeIndex = activeIndex\n    }\n  }\n\n  render() {\n    return html`\n      <label>active index</label>\n      <input type=\"number\" value-key=\"activeIndex\" .value=${this.activeIndex} />\n    `\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLInputElement\n    var key = element.getAttribute('value-key') as 'activeIndex'\n\n    if (!key) {\n      return\n    }\n\n    this[key] = Number(element.value)\n\n    this.value = {\n      activeIndex: this.activeIndex\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/ox-input-layout/ox-input-grid-layout.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+export {};

package/dist/src/ox-input-layout/ox-input-grid-layout.js

@@ -0,0 +1,63 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let OxInputGridLayout = class OxInputGridLayout extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.direction = 'row';
+    }
+    static { this.styles = css `
+    :host {
+      display: inline-block;
+    }
+  `; }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
+    }
+    updated(changes) {
+        if (changes.has('value')) {
+            let { direction = 'row' } = this.value || {};
+            this.direction = direction;
+        }
+        if (changes.has('value')) {
+        }
+    }
+    render() {
+        return html `
+      <label>direction</label>
+      <select value-key="direction" .value=${this.direction}>
+        <option value="row" selected>row</option>
+        <option value="column">column</option>
+      </select>
+    `;
+    }
+    _onValueChange(e) {
+        var element = e.target;
+        var key = element.getAttribute('value-key');
+        if (!key) {
+            return;
+        }
+        switch (key) {
+            case 'direction':
+                this.direction = element.value;
+            default:
+        }
+        this.value = {
+            direction: this.direction
+        };
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ type: Object })
+], OxInputGridLayout.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], OxInputGridLayout.prototype, "direction", void 0);
+OxInputGridLayout = __decorate([
+    customElement('ox-input-grid-layout')
+], OxInputGridLayout);
+//# sourceMappingURL=ox-input-grid-layout.js.map

package/dist/src/ox-input-layout/ox-input-grid-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-grid-layout.js","sourceRoot":"","sources":["../../../src/ox-input-layout/ox-input-grid-layout.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAGlE,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAQ8B,cAAS,GAAqB,KAAK,CAAA;IA+CjE,CAAC;aAtDQ,WAAM,GAAG,GAAG,CAAA;;;;GAIlB,CAAA;IAKD,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;YAE5C,IAAI,CAAC,SAAS,GAAG,SAAS,CAAA;SAC3B;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;SACzB;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;6CAE8B,IAAI,CAAC,SAAS;;;;KAItD,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA2B,CAAA;QAC3C,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,QAAQ,GAAG,EAAE;YACX,KAAK,WAAW;gBACd,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,KAAyB,CAAA;YACpD,QAAQ;SACT;QAED,IAAI,CAAC,KAAK,GAAG;YACX,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAA;QAED,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;AAhD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAoC;AAR3D,iBAAiB;IADtB,aAAa,CAAC,sBAAsB,CAAC;GAChC,iBAAiB,CAuDtB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n@customElement('ox-input-grid-layout')\nclass OxInputGridLayout extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n    }\n  `\n\n  @property({ type: Object }) value: any\n  @property({ type: String }) direction: 'row' | 'column' = 'row'\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      let { direction = 'row' } = this.value || {}\n\n      this.direction = direction\n    }\n\n    if (changes.has('value')) {\n    }\n  }\n\n  render() {\n    return html`\n      <label>direction</label>\n      <select value-key=\"direction\" .value=${this.direction}>\n        <option value=\"row\" selected>row</option>\n        <option value=\"column\">column</option>\n      </select>\n    `\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLSelectElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    switch (key) {\n      case 'direction':\n        this.direction = element.value as 'row' | 'column'\n      default:\n    }\n\n    this.value = {\n      direction: this.direction\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -0,0 +1,5 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import './things-grid-layout';
+import './things-card-layout';

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

@@ -0,0 +1,73 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import './things-grid-layout';
+import './things-card-layout';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+// import './things-linear-horizontal-layout'
+// import './things-linear-vertical-layout'
+const layouts = ['absolute', 'card', 'grid', 'linear-horizontal', 'linear-vertical', 'table'];
+let OxInputLayout = class OxInputLayout extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+        this.layout = '';
+        this.options = {};
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
+    }
+    updated(changes) {
+        if (changes.has('value')) {
+            this.layout = this.value.layout;
+            this.options = this.value.options;
+        }
+    }
+    render() {
+        return html `
+      <div>
+        <select value-key="layout" .value=${this.layout}>
+          <option value="" selected></option>
+          ${layouts.map(layout => {
+            return html ` <option value=${layout}>${layout}</option> `;
+        })}
+        </select>
+
+        ${this.layout == 'grid'
+            ? html ` <things-grid-layout value-key="options" .value=${this.options}></things-grid-layout> `
+            : this.layout == 'card'
+                ? html ` <things-card-layout value-key="options" .value=${this.options}></things-card-layout> `
+                : html ``}
+      </div>
+    `;
+    }
+    _onValueChange(e) {
+        var element = e.target;
+        var key = element.getAttribute('value-key');
+        if (!key) {
+            return;
+        }
+        //@ts-ignore
+        this[key] = element.value;
+        this.value = {
+            layout: this.layout,
+            options: this.options
+        };
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ type: Object })
+], OxInputLayout.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], OxInputLayout.prototype, "layout", void 0);
+__decorate([
+    property({ type: Object })
+], OxInputLayout.prototype, "options", void 0);
+OxInputLayout = __decorate([
+    customElement('ox-input-layout')
+], OxInputLayout);
+//# sourceMappingURL=ox-input-layout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-layout.js","sourceRoot":"","sources":["../../../src/ox-input-layout/ox-input-layout.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,6CAA6C;AAC7C,2CAA2C;AAE3C,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,OAAO,CAAC,CAAA;AAG7F,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAC8B,UAAK,GAAQ,EAAE,CAAA;QACf,WAAM,GAOpB,EAAE,CAAA;QACY,YAAO,GAAQ,EAAE,CAAA;IAkD/C,CAAC;IAhDC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAA;YAC/B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAA;SAClC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;4CAE6B,IAAI,CAAC,MAAM;;YAE3C,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACrB,OAAO,IAAI,CAAA,kBAAkB,MAAM,IAAI,MAAM,YAAY,CAAA;QAC3D,CAAC,CAAC;;;UAGF,IAAI,CAAC,MAAM,IAAI,MAAM;YACrB,CAAC,CAAC,IAAI,CAAA,mDAAmD,IAAI,CAAC,OAAO,yBAAyB;YAC9F,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM;gBACvB,CAAC,CAAC,IAAI,CAAA,mDAAmD,IAAI,CAAC,OAAO,yBAAyB;gBAC9F,CAAC,CAAC,IAAI,CAAA,EAAE;;KAEb,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,YAAY;QACZ,IAAI,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,KAAK,CAAA;QAEzB,IAAI,CAAC,KAAK,GAAG;YACX,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAA;QAED,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;AA3D6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAOX;AACY;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AAVzC,aAAa;IADlB,aAAa,CAAC,iBAAiB,CAAC;GAC3B,aAAa,CA4DlB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './things-grid-layout'\nimport './things-card-layout'\n\nimport { LitElement, PropertyValues, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n// import './things-linear-horizontal-layout'\n// import './things-linear-vertical-layout'\n\nconst layouts = ['absolute', 'card', 'grid', 'linear-horizontal', 'linear-vertical', 'table']\n\n@customElement('ox-input-layout')\nclass OxInputLayout extends LitElement {\n  @property({ type: Object }) value: any = {}\n  @property({ type: String }) layout:\n    | ''\n    | 'absolute'\n    | 'card'\n    | 'grid'\n    | 'linear-horizontal'\n    | 'linear-vertical'\n    | 'table' = ''\n  @property({ type: Object }) options: any = {}\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.layout = this.value.layout\n      this.options = this.value.options\n    }\n  }\n\n  render() {\n    return html`\n      <div>\n        <select value-key=\"layout\" .value=${this.layout}>\n          <option value=\"\" selected></option>\n          ${layouts.map(layout => {\n            return html` <option value=${layout}>${layout}</option> `\n          })}\n        </select>\n\n        ${this.layout == 'grid'\n          ? html` <things-grid-layout value-key=\"options\" .value=${this.options}></things-grid-layout> `\n          : this.layout == 'card'\n          ? html` <things-card-layout value-key=\"options\" .value=${this.options}></things-card-layout> `\n          : html``}\n      </div>\n    `\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    //@ts-ignore\n    this[key] = element.value\n\n    this.value = {\n      layout: this.layout,\n      options: this.options\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\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-colors values=${values}>
+    </ox-input-multiple-colors>
+*/
+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-colors values=${values}>
+    </ox-input-multiple-colors>
+*/
+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-colors values=${values}>\n    </ox-input-multiple-colors>\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 {};

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

@@ -0,0 +1,137 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { OxFormField } from './ox-form-field';
+let OxInputOptions = class OxInputOptions extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.value = [];
+        this._changingNow = false;
+    }
+    static { this.styles = css `
+    div {
+      display: grid;
+      grid-template-columns: repeat(10, 1fr);
+      grid-gap: 5px;
+      grid-auto-rows: minmax(24px, auto);
+    }
+
+    input[data-text] {
+      grid-column: span 5;
+    }
+
+    input[data-value] {
+      grid-column: span 4;
+    }
+
+    button {
+      grid-column: span 1;
+    }
+  `; }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onChange.bind(this));
+    }
+    render() {
+        const options = this.value instanceof Array ? this.value : [];
+        return html `
+      ${(options || []).map(item => html `
+          <div data-record="">
+            <input type="text" data-text="" placeholder="text" .value=${item.text} />
+            <input type="text" data-value="" placeholder="value" .value=${item.value} />
+            <button class="record-action" @click=${(e) => this._delete(e)} tabindex="-1">-</button>
+          </div>
+        `)}
+
+      <div data-record-new="">
+        <input type="text" data-text="" placeholder="text" value="" />
+        <input type="text" data-value="" placeholder="value" value="" @change=${(e) => this._add()} />
+        <button class="record-action" @click=${(e) => this._add()} tabindex="-1">+</button>
+      </div>
+    `;
+    }
+    _onChange(e) {
+        if (this._changingNow)
+            return;
+        this._changingNow = true;
+        var input = e.target;
+        var value = input.value;
+        var div = input.parentElement;
+        if (div && div.hasAttribute('data-record')) {
+            var dataList = div.querySelectorAll('[data-value]:not([hidden])');
+            for (var i = 0; i < dataList.length; i++) {
+                if (dataList[i] !== input) {
+                    dataList[i].value = value || '';
+                }
+            }
+        }
+        if (div && div.hasAttribute('data-record'))
+            this._build(true);
+        else if (div && div.hasAttribute('data-record-new') && input.hasAttribute('data-value'))
+            this._add();
+        e.stopPropagation();
+        this._changingNow = false;
+    }
+    _build(includeNewRecord) {
+        if (includeNewRecord) {
+            var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]');
+        }
+        else {
+            var records = this.renderRoot.querySelectorAll('[data-record]');
+        }
+        var newoptions = [];
+        for (var i = 0; i < records.length; i++) {
+            var record = records[i];
+            var text = record.querySelector('[data-text]').value;
+            var inputs = record.querySelectorAll('[data-value]:not([style*="display: none"])');
+            if (!inputs || inputs.length == 0)
+                continue;
+            var input = inputs[inputs.length - 1];
+            var value = input.value;
+            if (text)
+                newoptions.push({ text: text, value: value || text });
+        }
+        this.value = newoptions;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
+    }
+    sort() {
+        var sorter = function (a, b) {
+            return b.text < a.text ? 1 : -1;
+        };
+        this.value = [...this.value.sort(sorter)];
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
+    }
+    _add() {
+        this._build(true);
+        var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"])');
+        for (var i = 0; i < inputs.length; i++) {
+            let input = inputs[i];
+            input.value = '';
+        }
+        inputs[0].focus();
+    }
+    _delete(e) {
+        const record = e.target.parentElement;
+        const input = record && record.querySelector('[data-text]');
+        if (input) {
+            input.value = '';
+        }
+        this._build();
+    }
+    appendFormData({ formData }) {
+        if (!this.name)
+            return;
+        const value = this.value;
+        formData.append(this.name, typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value));
+    }
+};
+__decorate([
+    property({ type: Array })
+], OxInputOptions.prototype, "value", void 0);
+OxInputOptions = __decorate([
+    customElement('ox-input-options')
+], OxInputOptions);
+export { OxInputOptions };
+//# sourceMappingURL=ox-input-options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-options.js","sourceRoot":"","sources":["../../src/ox-input-options.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'\n\ntype Option = { text: string; value: string }\n\n@customElement('ox-input-options')\nexport class OxInputOptions extends OxFormField {\n  static styles = css`\n    div {\n      display: grid;\n      grid-template-columns: repeat(10, 1fr);\n      grid-gap: 5px;\n      grid-auto-rows: minmax(24px, auto);\n    }\n\n    input[data-text] {\n      grid-column: span 5;\n    }\n\n    input[data-value] {\n      grid-column: span 4;\n    }\n\n    button {\n      grid-column: span 1;\n    }\n  `\n\n  @property({ type: Array }) value: Option[] = []\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const options = this.value instanceof Array ? this.value : []\n\n    return html`\n      ${(options || []).map(\n        item => html`\n          <div data-record=\"\">\n            <input type=\"text\" data-text=\"\" placeholder=\"text\" .value=${item.text} />\n            <input type=\"text\" data-value=\"\" placeholder=\"value\" .value=${item.value} />\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._delete(e)} tabindex=\"-1\">-</button>\n          </div>\n        `\n      )}\n\n      <div data-record-new=\"\">\n        <input type=\"text\" data-text=\"\" placeholder=\"text\" value=\"\" />\n        <input type=\"text\" data-value=\"\" placeholder=\"value\" value=\"\" @change=${(e: Event) => this._add()} />\n        <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">+</button>\n      </div>\n    `\n  }\n\n  private _changingNow: boolean = false\n\n  _onChange(e: Event) {\n    if (this._changingNow) return\n\n    this._changingNow = true\n\n    var input = e.target as HTMLInputElement\n    var value = input.value\n\n    var div = input.parentElement\n\n    if (div && div.hasAttribute('data-record')) {\n      var dataList = div.querySelectorAll('[data-value]:not([hidden])') as NodeListOf<HTMLInputElement>\n\n      for (var i = 0; i < dataList.length; i++) {\n        if (dataList[i] !== input) {\n          dataList[i].value = value || ''\n        }\n      }\n    }\n\n    if (div && div.hasAttribute('data-record')) this._build(true)\n    else if (div && div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) this._add()\n\n    e.stopPropagation()\n\n    this._changingNow = false\n  }\n\n  _build(includeNewRecord?: any) {\n    if (includeNewRecord) {\n      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n    }\n\n    var newoptions: Option[] = []\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      var text = (record.querySelector('[data-text]') as HTMLInputElement).value\n      var inputs = record.querySelectorAll('[data-value]:not([style*=\"display: none\"])') as NodeListOf<HTMLInputElement>\n      if (!inputs || inputs.length == 0) continue\n\n      var input = inputs[inputs.length - 1]\n      var value = input.value\n\n      if (text) newoptions.push({ text: text, value: value || text })\n    }\n\n    this.value = newoptions\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  sort() {\n    var sorter = function (a: Option, b: Option) {\n      return b.text < a.text ? 1 : -1\n    }\n\n    this.value = [...this.value.sort(sorter)]\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  _add() {\n    this._build(true)\n\n    var inputs = this.renderRoot.querySelectorAll(\n      '[data-record-new] input:not([style*=\"display: none\"])'\n    ) as NodeListOf<HTMLInputElement>\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i]\n      input.value = ''\n    }\n\n    inputs[0].focus()\n  }\n\n  _delete(e: Event) {\n    const record = (e.target as HTMLElement).parentElement\n    const input = record && (record.querySelector('[data-text]') as HTMLInputElement)\n\n    if (input) {\n      input.value = ''\n    }\n\n    this._build()\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    if (!this.name) return\n\n    const value = this.value\n\n    formData.append(\n      this.name!,\n      typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n    )\n  }\n}\n"]}

package/dist/src/ox-input-partition-keys.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { OxFormField } from './ox-form-field';
+declare type PartitionKeys = {
+    [key: string]: any;
+};
+declare type ArrayedPartitionKeys = {
+    key: string;
+    value: any;
+};
+/**
+ key-value map for partitions editor element
+ 
+ Example:
+ 
+   <ox-input-partition-keys
+     value=${map}
+   </ox-input-partition-keys>
+ */
+export declare class OxInputPartitionKeys extends OxFormField {
+    static styles: import("lit").CSSResult;
+    value: PartitionKeys;
+    private _changingNow;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    _onChange(e: Event): void;
+    _build(includeNewRecord?: boolean): void;
+    _toArray(map: PartitionKeys): ArrayedPartitionKeys[];
+    _add(): void;
+    _delete(e: MouseEvent): void;
+    records: NodeListOf<HTMLElement>;
+    _up(e: MouseEvent): void;
+    _down(e: MouseEvent): void;
+}
+export {};