@operato/dataset 8.0.3 → 8.2.0

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 (14) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/src/ox-checklist-entry-form.d.ts +30 -0
  3. package/dist/src/ox-checklist-entry-form.js +294 -0
  4. package/dist/src/ox-checklist-entry-form.js.map +1 -0
  5. package/dist/src/ox-checklist-sample-view.d.ts +20 -0
  6. package/dist/src/ox-checklist-sample-view.js +300 -0
  7. package/dist/src/ox-checklist-sample-view.js.map +1 -0
  8. package/dist/src/ox-data-ooc-brief-view.d.ts +1 -0
  9. package/dist/src/ox-data-ooc-brief-view.js +28 -1
  10. package/dist/src/ox-data-ooc-brief-view.js.map +1 -1
  11. package/dist/src/types.d.ts +5 -0
  12. package/dist/src/types.js.map +1 -1
  13. package/dist/tsconfig.tsbuildinfo +1 -1
  14. package/package.json +18 -10
package/CHANGELOG.md CHANGED
@@ -3,6 +3,23 @@
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
+ ## [8.2.0](https://github.com/hatiolab/operato/compare/v8.1.1...v8.2.0) (2025-03-04)
7
+
8
+
9
+ ### :rocket: New Features
10
+
11
+ * 데이터셋 항목별 그룹핑 ([bd5d30e](https://github.com/hatiolab/operato/commit/bd5d30e0042e2b5c52fee535bd40de1de420dba6))
12
+
13
+
14
+
15
+ ## [8.1.0](https://github.com/hatiolab/operato/compare/v8.0.3...v8.1.0) (2025-02-19)
16
+
17
+ **Note:** Version bump only for package @operato/dataset
18
+
19
+
20
+
21
+
22
+
6
23
  ### [8.0.3](https://github.com/hatiolab/operato/compare/v8.0.2...v8.0.3) (2025-02-14)
7
24
 
8
25
  **Note:** Version bump only for package @operato/dataset
package/dist/src/ox-checklist-entry-form.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ import '@material/web/icon/icon.js';
2
+ import '@operato/context/ox-context-page-toolbar.js';
3
+ import '@operato/board/ox-board-viewer.js';
4
+ import { LitElement } from 'lit';
5
+ import { DataItem } from './types';
6
+ export declare class OxChecklistEntryForm extends LitElement {
7
+ static styles: import("lit").CSSResult[];
8
+ get context(): {
9
+ title: string;
10
+ help: string;
11
+ toolbar: boolean;
12
+ };
13
+ private dataSet?;
14
+ value?: {
15
+ [tag: string]: any;
16
+ };
17
+ render(): import("lit-html").TemplateResult<1>;
18
+ private onChange;
19
+ private buildValue;
20
+ private extractValuesFromInputs;
21
+ buildInputs(): import("lit-html").TemplateResult<1>;
22
+ buildGroupInputs(items: DataItem[], nameColspan: number): import("lit-html").TemplateResult<1>;
23
+ buildNonGroupInputs(items: DataItem[], nameColspan: number): import("lit-html").TemplateResult<1>;
24
+ isGroupRendered(renderedGroups: {
25
+ group: string;
26
+ subgroup?: string;
27
+ }[], group: string, subgroup?: string): boolean;
28
+ groupItemNums(items: DataItem[], group: string, subgroup?: string): number;
29
+ createInputElement(type: string, tag: string, value: any, options: any, idx: number): import("lit-html").TemplateResult<1>;
30
+ }
package/dist/src/ox-checklist-entry-form.js ADDED
@@ -0,0 +1,294 @@
1
+ import { __decorate } from "tslib";
2
+ import '@material/web/icon/icon.js';
3
+ import '@operato/context/ox-context-page-toolbar.js';
4
+ import '@operato/board/ox-board-viewer.js';
5
+ import { css, html, LitElement } from 'lit';
6
+ import { customElement, property } from 'lit/decorators.js';
7
+ import { i18next } from '@operato/i18n';
8
+ import { ScrollbarStyles } from '@operato/styles';
9
+ let OxChecklistEntryForm = class OxChecklistEntryForm extends LitElement {
10
+ constructor() {
11
+ super(...arguments);
12
+ this.onChange = (e) => {
13
+ this.value = this.buildValue();
14
+ this.dispatchEvent(new CustomEvent('change', {
15
+ bubbles: true,
16
+ composed: true,
17
+ detail: this.value
18
+ }));
19
+ };
20
+ }
21
+ get context() {
22
+ return {
23
+ title: i18next.t('title.checklist entry page'),
24
+ help: 'dataset/checklist-entry-page',
25
+ toolbar: false
26
+ };
27
+ }
28
+ render() {
29
+ return html ` ${this.buildInputs()} `;
30
+ }
31
+ buildValue() {
32
+ return this.extractValuesFromInputs();
33
+ }
34
+ extractValuesFromInputs() {
35
+ var _a;
36
+ return (((_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.dataItems) || []).reduce((values, dataItem) => {
37
+ const { tag, type } = dataItem;
38
+ const editors = Array.from(this.renderRoot.querySelectorAll(`[name=${tag}]`));
39
+ if (editors.length > 0) {
40
+ values[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value));
41
+ }
42
+ return values;
43
+ }, {});
44
+ }
45
+ buildInputs() {
46
+ var _a;
47
+ const dataItems = ((_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.dataItems) || [];
48
+ const groupItems = dataItems === null || dataItems === void 0 ? void 0 : dataItems.filter(i => i.group);
49
+ const nonGroupItems = dataItems === null || dataItems === void 0 ? void 0 : dataItems.filter(i => !i.group);
50
+ let nameColspan = 1;
51
+ nameColspan += groupItems.length > 0 ? 1 : 0;
52
+ nameColspan += groupItems.some(i => i.subgroup) ? 1 : 0;
53
+ return html `
54
+ <form class="checklist" @change=${this.onChange}>
55
+ <table>
56
+ <thead></thead>
57
+ <tbody>
58
+ ${this.buildGroupInputs(groupItems, nameColspan)} ${this.buildNonGroupInputs(nonGroupItems, nameColspan)}
59
+ </tbody>
60
+ </table>
61
+ </form>
62
+ `;
63
+ }
64
+ buildGroupInputs(items, nameColspan) {
65
+ let isSubgroupExist = items.some(i => i.subgroup);
66
+ let renderedGroups = [];
67
+ return html `
68
+ <tr>
69
+ <th colspan=${nameColspan} item>${i18next.t('field.item')}</th>
70
+ <th>${i18next.t('field.description')}</th>
71
+ <th value>${i18next.t('field.value')}</th>
72
+ </tr>
73
+ ${items.map(item => {
74
+ var _a, _b;
75
+ const { name, description, tag, type, quota = 1, options = {}, unit, group, subgroup } = item;
76
+ const value = ((_a = this.value) === null || _a === void 0 ? void 0 : _a[tag]) === undefined ? [] : (_b = this.value) === null || _b === void 0 ? void 0 : _b[tag];
77
+ let groupTd = null;
78
+ if (!this.isGroupRendered(renderedGroups, group)) {
79
+ groupTd = html `<td rowspan="${this.groupItemNums(items, group)}">${group}</td>`;
80
+ renderedGroups.push({ group });
81
+ }
82
+ let subgroupTd = null;
83
+ if (subgroup && !this.isGroupRendered(renderedGroups, group, subgroup)) {
84
+ subgroupTd = html `<td rowspan="${this.groupItemNums(items, group, subgroup)}">${subgroup}</td>`;
85
+ renderedGroups.push({ group, subgroup });
86
+ }
87
+ return html `
88
+ <tr>
89
+ ${groupTd} ${subgroupTd}
90
+ <td colspan=${isSubgroupExist && !subgroup ? 2 : 1}>${name}</td>
91
+ <td>${description}</td>
92
+ <td>
93
+ <div elements>
94
+ ${Array.from({ length: quota || 1 }, (_, idx) => this.createInputElement(type, tag, Array.isArray(value) ? value[idx] : idx === 0 ? value : undefined, options, idx))}
95
+ </div>
96
+ </td>
97
+ </tr>
98
+ `;
99
+ })}
100
+ `;
101
+ }
102
+ buildNonGroupInputs(items, nameColspan) {
103
+ return html `
104
+ ${items.map(item => {
105
+ var _a, _b;
106
+ const { name, description, tag, type, quota = 1, options = {}, unit } = item;
107
+ const value = ((_a = this.value) === null || _a === void 0 ? void 0 : _a[tag]) === undefined ? [] : (_b = this.value) === null || _b === void 0 ? void 0 : _b[tag];
108
+ return html `
109
+ <tr>
110
+ <td name colspan=${nameColspan}>${name}</td>
111
+ <td>${description}</td>
112
+ <td>
113
+ <div element>
114
+ ${Array.from({ length: quota || 1 }, (_, idx) => this.createInputElement(type, tag, Array.isArray(value) ? value[idx] : idx === 0 ? value : undefined, options, idx))}
115
+ </div>
116
+ </td>
117
+ </tr>
118
+ `;
119
+ })}
120
+ `;
121
+ }
122
+ isGroupRendered(renderedGroups, group, subgroup) {
123
+ if (subgroup) {
124
+ return renderedGroups.some(groupInfo => groupInfo.group === group && groupInfo.subgroup === subgroup);
125
+ }
126
+ else {
127
+ return renderedGroups.some(groupInfo => groupInfo.group === group);
128
+ }
129
+ }
130
+ groupItemNums(items, group, subgroup) {
131
+ let nums = 0;
132
+ if (subgroup) {
133
+ items.forEach(i => {
134
+ if (i.group === group && i.subgroup === subgroup) {
135
+ nums += 1;
136
+ }
137
+ });
138
+ }
139
+ else {
140
+ items.forEach(i => {
141
+ if (i.group === group) {
142
+ nums += 1;
143
+ }
144
+ });
145
+ }
146
+ return nums;
147
+ }
148
+ createInputElement(type, tag, value, options, idx) {
149
+ switch (type) {
150
+ case 'select':
151
+ return html ` <select .name=${tag}>
152
+ <option value=""></option>
153
+ ${(options.options || []).map((option) => html `<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`)}
154
+ </select>`;
155
+ case 'radio':
156
+ return html `<div
157
+ @change=${(e) => {
158
+ const div = e.currentTarget;
159
+ const inputHidden = div.querySelector(`input[name="${tag}"]`);
160
+ inputHidden.value = e.target.value;
161
+ }}
162
+ >
163
+ <input type="hidden" name=${tag} />
164
+
165
+ ${(options.options || []).map((option) => html `<label>
166
+ <input
167
+ type="radio"
168
+ name=${'$' + tag + '-' + idx}
169
+ .value=${option.value}
170
+ ?checked=${option.value === value}
171
+ />
172
+ ${option.text}
173
+ </label>`)}
174
+ </div>`;
175
+ case 'boolean':
176
+ return html ` <input type="checkbox" name=${tag} .checked=${value} />`;
177
+ case 'number':
178
+ return html ` <input type="number" name=${tag} value=${value} />`;
179
+ case 'date':
180
+ return html ` <input type="date" name=${tag} value=${value} />`;
181
+ case 'datetime':
182
+ return html ` <input type="datetime-local" name=${tag} value=${value} />`;
183
+ case 'file':
184
+ return html `<ox-input-file name=${tag} multiple .value=${value}></ox-input-file>`;
185
+ case 'signature':
186
+ return html `<ox-input-signature name=${tag} value=${value}></ox-input-signature>`;
187
+ case 'string':
188
+ default:
189
+ return html ` <input type="text" name=${tag} value=${value} />`;
190
+ }
191
+ }
192
+ };
193
+ OxChecklistEntryForm.styles = [
194
+ ScrollbarStyles,
195
+ css `
196
+ :host {
197
+ display: flex;
198
+ flex-direction: column;
199
+
200
+ --signature-min-width: 100px;
201
+ --signature-min-height: 60px;
202
+ overflow: auto;
203
+ }
204
+
205
+ form {
206
+ flex: 1;
207
+
208
+ display: flex;
209
+ flex-direction: column;
210
+ }
211
+ h2 {
212
+ margin: var(--title-margin);
213
+ font: var(--title-font);
214
+ color: var(--title-text-color);
215
+ text-transform: capitalize;
216
+ }
217
+ table {
218
+ border-collapse: collapse;
219
+ margin-bottom: var(--spacing-medium);
220
+ }
221
+ th {
222
+ padding: var(--th-padding);
223
+ border-top: var(--th-border-top);
224
+ border-bottom: var(--td-border-bottom);
225
+ text-transform: var(--th-text-transform);
226
+ font: var(--th-font);
227
+ color: var(--th-color);
228
+ text-align: left;
229
+ white-space: nowrap;
230
+ }
231
+ th[item] {
232
+ min-width: 100px;
233
+ }
234
+ th[value] {
235
+ min-width: 100px;
236
+ }
237
+ tr {
238
+ background-color: var(--tr-background-color);
239
+ }
240
+ tr:nth-child(odd) {
241
+ background-color: var(--tr-background-odd-color);
242
+ }
243
+ tr:hover {
244
+ background-color: var(--tr-background-hover-color);
245
+ }
246
+ tr[ooc],
247
+ tr[oos] {
248
+ background-color: #fefbdf;
249
+ }
250
+ td {
251
+ border: var(--td-border-line);
252
+ padding: var(--td-padding);
253
+ font: var(--td-font);
254
+ color: var(--td-color);
255
+ }
256
+ td[name] {
257
+ font-weight: bold;
258
+ }
259
+ td md-icon {
260
+ color: var(--md-sys-color-error);
261
+ }
262
+ div[element] {
263
+ grid-area: inputs;
264
+ display: flex;
265
+ flex-direction: row;
266
+ flex-wrap: wrap;
267
+ gap: 10px;
268
+ padding-right: var(--padding-default);
269
+
270
+ * {
271
+ flex: 1;
272
+ }
273
+
274
+ input,
275
+ select {
276
+ border: var(--input-field-border);
277
+ border-radius: var(--input-field-border-radius);
278
+ padding: var(--input-field-padding);
279
+ font: var(--input-field-font);
280
+ }
281
+ }
282
+ `
283
+ ];
284
+ __decorate([
285
+ property()
286
+ ], OxChecklistEntryForm.prototype, "dataSet", void 0);
287
+ __decorate([
288
+ property({ type: Object })
289
+ ], OxChecklistEntryForm.prototype, "value", void 0);
290
+ OxChecklistEntryForm = __decorate([
291
+ customElement('ox-checklist-entry-form')
292
+ ], OxChecklistEntryForm);
293
+ export { OxChecklistEntryForm };
294
+ //# sourceMappingURL=ox-checklist-entry-form.js.map
package/dist/src/ox-checklist-entry-form.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-checklist-entry-form.js","sourceRoot":"","sources":["../../src/ox-checklist-entry-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/context/ox-context-page-toolbar.js'\nimport '@operato/board/ox-board-viewer.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { DataItem, DataSample, DataSet } from './types'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-checklist-entry-form')\nexport class OxChecklistEntryForm extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n --signature-min-width: 100px;\n --signature-min-height: 60px;\n overflow: auto;\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-direction: column;\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 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: var(--td-border-line);\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 div[element] {\n grid-area: inputs;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 10px;\n padding-right: var(--padding-default);\n\n * {\n flex: 1;\n }\n\n input,\n select {\n border: var(--input-field-border);\n border-radius: var(--input-field-border-radius);\n padding: var(--input-field-padding);\n font: var(--input-field-font);\n }\n }\n `\n ]\n\n get context() {\n return {\n title: i18next.t('title.checklist entry page'),\n help: 'dataset/checklist-entry-page',\n toolbar: false\n }\n }\n\n @property() private dataSet?: DataSet\n @property({ type: Object }) value?: { [tag: string]: any }\n\n render() {\n return html` ${this.buildInputs()} `\n }\n\n private onChange = (e: Event) => {\n this.value = this.buildValue()\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n private buildValue(): { [tag: string]: any } {\n return this.extractValuesFromInputs()\n }\n\n private extractValuesFromInputs(): { [tag: string]: any } {\n return (this.dataSet?.dataItems || []).reduce(\n (values, dataItem) => {\n const { tag, type } = dataItem\n const editors = Array.from(this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>)\n\n if (editors.length > 0) {\n values[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))\n }\n\n return values\n },\n {} as { [tag: string]: any }\n )\n }\n\n buildInputs() {\n const dataItems = this.dataSet?.dataItems || []\n const groupItems = dataItems?.filter(i => i.group)\n const nonGroupItems = dataItems?.filter(i => !i.group)\n\n let nameColspan = 1\n nameColspan += groupItems.length > 0 ? 1 : 0\n nameColspan += groupItems.some(i => i.subgroup) ? 1 : 0\n\n return html`\n <form class=\"checklist\" @change=${this.onChange}>\n <table>\n <thead></thead>\n <tbody>\n ${this.buildGroupInputs(groupItems, nameColspan)} ${this.buildNonGroupInputs(nonGroupItems, nameColspan)}\n </tbody>\n </table>\n </form>\n `\n }\n\n buildGroupInputs(items: DataItem[], nameColspan: number) {\n let isSubgroupExist = items.some(i => i.subgroup)\n let renderedGroups: { group: string; subgroup?: string | undefined }[] = []\n\n return html`\n <tr>\n <th colspan=${nameColspan} item>${i18next.t('field.item')}</th>\n <th>${i18next.t('field.description')}</th>\n <th value>${i18next.t('field.value')}</th>\n </tr>\n ${items.map(item => {\n const { name, description, tag, type, quota = 1, options = {}, unit, group, subgroup } = item\n const value = this.value?.[tag] === undefined ? [] : this.value?.[tag]\n\n let groupTd = null\n if (!this.isGroupRendered(renderedGroups, group)) {\n groupTd = html`<td rowspan=\"${this.groupItemNums(items, group)}\">${group}</td>`\n renderedGroups.push({ group })\n }\n\n let subgroupTd = null\n if (subgroup && !this.isGroupRendered(renderedGroups, group, subgroup)) {\n subgroupTd = html`<td rowspan=\"${this.groupItemNums(items, group, subgroup)}\">${subgroup}</td>`\n renderedGroups.push({ group, subgroup })\n }\n\n return html`\n <tr>\n ${groupTd} ${subgroupTd}\n <td colspan=${isSubgroupExist && !subgroup ? 2 : 1}>${name}</td>\n <td>${description}</td>\n <td>\n <div elements>\n ${Array.from({ length: quota || 1 }, (_, idx) =>\n this.createInputElement(\n type,\n tag,\n Array.isArray(value) ? value[idx] : idx === 0 ? value : undefined,\n options,\n idx\n )\n )}\n </div>\n </td>\n </tr>\n `\n })}\n `\n }\n\n buildNonGroupInputs(items: DataItem[], nameColspan: number) {\n return html`\n ${items.map(item => {\n const { name, description, tag, type, quota = 1, options = {}, unit } = item\n const value = this.value?.[tag] === undefined ? [] : this.value?.[tag]\n\n return html`\n <tr>\n <td name colspan=${nameColspan}>${name}</td>\n <td>${description}</td>\n <td>\n <div element>\n ${Array.from({ length: quota || 1 }, (_, idx) =>\n this.createInputElement(\n type,\n tag,\n Array.isArray(value) ? value[idx] : idx === 0 ? value : undefined,\n options,\n idx\n )\n )}\n </div>\n </td>\n </tr>\n `\n })}\n `\n }\n\n isGroupRendered(renderedGroups: { group: string; subgroup?: string }[], group: string, subgroup?: string) {\n if (subgroup) {\n return renderedGroups.some(groupInfo => groupInfo.group === group && groupInfo.subgroup === subgroup)\n } else {\n return renderedGroups.some(groupInfo => groupInfo.group === group)\n }\n }\n\n groupItemNums(items: DataItem[], group: string, subgroup?: string) {\n let nums = 0\n\n if (subgroup) {\n items.forEach(i => {\n if (i.group === group && i.subgroup === subgroup) {\n nums += 1\n }\n })\n } else {\n items.forEach(i => {\n if (i.group === group) {\n nums += 1\n }\n })\n }\n\n return nums\n }\n\n createInputElement(type: string, tag: string, value: any, options: any, idx: number) {\n switch (type) {\n case 'select':\n return html` <select .name=${tag}>\n <option value=\"\"></option>\n ${(options.options || []).map(\n (option: any) =>\n html`<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`\n )}\n </select>`\n\n case 'radio':\n return html`<div\n @change=${(e: Event) => {\n const div = e.currentTarget as HTMLElement\n const inputHidden = div.querySelector(`input[name=\"${tag}\"]`) as HTMLInputElement\n inputHidden.value = (e.target as HTMLInputElement).value\n }}\n >\n <input type=\"hidden\" name=${tag} />\n\n ${(options.options || []).map(\n (option: any) =>\n html`<label>\n <input\n type=\"radio\"\n name=${'$' + tag + '-' + idx}\n .value=${option.value}\n ?checked=${option.value === value}\n />\n ${option.text}\n </label>`\n )}\n </div>`\n\n case 'boolean':\n return html` <input type=\"checkbox\" name=${tag} .checked=${value} />`\n\n case 'number':\n return html` <input type=\"number\" name=${tag} value=${value} />`\n\n case 'date':\n return html` <input type=\"date\" name=${tag} value=${value} />`\n\n case 'datetime':\n return html` <input type=\"datetime-local\" name=${tag} value=${value} />`\n\n case 'file':\n return html`<ox-input-file name=${tag} multiple .value=${value}></ox-input-file>`\n\n case 'signature':\n return html`<ox-input-signature name=${tag} value=${value}></ox-input-signature>`\n\n case 'string':\n default:\n return html` <input type=\"text\" name=${tag} value=${value} />`\n }\n }\n}\n"]}
package/dist/src/ox-checklist-sample-view.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import '@material/web/icon/icon.js';
2
+ import '@operato/input/ox-input-file.js';
3
+ import '@operato/input/ox-input-signature.js';
4
+ import { LitElement, TemplateResult } from 'lit';
5
+ import { DataItem, DataSample } from './types.js';
6
+ export declare class OxChecklistSampleView extends LitElement {
7
+ static styles: import("lit").CSSResult;
8
+ dataSample?: DataSample;
9
+ render(): TemplateResult<1>;
10
+ buildGroupTable(items: DataItem[], data: any, nameColspan: number, judgment: any, useCaseNames: string[]): TemplateResult<1>;
11
+ buildNonGroupTable(items: DataItem[], data: any, nameColspan: number, judgment: any, useCaseNames: string[]): TemplateResult<1>;
12
+ isGroupRendered(renderedGroups: {
13
+ group: string;
14
+ subgroup?: string;
15
+ }[], group: string, subgroup?: string): boolean;
16
+ groupItemNums(items: DataItem[], group: string, subgroup?: string): number;
17
+ private buildSpec;
18
+ private download;
19
+ private buildValue;
20
+ }