@operato/dataset 9.0.0-beta.60 → 9.0.0-beta.61

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
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
+ ## [9.0.0-beta.61](https://github.com/hatiolab/operato/compare/v9.0.0-beta.60...v9.0.0-beta.61) (2025-04-12)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * styles for some dataset components ([3d66f85](https://github.com/hatiolab/operato/commit/3d66f856e9f9484e98dda011b8e682a4a25972b6))
12
+
13
+
14
+
6
15
  ## [9.0.0-beta.60](https://github.com/hatiolab/operato/compare/v9.0.0-beta.59...v9.0.0-beta.60) (2025-04-12)
7
16
 
8
17
 
@@ -44,13 +44,13 @@ let OxInputCcpLimits = class OxInputCcpLimits extends LitElement {
44
44
  ? html `
45
45
  <label>
46
46
  <div name>${i18next.t('text.minimum value')}</div>
47
- <input type="number" name="minimum" .value=${minimum} />
47
+ <input type="number" name="minimum" .value=${String(minimum === undefined ? '' : minimum)} />
48
48
  <div unit>${this.unit}</div>
49
49
  </select>
50
50
  </label>
51
51
  <label>
52
52
  <div name>${i18next.t('text.maximum value')}</div>
53
- <input type="number" name="maximum" .value=${maximum} />
53
+ <input type="number" name="maximum" .value=${String(maximum === undefined ? '' : maximum)} />
54
54
  <div unit>${this.unit}</div>
55
55
  </label>
56
56
  `
@@ -58,7 +58,7 @@ let OxInputCcpLimits = class OxInputCcpLimits extends LitElement {
58
58
  ? html `
59
59
  <!-- <div>Acceptables</div> -->
60
60
  ${(_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.map(option => html `
61
- <div>
61
+ <label>
62
62
  <input
63
63
  type="checkbox"
64
64
  data-value=${option.value}
@@ -66,19 +66,19 @@ let OxInputCcpLimits = class OxInputCcpLimits extends LitElement {
66
66
  />
67
67
  <span>${option.text}</span>
68
68
  <span value>(${option.value})</span>
69
- </div>
69
+ </label>
70
70
  `)}
71
71
  `
72
72
  : this.type === DataItemType.boolean
73
73
  ? html `
74
- <div>
74
+ <label>
75
75
  <input type="checkbox" data-value=${true} ?checked=${acceptables.includes(true)} />
76
76
  <span value>true</span>
77
- </div>
78
- <div>
77
+ </label>
78
+ <label>
79
79
  <input type="checkbox" data-value=${false} ?checked=${acceptables.includes(false)} />
80
80
  <span value>false</span>
81
- </div>
81
+ </label>
82
82
  `
83
83
  : html ` <div properties>${i18next.t('text.no properties to set')}</div> `}
84
84
  </div>
@@ -126,7 +126,8 @@ OxInputCcpLimits.styles = css `
126
126
  margin: 0 var(--margin-default) var(--margin-default) 0;
127
127
  }
128
128
 
129
- label div > * {
129
+ label div > *,
130
+ label span > * {
130
131
  vertical-align: middle;
131
132
  }
132
133
 
@@ -152,6 +153,7 @@ OxInputCcpLimits.styles = css `
152
153
 
153
154
  input[type='checkbox'] {
154
155
  width: initial;
156
+ vertical-align: middle;
155
157
  }
156
158
  input[checked] + span {
157
159
  font-weight: bold;
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-ccp-limits.js","sourceRoot":"","sources":["../../../../src/usecase/ccp/ox-input-ccp-limits.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nexport enum DataItemType {\n number = 'number',\n text = 'text',\n boolean = 'boolean',\n select = 'select',\n radio = 'radio',\n file = 'file',\n signature = 'signature'\n}\n\nexport type CcpLimitValue = {\n minimum?: number\n maximum?: number\n acceptables?: string[] | boolean[]\n}\n\n/**\n element for CCP limits\n \n Example:\n \n <ox-input-ccp-limits\n .value=${value}\n .type=${type}>\n </ox-input-ccp-limits>\n */\n@customElement('ox-input-ccp-limits')\nexport class OxInputCcpLimits extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n align-content: center;\n }\n\n label {\n margin: 0 var(--margin-default) var(--margin-default) 0;\n }\n\n label div > * {\n vertical-align: middle;\n }\n\n button {\n width: 20px;\n text-align: center;\n }\n\n div[name],\n input[type='checkbox'] + span {\n display: inline-block;\n font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-align: right;\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 input[type='checkbox'] {\n width: initial;\n }\n input[checked] + span {\n font-weight: bold;\n }\n [unit],\n [value] {\n display: inline-block;\n opacity: 0.7;\n font: var(--form-sublabel-font);\n }\n [properties] {\n font: var(--input-field-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n }\n `\n\n @property({ type: Object }) value: CcpLimitValue = {}\n @property({ type: String }) type: DataItemType = DataItemType.number\n @property({ type: String }) unit?: string\n @property({ type: Object }) options: { options?: { text: string; value: string }[] } = {}\n\n @query('[name=minimum]') minimum!: HTMLInputElement\n @query('[name=maximum]') maximum!: HTMLInputElement\n @queryAll('[type=checkbox]:checked') checkedAll!: NodeListOf<HTMLInputElement>\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onChange.bind(this))\n }\n\n render() {\n const { minimum, maximum, acceptables = [] } = this.value || {}\n\n return html`\n <div>\n ${this.type === DataItemType.number\n ? html`\n <label>\n <div name>${i18next.t('text.minimum value')}</div>\n <input type=\"number\" name=\"minimum\" .value=${minimum} />\n <div unit>${this.unit}</div>\n </select>\n </label>\n <label>\n <div name>${i18next.t('text.maximum value')}</div>\n <input type=\"number\" name=\"maximum\" .value=${maximum} />\n <div unit>${this.unit}</div>\n </label>\n `\n : this.type === DataItemType.select || this.type === DataItemType.radio\n ? html`\n <!-- <div>Acceptables</div> -->\n ${this.options?.options?.map(\n option => html`\n <div>\n <input\n type=\"checkbox\"\n data-value=${option.value}\n ?checked=${(acceptables as string[]).includes(option.value)}\n />\n <span>${option.text}</span>\n <span value>(${option.value})</span>\n </div>\n `\n )}\n `\n : this.type === DataItemType.boolean\n ? html`\n <div>\n <input type=\"checkbox\" data-value=${true} ?checked=${(acceptables as boolean[]).includes(true)} />\n <span value>true</span>\n </div>\n <div>\n <input type=\"checkbox\" data-value=${false} ?checked=${(acceptables as boolean[]).includes(false)} />\n <span value>false</span>\n </div>\n `\n : html` <div properties>${i18next.t('text.no properties to set')}</div> `}\n </div>\n `\n }\n\n private onChange(e: Event) {\n if (this.type === DataItemType.number) {\n this.value = {\n minimum: this.minimum.valueAsNumber,\n maximum: this.maximum.valueAsNumber\n }\n } else if (this.type === DataItemType.select || this.type === DataItemType.radio) {\n this.value = {\n acceptables: Array.from(this.checkedAll).map(checked => {\n const x = checked.getAttribute('data-value')!\n console.log(x)\n return x\n })\n }\n } else if (this.type === DataItemType.boolean) {\n this.value = {\n acceptables: Array.from(this.checkedAll).map(checked => {\n const x = checked.getAttribute('data-value')! === 'true'\n console.log(x)\n return x\n })\n }\n } else {\n this.value = {}\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
1
+ {"version":3,"file":"ox-input-ccp-limits.js","sourceRoot":"","sources":["../../../../src/usecase/ccp/ox-input-ccp-limits.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nexport enum DataItemType {\n number = 'number',\n text = 'text',\n boolean = 'boolean',\n select = 'select',\n radio = 'radio',\n file = 'file',\n signature = 'signature'\n}\n\nexport type CcpLimitValue = {\n minimum?: number\n maximum?: number\n acceptables?: string[] | boolean[]\n}\n\n/**\n element for CCP limits\n \n Example:\n \n <ox-input-ccp-limits\n .value=${value}\n .type=${type}>\n </ox-input-ccp-limits>\n */\n@customElement('ox-input-ccp-limits')\nexport class OxInputCcpLimits extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n align-content: center;\n }\n\n label {\n margin: 0 var(--margin-default) var(--margin-default) 0;\n }\n\n label div > *,\n label span > * {\n vertical-align: middle;\n }\n\n button {\n width: 20px;\n text-align: center;\n }\n\n div[name],\n input[type='checkbox'] + span {\n display: inline-block;\n font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-align: right;\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 input[type='checkbox'] {\n width: initial;\n vertical-align: middle;\n }\n input[checked] + span {\n font-weight: bold;\n }\n [unit],\n [value] {\n display: inline-block;\n opacity: 0.7;\n font: var(--form-sublabel-font);\n }\n [properties] {\n font: var(--input-field-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n }\n `\n\n @property({ type: Object }) value: CcpLimitValue = {}\n @property({ type: String }) type: DataItemType = DataItemType.number\n @property({ type: String }) unit?: string\n @property({ type: Object }) options: { options?: { text: string; value: string }[] } = {}\n\n @query('[name=minimum]') minimum!: HTMLInputElement\n @query('[name=maximum]') maximum!: HTMLInputElement\n @queryAll('[type=checkbox]:checked') checkedAll!: NodeListOf<HTMLInputElement>\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onChange.bind(this))\n }\n\n render() {\n const { minimum, maximum, acceptables = [] } = this.value || {}\n\n return html`\n <div>\n ${this.type === DataItemType.number\n ? html`\n <label>\n <div name>${i18next.t('text.minimum value')}</div>\n <input type=\"number\" name=\"minimum\" .value=${String(minimum === undefined ? '' : minimum)} />\n <div unit>${this.unit}</div>\n </select>\n </label>\n <label>\n <div name>${i18next.t('text.maximum value')}</div>\n <input type=\"number\" name=\"maximum\" .value=${String(maximum === undefined ? '' : maximum)} />\n <div unit>${this.unit}</div>\n </label>\n `\n : this.type === DataItemType.select || this.type === DataItemType.radio\n ? html`\n <!-- <div>Acceptables</div> -->\n ${this.options?.options?.map(\n option => html`\n <label>\n <input\n type=\"checkbox\"\n data-value=${option.value}\n ?checked=${(acceptables as string[]).includes(option.value)}\n />\n <span>${option.text}</span>\n <span value>(${option.value})</span>\n </label>\n `\n )}\n `\n : this.type === DataItemType.boolean\n ? html`\n <label>\n <input type=\"checkbox\" data-value=${true} ?checked=${(acceptables as boolean[]).includes(true)} />\n <span value>true</span>\n </label>\n <label>\n <input type=\"checkbox\" data-value=${false} ?checked=${(acceptables as boolean[]).includes(false)} />\n <span value>false</span>\n </label>\n `\n : html` <div properties>${i18next.t('text.no properties to set')}</div> `}\n </div>\n `\n }\n\n private onChange(e: Event) {\n if (this.type === DataItemType.number) {\n this.value = {\n minimum: this.minimum.valueAsNumber,\n maximum: this.maximum.valueAsNumber\n }\n } else if (this.type === DataItemType.select || this.type === DataItemType.radio) {\n this.value = {\n acceptables: Array.from(this.checkedAll).map(checked => {\n const x = checked.getAttribute('data-value')!\n console.log(x)\n return x\n })\n }\n } else if (this.type === DataItemType.boolean) {\n this.value = {\n acceptables: Array.from(this.checkedAll).map(checked => {\n const x = checked.getAttribute('data-value')! === 'true'\n console.log(x)\n return x\n })\n }\n } else {\n this.value = {}\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
@@ -44,20 +44,20 @@ let OxInputQcLimits = class OxInputQcLimits extends LitElement {
44
44
  ? html `
45
45
  <label>
46
46
  <div name>${i18next.t('text.minimum value')}</div>
47
- <input type="number" name="minimum" .value=${minimum} />
47
+ <input type="number" name="minimum" .value=${String(minimum === undefined ? '' : minimum)} />
48
48
  <div unit>${this.unit}</div>
49
49
  </select>
50
50
  </label>
51
51
  <label>
52
52
  <div name>${i18next.t('text.maximum value')}</div>
53
- <input type="number" name="maximum" .value=${maximum} />
53
+ <input type="number" name="maximum" .value=${String(maximum === undefined ? '' : maximum)} />
54
54
  <div unit>${this.unit}</div>
55
55
  </label>
56
56
  `
57
57
  : this.type === DataItemType.select || this.type === DataItemType.radio
58
58
  ? html `
59
59
  ${(_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.map(option => html `
60
- <div>
60
+ <label>
61
61
  <input
62
62
  type="checkbox"
63
63
  data-value=${option.value}
@@ -65,19 +65,19 @@ let OxInputQcLimits = class OxInputQcLimits extends LitElement {
65
65
  />
66
66
  <span>${option.text}</span>
67
67
  <span value>(${option.value})</span>
68
- </div>
68
+ </label>
69
69
  `)}
70
70
  `
71
71
  : this.type === DataItemType.boolean
72
72
  ? html `
73
- <div>
73
+ <label>
74
74
  <input type="checkbox" data-value=${true} ?checked=${acceptables.includes(true)} />
75
75
  <span value>true</span>
76
- </div>
77
- <div>
76
+ </label>
77
+ <label>
78
78
  <input type="checkbox" data-value=${false} ?checked=${acceptables.includes(false)} />
79
79
  <span value>false</span>
80
- </div>
80
+ </label>
81
81
  `
82
82
  : html ` <div properties>${i18next.t('text.no properties to set')}</div> `}
83
83
  </div>
@@ -125,7 +125,8 @@ OxInputQcLimits.styles = css `
125
125
  margin: 0 var(--margin-default) var(--margin-default) 0;
126
126
  }
127
127
 
128
- label div > * {
128
+ label div > *,
129
+ label span > * {
129
130
  vertical-align: middle;
130
131
  }
131
132
 
@@ -151,6 +152,7 @@ OxInputQcLimits.styles = css `
151
152
 
152
153
  input[type='checkbox'] {
153
154
  width: initial;
155
+ vertical-align: middle;
154
156
  }
155
157
  input[checked] + span {
156
158
  font-weight: bold;
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-qc-limits.js","sourceRoot":"","sources":["../../../../src/usecase/qc/ox-input-qc-limits.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nexport enum DataItemType {\n number = 'number',\n text = 'text',\n boolean = 'boolean',\n select = 'select',\n radio = 'radio',\n file = 'file',\n signature = 'signature'\n}\n\nexport type QcLimitValue = {\n minimum?: number\n maximum?: number\n acceptables?: string[] | boolean[]\n}\n\n/**\n element for QC limits\n \n Example:\n \n <ox-input-qc-limits\n .value=${value}\n .type=${type}>\n </ox-input-qc-limits>\n */\n@customElement('ox-input-qc-limits')\nexport class OxInputQcLimits extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n align-content: center;\n }\n\n label {\n margin: 0 var(--margin-default) var(--margin-default) 0;\n }\n\n label div > * {\n vertical-align: middle;\n }\n\n button {\n width: 20px;\n text-align: center;\n }\n\n div[name],\n input[type='checkbox'] + span {\n display: inline-block;\n font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-align: right;\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 input[type='checkbox'] {\n width: initial;\n }\n input[checked] + span {\n font-weight: bold;\n }\n [unit],\n [value] {\n display: inline-block;\n opacity: 0.7;\n font: var(--form-sublabel-font);\n }\n [properties] {\n font: var(--input-field-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n }\n `\n\n @property({ type: Object }) value: QcLimitValue = {}\n @property({ type: String }) type: DataItemType = DataItemType.number\n @property({ type: String }) unit?: string\n @property({ type: Object }) options: { options?: { text: string; value: string }[] } = {}\n\n @query('[name=minimum]') minimum!: HTMLInputElement\n @query('[name=maximum]') maximum!: HTMLInputElement\n @queryAll('[type=checkbox]:checked') checkedAll!: NodeListOf<HTMLInputElement>\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onChange.bind(this))\n }\n\n render() {\n const { minimum, maximum, acceptables = [] } = this.value || {}\n\n return html`\n <div>\n ${this.type === DataItemType.number\n ? html`\n <label>\n <div name>${i18next.t('text.minimum value')}</div>\n <input type=\"number\" name=\"minimum\" .value=${minimum} />\n <div unit>${this.unit}</div>\n </select>\n </label>\n <label>\n <div name>${i18next.t('text.maximum value')}</div>\n <input type=\"number\" name=\"maximum\" .value=${maximum} />\n <div unit>${this.unit}</div>\n </label>\n `\n : this.type === DataItemType.select || this.type === DataItemType.radio\n ? html`\n ${this.options?.options?.map(\n option => html`\n <div>\n <input\n type=\"checkbox\"\n data-value=${option.value}\n ?checked=${(acceptables as string[]).includes(option.value)}\n />\n <span>${option.text}</span>\n <span value>(${option.value})</span>\n </div>\n `\n )}\n `\n : this.type === DataItemType.boolean\n ? html`\n <div>\n <input type=\"checkbox\" data-value=${true} ?checked=${(acceptables as boolean[]).includes(true)} />\n <span value>true</span>\n </div>\n <div>\n <input type=\"checkbox\" data-value=${false} ?checked=${(acceptables as boolean[]).includes(false)} />\n <span value>false</span>\n </div>\n `\n : html` <div properties>${i18next.t('text.no properties to set')}</div> `}\n </div>\n `\n }\n\n private onChange(e: Event) {\n if (this.type === DataItemType.number) {\n this.value = {\n minimum: this.minimum.valueAsNumber,\n maximum: this.maximum.valueAsNumber\n }\n } else if (this.type === DataItemType.select || this.type === DataItemType.radio) {\n this.value = {\n acceptables: Array.from(this.checkedAll).map(checked => {\n const x = checked.getAttribute('data-value')!\n console.log(x)\n return x\n })\n }\n } else if (this.type === DataItemType.boolean) {\n this.value = {\n acceptables: Array.from(this.checkedAll).map(checked => {\n const x = checked.getAttribute('data-value')! === 'true'\n console.log(x)\n return x\n })\n }\n } else {\n this.value = {}\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
1
+ {"version":3,"file":"ox-input-qc-limits.js","sourceRoot":"","sources":["../../../../src/usecase/qc/ox-input-qc-limits.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nexport enum DataItemType {\n number = 'number',\n text = 'text',\n boolean = 'boolean',\n select = 'select',\n radio = 'radio',\n file = 'file',\n signature = 'signature'\n}\n\nexport type QcLimitValue = {\n minimum?: number\n maximum?: number\n acceptables?: string[] | boolean[]\n}\n\n/**\n element for QC limits\n \n Example:\n \n <ox-input-qc-limits\n .value=${value}\n .type=${type}>\n </ox-input-qc-limits>\n */\n@customElement('ox-input-qc-limits')\nexport class OxInputQcLimits extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n align-content: center;\n }\n\n label {\n margin: 0 var(--margin-default) var(--margin-default) 0;\n }\n\n label div > *,\n label span > * {\n vertical-align: middle;\n }\n\n button {\n width: 20px;\n text-align: center;\n }\n\n div[name],\n input[type='checkbox'] + span {\n display: inline-block;\n font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-align: right;\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 input[type='checkbox'] {\n width: initial;\n vertical-align: middle;\n }\n input[checked] + span {\n font-weight: bold;\n }\n [unit],\n [value] {\n display: inline-block;\n opacity: 0.7;\n font: var(--form-sublabel-font);\n }\n [properties] {\n font: var(--input-field-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n }\n `\n\n @property({ type: Object }) value: QcLimitValue = {}\n @property({ type: String }) type: DataItemType = DataItemType.number\n @property({ type: String }) unit?: string\n @property({ type: Object }) options: { options?: { text: string; value: string }[] } = {}\n\n @query('[name=minimum]') minimum!: HTMLInputElement\n @query('[name=maximum]') maximum!: HTMLInputElement\n @queryAll('[type=checkbox]:checked') checkedAll!: NodeListOf<HTMLInputElement>\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onChange.bind(this))\n }\n\n render() {\n const { minimum, maximum, acceptables = [] } = this.value || {}\n\n return html`\n <div>\n ${this.type === DataItemType.number\n ? html`\n <label>\n <div name>${i18next.t('text.minimum value')}</div>\n <input type=\"number\" name=\"minimum\" .value=${String(minimum === undefined ? '' : minimum)} />\n <div unit>${this.unit}</div>\n </select>\n </label>\n <label>\n <div name>${i18next.t('text.maximum value')}</div>\n <input type=\"number\" name=\"maximum\" .value=${String(maximum === undefined ? '' : maximum)} />\n <div unit>${this.unit}</div>\n </label>\n `\n : this.type === DataItemType.select || this.type === DataItemType.radio\n ? html`\n ${this.options?.options?.map(\n option => html`\n <label>\n <input\n type=\"checkbox\"\n data-value=${option.value}\n ?checked=${(acceptables as string[]).includes(option.value)}\n />\n <span>${option.text}</span>\n <span value>(${option.value})</span>\n </label>\n `\n )}\n `\n : this.type === DataItemType.boolean\n ? html`\n <label>\n <input type=\"checkbox\" data-value=${true} ?checked=${(acceptables as boolean[]).includes(true)} />\n <span value>true</span>\n </label>\n <label>\n <input type=\"checkbox\" data-value=${false} ?checked=${(acceptables as boolean[]).includes(false)} />\n <span value>false</span>\n </label>\n `\n : html` <div properties>${i18next.t('text.no properties to set')}</div> `}\n </div>\n `\n }\n\n private onChange(e: Event) {\n if (this.type === DataItemType.number) {\n this.value = {\n minimum: this.minimum.valueAsNumber,\n maximum: this.maximum.valueAsNumber\n }\n } else if (this.type === DataItemType.select || this.type === DataItemType.radio) {\n this.value = {\n acceptables: Array.from(this.checkedAll).map(checked => {\n const x = checked.getAttribute('data-value')!\n console.log(x)\n return x\n })\n }\n } else if (this.type === DataItemType.boolean) {\n this.value = {\n acceptables: Array.from(this.checkedAll).map(checked => {\n const x = checked.getAttribute('data-value')! === 'true'\n console.log(x)\n return x\n })\n }\n } else {\n this.value = {}\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
@@ -44,13 +44,13 @@ let OxInputSpcLimits = class OxInputSpcLimits extends LitElement {
44
44
  ? html `
45
45
  <label>
46
46
  <div name>${i18next.t('text.minimum value')}</div>
47
- <input type="number" name="minimum" .value=${String(minimum)} />
47
+ <input type="number" name="minimum" .value=${String(minimum === undefined ? '' : minimum)} />
48
48
  <div unit>${this.unit}</div>
49
49
  </select>
50
50
  </label>
51
51
  <label>
52
52
  <div name>${i18next.t('text.maximum value')}</div>
53
- <input type="number" name="maximum" .value=${String(maximum)} />
53
+ <input type="number" name="maximum" .value=${String(maximum === undefined ? '' : maximum)} />
54
54
  <div unit>${this.unit}</div>
55
55
  </label>
56
56
  `
@@ -58,7 +58,7 @@ let OxInputSpcLimits = class OxInputSpcLimits extends LitElement {
58
58
  ? html `
59
59
  <!-- <div>Acceptables</div> -->
60
60
  ${(_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.map(option => html `
61
- <div>
61
+ <label>
62
62
  <input
63
63
  type="checkbox"
64
64
  data-value=${option.value}
@@ -66,19 +66,19 @@ let OxInputSpcLimits = class OxInputSpcLimits extends LitElement {
66
66
  />
67
67
  <span>${option.text}</span>
68
68
  <span value>(${option.value})</span>
69
- </div>
69
+ </label>
70
70
  `)}
71
71
  `
72
72
  : this.type === DataItemType.boolean
73
73
  ? html `
74
- <div>
74
+ <label>
75
75
  <input type="checkbox" data-value=${true} ?checked=${acceptables.includes(true)} />
76
76
  <span value>true</span>
77
- </div>
78
- <div>
77
+ </label>
78
+ <label>
79
79
  <input type="checkbox" data-value=${false} ?checked=${acceptables.includes(false)} />
80
80
  <span value>false</span>
81
- </div>
81
+ </label>
82
82
  `
83
83
  : html ` <div properties>${i18next.t('text.no properties to set')}</div> `}
84
84
  </div>
@@ -126,7 +126,8 @@ OxInputSpcLimits.styles = css `
126
126
  margin: 0 var(--margin-default) var(--margin-default) 0;
127
127
  }
128
128
 
129
- label div > * {
129
+ label div > *,
130
+ label span > * {
130
131
  vertical-align: middle;
131
132
  }
132
133
 
@@ -152,6 +153,7 @@ OxInputSpcLimits.styles = css `
152
153
 
153
154
  input[type='checkbox'] {
154
155
  width: initial;
156
+ vertical-align: middle;
155
157
  }
156
158
  input[checked] + span {
157
159
  font-weight: bold;
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-spc-limits.js","sourceRoot":"","sources":["../../../../src/usecase/spc/ox-input-spc-limits.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nexport enum DataItemType {\n number = 'number',\n text = 'text',\n boolean = 'boolean',\n select = 'select',\n radio = 'radio',\n file = 'file',\n signature = 'signature'\n}\n\nexport type SpcLimitValue = {\n minimum?: number\n maximum?: number\n acceptables?: string[] | boolean[]\n}\n\n/**\n element for SPC limits\n \n Example:\n \n <ox-input-spc-limits\n .value=${value}\n .type=${type}>\n </ox-input-spc-limits>\n */\n@customElement('ox-input-spc-limits')\nexport class OxInputSpcLimits extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n align-content: center;\n }\n\n label {\n margin: 0 var(--margin-default) var(--margin-default) 0;\n }\n\n label div > * {\n vertical-align: middle;\n }\n\n button {\n width: 20px;\n text-align: center;\n }\n\n div[name],\n input[type='checkbox'] + span {\n display: inline-block;\n font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-align: right;\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 input[type='checkbox'] {\n width: initial;\n }\n input[checked] + span {\n font-weight: bold;\n }\n [unit],\n [value] {\n display: inline-block;\n opacity: 0.7;\n font: var(--form-sublabel-font);\n }\n [properties] {\n font: var(--input-field-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n }\n `\n\n @property({ type: Object }) value: SpcLimitValue = {}\n @property({ type: String }) type: DataItemType = DataItemType.number\n @property({ type: String }) unit?: string\n @property({ type: Object }) options: { options?: { text: string; value: string }[] } = {}\n\n @query('[name=minimum]') minimum!: HTMLInputElement\n @query('[name=maximum]') maximum!: HTMLInputElement\n @queryAll('[type=checkbox]:checked') checkedAll!: NodeListOf<HTMLInputElement>\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onChange.bind(this))\n }\n\n render() {\n const { minimum, maximum, acceptables = [] } = this.value || {}\n\n return html`\n <div>\n ${this.type === DataItemType.number\n ? html`\n <label>\n <div name>${i18next.t('text.minimum value')}</div>\n <input type=\"number\" name=\"minimum\" .value=${String(minimum)} />\n <div unit>${this.unit}</div>\n </select>\n </label>\n <label>\n <div name>${i18next.t('text.maximum value')}</div>\n <input type=\"number\" name=\"maximum\" .value=${String(maximum)} />\n <div unit>${this.unit}</div>\n </label>\n `\n : this.type === DataItemType.select || this.type === DataItemType.radio\n ? html`\n <!-- <div>Acceptables</div> -->\n ${this.options?.options?.map(\n option => html`\n <div>\n <input\n type=\"checkbox\"\n data-value=${option.value}\n ?checked=${(acceptables as string[]).includes(option.value)}\n />\n <span>${option.text}</span>\n <span value>(${option.value})</span>\n </div>\n `\n )}\n `\n : this.type === DataItemType.boolean\n ? html`\n <div>\n <input type=\"checkbox\" data-value=${true} ?checked=${(acceptables as boolean[]).includes(true)} />\n <span value>true</span>\n </div>\n <div>\n <input type=\"checkbox\" data-value=${false} ?checked=${(acceptables as boolean[]).includes(false)} />\n <span value>false</span>\n </div>\n `\n : html` <div properties>${i18next.t('text.no properties to set')}</div> `}\n </div>\n `\n }\n\n private onChange(e: Event) {\n if (this.type === DataItemType.number) {\n this.value = {\n minimum: this.minimum.valueAsNumber,\n maximum: this.maximum.valueAsNumber\n }\n } else if (this.type === DataItemType.select || this.type === DataItemType.radio) {\n this.value = {\n acceptables: Array.from(this.checkedAll).map(checked => {\n const x = checked.getAttribute('data-value')!\n console.log(x)\n return x\n })\n }\n } else if (this.type === DataItemType.boolean) {\n this.value = {\n acceptables: Array.from(this.checkedAll).map(checked => {\n const x = checked.getAttribute('data-value')! === 'true'\n console.log(x)\n return x\n })\n }\n } else {\n this.value = {}\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
1
+ {"version":3,"file":"ox-input-spc-limits.js","sourceRoot":"","sources":["../../../../src/usecase/spc/ox-input-spc-limits.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nexport enum DataItemType {\n number = 'number',\n text = 'text',\n boolean = 'boolean',\n select = 'select',\n radio = 'radio',\n file = 'file',\n signature = 'signature'\n}\n\nexport type SpcLimitValue = {\n minimum?: number\n maximum?: number\n acceptables?: string[] | boolean[]\n}\n\n/**\n element for SPC limits\n \n Example:\n \n <ox-input-spc-limits\n .value=${value}\n .type=${type}>\n </ox-input-spc-limits>\n */\n@customElement('ox-input-spc-limits')\nexport class OxInputSpcLimits extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n align-content: center;\n }\n\n label {\n margin: 0 var(--margin-default) var(--margin-default) 0;\n }\n\n label div > *,\n label span > * {\n vertical-align: middle;\n }\n\n button {\n width: 20px;\n text-align: center;\n }\n\n div[name],\n input[type='checkbox'] + span {\n display: inline-block;\n font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-align: right;\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 input[type='checkbox'] {\n width: initial;\n vertical-align: middle;\n }\n input[checked] + span {\n font-weight: bold;\n }\n [unit],\n [value] {\n display: inline-block;\n opacity: 0.7;\n font: var(--form-sublabel-font);\n }\n [properties] {\n font: var(--input-field-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n }\n `\n\n @property({ type: Object }) value: SpcLimitValue = {}\n @property({ type: String }) type: DataItemType = DataItemType.number\n @property({ type: String }) unit?: string\n @property({ type: Object }) options: { options?: { text: string; value: string }[] } = {}\n\n @query('[name=minimum]') minimum!: HTMLInputElement\n @query('[name=maximum]') maximum!: HTMLInputElement\n @queryAll('[type=checkbox]:checked') checkedAll!: NodeListOf<HTMLInputElement>\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onChange.bind(this))\n }\n\n render() {\n const { minimum, maximum, acceptables = [] } = this.value || {}\n\n return html`\n <div>\n ${this.type === DataItemType.number\n ? html`\n <label>\n <div name>${i18next.t('text.minimum value')}</div>\n <input type=\"number\" name=\"minimum\" .value=${String(minimum === undefined ? '' : minimum)} />\n <div unit>${this.unit}</div>\n </select>\n </label>\n <label>\n <div name>${i18next.t('text.maximum value')}</div>\n <input type=\"number\" name=\"maximum\" .value=${String(maximum === undefined ? '' : maximum)} />\n <div unit>${this.unit}</div>\n </label>\n `\n : this.type === DataItemType.select || this.type === DataItemType.radio\n ? html`\n <!-- <div>Acceptables</div> -->\n ${this.options?.options?.map(\n option => html`\n <label>\n <input\n type=\"checkbox\"\n data-value=${option.value}\n ?checked=${(acceptables as string[]).includes(option.value)}\n />\n <span>${option.text}</span>\n <span value>(${option.value})</span>\n </label>\n `\n )}\n `\n : this.type === DataItemType.boolean\n ? html`\n <label>\n <input type=\"checkbox\" data-value=${true} ?checked=${(acceptables as boolean[]).includes(true)} />\n <span value>true</span>\n </label>\n <label>\n <input type=\"checkbox\" data-value=${false} ?checked=${(acceptables as boolean[]).includes(false)} />\n <span value>false</span>\n </label>\n `\n : html` <div properties>${i18next.t('text.no properties to set')}</div> `}\n </div>\n `\n }\n\n private onChange(e: Event) {\n if (this.type === DataItemType.number) {\n this.value = {\n minimum: this.minimum.valueAsNumber,\n maximum: this.maximum.valueAsNumber\n }\n } else if (this.type === DataItemType.select || this.type === DataItemType.radio) {\n this.value = {\n acceptables: Array.from(this.checkedAll).map(checked => {\n const x = checked.getAttribute('data-value')!\n console.log(x)\n return x\n })\n }\n } else if (this.type === DataItemType.boolean) {\n this.value = {\n acceptables: Array.from(this.checkedAll).map(checked => {\n const x = checked.getAttribute('data-value')! === 'true'\n console.log(x)\n return x\n })\n }\n } else {\n this.value = {}\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}