@operato/dataset 2.0.0-alpha.14 → 2.0.0-alpha.140

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

@@ -1,9 +1,9 @@
+import '@material/web/icon/icon.js';
 import '@operato/input/ox-input-file.js';
 import './ox-data-sample-view';
-import '@material/mwc-icon';
 import { LitElement } from 'lit';
 export declare class OxDataOocBadge extends LitElement {
     static styles: import("lit").CSSResult;
     state?: string;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
 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 OxDataOocBadge = class OxDataOocBadge extends LitElement {
@@ -9,7 +9,7 @@ let OxDataOocBadge = class OxDataOocBadge extends LitElement {
         const state = this.state;
         return html `
       <h3 ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>
-        <mwc-icon>shield</mwc-icon>
+        <md-icon filled>shield</md-icon>
         <div>DATA OOC <span field-state>${state || ''}</span></div>
       </h3>
     `;
@@ -23,12 +23,16 @@ OxDataOocBadge.styles = css `
       text-align: center;
     }
 
-    mwc-icon {
-      font-size: 80px;
+    md-icon {
+      --md-icon-size: 80px;
       opacity: 0.4;
       color: var(--primary-background-color);
     }
 
+    md-icon[filled] {
+      font-variation-settings: 'FILL' 1;
+    }
+
     div {
       position: absolute;
       top: 22px;

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

@@ -1 +1 @@
-{"version":3,"file":"ox-data-ooc-badge.js","sourceRoot":"","sources":["../../src/ox-data-ooc-badge.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAW,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGpD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IA6C5C,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,OAAO,IAAI,CAAA;oBACK,KAAK,IAAI,WAAW,cAAc,KAAK,IAAI,WAAW;;0CAEhC,KAAK,IAAI,EAAE;;KAEhD,CAAA;IACH,CAAC;;AArDM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwClB,AAxCY,CAwCZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AA3C/B,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CAuD1B","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\n@customElement('ox-data-ooc-badge')\nexport class OxDataOocBadge extends LitElement {\n  static styles = css`\n    h3 {\n      margin: var(--title-margin);\n      font: var(--title-font);\n      color: var(--title-text-color);\n      text-align: center;\n    }\n\n    mwc-icon {\n      font-size: 80px;\n      opacity: 0.4;\n      color: var(--primary-background-color);\n    }\n\n    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\n    [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\n    [danger] [field-state] {\n      background-color: var(--status-danger-color);\n    }\n\n    [complete] [field-state] {\n      background-color: var(--status-info-color);\n    }\n  `\n\n  @property({ type: String }) state?: string\n\n  render() {\n    const state = this.state\n\n    return html`\n      <h3 ?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  }\n}\n"]}
+{"version":3,"file":"ox-data-ooc-badge.js","sourceRoot":"","sources":["../../src/ox-data-ooc-badge.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAW,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGpD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAiD5C,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,OAAO,IAAI,CAAA;oBACK,KAAK,IAAI,WAAW,cAAc,KAAK,IAAI,WAAW;;0CAEhC,KAAK,IAAI,EAAE;;KAEhD,CAAA;IACH,CAAC;;AAzDM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4ClB,AA5CY,CA4CZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AA/C/B,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CA2D1B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-file.js'\nimport './ox-data-sample-view'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-data-ooc-badge')\nexport class OxDataOocBadge extends LitElement {\n  static styles = css`\n    h3 {\n      margin: var(--title-margin);\n      font: var(--title-font);\n      color: var(--title-text-color);\n      text-align: center;\n    }\n\n    md-icon {\n      --md-icon-size: 80px;\n      opacity: 0.4;\n      color: var(--primary-background-color);\n    }\n\n    md-icon[filled] {\n      font-variation-settings: 'FILL' 1;\n    }\n\n    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\n    [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\n    [danger] [field-state] {\n      background-color: var(--status-danger-color);\n    }\n\n    [complete] [field-state] {\n      background-color: var(--status-info-color);\n    }\n  `\n\n  @property({ type: String }) state?: string\n\n  render() {\n    const state = this.state\n\n    return html`\n      <h3 ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>\n        <md-icon filled>shield</md-icon>\n        <div>DATA OOC <span field-state>${state || ''}</span></div>\n      </h3>\n    `\n  }\n}\n"]}

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

@@ -2,11 +2,11 @@ import '@operato/input/ox-input-file.js';
 import './ox-data-sample-view';
 import './ox-data-ooc-badge';
 import './ox-data-ooc-correction-part';
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { LitElement } from 'lit';
 import { DataOoc } from './types.js';
 export declare class OxDataOocBriefView extends LitElement {
     static styles: import("lit").CSSResult;
     dataOoc?: DataOoc;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -3,7 +3,7 @@ import '@operato/input/ox-input-file.js';
 import './ox-data-sample-view';
 import './ox-data-ooc-badge';
 import './ox-data-ooc-correction-part';
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 let OxDataOocBriefView = class OxDataOocBriefView extends LitElement {
@@ -20,7 +20,6 @@ OxDataOocBriefView.styles = css `
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
 
       position: relative;
     }

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,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;IAsBhD,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;;AA7BM,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;GAiBlB,AAjBY,CAiBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAkB;AApBlC,kBAAkB;IAD9B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,kBAAkB,CA+B9B","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      background-color: var(--main-section-background-color);\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"]}
+{"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,4BAA4B,CAAA;AAEnC,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/web/icon/icon.js'\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

@@ -1,9 +1,9 @@
 import '@operato/input/ox-input-file.js';
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 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>;
+    render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-file.js';
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
@@ -14,7 +14,7 @@ let OxDataOocCorrectionPart = class OxDataOocCorrectionPart extends LitElement {
             <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
+                >${formatter.format(new Date(reviewedAt))} <md-icon>account_circle</md-icon>${reviewer.name}</span
               >
               <strong>${correctiveInstruction}</strong>
             </p>
@@ -25,7 +25,7 @@ let OxDataOocCorrectionPart = class OxDataOocCorrectionPart extends LitElement {
             <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
+                >${formatter.format(new Date(correctedAt))} <md-icon>account_circle</md-icon>${corrector.name}</span
               >
               <strong>${correctiveAction}</strong>
             </p>
@@ -38,7 +38,6 @@ OxDataOocCorrectionPart.styles = css `
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
 
       position: relative;
     }
@@ -51,7 +50,7 @@ OxDataOocCorrectionPart.styles = css `
       font-size: 20px;
     }
 
-    mwc-icon {
+    md-icon {
       font-size: 16px;
     }
 
@@ -74,7 +73,7 @@ OxDataOocCorrectionPart.styles = css `
       color: var(--secondary-color);
     }
 
-    mwc-icon {
+    md-icon {
       position: relative;
       top: 3px;
       margin: 0 2px 0 10px;

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

@@ -1 +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;IA4DrD,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;;AA9FM,8BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDlB,AAvDY,CAuDZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAkB;AA1DlC,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CAgGnC","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      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      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"]}
+{"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,4BAA4B,CAAA;AAEnC,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,qCAAqC,QAAQ,CAAC,IAAI;;wBAEpF,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,qCAAqC,SAAS,CAAC,IAAI;;wBAEtF,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/web/icon/icon.js'\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    md-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    md-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!))} <md-icon>account_circle</md-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!))} <md-icon>account_circle</md-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

@@ -1,10 +1,10 @@
 import '@operato/input/ox-input-file.js';
 import './ox-data-sample-view';
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 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>;
+    render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-file.js';
 import './ox-data-sample-view';
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 let OxDataOocHistory = class OxDataOocHistory extends LitElement {
@@ -13,7 +13,7 @@ let OxDataOocHistory = class OxDataOocHistory extends LitElement {
           <p page-history>
             <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
             <span field-info
-              >${formatter.format(new Date(timestamp))} <mwc-icon>account_circle</mwc-icon>${user.name}</span
+              >${formatter.format(new Date(timestamp))} <md-icon>account_circle</md-icon>${user.name}</span
             >
             <span field-state>${state}</span>
             <strong>${comment}</strong>
@@ -23,7 +23,7 @@ let OxDataOocHistory = class OxDataOocHistory extends LitElement {
     }
 };
 OxDataOocHistory.styles = css `
-    mwc-icon {
+    md-icon {
       font-size: 16px;
     }
 
@@ -46,7 +46,7 @@ OxDataOocHistory.styles = css `
       color: var(--secondary-color);
     }
 
-    mwc-icon {
+    md-icon {
       position: relative;
       top: 3px;
       margin: 0 2px 0 10px;

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

@@ -1 +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"]}
+{"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,4BAA4B,CAAA;AAEnC,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,qCAAqC,IAAI,CAAC,IAAI;;gCAEpE,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/web/icon/icon.js'\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    md-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    md-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))} <md-icon>account_circle</md-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,7 +1,7 @@
 import '@operato/input/ox-input-file.js';
 import './ox-data-sample-view';
 import './ox-data-ooc-history';
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { LitElement } from 'lit';
 import { DataOoc, DataSet } from './types.js';
 /**
@@ -11,5 +11,5 @@ export declare class OxDataOocView extends LitElement {
     static styles: import("lit").CSSResult;
     dataSet?: DataSet;
     dataOoc?: DataOoc;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -2,7 +2,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 '@material/web/icon/icon.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
@@ -26,7 +26,6 @@ OxDataOocView.styles = css `
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
 
       position: relative;
     }

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,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;IAuB3C,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;;AAjCM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;GAiBlB,AAjBY,CAiBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AArBlC,aAAa;IADzB,aAAa,CAAC,kBAAkB,CAAC;GACrB,aAAa,CAmCzB","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      background-color: var(--main-section-background-color);\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"]}
+{"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,4BAA4B,CAAA;AAEnC,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/web/icon/icon.js'\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.d.ts

@@ -5,7 +5,7 @@ export declare class OxDataSampleSubgroupView extends LitElement {
     static styles: import("lit").CSSResult;
     dataSample?: DataSample;
     subgroup?: string;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     private buildSpec;
     private download;
     private buildValue;

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 })