@operato/dataset 1.0.0-alpha.9 → 1.0.0-beta.0

package/dist/src/grist-editor/ox-popup-data-item-spec.js

@@ -0,0 +1,90 @@
+import { __decorate } from "tslib";
+import '../ox-data-item-spec.js';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+import { i18next } from '@operato/i18n';
+let OxPopupDataItemSpec = class OxPopupDataItemSpec extends LitElement {
+    render() {
+        var dataItem = this.dataItem || {};
+        return html `
+      <ox-data-item-spec .value=${this.value} .dataItem=${dataItem} @change=${this.onChange.bind(this)}>
+      </ox-data-item-spec>
+
+      <div class="button-container">
+        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
+        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      </div>
+    `;
+    }
+    onChange(e) {
+        e.stopPropagation();
+        /*
+          주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로,
+          layout의 구성에 변화가 발생하면, 다시 render된다.
+          이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
+          이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
+          만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
+          따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
+          (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)
+          =>
+          이런 이유로, Object.assign(...)을 사용하였다.
+        */
+        this.value = e.detail;
+    }
+    onCancel(e) {
+        history.back();
+    }
+    onConfirm(e) {
+        this.confirmCallback && this.confirmCallback(this.value);
+        history.back();
+    }
+};
+OxPopupDataItemSpec.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+
+        width: var(--overlay-center-normal-width, 50%);
+        height: var(--overlay-center-normal-height, 50%);
+      }
+
+      ox-data-item-spec {
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      span {
+        flex: 1;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        color: var(--primary-color);
+      }
+
+      .button-container {
+        display: flex;
+        margin-left: auto;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], OxPopupDataItemSpec.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], OxPopupDataItemSpec.prototype, "dataItem", void 0);
+__decorate([
+    property({ type: Object })
+], OxPopupDataItemSpec.prototype, "confirmCallback", void 0);
+OxPopupDataItemSpec = __decorate([
+    customElement('ox-popup-data-item-spec')
+], OxPopupDataItemSpec);
+export { OxPopupDataItemSpec };
+//# sourceMappingURL=ox-popup-data-item-spec.js.map

package/dist/src/grist-editor/ox-popup-data-item-spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-popup-data-item-spec.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-popup-data-item-spec.ts"],"names":[],"mappings":";AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IAwCjD,MAAM;QACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAElC,OAAO,IAAI,CAAA;kCACmB,IAAI,CAAC,KAAK,cAAc,QAAQ,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;;6BAIzE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;6BACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEhF,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB;;;;;;;;;;UAUE;QACF,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IACvB,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;CACF,CAAA;AA9EQ,0BAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAwC;AAtCxD,mBAAmB;IAD/B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,mBAAmB,CA+E/B;SA/EY,mBAAmB","sourcesContent":["import '../ox-data-item-spec.js'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataItem } from '../types.js'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-popup-data-item-spec')\nexport class OxPopupDataItemSpec extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: #fff;\n\n        width: var(--overlay-center-normal-width, 50%);\n        height: var(--overlay-center-normal-height, 50%);\n      }\n\n      ox-data-item-spec {\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      span {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--primary-color);\n      }\n\n      .button-container {\n        display: flex;\n        margin-left: auto;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: Object }) dataItem?: DataItem\n  @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n  render() {\n    var dataItem = this.dataItem || {}\n\n    return html`\n      <ox-data-item-spec .value=${this.value} .dataItem=${dataItem} @change=${this.onChange.bind(this)}>\n      </ox-data-item-spec>\n\n      <div class=\"button-container\">\n        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>\n        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>\n      </div>\n    `\n  }\n\n  private onChange(e: CustomEvent) {\n    e.stopPropagation()\n\n    /* \n      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n      layout의 구성에 변화가 발생하면, 다시 render된다.\n      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n      (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)\n      => \n      이런 이유로, Object.assign(...)을 사용하였다.\n    */\n    this.value = e.detail\n  }\n\n  private onCancel(e: Event) {\n    history.back()\n  }\n\n  private onConfirm(e: Event) {\n    this.confirmCallback && this.confirmCallback(this.value)\n    history.back()\n  }\n}\n"]}

package/dist/src/index.d.ts

@@ -1 +1,6 @@
-export * from './ox-data-entry-form';
+export * from './ox-data-entry-form.js';
+export * from './ox-data-sample-view.js';
+export * from './ox-data-ooc-view.js';
+export * from './ox-data-item-spec.js';
+export * from './ox-data-use-case';
+export * from './types.js';

package/dist/src/index.js

@@ -1,2 +1,7 @@
-export * from './ox-data-entry-form';
+export * from './ox-data-entry-form.js';
+export * from './ox-data-sample-view.js';
+export * from './ox-data-ooc-view.js';
+export * from './ox-data-item-spec.js';
+export * from './ox-data-use-case';
+export * from './types.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './ox-data-entry-form'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA","sourcesContent":["export * from './ox-data-entry-form.js'\nexport * from './ox-data-sample-view.js'\nexport * from './ox-data-ooc-view.js'\nexport * from './ox-data-item-spec.js'\nexport * from './ox-data-use-case'\nexport * from './types.js'\n"]}

package/dist/src/ox-data-entry-form.d.ts

@@ -1,28 +1,6 @@
 import '@operato/input/ox-input-file.js';
 import { LitElement } from 'lit';
-declare type SelectOption = {
-    text: string;
-    value: string;
-};
-declare type SelectOptions = SelectOption[];
-declare type TypeOptions = {
-    options?: SelectOptions;
-    [prop: string]: any;
-};
-export declare type DataItem = {
-    name: string;
-    description: string;
-    sequence: number;
-    tag: string;
-    type: string;
-    options: TypeOptions;
-    quota: number;
-};
-export declare type DataSet = {
-    name: string;
-    description: string;
-    dataItems: DataItem[];
-};
+import { DataSet } from './types.js';
 export declare class OxDataEntryForm extends LitElement {
     static styles: import("lit").CSSResult;
     dataSet?: DataSet;
@@ -34,4 +12,3 @@ export declare class OxDataEntryForm extends LitElement {
     private buildInputs;
     private buildValue;
 }
-export {};

package/dist/src/ox-data-entry-form.js

@@ -1,28 +1,27 @@
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-file.js';
-import { LitElement, css, html } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 let OxDataEntryForm = class OxDataEntryForm extends LitElement {
     render() {
         return html `<form @change=${(e) => this.onChange(e)}>${this.buildInputs()}</form>`;
     }
     onChange(e) {
-        const value = this.buildValue();
+        this.value = this.buildValue();
         this.dispatchEvent(new CustomEvent('change', {
             bubbles: true,
             composed: true,
-            detail: value
+            detail: this.value
         }));
     }
     buildInputs() {
-        const dataItems = this.dataSet.dataItems;
+        const dataItems = this.dataSet.dataItems.filter(item => item.active);
         return (dataItems || []).map(dataItem => {
-            var _a;
-            const { name, description, tag, type, quota = 1, options = {} } = dataItem;
+            const { name, description, tag, type, quota = 1, options = {}, unit } = dataItem;
             const samples = new Array(quota).fill(0);
-            const value = (_a = this.value) === null || _a === void 0 ? void 0 : _a[tag];
+            const value = this.value && this.value[tag];
             const elements = samples.map((_, idx) => {
-                const v = quota <= 1 ? value : value instanceof Array && value[idx];
+                const v = value instanceof Array ? value[idx] : idx === 0 ? value : undefined;
                 switch (type) {
                     case 'select':
                         return html ` <select .name=${tag}>
@@ -50,7 +49,7 @@ let OxDataEntryForm = class OxDataEntryForm extends LitElement {
                 }
             });
             return html ` <label .title=${description}>
-        <div name>${name}</div>
+        <div name>${name}${unit ? `(${unit})` : ''}</div>
         <div elements>${elements}</div>
       </label>`;
         });
@@ -58,15 +57,10 @@ let OxDataEntryForm = class OxDataEntryForm extends LitElement {
     buildValue() {
         const dataItems = this.dataSet.dataItems;
         return (dataItems || []).reduce((sum, dataItem) => {
-            const { tag, quota, type } = dataItem;
+            const { tag, type } = dataItem;
             const editors = Array.prototype.slice.call(this.renderRoot.querySelectorAll(`[name=${tag}]`));
             if (editors.length > 0) {
-                sum[tag] =
-                    editors.length > 1
-                        ? editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))
-                        : type === 'boolean'
-                            ? editors[0].checked
-                            : editors[0].value;
+                sum[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value));
             }
             return sum;
         }, {});
@@ -95,6 +89,7 @@ OxDataEntryForm.styles = css `
       background-color: var(--main-section-background-color);
       padding: var(--padding-default) 0;
     }
+
     div[name] {
       grid-column: span 2 / auto;
       font: var(--label-font);
@@ -119,6 +114,7 @@ OxDataEntryForm.styles = css `
       padding: var(--input-field-padding);
       font: var(--input-field-font);
     }
+
     @media only screen and (max-width: 460px) {
       div[name] {
         grid-column: span 3 / auto;

package/dist/src/ox-data-entry-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-data-entry-form.js","sourceRoot":"","sources":["../../src/ox-data-entry-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\ntype SelectOption = { text: string; value: string }\ntype SelectOptions = SelectOption[]\ntype TypeOptions = {\n  options?: SelectOptions\n  [prop: string]: any\n}\n\nexport type DataItem = {\n  name: string\n  description: string\n  sequence: number\n  tag: string\n  type: string\n  options: TypeOptions\n  quota: number\n}\n\nexport type DataSet = {\n  name: string\n  description: string\n  dataItems: DataItem[]\n}\n\n@customElement('ox-data-entry-form')\nexport class OxDataEntryForm extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: row;\n    }\n\n    form {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n    label {\n      display: grid;\n      grid-template-columns: repeat(12, 1fr);\n      gap: 9px;\n      align-items: center;\n      margin-bottom: var(--margin-default);\n    }\n    label:nth-child(even) {\n      background-color: var(--main-section-background-color);\n      padding: var(--padding-default) 0;\n    }\n    div[name] {\n      grid-column: span 2 / auto;\n      font: var(--label-font);\n      color: var(--label-color);\n      text-align: right;\n    }\n    div[elements] {\n      grid-column: span 10 / auto;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      gap: 10px;\n      padding-right: var(--padding-default);\n    }\n    div[elements] * {\n      flex: 1;\n    }\n    div[elements] input,\n    div[elements] select {\n      border: var(--input-field-border);\n      border-radius: var(--input-field-border-radius);\n      padding: var(--input-field-padding);\n      font: var(--input-field-font);\n    }\n    @media only screen and (max-width: 460px) {\n      div[name] {\n        grid-column: span 3 / auto;\n      }\n      div[elements] {\n        grid-column: span 9 / auto;\n      }\n    }\n  `\n\n  @property({ type: Object }) dataSet?: DataSet\n  @property({ type: Object }) value?: { [tag: string]: any }\n\n  render() {\n    return html`<form @change=${(e: Event) => this.onChange(e)}>${this.buildInputs()}</form>`\n  }\n\n  private onChange(e: Event) {\n    const value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: value\n      })\n    )\n  }\n\n  private buildInputs() {\n    const dataItems = this.dataSet!.dataItems\n\n    return (dataItems || []).map(dataItem => {\n      const { name, description, tag, type, quota = 1, options = {} } = dataItem\n\n      const samples = new Array(quota).fill(0)\n      const value = this.value?.[tag]\n\n      const elements = samples.map((_, idx) => {\n        const v = quota <= 1 ? value : value instanceof Array && value[idx]\n\n        switch (type) {\n          case 'select':\n            return html` <select .name=${tag}>\n              <option value=\"\"></option>\n              ${(options.options || []).map(\n                option => html`<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`\n              )}\n            </select>`\n            break\n\n          case 'boolean':\n            return html` <input type=\"checkbox\" name=${tag} .checked=${v} />`\n            break\n\n          case 'number':\n            return html` <input type=\"number\" name=${tag} value=${v} />`\n            break\n\n          case 'file':\n            return html`<ox-input-file\n              name=${tag}\n              label=\"Attach Files\"\n              accept=\"*/*\"\n              multiple=\"true\"\n              hide-filelist\n            ></ox-input-file>`\n\n          case 'string':\n          default:\n            return html` <input type=\"string\" name=${tag} value=${v} />`\n        }\n      })\n\n      return html` <label .title=${description}>\n        <div name>${name}</div>\n        <div elements>${elements}</div>\n      </label>`\n    })\n  }\n\n  private buildValue() {\n    const dataItems = this.dataSet!.dataItems\n\n    return (dataItems || []).reduce((sum, dataItem) => {\n      const { tag, quota, type } = dataItem\n\n      const editors = Array.prototype.slice.call(\n        this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>\n      ) as HTMLInputElement[]\n\n      if (editors.length > 0) {\n        sum[tag] =\n          editors.length > 1\n            ? editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))\n            : type === 'boolean'\n            ? editors[0].checked\n            : editors[0].value\n      }\n\n      return sum\n    }, {} as { [tag: string]: any })\n  }\n}\n"]}
+{"version":3,"file":"ox-data-entry-form.js","sourceRoot":"","sources":["../../src/ox-data-entry-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataSet } from './types.js'\n\n@customElement('ox-data-entry-form')\nexport class OxDataEntryForm extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: row;\n    }\n\n    form {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n    label {\n      display: grid;\n      grid-template-columns: repeat(12, 1fr);\n      gap: 9px;\n      align-items: center;\n      margin-bottom: var(--margin-default);\n    }\n    label:nth-child(even) {\n      background-color: var(--main-section-background-color);\n      padding: var(--padding-default) 0;\n    }\n\n    div[name] {\n      grid-column: span 2 / auto;\n      font: var(--label-font);\n      color: var(--label-color);\n      text-align: right;\n    }\n    div[elements] {\n      grid-column: span 10 / auto;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      gap: 10px;\n      padding-right: var(--padding-default);\n    }\n    div[elements] * {\n      flex: 1;\n    }\n    div[elements] input,\n    div[elements] select {\n      border: var(--input-field-border);\n      border-radius: var(--input-field-border-radius);\n      padding: var(--input-field-padding);\n      font: var(--input-field-font);\n    }\n\n    @media only screen and (max-width: 460px) {\n      div[name] {\n        grid-column: span 3 / auto;\n      }\n      div[elements] {\n        grid-column: span 9 / auto;\n      }\n    }\n  `\n\n  @property({ type: Object }) dataSet?: DataSet\n  @property({ type: Object }) value?: { [tag: string]: any }\n\n  render() {\n    return html`<form @change=${(e: Event) => this.onChange(e)}>${this.buildInputs()}</form>`\n  }\n\n  private onChange(e: Event) {\n    this.value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  private buildInputs() {\n    const dataItems = this.dataSet!.dataItems.filter(item => item.active)\n\n    return (dataItems || []).map(dataItem => {\n      const { name, description, tag, type, quota = 1, options = {}, unit } = dataItem\n\n      const samples = new Array(quota).fill(0)\n      const value = this.value && this.value[tag]\n\n      const elements = samples.map((_, idx) => {\n        const v = value instanceof Array ? value[idx] : idx === 0 ? value : undefined\n\n        switch (type) {\n          case 'select':\n            return html` <select .name=${tag}>\n              <option value=\"\"></option>\n              ${(options.options || []).map(\n                option => html`<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`\n              )}\n            </select>`\n            break\n\n          case 'boolean':\n            return html` <input type=\"checkbox\" name=${tag} .checked=${v} />`\n            break\n\n          case 'number':\n            return html` <input type=\"number\" name=${tag} value=${v} />`\n            break\n\n          case 'file':\n            return html`<ox-input-file\n              name=${tag}\n              label=\"Attach Files\"\n              accept=\"*/*\"\n              multiple=\"true\"\n              hide-filelist\n            ></ox-input-file>`\n\n          case 'string':\n          default:\n            return html` <input type=\"string\" name=${tag} value=${v} />`\n        }\n      })\n\n      return html` <label .title=${description}>\n        <div name>${name}${unit ? `(${unit})` : ''}</div>\n        <div elements>${elements}</div>\n      </label>`\n    })\n  }\n\n  private buildValue() {\n    const dataItems = this.dataSet!.dataItems\n\n    return (dataItems || []).reduce((sum, dataItem) => {\n      const { tag, type } = dataItem\n\n      const editors = Array.prototype.slice.call(\n        this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>\n      ) as HTMLInputElement[]\n\n      if (editors.length > 0) {\n        sum[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))\n      }\n\n      return sum\n    }, {} as { [tag: string]: any })\n  }\n}\n"]}

package/dist/src/ox-data-item-spec.d.ts

@@ -0,0 +1,18 @@
+import '@operato/property-editor/ox-properties-dynamic-view.js';
+import { LitElement, PropertyValues } from 'lit';
+import { DataItem, DataItemSpecSet } from './types.js';
+export declare class OxDataItemSpec extends LitElement {
+    static styles: import("lit").CSSResult;
+    value?: {
+        [specSetName: string]: any;
+    };
+    dataItem?: DataItem;
+    dataItemSpecSets: DataItemSpecSet[];
+    specSetViews: NodeListOf<HTMLElement & {
+        value: any;
+    }>;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+    private onChange;
+    private buildValue;
+}

package/dist/src/ox-data-item-spec.js

@@ -0,0 +1,77 @@
+import { __decorate } from "tslib";
+import '@operato/property-editor/ox-properties-dynamic-view.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, queryAll, state } from 'lit/decorators.js';
+import { OxDataUseCase } from './ox-data-use-case.js';
+let OxDataItemSpec = class OxDataItemSpec extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.dataItemSpecSets = [];
+    }
+    render() {
+        return html `<form @property-change=${(e) => this.onChange(e)}>
+      ${this.dataItemSpecSets.map(({ name, description, specs }) => {
+            var _a;
+            return html ` <div specName>${name}</div>
+          <div description>${description}</div>
+          <ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${(_a = this.value) === null || _a === void 0 ? void 0 : _a[name]}>
+          </ox-properties-dynamic-view>`;
+        })}
+    </form>`;
+    }
+    updated(changes) {
+        if (changes.has('dataItem')) {
+            this.dataItemSpecSets = OxDataUseCase.getUseCases().map(useCase => useCase.getSpecification(this.dataItem));
+        }
+    }
+    onChange(e) {
+        this.value = this.buildValue();
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: { ...this.value }
+        }));
+    }
+    buildValue() {
+        var value = {};
+        this.specSetViews.forEach(view => (value[view.getAttribute('data-name')] = view.value));
+        return value;
+    }
+};
+OxDataItemSpec.styles = css `
+    :host {
+      display: flex;
+      flex-direction: row;
+      border-bottom: var(--border-dark-color);
+      padding: var(--margin-default) 0;
+    }
+    [specName] {
+      font: var(--legend-font);
+      color: var(--legend-text-color);
+    }
+    [description] {
+      font: var(--form-sublabel-font);
+      opacity: 0.8;
+    }
+
+    form {
+      flex: 1;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxDataItemSpec.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], OxDataItemSpec.prototype, "dataItem", void 0);
+__decorate([
+    state()
+], OxDataItemSpec.prototype, "dataItemSpecSets", void 0);
+__decorate([
+    queryAll('ox-properties-dynamic-view')
+], OxDataItemSpec.prototype, "specSetViews", void 0);
+OxDataItemSpec = __decorate([
+    customElement('ox-data-item-spec')
+], OxDataItemSpec);
+export { OxDataItemSpec };
+//# sourceMappingURL=ox-data-item-spec.js.map

package/dist/src/ox-data-item-spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-data-item-spec.js","sourceRoot":"","sources":["../../src/ox-data-item-spec.ts"],"names":[],"mappings":";AAAA,OAAO,wDAAwD,CAAA;AAE/D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAE5E,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAIrD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAyBW,qBAAgB,GAAsB,EAAE,CAAA;IAuCnD,CAAC;IAnCC,MAAM;QACJ,OAAO,IAAI,CAAA,0BAA0B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,gBAAgB,CAAC,GAAG,CACzB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;;YAAC,OAAA,IAAI,CAAA,kBAAkB,IAAI;6BACvC,WAAW;kDACU,IAAI,WAAW,KAAK,WAAW,MAAA,IAAI,CAAC,KAAK,0CAAG,IAAI,CAAC;wCAC3D,CAAA;SAAA,CACjC;YACK,CAAA;IACV,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,IAAI,CAAC,gBAAgB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAS,CAAC,CAAC,CAAA;SAC7G;IACH,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAA;QAE9B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE;SAC1B,CAAC,CACH,CAAA;IACH,CAAC;IAEO,UAAU;QAChB,IAAI,KAAK,GAAG,EAAS,CAAA;QACrB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;QAExF,OAAO,KAAK,CAAA;IACd,CAAC;CACF,CAAA;AA/DQ,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;GAmBlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAuC;AACtC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAoB;AAEtC;IAAR,KAAK,EAAE;wDAAyC;AAET;IAAvC,QAAQ,CAAC,4BAA4B,CAAC;oDAAwD;AA3BpF,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CAgE1B;SAhEY,cAAc","sourcesContent":["import '@operato/property-editor/ox-properties-dynamic-view.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, queryAll, state } from 'lit/decorators.js'\n\nimport { OxDataUseCase } from './ox-data-use-case.js'\nimport { DataItem, DataItemSpecSet } from './types.js'\n\n@customElement('ox-data-item-spec')\nexport class OxDataItemSpec extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: row;\n      border-bottom: var(--border-dark-color);\n      padding: var(--margin-default) 0;\n    }\n    [specName] {\n      font: var(--legend-font);\n      color: var(--legend-text-color);\n    }\n    [description] {\n      font: var(--form-sublabel-font);\n      opacity: 0.8;\n    }\n\n    form {\n      flex: 1;\n    }\n  `\n\n  @property({ type: Object }) value?: { [specSetName: string]: any }\n  @property({ type: Object }) dataItem?: DataItem\n\n  @state() dataItemSpecSets: DataItemSpecSet[] = []\n\n  @queryAll('ox-properties-dynamic-view') specSetViews!: NodeListOf<HTMLElement & { value: any }>\n\n  render() {\n    return html`<form @property-change=${(e: Event) => this.onChange(e)}>\n      ${this.dataItemSpecSets.map(\n        ({ name, description, specs }) => html` <div specName>${name}</div>\n          <div description>${description}</div>\n          <ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${this.value?.[name]}>\n          </ox-properties-dynamic-view>`\n      )}\n    </form>`\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('dataItem')) {\n      this.dataItemSpecSets = OxDataUseCase.getUseCases().map(useCase => useCase.getSpecification(this.dataItem!))\n    }\n  }\n\n  private onChange(e: Event) {\n    this.value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: { ...this.value }\n      })\n    )\n  }\n\n  private buildValue() {\n    var value = {} as any\n    this.specSetViews.forEach(view => (value[view.getAttribute('data-name')!] = view.value))\n\n    return value\n  }\n}\n"]}

package/dist/src/ox-data-ooc-view.d.ts

@@ -0,0 +1,10 @@
+import '@operato/input/ox-input-file.js';
+import './ox-data-sample-view';
+import { DataOoc, DataSet } from './types.js';
+import { LitElement } from 'lit';
+export declare class OxDataOocView extends LitElement {
+    static styles: import("lit").CSSResult;
+    dataSet?: DataSet;
+    dataOoc?: DataOoc;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/ox-data-ooc-view.js

@@ -0,0 +1,69 @@
+import { __decorate } from "tslib";
+import '@operato/input/ox-input-file.js';
+import './ox-data-sample-view';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let OxDataOocView = class OxDataOocView extends LitElement {
+    render() {
+        var _a, _b;
+        const history = ((_a = this.dataOoc) === null || _a === void 0 ? void 0 : _a.history) || [];
+        const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
+        return html `
+      <ox-data-sample-view .dataSample=${this.dataOoc} .dataSet=${this.dataSet}></ox-data-sample-view>
+
+      <h3 state>${((_b = this.dataOoc) === null || _b === void 0 ? void 0 : _b.state) || ''}</h3>
+
+      <h3>history</h3>
+      ${history.map(({ user, state, comment, timestamp }) => html `
+          <p page-description>
+            ${formatter.format(new Date(timestamp))}
+            <br />
+            ${state} by ${user.name}
+            <br />
+            ${comment}
+          </p>
+        `)}
+    `;
+    }
+};
+OxDataOocView.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      background-color: var(--main-section-background-color);
+      padding: var(--padding-wide);
+
+      position: relative;
+    }
+
+    h3 {
+      margin: var(--title-margin);
+      padding-top: 12px;
+      font: var(--title-font);
+      color: var(--title-text-color);
+    }
+
+    h3[state] {
+      position: absolute;
+
+      right: 20px;
+      top: 25px;
+    }
+
+    [page-description] {
+      margin: var(--page-description-margin);
+      font: var(--page-description-font);
+      color: var(--page-description-color);
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxDataOocView.prototype, "dataSet", void 0);
+__decorate([
+    property({ type: Object })
+], OxDataOocView.prototype, "dataOoc", void 0);
+OxDataOocView = __decorate([
+    customElement('ox-data-ooc-view')
+], OxDataOocView);
+export { OxDataOocView };
+//# sourceMappingURL=ox-data-ooc-view.js.map

package/dist/src/ox-data-ooc-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-data-ooc-view.js","sourceRoot":"","sources":["../../src/ox-data-ooc-view.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAG9B,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAmC3C,MAAM;;QACJ,MAAM,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,KAAI,EAAE,CAAA;QAC3C,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;QAExG,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,OAAO,aAAa,IAAI,CAAC,OAAO;;kBAE5D,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,KAAI,EAAE;;;QAGnC,OAAO,CAAC,GAAG,CACX,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;cAEvC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;;cAErC,KAAK,OAAO,IAAI,CAAC,IAAI;;cAErB,OAAO;;SAEZ,CACF;KACF,CAAA;IACH,CAAC;CACF,CAAA;AAzDQ,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AAjClC,aAAa;IADzB,aAAa,CAAC,kBAAkB,CAAC;GACrB,aAAa,CA0DzB;SA1DY,aAAa","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport './ox-data-sample-view'\n\nimport { DataOoc, DataSet } from './types.js'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-data-ooc-view')\nexport class OxDataOocView extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      background-color: var(--main-section-background-color);\n      padding: var(--padding-wide);\n\n      position: relative;\n    }\n\n    h3 {\n      margin: var(--title-margin);\n      padding-top: 12px;\n      font: var(--title-font);\n      color: var(--title-text-color);\n    }\n\n    h3[state] {\n      position: absolute;\n\n      right: 20px;\n      top: 25px;\n    }\n\n    [page-description] {\n      margin: var(--page-description-margin);\n      font: var(--page-description-font);\n      color: var(--page-description-color);\n    }\n  `\n\n  @property({ type: Object }) dataSet?: DataSet\n  @property({ type: Object }) dataOoc?: DataOoc\n\n  render() {\n    const history = this.dataOoc?.history || []\n    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n    return html`\n      <ox-data-sample-view .dataSample=${this.dataOoc} .dataSet=${this.dataSet}></ox-data-sample-view>\n\n      <h3 state>${this.dataOoc?.state || ''}</h3>\n\n      <h3>history</h3>\n      ${history.map(\n        ({ user, state, comment, timestamp }) => html`\n          <p page-description>\n            ${formatter.format(new Date(timestamp))}\n            <br />\n            ${state} by ${user.name}\n            <br />\n            ${comment}\n          </p>\n        `\n      )}\n    `\n  }\n}\n"]}

package/dist/src/ox-data-sample-view copy.d.ts

@@ -0,0 +1,13 @@
+import '@operato/input/ox-input-file.js';
+import { DataSample, DataSet } from './types.js';
+import { LitElement } from 'lit';
+export declare class OxDataSampleView extends LitElement {
+    static styles: import("lit").CSSResult;
+    dataSet?: DataSet;
+    dataSample?: DataSample;
+    render(): import("lit-html").TemplateResult<1>;
+    private onChange;
+    private buildSpec;
+    private buildValue;
+    private evaluateOOC;
+}