npm - @operato/dataset - Versions diffs - 2.0.0-alpha.8 → 2.0.0-alpha.81 - Mend

@operato/dataset 2.0.0-alpha.8 → 2.0.0-alpha.81

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (108) hide show

package/CHANGELOG.md +418 -0
package/demo/favicon.ico +0 -0
package/demo/index.html +349 -0
package/demo/ox-data-ooc-brief-view-test.html +349 -0
package/dist/src/grist-editor/ox-grist-editor-data-item-spec.d.ts +1 -1
package/dist/src/grist-editor/ox-popup-data-item-spec.d.ts +2 -1
package/dist/src/grist-editor/ox-popup-data-item-spec.js +7 -8
package/dist/src/grist-editor/ox-popup-data-item-spec.js.map +1 -1
package/dist/src/ox-data-entry-form.js +49 -37
package/dist/src/ox-data-entry-form.js.map +1 -1
package/dist/src/ox-data-entry-subgroup-form.d.ts +1 -1
package/dist/src/ox-data-entry-subgroup-form.js +2 -0
package/dist/src/ox-data-entry-subgroup-form.js.map +1 -1
package/dist/src/ox-data-entry-view.d.ts +3 -3
package/dist/src/ox-data-entry-view.js +17 -7
package/dist/src/ox-data-entry-view.js.map +1 -1
package/dist/src/ox-data-item-spec.d.ts +1 -1
package/dist/src/ox-data-item-spec.js +6 -6
package/dist/src/ox-data-item-spec.js.map +1 -1
package/dist/src/ox-data-ooc-badge.d.ts +9 -0
package/dist/src/ox-data-ooc-badge.js +67 -0
package/dist/src/ox-data-ooc-badge.js.map +1 -0
package/dist/src/ox-data-ooc-brief-view.d.ts +4 -2
package/dist/src/ox-data-ooc-brief-view.js +9 -111
package/dist/src/ox-data-ooc-brief-view.js.map +1 -1
package/dist/src/ox-data-ooc-correction-part.d.ts +9 -0
package/dist/src/ox-data-ooc-correction-part.js +99 -0
package/dist/src/ox-data-ooc-correction-part.js.map +1 -0
package/dist/src/ox-data-ooc-history.d.ts +10 -0
package/dist/src/ox-data-ooc-history.js +72 -0
package/dist/src/ox-data-ooc-history.js.map +1 -0
package/dist/src/ox-data-ooc-view.d.ts +3 -2
package/dist/src/ox-data-ooc-view.js +7 -90
package/dist/src/ox-data-ooc-view.js.map +1 -1
package/dist/src/ox-data-sample-subgroup-view.d.ts +1 -1
package/dist/src/ox-data-sample-subgroup-view.js +9 -9
package/dist/src/ox-data-sample-subgroup-view.js.map +1 -1
package/dist/src/ox-data-sample-view.d.ts +1 -1
package/dist/src/ox-data-sample-view.js +52 -35
package/dist/src/ox-data-sample-view.js.map +1 -1
package/dist/src/ox-data-summary-view.d.ts +1 -1
package/dist/src/ox-data-summary-view.js +10 -4
package/dist/src/ox-data-summary-view.js.map +1 -1
package/dist/src/types.d.ts +57 -9
package/dist/src/types.js.map +1 -1
package/dist/src/usecase/ccp/ox-input-ccp-limits.d.ts +1 -1
package/dist/src/usecase/qc/ox-input-qc-limits.d.ts +1 -1
package/dist/src/usecase/spc/index.d.ts +1 -0
package/dist/src/usecase/spc/index.js +8 -0
package/dist/src/usecase/spc/index.js.map +1 -0
package/dist/src/usecase/spc/ox-data-use-case-spc.d.ts +7 -0
package/dist/src/usecase/spc/ox-data-use-case-spc.js +102 -0
package/dist/src/usecase/spc/ox-data-use-case-spc.js.map +1 -0
package/dist/src/usecase/spc/ox-input-spc-limits.d.ts +44 -0
package/dist/src/usecase/spc/ox-input-spc-limits.js +193 -0
package/dist/src/usecase/spc/ox-input-spc-limits.js.map +1 -0
package/dist/src/usecase/spc/ox-property-editor-spc-limits.d.ts +6 -0
package/dist/src/usecase/spc/ox-property-editor-spc-limits.js +24 -0
package/dist/src/usecase/spc/ox-property-editor-spc-limits.js.map +1 -0
package/dist/stories/ox-data-entry-form.stories.d.ts +1 -1
package/dist/stories/ox-data-entry-form.stories.js +73 -17
package/dist/stories/ox-data-entry-form.stories.js.map +1 -1
package/dist/stories/ox-data-item-spec.stories.d.ts +1 -1
package/dist/stories/ox-data-item-spec.stories.js +14 -2
package/dist/stories/ox-data-item-spec.stories.js.map +1 -1
package/dist/stories/ox-data-ooc-brief-view.stories.d.ts +1 -1
package/dist/stories/ox-data-ooc-brief-view.stories.js +25 -13
package/dist/stories/ox-data-ooc-brief-view.stories.js.map +1 -1
package/dist/stories/ox-data-ooc-view.stories.d.ts +1 -1
package/dist/stories/ox-data-ooc-view.stories.js +27 -13
package/dist/stories/ox-data-ooc-view.stories.js.map +1 -1
package/dist/stories/ox-data-sample-view.stories.d.ts +1 -1
package/dist/stories/ox-data-sample-view.stories.js +21 -9
package/dist/stories/ox-data-sample-view.stories.js.map +1 -1
package/dist/stories/ox-grist-editor-data-item-spec.stories.d.ts +1 -1
package/dist/stories/ox-grist-editor-data-item-spec.stories.js +66 -54
package/dist/stories/ox-grist-editor-data-item-spec.stories.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +39 -26
package/src/grist-editor/ox-popup-data-item-spec.ts +7 -8
package/src/ox-data-entry-form.ts +66 -47
package/src/ox-data-entry-subgroup-form.ts +2 -0
package/src/ox-data-entry-view.ts +18 -7
package/src/ox-data-item-spec.ts +8 -7
package/src/ox-data-ooc-badge.ts +65 -0
package/src/ox-data-ooc-brief-view.ts +10 -121
package/src/ox-data-ooc-correction-part.ts +107 -0
package/src/ox-data-ooc-history.ts +74 -0
package/src/ox-data-ooc-view.ts +7 -92
package/src/ox-data-sample-subgroup-view.ts +16 -17
package/src/ox-data-sample-view.ts +52 -35
package/src/ox-data-summary-view.ts +10 -4
package/src/types.ts +76 -27
package/src/usecase/spc/index.ts +10 -0
package/src/usecase/spc/ox-data-use-case-spc.ts +147 -0
package/src/usecase/spc/ox-input-spc-limits.ts +182 -0
package/src/usecase/spc/ox-property-editor-spc-limits.ts +23 -0
package/stories/ox-data-entry-form.stories.ts +78 -22
package/stories/ox-data-item-spec.stories.ts +14 -2
package/stories/ox-data-ooc-brief-view.stories.ts +26 -15
package/stories/ox-data-ooc-view.stories.ts +28 -15
package/stories/ox-data-sample-view.stories.ts +22 -11
package/stories/ox-grist-editor-data-item-spec.stories.ts +67 -56
package/themes/grist-theme.css +1 -1
package/translations/en.json +1 -0
package/translations/ko.json +1 -0
package/translations/ms.json +142 -70
package/translations/zh.json +146 -75

package/demo/index.html ADDED Viewed

@@ -0,0 +1,349 @@
+<!doctype html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <style>
+      body {
+        /* box-sizing: border-box; */
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        /* This is a font-stack that tries to use the system-default sans-serifs first */
+        font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+      }
+      #app {
+        width: 100vw;
+        height: 100dvh;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+      }
+      #demo {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+      }
+      @media print {
+        #app {
+          height: unset;
+        }
+      }
+    </style>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/oops-theme.css" rel="stylesheet" />
+  </head>
+  <body>
+    <script type="module">
+      import { LitElement, html, css, render } from 'lit'
+      import '../dist/src/index.js'
+      import '../dist/src/usecase/ccp/index.js'
+      import '../dist/src/ox-data-sample-view.js'
+      const dataSet = {
+        name: 'sample',
+        description: 'sample description',
+        type: 'manual',
+        useCase: 'CCP',
+        dataItems: [
+          {
+            name: '창고 온도',
+            description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',
+            sequence: 1,
+            tag: 'temp',
+            group: '측정데이타',
+            type: 'number',
+            quota: 1,
+            active: true,
+            unit: '℃',
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  minimum: 100,
+                  maximum: 200
+                },
+                targetLimits: {
+                  minimum: 120,
+                  maximum: 180
+                }
+              }
+            }
+          },
+          {
+            name: '창고 습도',
+            description: '창고 습도는 30% 이하로 유지되어야 합니다.',
+            sequence: 2,
+            tag: 'humid',
+            group: '측정데이타',
+            type: 'number',
+            quota: 5,
+            active: true,
+            unit: '%',
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  minimum: 10,
+                  maximum: 50
+                },
+                targetLimits: {
+                  minimum: 20,
+                  maximum: 40
+                }
+              }
+            }
+          },
+          {
+            name: '육안 검사',
+            description: '육안 검사는 포장전 30분 내로 실행되어야 합니다.',
+            sequence: 3,
+            tag: 'inspection',
+            group: '측정데이타',
+            type: 'boolean',
+            quota: 3,
+            active: true,
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  acceptables: true
+                },
+                targetLimits: {
+                  acceptables: true
+                }
+              }
+            }
+          },
+          {
+            name: '품평',
+            description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',
+            sequence: 4,
+            tag: 'evaluation',
+            group: '측정데이타',
+            type: 'select',
+            options: {
+              options: [
+                { text: '최우수', value: '최우수' },
+                { text: '우수', value: '우수' },
+                { text: '보통', value: '보통' },
+                { text: '미달', value: '미달' }
+              ]
+            },
+            quota: 3,
+            active: true,
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  acceptables: ['최우수', '우수', '보통']
+                },
+                targetLimits: {
+                  acceptables: ['최우수', '우수']
+                }
+              }
+            }
+          },
+          {
+            name: '코멘트',
+            description: '특이사항을 기록함.',
+            sequence: 4,
+            tag: 'comment',
+            type: 'string',
+            quota: 1,
+            active: true
+          },
+          {
+            name: '첨부파일',
+            description: '참조 첨부 파일.',
+            sequence: 4,
+            tag: 'attachment',
+            type: 'file',
+            quota: 1,
+            active: true
+          }
+        ]
+      }
+      var dataSample = {
+        name: 'Data Sample Name',
+        description: 'Data Sample이 어쩌구 저쩌구 그래서 중요합니다. 당연히 그래야죠.',
+        state: 'CORRECTED',
+        useCase: 'CCP',
+        judgment: {
+          temp: {
+            ooc: true,
+            oos: false
+          },
+          humid: {
+            ooc: false,
+            oos: true
+          }
+        },
+        data: {
+          temp: [1000, 1023, 1027, 997, 981],
+          humid: [20, 23, 21, 26, 27],
+          inspection: [true, false, true, false, false],
+          evaluation: ['최우수', '보통', '우수', '보통', '최우수'],
+          comment: '이것은 코멘트입니다.'
+        },
+        dataItems: dataSet.dataItems,
+        spec: {
+          temp: {
+            name: '창고 온도',
+            description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  minimum: 100,
+                  maximum: 200
+                },
+                targetLimits: {
+                  minimum: 120,
+                  maximum: 180
+                }
+              }
+            }
+          },
+          humid: {
+            name: '창고 습도',
+            description: '창고 습도는 30% 이하로 유지되어야 합니다.',
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  minimum: 10,
+                  maximum: 50
+                },
+                targetLimits: {
+                  minimum: 20,
+                  maximum: 40
+                }
+              }
+            }
+          },
+          inspection: {
+            name: '육안 검사',
+            description: '육안 검사는 포장전 30분 내로 실행되어야 합니다.'
+          },
+          evaluation: {
+            name: '품평',
+            description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  acceptables: ['최우수', '우수', '보통']
+                },
+                targetLimits: {
+                  acceptables: ['최우수', '우수']
+                }
+              }
+            }
+          },
+          comment: {
+            name: '코멘트',
+            description: '특이사항을 기록함.'
+          },
+          attachment: {
+            name: '첨부파일',
+            description: '참조 첨부 파일.'
+          }
+        },
+        collectedAt: Date.now(),
+        reviewer: {
+          name: '남상혁'
+        },
+        reviewedAt: Date.now(),
+        correctiveInstruction: '바지틀고서 만나오리오. 쿠투추파',
+        corrector: {
+          name: '남상혁'
+        },
+        correctedAt: Date.now(),
+        correctiveAction: '바지틀고서 만나오리오. 쿠투추파',
+        history: [
+          {
+            user: {
+              id: 0,
+              name: 'shnam'
+            },
+            state: 'ISSUED',
+            timestamp: Date.now()
+          },
+          {
+            user: {
+              id: 0,
+              name: 'shnam'
+            },
+            state: 'REVIEWED',
+            comment: '금일 생산한 제품은 전량 폐기합니다',
+            timestamp: Date.now()
+          },
+          {
+            user: {
+              id: 0,
+              name: 'shnam'
+            },
+            state: 'CORRECTED',
+            timestamp: Date.now()
+          }
+        ]
+      }
+      class OxDataSampleViewDemo extends LitElement {
+        static styles = [
+          css`
+            :host {
+              display: block;
+            }
+            ox-data-sample-view {
+              page-break-after: always;
+            }
+          `
+        ]
+        render() {
+          return Array(10)
+            .fill(null)
+            .map(
+              () => html`
+                <ox-data-sample-view
+                  .dataSet=${dataSet}
+                  .dataSample=${dataSample}
+                  @change=${e => console.log(e.detail)}
+                ></ox-data-sample-view>
+              `
+            )
+        }
+      }
+      customElements.define('ox-data-sample-view-demo', OxDataSampleViewDemo)
+      setTimeout(() => {
+        render(html` <ox-data-sample-view-demo></ox-data-sample-view-demo> `, document.querySelector('#demo'))
+      })
+    </script>
+    <div id="app">
+      <div id="demo"></div>
+    </div>
+  </body>
+</html>

package/demo/ox-data-ooc-brief-view-test.html ADDED Viewed

@@ -0,0 +1,349 @@
+<!doctype html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <style>
+      body {
+        /* box-sizing: border-box; */
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        /* This is a font-stack that tries to use the system-default sans-serifs first */
+        font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+      }
+      #app {
+        width: 100vw;
+        height: 100dvh;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+      }
+      #demo {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+      }
+      @media print {
+        #app {
+          height: unset;
+        }
+      }
+    </style>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/oops-theme.css" rel="stylesheet" />
+  </head>
+  <body>
+    <script type="module">
+      import { LitElement, html, css, render } from 'lit'
+      import '../dist/src/index.js'
+      import '../dist/src/usecase/ccp/index.js'
+      import '../dist/src/ox-data-ooc-brief-view.js'
+      const dataSet = {
+        name: 'sample',
+        description: 'sample description',
+        type: 'manual',
+        useCase: 'CCP',
+        dataItems: [
+          {
+            name: '창고 온도',
+            description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',
+            sequence: 1,
+            tag: 'temp',
+            group: '측정데이타',
+            type: 'number',
+            quota: 1,
+            active: true,
+            unit: '℃',
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  minimum: 100,
+                  maximum: 200
+                },
+                targetLimits: {
+                  minimum: 120,
+                  maximum: 180
+                }
+              }
+            }
+          },
+          {
+            name: '창고 습도',
+            description: '창고 습도는 30% 이하로 유지되어야 합니다.',
+            sequence: 2,
+            tag: 'humid',
+            group: '측정데이타',
+            type: 'number',
+            quota: 5,
+            active: true,
+            unit: '%',
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  minimum: 10,
+                  maximum: 50
+                },
+                targetLimits: {
+                  minimum: 20,
+                  maximum: 40
+                }
+              }
+            }
+          },
+          {
+            name: '육안 검사',
+            description: '육안 검사는 포장전 30분 내로 실행되어야 합니다.',
+            sequence: 3,
+            tag: 'inspection',
+            group: '측정데이타',
+            type: 'boolean',
+            quota: 3,
+            active: true,
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  acceptables: true
+                },
+                targetLimits: {
+                  acceptables: true
+                }
+              }
+            }
+          },
+          {
+            name: '품평',
+            description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',
+            sequence: 4,
+            tag: 'evaluation',
+            group: '측정데이타',
+            type: 'select',
+            options: {
+              options: [
+                { text: '최우수', value: '최우수' },
+                { text: '우수', value: '우수' },
+                { text: '보통', value: '보통' },
+                { text: '미달', value: '미달' }
+              ]
+            },
+            quota: 3,
+            active: true,
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  acceptables: ['최우수', '우수', '보통']
+                },
+                targetLimits: {
+                  acceptables: ['최우수', '우수']
+                }
+              }
+            }
+          },
+          {
+            name: '코멘트',
+            description: '특이사항을 기록함.',
+            sequence: 4,
+            tag: 'comment',
+            type: 'string',
+            quota: 1,
+            active: true
+          },
+          {
+            name: '첨부파일',
+            description: '참조 첨부 파일.',
+            sequence: 4,
+            tag: 'attachment',
+            type: 'file',
+            quota: 1,
+            active: true
+          }
+        ]
+      }
+      var dataOoc = {
+        name: 'Data Sample Name',
+        description: 'Data Sample이 어쩌구 저쩌구 그래서 중요합니다. 당연히 그래야죠.',
+        state: 'CORRECTED',
+        useCase: 'CCP',
+        judgment: {
+          temp: {
+            ooc: true,
+            oos: false
+          },
+          humid: {
+            ooc: false,
+            oos: true
+          }
+        },
+        data: {
+          temp: [1000, 1023, 1027, 997, 981],
+          humid: [20, 23, 21, 26, 27],
+          inspection: [true, false, true, false, false],
+          evaluation: ['최우수', '보통', '우수', '보통', '최우수'],
+          comment: '이것은 코멘트입니다.'
+        },
+        dataItems: dataSet.dataItems,
+        spec: {
+          temp: {
+            name: '창고 온도',
+            description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  minimum: 100,
+                  maximum: 200
+                },
+                targetLimits: {
+                  minimum: 120,
+                  maximum: 180
+                }
+              }
+            }
+          },
+          humid: {
+            name: '창고 습도',
+            description: '창고 습도는 30% 이하로 유지되어야 합니다.',
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  minimum: 10,
+                  maximum: 50
+                },
+                targetLimits: {
+                  minimum: 20,
+                  maximum: 40
+                }
+              }
+            }
+          },
+          inspection: {
+            name: '육안 검사',
+            description: '육안 검사는 포장전 30분 내로 실행되어야 합니다.'
+          },
+          evaluation: {
+            name: '품평',
+            description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  acceptables: ['최우수', '우수', '보통']
+                },
+                targetLimits: {
+                  acceptables: ['최우수', '우수']
+                }
+              }
+            }
+          },
+          comment: {
+            name: '코멘트',
+            description: '특이사항을 기록함.'
+          },
+          attachment: {
+            name: '첨부파일',
+            description: '참조 첨부 파일.'
+          }
+        },
+        collectedAt: Date.now(),
+        reviewer: {
+          name: '남상혁'
+        },
+        reviewedAt: Date.now(),
+        correctiveInstruction: '바지틀고서 만나오리오. 쿠투추파',
+        corrector: {
+          name: '남상혁'
+        },
+        correctedAt: Date.now(),
+        correctiveAction: '바지틀고서 만나오리오. 쿠투추파',
+        history: [
+          {
+            user: {
+              id: 0,
+              name: 'shnam'
+            },
+            state: 'ISSUED',
+            timestamp: Date.now()
+          },
+          {
+            user: {
+              id: 0,
+              name: 'shnam'
+            },
+            state: 'REVIEWED',
+            comment: '금일 생산한 제품은 전량 폐기합니다',
+            timestamp: Date.now()
+          },
+          {
+            user: {
+              id: 0,
+              name: 'shnam'
+            },
+            state: 'CORRECTED',
+            timestamp: Date.now()
+          }
+        ]
+      }
+      class OxDataOocViewDemo extends LitElement {
+        static styles = [
+          css`
+            :host {
+              display: block;
+            }
+            ox-data-ooc-brief-view {
+              page-break-after: always;
+            }
+          `
+        ]
+        render() {
+          return Array(10)
+            .fill(null)
+            .map(
+              () => html`
+                <ox-data-ooc-brief-view
+                  .dataSet=${dataSet}
+                  .dataOoc=${dataOoc}
+                  @change=${e => console.log(e.detail)}
+                ></ox-data-ooc-brief-view>
+              `
+            )
+        }
+      }
+      customElements.define('ox-data-ooc-brief-view-demo', OxDataOocViewDemo)
+      setTimeout(() => {
+        render(html` <ox-data-ooc-brief-view-demo></ox-data-ooc-brief-view-demo> `, document.querySelector('#demo'))
+      })
+    </script>
+    <div id="app">
+      <div id="demo"></div>
+    </div>
+  </body>
+</html>

package/dist/src/grist-editor/ox-grist-editor-data-item-spec.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import './ox-popup-data-item-spec.js';
 import { OxGristEditor } from '@operato/data-grist';
 export declare class OxGristEditorDataItemSpec extends OxGristEditor {
     private popup?;
-    get editorTemplate(): import("lit").TemplateResult<1>;
+    get editorTemplate(): import("lit-html").TemplateResult<1>;
     _onclick(e: Event): void;
     _onkeydown(e: KeyboardEvent): void;
     openSelector(): Promise<void>;