@operato/dataset 2.0.0-alpha.15 → 2.0.0-alpha.151

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

@@ -13,11 +13,11 @@ let OxDataItemSpec = class OxDataItemSpec extends LitElement {
       ${this.dataItemSpecSets.map(({ name, description, specs }) => {
             var _a;
             return html ` <label
-          ><div name>${name}</div>
-          <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
-          <ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${(_a = this.value) === null || _a === void 0 ? void 0 : _a[name]}>
-          </ox-properties-dynamic-view
-        ></label>`;
+            ><div name>${name}</div>
+            <div description><md-icon>info</md-icon> ${description}</div>
+            <ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${(_a = this.value) === null || _a === void 0 ? void 0 : _a[name]}>
+            </ox-properties-dynamic-view
+          ></label>`;
         })}
     </form>`;
     }
@@ -62,10 +62,10 @@ OxDataItemSpec.styles = css `
 
       grid-gap: 9px;
       align-items: center;
-      margin-bottom: var(--margin-default);
+      margin-bottom: var(--spacing-medium);
     }
     label:nth-child(odd) {
-      background-color: var(--main-section-background-color);
+      background-color: var(--md-sys-color-background);
       padding: var(--padding-default) 0;
     }
     div[name] {
@@ -84,14 +84,14 @@ OxDataItemSpec.styles = css `
     div[description] * {
       vertical-align: middle;
     }
-    div[description] mwc-icon {
+    div[description] md-icon {
       margin-top: -3px;
       font-size: 0.9rem;
     }
     ox-properties-dynamic-view {
       grid-area: inputs;
       display: flex;
-      flex-direction: row;
+      flex-direction: column;
       flex-wrap: wrap;
       gap: 10px;
       padding-right: var(--padding-default);
@@ -107,7 +107,7 @@ OxDataItemSpec.styles = css `
 
         grid-gap: 9px;
         align-items: center;
-        margin-bottom: var(--margin-default);
+        margin-bottom: var(--spacing-medium);
       }
 
       div[name] {

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

@@ -1 +1 @@
-{"version":3,"file":"ox-data-item-spec.js","sourceRoot":"","sources":["../../src/ox-data-item-spec.ts"],"names":[],"mappings":";AAAA,OAAO,wDAAwD,CAAA;AAE/D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAG5E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAGtD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAgFI,qBAAgB,GAAwB,EAAE,CAAA;IAyCrD,CAAC;IArCC,MAAM;QACJ,OAAO,IAAI,CAAA,0BAA0B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,gBAAgB,CAAC,GAAG,CACzB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;;YAAC,OAAA,IAAI,CAAA;uBACvB,IAAI;+DACoC,WAAW;kDACxB,IAAI,WAAW,KAAK,WAAW,MAAA,IAAI,CAAC,KAAK,0CAAG,IAAI,CAAC;;kBAEjF,CAAA;SAAA,CACX;YACK,CAAA;IACV,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,gBAAgB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAS,CAAC,CAAC,CAAA;QAC9G,CAAC;IACH,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAA;QAE9B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE;SAC1B,CAAC,CACH,CAAA;IACH,CAAC;IAEO,UAAU;QAChB,IAAI,KAAK,GAAG,EAAS,CAAA;QACrB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;QAExF,OAAO,KAAK,CAAA;IACd,CAAC;;AAvHM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0ElB,AA1EY,CA0EZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAuC;AACtC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAoB;AAEtC;IAAR,KAAK,EAAE;wDAA2C;AAEX;IAAvC,QAAQ,CAAC,4BAA4B,CAAC;oDAAwD;AAlFpF,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CAyH1B","sourcesContent":["import '@operato/property-editor/ox-properties-dynamic-view.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, queryAll, state } from 'lit/decorators.js'\n\nimport { DataItem, UseCaseDefinition } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-item-spec')\nexport class OxDataItemSpec extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: row;\n      --item-description-font: normal 0.8rem/1rem var(--theme-font);\n      --item-description-color: var(--page-description-color);\n    }\n\n    form {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n    }\n    label {\n      display: grid;\n\n      grid-template-rows: auto 1fr;\n      grid-template-columns: 1fr 5fr;\n      grid-template-areas: 'name description' 'empty inputs';\n\n      grid-gap: 9px;\n      align-items: center;\n      margin-bottom: var(--margin-default);\n    }\n    label:nth-child(odd) {\n      background-color: var(--main-section-background-color);\n      padding: var(--padding-default) 0;\n    }\n    div[name] {\n      grid-area: name;\n      font: var(--label-font);\n      color: var(--label-color);\n      text-align: right;\n    }\n    div[description] {\n      grid-area: description;\n      opacity: 0.7;\n      font: var(--item-description-font);\n      color: var(--item-description-color);\n      text-align: left;\n    }\n    div[description] * {\n      vertical-align: middle;\n    }\n    div[description] mwc-icon {\n      margin-top: -3px;\n      font-size: 0.9rem;\n    }\n    ox-properties-dynamic-view {\n      grid-area: inputs;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      gap: 10px;\n      padding-right: var(--padding-default);\n    }\n\n    @media only screen and (max-width: 460px) {\n      label {\n        display: grid;\n\n        grid-template-rows: auto auto 1fr;\n        grid-template-columns: 1fr;\n        grid-template-areas: 'name' 'description' 'inputs';\n\n        grid-gap: 9px;\n        align-items: center;\n        margin-bottom: var(--margin-default);\n      }\n\n      div[name] {\n        text-align: left;\n      }\n    }\n  `\n\n  @property({ type: Object }) value?: { [specSetName: string]: any }\n  @property({ type: Object }) dataItem?: DataItem\n\n  @state() dataItemSpecSets: UseCaseDefinition[] = []\n\n  @queryAll('ox-properties-dynamic-view') specSetViews!: NodeListOf<HTMLElement & { value: any }>\n\n  render() {\n    return html`<form @property-change=${(e: Event) => this.onChange(e)}>\n      ${this.dataItemSpecSets.map(\n        ({ name, description, specs }) => html` <label\n          ><div name>${name}</div>\n          <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>\n          <ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${this.value?.[name]}>\n          </ox-properties-dynamic-view\n        ></label>`\n      )}\n    </form>`\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('dataItem')) {\n      this.dataItemSpecSets = OxDataUseCase.getUseCases().map(useCase => useCase.getSpecification(this.dataItem!))\n    }\n  }\n\n  private onChange(e: Event) {\n    this.value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: { ...this.value }\n      })\n    )\n  }\n\n  private buildValue() {\n    var value = {} as any\n    this.specSetViews.forEach(view => (value[view.getAttribute('data-name')!] = view.value))\n\n    return value\n  }\n}\n"]}
+{"version":3,"file":"ox-data-item-spec.js","sourceRoot":"","sources":["../../src/ox-data-item-spec.ts"],"names":[],"mappings":";AAAA,OAAO,wDAAwD,CAAA;AAE/D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAG5E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAGtD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAgFI,qBAAgB,GAAwB,EAAE,CAAA;IA0CrD,CAAC;IAtCC,MAAM;QACJ,OAAO,IAAI,CAAA,0BAA0B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,gBAAgB,CAAC,GAAG,CACzB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;;YAC/B,OAAA,IAAI,CAAA;yBACW,IAAI;uDAC0B,WAAW;oDACd,IAAI,WAAW,KAAK,WAAW,MAAA,IAAI,CAAC,KAAK,0CAAG,IAAI,CAAC;;oBAEjF,CAAA;SAAA,CACb;YACK,CAAA;IACV,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,gBAAgB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAS,CAAC,CAAC,CAAA;QAC9G,CAAC;IACH,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAA;QAE9B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE;SAC1B,CAAC,CACH,CAAA;IACH,CAAC;IAEO,UAAU;QAChB,IAAI,KAAK,GAAG,EAAS,CAAA;QACrB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;QAExF,OAAO,KAAK,CAAA;IACd,CAAC;;AAxHM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0ElB,AA1EY,CA0EZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAuC;AACtC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAoB;AAEtC;IAAR,KAAK,EAAE;wDAA2C;AAEX;IAAvC,QAAQ,CAAC,4BAA4B,CAAC;oDAAwD;AAlFpF,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CA0H1B","sourcesContent":["import '@operato/property-editor/ox-properties-dynamic-view.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, queryAll, state } from 'lit/decorators.js'\n\nimport { DataItem, UseCaseDefinition } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-item-spec')\nexport class OxDataItemSpec extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: row;\n      --item-description-font: normal 0.8rem/1rem var(--theme-font);\n      --item-description-color: var(--page-description-color);\n    }\n\n    form {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n    }\n    label {\n      display: grid;\n\n      grid-template-rows: auto 1fr;\n      grid-template-columns: 1fr 5fr;\n      grid-template-areas: 'name description' 'empty inputs';\n\n      grid-gap: 9px;\n      align-items: center;\n      margin-bottom: var(--spacing-medium);\n    }\n    label:nth-child(odd) {\n      background-color: var(--md-sys-color-background);\n      padding: var(--padding-default) 0;\n    }\n    div[name] {\n      grid-area: name;\n      font: var(--label-font);\n      color: var(--label-color);\n      text-align: right;\n    }\n    div[description] {\n      grid-area: description;\n      opacity: 0.7;\n      font: var(--item-description-font);\n      color: var(--item-description-color);\n      text-align: left;\n    }\n    div[description] * {\n      vertical-align: middle;\n    }\n    div[description] md-icon {\n      margin-top: -3px;\n      font-size: 0.9rem;\n    }\n    ox-properties-dynamic-view {\n      grid-area: inputs;\n      display: flex;\n      flex-direction: column;\n      flex-wrap: wrap;\n      gap: 10px;\n      padding-right: var(--padding-default);\n    }\n\n    @media only screen and (max-width: 460px) {\n      label {\n        display: grid;\n\n        grid-template-rows: auto auto 1fr;\n        grid-template-columns: 1fr;\n        grid-template-areas: 'name' 'description' 'inputs';\n\n        grid-gap: 9px;\n        align-items: center;\n        margin-bottom: var(--spacing-medium);\n      }\n\n      div[name] {\n        text-align: left;\n      }\n    }\n  `\n\n  @property({ type: Object }) value?: { [specSetName: string]: any }\n  @property({ type: Object }) dataItem?: DataItem\n\n  @state() dataItemSpecSets: UseCaseDefinition[] = []\n\n  @queryAll('ox-properties-dynamic-view') specSetViews!: NodeListOf<HTMLElement & { value: any }>\n\n  render() {\n    return html`<form @property-change=${(e: Event) => this.onChange(e)}>\n      ${this.dataItemSpecSets.map(\n        ({ name, description, specs }) =>\n          html` <label\n            ><div name>${name}</div>\n            <div description><md-icon>info</md-icon> ${description}</div>\n            <ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${this.value?.[name]}>\n            </ox-properties-dynamic-view\n          ></label>`\n      )}\n    </form>`\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('dataItem')) {\n      this.dataItemSpecSets = OxDataUseCase.getUseCases().map(useCase => useCase.getSpecification(this.dataItem!))\n    }\n  }\n\n  private onChange(e: Event) {\n    this.value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: { ...this.value }\n      })\n    )\n  }\n\n  private buildValue() {\n    var value = {} as any\n    this.specSetViews.forEach(view => (value[view.getAttribute('data-name')!] = view.value))\n\n    return value\n  }\n}\n"]}

package/dist/src/ox-data-ooc-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,25 +23,29 @@ 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;
       left: 0;
       right: 0;
       font-size: 10px;
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-surface);
     }
 
     [field-state] {
       display: block;
       border-radius: 4px;
-      background-color: var(--primary-color);
+      background-color: var(--md-sys-color-on-primary-container);
       box-shadow: var(--box-shadow);
       margin-top: var(--margin-narrow);
       padding: 1px 3px;

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(--md-sys-color-surface);\n    }\n\n    [field-state] {\n      display: block;\n      border-radius: 4px;\n      background-color: var(--md-sys-color-on-primary-container);\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,30 +50,30 @@ OxDataOocCorrectionPart.styles = css `
       font-size: 20px;
     }
 
-    mwc-icon {
+    md-icon {
       font-size: 16px;
     }
 
     [field-state] {
       border-radius: 2px;
-      background-color: var(--primary-color);
-      margin-left: var(--margin-default);
+      background-color: var(--md-sys-color-on-primary-container);
+      margin-left: var(--spacing-medium);
       padding: 1px 2px;
       font-size: 0.7rem;
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-surface);
     }
 
     p {
-      background-color: var(--theme-white-color);
+      background-color: var(--md-sys-color-surface);
       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);
+      color: var(--md-sys-color-on-secondary-container);
     }
 
-    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(--md-sys-color-on-primary-container);\n      margin-left: var(--spacing-medium);\n      padding: 1px 2px;\n      font-size: 0.7rem;\n      color: var(--md-sys-color-surface);\n    }\n\n    p {\n      background-color: var(--md-sys-color-surface);\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(--md-sys-color-on-secondary-container);\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,30 +23,30 @@ let OxDataOocHistory = class OxDataOocHistory extends LitElement {
     }
 };
 OxDataOocHistory.styles = css `
-    mwc-icon {
+    md-icon {
       font-size: 16px;
     }
 
     [field-state] {
       border-radius: 2px;
-      background-color: var(--primary-color);
-      margin-left: var(--margin-default);
+      background-color: var(--md-sys-color-on-primary-container);
+      margin-left: var(--spacing-medium);
       padding: 1px 2px;
       font-size: 0.7rem;
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-surface);
     }
 
     p {
-      background-color: var(--theme-white-color);
+      background-color: var(--md-sys-color-surface);
       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);
+      color: var(--md-sys-color-on-secondary-container);
     }
 
-    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(--md-sys-color-on-primary-container);\n      margin-left: var(--spacing-medium);\n      padding: 1px 2px;\n      font-size: 0.7rem;\n      color: var(--md-sys-color-surface);\n    }\n\n    p {\n      background-color: var(--md-sys-color-surface);\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(--md-sys-color-on-secondary-container);\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>`;
     }
@@ -104,7 +104,7 @@ OxDataSampleSubgroupView.styles = css `
 
     table {
       border-collapse: collapse;
-      margin-bottom: var(--margin-default);
+      margin-bottom: var(--spacing-medium);
     }
 
     th {
@@ -148,7 +148,7 @@ OxDataSampleSubgroupView.styles = css `
       border-left: none;
     }
 
-    td mwc-icon {
+    td md-icon {
       color: var(--status-danger-color);
     }
 

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      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"]}
+{"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(--spacing-medium);\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;