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

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

@@ -0,0 +1,77 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import './ox-popup-data-item-spec.js';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { cloneDeep } from 'lodash-es';
+import { OxGristEditor } from '@operato/data-grist';
+import { i18next } from '@operato/i18n';
+import { openPopup } from '@operato/layout';
+let OxGristEditorDataItemSpec = class OxGristEditorDataItemSpec extends OxGristEditor {
+    get editorTemplate() {
+        const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value;
+        return html ` ${value || ''} `;
+    }
+    async firstUpdated() {
+        await this.updateComplete;
+        this.renderRoot.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.openSelector();
+        });
+        this.openSelector();
+    }
+    async openSelector() {
+        if (this.popup) {
+            delete this.popup;
+        }
+        var { options } = this.column.record;
+        if (typeof options === 'function') {
+            options = await options.call(this, this.value, this.column, this.record, this.row, this.field);
+        }
+        const { name, help, objectified = false } = options;
+        const confirmCallback = (newval) => {
+            this.dispatchEvent(new CustomEvent('field-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    before: this.value,
+                    after: !objectified ? JSON.stringify(newval) : newval,
+                    record: this.record,
+                    column: this.column,
+                    row: this.row
+                }
+            }));
+        };
+        try {
+            var value = !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : cloneDeep(this.value || {});
+        }
+        catch (e) {
+            var value = {};
+        }
+        /*
+          주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로,
+          layout의 구성에 변화가 발생하면, 다시 render된다.
+          이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
+          이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
+          만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
+          따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
+        */
+        var template = html `
+      <ox-popup-data-item-spec .value=${value} .dataItem=${this.record} .confirmCallback=${confirmCallback}>
+      </ox-popup-data-item-spec>
+    `;
+        this.popup = openPopup(template, {
+            backdrop: true,
+            size: 'large',
+            title: `${(name === null || name === void 0 ? void 0 : name.toUpperCase()) || ''} ${i18next.t('field.spec')}`,
+            help
+        });
+    }
+};
+OxGristEditorDataItemSpec = __decorate([
+    customElement('ox-grist-editor-data-item-spec')
+], OxGristEditorDataItemSpec);
+export { OxGristEditorDataItemSpec };
+//# sourceMappingURL=ox-grist-editor-data-item-spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-editor-data-item-spec.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-grist-editor-data-item-spec.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-popup-data-item-spec.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { cloneDeep } from 'lodash-es'\n\nimport { OxGristEditor } from '@operato/data-grist'\nimport { i18next } from '@operato/i18n'\nimport { openPopup, PopupHandle } from '@operato/layout'\n\n@customElement('ox-grist-editor-data-item-spec')\nexport class OxGristEditorDataItemSpec extends OxGristEditor {\n  private popup?: PopupHandle\n\n  get editorTemplate() {\n    const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value\n    return html` ${value || ''} `\n  }\n\n  async firstUpdated() {\n    await this.updateComplete\n\n    this.renderRoot.addEventListener('click', (e: Event) => {\n      e.stopPropagation()\n\n      this.openSelector()\n    })\n\n    this.openSelector()\n  }\n\n  async openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    var { options } = this.column.record\n\n    if (typeof options === 'function') {\n      options = await options.call(this, this.value, this.column, this.record, this.row, this.field)\n    }\n\n    const { name, help, objectified = false } = options\n\n    const confirmCallback = (newval: any) => {\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: this.value,\n            after: !objectified ? JSON.stringify(newval) : newval,\n            record: this.record,\n            column: this.column,\n            row: this.row\n          }\n        })\n      )\n    }\n\n    try {\n      var value: any =\n        !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : cloneDeep(this.value || {})\n    } catch (e) {\n      var value: any = {}\n    }\n\n    /* \n      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n      layout의 구성에 변화가 발생하면, 다시 render된다.\n      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n    */\n    var template = html`\n      <ox-popup-data-item-spec .value=${value} .dataItem=${this.record} .confirmCallback=${confirmCallback}>\n      </ox-popup-data-item-spec>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: `${name?.toUpperCase() || ''} ${i18next.t('field.spec')}`,\n      help\n    })\n  }\n}\n"]}

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

@@ -0,0 +1,13 @@
+import '../ox-data-item-spec.js';
+import { LitElement } from 'lit';
+import { DataItem } from '../types.js';
+export declare class OxPopupDataItemSpec extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value: any;
+    dataItem?: DataItem;
+    confirmCallback: (newval: any) => void;
+    render(): import("lit-html").TemplateResult<1>;
+    private onChange;
+    private onCancel;
+    private onConfirm;
+}

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

@@ -0,0 +1,91 @@
+import { __decorate } from "tslib";
+import '../ox-data-item-spec.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+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;
+        padding: var(--padding-wide);
+      }
+
+      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,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAKjD,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IAyCjD,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;AA/EQ,0BAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;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;AAvCxD,mBAAmB;IAD/B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,mBAAmB,CAgF/B;SAhFY,mBAAmB","sourcesContent":["import '../ox-data-item-spec.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { DataItem } from '../types.js'\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        padding: var(--padding-wide);\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,32 @@
 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>`;
+        var _a, _b;
+        return html ` <form @change=${(e) => this.onChange(e)}>
+      <h2>${((_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.name) || ''}</h2>
+      <h3>${((_b = this.dataSet) === null || _b === void 0 ? void 0 : _b.description) || ''}</h3>
+      ${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 +54,8 @@ let OxDataEntryForm = class OxDataEntryForm extends LitElement {
                 }
             });
             return html ` <label .title=${description}>
-        <div name>${name}</div>
+        <div name>${name}${unit ? `(${unit})` : ''}</div>
+        <div description>${description}</div>
         <div elements>${elements}</div>
       </label>`;
         });
@@ -58,15 +63,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;
         }, {});
@@ -78,6 +78,11 @@ OxDataEntryForm.styles = css `
       flex-direction: row;
     }
 
+    h2,
+    h3 {
+      text-align: center;
+    }
+
     form {
       flex: 1;
 
@@ -86,23 +91,34 @@ OxDataEntryForm.styles = css `
     }
     label {
       display: grid;
-      grid-template-columns: repeat(12, 1fr);
-      gap: 9px;
+
+      grid-template-rows: auto 1fr;
+      grid-template-columns: 1fr 5fr;
+      grid-template-areas: 'name description' 'empty inputs';
+
+      grid-gap: 9px;
       align-items: center;
       margin-bottom: var(--margin-default);
     }
-    label:nth-child(even) {
+    label:nth-child(odd) {
       background-color: var(--main-section-background-color);
       padding: var(--padding-default) 0;
     }
+
     div[name] {
-      grid-column: span 2 / auto;
+      grid-area: name;
       font: var(--label-font);
       color: var(--label-color);
       text-align: right;
     }
+    div[description] {
+      grid-area: description;
+      font: var(--page-description-font);
+      color: var(--page-description-color);
+      text-align: left;
+    }
     div[elements] {
-      grid-column: span 10 / auto;
+      grid-area: inputs;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
@@ -119,12 +135,22 @@ 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;
+      label {
+        display: grid;
+
+        grid-template-rows: auto auto 1fr;
+        grid-template-columns: 1fr;
+        grid-template-areas: 'name' 'description' 'inputs';
+
+        grid-gap: 9px;
+        align-items: center;
+        margin-bottom: var(--margin-default);
       }
-      div[elements] {
-        grid-column: span 9 / auto;
+
+      div[name] {
+        text-align: left;
       }
     }
   `;

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    h2,\n    h3 {\n      text-align: center;\n    }\n\n    form {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n    label {\n      display: grid;\n\n      grid-template-rows: auto 1fr;\n      grid-template-columns: 1fr 5fr;\n      grid-template-areas: 'name description' 'empty inputs';\n\n      grid-gap: 9px;\n      align-items: center;\n      margin-bottom: var(--margin-default);\n    }\n    label:nth-child(odd) {\n      background-color: var(--main-section-background-color);\n      padding: var(--padding-default) 0;\n    }\n\n    div[name] {\n      grid-area: name;\n      font: var(--label-font);\n      color: var(--label-color);\n      text-align: right;\n    }\n    div[description] {\n      grid-area: description;\n      font: var(--page-description-font);\n      color: var(--page-description-color);\n      text-align: left;\n    }\n    div[elements] {\n      grid-area: inputs;\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      label {\n        display: grid;\n\n        grid-template-rows: auto auto 1fr;\n        grid-template-columns: 1fr;\n        grid-template-areas: 'name' 'description' 'inputs';\n\n        grid-gap: 9px;\n        align-items: center;\n        margin-bottom: var(--margin-default);\n      }\n\n      div[name] {\n        text-align: left;\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)}>\n      <h2>${this.dataSet?.name || ''}</h2>\n      <h3>${this.dataSet?.description || ''}</h3>\n      ${this.buildInputs()}\n    </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 description>${description}</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,11 @@
+import '@operato/input/ox-input-file.js';
+import './ox-data-sample-view';
+import '@material/mwc-icon';
+import { LitElement } from 'lit';
+import { DataOoc, DataSet } from './types.js';
+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,75 @@
+import { __decorate } from "tslib";
+import '@operato/input/ox-input-file.js';
+import './ox-data-sample-view';
+import '@material/mwc-icon';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+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>${i18next.t('title.history')}</h3>
+      ${history.map(({ user, state, comment, timestamp }) => html `
+          <p page-description>
+            ${formatter.format(new Date(timestamp))}
+            <br />
+            ${state} <mwc-icon>account_circle</mwc-icon> ${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;
+    }
+
+    mwc-icon {
+      font-size: 16px;
+    }
+
+    [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