@operato/dataset 2.0.0-alpha.11 → 2.0.0-alpha.110

package/dist/src/ox-data-sample-subgroup-view.js

@@ -27,27 +27,27 @@ let OxDataSampleSubgroupView = class OxDataSampleSubgroupView extends LitElement
           ${subgroupDataItems.map(dataItem => html ` <td>${dataItem.description}</td> `)}
         </tr>
         ${Array.from({ length: records }, (_, index) => index).map(index => html `
-              <tr>
-                <td class="label">${records > 1 ? index + 1 : i18next.t('field.value')}</td>
-                ${subgroupDataItems.map(dataItem => {
+            <tr>
+              <td class="label">${records > 1 ? index + 1 : i18next.t('field.value')}</td>
+              ${subgroupDataItems.map(dataItem => {
             const { tag = '', type } = dataItem;
             const valueArray = data[tag];
             const value = Array.isArray(valueArray) ? valueArray[index] : index == 0 ? valueArray : undefined;
             return html ` <td>${this.buildValue(type, value)}</td> `;
         })}
-              </tr>
-            `)}
+            </tr>
+          `)}
         <tr>
           <td class="label">${i18next.t('field.spec')}</td>
           ${subgroupDataItems.map(dataItem => html ` <td><pre>${this.buildSpec(useCaseNames, dataItem.spec)}</pre></td> `)}
         </tr>
         <tr>
           <td class="label">${i18next.t('field.ooc')}</td>
-          ${subgroupDataItems.map(dataItem => { var _a; return html ` <td>${((_a = judgment === null || judgment === void 0 ? void 0 : judgment[dataItem.tag]) === null || _a === void 0 ? void 0 : _a.ooc) ? html `<mwc-icon>done</mwc-icon>` : nothing}</td> `; })}
+          ${subgroupDataItems.map(dataItem => { var _a; return html ` <td>${((_a = judgment === null || judgment === void 0 ? void 0 : judgment[dataItem.tag]) === null || _a === void 0 ? void 0 : _a.ooc) ? html `<md-icon>done</md-icon>` : nothing}</td> `; })}
         </tr>
         <tr>
           <td class="label">${i18next.t('field.oos')}</td>
-          ${subgroupDataItems.map(dataItem => { var _a; return html ` <td>${((_a = judgment === null || judgment === void 0 ? void 0 : judgment[dataItem.tag]) === null || _a === void 0 ? void 0 : _a.oos) ? html `<mwc-icon>done</mwc-icon>` : nothing}</td> `; })}
+          ${subgroupDataItems.map(dataItem => { var _a; return html ` <td>${((_a = judgment === null || judgment === void 0 ? void 0 : judgment[dataItem.tag]) === null || _a === void 0 ? void 0 : _a.oos) ? html `<md-icon>done</md-icon>` : nothing}</td> `; })}
         </tr>
       </table>`;
     }
@@ -117,6 +117,7 @@ OxDataSampleSubgroupView.styles = css `
       font-weight: bold;
       color: var(--th-color);
       text-align: center;
+      white-space: nowrap;
     }
 
     th.label,
@@ -147,13 +148,12 @@ OxDataSampleSubgroupView.styles = css `
       border-left: none;
     }
 
-    td mwc-icon {
+    td md-icon {
       color: var(--status-danger-color);
     }
 
     pre {
       tab-size: 2;
-      text-wrap: wrap;
       text-align: left;
     }
   `;

package/dist/src/ox-data-sample-subgroup-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-data-sample-subgroup-view.js","sourceRoot":"","sources":["../../src/ox-data-sample-subgroup-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataSample, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-sample-subgroup-view')\nexport class OxDataSampleSubgroupView extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n    }\n\n    h3 {\n      margin: var(--title-margin);\n      font: var(--title-font);\n      font-size: 20px;\n      color: var(--title-text-color);\n      text-transform: capitalize;\n    }\n\n    table {\n      border-collapse: collapse;\n      margin-bottom: var(--margin-default);\n    }\n\n    th {\n      padding: var(--th-padding);\n      border-top: var(--th-border-top);\n      border-left: var(--td-border-line, 1px solid rgba(0, 0, 0, 0.05));\n      border-bottom: var(--td-border-bottom);\n      text-transform: var(--th-text-transform);\n      font: var(--th-font);\n      font-weight: bold;\n      color: var(--th-color);\n      text-align: center;\n    }\n\n    th.label,\n    td.label {\n      background-color: var(--label-cell-background-color, #f6f6f6);\n      width: 120px;\n      text-transform: var(--th-text-transform);\n    }\n\n    tr {\n      background-color: var(--tr-background-color);\n    }\n\n    tr:hover {\n      background-color: var(--tr-background-hover-color);\n    }\n\n    td {\n      border-left: var(--td-border-line, 1px solid rgba(0, 0, 0, 0.05));\n      border-bottom: var(--td-border-bottom);\n      padding: var(--td-padding);\n      font: var(--td-font);\n      color: var(--td-color);\n      text-align: center;\n    }\n    tr th:first-child,\n    tr td:first-child {\n      border-left: none;\n    }\n\n    td mwc-icon {\n      color: var(--status-danger-color);\n    }\n\n    pre {\n      tab-size: 2;\n      text-wrap: wrap;\n      text-align: left;\n    }\n  `\n\n  @property({ type: Object }) dataSample?: DataSample\n  @property({ type: String }) subgroup?: string\n\n  render() {\n    if (!this.dataSample) {\n      return html``\n    }\n\n    const { useCase, data = {}, judgment, dataItems = [] } = this.dataSample\n    const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []\n    const subgroupDataItems = dataItems.filter(dataItem => dataItem.group == this.subgroup && !dataItem.hidden)\n    const records = subgroupDataItems.reduce((max, dataItem) => {\n      const value = data[dataItem.tag]\n      return Math.max(max, Array.isArray(value) ? value.length : 1)\n    }, 0)\n\n    return html` <h3>${this.subgroup}</h3>\n      <table>\n        <tr>\n          <th class=\"label\">${i18next.t('field.name')}</th>\n          ${subgroupDataItems.map(\n            dataItem => html` <th>${dataItem.name} ${dataItem.unit ? `(${dataItem.unit})` : ''}</th> `\n          )}\n        </tr>\n        <tr>\n          <td class=\"label\">${i18next.t('field.description')}</td>\n          ${subgroupDataItems.map(dataItem => html` <td>${dataItem.description}</td> `)}\n        </tr>\n        ${Array.from({ length: records }, (_, index) => index).map(\n          index =>\n            html`\n              <tr>\n                <td class=\"label\">${records > 1 ? index + 1 : i18next.t('field.value')}</td>\n                ${subgroupDataItems.map(dataItem => {\n                  const { tag = '', type } = dataItem\n                  const valueArray = data[tag]\n                  const value = Array.isArray(valueArray) ? valueArray[index] : index == 0 ? valueArray : undefined\n\n                  return html` <td>${this.buildValue(type, value)}</td> `\n                })}\n              </tr>\n            `\n        )}\n        <tr>\n          <td class=\"label\">${i18next.t('field.spec')}</td>\n          ${subgroupDataItems.map(\n            dataItem => html` <td><pre>${this.buildSpec(useCaseNames, dataItem.spec)}</pre></td> `\n          )}\n        </tr>\n        <tr>\n          <td class=\"label\">${i18next.t('field.ooc')}</td>\n          ${subgroupDataItems.map(\n            dataItem => html` <td>${judgment?.[dataItem.tag]?.ooc ? html`<mwc-icon>done</mwc-icon>` : nothing}</td> `\n          )}\n        </tr>\n        <tr>\n          <td class=\"label\">${i18next.t('field.oos')}</td>\n          ${subgroupDataItems.map(\n            dataItem => html` <td>${judgment?.[dataItem.tag]?.oos ? html`<mwc-icon>done</mwc-icon>` : nothing}</td> `\n          )}\n        </tr>\n      </table>`\n  }\n\n  private buildSpec(useCaseNames: string[], spec: DataSpecLimitSet): string {\n    return OxDataUseCase.elaborateDataItemSpec(useCaseNames, spec)\n  }\n\n  private download(file: { mimetype: string; name: string; fullpath: string }) {\n    const element = document.createElement('a')\n    element.setAttribute('href', file.fullpath)\n    element.setAttribute('download', file.name!)\n    document.body.appendChild(element)\n    element.click()\n  }\n\n  private buildValue(type: string, value: any | any[]) {\n    if (value === undefined) {\n      return ''\n    }\n    const values = value instanceof Array ? value : [value]\n\n    if (type == 'file') {\n      const files = values.flat() as { mimetype: string; name: string; fullpath: string }[]\n\n      return files.map(file => html`<a @click=${() => this.download(file)}>${file.name}</a></br>`)\n    }\n\n    const elements = values.map((v: any, idx) => {\n      switch (typeof v) {\n        case 'boolean':\n          return html` <input type=\"checkbox\" .checked=${v} disabled />`\n          break\n\n        default:\n          if (type == 'date') {\n            return new Date(v).toLocaleDateString()\n          } else if (type == 'datetime') {\n            return new Date(v).toLocaleString()\n          }\n          return v ?? ''\n      }\n    })\n\n    return typeof values[0] === 'boolean' ? elements : elements.join(', ')\n  }\n}\n"]}
+{"version":3,"file":"ox-data-sample-subgroup-view.js","sourceRoot":"","sources":["../../src/ox-data-sample-subgroup-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataSample, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-sample-subgroup-view')\nexport class OxDataSampleSubgroupView extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n    }\n\n    h3 {\n      margin: var(--title-margin);\n      font: var(--title-font);\n      font-size: 20px;\n      color: var(--title-text-color);\n      text-transform: capitalize;\n    }\n\n    table {\n      border-collapse: collapse;\n      margin-bottom: var(--margin-default);\n    }\n\n    th {\n      padding: var(--th-padding);\n      border-top: var(--th-border-top);\n      border-left: var(--td-border-line, 1px solid rgba(0, 0, 0, 0.05));\n      border-bottom: var(--td-border-bottom);\n      text-transform: var(--th-text-transform);\n      font: var(--th-font);\n      font-weight: bold;\n      color: var(--th-color);\n      text-align: center;\n      white-space: nowrap;\n    }\n\n    th.label,\n    td.label {\n      background-color: var(--label-cell-background-color, #f6f6f6);\n      width: 120px;\n      text-transform: var(--th-text-transform);\n    }\n\n    tr {\n      background-color: var(--tr-background-color);\n    }\n\n    tr:hover {\n      background-color: var(--tr-background-hover-color);\n    }\n\n    td {\n      border-left: var(--td-border-line, 1px solid rgba(0, 0, 0, 0.05));\n      border-bottom: var(--td-border-bottom);\n      padding: var(--td-padding);\n      font: var(--td-font);\n      color: var(--td-color);\n      text-align: center;\n    }\n    tr th:first-child,\n    tr td:first-child {\n      border-left: none;\n    }\n\n    td md-icon {\n      color: var(--status-danger-color);\n    }\n\n    pre {\n      tab-size: 2;\n      text-align: left;\n    }\n  `\n\n  @property({ type: Object }) dataSample?: DataSample\n  @property({ type: String }) subgroup?: string\n\n  render() {\n    if (!this.dataSample) {\n      return html``\n    }\n\n    const { useCase, data = {}, judgment, dataItems = [] } = this.dataSample\n    const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []\n    const subgroupDataItems = dataItems.filter(dataItem => dataItem.group == this.subgroup && !dataItem.hidden)\n    const records = subgroupDataItems.reduce((max, dataItem) => {\n      const value = data[dataItem.tag]\n      return Math.max(max, Array.isArray(value) ? value.length : 1)\n    }, 0)\n\n    return html` <h3>${this.subgroup}</h3>\n      <table>\n        <tr>\n          <th class=\"label\">${i18next.t('field.name')}</th>\n          ${subgroupDataItems.map(\n            dataItem => html` <th>${dataItem.name} ${dataItem.unit ? `(${dataItem.unit})` : ''}</th> `\n          )}\n        </tr>\n        <tr>\n          <td class=\"label\">${i18next.t('field.description')}</td>\n          ${subgroupDataItems.map(dataItem => html` <td>${dataItem.description}</td> `)}\n        </tr>\n        ${Array.from({ length: records }, (_, index) => index).map(\n          index => html`\n            <tr>\n              <td class=\"label\">${records > 1 ? index + 1 : i18next.t('field.value')}</td>\n              ${subgroupDataItems.map(dataItem => {\n                const { tag = '', type } = dataItem\n                const valueArray = data[tag]\n                const value = Array.isArray(valueArray) ? valueArray[index] : index == 0 ? valueArray : undefined\n\n                return html` <td>${this.buildValue(type, value)}</td> `\n              })}\n            </tr>\n          `\n        )}\n        <tr>\n          <td class=\"label\">${i18next.t('field.spec')}</td>\n          ${subgroupDataItems.map(\n            dataItem => html` <td><pre>${this.buildSpec(useCaseNames, dataItem.spec)}</pre></td> `\n          )}\n        </tr>\n        <tr>\n          <td class=\"label\">${i18next.t('field.ooc')}</td>\n          ${subgroupDataItems.map(\n            dataItem => html` <td>${judgment?.[dataItem.tag]?.ooc ? html`<md-icon>done</md-icon>` : nothing}</td> `\n          )}\n        </tr>\n        <tr>\n          <td class=\"label\">${i18next.t('field.oos')}</td>\n          ${subgroupDataItems.map(\n            dataItem => html` <td>${judgment?.[dataItem.tag]?.oos ? html`<md-icon>done</md-icon>` : nothing}</td> `\n          )}\n        </tr>\n      </table>`\n  }\n\n  private buildSpec(useCaseNames: string[], spec: DataSpecLimitSet): string {\n    return OxDataUseCase.elaborateDataItemSpec(useCaseNames, spec)\n  }\n\n  private download(file: { mimetype: string; name: string; fullpath: string }) {\n    const element = document.createElement('a')\n    element.setAttribute('href', file.fullpath)\n    element.setAttribute('download', file.name!)\n    document.body.appendChild(element)\n    element.click()\n  }\n\n  private buildValue(type: string, value: any | any[]) {\n    if (value === undefined) {\n      return ''\n    }\n    const values = value instanceof Array ? value : [value]\n\n    if (type == 'file') {\n      const files = values.flat() as { mimetype: string; name: string; fullpath: string }[]\n\n      return files.map(file => html`<a @click=${() => this.download(file)}>${file.name}</a></br>`)\n    }\n\n    const elements = values.map((v: any, idx) => {\n      switch (typeof v) {\n        case 'boolean':\n          return html` <input type=\"checkbox\" .checked=${v} disabled />`\n          break\n\n        default:\n          if (type == 'date') {\n            return new Date(v).toLocaleDateString()\n          } else if (type == 'datetime') {\n            return new Date(v).toLocaleString()\n          }\n          return v ?? ''\n      }\n    })\n\n    return typeof values[0] === 'boolean' ? elements : elements.join(', ')\n  }\n}\n"]}

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

@@ -5,7 +5,7 @@ import { DataSample } from './types.js';
 export declare class OxDataSampleView extends LitElement {
     static styles: import("lit").CSSResult;
     dataSample?: DataSample;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     private groupDataItemsByGroup;
     private buildSpec;
     private download;

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

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-file.js';
 import './ox-data-sample-subgroup-view.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
 import { OxDataUseCase } from './usecase/ox-data-use-case.js';
@@ -17,42 +17,46 @@ let OxDataSampleView = class OxDataSampleView extends LitElement {
         const dataItemSubgroups = this.groupDataItemsByGroup(dataItems);
         return html ` <h2>${name}</h2>
       <p page-description>
-        <mwc-icon>info_outline</mwc-icon> ${description}<br />
-        <mwc-icon>alarm</mwc-icon> ${i18next.t('field.work-date')}: ${workDate} ${workShift} |
-        <mwc-icon>pending_actions</mwc-icon> ${i18next.t('field.collected-at')}:
+        <md-icon>info</md-icon> ${description}<br />
+        <md-icon>alarm</md-icon> ${i18next.t('field.work-date')}: ${workDate} ${workShift} |
+        <md-icon>pending_actions</md-icon> ${i18next.t('field.collected-at')}:
         ${formatter.format(new Date(collectedAt))}
       </p>
 
       <form>
-        <table>
-          <tr>
-            <th item>${i18next.t('field.item')}</th>
-            <th>${i18next.t('field.description')}</th>
-            <th>${i18next.t('field.finalizing-function')}</th>
-            <th>${i18next.t('field.unit')}</th>
-            <th value>${i18next.t('field.value')}</th>
-            <th>${i18next.t('field.spec')}</th>
-            <th>${i18next.t('field.ooc')}</th>
-            <th>${i18next.t('field.oos')}</th>
-          </tr>
-          ${nonGroupDataItems.map(dataItem => {
-            const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem;
-            const value = data[tag];
-            const { ooc, oos } = (judgment === null || judgment === void 0 ? void 0 : judgment[tag]) || {};
-            return html `
-              <tr ?ooc=${ooc} ?oos=${oos}>
-                <td name>${name}</td>
-                <td>${description}</td>
-                <td>${stat}</td>
-                <td>${unit}</td>
-                <td>${this.buildValue(type, value)}</td>
-                <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>
-                <td>${ooc ? html `<mwc-icon>done</mwc-icon>` : ''}</td>
-                <td>${oos ? html `<mwc-icon>done</mwc-icon>` : ''}</td>
-              </tr>
-            `;
-        })}
-        </table>
+        ${nonGroupDataItems.length > 0
+            ? html `
+              <table>
+                <tr>
+                  <th item>${i18next.t('field.item')}</th>
+                  <th>${i18next.t('field.description')}</th>
+                  <th>${i18next.t('field.finalizing-function')}</th>
+                  <th>${i18next.t('field.unit')}</th>
+                  <th value>${i18next.t('field.value')}</th>
+                  <th>${i18next.t('field.spec')}</th>
+                  <th>${i18next.t('field.ooc')}</th>
+                  <th>${i18next.t('field.oos')}</th>
+                </tr>
+                ${nonGroupDataItems.map(dataItem => {
+                const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem;
+                const value = data[tag];
+                const { ooc, oos } = (judgment === null || judgment === void 0 ? void 0 : judgment[tag]) || {};
+                return html `
+                    <tr ?ooc=${ooc} ?oos=${oos}>
+                      <td name>${name}</td>
+                      <td>${description}</td>
+                      <td>${stat}</td>
+                      <td>${unit}</td>
+                      <td>${this.buildValue(type, value)}</td>
+                      <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>
+                      <td>${ooc ? html `<md-icon>done</md-icon>` : ''}</td>
+                      <td>${oos ? html `<md-icon>done</md-icon>` : ''}</td>
+                    </tr>
+                  `;
+            })}
+              </table>
+            `
+            : nothing}
         ${Object.keys(dataItemSubgroups).map(subgroup => {
             return html `
             <ox-data-sample-subgroup-view
@@ -142,7 +146,7 @@ OxDataSampleView.styles = css `
     [page-description] * {
       vertical-align: middle;
     }
-    [page-description] mwc-icon {
+    [page-description] md-icon {
       margin-top: -2px;
       font-size: 0.9rem;
       color: var(--page-description-color);
@@ -160,6 +164,7 @@ OxDataSampleView.styles = css `
       font: var(--th-font);
       color: var(--th-color);
       text-align: left;
+      white-space: nowrap;
     }
     th[item] {
       min-width: 100px;
@@ -189,13 +194,25 @@ OxDataSampleView.styles = css `
     td[name] {
       font-weight: bold;
     }
-    td mwc-icon {
+    td md-icon {
       color: var(--status-danger-color);
     }
 
     pre {
       tab-size: 2;
     }
+
+    @media print {
+      :host {
+        display: block;
+      }
+    }
+
+    @media screen and (max-width: 480px) {
+      th {
+        min-width: 50px;
+      }
+    }
   `;
 __decorate([
     property({ type: Object })

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

@@ -1 +1 @@
-{"version":3,"file":"ox-data-sample-view.js","sourceRoot":"","sources":["../../src/ox-data-sample-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport './ox-data-sample-subgroup-view.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataItem, DataSample, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-sample-view')\nexport class OxDataSampleView extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n    }\n\n    form {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n\n    h2 {\n      margin: var(--title-margin);\n      font: var(--title-font);\n      color: var(--title-text-color);\n      text-transform: capitalize;\n    }\n    [page-description] {\n      margin: var(--page-description-margin);\n      opacity: 0.7;\n      font: var(--page-description-font);\n      color: var(--secondary-color);\n      text-transform: capitalize;\n    }\n    [page-description] * {\n      vertical-align: middle;\n    }\n    [page-description] mwc-icon {\n      margin-top: -2px;\n      font-size: 0.9rem;\n      color: var(--page-description-color);\n    }\n\n    table {\n      border-collapse: collapse;\n      margin-bottom: var(--margin-default);\n    }\n    th {\n      padding: var(--th-padding);\n      border-top: var(--th-border-top);\n      border-bottom: var(--td-border-bottom);\n      text-transform: var(--th-text-transform);\n      font: var(--th-font);\n      color: var(--th-color);\n      text-align: left;\n    }\n    th[item] {\n      min-width: 100px;\n    }\n    th[value] {\n      min-width: 100px;\n    }\n    tr {\n      background-color: var(--tr-background-color);\n    }\n    tr:nth-child(odd) {\n      background-color: var(--tr-background-odd-color);\n    }\n    tr:hover {\n      background-color: var(--tr-background-hover-color);\n    }\n    tr[ooc],\n    tr[oos] {\n      background-color: #fefbdf;\n    }\n    td {\n      border-bottom: var(--td-border-bottom);\n      padding: var(--td-padding);\n      font: var(--td-font);\n      color: var(--td-color);\n    }\n    td[name] {\n      font-weight: bold;\n    }\n    td mwc-icon {\n      color: var(--status-danger-color);\n    }\n\n    pre {\n      tab-size: 2;\n    }\n  `\n\n  @property({ type: Object }) dataSample?: DataSample\n\n  render() {\n    if (!this.dataSample) {\n      return html``\n    }\n\n    const {\n      name,\n      description,\n      collectedAt,\n      workDate,\n      workShift,\n      useCase,\n      data = {},\n      judgment,\n      dataItems = []\n    } = this.dataSample\n    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n    const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []\n    const nonGroupDataItems = dataItems.filter(dataItem => !dataItem.group && !dataItem.hidden)\n    const dataItemSubgroups = this.groupDataItemsByGroup(dataItems)\n\n    return html` <h2>${name}</h2>\n      <p page-description>\n        <mwc-icon>info_outline</mwc-icon> ${description}<br />\n        <mwc-icon>alarm</mwc-icon> ${i18next.t('field.work-date')}: ${workDate} ${workShift} |\n        <mwc-icon>pending_actions</mwc-icon> ${i18next.t('field.collected-at')}:\n        ${formatter.format(new Date(collectedAt!))}\n      </p>\n\n      <form>\n        <table>\n          <tr>\n            <th item>${i18next.t('field.item')}</th>\n            <th>${i18next.t('field.description')}</th>\n            <th>${i18next.t('field.finalizing-function')}</th>\n            <th>${i18next.t('field.unit')}</th>\n            <th value>${i18next.t('field.value')}</th>\n            <th>${i18next.t('field.spec')}</th>\n            <th>${i18next.t('field.ooc')}</th>\n            <th>${i18next.t('field.oos')}</th>\n          </tr>\n          ${nonGroupDataItems.map(dataItem => {\n            const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem\n            const value = data[tag]\n            const { ooc, oos } = judgment?.[tag] || {}\n\n            return html`\n              <tr ?ooc=${ooc} ?oos=${oos}>\n                <td name>${name}</td>\n                <td>${description}</td>\n                <td>${stat}</td>\n                <td>${unit}</td>\n                <td>${this.buildValue(type, value)}</td>\n                <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>\n                <td>${ooc ? html`<mwc-icon>done</mwc-icon>` : ''}</td>\n                <td>${oos ? html`<mwc-icon>done</mwc-icon>` : ''}</td>\n              </tr>\n            `\n          })}\n        </table>\n        ${Object.keys(dataItemSubgroups).map(subgroup => {\n          return html`\n            <ox-data-sample-subgroup-view\n              .subgroup=${subgroup}\n              .dataSample=${this.dataSample}\n            ></ox-data-sample-subgroup-view>\n          `\n        })}\n      </form>`\n  }\n\n  private groupDataItemsByGroup(dataItems: DataItem[]): { [group: string]: DataItem[] } {\n    const groupedDataItems: { [group: string]: DataItem[] } = {}\n\n    for (const dataItem of dataItems) {\n      const { group, hidden } = dataItem\n\n      if (group && !hidden) {\n        if (!groupedDataItems[group]) {\n          groupedDataItems[group] = []\n        }\n\n        groupedDataItems[group].push(dataItem)\n      }\n    }\n\n    return groupedDataItems\n  }\n\n  private buildSpec(useCaseNames: string[], spec: DataSpecLimitSet): string {\n    return OxDataUseCase.elaborateDataItemSpec(useCaseNames, spec)\n  }\n\n  private download(file: { mimetype: string; name: string; fullpath: string }) {\n    const element = document.createElement('a')\n    element.setAttribute('href', file.fullpath)\n    element.setAttribute('download', file.name!)\n    document.body.appendChild(element)\n    element.click()\n  }\n\n  private buildValue(type: string, value: any | any[]) {\n    if (value === undefined) {\n      return ''\n    }\n    const values = value instanceof Array ? value : [value]\n\n    if (type == 'file') {\n      const files = values.flat() as { mimetype: string; name: string; fullpath: string }[]\n\n      return files.map(file => html`<a @click=${() => this.download(file)}>${file.name}</a></br>`)\n    }\n\n    const elements = values.map((v: any, idx) => {\n      switch (typeof v) {\n        case 'boolean':\n          return html` <input type=\"checkbox\" .checked=${v} disabled />`\n          break\n\n        default:\n          if (type == 'date') {\n            return new Date(v).toLocaleDateString()\n          } else if (type == 'datetime') {\n            return new Date(v).toLocaleString()\n          }\n          return v ?? ''\n      }\n    })\n\n    return typeof values[0] === 'boolean' ? elements : elements.join(', ')\n  }\n}\n"]}
+{"version":3,"file":"ox-data-sample-view.js","sourceRoot":"","sources":["../../src/ox-data-sample-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport './ox-data-sample-subgroup-view.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataItem, DataSample, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-sample-view')\nexport class OxDataSampleView extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n    }\n\n    form {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n\n    h2 {\n      margin: var(--title-margin);\n      font: var(--title-font);\n      color: var(--title-text-color);\n      text-transform: capitalize;\n    }\n    [page-description] {\n      margin: var(--page-description-margin);\n      opacity: 0.7;\n      font: var(--page-description-font);\n      color: var(--secondary-color);\n      text-transform: capitalize;\n    }\n    [page-description] * {\n      vertical-align: middle;\n    }\n    [page-description] md-icon {\n      margin-top: -2px;\n      font-size: 0.9rem;\n      color: var(--page-description-color);\n    }\n\n    table {\n      border-collapse: collapse;\n      margin-bottom: var(--margin-default);\n    }\n    th {\n      padding: var(--th-padding);\n      border-top: var(--th-border-top);\n      border-bottom: var(--td-border-bottom);\n      text-transform: var(--th-text-transform);\n      font: var(--th-font);\n      color: var(--th-color);\n      text-align: left;\n      white-space: nowrap;\n    }\n    th[item] {\n      min-width: 100px;\n    }\n    th[value] {\n      min-width: 100px;\n    }\n    tr {\n      background-color: var(--tr-background-color);\n    }\n    tr:nth-child(odd) {\n      background-color: var(--tr-background-odd-color);\n    }\n    tr:hover {\n      background-color: var(--tr-background-hover-color);\n    }\n    tr[ooc],\n    tr[oos] {\n      background-color: #fefbdf;\n    }\n    td {\n      border-bottom: var(--td-border-bottom);\n      padding: var(--td-padding);\n      font: var(--td-font);\n      color: var(--td-color);\n    }\n    td[name] {\n      font-weight: bold;\n    }\n    td md-icon {\n      color: var(--status-danger-color);\n    }\n\n    pre {\n      tab-size: 2;\n    }\n\n    @media print {\n      :host {\n        display: block;\n      }\n    }\n\n    @media screen and (max-width: 480px) {\n      th {\n        min-width: 50px;\n      }\n    }\n  `\n\n  @property({ type: Object }) dataSample?: DataSample\n\n  render() {\n    if (!this.dataSample) {\n      return html``\n    }\n\n    const {\n      name,\n      description,\n      collectedAt,\n      workDate,\n      workShift,\n      useCase,\n      data = {},\n      judgment,\n      dataItems = []\n    } = this.dataSample\n    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n    const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []\n    const nonGroupDataItems = dataItems.filter(dataItem => !dataItem.group && !dataItem.hidden)\n    const dataItemSubgroups = this.groupDataItemsByGroup(dataItems)\n\n    return html` <h2>${name}</h2>\n      <p page-description>\n        <md-icon>info</md-icon> ${description}<br />\n        <md-icon>alarm</md-icon> ${i18next.t('field.work-date')}: ${workDate} ${workShift} |\n        <md-icon>pending_actions</md-icon> ${i18next.t('field.collected-at')}:\n        ${formatter.format(new Date(collectedAt!))}\n      </p>\n\n      <form>\n        ${nonGroupDataItems.length > 0\n          ? html`\n              <table>\n                <tr>\n                  <th item>${i18next.t('field.item')}</th>\n                  <th>${i18next.t('field.description')}</th>\n                  <th>${i18next.t('field.finalizing-function')}</th>\n                  <th>${i18next.t('field.unit')}</th>\n                  <th value>${i18next.t('field.value')}</th>\n                  <th>${i18next.t('field.spec')}</th>\n                  <th>${i18next.t('field.ooc')}</th>\n                  <th>${i18next.t('field.oos')}</th>\n                </tr>\n                ${nonGroupDataItems.map(dataItem => {\n                  const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem\n                  const value = data[tag]\n                  const { ooc, oos } = judgment?.[tag] || {}\n\n                  return html`\n                    <tr ?ooc=${ooc} ?oos=${oos}>\n                      <td name>${name}</td>\n                      <td>${description}</td>\n                      <td>${stat}</td>\n                      <td>${unit}</td>\n                      <td>${this.buildValue(type, value)}</td>\n                      <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>\n                      <td>${ooc ? html`<md-icon>done</md-icon>` : ''}</td>\n                      <td>${oos ? html`<md-icon>done</md-icon>` : ''}</td>\n                    </tr>\n                  `\n                })}\n              </table>\n            `\n          : nothing}\n        ${Object.keys(dataItemSubgroups).map(subgroup => {\n          return html`\n            <ox-data-sample-subgroup-view\n              .subgroup=${subgroup}\n              .dataSample=${this.dataSample}\n            ></ox-data-sample-subgroup-view>\n          `\n        })}\n      </form>`\n  }\n\n  private groupDataItemsByGroup(dataItems: DataItem[]): { [group: string]: DataItem[] } {\n    const groupedDataItems: { [group: string]: DataItem[] } = {}\n\n    for (const dataItem of dataItems) {\n      const { group, hidden } = dataItem\n\n      if (group && !hidden) {\n        if (!groupedDataItems[group]) {\n          groupedDataItems[group] = []\n        }\n\n        groupedDataItems[group].push(dataItem)\n      }\n    }\n\n    return groupedDataItems\n  }\n\n  private buildSpec(useCaseNames: string[], spec: DataSpecLimitSet): string {\n    return OxDataUseCase.elaborateDataItemSpec(useCaseNames, spec)\n  }\n\n  private download(file: { mimetype: string; name: string; fullpath: string }) {\n    const element = document.createElement('a')\n    element.setAttribute('href', file.fullpath)\n    element.setAttribute('download', file.name!)\n    document.body.appendChild(element)\n    element.click()\n  }\n\n  private buildValue(type: string, value: any | any[]) {\n    if (value === undefined) {\n      return ''\n    }\n    const values = value instanceof Array ? value : [value]\n\n    if (type == 'file') {\n      const files = values.flat() as { mimetype: string; name: string; fullpath: string }[]\n\n      return files.map(file => html`<a @click=${() => this.download(file)}>${file.name}</a></br>`)\n    }\n\n    const elements = values.map((v: any, idx) => {\n      switch (typeof v) {\n        case 'boolean':\n          return html` <input type=\"checkbox\" .checked=${v} disabled />`\n          break\n\n        default:\n          if (type == 'date') {\n            return new Date(v).toLocaleDateString()\n          } else if (type == 'datetime') {\n            return new Date(v).toLocaleString()\n          }\n          return v ?? ''\n      }\n    })\n\n    return typeof values[0] === 'boolean' ? elements : elements.join(', ')\n  }\n}\n"]}

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

@@ -4,7 +4,7 @@ import { DataSummary } from './types.js';
 export declare class OxDataSummaryView extends LitElement {
     static styles: import("lit").CSSResult;
     dataSummary?: DataSummary;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     private buildSpec;
     private buildValue;
 }

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

@@ -13,8 +13,8 @@ let OxDataSummaryView = class OxDataSummaryView extends LitElement {
         const useCaseNames = (useCase === null || useCase === void 0 ? void 0 : useCase.split(',').filter(useCase => useCase.trim())) || [];
         return html ` <h2>${name}</h2>
       <p page-description>
-        <mwc-icon>info_outline</mwc-icon> ${description}<br />
-        <mwc-icon>alarm</mwc-icon> ${i18next.t('field.date')}: ${date} ${period}
+        <md-icon>info</md-icon> ${description}<br />
+        <md-icon>alarm</md-icon> ${i18next.t('field.date')}: ${date} ${period}
       </p>
 
       <form>
@@ -101,7 +101,7 @@ OxDataSummaryView.styles = css `
     [page-description] * {
       vertical-align: middle;
     }
-    [page-description] mwc-icon {
+    [page-description] md-icon {
       margin-top: -2px;
       font-size: 0.9rem;
       color: var(--page-description-color);
@@ -148,13 +148,19 @@ OxDataSummaryView.styles = css `
     td[name] {
       font-weight: bold;
     }
-    td mwc-icon {
+    td md-icon {
       color: var(--status-danger-color);
     }
 
     pre {
       tab-size: 2;
     }
+
+    @media screen and (max-width: 480px) {
+      th {
+        min-width: 50px;
+      }
+    }
   `;
 __decorate([
     property({ type: Object })

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

@@ -1 +1 @@
-{"version":3,"file":"ox-data-summary-view.js","sourceRoot":"","sources":["../../src/ox-data-summary-view.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 { i18next } from '@operato/i18n'\n\nimport { DataSummary, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-summary-view')\nexport class OxDataSummaryView extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n    }\n\n    form {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n\n    h2 {\n      margin: var(--title-margin);\n      font: var(--title-font);\n      color: var(--title-text-color);\n      text-transform: capitalize;\n    }\n    [page-description] {\n      margin: var(--page-description-margin);\n      opacity: 0.7;\n      font: var(--page-description-font);\n      color: var(--secondary-color);\n      text-transform: capitalize;\n    }\n    [page-description] * {\n      vertical-align: middle;\n    }\n    [page-description] mwc-icon {\n      margin-top: -2px;\n      font-size: 0.9rem;\n      color: var(--page-description-color);\n    }\n\n    table {\n      border-collapse: collapse;\n      margin-bottom: var(--margin-default);\n    }\n    th {\n      padding: var(--th-padding);\n      border-top: var(--th-border-top);\n      border-bottom: var(--td-border-bottom);\n      text-transform: var(--th-text-transform);\n      font: var(--th-font);\n      color: var(--th-color);\n      text-align: left;\n    }\n    th[item] {\n      min-width: 100px;\n    }\n    th[value] {\n      min-width: 100px;\n    }\n    tr {\n      background-color: var(--tr-background-color);\n    }\n    tr:nth-child(odd) {\n      background-color: var(--tr-background-odd-color);\n    }\n    tr:hover {\n      background-color: var(--tr-background-hover-color);\n    }\n    tr[ooc],\n    tr[oos] {\n      background-color: #fefbdf;\n    }\n    td {\n      border-bottom: var(--td-border-bottom);\n      padding: var(--td-padding);\n      font: var(--td-font);\n      color: var(--td-color);\n    }\n    td[name] {\n      font-weight: bold;\n    }\n    td mwc-icon {\n      color: var(--status-danger-color);\n    }\n\n    pre {\n      tab-size: 2;\n    }\n  `\n\n  @property({ type: Object }) dataSummary?: DataSummary\n\n  render() {\n    if (!this.dataSummary) {\n      return html``\n    }\n\n    const { name, description, date, period, summary = {}, dataItems = [], useCase } = this.dataSummary\n    const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []\n\n    return html` <h2>${name}</h2>\n      <p page-description>\n        <mwc-icon>info_outline</mwc-icon> ${description}<br />\n        <mwc-icon>alarm</mwc-icon> ${i18next.t('field.date')}: ${date} ${period}\n      </p>\n\n      <form>\n        <table>\n          <tr>\n            <th item>${i18next.t('field.item')}</th>\n            <th>${i18next.t('field.description')}</th>\n            <th>${i18next.t('field.finalizing-function')}</th>\n            <th>${i18next.t('field.unit')}</th>\n            <th value>${i18next.t('field.value')}</th>\n            <th>${i18next.t('field.spec')}</th>\n          </tr>\n          ${dataItems\n            .filter(dataItem => dataItem.stat)\n            .map(dataItem => {\n              const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem\n              const value = summary[tag]\n\n              return html`\n                <tr>\n                  <td name>${name}</td>\n                  <td>${description}</td>\n                  <td>${stat}</td>\n                  <td>${unit}</td>\n                  <td>${this.buildValue(type, value)}</td>\n                  <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>\n                </tr>\n              `\n            })}\n        </table>\n      </form>`\n  }\n\n  private buildSpec(useCaseNames: string[], spec: DataSpecLimitSet): string {\n    return OxDataUseCase.elaborateDataItemSpec(useCaseNames, spec)\n  }\n\n  private buildValue(type: string, value: any | any[]) {\n    if (value === undefined) {\n      return ''\n    }\n    const values = value instanceof Array ? value : [value]\n\n    const elements = values.map((v: any, idx) => {\n      switch (typeof v) {\n        case 'boolean':\n          return html` <input type=\"checkbox\" .checked=${v} disabled />`\n          break\n\n        default:\n          if (type == 'date') {\n            return new Date(v).toLocaleDateString()\n          } else if (type == 'datetime') {\n            return new Date(v).toLocaleString()\n          }\n          return v ?? ''\n      }\n    })\n\n    return typeof values[0] === 'boolean' ? elements : elements.join(', ')\n  }\n}\n"]}
+{"version":3,"file":"ox-data-summary-view.js","sourceRoot":"","sources":["../../src/ox-data-summary-view.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 { i18next } from '@operato/i18n'\n\nimport { DataSummary, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-summary-view')\nexport class OxDataSummaryView extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n    }\n\n    form {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n\n    h2 {\n      margin: var(--title-margin);\n      font: var(--title-font);\n      color: var(--title-text-color);\n      text-transform: capitalize;\n    }\n    [page-description] {\n      margin: var(--page-description-margin);\n      opacity: 0.7;\n      font: var(--page-description-font);\n      color: var(--secondary-color);\n      text-transform: capitalize;\n    }\n    [page-description] * {\n      vertical-align: middle;\n    }\n    [page-description] md-icon {\n      margin-top: -2px;\n      font-size: 0.9rem;\n      color: var(--page-description-color);\n    }\n\n    table {\n      border-collapse: collapse;\n      margin-bottom: var(--margin-default);\n    }\n    th {\n      padding: var(--th-padding);\n      border-top: var(--th-border-top);\n      border-bottom: var(--td-border-bottom);\n      text-transform: var(--th-text-transform);\n      font: var(--th-font);\n      color: var(--th-color);\n      text-align: left;\n    }\n    th[item] {\n      min-width: 100px;\n    }\n    th[value] {\n      min-width: 100px;\n    }\n    tr {\n      background-color: var(--tr-background-color);\n    }\n    tr:nth-child(odd) {\n      background-color: var(--tr-background-odd-color);\n    }\n    tr:hover {\n      background-color: var(--tr-background-hover-color);\n    }\n    tr[ooc],\n    tr[oos] {\n      background-color: #fefbdf;\n    }\n    td {\n      border-bottom: var(--td-border-bottom);\n      padding: var(--td-padding);\n      font: var(--td-font);\n      color: var(--td-color);\n    }\n    td[name] {\n      font-weight: bold;\n    }\n    td md-icon {\n      color: var(--status-danger-color);\n    }\n\n    pre {\n      tab-size: 2;\n    }\n\n    @media screen and (max-width: 480px) {\n      th {\n        min-width: 50px;\n      }\n    }\n  `\n\n  @property({ type: Object }) dataSummary?: DataSummary\n\n  render() {\n    if (!this.dataSummary) {\n      return html``\n    }\n\n    const { name, description, date, period, summary = {}, dataItems = [], useCase } = this.dataSummary\n    const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []\n\n    return html` <h2>${name}</h2>\n      <p page-description>\n        <md-icon>info</md-icon> ${description}<br />\n        <md-icon>alarm</md-icon> ${i18next.t('field.date')}: ${date} ${period}\n      </p>\n\n      <form>\n        <table>\n          <tr>\n            <th item>${i18next.t('field.item')}</th>\n            <th>${i18next.t('field.description')}</th>\n            <th>${i18next.t('field.finalizing-function')}</th>\n            <th>${i18next.t('field.unit')}</th>\n            <th value>${i18next.t('field.value')}</th>\n            <th>${i18next.t('field.spec')}</th>\n          </tr>\n          ${dataItems\n            .filter(dataItem => dataItem.stat)\n            .map(dataItem => {\n              const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem\n              const value = summary[tag]\n\n              return html`\n                <tr>\n                  <td name>${name}</td>\n                  <td>${description}</td>\n                  <td>${stat}</td>\n                  <td>${unit}</td>\n                  <td>${this.buildValue(type, value)}</td>\n                  <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>\n                </tr>\n              `\n            })}\n        </table>\n      </form>`\n  }\n\n  private buildSpec(useCaseNames: string[], spec: DataSpecLimitSet): string {\n    return OxDataUseCase.elaborateDataItemSpec(useCaseNames, spec)\n  }\n\n  private buildValue(type: string, value: any | any[]) {\n    if (value === undefined) {\n      return ''\n    }\n    const values = value instanceof Array ? value : [value]\n\n    const elements = values.map((v: any, idx) => {\n      switch (typeof v) {\n        case 'boolean':\n          return html` <input type=\"checkbox\" .checked=${v} disabled />`\n          break\n\n        default:\n          if (type == 'date') {\n            return new Date(v).toLocaleDateString()\n          } else if (type == 'datetime') {\n            return new Date(v).toLocaleString()\n          }\n          return v ?? ''\n      }\n    })\n\n    return typeof values[0] === 'boolean' ? elements : elements.join(', ')\n  }\n}\n"]}

package/dist/src/types.d.ts

@@ -1,12 +1,24 @@
+/**
+ * Represents a selectable option with a text label and a value.
+ */
 export type SelectOption = {
     text: string;
     value: string;
 };
+/**
+ * An array of selectable options.
+ */
 export type SelectOptions = SelectOption[];
+/**
+ * Defines the options and additional properties for a type.
+ */
 export type TypeOptions = {
     options?: SelectOptions;
     [prop: string]: any;
 };
+/**
+ * Describes the structure and properties of a data item.
+ */
 export type DataItem = {
     name: string;
     description: string;
@@ -26,6 +38,9 @@ export type DataItem = {
         };
     };
 };
+/**
+ * Defines the structure of a dataset, including its name, description, type, use case, and data items.
+ */
 export type DataSet = {
     name: string;
     description: string;
@@ -39,6 +54,9 @@ export type DataSet = {
         };
     };
 };
+/**
+ * Describes the definition of a data specification, including its type, label, name, and optional properties.
+ */
 export type DataSpecDefinition = {
     type: string;
     label: string;
@@ -47,42 +65,65 @@ export type DataSpecDefinition = {
         [option: string]: any;
     };
 };
+/**
+ * Describes a use case definition, including its name, description, help text, and specifications.
+ */
 export type UseCaseDefinition = {
     name: string;
     description: string;
     help: string;
     specs: DataSpecDefinition[];
 };
+/**
+ * Represents the limits for a data specification.
+ */
 export type DataSpecLimit = {
     [limit: string]: number | string | string[] | boolean;
 };
+/**
+ * A set of data specification limits, keyed by use case.
+ */
 export type DataSpecLimitSet = {
     [useCase: string]: DataSpecLimit;
 };
+/**
+ * Represents a collection of data, keyed by a tag.
+ */
 export type DataCollection = {
     [tag: string]: any;
 };
+/**
+ * Represents a judgment on data, indicating if it is out of control or out of specification.
+ */
 export type Judgment = {
     [tag: string]: {
         ooc: boolean;
         oos: boolean;
     };
 };
+/**
+ * Describes a data sample, including its name, description, use case, and associated data and judgments.
+ */
 export type DataSample = {
-    name: string;
-    description: string;
-    useCase: string;
+    name?: string;
+    description?: string;
+    useCase?: string;
     data?: DataCollection;
     judgment?: Judgment;
     dataItems?: DataItem[];
-    quota: number;
-    workDate: string;
-    workShift: string;
-    collectedAt: Date;
+    quota?: number;
+    workDate?: string;
+    workShift?: string;
+    collectedAt?: Date;
+    reviewActivityInstance?: any;
+    dataOoc?: DataOoc;
 };
 export type DataOocState = 'ISSUED' | 'REVIEWED' | 'CORRECTED';
+/**
+ * Extends DataSample with additional fields specific to an out of control state, including state, corrective actions, and review history.
+ */
 export type DataOoc = DataSample & {
-    state: DataOocState;
+    state?: DataOocState;
     correctiveInstruction?: string;
     correctiveAction?: string;
     reviewer?: {
@@ -95,7 +136,7 @@ export type DataOoc = DataSample & {
         name: string;
     };
     correctedAt?: Date;
-    history: {
+    history?: {
         user: {
             id: string;
             name: string;
@@ -104,7 +145,11 @@ export type DataOoc = DataSample & {
         comment: string;
         timestamp: number;
     }[];
+    resolveActivityInstance?: any;
 };
+/**
+ * Describes a summary of data, including its name, description, relevant data items, and key metrics.
+ */
 export type DataSummary = {
     name: string;
     description: string;
@@ -124,6 +169,9 @@ export type DataSummary = {
         [key: string]: any;
     };
 };
+/**
+ * Represents the result of an evaluation, indicating if data is out of specification or out of control.
+ */
 export type EvaluationResult = {
     oos: boolean;
     ooc: boolean;

package/dist/src/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type SelectOption = { text: string; value: string }\nexport type SelectOptions = SelectOption[]\nexport type 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  group: string\n  type: string\n  stat: string\n  active: boolean\n  options: TypeOptions\n  unit: string\n  quota: number\n  hidden: boolean\n  spec: {\n    [useCase: string]: {\n      [limit: string]: number | string | string[] | boolean\n    }\n  }\n}\n\nexport type DataSet = {\n  name: string\n  description: string\n  type: 'manual' | 'automatic'\n  useCase: string\n  active: boolean\n  dataItems: DataItem[]\n  spec: { [dataItem: string]: { [useCase: string]: any } }\n}\n\nexport type DataSpecDefinition = {\n  type: string\n  label: string\n  name: string\n  property?: { [option: string]: any }\n}\n\nexport type UseCaseDefinition = {\n  name: string\n  description: string\n  help: string\n  specs: DataSpecDefinition[]\n}\n\nexport type DataSpecLimit = {\n  [limit: string]: number | string | string[] | boolean\n}\n\nexport type DataSpecLimitSet = {\n  [useCase: string]: DataSpecLimit\n}\n\nexport type DataCollection = {\n  [tag: string]: any\n}\n\nexport type Judgment = {\n  [tag: string]: {\n    ooc: boolean\n    oos: boolean\n  }\n}\n\nexport type DataSample = {\n  name: string\n  description: string\n  useCase: string\n  data?: DataCollection\n  judgment?: Judgment\n  dataItems?: DataItem[]\n  quota: number\n  workDate: string\n  workShift: string\n  collectedAt: Date\n}\n\nexport type DataOocState = 'ISSUED' | 'REVIEWED' | 'CORRECTED'\n\nexport type DataOoc = DataSample & {\n  state: DataOocState\n  correctiveInstruction?: string\n  correctiveAction?: string\n  reviewer?: {\n    id: string\n    name: string\n  }\n  reviewedAt?: Date\n  corrector?: {\n    id: string\n    name: string\n  }\n  correctedAt?: Date\n  history: {\n    user: {\n      id: string\n      name: string\n    }\n    state: DataOocState\n    comment: string\n    timestamp: number\n  }[]\n}\n\nexport type DataSummary = {\n  name: string\n  description: string\n  dataItems?: DataItem[]\n  date?: string\n  period?: string\n  key01?: string\n  key02?: string\n  key03?: string\n  key04?: string\n  key05?: string\n  count?: number\n  countOoc?: number\n  countOos?: number\n  useCase?: string\n  summary?: { [key: string]: any }\n}\n\nexport type EvaluationResult = { oos: boolean; ooc: boolean }\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Represents a selectable option with a text label and a value.\n */\nexport type SelectOption = {\n  text: string\n  value: string\n}\n/**\n * An array of selectable options.\n */\nexport type SelectOptions = SelectOption[]\n/**\n * Defines the options and additional properties for a type.\n */\nexport type TypeOptions = {\n  options?: SelectOptions\n  [prop: string]: any\n}\n/**\n * Describes the structure and properties of a data item.\n */\nexport type DataItem = {\n  name: string\n  description: string\n  sequence: number\n  tag: string\n  group: string\n  type: string\n  stat: string\n  active: boolean\n  options: TypeOptions\n  unit: string\n  quota: number\n  hidden: boolean\n  spec: {\n    [useCase: string]: {\n      [limit: string]: number | string | string[] | boolean\n    }\n  }\n}\n/**\n * Defines the structure of a dataset, including its name, description, type, use case, and data items.\n */\nexport type DataSet = {\n  name: string\n  description: string\n  type: 'manual' | 'automatic'\n  useCase: string\n  active: boolean\n  dataItems: DataItem[]\n  spec: {\n    [dataItem: string]: {\n      [useCase: string]: any\n    }\n  }\n}\n/**\n * Describes the definition of a data specification, including its type, label, name, and optional properties.\n */\nexport type DataSpecDefinition = {\n  type: string\n  label: string\n  name: string\n  property?: {\n    [option: string]: any\n  }\n}\n/**\n * Describes a use case definition, including its name, description, help text, and specifications.\n */\nexport type UseCaseDefinition = {\n  name: string\n  description: string\n  help: string\n  specs: DataSpecDefinition[]\n}\n/**\n * Represents the limits for a data specification.\n */\nexport type DataSpecLimit = {\n  [limit: string]: number | string | string[] | boolean\n}\n/**\n * A set of data specification limits, keyed by use case.\n */\nexport type DataSpecLimitSet = {\n  [useCase: string]: DataSpecLimit\n}\n/**\n * Represents a collection of data, keyed by a tag.\n */\nexport type DataCollection = {\n  [tag: string]: any\n}\n/**\n * Represents a judgment on data, indicating if it is out of control or out of specification.\n */\nexport type Judgment = {\n  [tag: string]: {\n    ooc: boolean\n    oos: boolean\n  }\n}\n/**\n * Describes a data sample, including its name, description, use case, and associated data and judgments.\n */\nexport type DataSample = {\n  name?: string\n  description?: string\n  useCase?: string\n  data?: DataCollection\n  judgment?: Judgment\n  dataItems?: DataItem[]\n  quota?: number\n  workDate?: string\n  workShift?: string\n  collectedAt?: Date\n  reviewActivityInstance?: any\n  dataOoc?: DataOoc\n}\nexport type DataOocState = 'ISSUED' | 'REVIEWED' | 'CORRECTED'\n/**\n * Extends DataSample with additional fields specific to an out of control state, including state, corrective actions, and review history.\n */\nexport type DataOoc = DataSample & {\n  state?: DataOocState\n  correctiveInstruction?: string\n  correctiveAction?: string\n  reviewer?: {\n    id: string\n    name: string\n  }\n  reviewedAt?: Date\n  corrector?: {\n    id: string\n    name: string\n  }\n  correctedAt?: Date\n  history?: {\n    user: {\n      id: string\n      name: string\n    }\n    state: DataOocState\n    comment: string\n    timestamp: number\n  }[]\n  resolveActivityInstance?: any\n}\n/**\n * Describes a summary of data, including its name, description, relevant data items, and key metrics.\n */\nexport type DataSummary = {\n  name: string\n  description: string\n  dataItems?: DataItem[]\n  date?: string\n  period?: string\n  key01?: string\n  key02?: string\n  key03?: string\n  key04?: string\n  key05?: string\n  count?: number\n  countOoc?: number\n  countOos?: number\n  useCase?: string\n  summary?: {\n    [key: string]: any\n  }\n}\n/**\n * Represents the result of an evaluation, indicating if data is out of specification or out of control.\n */\nexport type EvaluationResult = {\n  oos: boolean\n  ooc: boolean\n}\n"]}

package/dist/src/usecase/ccp/ox-input-ccp-limits.d.ts

@@ -39,6 +39,6 @@ export declare class OxInputCcpLimits extends LitElement {
     maximum: HTMLInputElement;
     checkedAll: NodeListOf<HTMLInputElement>;
     firstUpdated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     private onChange;
 }

package/dist/src/usecase/qc/ox-input-qc-limits.d.ts

@@ -39,6 +39,6 @@ export declare class OxInputQcLimits extends LitElement {
     maximum: HTMLInputElement;
     checkedAll: NodeListOf<HTMLInputElement>;
     firstUpdated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     private onChange;
 }

package/dist/src/usecase/spc/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/usecase/spc/index.js

@@ -0,0 +1,8 @@
+/* Here, only the common module of client and server is imported/exported. Be careful not to use a module dedicated to client or server. */
+import { OxDataUseCase } from '../ox-data-use-case';
+import { OxDataUseCaseSPC } from './ox-data-use-case-spc';
+// OxPropertyEditor.register({
+//   'spc-limits': 'ox-property-editor-spc-limits'
+// })
+OxDataUseCase.registerUseCase('SPC', new OxDataUseCaseSPC());
+//# sourceMappingURL=index.js.map

package/dist/src/usecase/spc/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/usecase/spc/index.ts"],"names":[],"mappings":"AAAA,2IAA2I;AAE3I,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAEzD,8BAA8B;AAC9B,kDAAkD;AAClD,KAAK;AAEL,aAAa,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,gBAAgB,EAAE,CAAC,CAAA","sourcesContent":["/* Here, only the common module of client and server is imported/exported. Be careful not to use a module dedicated to client or server. */\n\nimport { OxDataUseCase } from '../ox-data-use-case'\nimport { OxDataUseCaseSPC } from './ox-data-use-case-spc'\n\n// OxPropertyEditor.register({\n//   'spc-limits': 'ox-property-editor-spc-limits'\n// })\n\nOxDataUseCase.registerUseCase('SPC', new OxDataUseCaseSPC())\n"]}

package/dist/src/usecase/spc/ox-data-use-case-spc.d.ts

@@ -0,0 +1,7 @@
+import { DataItem, EvaluationResult, UseCaseDefinition } from '../../types';
+import { OxDataUseCase } from '../ox-data-use-case.js';
+export declare class OxDataUseCaseSPC extends OxDataUseCase {
+    getSpecification(dataItem: DataItem): UseCaseDefinition;
+    evaluate(spec: any, values: any | any[]): EvaluationResult | undefined;
+    elaborateUseCaseSpec(limits: any): string | undefined;
+}