@operato/dataset 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -1 +1 @@
-{"version":3,"file":"ox-data-ooc-brief-view.js","sourceRoot":"","sources":["../../src/ox-data-ooc-brief-view.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAKhC,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAiGhD,MAAM;QACJ,MAAM,EACJ,qBAAqB,GAAG,EAAE,EAC1B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,WAAW,EACX,KAAK,EACN,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QACtB,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;QAExG,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,OAAO;;0BAE3B,KAAK,IAAI,WAAW,cAAc,KAAK,IAAI,WAAW;;0CAEtC,KAAK,IAAI,EAAE;;;QAG7C,QAAQ;YACR,CAAC,CAAC,IAAI,CAAA;6BACe,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;;;mBAGnD,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAW,CAAC,CAAC,uCAAuC,QAAQ,CAAC,IAAI;;wBAEtF,qBAAqB;;WAElC;YACH,CAAC,CAAC,OAAO;QACT,SAAS;YACT,CAAC,CAAC,IAAI,CAAA;6BACe,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC;;;mBAG9C,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,WAAY,CAAC,CAAC,uCAAuC,SAAS,CAAC,IAAI;;wBAExF,gBAAgB;;WAE7B;YACH,CAAC,CAAC,OAAO;KACZ,CAAA;IACH,CAAC;;AA3IM,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4FlB,AA5FY,CA4FZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAkB;AA/FlC,kBAAkB;IAD9B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,kBAAkB,CA6I9B","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport './ox-data-sample-view'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataOoc, DataSet } from './types.js'\n\n@customElement('ox-data-ooc-brief-view')\nexport class OxDataOocBriefView extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      background-color: var(--main-section-background-color);\n\n      position: relative;\n    }\n\n    h3 {\n      margin: var(--title-margin);\n      padding-top: 12px;\n      font: var(--title-font);\n      color: var(--title-text-color);\n    }\n\n    h3[state] {\n      position: absolute;\n      margin: 0;\n      padding: 0;\n      right: 10px;\n      width: 90px;\n      text-align: center;\n    }\n\n    h3[corrective] {\n      font-size: 20px;\n    }\n\n    mwc-icon {\n      font-size: 16px;\n    }\n    [state] mwc-icon {\n      font-size: 80px;\n      opacity: 0.4;\n      color: var(--primary-background-color);\n    }\n\n    [state] div {\n      position: absolute;\n      top: 22px;\n      left: 0;\n      right: 0;\n      font-size: 10px;\n      color: var(--theme-white-color);\n    }\n    [state] [field-state] {\n      display: block;\n      border-radius: 4px;\n      background-color: var(--primary-color);\n      box-shadow: var(--box-shadow);\n      margin-top: var(--margin-narrow);\n      padding: 1px 3px;\n      font-size: 0.8rem;\n    }\n    [danger] [field-state] {\n      background-color: var(--status-danger-color);\n    }\n    [complete] [field-state] {\n      background-color: var(--status-info-color);\n    }\n\n    [corrective-content] [field-state] {\n      border-radius: 2px;\n      background-color: var(--primary-color);\n      margin-left: var(--margin-default);\n      padding: 1px 2px;\n      font-size: 0.7rem;\n      color: var(--theme-white-color);\n    }\n    [corrective-content] {\n      background-color: var(--theme-white-color);\n      box-shadow: var(--box-shadow);\n      border-radius: var(--border-radius);\n      margin: var(--page-description-margin);\n      padding: var(--padding-default);\n      font: var(--page-description-font);\n      color: var(--secondary-color);\n    }\n    [corrective-content] mwc-icon {\n      position: relative;\n      top: 3px;\n      margin: 0 2px 0 10px;\n    }\n    [field-info] {\n      opacity: 0.7;\n    }\n    [corrective-content] strong {\n      display: block;\n      font-weight: bold;\n      font-size: 0.9rem;\n    }\n  `\n\n  @property({ type: Object }) dataOoc?: DataOoc\n\n  render() {\n    const {\n      correctiveInstruction = '',\n      correctiveAction = '',\n      reviewer,\n      reviewedAt,\n      corrector,\n      correctedAt,\n      state\n    } = this.dataOoc || {}\n    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n    return html`\n      <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>\n\n      <h3 state ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>\n        <mwc-icon>shield</mwc-icon>\n        <div>DATA OOC <span field-state>${state || ''}</span></div>\n      </h3>\n\n      ${reviewer\n        ? html`\n            <h3 corrective>${i18next.t('label.corrective instruction')}</h3>\n            <p corrective-content>\n              <span field-info\n                >${formatter.format(new Date(reviewedAt!))} <mwc-icon>account_circle</mwc-icon>${reviewer.name}</span\n              >\n              <strong>${correctiveInstruction}</strong>\n            </p>\n          `\n        : nothing}\n      ${corrector\n        ? html`\n            <h3 corrective>${i18next.t('label.corrective action')}</h3>\n            <p corrective-content>\n              <span field-info\n                >${formatter.format(new Date(correctedAt!))} <mwc-icon>account_circle</mwc-icon>${corrector.name}</span\n              >\n              <strong>${correctiveAction}</strong>\n            </p>\n          `\n        : nothing}\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-data-ooc-brief-view.js","sourceRoot":"","sources":["../../src/ox-data-ooc-brief-view.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,qBAAqB,CAAA;AAC5B,OAAO,+BAA+B,CAAA;AACtC,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAKpD,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAqBhD,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAEpC,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,OAAO;kCACnB,KAAK;8CACO,IAAI,CAAC,OAAO;KACrD,CAAA;IACH,CAAC;;AA5BM,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBlB,AAhBY,CAgBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAkB;AAnBlC,kBAAkB;IAD9B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,kBAAkB,CA8B9B","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport './ox-data-sample-view'\nimport './ox-data-ooc-badge'\nimport './ox-data-ooc-correction-part'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataOoc } from './types.js'\n\n@customElement('ox-data-ooc-brief-view')\nexport class OxDataOocBriefView extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n\n      position: relative;\n    }\n\n    ox-data-ooc-badge {\n      position: absolute;\n\n      margin: 0;\n      padding: 0;\n      right: 10px;\n      width: 90px;\n    }\n  `\n\n  @property({ type: Object }) dataOoc?: DataOoc\n\n  render() {\n    const { state } = this.dataOoc || {}\n\n    return html`\n      <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>\n      <ox-data-ooc-badge .state=${state}></ox-data-ooc-badge>\n      <ox-data-ooc-correction-part .dataOoc=${this.dataOoc}></ox-data-ooc-correction-part>\n    `\n  }\n}\n"]}

package/dist/src/ox-data-ooc-correction-part.d.ts

@@ -0,0 +1,9 @@
+import '@operato/input/ox-input-file.js';
+import '@material/mwc-icon';
+import { LitElement } from 'lit';
+import { DataOoc } from './types.js';
+export declare class OxDataOocCorrectionPart extends LitElement {
+    static styles: import("lit").CSSResult;
+    dataOoc?: DataOoc;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/src/ox-data-ooc-correction-part.js

@@ -0,0 +1,99 @@
+import { __decorate } from "tslib";
+import '@operato/input/ox-input-file.js';
+import '@material/mwc-icon';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+let OxDataOocCorrectionPart = class OxDataOocCorrectionPart extends LitElement {
+    render() {
+        const { correctiveInstruction = '', correctiveAction = '', reviewer, reviewedAt, corrector, correctedAt } = this.dataOoc || {};
+        const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
+        return html `
+      ${reviewer
+            ? html `
+            <h3>${i18next.t('label.corrective instruction')}</h3>
+            <p>
+              <span field-info
+                >${formatter.format(new Date(reviewedAt))} <mwc-icon>account_circle</mwc-icon>${reviewer.name}</span
+              >
+              <strong>${correctiveInstruction}</strong>
+            </p>
+          `
+            : nothing}
+      ${corrector
+            ? html `
+            <h3>${i18next.t('label.corrective action')}</h3>
+            <p>
+              <span field-info
+                >${formatter.format(new Date(correctedAt))} <mwc-icon>account_circle</mwc-icon>${corrector.name}</span
+              >
+              <strong>${correctiveAction}</strong>
+            </p>
+          `
+            : nothing}
+    `;
+    }
+};
+OxDataOocCorrectionPart.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+
+      position: relative;
+    }
+
+    h3 {
+      margin: var(--title-margin);
+      padding-top: 12px;
+      font: var(--title-font);
+      color: var(--title-text-color);
+      font-size: 20px;
+    }
+
+    mwc-icon {
+      font-size: 16px;
+    }
+
+    [field-state] {
+      border-radius: 2px;
+      background-color: var(--primary-color);
+      margin-left: var(--margin-default);
+      padding: 1px 2px;
+      font-size: 0.7rem;
+      color: var(--theme-white-color);
+    }
+
+    p {
+      background-color: var(--theme-white-color);
+      box-shadow: var(--box-shadow);
+      border-radius: var(--border-radius);
+      margin: var(--page-description-margin);
+      padding: var(--padding-default);
+      font: var(--page-description-font);
+      color: var(--secondary-color);
+    }
+
+    mwc-icon {
+      position: relative;
+      top: 3px;
+      margin: 0 2px 0 10px;
+    }
+
+    [field-info] {
+      opacity: 0.7;
+    }
+
+    strong {
+      display: block;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxDataOocCorrectionPart.prototype, "dataOoc", void 0);
+OxDataOocCorrectionPart = __decorate([
+    customElement('ox-data-ooc-correction-part')
+], OxDataOocCorrectionPart);
+export { OxDataOocCorrectionPart };
+//# sourceMappingURL=ox-data-ooc-correction-part.js.map

package/dist/src/ox-data-ooc-correction-part.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-data-ooc-correction-part.js","sourceRoot":"","sources":["../../src/ox-data-ooc-correction-part.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAKhC,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IA2DrD,MAAM;QACJ,MAAM,EACJ,qBAAqB,GAAG,EAAE,EAC1B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,WAAW,EACZ,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QACtB,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;QAExG,OAAO,IAAI,CAAA;QACP,QAAQ;YACR,CAAC,CAAC,IAAI,CAAA;kBACI,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;;;mBAGxC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAW,CAAC,CAAC,uCAAuC,QAAQ,CAAC,IAAI;;wBAEtF,qBAAqB;;WAElC;YACH,CAAC,CAAC,OAAO;QACT,SAAS;YACT,CAAC,CAAC,IAAI,CAAA;kBACI,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC;;;mBAGnC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,WAAY,CAAC,CAAC,uCAAuC,SAAS,CAAC,IAAI;;wBAExF,gBAAgB;;WAE7B;YACH,CAAC,CAAC,OAAO;KACZ,CAAA;IACH,CAAC;;AA7FM,8BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDlB,AAtDY,CAsDZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAkB;AAzDlC,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CA+FnC","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataOoc } from './types.js'\n\n@customElement('ox-data-ooc-correction-part')\nexport class OxDataOocCorrectionPart extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n\n      position: relative;\n    }\n\n    h3 {\n      margin: var(--title-margin);\n      padding-top: 12px;\n      font: var(--title-font);\n      color: var(--title-text-color);\n      font-size: 20px;\n    }\n\n    mwc-icon {\n      font-size: 16px;\n    }\n\n    [field-state] {\n      border-radius: 2px;\n      background-color: var(--primary-color);\n      margin-left: var(--margin-default);\n      padding: 1px 2px;\n      font-size: 0.7rem;\n      color: var(--theme-white-color);\n    }\n\n    p {\n      background-color: var(--theme-white-color);\n      box-shadow: var(--box-shadow);\n      border-radius: var(--border-radius);\n      margin: var(--page-description-margin);\n      padding: var(--padding-default);\n      font: var(--page-description-font);\n      color: var(--secondary-color);\n    }\n\n    mwc-icon {\n      position: relative;\n      top: 3px;\n      margin: 0 2px 0 10px;\n    }\n\n    [field-info] {\n      opacity: 0.7;\n    }\n\n    strong {\n      display: block;\n      font-weight: bold;\n      font-size: 0.9rem;\n    }\n  `\n\n  @property({ type: Object }) dataOoc?: DataOoc\n\n  render() {\n    const {\n      correctiveInstruction = '',\n      correctiveAction = '',\n      reviewer,\n      reviewedAt,\n      corrector,\n      correctedAt\n    } = this.dataOoc || {}\n    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n    return html`\n      ${reviewer\n        ? html`\n            <h3>${i18next.t('label.corrective instruction')}</h3>\n            <p>\n              <span field-info\n                >${formatter.format(new Date(reviewedAt!))} <mwc-icon>account_circle</mwc-icon>${reviewer.name}</span\n              >\n              <strong>${correctiveInstruction}</strong>\n            </p>\n          `\n        : nothing}\n      ${corrector\n        ? html`\n            <h3>${i18next.t('label.corrective action')}</h3>\n            <p>\n              <span field-info\n                >${formatter.format(new Date(correctedAt!))} <mwc-icon>account_circle</mwc-icon>${corrector.name}</span\n              >\n              <strong>${correctiveAction}</strong>\n            </p>\n          `\n        : nothing}\n    `\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,72 @@
+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';
+let OxDataOocHistory = class OxDataOocHistory extends LitElement {
+    render() {
+        const { history = [] } = this.dataOoc || {};
+        const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
+        return html `
+      ${history.map(({ user, state, comment, timestamp }) => html `
+          <p page-history>
+            <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
+            <span field-info
+              >${formatter.format(new Date(timestamp))} <mwc-icon>account_circle</mwc-icon>${user.name}</span
+            >
+            <span field-state>${state}</span>
+            <strong>${comment}</strong>
+          </p>
+        `)}
+    `;
+    }
+};
+OxDataOocHistory.styles = css `
+    mwc-icon {
+      font-size: 16px;
+    }
+
+    [field-state] {
+      border-radius: 2px;
+      background-color: var(--primary-color);
+      margin-left: var(--margin-default);
+      padding: 1px 2px;
+      font-size: 0.7rem;
+      color: var(--theme-white-color);
+    }
+
+    p {
+      background-color: var(--theme-white-color);
+      box-shadow: var(--box-shadow);
+      border-radius: var(--border-radius);
+      margin: var(--page-description-margin);
+      padding: var(--padding-default);
+      font: var(--page-description-font);
+      color: var(--secondary-color);
+    }
+
+    mwc-icon {
+      position: relative;
+      top: 3px;
+      margin: 0 2px 0 10px;
+    }
+
+    [field-info] {
+      opacity: 0.7;
+    }
+
+    strong {
+      display: block;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxDataOocHistory.prototype, "dataOoc", void 0);
+OxDataOocHistory = __decorate([
+    customElement('ox-data-ooc-history')
+], OxDataOocHistory);
+export { OxDataOocHistory };
+//# sourceMappingURL=ox-data-ooc-history.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-data-ooc-history.js","sourceRoot":"","sources":["../../src/ox-data-ooc-history.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAKpD,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IA4C9C,MAAM;QACJ,MAAM,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAC3C,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;QAExG,OAAO,IAAI,CAAA;QACP,OAAO,CAAC,GAAG,CACX,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;;;iBAIpC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,uCAAuC,IAAI,CAAC,IAAI;;gCAEtE,KAAK;sBACf,OAAO;;SAEpB,CACF;KACF,CAAA;IACH,CAAC;;AA7DM,uBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuClB,AAvCY,CAuCZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAkB;AA1ClC,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CA+D5B","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport './ox-data-sample-view'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataOoc } from './types.js'\n\n@customElement('ox-data-ooc-history')\nexport class OxDataOocHistory extends LitElement {\n  static styles = css`\n    mwc-icon {\n      font-size: 16px;\n    }\n\n    [field-state] {\n      border-radius: 2px;\n      background-color: var(--primary-color);\n      margin-left: var(--margin-default);\n      padding: 1px 2px;\n      font-size: 0.7rem;\n      color: var(--theme-white-color);\n    }\n\n    p {\n      background-color: var(--theme-white-color);\n      box-shadow: var(--box-shadow);\n      border-radius: var(--border-radius);\n      margin: var(--page-description-margin);\n      padding: var(--padding-default);\n      font: var(--page-description-font);\n      color: var(--secondary-color);\n    }\n\n    mwc-icon {\n      position: relative;\n      top: 3px;\n      margin: 0 2px 0 10px;\n    }\n\n    [field-info] {\n      opacity: 0.7;\n    }\n\n    strong {\n      display: block;\n      font-weight: bold;\n      font-size: 0.9rem;\n    }\n  `\n\n  @property({ type: Object }) dataOoc?: DataOoc\n\n  render() {\n    const { history = [] } = this.dataOoc || {}\n    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n    return html`\n      ${history.map(\n        ({ user, state, comment, timestamp }) => html`\n          <p page-history>\n            <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->\n            <span field-info\n              >${formatter.format(new Date(timestamp))} <mwc-icon>account_circle</mwc-icon>${user.name}</span\n            >\n            <span field-state>${state}</span>\n            <strong>${comment}</strong>\n          </p>\n        `\n      )}\n    `\n  }\n}\n"]}

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

@@ -1,5 +1,6 @@
 import '@operato/input/ox-input-file.js';
 import './ox-data-sample-view';
+import './ox-data-ooc-history';
 import '@material/mwc-icon';
 import { LitElement } from 'lit';
 import { DataOoc, DataSet } from './types.js';

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

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-file.js';
 import './ox-data-sample-view';
+import './ox-data-ooc-history';
 import '@material/mwc-icon';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -10,27 +11,14 @@ import { i18next } from '@operato/i18n';
  */
 let OxDataOocView = class OxDataOocView extends LitElement {
     render() {
-        const { history = [], state } = this.dataOoc || {};
-        const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
+        const { state } = this.dataOoc || {};
         return html `
       <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>
 
-      <h3 state ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>
-        <mwc-icon>shield</mwc-icon>
-        <div>DATA OOC <span field-state>${state || ''}</span></div>
-      </h3>
+      <ox-data-ooc-badge .state=${state}></ox-data-ooc-badge>
 
       <h3>${i18next.t('title.history')}</h3>
-      ${history.map(({ user, state, comment, timestamp }) => html `
-          <p page-history>
-            <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
-            <span field-info
-              >${formatter.format(new Date(timestamp))} <mwc-icon>account_circle</mwc-icon>${user.name}</span
-            >
-            <span field-state>${state}</span>
-            <strong>${comment}</strong>
-          </p>
-        `)}
+      <ox-data-ooc-history .dataOoc=${this.dataOoc}></ox-data-ooc-history>
     `;
     }
 };
@@ -38,88 +26,17 @@ OxDataOocView.styles = css `
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
 
       position: relative;
     }
 
-    h3 {
-      margin: var(--title-margin);
-      padding-top: 12px;
-      font: var(--title-font);
-      color: var(--title-text-color);
-    }
-
-    h3[state] {
+    ox-data-ooc-badge {
       position: absolute;
+
       margin: 0;
       padding: 0;
       right: 10px;
       width: 90px;
-      text-align: center;
-    }
-
-    mwc-icon {
-      font-size: 16px;
-    }
-    [state] mwc-icon {
-      font-size: 80px;
-      opacity: 0.4;
-      color: var(--primary-background-color);
-    }
-
-    [state] div {
-      position: absolute;
-      top: 22px;
-      left: 0;
-      right: 0;
-      font-size: 10px;
-      color: var(--theme-white-color);
-    }
-    [state] [field-state] {
-      display: block;
-      border-radius: 4px;
-      background-color: var(--primary-color);
-      box-shadow: var(--box-shadow);
-      margin-top: var(--margin-narrow);
-      padding: 1px 3px;
-      font-size: 0.8rem;
-    }
-    [danger] [field-state] {
-      background-color: var(--status-danger-color);
-    }
-    [complete] [field-state] {
-      background-color: var(--status-info-color);
-    }
-    [page-history] [field-state] {
-      border-radius: 2px;
-      background-color: var(--primary-color);
-      margin-left: var(--margin-default);
-      padding: 1px 2px;
-      font-size: 0.7rem;
-      color: var(--theme-white-color);
-    }
-    [page-history] {
-      background-color: var(--theme-white-color);
-      box-shadow: var(--box-shadow);
-      border-radius: var(--border-radius);
-      margin: var(--page-description-margin);
-      padding: var(--padding-default);
-      font: var(--page-description-font);
-      color: var(--secondary-color);
-    }
-    [page-history] mwc-icon {
-      position: relative;
-      top: 3px;
-      margin: 0 2px 0 10px;
-    }
-    [field-info] {
-      opacity: 0.7;
-    }
-    [page-history] strong {
-      display: block;
-      font-weight: bold;
-      font-size: 0.9rem;
     }
   `;
 __decorate([

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

@@ -1 +1 @@
-{"version":3,"file":"ox-data-ooc-view.js","sourceRoot":"","sources":["../../src/ox-data-ooc-view.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,oBAAoB,CAAA;AAE3B,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;AAIvC;;GAEG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IA6F3C,MAAM;QACJ,MAAM,EAAE,OAAO,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAClD,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;QAExG,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,OAAO;;0BAE3B,KAAK,IAAI,WAAW,cAAc,KAAK,IAAI,WAAW;;0CAEtC,KAAK,IAAI,EAAE;;;YAGzC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;QAC9B,OAAO,CAAC,GAAG,CACX,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;;;iBAIpC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,uCAAuC,IAAI,CAAC,IAAI;;gCAEtE,KAAK;sBACf,OAAO;;SAEpB,CACF;KACF,CAAA;IACH,CAAC;;AAtHM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFlB,AAvFY,CAuFZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AA3FlC,aAAa;IADzB,aAAa,CAAC,kBAAkB,CAAC;GACrB,aAAa,CAwHzB","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport './ox-data-sample-view'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataOoc, DataSet } from './types.js'\n\n/**\n * @deprecated by ox-data-ooc-brief-view\n */\n@customElement('ox-data-ooc-view')\nexport class OxDataOocView extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      background-color: var(--main-section-background-color);\n\n      position: relative;\n    }\n\n    h3 {\n      margin: var(--title-margin);\n      padding-top: 12px;\n      font: var(--title-font);\n      color: var(--title-text-color);\n    }\n\n    h3[state] {\n      position: absolute;\n      margin: 0;\n      padding: 0;\n      right: 10px;\n      width: 90px;\n      text-align: center;\n    }\n\n    mwc-icon {\n      font-size: 16px;\n    }\n    [state] mwc-icon {\n      font-size: 80px;\n      opacity: 0.4;\n      color: var(--primary-background-color);\n    }\n\n    [state] div {\n      position: absolute;\n      top: 22px;\n      left: 0;\n      right: 0;\n      font-size: 10px;\n      color: var(--theme-white-color);\n    }\n    [state] [field-state] {\n      display: block;\n      border-radius: 4px;\n      background-color: var(--primary-color);\n      box-shadow: var(--box-shadow);\n      margin-top: var(--margin-narrow);\n      padding: 1px 3px;\n      font-size: 0.8rem;\n    }\n    [danger] [field-state] {\n      background-color: var(--status-danger-color);\n    }\n    [complete] [field-state] {\n      background-color: var(--status-info-color);\n    }\n    [page-history] [field-state] {\n      border-radius: 2px;\n      background-color: var(--primary-color);\n      margin-left: var(--margin-default);\n      padding: 1px 2px;\n      font-size: 0.7rem;\n      color: var(--theme-white-color);\n    }\n    [page-history] {\n      background-color: var(--theme-white-color);\n      box-shadow: var(--box-shadow);\n      border-radius: var(--border-radius);\n      margin: var(--page-description-margin);\n      padding: var(--padding-default);\n      font: var(--page-description-font);\n      color: var(--secondary-color);\n    }\n    [page-history] mwc-icon {\n      position: relative;\n      top: 3px;\n      margin: 0 2px 0 10px;\n    }\n    [field-info] {\n      opacity: 0.7;\n    }\n    [page-history] strong {\n      display: block;\n      font-weight: bold;\n      font-size: 0.9rem;\n    }\n  `\n\n  @property({ type: Object }) dataSet?: DataSet\n  @property({ type: Object }) dataOoc?: DataOoc\n\n  render() {\n    const { history = [], state } = this.dataOoc || {}\n    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n    return html`\n      <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>\n\n      <h3 state ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>\n        <mwc-icon>shield</mwc-icon>\n        <div>DATA OOC <span field-state>${state || ''}</span></div>\n      </h3>\n\n      <h3>${i18next.t('title.history')}</h3>\n      ${history.map(\n        ({ user, state, comment, timestamp }) => html`\n          <p page-history>\n            <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->\n            <span field-info\n              >${formatter.format(new Date(timestamp))} <mwc-icon>account_circle</mwc-icon>${user.name}</span\n            >\n            <span field-state>${state}</span>\n            <strong>${comment}</strong>\n          </p>\n        `\n      )}\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-data-ooc-view.js","sourceRoot":"","sources":["../../src/ox-data-ooc-view.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,uBAAuB,CAAA;AAC9B,OAAO,oBAAoB,CAAA;AAE3B,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;AAIvC;;GAEG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAsB3C,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAEpC,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,OAAO;;kCAEnB,KAAK;;YAE3B,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;sCACA,IAAI,CAAC,OAAO;KAC7C,CAAA;IACH,CAAC;;AAhCM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBlB,AAhBY,CAgBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AApBlC,aAAa;IADzB,aAAa,CAAC,kBAAkB,CAAC;GACrB,aAAa,CAkCzB","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport './ox-data-sample-view'\nimport './ox-data-ooc-history'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataOoc, DataSet } from './types.js'\n\n/**\n * @deprecated by ox-data-ooc-brief-view\n */\n@customElement('ox-data-ooc-view')\nexport class OxDataOocView extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n\n      position: relative;\n    }\n\n    ox-data-ooc-badge {\n      position: absolute;\n\n      margin: 0;\n      padding: 0;\n      right: 10px;\n      width: 90px;\n    }\n  `\n\n  @property({ type: Object }) dataSet?: DataSet\n  @property({ type: Object }) dataOoc?: DataOoc\n\n  render() {\n    const { state } = this.dataOoc || {}\n\n    return html`\n      <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>\n\n      <ox-data-ooc-badge .state=${state}></ox-data-ooc-badge>\n\n      <h3>${i18next.t('title.history')}</h3>\n      <ox-data-ooc-history .dataOoc=${this.dataOoc}></ox-data-ooc-history>\n    `\n  }\n}\n"]}

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

@@ -117,6 +117,7 @@ OxDataSampleSubgroupView.styles = css `
       font-weight: bold;
       color: var(--th-color);
       text-align: center;
+      white-space: nowrap;
     }
 
     th.label,
@@ -153,7 +154,6 @@ OxDataSampleSubgroupView.styles = css `
 
     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":";AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAGtD,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU;IA0EtD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,UAAU,CAAA;QACxE,MAAM,YAAY,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,KAAI,EAAE,CAAA;QAChF,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;QAC3G,MAAM,OAAO,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE;YACzD,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;YAChC,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAC/D,CAAC,EAAE,CAAC,CAAC,CAAA;QAEL,OAAO,IAAI,CAAA,QAAQ,IAAI,CAAC,QAAQ;;;8BAGN,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;YACzC,iBAAiB,CAAC,GAAG,CACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA,QAAQ,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,QAAQ,CAC3F;;;8BAGmB,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;YAChD,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA,QAAQ,QAAQ,CAAC,WAAW,QAAQ,CAAC;;UAE7E,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,CACxD,KAAK,CAAC,EAAE,CACN,IAAI,CAAA;;oCAEoB,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;kBACpE,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACjC,MAAM,EAAE,GAAG,GAAG,EAAE,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAA;YACnC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAA;YAC5B,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAA;YAEjG,OAAO,IAAI,CAAA,QAAQ,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAA;QACzD,CAAC,CAAC;;aAEL,CACJ;;8BAEqB,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;YACzC,iBAAiB,CAAC,GAAG,CACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA,aAAa,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC,cAAc,CACvF;;;8BAGmB,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC;YACxC,iBAAiB,CAAC,GAAG,CACrB,QAAQ,CAAC,EAAE,WAAC,OAAA,IAAI,CAAA,QAAQ,CAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,GAAG,CAAC,0CAAE,GAAG,EAAC,CAAC,CAAC,IAAI,CAAA,2BAA2B,CAAC,CAAC,CAAC,OAAO,QAAQ,CAAA,EAAA,CAC1G;;;8BAGmB,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC;YACxC,iBAAiB,CAAC,GAAG,CACrB,QAAQ,CAAC,EAAE,WAAC,OAAA,IAAI,CAAA,QAAQ,CAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,GAAG,CAAC,0CAAE,GAAG,EAAC,CAAC,CAAC,IAAI,CAAA,2BAA2B,CAAC,CAAC,CAAC,OAAO,QAAQ,CAAA,EAAA,CAC1G;;eAEI,CAAA;IACb,CAAC;IAEO,SAAS,CAAC,YAAsB,EAAE,IAAsB;QAC9D,OAAO,aAAa,CAAC,qBAAqB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAA;IAChE,CAAC;IAEO,QAAQ,CAAC,IAA0D;QACzE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;QAC3C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC3C,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,IAAK,CAAC,CAAA;QAC5C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QAClC,OAAO,CAAC,KAAK,EAAE,CAAA;IACjB,CAAC;IAEO,UAAU,CAAC,IAAY,EAAE,KAAkB;QACjD,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,OAAO,EAAE,CAAA;QACX,CAAC;QACD,MAAM,MAAM,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;QAEvD,IAAI,IAAI,IAAI,MAAM,EAAE,CAAC;YACnB,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,EAA4D,CAAA;YAErF,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,aAAa,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,WAAW,CAAC,CAAA;QAC9F,CAAC;QAED,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,GAAG,EAAE,EAAE;YAC1C,QAAQ,OAAO,CAAC,EAAE,CAAC;gBACjB,KAAK,SAAS;oBACZ,OAAO,IAAI,CAAA,oCAAoC,CAAC,cAAc,CAAA;oBAC9D,MAAK;gBAEP;oBACE,IAAI,IAAI,IAAI,MAAM,EAAE,CAAC;wBACnB,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAA;oBACzC,CAAC;yBAAM,IAAI,IAAI,IAAI,UAAU,EAAE,CAAC;wBAC9B,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE,CAAA;oBACrC,CAAC;oBACD,OAAO,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,EAAE,CAAA;YAClB,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,OAAO,MAAM,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACxE,CAAC;;AA/KM,+BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoElB,AApEY,CAoEZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAkB;AAxElC,wBAAwB;IADpC,aAAa,CAAC,8BAA8B,CAAC;GACjC,wBAAwB,CAiLpC","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 mwc-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 =>\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"]}

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';
@@ -24,35 +24,39 @@ let OxDataSampleView = class OxDataSampleView extends LitElement {
       </p>
 
       <form>
-        <table>
-          <tr>
-            <th item>${i18next.t('field.item')}</th>
-            <th>${i18next.t('field.description')}</th>
-            <th>${i18next.t('field.stat-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 `<mwc-icon>done</mwc-icon>` : ''}</td>
+                      <td>${oos ? html `<mwc-icon>done</mwc-icon>` : ''}</td>
+                    </tr>
+                  `;
+            })}
+              </table>
+            `
+            : nothing}
         ${Object.keys(dataItemSubgroups).map(subgroup => {
             return html `
             <ox-data-sample-subgroup-view
@@ -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;
@@ -196,6 +201,12 @@ OxDataSampleView.styles = css `
     pre {
       tab-size: 2;
     }
+
+    @media print {
+      :host {
+        display: block;
+      }
+    }
   `;
 __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.stat-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] 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      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 mwc-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\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        ${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`<mwc-icon>done</mwc-icon>` : ''}</td>\n                      <td>${oos ? html`<mwc-icon>done</mwc-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"]}