@operato/dataset 9.0.0-beta.5 → 9.0.0-beta.53

package/CHANGELOG.md

@@ -3,6 +3,227 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.0.0-beta.53](https://github.com/hatiolab/operato/compare/v9.0.0-beta.52...v9.0.0-beta.53) (2025-03-04)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.52](https://github.com/hatiolab/operato/compare/v9.0.0-beta.51...v9.0.0-beta.52) (2025-03-04)
+
+
+### :rocket: New Features
+
+* 데이터셋 항목별 그룹핑 ([70c70ae](https://github.com/hatiolab/operato/commit/70c70ae65b3c0a16001bb02ae6a9e30777a93dcb))
+
+
+
+## [9.0.0-beta.49](https://github.com/hatiolab/operato/compare/v9.0.0-beta.48...v9.0.0-beta.49) (2025-02-14)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.48](https://github.com/hatiolab/operato/compare/v9.0.0-beta.47...v9.0.0-beta.48) (2025-02-14)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.47](https://github.com/hatiolab/operato/compare/v9.0.0-beta.46...v9.0.0-beta.47) (2025-02-14)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.41](https://github.com/hatiolab/operato/compare/v9.0.0-beta.40...v9.0.0-beta.41) (2025-02-09)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.38](https://github.com/hatiolab/operato/compare/v9.0.0-beta.37...v9.0.0-beta.38) (2025-02-02)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.37](https://github.com/hatiolab/operato/compare/v9.0.0-beta.36...v9.0.0-beta.37) (2025-02-01)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.36](https://github.com/hatiolab/operato/compare/v9.0.0-beta.35...v9.0.0-beta.36) (2025-02-01)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.35](https://github.com/hatiolab/operato/compare/v9.0.0-beta.34...v9.0.0-beta.35) (2025-02-01)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.34](https://github.com/hatiolab/operato/compare/v9.0.0-beta.33...v9.0.0-beta.34) (2025-01-31)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.33](https://github.com/hatiolab/operato/compare/v9.0.0-beta.32...v9.0.0-beta.33) (2025-01-31)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.32](https://github.com/hatiolab/operato/compare/v9.0.0-beta.31...v9.0.0-beta.32) (2025-01-31)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.31](https://github.com/hatiolab/operato/compare/v9.0.0-beta.30...v9.0.0-beta.31) (2025-01-31)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.29](https://github.com/hatiolab/operato/compare/v9.0.0-beta.28...v9.0.0-beta.29) (2025-01-30)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.28](https://github.com/hatiolab/operato/compare/v9.0.0-beta.27...v9.0.0-beta.28) (2025-01-28)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.21](https://github.com/hatiolab/operato/compare/v9.0.0-beta.20...v9.0.0-beta.21) (2025-01-28)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.20](https://github.com/hatiolab/operato/compare/v9.0.0-beta.19...v9.0.0-beta.20) (2025-01-27)
+
+
+### :rocket: New Features
+
+* module property-panel ([03fb303](https://github.com/hatiolab/operato/commit/03fb303816c1629adca2a0ad843a8696ffaa4bef))
+
+
+
+## [9.0.0-beta.18](https://github.com/hatiolab/operato/compare/v9.0.0-beta.17...v9.0.0-beta.18) (2025-01-27)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.16](https://github.com/hatiolab/operato/compare/v9.0.0-beta.15...v9.0.0-beta.16) (2025-01-27)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.15](https://github.com/hatiolab/operato/compare/v9.0.0-beta.14...v9.0.0-beta.15) (2025-01-27)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.14](https://github.com/hatiolab/operato/compare/v9.0.0-beta.13...v9.0.0-beta.14) (2025-01-27)
+
+
+### :rocket: New Features
+
+* module property-panel ([d78e4cf](https://github.com/hatiolab/operato/commit/d78e4cf7080b95fa74e61b42094b9f3f59f1409b))
+
+
+
+## [9.0.0-beta.13](https://github.com/hatiolab/operato/compare/v9.0.0-beta.12...v9.0.0-beta.13) (2025-01-25)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.11](https://github.com/hatiolab/operato/compare/v9.0.0-beta.10...v9.0.0-beta.11) (2025-01-25)
+
+
+### :bug: Bug Fix
+
+* tsconfig option useDefineForClassFields=false ([0d77c0a](https://github.com/hatiolab/operato/commit/0d77c0aa620282c65b3c05f8e0b559e82836b6ab))
+
+
+
+## [9.0.0-beta.10](https://github.com/hatiolab/operato/compare/v9.0.0-beta.9...v9.0.0-beta.10) (2025-01-25)
+
+
+### :bug: Bug Fix
+
+* tweak tsconfig.json ([3c424b1](https://github.com/hatiolab/operato/commit/3c424b18d046f95d5619076d113d49a4b4dc9bbb))
+
+
+
+## [9.0.0-beta.7](https://github.com/hatiolab/operato/compare/v9.0.0-beta.6...v9.0.0-beta.7) (2025-01-20)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [9.0.0-beta.6](https://github.com/hatiolab/operato/compare/v9.0.0-beta.5...v9.0.0-beta.6) (2025-01-20)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
 ## [9.0.0-beta.5](https://github.com/hatiolab/operato/compare/v9.0.0-beta.4...v9.0.0-beta.5) (2025-01-20)
 
 

package/dist/src/ox-checklist-entry-form.d.ts

@@ -0,0 +1,30 @@
+import '@material/web/icon/icon.js';
+import '@operato/context/ox-context-page-toolbar.js';
+import '@operato/board/ox-board-viewer.js';
+import { LitElement } from 'lit';
+import { DataItem } from './types';
+export declare class OxChecklistEntryForm extends LitElement {
+    static styles: import("lit").CSSResult[];
+    get context(): {
+        title: string;
+        help: string;
+        toolbar: boolean;
+    };
+    private dataSet?;
+    value?: {
+        [tag: string]: any;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    private onChange;
+    private buildValue;
+    private extractValuesFromInputs;
+    buildInputs(): import("lit-html").TemplateResult<1>;
+    buildGroupInputs(items: DataItem[], nameColspan: number): import("lit-html").TemplateResult<1>;
+    buildNonGroupInputs(items: DataItem[], nameColspan: number): import("lit-html").TemplateResult<1>;
+    isGroupRendered(renderedGroups: {
+        group: string;
+        subgroup?: string;
+    }[], group: string, subgroup?: string): boolean;
+    groupItemNums(items: DataItem[], group: string, subgroup?: string): number;
+    createInputElement(type: string, tag: string, value: any, options: any, idx: number): import("lit-html").TemplateResult<1>;
+}

package/dist/src/ox-checklist-entry-form.js

@@ -0,0 +1,294 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/context/ox-context-page-toolbar.js';
+import '@operato/board/ox-board-viewer.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+let OxChecklistEntryForm = class OxChecklistEntryForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.onChange = (e) => {
+            this.value = this.buildValue();
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: this.value
+            }));
+        };
+    }
+    get context() {
+        return {
+            title: i18next.t('title.checklist entry page'),
+            help: 'dataset/checklist-entry-page',
+            toolbar: false
+        };
+    }
+    render() {
+        return html ` ${this.buildInputs()} `;
+    }
+    buildValue() {
+        return this.extractValuesFromInputs();
+    }
+    extractValuesFromInputs() {
+        var _a;
+        return (((_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.dataItems) || []).reduce((values, dataItem) => {
+            const { tag, type } = dataItem;
+            const editors = Array.from(this.renderRoot.querySelectorAll(`[name=${tag}]`));
+            if (editors.length > 0) {
+                values[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value));
+            }
+            return values;
+        }, {});
+    }
+    buildInputs() {
+        var _a;
+        const dataItems = ((_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.dataItems) || [];
+        const groupItems = dataItems === null || dataItems === void 0 ? void 0 : dataItems.filter(i => i.group);
+        const nonGroupItems = dataItems === null || dataItems === void 0 ? void 0 : dataItems.filter(i => !i.group);
+        let nameColspan = 1;
+        nameColspan += groupItems.length > 0 ? 1 : 0;
+        nameColspan += groupItems.some(i => i.subgroup) ? 1 : 0;
+        return html `
+      <form class="checklist" @change=${this.onChange}>
+        <table>
+          <thead></thead>
+          <tbody>
+            ${this.buildGroupInputs(groupItems, nameColspan)} ${this.buildNonGroupInputs(nonGroupItems, nameColspan)}
+          </tbody>
+        </table>
+      </form>
+    `;
+    }
+    buildGroupInputs(items, nameColspan) {
+        let isSubgroupExist = items.some(i => i.subgroup);
+        let renderedGroups = [];
+        return html `
+      <tr>
+        <th colspan=${nameColspan} item>${i18next.t('field.item')}</th>
+        <th>${i18next.t('field.description')}</th>
+        <th value>${i18next.t('field.value')}</th>
+      </tr>
+      ${items.map(item => {
+            var _a, _b;
+            const { name, description, tag, type, quota = 1, options = {}, unit, group, subgroup } = item;
+            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];
+            let groupTd = null;
+            if (!this.isGroupRendered(renderedGroups, group)) {
+                groupTd = html `<td rowspan="${this.groupItemNums(items, group)}">${group}</td>`;
+                renderedGroups.push({ group });
+            }
+            let subgroupTd = null;
+            if (subgroup && !this.isGroupRendered(renderedGroups, group, subgroup)) {
+                subgroupTd = html `<td rowspan="${this.groupItemNums(items, group, subgroup)}">${subgroup}</td>`;
+                renderedGroups.push({ group, subgroup });
+            }
+            return html `
+          <tr>
+            ${groupTd} ${subgroupTd}
+            <td colspan=${isSubgroupExist && !subgroup ? 2 : 1}>${name}</td>
+            <td>${description}</td>
+            <td>
+              <div elements>
+                ${Array.from({ length: quota || 1 }, (_, idx) => this.createInputElement(type, tag, Array.isArray(value) ? value[idx] : idx === 0 ? value : undefined, options, idx))}
+              </div>
+            </td>
+          </tr>
+        `;
+        })}
+    `;
+    }
+    buildNonGroupInputs(items, nameColspan) {
+        return html `
+      ${items.map(item => {
+            var _a, _b;
+            const { name, description, tag, type, quota = 1, options = {}, unit } = item;
+            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];
+            return html `
+          <tr>
+            <td name colspan=${nameColspan}>${name}</td>
+            <td>${description}</td>
+            <td>
+              <div element>
+                ${Array.from({ length: quota || 1 }, (_, idx) => this.createInputElement(type, tag, Array.isArray(value) ? value[idx] : idx === 0 ? value : undefined, options, idx))}
+              </div>
+            </td>
+          </tr>
+        `;
+        })}
+    `;
+    }
+    isGroupRendered(renderedGroups, group, subgroup) {
+        if (subgroup) {
+            return renderedGroups.some(groupInfo => groupInfo.group === group && groupInfo.subgroup === subgroup);
+        }
+        else {
+            return renderedGroups.some(groupInfo => groupInfo.group === group);
+        }
+    }
+    groupItemNums(items, group, subgroup) {
+        let nums = 0;
+        if (subgroup) {
+            items.forEach(i => {
+                if (i.group === group && i.subgroup === subgroup) {
+                    nums += 1;
+                }
+            });
+        }
+        else {
+            items.forEach(i => {
+                if (i.group === group) {
+                    nums += 1;
+                }
+            });
+        }
+        return nums;
+    }
+    createInputElement(type, tag, value, options, idx) {
+        switch (type) {
+            case 'select':
+                return html ` <select .name=${tag}>
+          <option value=""></option>
+          ${(options.options || []).map((option) => html `<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`)}
+        </select>`;
+            case 'radio':
+                return html `<div
+          @change=${(e) => {
+                    const div = e.currentTarget;
+                    const inputHidden = div.querySelector(`input[name="${tag}"]`);
+                    inputHidden.value = e.target.value;
+                }}
+        >
+          <input type="hidden" name=${tag} />
+
+          ${(options.options || []).map((option) => html `<label>
+                <input
+                  type="radio"
+                  name=${'$' + tag + '-' + idx}
+                  .value=${option.value}
+                  ?checked=${option.value === value}
+                />
+                ${option.text}
+              </label>`)}
+        </div>`;
+            case 'boolean':
+                return html ` <input type="checkbox" name=${tag} .checked=${value} />`;
+            case 'number':
+                return html ` <input type="number" name=${tag} value=${value} />`;
+            case 'date':
+                return html ` <input type="date" name=${tag} value=${value} />`;
+            case 'datetime':
+                return html ` <input type="datetime-local" name=${tag} value=${value} />`;
+            case 'file':
+                return html `<ox-input-file name=${tag} multiple .value=${value}></ox-input-file>`;
+            case 'signature':
+                return html `<ox-input-signature name=${tag} value=${value}></ox-input-signature>`;
+            case 'string':
+            default:
+                return html ` <input type="text" name=${tag} value=${value} />`;
+        }
+    }
+};
+OxChecklistEntryForm.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        --signature-min-width: 100px;
+        --signature-min-height: 60px;
+        overflow: auto;
+      }
+
+      form {
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+      }
+      h2 {
+        margin: var(--title-margin);
+        font: var(--title-font);
+        color: var(--title-text-color);
+        text-transform: capitalize;
+      }
+      table {
+        border-collapse: collapse;
+        margin-bottom: var(--spacing-medium);
+      }
+      th {
+        padding: var(--th-padding);
+        border-top: var(--th-border-top);
+        border-bottom: var(--td-border-bottom);
+        text-transform: var(--th-text-transform);
+        font: var(--th-font);
+        color: var(--th-color);
+        text-align: left;
+        white-space: nowrap;
+      }
+      th[item] {
+        min-width: 100px;
+      }
+      th[value] {
+        min-width: 100px;
+      }
+      tr {
+        background-color: var(--tr-background-color);
+      }
+      tr:nth-child(odd) {
+        background-color: var(--tr-background-odd-color);
+      }
+      tr:hover {
+        background-color: var(--tr-background-hover-color);
+      }
+      tr[ooc],
+      tr[oos] {
+        background-color: #fefbdf;
+      }
+      td {
+        border: var(--td-border-line);
+        padding: var(--td-padding);
+        font: var(--td-font);
+        color: var(--td-color);
+      }
+      td[name] {
+        font-weight: bold;
+      }
+      td md-icon {
+        color: var(--md-sys-color-error);
+      }
+      div[element] {
+        grid-area: inputs;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 10px;
+        padding-right: var(--padding-default);
+
+        * {
+          flex: 1;
+        }
+
+        input,
+        select {
+          border: var(--input-field-border);
+          border-radius: var(--input-field-border-radius);
+          padding: var(--input-field-padding);
+          font: var(--input-field-font);
+        }
+      }
+    `
+];
+__decorate([
+    property()
+], OxChecklistEntryForm.prototype, "dataSet", void 0);
+__decorate([
+    property({ type: Object })
+], OxChecklistEntryForm.prototype, "value", void 0);
+OxChecklistEntryForm = __decorate([
+    customElement('ox-checklist-entry-form')
+], OxChecklistEntryForm);
+export { OxChecklistEntryForm };
+//# sourceMappingURL=ox-checklist-entry-form.js.map

package/dist/src/ox-checklist-entry-form.js.map

@@ -0,0 +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

@@ -0,0 +1,20 @@
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-file.js';
+import '@operato/input/ox-input-signature.js';
+import { LitElement, TemplateResult } from 'lit';
+import { DataItem, DataSample } from './types.js';
+export declare class OxChecklistSampleView extends LitElement {
+    static styles: import("lit").CSSResult;
+    dataSample?: DataSample;
+    render(): TemplateResult<1>;
+    buildGroupTable(items: DataItem[], data: any, nameColspan: number, judgment: any, useCaseNames: string[]): TemplateResult<1>;
+    buildNonGroupTable(items: DataItem[], data: any, nameColspan: number, judgment: any, useCaseNames: string[]): TemplateResult<1>;
+    isGroupRendered(renderedGroups: {
+        group: string;
+        subgroup?: string;
+    }[], group: string, subgroup?: string): boolean;
+    groupItemNums(items: DataItem[], group: string, subgroup?: string): number;
+    private buildSpec;
+    private download;
+    private buildValue;
+}