@operato/property-editor 1.0.0-beta.7 → 1.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"ox-property-editor-scene-component-id.js","sourceRoot":"","sources":["../../src/ox-property-editor-scene-component-id.ts"],"names":[],"mappings":";AAAA,OAAO,+CAA+C,CAAA;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAa,gCAAgC,GAA7C,MAAa,gCAAiC,SAAQ,gBAAgB;IACpE,cAAc;QACZ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,KAAK;oBACP,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;CACF,CAAA;AAVY,gCAAgC;IAD5C,aAAa,CAAC,uCAAuC,CAAC;GAC1C,gCAAgC,CAU5C;SAVY,gCAAgC","sourcesContent":["import '@operato/input/ox-input-scene-component-id.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-property-editor-scene-component-id')\nexport class OxPropertyEditorSceneComponentId extends OxPropertyEditor {\n  editorTemplate() {\n    return html`\n      <ox-input-scene-component-id\n        id=\"editor\"\n        .value=${this.value}\n        .property=${this.property}\n      ></ox-input-scene-component-id>\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-property-editor-scene-component-id.js","sourceRoot":"","sources":["../../src/ox-property-editor-scene-component-id.ts"],"names":[],"mappings":";AAAA,OAAO,+CAA+C,CAAA;AAEtD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAI1D,IAAa,gCAAgC,GAA7C,MAAa,gCAAiC,SAAQ,gBAAgB;IACpE,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA;wDACyC,KAAK,cAAc,IAAI,CAAC,QAAQ;KACnF,CAAA;IACH,CAAC;CACF,CAAA;AANY,gCAAgC;IAD5C,aAAa,CAAC,uCAAuC,CAAC;GAC1C,gCAAgC,CAM5C;SANY,gCAAgC","sourcesContent":["import '@operato/input/ox-input-scene-component-id.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n@customElement('ox-property-editor-scene-component-id')\nexport class OxPropertyEditorSceneComponentId extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec) {\n    return html`\n      <ox-input-scene-component-id id=\"editor\" .value=${value} .property=${spec.property}></ox-input-scene-component-id>\n    `\n  }\n}\n"]}

package/dist/src/ox-property-editor-select.d.ts

@@ -1,14 +1,17 @@
 import '@operato/input/ox-select.js';
 import '@operato/popup/ox-popup-list.js';
+import { LitElement } from 'lit';
 import { OxPropertyEditor } from './ox-property-editor.js';
+import { PropertySpec } from './types.js';
 declare type Option = {
     display: string;
     value: any;
 } | string;
 export declare class OxPropertyEditorSelect extends OxPropertyEditor {
     static styles: import("lit").CSSResult[];
+    oxSelect: LitElement;
     connectedCallback(): Promise<void>;
-    editorTemplate(): import("lit-html").TemplateResult<1>;
+    editorTemplate(value: any, spec: PropertySpec): import("lit-html").TemplateResult<1>;
     _getOptionValue(item: Option): any;
     _getOptionDisplay(item: Option): string;
     _isSelected(value: any, item: Option): boolean;

package/dist/src/ox-property-editor-select.js

@@ -2,8 +2,8 @@ import { __decorate } from "tslib";
 import '@operato/input/ox-select.js';
 import '@operato/popup/ox-popup-list.js';
 import { css, html } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
 import { OxPropertyEditor } from './ox-property-editor.js';
-import { customElement } from 'lit/decorators.js';
 let OxPropertyEditorSelect = class OxPropertyEditorSelect extends OxPropertyEditor {
     async connectedCallback() {
         var _a;
@@ -14,19 +14,22 @@ let OxPropertyEditorSelect = class OxPropertyEditorSelect extends OxPropertyEdit
                 ...this.property,
                 options: await options.apply(this)
             };
+            await this.updateComplete;
+            this.oxSelect.requestUpdate();
         }
     }
-    editorTemplate() {
+    editorTemplate(value, spec) {
         var _a;
-        var options = (_a = this.property) === null || _a === void 0 ? void 0 : _a.options;
+        var options = (_a = spec.property) === null || _a === void 0 ? void 0 : _a.options;
         if (!(options instanceof Array)) {
             options = [];
         }
+        const { fullwidth = false } = spec.editor || {};
         return html `
-      <ox-select id="editor" .value=${this.value} placeholder=${this.placeholder}>
+      <ox-select id="editor" .value=${value} placeholder=${spec.placeholder} ?fullwidth=${fullwidth}>
         <ox-popup-list with-search>
           ${options.map(item => html `
-              <div option value=${this._getOptionValue(item)} ?selected=${this._isSelected(this.value, item)}>
+              <div option value=${this._getOptionValue(item)} ?selected=${this._isSelected(value, item)}>
                 ${this._getOptionDisplay(item) || html `&nbsp;`}
               </div>
             `)}
@@ -59,6 +62,9 @@ OxPropertyEditorSelect.styles = [
       }
     `
 ];
+__decorate([
+    query('ox-select')
+], OxPropertyEditorSelect.prototype, "oxSelect", void 0);
 OxPropertyEditorSelect = __decorate([
     customElement('ox-property-editor-select')
 ], OxPropertyEditorSelect);

package/dist/src/ox-property-editor-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-editor-select.js","sourceRoot":"","sources":["../../src/ox-property-editor-select.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAA;AACpC,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAKjD,IAAa,sBAAsB,GAAnC,MAAa,sBAAuB,SAAQ,gBAAgB;IAa1D,KAAK,CAAC,iBAAiB;;QACrB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,OAAO,GAAG,MAAA,IAAI,CAAC,QAAQ,0CAAE,OAAO,CAAA;QACpC,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE;YACjC,IAAI,CAAC,QAAQ,GAAG;gBACd,GAAG,IAAI,CAAC,QAAQ;gBAChB,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;aACnC,CAAA;SACF;IACH,CAAC;IAED,cAAc;;QACZ,IAAI,OAAO,GAAG,MAAA,IAAI,CAAC,QAAQ,0CAAE,OAAmB,CAAA;QAChD,IAAI,CAAC,CAAC,OAAO,YAAY,KAAK,CAAC,EAAE;YAC/B,OAAO,GAAG,EAAE,CAAA;SACb;QAED,OAAO,IAAI,CAAA;sCACuB,IAAI,CAAC,KAAK,gBAAgB,IAAI,CAAC,WAAW;;YAEpE,OAAO,CAAC,GAAG,CACX,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;kCACU,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC;kBAC1F,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,IAAI,CAAA,QAAQ;;aAEjD,CACF;;;KAGN,CAAA;IACH,CAAC;IAED,eAAe,CAAC,IAAY;QAC1B,IAAI,OAAO,IAAI,IAAI,QAAQ;YAAE,OAAO,IAAI,CAAA;QAExC,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;IAED,iBAAiB,CAAC,IAAY;QAC5B,IAAI,OAAO,IAAI,IAAI,QAAQ;YAAE,OAAO,IAAI,CAAA;QAExC,OAAO,IAAI,CAAC,OAAO,CAAA;IACrB,CAAC;IAED,WAAW,CAAC,KAAU,EAAE,IAAY;QAClC,OAAO,KAAK,KAAK,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;IAC7C,CAAC;CACF,CAAA;AA5DQ,6BAAM,GAAG;IACd,GAAG,gBAAgB,CAAC,MAAM;IAC1B,GAAG,CAAA;;;;;;;KAOF;CACF,CAAA;AAXU,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CA6DlC;SA7DY,sBAAsB","sourcesContent":["import '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\n\nimport { css, html } from 'lit'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { customElement } from 'lit/decorators.js'\n\ntype Option = { display: string; value: any } | string\n\n@customElement('ox-property-editor-select')\nexport class OxPropertyEditorSelect extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    css`\n      ox-select {\n        background-color: var(--theme-white-color);\n        padding: 1px 2px;\n        color: var(--theme-black-color);\n        font-size: 13.5px;\n      }\n    `\n  ]\n\n  async connectedCallback() {\n    super.connectedCallback()\n\n    var options = this.property?.options\n    if (typeof options === 'function') {\n      this.property = {\n        ...this.property,\n        options: await options.apply(this)\n      }\n    }\n  }\n\n  editorTemplate() {\n    var options = this.property?.options as Option[]\n    if (!(options instanceof Array)) {\n      options = []\n    }\n\n    return html`\n      <ox-select id=\"editor\" .value=${this.value} placeholder=${this.placeholder}>\n        <ox-popup-list with-search>\n          ${options.map(\n            item => html`\n              <div option value=${this._getOptionValue(item)} ?selected=${this._isSelected(this.value, item)}>\n                ${this._getOptionDisplay(item) || html`&nbsp;`}\n              </div>\n            `\n          )}\n        </ox-popup-list>\n      </ox-select>\n    `\n  }\n\n  _getOptionValue(item: Option) {\n    if (typeof item == 'string') return item\n\n    return item.value\n  }\n\n  _getOptionDisplay(item: Option) {\n    if (typeof item == 'string') return item\n\n    return item.display\n  }\n\n  _isSelected(value: any, item: Option) {\n    return value === this._getOptionValue(item)\n  }\n}\n"]}
+{"version":3,"file":"ox-property-editor-select.js","sourceRoot":"","sources":["../../src/ox-property-editor-select.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAA;AACpC,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAc,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAM1D,IAAa,sBAAsB,GAAnC,MAAa,sBAAuB,SAAQ,gBAAgB;IAe1D,KAAK,CAAC,iBAAiB;;QACrB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,OAAO,GAAG,MAAA,IAAI,CAAC,QAAQ,0CAAE,OAAO,CAAA;QACpC,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE;YACjC,IAAI,CAAC,QAAQ,GAAG;gBACd,GAAG,IAAI,CAAC,QAAQ;gBAChB,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;aACnC,CAAA;YACD,MAAM,IAAI,CAAC,cAAc,CAAA;YACzB,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAA;SAC9B;IACH,CAAC;IAED,cAAc,CAAC,KAAU,EAAE,IAAkB;;QAC3C,IAAI,OAAO,GAAG,MAAA,IAAI,CAAC,QAAQ,0CAAE,OAAmB,CAAA;QAChD,IAAI,CAAC,CAAC,OAAO,YAAY,KAAK,CAAC,EAAE;YAC/B,OAAO,GAAG,EAAE,CAAA;SACb;QACD,MAAM,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAE/C,OAAO,IAAI,CAAA;sCACuB,KAAK,gBAAgB,IAAI,CAAC,WAAW,eAAe,SAAS;;YAEvF,OAAO,CAAC,GAAG,CACX,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;kCACU,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC;kBACrF,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,IAAI,CAAA,QAAQ;;aAEjD,CACF;;;KAGN,CAAA;IACH,CAAC;IAED,eAAe,CAAC,IAAY;QAC1B,IAAI,OAAO,IAAI,IAAI,QAAQ;YAAE,OAAO,IAAI,CAAA;QAExC,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;IAED,iBAAiB,CAAC,IAAY;QAC5B,IAAI,OAAO,IAAI,IAAI,QAAQ;YAAE,OAAO,IAAI,CAAA;QAExC,OAAO,IAAI,CAAC,OAAO,CAAA;IACrB,CAAC;IAED,WAAW,CAAC,KAAU,EAAE,IAAY;QAClC,OAAO,KAAK,KAAK,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;IAC7C,CAAC;CACF,CAAA;AAjEQ,6BAAM,GAAG;IACd,GAAG,gBAAgB,CAAC,MAAM;IAC1B,GAAG,CAAA;;;;;;;KAOF;CACF,CAAA;AAEmB;IAAnB,KAAK,CAAC,WAAW,CAAC;wDAAsB;AAb9B,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CAkElC;SAlEY,sBAAsB","sourcesContent":["import '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\ntype Option = { display: string; value: any } | string\n\n@customElement('ox-property-editor-select')\nexport class OxPropertyEditorSelect extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    css`\n      ox-select {\n        background-color: var(--theme-white-color);\n        padding: 1px 2px;\n        color: var(--theme-black-color);\n        font-size: 13.5px;\n      }\n    `\n  ]\n\n  @query('ox-select') oxSelect!: LitElement\n\n  async connectedCallback() {\n    super.connectedCallback()\n\n    var options = this.property?.options\n    if (typeof options === 'function') {\n      this.property = {\n        ...this.property,\n        options: await options.apply(this)\n      }\n      await this.updateComplete\n      this.oxSelect.requestUpdate()\n    }\n  }\n\n  editorTemplate(value: any, spec: PropertySpec) {\n    var options = spec.property?.options as Option[]\n    if (!(options instanceof Array)) {\n      options = []\n    }\n    const { fullwidth = false } = spec.editor || {}\n\n    return html`\n      <ox-select id=\"editor\" .value=${value} placeholder=${spec.placeholder} ?fullwidth=${fullwidth}>\n        <ox-popup-list with-search>\n          ${options.map(\n            item => html`\n              <div option value=${this._getOptionValue(item)} ?selected=${this._isSelected(value, item)}>\n                ${this._getOptionDisplay(item) || html`&nbsp;`}\n              </div>\n            `\n          )}\n        </ox-popup-list>\n      </ox-select>\n    `\n  }\n\n  _getOptionValue(item: Option) {\n    if (typeof item == 'string') return item\n\n    return item.value\n  }\n\n  _getOptionDisplay(item: Option) {\n    if (typeof item == 'string') return item\n\n    return item.display\n  }\n\n  _isSelected(value: any, item: Option) {\n    return value === this._getOptionValue(item)\n  }\n}\n"]}

package/dist/src/ox-property-editor-solid-colorstops.d.ts

@@ -1,5 +1,6 @@
 import '@operato/input/ox-input-color-stops.js';
 import { OxPropertyEditor } from './ox-property-editor.js';
+import { PropertySpec } from './types.js';
 export declare class OxPropertyEditorSolidColorStops extends OxPropertyEditor {
-    editorTemplate(): import("lit-html").TemplateResult<1>;
+    editorTemplate(value: any, spec: PropertySpec): import("lit-html").TemplateResult<1>;
 }

package/dist/src/ox-property-editor-solid-colorstops.js

@@ -1,18 +1,19 @@
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-color-stops.js';
-import { OxPropertyEditor } from './ox-property-editor.js';
-import { customElement } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { OxPropertyEditor } from './ox-property-editor.js';
 let OxPropertyEditorSolidColorStops = class OxPropertyEditorSolidColorStops extends OxPropertyEditor {
-    editorTemplate() {
+    editorTemplate(value, spec) {
+        const { fullwidth = true } = spec.editor || {};
         return html `
       <ox-input-color-stops
         id="editor"
         type="solid"
-        .value=${this.value}
-        .min=${this.property && this.property.min}
-        .max=${this.property && this.property.max}
-        fullwidth
+        .value=${value}
+        .min=${spec.property && spec.property.min}
+        .max=${spec.property && spec.property.max}
+        ?fullwidth=${fullwidth}
       >
       </ox-input-color-stops>
     `;

package/dist/src/ox-property-editor-solid-colorstops.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-editor-solid-colorstops.js","sourceRoot":"","sources":["../../src/ox-property-editor-solid-colorstops.ts"],"names":[],"mappings":";AAAA,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAa,+BAA+B,GAA5C,MAAa,+BAAgC,SAAQ,gBAAgB;IACnE,cAAc;QACZ,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK;eACZ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG;eAClC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG;;;;KAI5C,CAAA;IACH,CAAC;CACF,CAAA;AAdY,+BAA+B;IAD3C,aAAa,CAAC,qCAAqC,CAAC;GACxC,+BAA+B,CAc3C;SAdY,+BAA+B","sourcesContent":["import '@operato/input/ox-input-color-stops.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-property-editor-solid-colorstops')\nexport class OxPropertyEditorSolidColorStops extends OxPropertyEditor {\n  editorTemplate() {\n    return html`\n      <ox-input-color-stops\n        id=\"editor\"\n        type=\"solid\"\n        .value=${this.value}\n        .min=${this.property && this.property.min}\n        .max=${this.property && this.property.max}\n        fullwidth\n      >\n      </ox-input-color-stops>\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-property-editor-solid-colorstops.js","sourceRoot":"","sources":["../../src/ox-property-editor-solid-colorstops.ts"],"names":[],"mappings":";AAAA,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAI1D,IAAa,+BAA+B,GAA5C,MAAa,+BAAgC,SAAQ,gBAAgB;IACnE,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAE9C,OAAO,IAAI,CAAA;;;;iBAIE,KAAK;eACP,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG;eAClC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG;qBAC5B,SAAS;;;KAGzB,CAAA;IACH,CAAC;CACF,CAAA;AAhBY,+BAA+B;IAD3C,aAAa,CAAC,qCAAqC,CAAC;GACxC,+BAA+B,CAgB3C;SAhBY,+BAA+B","sourcesContent":["import '@operato/input/ox-input-color-stops.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n@customElement('ox-property-editor-solid-colorstops')\nexport class OxPropertyEditorSolidColorStops extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec) {\n    const { fullwidth = true } = spec.editor || {}\n\n    return html`\n      <ox-input-color-stops\n        id=\"editor\"\n        type=\"solid\"\n        .value=${value}\n        .min=${spec.property && spec.property.min}\n        .max=${spec.property && spec.property.max}\n        ?fullwidth=${fullwidth}\n      >\n      </ox-input-color-stops>\n    `\n  }\n}\n"]}

package/dist/src/ox-property-editor-string.d.ts

@@ -1,4 +1,5 @@
 import { OxPropertyEditor } from './ox-property-editor.js';
+import { PropertySpec } from './types.js';
 export declare class OxPropertyEditorString extends OxPropertyEditor {
-    editorTemplate(): import("lit-html").TemplateResult<1>;
+    editorTemplate(value: any, spec: PropertySpec): import("lit-html").TemplateResult<1>;
 }

package/dist/src/ox-property-editor-string.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
-import { OxPropertyEditor } from './ox-property-editor.js';
-import { customElement } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { OxPropertyEditor } from './ox-property-editor.js';
 let OxPropertyEditorString = class OxPropertyEditorString extends OxPropertyEditor {
-    editorTemplate() {
-        return html ` <input type="text" id="editor" .value=${this.value || ''} placeholder=${this.placeholder || ''} /> `;
+    editorTemplate(value, spec) {
+        return html ` <input type="text" id="editor" .value=${value || ''} placeholder=${spec.placeholder || ''} /> `;
     }
 };
 OxPropertyEditorString = __decorate([

package/dist/src/ox-property-editor-string.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-editor-string.js","sourceRoot":"","sources":["../../src/ox-property-editor-string.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAa,sBAAsB,GAAnC,MAAa,sBAAuB,SAAQ,gBAAgB;IAC1D,cAAc;QACZ,OAAO,IAAI,CAAA,0CAA0C,IAAI,CAAC,KAAK,IAAI,EAAE,gBAAgB,IAAI,CAAC,WAAW,IAAI,EAAE,MAAM,CAAA;IACnH,CAAC;CACF,CAAA;AAJY,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CAIlC;SAJY,sBAAsB","sourcesContent":["import { OxPropertyEditor } from './ox-property-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-property-editor-string')\nexport class OxPropertyEditorString extends OxPropertyEditor {\n  editorTemplate() {\n    return html` <input type=\"text\" id=\"editor\" .value=${this.value || ''} placeholder=${this.placeholder || ''} /> `\n  }\n}\n"]}
+{"version":3,"file":"ox-property-editor-string.js","sourceRoot":"","sources":["../../src/ox-property-editor-string.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAI1D,IAAa,sBAAsB,GAAnC,MAAa,sBAAuB,SAAQ,gBAAgB;IAC1D,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA,0CAA0C,KAAK,IAAI,EAAE,gBAAgB,IAAI,CAAC,WAAW,IAAI,EAAE,MAAM,CAAA;IAC9G,CAAC;CACF,CAAA;AAJY,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CAIlC;SAJY,sBAAsB","sourcesContent":["import { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n@customElement('ox-property-editor-string')\nexport class OxPropertyEditorString extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec) {\n    return html` <input type=\"text\" id=\"editor\" .value=${value || ''} placeholder=${spec.placeholder || ''} /> `\n  }\n}\n"]}

package/dist/src/ox-property-editor-table.d.ts

@@ -1,5 +1,6 @@
 import '@operato/input/ox-input-table.js';
 import { OxPropertyEditor } from './ox-property-editor.js';
+import { PropertySpec } from './types.js';
 export declare class OxPropertyEditorString extends OxPropertyEditor {
-    editorTemplate(): import("lit-html").TemplateResult<1>;
+    editorTemplate(value: any, spec: PropertySpec): import("lit-html").TemplateResult<1>;
 }

package/dist/src/ox-property-editor-table.js

@@ -1,11 +1,12 @@
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-table.js';
-import { OxPropertyEditor } from './ox-property-editor.js';
-import { customElement } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { OxPropertyEditor } from './ox-property-editor.js';
 let OxPropertyEditorString = class OxPropertyEditorString extends OxPropertyEditor {
-    editorTemplate() {
-        return html ` <ox-input-table id="editor" .property=${this.property} fullwidth></ox-input-table> `;
+    editorTemplate(value, spec) {
+        const { fullwidth = true } = spec.editor || {};
+        return html ` <ox-input-table id="editor" .property=${spec.property} ?fullwidth=${fullwidth}></ox-input-table> `;
     }
 };
 OxPropertyEditorString = __decorate([

package/dist/src/ox-property-editor-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-editor-table.js","sourceRoot":"","sources":["../../src/ox-property-editor-table.ts"],"names":[],"mappings":";AAAA,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAa,sBAAsB,GAAnC,MAAa,sBAAuB,SAAQ,gBAAgB;IAC1D,cAAc;QACZ,OAAO,IAAI,CAAA,0CAA0C,IAAI,CAAC,QAAQ,+BAA+B,CAAA;IACnG,CAAC;CACF,CAAA;AAJY,sBAAsB;IADlC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,sBAAsB,CAIlC;SAJY,sBAAsB","sourcesContent":["import '@operato/input/ox-input-table.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-property-editor-table')\nexport class OxPropertyEditorString extends OxPropertyEditor {\n  editorTemplate() {\n    return html` <ox-input-table id=\"editor\" .property=${this.property} fullwidth></ox-input-table> `\n  }\n}\n"]}
+{"version":3,"file":"ox-property-editor-table.js","sourceRoot":"","sources":["../../src/ox-property-editor-table.ts"],"names":[],"mappings":";AAAA,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAI1D,IAAa,sBAAsB,GAAnC,MAAa,sBAAuB,SAAQ,gBAAgB;IAC1D,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAE9C,OAAO,IAAI,CAAA,0CAA0C,IAAI,CAAC,QAAQ,eAAe,SAAS,qBAAqB,CAAA;IACjH,CAAC;CACF,CAAA;AANY,sBAAsB;IADlC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,sBAAsB,CAMlC;SANY,sBAAsB","sourcesContent":["import '@operato/input/ox-input-table.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n@customElement('ox-property-editor-table')\nexport class OxPropertyEditorString extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec) {\n    const { fullwidth = true } = spec.editor || {}\n\n    return html` <ox-input-table id=\"editor\" .property=${spec.property} ?fullwidth=${fullwidth}></ox-input-table> `\n  }\n}\n"]}

package/dist/src/ox-property-editor-textarea.d.ts

@@ -1,5 +1,6 @@
 import '@operato/input/ox-input-code.js';
 import { OxPropertyEditor } from './ox-property-editor.js';
+import { PropertySpec } from './types.js';
 export declare class OxPropertyEditorTextArea extends OxPropertyEditor {
-    editorTemplate(): import("lit-html").TemplateResult<1>;
+    editorTemplate(value: any, spec: PropertySpec): import("lit-html").TemplateResult<1>;
 }

package/dist/src/ox-property-editor-textarea.js

@@ -1,19 +1,20 @@
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-code.js';
-import { OxPropertyEditor } from './ox-property-editor.js';
-import { customElement } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { OxPropertyEditor } from './ox-property-editor.js';
 let OxPropertyEditorTextArea = class OxPropertyEditorTextArea extends OxPropertyEditor {
-    editorTemplate() {
+    editorTemplate(value, spec) {
         var _a, _b, _c;
+        const { fullwidth = true } = spec.editor || {};
         return html `
       <ox-input-code
         id="editor"
-        .value=${this.value}
-        mode=${((_a = this.property) === null || _a === void 0 ? void 0 : _a.mode) || ''}
-        tab-size=${((_b = this.property) === null || _b === void 0 ? void 0 : _b.tabSize) || ''}
-        tab-as-space=${((_c = this.property) === null || _c === void 0 ? void 0 : _c.tabAsSpace) || 'false'}
-        fullwidth
+        .value=${value}
+        mode=${((_a = spec.property) === null || _a === void 0 ? void 0 : _a.mode) || ''}
+        tab-size=${((_b = spec.property) === null || _b === void 0 ? void 0 : _b.tabSize) || ''}
+        tab-as-space=${((_c = spec.property) === null || _c === void 0 ? void 0 : _c.tabAsSpace) || 'false'}
+        ?fullwidth=${fullwidth}
       >
       </ox-input-code>
     `;

package/dist/src/ox-property-editor-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-editor-textarea.js","sourceRoot":"","sources":["../../src/ox-property-editor-textarea.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAa,wBAAwB,GAArC,MAAa,wBAAyB,SAAQ,gBAAgB;IAC5D,cAAc;;QACZ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,KAAK;eACZ,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,KAAI,EAAE;mBACrB,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,OAAO,KAAI,EAAE;uBACxB,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,UAAU,KAAI,OAAO;;;;KAItD,CAAA;IACH,CAAC;CACF,CAAA;AAdY,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAcpC;SAdY,wBAAwB","sourcesContent":["import '@operato/input/ox-input-code.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-property-editor-textarea')\nexport class OxPropertyEditorTextArea extends OxPropertyEditor {\n  editorTemplate() {\n    return html`\n      <ox-input-code\n        id=\"editor\"\n        .value=${this.value}\n        mode=${this.property?.mode || ''}\n        tab-size=${this.property?.tabSize || ''}\n        tab-as-space=${this.property?.tabAsSpace || 'false'}\n        fullwidth\n      >\n      </ox-input-code>\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-property-editor-textarea.js","sourceRoot":"","sources":["../../src/ox-property-editor-textarea.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAI1D,IAAa,wBAAwB,GAArC,MAAa,wBAAyB,SAAQ,gBAAgB;IAC5D,cAAc,CAAC,KAAU,EAAE,IAAkB;;QAC3C,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAE9C,OAAO,IAAI,CAAA;;;iBAGE,KAAK;eACP,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,KAAI,EAAE;mBACrB,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,OAAO,KAAI,EAAE;uBACxB,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,UAAU,KAAI,OAAO;qBACtC,SAAS;;;KAGzB,CAAA;IACH,CAAC;CACF,CAAA;AAhBY,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAgBpC;SAhBY,wBAAwB","sourcesContent":["import '@operato/input/ox-input-code.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n@customElement('ox-property-editor-textarea')\nexport class OxPropertyEditorTextArea extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec) {\n    const { fullwidth = true } = spec.editor || {}\n\n    return html`\n      <ox-input-code\n        id=\"editor\"\n        .value=${value}\n        mode=${spec.property?.mode || ''}\n        tab-size=${spec.property?.tabSize || ''}\n        tab-as-space=${spec.property?.tabAsSpace || 'false'}\n        ?fullwidth=${fullwidth}\n      >\n      </ox-input-code>\n    `\n  }\n}\n"]}

package/dist/src/ox-property-editor-value-map.d.ts

@@ -1,5 +1,6 @@
 import '@operato/input/ox-input-value-map.js';
 import { OxPropertyEditor } from './ox-property-editor.js';
+import { PropertySpec } from './types.js';
 export declare class OxPropertyEditorValueMap extends OxPropertyEditor {
-    editorTemplate(): import("lit-html").TemplateResult<1>;
+    editorTemplate(value: any, spec: PropertySpec): import("lit-html").TemplateResult<1>;
 }

package/dist/src/ox-property-editor-value-map.js

@@ -1,15 +1,21 @@
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-value-map.js';
-import { OxPropertyEditor } from './ox-property-editor.js';
-import { customElement } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { OxPropertyEditor } from './ox-property-editor.js';
 let OxPropertyEditorValueMap = class OxPropertyEditorValueMap extends OxPropertyEditor {
-    editorTemplate() {
-        const { value, property } = this;
+    editorTemplate(value, spec) {
+        const { property } = spec;
         const valuetype = (property === null || property === void 0 ? void 0 : property.valuetype) || 'string';
         /* IMPLEMENT-ME valuetype 에 editor를 전달할 수 있는 기능 개발 */
+        const { fullwidth = true } = spec.editor || {};
         return html `
-      <ox-input-value-map id="editor" .valuetype=${valuetype} .value=${value} fullwidth></ox-input-value-map>
+      <ox-input-value-map
+        id="editor"
+        .valuetype=${valuetype}
+        .value=${value}
+        ?fullwidth=${fullwidth}
+      ></ox-input-value-map>
     `;
     }
 };

package/dist/src/ox-property-editor-value-map.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-editor-value-map.js","sourceRoot":"","sources":["../../src/ox-property-editor-value-map.ts"],"names":[],"mappings":";AAAA,OAAO,sCAAsC,CAAA;AAE7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAa,wBAAwB,GAArC,MAAa,wBAAyB,SAAQ,gBAAgB;IAC5D,cAAc;QACZ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAChC,MAAM,SAAS,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,KAAI,QAAQ,CAAA;QACjD,qDAAqD;QAErD,OAAO,IAAI,CAAA;mDACoC,SAAS,WAAW,KAAK;KACvE,CAAA;IACH,CAAC;CACF,CAAA;AAVY,wBAAwB;IADpC,aAAa,CAAC,8BAA8B,CAAC;GACjC,wBAAwB,CAUpC;SAVY,wBAAwB","sourcesContent":["import '@operato/input/ox-input-value-map.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-property-editor-value-map')\nexport class OxPropertyEditorValueMap extends OxPropertyEditor {\n  editorTemplate() {\n    const { value, property } = this\n    const valuetype = property?.valuetype || 'string'\n    /* IMPLEMENT-ME valuetype 에 editor를 전달할 수 있는 기능 개발 */\n\n    return html`\n      <ox-input-value-map id=\"editor\" .valuetype=${valuetype} .value=${value} fullwidth></ox-input-value-map>\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-property-editor-value-map.js","sourceRoot":"","sources":["../../src/ox-property-editor-value-map.ts"],"names":[],"mappings":";AAAA,OAAO,sCAAsC,CAAA;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAI1D,IAAa,wBAAwB,GAArC,MAAa,wBAAyB,SAAQ,gBAAgB;IAC5D,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QACzB,MAAM,SAAS,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,KAAI,QAAQ,CAAA;QACjD,qDAAqD;QACrD,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAE9C,OAAO,IAAI,CAAA;;;qBAGM,SAAS;iBACb,KAAK;qBACD,SAAS;;KAEzB,CAAA;IACH,CAAC;CACF,CAAA;AAhBY,wBAAwB;IADpC,aAAa,CAAC,8BAA8B,CAAC;GACjC,wBAAwB,CAgBpC;SAhBY,wBAAwB","sourcesContent":["import '@operato/input/ox-input-value-map.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n@customElement('ox-property-editor-value-map')\nexport class OxPropertyEditorValueMap extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec) {\n    const { property } = spec\n    const valuetype = property?.valuetype || 'string'\n    /* IMPLEMENT-ME valuetype 에 editor를 전달할 수 있는 기능 개발 */\n    const { fullwidth = true } = spec.editor || {}\n\n    return html`\n      <ox-input-value-map\n        id=\"editor\"\n        .valuetype=${valuetype}\n        .value=${value}\n        ?fullwidth=${fullwidth}\n      ></ox-input-value-map>\n    `\n  }\n}\n"]}

package/dist/src/ox-property-editor-value-ranges.d.ts

@@ -1,5 +1,6 @@
 import '@operato/input/ox-input-value-ranges.js';
 import { OxPropertyEditor } from './ox-property-editor.js';
+import { PropertySpec } from './types.js';
 export declare class OxPropertyEditorValueRanges extends OxPropertyEditor {
-    editorTemplate(): import("lit-html").TemplateResult<1>;
+    editorTemplate(value: any, spec: PropertySpec): import("lit-html").TemplateResult<1>;
 }

package/dist/src/ox-property-editor-value-ranges.js

@@ -4,12 +4,18 @@ import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { OxPropertyEditor } from './ox-property-editor.js';
 let OxPropertyEditorValueRanges = class OxPropertyEditorValueRanges extends OxPropertyEditor {
-    editorTemplate() {
-        const { value, property } = this;
+    editorTemplate(value, spec) {
+        const { property } = spec;
         const valuetype = (property === null || property === void 0 ? void 0 : property.valuetype) || 'string';
         /* IMPLEMENT-ME valuetype 에 editor를 전달할 수 있는 기능 개발 */
+        const { fullwidth = true } = spec.editor || {};
         return html `
-      <ox-input-value-ranges id="editor" .valuetype=${valuetype} .value=${value} fullwidth></ox-input-value-ranges>
+      <ox-input-value-ranges
+        id="editor"
+        .valuetype=${valuetype}
+        .value=${value}
+        ?fullwidth=${fullwidth}
+      ></ox-input-value-ranges>
     `;
     }
 };

package/dist/src/ox-property-editor-value-ranges.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-editor-value-ranges.js","sourceRoot":"","sources":["../../src/ox-property-editor-value-ranges.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAG1D,IAAa,2BAA2B,GAAxC,MAAa,2BAA4B,SAAQ,gBAAgB;IAC/D,cAAc;QACZ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAChC,MAAM,SAAS,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,KAAI,QAAQ,CAAA;QACjD,qDAAqD;QAErD,OAAO,IAAI,CAAA;sDACuC,SAAS,WAAW,KAAK;KAC1E,CAAA;IACH,CAAC;CACF,CAAA;AAVY,2BAA2B;IADvC,aAAa,CAAC,iCAAiC,CAAC;GACpC,2BAA2B,CAUvC;SAVY,2BAA2B","sourcesContent":["import '@operato/input/ox-input-value-ranges.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\n\n@customElement('ox-property-editor-value-ranges')\nexport class OxPropertyEditorValueRanges extends OxPropertyEditor {\n  editorTemplate() {\n    const { value, property } = this\n    const valuetype = property?.valuetype || 'string'\n    /* IMPLEMENT-ME valuetype 에 editor를 전달할 수 있는 기능 개발 */\n\n    return html`\n      <ox-input-value-ranges id=\"editor\" .valuetype=${valuetype} .value=${value} fullwidth></ox-input-value-ranges>\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-property-editor-value-ranges.js","sourceRoot":"","sources":["../../src/ox-property-editor-value-ranges.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAI1D,IAAa,2BAA2B,GAAxC,MAAa,2BAA4B,SAAQ,gBAAgB;IAC/D,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QACzB,MAAM,SAAS,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,KAAI,QAAQ,CAAA;QACjD,qDAAqD;QACrD,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAE9C,OAAO,IAAI,CAAA;;;qBAGM,SAAS;iBACb,KAAK;qBACD,SAAS;;KAEzB,CAAA;IACH,CAAC;CACF,CAAA;AAhBY,2BAA2B;IADvC,aAAa,CAAC,iCAAiC,CAAC;GACpC,2BAA2B,CAgBvC;SAhBY,2BAA2B","sourcesContent":["import '@operato/input/ox-input-value-ranges.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n@customElement('ox-property-editor-value-ranges')\nexport class OxPropertyEditorValueRanges extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec) {\n    const { property } = spec\n    const valuetype = property?.valuetype || 'string'\n    /* IMPLEMENT-ME valuetype 에 editor를 전달할 수 있는 기능 개발 */\n    const { fullwidth = true } = spec.editor || {}\n\n    return html`\n      <ox-input-value-ranges\n        id=\"editor\"\n        .valuetype=${valuetype}\n        .value=${value}\n        ?fullwidth=${fullwidth}\n      ></ox-input-value-ranges>\n    `\n  }\n}\n"]}

package/dist/src/ox-property-editor-work-shift.d.ts

@@ -1,5 +1,6 @@
 import '@operato/input/ox-input-work-shift.js';
 import { OxPropertyEditor } from './ox-property-editor.js';
-export declare class OxPropertyEditorValueRanges extends OxPropertyEditor {
-    editorTemplate(): import("lit-html").TemplateResult<1>;
+import { PropertySpec } from './types.js';
+export declare class OxPropertyEditorWorkShift extends OxPropertyEditor {
+    editorTemplate(value: any, spec: PropertySpec): import("lit-html").TemplateResult<1>;
 }

package/dist/src/ox-property-editor-work-shift.js

@@ -3,14 +3,15 @@ import '@operato/input/ox-input-work-shift.js';
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { OxPropertyEditor } from './ox-property-editor.js';
-let OxPropertyEditorValueRanges = class OxPropertyEditorValueRanges extends OxPropertyEditor {
-    editorTemplate() {
-        const { value } = this;
-        return html ` <ox-input-work-shift id="editor" .value=${value} fullwidth></ox-input-work-shift> `;
+let OxPropertyEditorWorkShift = class OxPropertyEditorWorkShift extends OxPropertyEditor {
+    editorTemplate(value, spec) {
+        const { editor } = spec;
+        const { fullwidth = true } = editor || {};
+        return html ` <ox-input-work-shift id="editor" .value=${value} ?fullwidth=${fullwidth}></ox-input-work-shift> `;
     }
 };
-OxPropertyEditorValueRanges = __decorate([
+OxPropertyEditorWorkShift = __decorate([
     customElement('ox-property-editor-work-shift')
-], OxPropertyEditorValueRanges);
-export { OxPropertyEditorValueRanges };
+], OxPropertyEditorWorkShift);
+export { OxPropertyEditorWorkShift };
 //# sourceMappingURL=ox-property-editor-work-shift.js.map

package/dist/src/ox-property-editor-work-shift.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-editor-work-shift.js","sourceRoot":"","sources":["../../src/ox-property-editor-work-shift.ts"],"names":[],"mappings":";AAAA,OAAO,uCAAuC,CAAA;AAE9C,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAG1D,IAAa,2BAA2B,GAAxC,MAAa,2BAA4B,SAAQ,gBAAgB;IAC/D,cAAc;QACZ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;QAEtB,OAAO,IAAI,CAAA,4CAA4C,KAAK,oCAAoC,CAAA;IAClG,CAAC;CACF,CAAA;AANY,2BAA2B;IADvC,aAAa,CAAC,+BAA+B,CAAC;GAClC,2BAA2B,CAMvC;SANY,2BAA2B","sourcesContent":["import '@operato/input/ox-input-work-shift.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\n\n@customElement('ox-property-editor-work-shift')\nexport class OxPropertyEditorValueRanges extends OxPropertyEditor {\n  editorTemplate() {\n    const { value } = this\n\n    return html` <ox-input-work-shift id=\"editor\" .value=${value} fullwidth></ox-input-work-shift> `\n  }\n}\n"]}
+{"version":3,"file":"ox-property-editor-work-shift.js","sourceRoot":"","sources":["../../src/ox-property-editor-work-shift.ts"],"names":[],"mappings":";AAAA,OAAO,uCAAuC,CAAA;AAE9C,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAI1D,IAAa,yBAAyB,GAAtC,MAAa,yBAA0B,SAAQ,gBAAgB;IAC7D,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;QACvB,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,MAAM,IAAI,EAAE,CAAA;QAEzC,OAAO,IAAI,CAAA,4CAA4C,KAAK,eAAe,SAAS,0BAA0B,CAAA;IAChH,CAAC;CACF,CAAA;AAPY,yBAAyB;IADrC,aAAa,CAAC,+BAA+B,CAAC;GAClC,yBAAyB,CAOrC;SAPY,yBAAyB","sourcesContent":["import '@operato/input/ox-input-work-shift.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n@customElement('ox-property-editor-work-shift')\nexport class OxPropertyEditorWorkShift extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec) {\n    const { editor } = spec\n    const { fullwidth = true } = editor || {}\n\n    return html` <ox-input-work-shift id=\"editor\" .value=${value} ?fullwidth=${fullwidth}></ox-input-work-shift> `\n  }\n}\n"]}

package/dist/src/ox-property-editor.d.ts

@@ -1,5 +1,6 @@
 import '@operato/i18n/ox-i18n.js';
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
+import { EditorProperty, PropertySpec } from './types';
 export declare class OxPropertyEditor extends LitElement {
     static registry: {
         [type: string]: string;
@@ -11,16 +12,17 @@ export declare class OxPropertyEditor extends LitElement {
     static styles: import("lit").CSSResult[];
     value: any;
     type: string;
+    name: string;
     label: string;
     placeholder?: string;
-    property: any;
+    property?: any;
+    editor?: EditorProperty;
     host: any;
+    quantifier?: [min: number, max: number];
     observe?: (value: any) => void;
     connectedCallback(): void;
-    editorTemplate(props: {
-        [key: string]: any;
-    }): import("lit-html").TemplateResult<1>;
-    render(): import("lit-html").TemplateResult<1>;
+    editorTemplate(value: any, spec: PropertySpec): TemplateResult<1>;
+    render(): TemplateResult<1>;
     __by_me: boolean;
     shouldUpdate(changedProperties: any): boolean;
     get valueProperty(): string;

package/dist/src/ox-property-editor.js

@@ -6,6 +6,7 @@ import deepClone from 'lodash-es/cloneDeep';
 export class OxPropertyEditor extends LitElement {
     constructor() {
         super(...arguments);
+        this.quantifier = [1, 1];
         this.__by_me = false;
     }
     static register(types) {
@@ -20,12 +21,23 @@ export class OxPropertyEditor extends LitElement {
         super.connectedCallback();
         this.renderRoot.addEventListener('change', this._valueChanged.bind(this));
     }
-    editorTemplate(props) {
+    editorTemplate(value, spec) {
         return html ``;
     }
     render() {
+        var _a;
+        const { value, quantifier } = this;
+        const [min = 1, max = 1] = quantifier || [1, 1];
         return html `
-      ${this.editorTemplate(this)}
+      ${max <= 1
+            ? this.editorTemplate(value, this)
+            : html `
+            <div ?fullwidth=${(_a = this.editor) === null || _a === void 0 ? void 0 : _a.fullwidth}>
+              ${new Array(max)
+                .fill('')
+                .map((_, idx) => html ` <div editor data-index=${idx}>${this.editorTemplate(value === null || value === void 0 ? void 0 : value[idx], this)}</div> `)}
+            </div>
+          `}
       ${this.label
             ? html `
             <label for="editor">
@@ -58,8 +70,20 @@ export class OxPropertyEditor extends LitElement {
         return 'label.' + label;
     }
     _valueChanged(e) {
+        var _a;
         e.stopPropagation();
-        this.value = this.makeup(e.target[this.valueProperty]);
+        const editor = e.target;
+        const [min = 1, max = 1] = this.quantifier || [];
+        const value = this.makeup(editor[this.valueProperty]);
+        if (max > 1) {
+            const index = Number((_a = editor.closest('[data-index]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-index'));
+            var array = this.value instanceof Array ? [...this.value] : [];
+            array[index] = value;
+            this.value = array;
+        }
+        else {
+            this.value = value;
+        }
         this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
         if (!this.observe)
             return;
@@ -75,6 +99,7 @@ OxPropertyEditor.styles = [
         display: grid;
         grid-template-columns: repeat(10, 1fr);
         grid-gap: 5px;
+        grid-auto-rows: minmax(24px, auto);
 
         align-items: center;
 
@@ -110,10 +135,9 @@ OxPropertyEditor.styles = [
         text-align: left;
       }
 
-      :host > select,
-      :host > ox-select,
-      :host > input[type='text'],
-      :host > input[type='number'] {
+      select,
+      ox-select,
+      input:not([type='checkbox']) {
         border: 1px solid rgba(0, 0, 0, 0.2);
       }
 
@@ -138,6 +162,26 @@ OxPropertyEditor.styles = [
         justify-self: end;
         align-self: center;
       }
+
+      ox-input-code,
+      ox-input-data {
+        height: 300px;
+      }
+
+      :host > div {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+      }
+
+      div[data-index] {
+        display: flex;
+        min-height: 24px;
+      }
+
+      div[data-index] > * {
+        flex: 1;
+      }
     `
 ];
 __decorate([
@@ -146,6 +190,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], OxPropertyEditor.prototype, "type", void 0);
+__decorate([
+    property({ type: String, attribute: true, reflect: true })
+], OxPropertyEditor.prototype, "name", void 0);
 __decorate([
     property({ type: String })
 ], OxPropertyEditor.prototype, "label", void 0);
@@ -155,9 +202,15 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], OxPropertyEditor.prototype, "property", void 0);
+__decorate([
+    property({ type: Object })
+], OxPropertyEditor.prototype, "editor", void 0);
 __decorate([
     property({ type: Object })
 ], OxPropertyEditor.prototype, "host", void 0);
+__decorate([
+    property({ type: Array })
+], OxPropertyEditor.prototype, "quantifier", void 0);
 __decorate([
     property({ type: Object })
 ], OxPropertyEditor.prototype, "observe", void 0);

package/dist/src/ox-property-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-editor.js","sourceRoot":"","sources":["../../src/ox-property-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport deepClone from 'lodash-es/cloneDeep'\n\nexport class OxPropertyEditor extends LitElement {\n  static registry: { [type: string]: string } = {}\n\n  public static register(types: { [type: string]: string }) {\n    Object.keys(types).forEach(type => {\n      OxPropertyEditor.registry[type] = types[type]\n    })\n  }\n\n  public static getEditor(type: string): string {\n    return OxPropertyEditor.registry[type]\n  }\n\n  static styles = [\n    css`\n      :host {\n        margin: 5px;\n\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 5px;\n\n        align-items: center;\n\n        color: var(--property-sidebar-fieldset-legend-color);\n      }\n\n      :host > * {\n        box-sizing: border-box;\n\n        grid-column: span 7;\n        order: 2;\n\n        align-self: stretch;\n      }\n\n      :host > label {\n        grid-column: span 3;\n        order: 1;\n\n        text-align: right;\n\n        font: var(--label-font);\n        text-transform: capitalize;\n\n        align-self: center;\n      }\n\n      :host > input[type='checkbox'] ~ label,\n      :host > ox-checkbox ~ label {\n        grid-column: span 6;\n        order: 2;\n\n        text-align: left;\n      }\n\n      :host > select,\n      :host > ox-select,\n      :host > input[type='text'],\n      :host > input[type='number'] {\n        border: 1px solid rgba(0, 0, 0, 0.2);\n      }\n\n      :host > legend {\n        grid-column: 1 / -1;\n\n        display: inline-block;\n\n        text-align: left;\n        text-transform: capitalize;\n      }\n\n      :host > [fullwidth] {\n        grid-column: 1 / -1;\n      }\n\n      :host > input[type='checkbox'],\n      :host > ox-checkbox {\n        grid-column: span 4;\n        order: 1;\n\n        justify-self: end;\n        align-self: center;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: String }) type!: string\n  @property({ type: String }) label!: string\n  @property({ type: String }) placeholder?: string\n  @property({ type: Object }) property: any\n  @property({ type: Object }) host: any\n  @property({ type: Object }) observe?: (value: any) => void\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.renderRoot.addEventListener('change', this._valueChanged.bind(this))\n  }\n\n  editorTemplate(props: { [key: string]: any }) {\n    return html``\n  }\n\n  render() {\n    return html`\n      ${this.editorTemplate(this)}\n      ${this.label\n        ? html`\n            <label for=\"editor\">\n              <ox-i18n msgid=${this._computeLabelId(this.label)}>${this.label}</ox-i18n>\n            </label>\n          `\n        : html``}\n    `\n  }\n\n  @state() __by_me = false\n\n  shouldUpdate(changedProperties: any) {\n    if (this.__by_me) {\n      return false\n    }\n\n    if (changedProperties.has('value')) {\n      this.__by_me = true\n      this.value = deepClone(this.value)\n      this.__by_me = false\n    }\n\n    return true\n  }\n\n  get valueProperty() {\n    return 'value'\n  }\n\n  makeup(v: any) {\n    return deepClone(v)\n  }\n\n  _computeLabelId(label: string) {\n    if (label.indexOf('label.') >= 0) return label\n\n    return 'label.' + label\n  }\n\n  _valueChanged(e: Event) {\n    e.stopPropagation()\n\n    this.value = this.makeup((e.target as any)[this.valueProperty])\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n    if (!this.observe) return\n    this.observe.call(this, this.value)\n  }\n}\n"]}
+{"version":3,"file":"ox-property-editor.js","sourceRoot":"","sources":["../../src/ox-property-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport deepClone from 'lodash-es/cloneDeep'\n\nimport { EditorProperty, PropertySpec } from './types'\n\nexport class OxPropertyEditor extends LitElement {\n  static registry: { [type: string]: string } = {}\n\n  public static register(types: { [type: string]: string }) {\n    Object.keys(types).forEach(type => {\n      OxPropertyEditor.registry[type] = types[type]\n    })\n  }\n\n  public static getEditor(type: string): string {\n    return OxPropertyEditor.registry[type]\n  }\n\n  static styles = [\n    css`\n      :host {\n        margin: 5px;\n\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 5px;\n        grid-auto-rows: minmax(24px, auto);\n\n        align-items: center;\n\n        color: var(--property-sidebar-fieldset-legend-color);\n      }\n\n      :host > * {\n        box-sizing: border-box;\n\n        grid-column: span 7;\n        order: 2;\n\n        align-self: stretch;\n      }\n\n      :host > label {\n        grid-column: span 3;\n        order: 1;\n\n        text-align: right;\n\n        font: var(--label-font);\n        text-transform: capitalize;\n\n        align-self: center;\n      }\n\n      :host > input[type='checkbox'] ~ label,\n      :host > ox-checkbox ~ label {\n        grid-column: span 6;\n        order: 2;\n\n        text-align: left;\n      }\n\n      select,\n      ox-select,\n      input:not([type='checkbox']) {\n        border: 1px solid rgba(0, 0, 0, 0.2);\n      }\n\n      :host > legend {\n        grid-column: 1 / -1;\n\n        display: inline-block;\n\n        text-align: left;\n        text-transform: capitalize;\n      }\n\n      :host > [fullwidth] {\n        grid-column: 1 / -1;\n      }\n\n      :host > input[type='checkbox'],\n      :host > ox-checkbox {\n        grid-column: span 4;\n        order: 1;\n\n        justify-self: end;\n        align-self: center;\n      }\n\n      ox-input-code,\n      ox-input-data {\n        height: 300px;\n      }\n\n      :host > div {\n        display: flex;\n        flex-direction: column;\n        gap: 3px;\n      }\n\n      div[data-index] {\n        display: flex;\n        min-height: 24px;\n      }\n\n      div[data-index] > * {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: String }) type!: string\n  @property({ type: String, attribute: true, reflect: true }) name!: string\n  @property({ type: String }) label!: string\n  @property({ type: String }) placeholder?: string\n  @property({ type: Object }) property?: any\n  @property({ type: Object }) editor?: EditorProperty\n  @property({ type: Object }) host: any\n  @property({ type: Array }) quantifier?: [min: number, max: number] = [1, 1]\n  @property({ type: Object }) observe?: (value: any) => void\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.renderRoot.addEventListener('change', this._valueChanged.bind(this))\n  }\n\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult<1> {\n    return html``\n  }\n\n  render() {\n    const { value, quantifier } = this\n    const [min = 1, max = 1] = quantifier || [1, 1]\n\n    return html`\n      ${max <= 1\n        ? this.editorTemplate(value, this)\n        : html`\n            <div ?fullwidth=${this.editor?.fullwidth}>\n              ${new Array(max)\n                .fill('')\n                .map(\n                  (_, idx) => html` <div editor data-index=${idx}>${this.editorTemplate(value?.[idx], this)}</div> `\n                )}\n            </div>\n          `}\n      ${this.label\n        ? html`\n            <label for=\"editor\">\n              <ox-i18n msgid=${this._computeLabelId(this.label)}>${this.label}</ox-i18n>\n            </label>\n          `\n        : html``}\n    `\n  }\n\n  @state() __by_me = false\n\n  shouldUpdate(changedProperties: any) {\n    if (this.__by_me) {\n      return false\n    }\n\n    if (changedProperties.has('value')) {\n      this.__by_me = true\n      this.value = deepClone(this.value)\n      this.__by_me = false\n    }\n\n    return true\n  }\n\n  get valueProperty() {\n    return 'value'\n  }\n\n  makeup(v: any) {\n    return deepClone(v)\n  }\n\n  _computeLabelId(label: string) {\n    if (label.indexOf('label.') >= 0) return label\n\n    return 'label.' + label\n  }\n\n  _valueChanged(e: Event) {\n    e.stopPropagation()\n    const editor = e.target as HTMLInputElement\n\n    const [min = 1, max = 1] = this.quantifier || []\n    const value = this.makeup((editor as any)[this.valueProperty])\n\n    if (max > 1) {\n      const index = Number(editor.closest('[data-index]')?.getAttribute('data-index'))\n      var array: any[] = this.value instanceof Array ? [...this.value] : []\n      array[index] = value\n      this.value = array\n    } else {\n      this.value = value\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n    if (!this.observe) return\n    this.observe.call(this, this.value)\n  }\n}\n"]}