@operato/dataset 7.0.0-rc.8 → 7.0.0

package/.storybook/preview.js

@@ -0,0 +1,52 @@
+import { i18next } from '@operato/i18n'
+
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'ko', right: '🇰🇷', title: '한국어' },
+        { value: 'zh', right: '🇨🇳', title: '中文' },
+        { value: 'ja', right: '🇯🇵', title: '日本語' },
+        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
+      ],
+      showName: true
+    }
+  },
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: 'light', title: 'Light' },
+        { value: 'dark', title: 'Dark' }
+      ],
+      showName: true
+    }
+  }
+}
+
+export const decorators = [
+  (Story, context) => {
+    const { locale, theme } = context.globals
+
+    if (locale) {
+      i18next.changeLanguage(locale)
+    }
+
+    // Set the theme class for the document
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark')
+      document.documentElement.classList.remove('light')
+    } else {
+      document.documentElement.classList.add('light')
+      document.documentElement.classList.remove('dark')
+    }
+
+    return Story()
+  }
+]

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.0](https://github.com/hatiolab/operato/compare/v7.0.0-rc.13...v7.0.0) (2024-06-30)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [7.0.0-rc.13](https://github.com/hatiolab/operato/compare/v7.0.0-rc.12...v7.0.0-rc.13) (2024-06-30)
+
+
+### :bug: Bug Fix
+
+* storybook preview.js ([84d7682](https://github.com/hatiolab/operato/commit/84d7682af452554e8b0e83aa683bdc3726e264bb))
+* storybook preview.js ([117928b](https://github.com/hatiolab/operato/commit/117928b7b87246e8fef9519e1e5022131f8592b6))
+
+
+
+## [7.0.0-rc.11](https://github.com/hatiolab/operato/compare/v7.0.0-rc.10...v7.0.0-rc.11) (2024-06-29)
+
+
+### :bug: Bug Fix
+
+* material design token ([bf70a97](https://github.com/hatiolab/operato/commit/bf70a9783aacfd6f58e945515d25120ace1ad1f3))
+
+
+
+## [7.0.0-rc.10](https://github.com/hatiolab/operato/compare/v7.0.0-rc.9...v7.0.0-rc.10) (2024-06-29)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [7.0.0-rc.9](https://github.com/hatiolab/operato/compare/v7.0.0-rc.8...v7.0.0-rc.9) (2024-06-29)
+
+
+### :bug: Bug Fix
+
+* ox-input-barcode style ([5f803bb](https://github.com/hatiolab/operato/commit/5f803bba90167c3a214998df3f860934b116d770))
+
+
+
 ## [7.0.0-rc.8](https://github.com/hatiolab/operato/compare/v7.0.0-rc.7...v7.0.0-rc.8) (2024-06-28)
 
 **Note:** Version bump only for package @operato/dataset

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

@@ -61,7 +61,7 @@ OxPopupDataItemSpec.styles = [
       ox-data-item-spec {
         flex: 1;
         overflow-y: auto;
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
       }
 
       span {

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

@@ -1 +1 @@
-{"version":3,"file":"ox-popup-data-item-spec.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-popup-data-item-spec.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAKjE,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAqCjD,MAAM;QACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAElC,OAAO,IAAI,CAAA;kCACmB,IAAI,CAAC,KAAK,cAAc,QAAe,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;;yBAIpF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;qCACZ,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;yBAEtC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,2BAA2B,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEnG,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB;;;;;;;;;;UAUE;QACF,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IACvB,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;;AA5EM,0BAAM,GAAG;IACd,qBAAqB;IACrB,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BF;CACF,AA9BY,CA8BZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAwC;AAnCxD,mBAAmB;IAD/B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,mBAAmB,CA8E/B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../ox-data-item-spec.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\n\nimport { DataItem } from '../types.js'\n\n@customElement('ox-popup-data-item-spec')\nexport class OxPopupDataItemSpec extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n\n        width: var(--overlay-center-normal-width, 50%);\n        height: var(--overlay-center-normal-height, 50%);\n      }\n\n      ox-data-item-spec {\n        flex: 1;\n        overflow-y: auto;\n        padding: var(--padding-wide);\n      }\n\n      span {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--md-sys-color-on-primary-container);\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: Object }) dataItem?: DataItem\n  @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n  render() {\n    var dataItem = this.dataItem || {}\n\n    return html`\n      <ox-data-item-spec .value=${this.value} .dataItem=${dataItem as any} @change=${this.onChange.bind(this)}>\n      </ox-data-item-spec>\n\n      <div class=\"button-container\">\n        <button @click=${this.onCancel.bind(this)} danger>\n          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}\n        </button>\n        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>\n      </div>\n    `\n  }\n\n  private onChange(e: CustomEvent) {\n    e.stopPropagation()\n\n    /* \n      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n      layout의 구성에 변화가 발생하면, 다시 render된다.\n      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n      (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)\n      => \n      이런 이유로, Object.assign(...)을 사용하였다.\n    */\n    this.value = e.detail\n  }\n\n  private onCancel(e: Event) {\n    closePopup(this)\n  }\n\n  private onConfirm(e: Event) {\n    this.confirmCallback && this.confirmCallback(this.value)\n    closePopup(this)\n  }\n}\n"]}
+{"version":3,"file":"ox-popup-data-item-spec.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-popup-data-item-spec.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAKjE,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAqCjD,MAAM;QACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAElC,OAAO,IAAI,CAAA;kCACmB,IAAI,CAAC,KAAK,cAAc,QAAe,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;;yBAIpF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;qCACZ,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;yBAEtC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,2BAA2B,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEnG,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB;;;;;;;;;;UAUE;QACF,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IACvB,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;;AA5EM,0BAAM,GAAG;IACd,qBAAqB;IACrB,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BF;CACF,AA9BY,CA8BZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAwC;AAnCxD,mBAAmB;IAD/B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,mBAAmB,CA8E/B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../ox-data-item-spec.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\n\nimport { DataItem } from '../types.js'\n\n@customElement('ox-popup-data-item-spec')\nexport class OxPopupDataItemSpec extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n\n        width: var(--overlay-center-normal-width, 50%);\n        height: var(--overlay-center-normal-height, 50%);\n      }\n\n      ox-data-item-spec {\n        flex: 1;\n        overflow-y: auto;\n        padding: var(--spacing-large);\n      }\n\n      span {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--md-sys-color-on-primary-container);\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: Object }) dataItem?: DataItem\n  @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n  render() {\n    var dataItem = this.dataItem || {}\n\n    return html`\n      <ox-data-item-spec .value=${this.value} .dataItem=${dataItem as any} @change=${this.onChange.bind(this)}>\n      </ox-data-item-spec>\n\n      <div class=\"button-container\">\n        <button @click=${this.onCancel.bind(this)} danger>\n          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}\n        </button>\n        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>\n      </div>\n    `\n  }\n\n  private onChange(e: CustomEvent) {\n    e.stopPropagation()\n\n    /* \n      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n      layout의 구성에 변화가 발생하면, 다시 render된다.\n      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n      (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)\n      => \n      이런 이유로, Object.assign(...)을 사용하였다.\n    */\n    this.value = e.detail\n  }\n\n  private onCancel(e: Event) {\n    closePopup(this)\n  }\n\n  private onConfirm(e: Event) {\n    this.confirmCallback && this.confirmCallback(this.value)\n    closePopup(this)\n  }\n}\n"]}

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

@@ -213,7 +213,7 @@ OxDataEntryView.styles = css `
       font-weight: bold;
     }
     td md-icon {
-      color: var(--status-danger-color);
+      color: var(--md-sys-color-error);
     }
 
     pre {

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

@@ -1 +1 @@
-{"version":3,"file":"ox-data-entry-view.js","sourceRoot":"","sources":["../../src/ox-data-entry-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 { DataSet, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-entry-view')\nexport class OxDataEntryView extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n    }\n\n    form {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n\n    h2 {\n      margin: var(--title-margin);\n      font: var(--title-font);\n      color: var(--title-text-color);\n      text-transform: capitalize;\n    }\n    [page-description] {\n      margin: var(--page-description-margin);\n      opacity: 0.7;\n      font: var(--page-description-font);\n      color: var(--md-sys-color-on-secondary-container);\n      text-transform: capitalize;\n    }\n    [page-description] * {\n      vertical-align: middle;\n    }\n    [page-description] md-icon {\n      margin-top: -2px;\n      font-size: 0.9rem;\n      color: var(--page-description-color);\n    }\n\n    table {\n      border-collapse: collapse;\n      margin-bottom: var(--spacing-medium);\n    }\n    th {\n      padding: var(--th-padding);\n      border-top: var(--th-border-top);\n      border-bottom: var(--td-border-bottom);\n      text-transform: var(--th-text-transform);\n      font: var(--th-font);\n      color: var(--th-color);\n      text-align: left;\n      white-space: nowrap;\n    }\n    th[item] {\n      min-width: 100px;\n    }\n    th[value] {\n      min-width: 100px;\n    }\n    tr {\n      background-color: var(--tr-background-color);\n    }\n    tr:nth-child(odd) {\n      background-color: var(--tr-background-odd-color);\n    }\n    tr:hover {\n      background-color: var(--tr-background-hover-color);\n    }\n    tr[ooc],\n    tr[oos] {\n      background-color: #fefbdf;\n    }\n    td {\n      border-bottom: var(--td-border-bottom);\n      padding: var(--td-padding);\n      font: var(--td-font);\n      color: var(--td-color);\n    }\n    td[name] {\n      font-weight: bold;\n    }\n    td md-icon {\n      color: var(--status-danger-color);\n    }\n\n    pre {\n      tab-size: 2;\n    }\n\n    @media screen and (max-width: 480px) {\n      th {\n        min-width: 50px;\n      }\n    }\n  `\n\n  @property({ type: Object }) dataSet?: DataSet\n  @property({ type: Object }) value?: { [tag: string]: any }\n\n  __render() {\n    return html`<form>\n      <h2>${this.dataSet?.name || ''}</h2>\n      <h3>${this.dataSet?.description || ''}</h3>\n      ${this.buildEntryViews()}\n    </form> `\n  }\n\n  private buildEntryViews() {\n    const dataItems = this.dataSet?.dataItems.filter(item => item.active)\n\n    return (dataItems || []).map(dataItem => {\n      const { name, description, tag, type, quota = 1, options = {}, unit } = dataItem\n\n      const samples = new Array(quota).fill(0)\n      const value = this.value && this.value[tag]\n\n      const elements = samples.map((_, idx) => {\n        const v = value instanceof Array ? value[idx] : idx === 0 ? value : undefined\n\n        switch (type) {\n          case 'select':\n            return html` <select .name=${tag} disabled>\n              <option value=\"\"></option>\n              ${(options.options || []).map(\n                option => html`<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`\n              )}\n            </select>`\n            break\n\n          case 'boolean':\n            return html` <input type=\"checkbox\" name=${tag} .checked=${v} disabled />`\n            break\n\n          case 'number':\n            return html` <input type=\"number\" name=${tag} value=${v} disabled />`\n            break\n\n          case 'file':\n            return html`<ox-input-file\n              name=${tag}\n              label=\"Attach Files\"\n              accept=\"*/*\"\n              multiple=\"true\"\n              hide-filelist\n              disabled\n            ></ox-input-file>`\n\n          case 'string':\n          default:\n            return html` <input type=\"text\" name=${tag} value=${v} disabled />`\n        }\n      })\n\n      return html` <label .title=${description}>\n        <div name>${name}${unit ? `(${unit})` : ''}</div>\n        <div description><md-icon>info</md-icon> ${description}</div>\n        <div elements>${elements}</div>\n      </label>`\n    })\n  }\n\n  render() {\n    if (!this.dataSet) {\n      return nothing\n    }\n\n    const { name, description, useCase, dataItems = [] } = this.dataSet!\n\n    const data = this.value || {}\n    const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []\n\n    return html` <h2>${name}</h2>\n      <p page-description><md-icon>info</md-icon> ${description}<br /></p>\n\n      <form>\n        <table>\n          <tr>\n            <th item>${i18next.t('field.item')}</th>\n            <th>${i18next.t('field.description')}</th>\n            <th>${i18next.t('field.finalizing-function')}</th>\n            <th>${i18next.t('field.unit')}</th>\n            <th value>${i18next.t('field.value')}</th>\n            <th>${i18next.t('field.spec')}</th>\n            <th>${i18next.t('field.ooc')}</th>\n            <th>${i18next.t('field.oos')}</th>\n          </tr>\n          ${dataItems.map(dataItem => {\n            const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem\n            const value = data[tag]\n            const { ooc, oos } = OxDataUseCase.evaluateTag(this.dataSet!, dataItems, data, tag) || {}\n\n            return html`\n              <tr ?ooc=${ooc} ?oos=${oos}>\n                <td name>${name}</td>\n                <td>${description}</td>\n                <td>${stat}</td>\n                <td>${unit}</td>\n                <td>${this.buildValue(type, value)}</td>\n                <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>\n                <td>${ooc ? html`<md-icon>done</md-icon>` : ''}</td>\n                <td>${oos ? html`<md-icon>done</md-icon>` : ''}</td>\n              </tr>\n            `\n          })}\n        </table>\n      </form>`\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-entry-view.js","sourceRoot":"","sources":["../../src/ox-data-entry-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 { DataSet, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-entry-view')\nexport class OxDataEntryView extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n    }\n\n    form {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n\n    h2 {\n      margin: var(--title-margin);\n      font: var(--title-font);\n      color: var(--title-text-color);\n      text-transform: capitalize;\n    }\n    [page-description] {\n      margin: var(--page-description-margin);\n      opacity: 0.7;\n      font: var(--page-description-font);\n      color: var(--md-sys-color-on-secondary-container);\n      text-transform: capitalize;\n    }\n    [page-description] * {\n      vertical-align: middle;\n    }\n    [page-description] md-icon {\n      margin-top: -2px;\n      font-size: 0.9rem;\n      color: var(--page-description-color);\n    }\n\n    table {\n      border-collapse: collapse;\n      margin-bottom: var(--spacing-medium);\n    }\n    th {\n      padding: var(--th-padding);\n      border-top: var(--th-border-top);\n      border-bottom: var(--td-border-bottom);\n      text-transform: var(--th-text-transform);\n      font: var(--th-font);\n      color: var(--th-color);\n      text-align: left;\n      white-space: nowrap;\n    }\n    th[item] {\n      min-width: 100px;\n    }\n    th[value] {\n      min-width: 100px;\n    }\n    tr {\n      background-color: var(--tr-background-color);\n    }\n    tr:nth-child(odd) {\n      background-color: var(--tr-background-odd-color);\n    }\n    tr:hover {\n      background-color: var(--tr-background-hover-color);\n    }\n    tr[ooc],\n    tr[oos] {\n      background-color: #fefbdf;\n    }\n    td {\n      border-bottom: var(--td-border-bottom);\n      padding: var(--td-padding);\n      font: var(--td-font);\n      color: var(--td-color);\n    }\n    td[name] {\n      font-weight: bold;\n    }\n    td md-icon {\n      color: var(--md-sys-color-error);\n    }\n\n    pre {\n      tab-size: 2;\n    }\n\n    @media screen and (max-width: 480px) {\n      th {\n        min-width: 50px;\n      }\n    }\n  `\n\n  @property({ type: Object }) dataSet?: DataSet\n  @property({ type: Object }) value?: { [tag: string]: any }\n\n  __render() {\n    return html`<form>\n      <h2>${this.dataSet?.name || ''}</h2>\n      <h3>${this.dataSet?.description || ''}</h3>\n      ${this.buildEntryViews()}\n    </form> `\n  }\n\n  private buildEntryViews() {\n    const dataItems = this.dataSet?.dataItems.filter(item => item.active)\n\n    return (dataItems || []).map(dataItem => {\n      const { name, description, tag, type, quota = 1, options = {}, unit } = dataItem\n\n      const samples = new Array(quota).fill(0)\n      const value = this.value && this.value[tag]\n\n      const elements = samples.map((_, idx) => {\n        const v = value instanceof Array ? value[idx] : idx === 0 ? value : undefined\n\n        switch (type) {\n          case 'select':\n            return html` <select .name=${tag} disabled>\n              <option value=\"\"></option>\n              ${(options.options || []).map(\n                option => html`<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`\n              )}\n            </select>`\n            break\n\n          case 'boolean':\n            return html` <input type=\"checkbox\" name=${tag} .checked=${v} disabled />`\n            break\n\n          case 'number':\n            return html` <input type=\"number\" name=${tag} value=${v} disabled />`\n            break\n\n          case 'file':\n            return html`<ox-input-file\n              name=${tag}\n              label=\"Attach Files\"\n              accept=\"*/*\"\n              multiple=\"true\"\n              hide-filelist\n              disabled\n            ></ox-input-file>`\n\n          case 'string':\n          default:\n            return html` <input type=\"text\" name=${tag} value=${v} disabled />`\n        }\n      })\n\n      return html` <label .title=${description}>\n        <div name>${name}${unit ? `(${unit})` : ''}</div>\n        <div description><md-icon>info</md-icon> ${description}</div>\n        <div elements>${elements}</div>\n      </label>`\n    })\n  }\n\n  render() {\n    if (!this.dataSet) {\n      return nothing\n    }\n\n    const { name, description, useCase, dataItems = [] } = this.dataSet!\n\n    const data = this.value || {}\n    const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []\n\n    return html` <h2>${name}</h2>\n      <p page-description><md-icon>info</md-icon> ${description}<br /></p>\n\n      <form>\n        <table>\n          <tr>\n            <th item>${i18next.t('field.item')}</th>\n            <th>${i18next.t('field.description')}</th>\n            <th>${i18next.t('field.finalizing-function')}</th>\n            <th>${i18next.t('field.unit')}</th>\n            <th value>${i18next.t('field.value')}</th>\n            <th>${i18next.t('field.spec')}</th>\n            <th>${i18next.t('field.ooc')}</th>\n            <th>${i18next.t('field.oos')}</th>\n          </tr>\n          ${dataItems.map(dataItem => {\n            const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem\n            const value = data[tag]\n            const { ooc, oos } = OxDataUseCase.evaluateTag(this.dataSet!, dataItems, data, tag) || {}\n\n            return html`\n              <tr ?ooc=${ooc} ?oos=${oos}>\n                <td name>${name}</td>\n                <td>${description}</td>\n                <td>${stat}</td>\n                <td>${unit}</td>\n                <td>${this.buildValue(type, value)}</td>\n                <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>\n                <td>${ooc ? html`<md-icon>done</md-icon>` : ''}</td>\n                <td>${oos ? html`<md-icon>done</md-icon>` : ''}</td>\n              </tr>\n            `\n          })}\n        </table>\n      </form>`\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-ooc-badge.js

@@ -17,16 +17,15 @@ let OxDataOocBadge = class OxDataOocBadge extends LitElement {
 };
 OxDataOocBadge.styles = css `
     h3 {
-      margin: var(--title-margin);
-      font: var(--title-font);
-      color: var(--title-text-color);
       text-align: center;
+      font: var(--title-font);
+      margin: var(--spacing-small) 0;
     }
 
     md-icon {
       --md-icon-size: 80px;
       opacity: 0.4;
-      color: var(--primary-background-color);
+      color: var(--md-sys-color-secondary);
     }
 
     md-icon[filled] {
@@ -45,19 +44,22 @@ OxDataOocBadge.styles = css `
     [field-state] {
       display: block;
       border-radius: 4px;
-      background-color: var(--md-sys-color-on-primary-container);
+      color: var(--md-sys-color-on-primary);
+      background-color: var(--md-sys-color-primary);
       box-shadow: var(--box-shadow);
-      margin-top: var(--margin-narrow);
+      margin-top: var(--spacing-small);
       padding: 1px 3px;
       font-size: 0.8rem;
     }
 
     [danger] [field-state] {
-      background-color: var(--status-danger-color);
+      background-color: var(--md-sys-color-error);
+      color: var(--md-sys-color-on-error);
     }
 
     [complete] [field-state] {
       background-color: var(--status-info-color);
+      color: var(--md-sys-color-on-error);
     }
   `;
 __decorate([

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,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"]}
+{"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;IAmD5C,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;;AA3DM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8ClB,AA9CY,CA8CZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAjD/B,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CA6D1B","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      text-align: center;\n      font: var(--title-font);\n      margin: var(--spacing-small) 0;\n    }\n\n    md-icon {\n      --md-icon-size: 80px;\n      opacity: 0.4;\n      color: var(--md-sys-color-secondary);\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      color: var(--md-sys-color-on-primary);\n      background-color: var(--md-sys-color-primary);\n      box-shadow: var(--box-shadow);\n      margin-top: var(--spacing-small);\n      padding: 1px 3px;\n      font-size: 0.8rem;\n    }\n\n    [danger] [field-state] {\n      background-color: var(--md-sys-color-error);\n      color: var(--md-sys-color-on-error);\n    }\n\n    [complete] [field-state] {\n      background-color: var(--status-info-color);\n      color: var(--md-sys-color-on-error);\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-sample-subgroup-view.js

@@ -149,7 +149,7 @@ OxDataSampleSubgroupView.styles = css `
     }
 
     td md-icon {
-      color: var(--status-danger-color);
+      color: var(--md-sys-color-error);
     }
 
     pre {

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(--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"]}
+{"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(--md-sys-color-error);\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.js

@@ -195,7 +195,7 @@ OxDataSampleView.styles = css `
       font-weight: bold;
     }
     td md-icon {
-      color: var(--status-danger-color);
+      color: var(--md-sys-color-error);
     }
 
     pre {

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

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

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

@@ -149,7 +149,7 @@ OxDataSummaryView.styles = css `
       font-weight: bold;
     }
     td md-icon {
-      color: var(--status-danger-color);
+      color: var(--md-sys-color-error);
     }
 
     pre {

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

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

package/dist/stories/ox-data-entry-form.stories.js

@@ -179,7 +179,6 @@ var value = {
     comment: '이것이 코멘트입니다.'
 };
 const Template = ({}) => html `
-  <link href="/themes/app-theme.css" rel="stylesheet" />
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
@@ -197,9 +196,13 @@ const Template = ({}) => html `
     body {
     }
   </style>
+
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/oops-theme.css" rel="stylesheet" />
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
   <link href="/themes/grist-theme.css" rel="stylesheet" />
+  <link href="/themes/form-theme.css" rel="stylesheet" />
 
   <ox-data-entry-form
     .dataSet=${dataSet}

package/dist/stories/ox-data-entry-form.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-data-entry-form.stories.js","sourceRoot":"","sources":["../../stories/ox-data-entry-form.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n'\nimport '../src/ox-data-entry-form.js'\nimport '../src/usecase/ccp' /* register usecase CCP */\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-data-entry-form',\n  component: 'ox-data-entry-form',\n  argTypes: {}\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst dataSet = {\n  name: 'sample',\n  description: 'sample description',\n  useCase: 'CCP',\n  dataItems: [\n    {\n      name: '창고 온도',\n      description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',\n      sequence: 1,\n      tag: 'temp',\n      group: '측정데이타',\n      type: 'number',\n      quota: 1,\n      active: true,\n      unit: '℃',\n      spec: {\n        CCP: {\n          criticalLimits: {\n            minimum: 100,\n            maximum: 200\n          },\n          targetLimits: {\n            minimum: 120,\n            maximum: 180\n          }\n        }\n      }\n    },\n    {\n      name: '창고 습도',\n      description: '창고 습도는 30% 이하로 유지되어야 합니다.',\n      sequence: 2,\n      tag: 'humid',\n      group: '측정데이타',\n      type: 'number',\n      quota: 5,\n      active: true,\n      unit: '%',\n      spec: {\n        CCP: {\n          criticalLimits: {\n            minimum: 10,\n            maximum: 50\n          },\n          targetLimits: {\n            minimum: 20,\n            maximum: 40\n          }\n        }\n      }\n    },\n    {\n      name: '육안 검사',\n      description: '육안 검사는 포장전 30분 내로 실행되어야 합니다.',\n      sequence: 3,\n      tag: 'inspection',\n      group: '측정데이타',\n      type: 'boolean',\n      quota: 3,\n      active: true,\n      spec: {\n        CCP: {\n          criticalLimits: {\n            acceptables: true\n          },\n          targetLimits: {\n            acceptables: true\n          }\n        }\n      }\n    },\n    {\n      name: '품평',\n      description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',\n      sequence: 4,\n      tag: 'evaluation',\n      group: '측정데이타',\n      type: 'select',\n      options: {\n        options: [\n          { text: '최우수', value: '최우수' },\n          { text: '우수', value: '우수' },\n          { text: '보통', value: '보통' },\n          { text: '미달', value: '미달' },\n          { text: '등외', value: '등외' }\n        ]\n      },\n      quota: 3,\n      active: true,\n      spec: {\n        CCP: {\n          criticalLimits: {\n            acceptables: ['최우수', '우수', '보통']\n          },\n          targetLimits: {\n            acceptables: ['최우수', '우수']\n          }\n        }\n      }\n    },\n    {\n      name: '코멘트',\n      description: '특이사항을 기록함.',\n      sequence: 4,\n      tag: 'comment',\n      type: 'string',\n      quota: 1,\n      active: true\n    },\n    {\n      name: '라디오',\n      description: '라디오 그룹',\n\n      group: '측정데이타',\n      sequence: 5,\n      tag: 'check1',\n      type: 'radio',\n      options: {\n        options: [\n          {\n            text: '예',\n            value: 'Y'\n          },\n          {\n            text: '아니오',\n            value: 'N'\n          }\n        ]\n      },\n      quota: 3,\n      active: true\n    },\n    {\n      name: '라디오2',\n      description: '라디오 그룹2',\n      sequence: 5,\n      tag: 'check2',\n      type: 'radio',\n      options: {\n        options: [\n          {\n            text: '예',\n            value: 'Y'\n          },\n          {\n            text: '아니오',\n            value: 'N'\n          }\n        ]\n      },\n      quota: 1,\n      active: true\n    },\n    {\n      name: '첨부파일',\n      description: '참조 첨부 파일.',\n      sequence: 4,\n      tag: 'attachment',\n      type: 'file',\n      quota: 1,\n      active: true\n    }\n  ]\n}\nvar value = {\n  temp: 1000,\n  humid: [20, 23, 21, 26, 27],\n  inspection: [true, false, true],\n  evaluation: ['최우수', '보통', '우수'],\n  comment: '이것이 코멘트입니다.'\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    body {\n    }\n  </style>\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n  <ox-data-entry-form\n    .dataSet=${dataSet}\n    .value=${value}\n    @change=${(e: CustomEvent) => {\n      value = e.detail\n      console.log('change', value)\n    }}\n  ></ox-data-entry-form>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
+{"version":3,"file":"ox-data-entry-form.stories.js","sourceRoot":"","sources":["../../stories/ox-data-entry-form.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n'\nimport '../src/ox-data-entry-form.js'\nimport '../src/usecase/ccp' /* register usecase CCP */\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-data-entry-form',\n  component: 'ox-data-entry-form',\n  argTypes: {}\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst dataSet = {\n  name: 'sample',\n  description: 'sample description',\n  useCase: 'CCP',\n  dataItems: [\n    {\n      name: '창고 온도',\n      description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',\n      sequence: 1,\n      tag: 'temp',\n      group: '측정데이타',\n      type: 'number',\n      quota: 1,\n      active: true,\n      unit: '℃',\n      spec: {\n        CCP: {\n          criticalLimits: {\n            minimum: 100,\n            maximum: 200\n          },\n          targetLimits: {\n            minimum: 120,\n            maximum: 180\n          }\n        }\n      }\n    },\n    {\n      name: '창고 습도',\n      description: '창고 습도는 30% 이하로 유지되어야 합니다.',\n      sequence: 2,\n      tag: 'humid',\n      group: '측정데이타',\n      type: 'number',\n      quota: 5,\n      active: true,\n      unit: '%',\n      spec: {\n        CCP: {\n          criticalLimits: {\n            minimum: 10,\n            maximum: 50\n          },\n          targetLimits: {\n            minimum: 20,\n            maximum: 40\n          }\n        }\n      }\n    },\n    {\n      name: '육안 검사',\n      description: '육안 검사는 포장전 30분 내로 실행되어야 합니다.',\n      sequence: 3,\n      tag: 'inspection',\n      group: '측정데이타',\n      type: 'boolean',\n      quota: 3,\n      active: true,\n      spec: {\n        CCP: {\n          criticalLimits: {\n            acceptables: true\n          },\n          targetLimits: {\n            acceptables: true\n          }\n        }\n      }\n    },\n    {\n      name: '품평',\n      description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',\n      sequence: 4,\n      tag: 'evaluation',\n      group: '측정데이타',\n      type: 'select',\n      options: {\n        options: [\n          { text: '최우수', value: '최우수' },\n          { text: '우수', value: '우수' },\n          { text: '보통', value: '보통' },\n          { text: '미달', value: '미달' },\n          { text: '등외', value: '등외' }\n        ]\n      },\n      quota: 3,\n      active: true,\n      spec: {\n        CCP: {\n          criticalLimits: {\n            acceptables: ['최우수', '우수', '보통']\n          },\n          targetLimits: {\n            acceptables: ['최우수', '우수']\n          }\n        }\n      }\n    },\n    {\n      name: '코멘트',\n      description: '특이사항을 기록함.',\n      sequence: 4,\n      tag: 'comment',\n      type: 'string',\n      quota: 1,\n      active: true\n    },\n    {\n      name: '라디오',\n      description: '라디오 그룹',\n\n      group: '측정데이타',\n      sequence: 5,\n      tag: 'check1',\n      type: 'radio',\n      options: {\n        options: [\n          {\n            text: '예',\n            value: 'Y'\n          },\n          {\n            text: '아니오',\n            value: 'N'\n          }\n        ]\n      },\n      quota: 3,\n      active: true\n    },\n    {\n      name: '라디오2',\n      description: '라디오 그룹2',\n      sequence: 5,\n      tag: 'check2',\n      type: 'radio',\n      options: {\n        options: [\n          {\n            text: '예',\n            value: 'Y'\n          },\n          {\n            text: '아니오',\n            value: 'N'\n          }\n        ]\n      },\n      quota: 1,\n      active: true\n    },\n    {\n      name: '첨부파일',\n      description: '참조 첨부 파일.',\n      sequence: 4,\n      tag: 'attachment',\n      type: 'file',\n      quota: 1,\n      active: true\n    }\n  ]\n}\nvar value = {\n  temp: 1000,\n  humid: [20, 23, 21, 26, 27],\n  inspection: [true, false, true],\n  evaluation: ['최우수', '보통', '우수'],\n  comment: '이것이 코멘트입니다.'\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    body {\n    }\n  </style>\n\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n  <ox-data-entry-form\n    .dataSet=${dataSet}\n    .value=${value}\n    @change=${(e: CustomEvent) => {\n      value = e.detail\n      console.log('change', value)\n    }}\n  ></ox-data-entry-form>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

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

@@ -86,8 +86,7 @@ var specB = {
     CCP: { accpetables: ['최우수', '우수'] },
     QC: { accpetables: ['최우수', '우수'] }
 };
-const Template = ({}) => html ` <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link
+const Template = ({}) => html ` <link
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
       rel="stylesheet"
     />
@@ -100,6 +99,13 @@ const Template = ({}) => html ` <link href="/themes/app-theme.css" rel="styleshe
       rel="stylesheet"
     />
 
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/light.css" rel="stylesheet" />
+    <link href="/themes/dark.css" rel="stylesheet" />
+    <link href="/themes/spacing.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
+    <link href="/themes/form-theme.css" rel="stylesheet" />
+
     <style>
       body {
       }

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

@@ -1 +1 @@
-{"version":3,"file":"ox-data-item-spec.stories.js","sourceRoot":"","sources":["../../stories/ox-data-item-spec.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n'\nimport '@material/web/icon/icon.js'\nimport '@operato/property-editor/ox-property-editor-checkbox.js'\nimport '@operato/property-editor/ox-property-editor-number.js'\nimport '@operato/property-editor/ox-property-editor-string.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '../src/ox-data-item-spec.js'\nimport '../src/usecase/ccp' /* register usecase CCP */\nimport '../src/usecase/qc' /* register usecase QC */\nimport '../src/usecase/ccp/ox-property-editor-ccp-limits.js'\nimport '../src/usecase/qc/ox-property-editor-qc-limits.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { OxPropertyEditor } from '@operato/property-editor'\n\nOxPropertyEditor.register({\n  number: 'ox-property-editor-number',\n  string: 'ox-property-editor-string',\n  boolean: 'ox-property-editor-checkbox',\n  'ccp-limits': 'ox-property-editor-ccp-limits',\n  'qc-limits': 'ox-property-editor-qc-limits'\n})\n\nexport default {\n  title: 'ox-data-item-spec',\n  component: 'ox-data-item-spec',\n  argTypes: {}\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst dataItemA = {\n  name: '창고 온도',\n  description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',\n  sequence: 1,\n  tag: 'temp',\n  unit: '℃',\n  type: 'number',\n  quota: 1\n}\n\nconst dataItemB = {\n  name: '품평',\n  description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',\n  sequence: 4,\n  tag: 'evaluation',\n  type: 'select',\n  options: {\n    options: [\n      { text: '최우수', value: '최우수' },\n      { text: '우수', value: '우수' },\n      { text: '보통', value: '보통' },\n      { text: '미달', value: '미달' }\n    ]\n  },\n  quota: 3\n}\n\nconst dataItemC = {\n  name: '코멘트',\n  description: '특이사항을 기록함.',\n  sequence: 4,\n  tag: 'comment',\n  type: 'string',\n  quota: 1\n}\n\nconst dataItemD = {\n  name: '성공',\n  description: '성공여부를 기록함.',\n  sequence: 5,\n  tag: 'success',\n  type: 'boolean',\n  quota: 1\n}\n\nvar specA = {\n  CCP: {\n    criticalLimits: {\n      minimum: 100,\n      maximum: 200\n    },\n    targetLimits: {\n      minimum: 120,\n      maximum: 180\n    }\n  },\n  QC: {\n    passLimits: {\n      minimum: 320,\n      maximum: 440\n    }\n  }\n}\n\nvar specB = {\n  CCP: { accpetables: ['최우수', '우수'] },\n  QC: { accpetables: ['최우수', '우수'] }\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) =>\n  html` <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n      }\n    </style>\n\n    <script type=\"module\"></script>\n\n    <ox-data-item-spec\n      .dataItem=${dataItemA}\n      .value=${specA}\n      @change=${(e: CustomEvent) => {\n        specA = e.detail\n        console.log('change', specA)\n      }}\n    ></ox-data-item-spec>\n\n    <ox-data-item-spec\n      .dataItem=${dataItemB}\n      .value=${specB}\n      @change=${(e: CustomEvent) => {\n        specB = e.detail\n        console.log('change', specB)\n      }}\n    ></ox-data-item-spec>\n\n    <ox-data-item-spec\n      .dataItem=${dataItemC}\n      .value=${specA}\n      @change=${(e: CustomEvent) => {\n        specA = e.detail\n        console.log('change', specA)\n      }}\n    ></ox-data-item-spec>\n\n    <ox-data-item-spec\n      .dataItem=${dataItemD}\n      .value=${specB}\n      @change=${(e: CustomEvent) => {\n        specB = e.detail\n        console.log('change', specB)\n      }}\n    ></ox-data-item-spec>`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
+{"version":3,"file":"ox-data-item-spec.stories.js","sourceRoot":"","sources":["../../stories/ox-data-item-spec.stories.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAA;AACtB,OAAO,4BAA4B,CAAA;AACnC,OAAO,yDAAyD,CAAA;AAChE,OAAO,uDAAuD,CAAA;AAC9D,OAAO,uDAAuD,CAAA;AAC9D,OAAO,wDAAwD,CAAA;AAC/D,OAAO,6BAA6B,CAAA;AACpC,OAAO,oBAAoB,CAAA,CAAC,0BAA0B;AACtD,OAAO,mBAAmB,CAAA,CAAC,yBAAyB;AACpD,OAAO,qDAAqD,CAAA;AAC5D,OAAO,mDAAmD,CAAA;AAE1D,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAE3D,gBAAgB,CAAC,QAAQ,CAAC;IACxB,MAAM,EAAE,2BAA2B;IACnC,MAAM,EAAE,2BAA2B;IACnC,OAAO,EAAE,6BAA6B;IACtC,YAAY,EAAE,+BAA+B;IAC7C,WAAW,EAAE,8BAA8B;CAC5C,CAAC,CAAA;AAEF,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,6BAA6B;IAC1C,QAAQ,EAAE,CAAC;IACX,GAAG,EAAE,MAAM;IACX,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,CAAC;CACT,CAAA;AAED,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,gCAAgC;IAC7C,QAAQ,EAAE,CAAC;IACX,GAAG,EAAE,YAAY;IACjB,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE;QACP,OAAO,EAAE;YACP,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;YAC7B,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;YAC3B,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;YAC3B,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;SAC5B;KACF;IACD,KAAK,EAAE,CAAC;CACT,CAAA;AAED,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,KAAK;IACX,WAAW,EAAE,YAAY;IACzB,QAAQ,EAAE,CAAC;IACX,GAAG,EAAE,SAAS;IACd,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,CAAC;CACT,CAAA;AAED,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,YAAY;IACzB,QAAQ,EAAE,CAAC;IACX,GAAG,EAAE,SAAS;IACd,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,CAAC;CACT,CAAA;AAED,IAAI,KAAK,GAAG;IACV,GAAG,EAAE;QACH,cAAc,EAAE;YACd,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;SACb;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;SACb;KACF;IACD,EAAE,EAAE;QACF,UAAU,EAAE;YACV,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;SACb;KACF;CACF,CAAA;AAED,IAAI,KAAK,GAAG;IACV,GAAG,EAAE,EAAE,WAAW,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE;IACnC,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE;CACnC,CAAA;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CACjD,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA4BY,SAAS;eACZ,KAAK;gBACJ,CAAC,CAAc,EAAE,EAAE;IAC3B,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IAChB,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;AAC9B,CAAC;;;;kBAIW,SAAS;eACZ,KAAK;gBACJ,CAAC,CAAc,EAAE,EAAE;IAC3B,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IAChB,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;AAC9B,CAAC;;;;kBAIW,SAAS;eACZ,KAAK;gBACJ,CAAC,CAAc,EAAE,EAAE;IAC3B,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IAChB,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;AAC9B,CAAC;;;;kBAIW,SAAS;eACZ,KAAK;gBACJ,CAAC,CAAc,EAAE,EAAE;IAC3B,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IAChB,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;AAC9B,CAAC;0BACmB,CAAA;AAE1B,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@operato/i18n'\nimport '@material/web/icon/icon.js'\nimport '@operato/property-editor/ox-property-editor-checkbox.js'\nimport '@operato/property-editor/ox-property-editor-number.js'\nimport '@operato/property-editor/ox-property-editor-string.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '../src/ox-data-item-spec.js'\nimport '../src/usecase/ccp' /* register usecase CCP */\nimport '../src/usecase/qc' /* register usecase QC */\nimport '../src/usecase/ccp/ox-property-editor-ccp-limits.js'\nimport '../src/usecase/qc/ox-property-editor-qc-limits.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { OxPropertyEditor } from '@operato/property-editor'\n\nOxPropertyEditor.register({\n  number: 'ox-property-editor-number',\n  string: 'ox-property-editor-string',\n  boolean: 'ox-property-editor-checkbox',\n  'ccp-limits': 'ox-property-editor-ccp-limits',\n  'qc-limits': 'ox-property-editor-qc-limits'\n})\n\nexport default {\n  title: 'ox-data-item-spec',\n  component: 'ox-data-item-spec',\n  argTypes: {}\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst dataItemA = {\n  name: '창고 온도',\n  description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',\n  sequence: 1,\n  tag: 'temp',\n  unit: '℃',\n  type: 'number',\n  quota: 1\n}\n\nconst dataItemB = {\n  name: '품평',\n  description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',\n  sequence: 4,\n  tag: 'evaluation',\n  type: 'select',\n  options: {\n    options: [\n      { text: '최우수', value: '최우수' },\n      { text: '우수', value: '우수' },\n      { text: '보통', value: '보통' },\n      { text: '미달', value: '미달' }\n    ]\n  },\n  quota: 3\n}\n\nconst dataItemC = {\n  name: '코멘트',\n  description: '특이사항을 기록함.',\n  sequence: 4,\n  tag: 'comment',\n  type: 'string',\n  quota: 1\n}\n\nconst dataItemD = {\n  name: '성공',\n  description: '성공여부를 기록함.',\n  sequence: 5,\n  tag: 'success',\n  type: 'boolean',\n  quota: 1\n}\n\nvar specA = {\n  CCP: {\n    criticalLimits: {\n      minimum: 100,\n      maximum: 200\n    },\n    targetLimits: {\n      minimum: 120,\n      maximum: 180\n    }\n  },\n  QC: {\n    passLimits: {\n      minimum: 320,\n      maximum: 440\n    }\n  }\n}\n\nvar specB = {\n  CCP: { accpetables: ['최우수', '우수'] },\n  QC: { accpetables: ['최우수', '우수'] }\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) =>\n  html` <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n\n    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      body {\n      }\n    </style>\n\n    <script type=\"module\"></script>\n\n    <ox-data-item-spec\n      .dataItem=${dataItemA}\n      .value=${specA}\n      @change=${(e: CustomEvent) => {\n        specA = e.detail\n        console.log('change', specA)\n      }}\n    ></ox-data-item-spec>\n\n    <ox-data-item-spec\n      .dataItem=${dataItemB}\n      .value=${specB}\n      @change=${(e: CustomEvent) => {\n        specB = e.detail\n        console.log('change', specB)\n      }}\n    ></ox-data-item-spec>\n\n    <ox-data-item-spec\n      .dataItem=${dataItemC}\n      .value=${specA}\n      @change=${(e: CustomEvent) => {\n        specA = e.detail\n        console.log('change', specA)\n      }}\n    ></ox-data-item-spec>\n\n    <ox-data-item-spec\n      .dataItem=${dataItemD}\n      .value=${specB}\n      @change=${(e: CustomEvent) => {\n        specB = e.detail\n        console.log('change', specB)\n      }}\n    ></ox-data-item-spec>`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}