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

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 (39) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/src/ox-data-ooc-badge.d.ts +9 -0
  3. package/dist/src/ox-data-ooc-badge.js +66 -0
  4. package/dist/src/ox-data-ooc-badge.js.map +1 -0
  5. package/dist/src/ox-data-ooc-brief-view.d.ts +2 -0
  6. package/dist/src/ox-data-ooc-brief-view.js +8 -109
  7. package/dist/src/ox-data-ooc-brief-view.js.map +1 -1
  8. package/dist/src/ox-data-ooc-correction-part.d.ts +9 -0
  9. package/dist/src/ox-data-ooc-correction-part.js +100 -0
  10. package/dist/src/ox-data-ooc-correction-part.js.map +1 -0
  11. package/dist/src/ox-data-ooc-history.d.ts +10 -0
  12. package/dist/src/ox-data-ooc-history.js +72 -0
  13. package/dist/src/ox-data-ooc-history.js.map +1 -0
  14. package/dist/src/ox-data-ooc-view.d.ts +1 -0
  15. package/dist/src/ox-data-ooc-view.js +6 -88
  16. package/dist/src/ox-data-ooc-view.js.map +1 -1
  17. package/dist/src/ox-data-sample-subgroup-view.js +1 -1
  18. package/dist/src/ox-data-sample-subgroup-view.js.map +1 -1
  19. package/dist/src/ox-data-sample-view.js +1 -0
  20. package/dist/src/ox-data-sample-view.js.map +1 -1
  21. package/dist/src/types.d.ts +45 -0
  22. package/dist/src/types.js.map +1 -1
  23. package/dist/stories/ox-data-ooc-view.stories.js +2 -0
  24. package/dist/stories/ox-data-ooc-view.stories.js.map +1 -1
  25. package/dist/tsconfig.tsbuildinfo +1 -1
  26. package/package.json +17 -2
  27. package/src/ox-data-ooc-badge.ts +64 -0
  28. package/src/ox-data-ooc-brief-view.ts +9 -119
  29. package/src/ox-data-ooc-correction-part.ts +108 -0
  30. package/src/ox-data-ooc-history.ts +74 -0
  31. package/src/ox-data-ooc-view.ts +6 -90
  32. package/src/ox-data-sample-subgroup-view.ts +1 -1
  33. package/src/ox-data-sample-view.ts +1 -0
  34. package/src/types.ts +47 -0
  35. package/stories/ox-data-ooc-view.stories.ts +2 -0
  36. package/translations/en.json +1 -0
  37. package/translations/ko.json +1 -0
  38. package/translations/ms.json +142 -70
  39. package/translations/zh.json +146 -75
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.0.0-alpha.15](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.14...v2.0.0-alpha.15) (2024-02-03)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * rewrite spc module ([2311e10](https://github.com/hatiolab/operato/commit/2311e10ae19f5c512a71aae84743aca2bba12efd))
12
+
13
+
14
+
15
+ ## [2.0.0-alpha.14](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.13...v2.0.0-alpha.14) (2024-01-29)
16
+
17
+
18
+ ### :bug: Bug Fix
19
+
20
+ * simplify dataset component ([b88d5b4](https://github.com/hatiolab/operato/commit/b88d5b4778807fbecef11dcab4de40b3cf397de3))
21
+ * typo for dataset ox-data-ooc-view ([b2e68d5](https://github.com/hatiolab/operato/commit/b2e68d57017bde6dc609621620e45d4f78979835))
22
+
23
+
24
+
6
25
  ## [2.0.0-alpha.13](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.12...v2.0.0-alpha.13) (2024-01-28)
7
26
 
8
27
 
@@ -0,0 +1,9 @@
1
+ import '@operato/input/ox-input-file.js';
2
+ import './ox-data-sample-view';
3
+ import '@material/mwc-icon';
4
+ import { LitElement } from 'lit';
5
+ export declare class OxDataOocBadge extends LitElement {
6
+ static styles: import("lit").CSSResult;
7
+ state?: string;
8
+ render(): import("lit").TemplateResult<1>;
9
+ }
@@ -0,0 +1,66 @@
1
+ import { __decorate } from "tslib";
2
+ import '@operato/input/ox-input-file.js';
3
+ import './ox-data-sample-view';
4
+ import '@material/mwc-icon';
5
+ import { css, html, LitElement } from 'lit';
6
+ import { customElement, property } from 'lit/decorators.js';
7
+ let OxDataOocBadge = class OxDataOocBadge extends LitElement {
8
+ render() {
9
+ const state = this.state;
10
+ return html `
11
+ <h3 ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>
12
+ <mwc-icon>shield</mwc-icon>
13
+ <div>DATA OOC <span field-state>${state || ''}</span></div>
14
+ </h3>
15
+ `;
16
+ }
17
+ };
18
+ OxDataOocBadge.styles = css `
19
+ h3 {
20
+ margin: var(--title-margin);
21
+ font: var(--title-font);
22
+ color: var(--title-text-color);
23
+ text-align: center;
24
+ }
25
+
26
+ mwc-icon {
27
+ font-size: 80px;
28
+ opacity: 0.4;
29
+ color: var(--primary-background-color);
30
+ }
31
+
32
+ div {
33
+ position: absolute;
34
+ top: 22px;
35
+ left: 0;
36
+ right: 0;
37
+ font-size: 10px;
38
+ color: var(--theme-white-color);
39
+ }
40
+
41
+ [field-state] {
42
+ display: block;
43
+ border-radius: 4px;
44
+ background-color: var(--primary-color);
45
+ box-shadow: var(--box-shadow);
46
+ margin-top: var(--margin-narrow);
47
+ padding: 1px 3px;
48
+ font-size: 0.8rem;
49
+ }
50
+
51
+ [danger] [field-state] {
52
+ background-color: var(--status-danger-color);
53
+ }
54
+
55
+ [complete] [field-state] {
56
+ background-color: var(--status-info-color);
57
+ }
58
+ `;
59
+ __decorate([
60
+ property({ type: String })
61
+ ], OxDataOocBadge.prototype, "state", void 0);
62
+ OxDataOocBadge = __decorate([
63
+ customElement('ox-data-ooc-badge')
64
+ ], OxDataOocBadge);
65
+ export { OxDataOocBadge };
66
+ //# sourceMappingURL=ox-data-ooc-badge.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-data-ooc-badge.js","sourceRoot":"","sources":["../../src/ox-data-ooc-badge.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAW,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGpD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IA6C5C,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,OAAO,IAAI,CAAA;oBACK,KAAK,IAAI,WAAW,cAAc,KAAK,IAAI,WAAW;;0CAEhC,KAAK,IAAI,EAAE;;KAEhD,CAAA;IACH,CAAC;;AArDM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwClB,AAxCY,CAwCZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AA3C/B,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CAuD1B","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport './ox-data-sample-view'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-data-ooc-badge')\nexport class OxDataOocBadge extends LitElement {\n static styles = css`\n h3 {\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n text-align: center;\n }\n\n mwc-icon {\n font-size: 80px;\n opacity: 0.4;\n color: var(--primary-background-color);\n }\n\n div {\n position: absolute;\n top: 22px;\n left: 0;\n right: 0;\n font-size: 10px;\n color: var(--theme-white-color);\n }\n\n [field-state] {\n display: block;\n border-radius: 4px;\n background-color: var(--primary-color);\n box-shadow: var(--box-shadow);\n margin-top: var(--margin-narrow);\n padding: 1px 3px;\n font-size: 0.8rem;\n }\n\n [danger] [field-state] {\n background-color: var(--status-danger-color);\n }\n\n [complete] [field-state] {\n background-color: var(--status-info-color);\n }\n `\n\n @property({ type: String }) state?: string\n\n render() {\n const state = this.state\n\n return html`\n <h3 ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>\n <mwc-icon>shield</mwc-icon>\n <div>DATA OOC <span field-state>${state || ''}</span></div>\n </h3>\n `\n }\n}\n"]}
@@ -1,5 +1,7 @@
1
1
  import '@operato/input/ox-input-file.js';
2
2
  import './ox-data-sample-view';
3
+ import './ox-data-ooc-badge';
4
+ import './ox-data-ooc-correction-part';
3
5
  import '@material/mwc-icon';
4
6
  import { LitElement } from 'lit';
5
7
  import { DataOoc } from './types.js';
@@ -1,44 +1,18 @@
1
1
  import { __decorate } from "tslib";
2
2
  import '@operato/input/ox-input-file.js';
3
3
  import './ox-data-sample-view';
4
+ import './ox-data-ooc-badge';
5
+ import './ox-data-ooc-correction-part';
4
6
  import '@material/mwc-icon';
5
- import { css, html, LitElement, nothing } from 'lit';
7
+ import { css, html, LitElement } from 'lit';
6
8
  import { customElement, property } from 'lit/decorators.js';
7
- import { i18next } from '@operato/i18n';
8
9
  let OxDataOocBriefView = class OxDataOocBriefView extends LitElement {
9
10
  render() {
10
- const { correctiveInstruction = '', correctiveAction = '', reviewer, reviewedAt, corrector, correctedAt, state } = this.dataOoc || {};
11
- const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
11
+ const { state } = this.dataOoc || {};
12
12
  return html `
13
13
  <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>
14
-
15
- <h3 state ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>
16
- <mwc-icon>shield</mwc-icon>
17
- <div>DATA OOC <span field-state>${state || ''}</span></div>
18
- </h3>
19
-
20
- ${reviewer
21
- ? html `
22
- <h3 corrective>${i18next.t('label.corrective instruction')}</h3>
23
- <p corrective-content>
24
- <span field-info
25
- >${formatter.format(new Date(reviewedAt))} <mwc-icon>account_circle</mwc-icon>${reviewer.name}</span
26
- >
27
- <strong>${correctiveInstruction}</strong>
28
- </p>
29
- `
30
- : nothing}
31
- ${corrector
32
- ? html `
33
- <h3 corrective>${i18next.t('label.corrective action')}</h3>
34
- <p corrective-content>
35
- <span field-info
36
- >${formatter.format(new Date(correctedAt))} <mwc-icon>account_circle</mwc-icon>${corrector.name}</span
37
- >
38
- <strong>${correctiveAction}</strong>
39
- </p>
40
- `
41
- : nothing}
14
+ <ox-data-ooc-badge .state=${state}></ox-data-ooc-badge>
15
+ <ox-data-ooc-correction-part .dataOoc=${this.dataOoc}></ox-data-ooc-correction-part>
42
16
  `;
43
17
  }
44
18
  };
@@ -51,88 +25,13 @@ OxDataOocBriefView.styles = css `
51
25
  position: relative;
52
26
  }
53
27
 
54
- h3 {
55
- margin: var(--title-margin);
56
- padding-top: 12px;
57
- font: var(--title-font);
58
- color: var(--title-text-color);
59
- }
60
-
61
- h3[state] {
28
+ ox-data-ooc-badge {
62
29
  position: absolute;
30
+
63
31
  margin: 0;
64
32
  padding: 0;
65
33
  right: 10px;
66
34
  width: 90px;
67
- text-align: center;
68
- }
69
-
70
- h3[corrective] {
71
- font-size: 20px;
72
- }
73
-
74
- mwc-icon {
75
- font-size: 16px;
76
- }
77
- [state] mwc-icon {
78
- font-size: 80px;
79
- opacity: 0.4;
80
- color: var(--primary-background-color);
81
- }
82
-
83
- [state] div {
84
- position: absolute;
85
- top: 22px;
86
- left: 0;
87
- right: 0;
88
- font-size: 10px;
89
- color: var(--theme-white-color);
90
- }
91
- [state] [field-state] {
92
- display: block;
93
- border-radius: 4px;
94
- background-color: var(--primary-color);
95
- box-shadow: var(--box-shadow);
96
- margin-top: var(--margin-narrow);
97
- padding: 1px 3px;
98
- font-size: 0.8rem;
99
- }
100
- [danger] [field-state] {
101
- background-color: var(--status-danger-color);
102
- }
103
- [complete] [field-state] {
104
- background-color: var(--status-info-color);
105
- }
106
-
107
- [corrective-content] [field-state] {
108
- border-radius: 2px;
109
- background-color: var(--primary-color);
110
- margin-left: var(--margin-default);
111
- padding: 1px 2px;
112
- font-size: 0.7rem;
113
- color: var(--theme-white-color);
114
- }
115
- [corrective-content] {
116
- background-color: var(--theme-white-color);
117
- box-shadow: var(--box-shadow);
118
- border-radius: var(--border-radius);
119
- margin: var(--page-description-margin);
120
- padding: var(--padding-default);
121
- font: var(--page-description-font);
122
- color: var(--secondary-color);
123
- }
124
- [corrective-content] mwc-icon {
125
- position: relative;
126
- top: 3px;
127
- margin: 0 2px 0 10px;
128
- }
129
- [field-info] {
130
- opacity: 0.7;
131
- }
132
- [corrective-content] strong {
133
- display: block;
134
- font-weight: bold;
135
- font-size: 0.9rem;
136
35
  }
137
36
  `;
138
37
  __decorate([
@@ -1 +1 @@
1
- {"version":3,"file":"ox-data-ooc-brief-view.js","sourceRoot":"","sources":["../../src/ox-data-ooc-brief-view.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAKhC,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAiGhD,MAAM;QACJ,MAAM,EACJ,qBAAqB,GAAG,EAAE,EAC1B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,WAAW,EACX,KAAK,EACN,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QACtB,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;QAExG,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,OAAO;;0BAE3B,KAAK,IAAI,WAAW,cAAc,KAAK,IAAI,WAAW;;0CAEtC,KAAK,IAAI,EAAE;;;QAG7C,QAAQ;YACR,CAAC,CAAC,IAAI,CAAA;6BACe,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;;;mBAGnD,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAW,CAAC,CAAC,uCAAuC,QAAQ,CAAC,IAAI;;wBAEtF,qBAAqB;;WAElC;YACH,CAAC,CAAC,OAAO;QACT,SAAS;YACT,CAAC,CAAC,IAAI,CAAA;6BACe,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC;;;mBAG9C,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,WAAY,CAAC,CAAC,uCAAuC,SAAS,CAAC,IAAI;;wBAExF,gBAAgB;;WAE7B;YACH,CAAC,CAAC,OAAO;KACZ,CAAA;IACH,CAAC;;AA3IM,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4FlB,AA5FY,CA4FZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAkB;AA/FlC,kBAAkB;IAD9B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,kBAAkB,CA6I9B","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport './ox-data-sample-view'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataOoc, DataSet } from './types.js'\n\n@customElement('ox-data-ooc-brief-view')\nexport class OxDataOocBriefView extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--main-section-background-color);\n\n position: relative;\n }\n\n h3 {\n margin: var(--title-margin);\n padding-top: 12px;\n font: var(--title-font);\n color: var(--title-text-color);\n }\n\n h3[state] {\n position: absolute;\n margin: 0;\n padding: 0;\n right: 10px;\n width: 90px;\n text-align: center;\n }\n\n h3[corrective] {\n font-size: 20px;\n }\n\n mwc-icon {\n font-size: 16px;\n }\n [state] mwc-icon {\n font-size: 80px;\n opacity: 0.4;\n color: var(--primary-background-color);\n }\n\n [state] div {\n position: absolute;\n top: 22px;\n left: 0;\n right: 0;\n font-size: 10px;\n color: var(--theme-white-color);\n }\n [state] [field-state] {\n display: block;\n border-radius: 4px;\n background-color: var(--primary-color);\n box-shadow: var(--box-shadow);\n margin-top: var(--margin-narrow);\n padding: 1px 3px;\n font-size: 0.8rem;\n }\n [danger] [field-state] {\n background-color: var(--status-danger-color);\n }\n [complete] [field-state] {\n background-color: var(--status-info-color);\n }\n\n [corrective-content] [field-state] {\n border-radius: 2px;\n background-color: var(--primary-color);\n margin-left: var(--margin-default);\n padding: 1px 2px;\n font-size: 0.7rem;\n color: var(--theme-white-color);\n }\n [corrective-content] {\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n margin: var(--page-description-margin);\n padding: var(--padding-default);\n font: var(--page-description-font);\n color: var(--secondary-color);\n }\n [corrective-content] mwc-icon {\n position: relative;\n top: 3px;\n margin: 0 2px 0 10px;\n }\n [field-info] {\n opacity: 0.7;\n }\n [corrective-content] strong {\n display: block;\n font-weight: bold;\n font-size: 0.9rem;\n }\n `\n\n @property({ type: Object }) dataOoc?: DataOoc\n\n render() {\n const {\n correctiveInstruction = '',\n correctiveAction = '',\n reviewer,\n reviewedAt,\n corrector,\n correctedAt,\n state\n } = this.dataOoc || {}\n const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n return html`\n <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>\n\n <h3 state ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>\n <mwc-icon>shield</mwc-icon>\n <div>DATA OOC <span field-state>${state || ''}</span></div>\n </h3>\n\n ${reviewer\n ? html`\n <h3 corrective>${i18next.t('label.corrective instruction')}</h3>\n <p corrective-content>\n <span field-info\n >${formatter.format(new Date(reviewedAt!))} <mwc-icon>account_circle</mwc-icon>${reviewer.name}</span\n >\n <strong>${correctiveInstruction}</strong>\n </p>\n `\n : nothing}\n ${corrector\n ? html`\n <h3 corrective>${i18next.t('label.corrective action')}</h3>\n <p corrective-content>\n <span field-info\n >${formatter.format(new Date(correctedAt!))} <mwc-icon>account_circle</mwc-icon>${corrector.name}</span\n >\n <strong>${correctiveAction}</strong>\n </p>\n `\n : nothing}\n `\n }\n}\n"]}
1
+ {"version":3,"file":"ox-data-ooc-brief-view.js","sourceRoot":"","sources":["../../src/ox-data-ooc-brief-view.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,qBAAqB,CAAA;AAC5B,OAAO,+BAA+B,CAAA;AACtC,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAKpD,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAsBhD,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAEpC,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,OAAO;kCACnB,KAAK;8CACO,IAAI,CAAC,OAAO;KACrD,CAAA;IACH,CAAC;;AA7BM,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;GAiBlB,AAjBY,CAiBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAkB;AApBlC,kBAAkB;IAD9B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,kBAAkB,CA+B9B","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport './ox-data-sample-view'\nimport './ox-data-ooc-badge'\nimport './ox-data-ooc-correction-part'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataOoc } from './types.js'\n\n@customElement('ox-data-ooc-brief-view')\nexport class OxDataOocBriefView extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--main-section-background-color);\n\n position: relative;\n }\n\n ox-data-ooc-badge {\n position: absolute;\n\n margin: 0;\n padding: 0;\n right: 10px;\n width: 90px;\n }\n `\n\n @property({ type: Object }) dataOoc?: DataOoc\n\n render() {\n const { state } = this.dataOoc || {}\n\n return html`\n <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>\n <ox-data-ooc-badge .state=${state}></ox-data-ooc-badge>\n <ox-data-ooc-correction-part .dataOoc=${this.dataOoc}></ox-data-ooc-correction-part>\n `\n }\n}\n"]}
@@ -0,0 +1,9 @@
1
+ import '@operato/input/ox-input-file.js';
2
+ import '@material/mwc-icon';
3
+ import { LitElement } from 'lit';
4
+ import { DataOoc } from './types.js';
5
+ export declare class OxDataOocCorrectionPart extends LitElement {
6
+ static styles: import("lit").CSSResult;
7
+ dataOoc?: DataOoc;
8
+ render(): import("lit").TemplateResult<1>;
9
+ }
@@ -0,0 +1,100 @@
1
+ import { __decorate } from "tslib";
2
+ import '@operato/input/ox-input-file.js';
3
+ import '@material/mwc-icon';
4
+ import { css, html, LitElement, nothing } from 'lit';
5
+ import { customElement, property } from 'lit/decorators.js';
6
+ import { i18next } from '@operato/i18n';
7
+ let OxDataOocCorrectionPart = class OxDataOocCorrectionPart extends LitElement {
8
+ render() {
9
+ const { correctiveInstruction = '', correctiveAction = '', reviewer, reviewedAt, corrector, correctedAt } = this.dataOoc || {};
10
+ const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
11
+ return html `
12
+ ${reviewer
13
+ ? html `
14
+ <h3>${i18next.t('label.corrective instruction')}</h3>
15
+ <p>
16
+ <span field-info
17
+ >${formatter.format(new Date(reviewedAt))} <mwc-icon>account_circle</mwc-icon>${reviewer.name}</span
18
+ >
19
+ <strong>${correctiveInstruction}</strong>
20
+ </p>
21
+ `
22
+ : nothing}
23
+ ${corrector
24
+ ? html `
25
+ <h3>${i18next.t('label.corrective action')}</h3>
26
+ <p>
27
+ <span field-info
28
+ >${formatter.format(new Date(correctedAt))} <mwc-icon>account_circle</mwc-icon>${corrector.name}</span
29
+ >
30
+ <strong>${correctiveAction}</strong>
31
+ </p>
32
+ `
33
+ : nothing}
34
+ `;
35
+ }
36
+ };
37
+ OxDataOocCorrectionPart.styles = css `
38
+ :host {
39
+ display: flex;
40
+ flex-direction: column;
41
+ background-color: var(--main-section-background-color);
42
+
43
+ position: relative;
44
+ }
45
+
46
+ h3 {
47
+ margin: var(--title-margin);
48
+ padding-top: 12px;
49
+ font: var(--title-font);
50
+ color: var(--title-text-color);
51
+ font-size: 20px;
52
+ }
53
+
54
+ mwc-icon {
55
+ font-size: 16px;
56
+ }
57
+
58
+ [field-state] {
59
+ border-radius: 2px;
60
+ background-color: var(--primary-color);
61
+ margin-left: var(--margin-default);
62
+ padding: 1px 2px;
63
+ font-size: 0.7rem;
64
+ color: var(--theme-white-color);
65
+ }
66
+
67
+ p {
68
+ background-color: var(--theme-white-color);
69
+ box-shadow: var(--box-shadow);
70
+ border-radius: var(--border-radius);
71
+ margin: var(--page-description-margin);
72
+ padding: var(--padding-default);
73
+ font: var(--page-description-font);
74
+ color: var(--secondary-color);
75
+ }
76
+
77
+ mwc-icon {
78
+ position: relative;
79
+ top: 3px;
80
+ margin: 0 2px 0 10px;
81
+ }
82
+
83
+ [field-info] {
84
+ opacity: 0.7;
85
+ }
86
+
87
+ strong {
88
+ display: block;
89
+ font-weight: bold;
90
+ font-size: 0.9rem;
91
+ }
92
+ `;
93
+ __decorate([
94
+ property({ type: Object })
95
+ ], OxDataOocCorrectionPart.prototype, "dataOoc", void 0);
96
+ OxDataOocCorrectionPart = __decorate([
97
+ customElement('ox-data-ooc-correction-part')
98
+ ], OxDataOocCorrectionPart);
99
+ export { OxDataOocCorrectionPart };
100
+ //# sourceMappingURL=ox-data-ooc-correction-part.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-data-ooc-correction-part.js","sourceRoot":"","sources":["../../src/ox-data-ooc-correction-part.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAKhC,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IA4DrD,MAAM;QACJ,MAAM,EACJ,qBAAqB,GAAG,EAAE,EAC1B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,WAAW,EACZ,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QACtB,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;QAExG,OAAO,IAAI,CAAA;QACP,QAAQ;YACR,CAAC,CAAC,IAAI,CAAA;kBACI,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;;;mBAGxC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAW,CAAC,CAAC,uCAAuC,QAAQ,CAAC,IAAI;;wBAEtF,qBAAqB;;WAElC;YACH,CAAC,CAAC,OAAO;QACT,SAAS;YACT,CAAC,CAAC,IAAI,CAAA;kBACI,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC;;;mBAGnC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,WAAY,CAAC,CAAC,uCAAuC,SAAS,CAAC,IAAI;;wBAExF,gBAAgB;;WAE7B;YACH,CAAC,CAAC,OAAO;KACZ,CAAA;IACH,CAAC;;AA9FM,8BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDlB,AAvDY,CAuDZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAkB;AA1DlC,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CAgGnC","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataOoc } from './types.js'\n\n@customElement('ox-data-ooc-correction-part')\nexport class OxDataOocCorrectionPart extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--main-section-background-color);\n\n position: relative;\n }\n\n h3 {\n margin: var(--title-margin);\n padding-top: 12px;\n font: var(--title-font);\n color: var(--title-text-color);\n font-size: 20px;\n }\n\n mwc-icon {\n font-size: 16px;\n }\n\n [field-state] {\n border-radius: 2px;\n background-color: var(--primary-color);\n margin-left: var(--margin-default);\n padding: 1px 2px;\n font-size: 0.7rem;\n color: var(--theme-white-color);\n }\n\n p {\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n margin: var(--page-description-margin);\n padding: var(--padding-default);\n font: var(--page-description-font);\n color: var(--secondary-color);\n }\n\n mwc-icon {\n position: relative;\n top: 3px;\n margin: 0 2px 0 10px;\n }\n\n [field-info] {\n opacity: 0.7;\n }\n\n strong {\n display: block;\n font-weight: bold;\n font-size: 0.9rem;\n }\n `\n\n @property({ type: Object }) dataOoc?: DataOoc\n\n render() {\n const {\n correctiveInstruction = '',\n correctiveAction = '',\n reviewer,\n reviewedAt,\n corrector,\n correctedAt\n } = this.dataOoc || {}\n const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n return html`\n ${reviewer\n ? html`\n <h3>${i18next.t('label.corrective instruction')}</h3>\n <p>\n <span field-info\n >${formatter.format(new Date(reviewedAt!))} <mwc-icon>account_circle</mwc-icon>${reviewer.name}</span\n >\n <strong>${correctiveInstruction}</strong>\n </p>\n `\n : nothing}\n ${corrector\n ? html`\n <h3>${i18next.t('label.corrective action')}</h3>\n <p>\n <span field-info\n >${formatter.format(new Date(correctedAt!))} <mwc-icon>account_circle</mwc-icon>${corrector.name}</span\n >\n <strong>${correctiveAction}</strong>\n </p>\n `\n : nothing}\n `\n }\n}\n"]}
@@ -0,0 +1,10 @@
1
+ import '@operato/input/ox-input-file.js';
2
+ import './ox-data-sample-view';
3
+ import '@material/mwc-icon';
4
+ import { LitElement } from 'lit';
5
+ import { DataOoc } from './types.js';
6
+ export declare class OxDataOocHistory extends LitElement {
7
+ static styles: import("lit").CSSResult;
8
+ dataOoc?: DataOoc;
9
+ render(): import("lit").TemplateResult<1>;
10
+ }
@@ -0,0 +1,72 @@
1
+ import { __decorate } from "tslib";
2
+ import '@operato/input/ox-input-file.js';
3
+ import './ox-data-sample-view';
4
+ import '@material/mwc-icon';
5
+ import { css, html, LitElement } from 'lit';
6
+ import { customElement, property } from 'lit/decorators.js';
7
+ let OxDataOocHistory = class OxDataOocHistory extends LitElement {
8
+ render() {
9
+ const { history = [] } = this.dataOoc || {};
10
+ const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
11
+ return html `
12
+ ${history.map(({ user, state, comment, timestamp }) => html `
13
+ <p page-history>
14
+ <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
15
+ <span field-info
16
+ >${formatter.format(new Date(timestamp))} <mwc-icon>account_circle</mwc-icon>${user.name}</span
17
+ >
18
+ <span field-state>${state}</span>
19
+ <strong>${comment}</strong>
20
+ </p>
21
+ `)}
22
+ `;
23
+ }
24
+ };
25
+ OxDataOocHistory.styles = css `
26
+ mwc-icon {
27
+ font-size: 16px;
28
+ }
29
+
30
+ [field-state] {
31
+ border-radius: 2px;
32
+ background-color: var(--primary-color);
33
+ margin-left: var(--margin-default);
34
+ padding: 1px 2px;
35
+ font-size: 0.7rem;
36
+ color: var(--theme-white-color);
37
+ }
38
+
39
+ p {
40
+ background-color: var(--theme-white-color);
41
+ box-shadow: var(--box-shadow);
42
+ border-radius: var(--border-radius);
43
+ margin: var(--page-description-margin);
44
+ padding: var(--padding-default);
45
+ font: var(--page-description-font);
46
+ color: var(--secondary-color);
47
+ }
48
+
49
+ mwc-icon {
50
+ position: relative;
51
+ top: 3px;
52
+ margin: 0 2px 0 10px;
53
+ }
54
+
55
+ [field-info] {
56
+ opacity: 0.7;
57
+ }
58
+
59
+ strong {
60
+ display: block;
61
+ font-weight: bold;
62
+ font-size: 0.9rem;
63
+ }
64
+ `;
65
+ __decorate([
66
+ property({ type: Object })
67
+ ], OxDataOocHistory.prototype, "dataOoc", void 0);
68
+ OxDataOocHistory = __decorate([
69
+ customElement('ox-data-ooc-history')
70
+ ], OxDataOocHistory);
71
+ export { OxDataOocHistory };
72
+ //# sourceMappingURL=ox-data-ooc-history.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-data-ooc-history.js","sourceRoot":"","sources":["../../src/ox-data-ooc-history.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAKpD,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IA4C9C,MAAM;QACJ,MAAM,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAC3C,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;QAExG,OAAO,IAAI,CAAA;QACP,OAAO,CAAC,GAAG,CACX,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;;;iBAIpC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,uCAAuC,IAAI,CAAC,IAAI;;gCAEtE,KAAK;sBACf,OAAO;;SAEpB,CACF;KACF,CAAA;IACH,CAAC;;AA7DM,uBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuClB,AAvCY,CAuCZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAkB;AA1ClC,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CA+D5B","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport './ox-data-sample-view'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataOoc } from './types.js'\n\n@customElement('ox-data-ooc-history')\nexport class OxDataOocHistory extends LitElement {\n static styles = css`\n mwc-icon {\n font-size: 16px;\n }\n\n [field-state] {\n border-radius: 2px;\n background-color: var(--primary-color);\n margin-left: var(--margin-default);\n padding: 1px 2px;\n font-size: 0.7rem;\n color: var(--theme-white-color);\n }\n\n p {\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n margin: var(--page-description-margin);\n padding: var(--padding-default);\n font: var(--page-description-font);\n color: var(--secondary-color);\n }\n\n mwc-icon {\n position: relative;\n top: 3px;\n margin: 0 2px 0 10px;\n }\n\n [field-info] {\n opacity: 0.7;\n }\n\n strong {\n display: block;\n font-weight: bold;\n font-size: 0.9rem;\n }\n `\n\n @property({ type: Object }) dataOoc?: DataOoc\n\n render() {\n const { history = [] } = this.dataOoc || {}\n const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n return html`\n ${history.map(\n ({ user, state, comment, timestamp }) => html`\n <p page-history>\n <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->\n <span field-info\n >${formatter.format(new Date(timestamp))} <mwc-icon>account_circle</mwc-icon>${user.name}</span\n >\n <span field-state>${state}</span>\n <strong>${comment}</strong>\n </p>\n `\n )}\n `\n }\n}\n"]}
@@ -1,5 +1,6 @@
1
1
  import '@operato/input/ox-input-file.js';
2
2
  import './ox-data-sample-view';
3
+ import './ox-data-ooc-history';
3
4
  import '@material/mwc-icon';
4
5
  import { LitElement } from 'lit';
5
6
  import { DataOoc, DataSet } from './types.js';
@@ -1,6 +1,7 @@
1
1
  import { __decorate } from "tslib";
2
2
  import '@operato/input/ox-input-file.js';
3
3
  import './ox-data-sample-view';
4
+ import './ox-data-ooc-history';
4
5
  import '@material/mwc-icon';
5
6
  import { css, html, LitElement } from 'lit';
6
7
  import { customElement, property } from 'lit/decorators.js';
@@ -10,27 +11,14 @@ import { i18next } from '@operato/i18n';
10
11
  */
11
12
  let OxDataOocView = class OxDataOocView extends LitElement {
12
13
  render() {
13
- const { history = [], state } = this.dataOoc || {};
14
- const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
14
+ const { state } = this.dataOoc || {};
15
15
  return html `
16
16
  <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>
17
17
 
18
- <h3 state ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>
19
- <mwc-icon>shield</mwc-icon>
20
- <div>DATA OOC <span field-state>${state || ''}</span></div>
21
- </h3>
18
+ <ox-data-ooc-badge .state=${state}></ox-data-ooc-badge>
22
19
 
23
20
  <h3>${i18next.t('title.history')}</h3>
24
- ${history.map(({ user, state, comment, timestamp }) => html `
25
- <p page-history>
26
- <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
27
- <span field-info
28
- >${formatter.format(new Date(timestamp))} <mwc-icon>account_circle</mwc-icon>${user.name}</span
29
- >
30
- <span field-state>${state}</span>
31
- <strong>${comment}</strong>
32
- </p>
33
- `)}
21
+ <ox-data-ooc-history .dataOoc=${this.dataOoc}></ox-data-ooc-history>
34
22
  `;
35
23
  }
36
24
  };
@@ -43,83 +31,13 @@ OxDataOocView.styles = css `
43
31
  position: relative;
44
32
  }
45
33
 
46
- h3 {
47
- margin: var(--title-margin);
48
- padding-top: 12px;
49
- font: var(--title-font);
50
- color: var(--title-text-color);
51
- }
52
-
53
- h3[state] {
34
+ ox-data-ooc-badge {
54
35
  position: absolute;
36
+
55
37
  margin: 0;
56
38
  padding: 0;
57
39
  right: 10px;
58
40
  width: 90px;
59
- text-align: center;
60
- }
61
-
62
- mwc-icon {
63
- font-size: 16px;
64
- }
65
- [state] mwc-icon {
66
- font-size: 80px;
67
- opacity: 0.4;
68
- color: var(--primary-background-color);
69
- }
70
-
71
- [state] div {
72
- position: absolute;
73
- top: 22px;
74
- left: 0;
75
- right: 0;
76
- font-size: 10px;
77
- color: var(--theme-white-color);
78
- }
79
- [state] [field-state] {
80
- display: block;
81
- border-radius: 4px;
82
- background-color: var(--primary-color);
83
- box-shadow: var(--box-shadow);
84
- margin-top: var(--margin-narrow);
85
- padding: 1px 3px;
86
- font-size: 0.8rem;
87
- }
88
- [danger] [field-state] {
89
- background-color: var(--status-danger-color);
90
- }
91
- [complete] [field-state] {
92
- background-color: var(--status-info-color);
93
- }
94
- [page-history] [field-state] {
95
- border-radius: 2px;
96
- background-color: var(--primary-color);
97
- margin-left: var(--margin-default);
98
- padding: 1px 2px;
99
- font-size: 0.7rem;
100
- color: var(--theme-white-color);
101
- }
102
- [page-history] {
103
- background-color: var(--theme-white-color);
104
- box-shadow: var(--box-shadow);
105
- border-radius: var(--border-radius);
106
- margin: var(--page-description-margin);
107
- padding: var(--padding-default);
108
- font: var(--page-description-font);
109
- color: var(--secondary-color);
110
- }
111
- [page-history] mwc-icon {
112
- position: relative;
113
- top: 3px;
114
- margin: 0 2px 0 10px;
115
- }
116
- [field-info] {
117
- opacity: 0.7;
118
- }
119
- [page-history] strong {
120
- display: block;
121
- font-weight: bold;
122
- font-size: 0.9rem;
123
41
  }
124
42
  `;
125
43
  __decorate([
@@ -1 +1 @@
1
- {"version":3,"file":"ox-data-ooc-view.js","sourceRoot":"","sources":["../../src/ox-data-ooc-view.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAIvC;;GAEG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IA6F3C,MAAM;QACJ,MAAM,EAAE,OAAO,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAClD,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;QAExG,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,OAAO;;0BAE3B,KAAK,IAAI,WAAW,cAAc,KAAK,IAAI,WAAW;;0CAEtC,KAAK,IAAI,EAAE;;;YAGzC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;QAC9B,OAAO,CAAC,GAAG,CACX,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;;;iBAIpC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,uCAAuC,IAAI,CAAC,IAAI;;gCAEtE,KAAK;sBACf,OAAO;;SAEpB,CACF;KACF,CAAA;IACH,CAAC;;AAtHM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFlB,AAvFY,CAuFZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AA3FlC,aAAa;IADzB,aAAa,CAAC,kBAAkB,CAAC;GACrB,aAAa,CAwHzB","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport './ox-data-sample-view'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataOoc, DataSet } from './types.js'\n\n/**\n * @deprecated by ox-data-ooc-brief-view\n */\n@customElement('ox-data-ooc-view')\nexport class OxDataOocView extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--main-section-background-color);\n\n position: relative;\n }\n\n h3 {\n margin: var(--title-margin);\n padding-top: 12px;\n font: var(--title-font);\n color: var(--title-text-color);\n }\n\n h3[state] {\n position: absolute;\n margin: 0;\n padding: 0;\n right: 10px;\n width: 90px;\n text-align: center;\n }\n\n mwc-icon {\n font-size: 16px;\n }\n [state] mwc-icon {\n font-size: 80px;\n opacity: 0.4;\n color: var(--primary-background-color);\n }\n\n [state] div {\n position: absolute;\n top: 22px;\n left: 0;\n right: 0;\n font-size: 10px;\n color: var(--theme-white-color);\n }\n [state] [field-state] {\n display: block;\n border-radius: 4px;\n background-color: var(--primary-color);\n box-shadow: var(--box-shadow);\n margin-top: var(--margin-narrow);\n padding: 1px 3px;\n font-size: 0.8rem;\n }\n [danger] [field-state] {\n background-color: var(--status-danger-color);\n }\n [complete] [field-state] {\n background-color: var(--status-info-color);\n }\n [page-history] [field-state] {\n border-radius: 2px;\n background-color: var(--primary-color);\n margin-left: var(--margin-default);\n padding: 1px 2px;\n font-size: 0.7rem;\n color: var(--theme-white-color);\n }\n [page-history] {\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n margin: var(--page-description-margin);\n padding: var(--padding-default);\n font: var(--page-description-font);\n color: var(--secondary-color);\n }\n [page-history] mwc-icon {\n position: relative;\n top: 3px;\n margin: 0 2px 0 10px;\n }\n [field-info] {\n opacity: 0.7;\n }\n [page-history] strong {\n display: block;\n font-weight: bold;\n font-size: 0.9rem;\n }\n `\n\n @property({ type: Object }) dataSet?: DataSet\n @property({ type: Object }) dataOoc?: DataOoc\n\n render() {\n const { history = [], state } = this.dataOoc || {}\n const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n return html`\n <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>\n\n <h3 state ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>\n <mwc-icon>shield</mwc-icon>\n <div>DATA OOC <span field-state>${state || ''}</span></div>\n </h3>\n\n <h3>${i18next.t('title.history')}</h3>\n ${history.map(\n ({ user, state, comment, timestamp }) => html`\n <p page-history>\n <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->\n <span field-info\n >${formatter.format(new Date(timestamp))} <mwc-icon>account_circle</mwc-icon>${user.name}</span\n >\n <span field-state>${state}</span>\n <strong>${comment}</strong>\n </p>\n `\n )}\n `\n }\n}\n"]}
1
+ {"version":3,"file":"ox-data-ooc-view.js","sourceRoot":"","sources":["../../src/ox-data-ooc-view.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,uBAAuB,CAAA;AAC9B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAIvC;;GAEG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAuB3C,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAEpC,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,OAAO;;kCAEnB,KAAK;;YAE3B,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;sCACA,IAAI,CAAC,OAAO;KAC7C,CAAA;IACH,CAAC;;AAjCM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;GAiBlB,AAjBY,CAiBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AArBlC,aAAa;IADzB,aAAa,CAAC,kBAAkB,CAAC;GACrB,aAAa,CAmCzB","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport './ox-data-sample-view'\nimport './ox-data-ooc-history'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataOoc, DataSet } from './types.js'\n\n/**\n * @deprecated by ox-data-ooc-brief-view\n */\n@customElement('ox-data-ooc-view')\nexport class OxDataOocView extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--main-section-background-color);\n\n position: relative;\n }\n\n ox-data-ooc-badge {\n position: absolute;\n\n margin: 0;\n padding: 0;\n right: 10px;\n width: 90px;\n }\n `\n\n @property({ type: Object }) dataSet?: DataSet\n @property({ type: Object }) dataOoc?: DataOoc\n\n render() {\n const { state } = this.dataOoc || {}\n\n return html`\n <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>\n\n <ox-data-ooc-badge .state=${state}></ox-data-ooc-badge>\n\n <h3>${i18next.t('title.history')}</h3>\n <ox-data-ooc-history .dataOoc=${this.dataOoc}></ox-data-ooc-history>\n `\n }\n}\n"]}