@operato/input 2.0.0-alpha.2 → 2.0.0-alpha.20

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 (33) hide show
  1. package/CHANGELOG.md +75 -0
  2. package/dist/src/ox-input-barcode.d.ts +48 -5
  3. package/dist/src/ox-input-barcode.js +96 -69
  4. package/dist/src/ox-input-barcode.js.map +1 -1
  5. package/dist/src/ox-input-data.d.ts +3 -4
  6. package/dist/src/ox-input-data.js +86 -34
  7. package/dist/src/ox-input-data.js.map +1 -1
  8. package/dist/src/ox-input-mass-fraction.d.ts +1 -0
  9. package/dist/src/ox-input-mass-fraction.js +48 -31
  10. package/dist/src/ox-input-mass-fraction.js.map +1 -1
  11. package/dist/src/ox-input-unit-number.d.ts +2 -1
  12. package/dist/src/ox-input-unit-number.js +24 -10
  13. package/dist/src/ox-input-unit-number.js.map +1 -1
  14. package/dist/stories/ox-input-barcode.stories.js +4 -0
  15. package/dist/stories/ox-input-barcode.stories.js.map +1 -1
  16. package/dist/stories/ox-input-data.stories.d.ts +33 -0
  17. package/dist/stories/ox-input-data.stories.js +40 -0
  18. package/dist/stories/ox-input-data.stories.js.map +1 -0
  19. package/dist/stories/ox-input-mass-fraction.stories.d.ts +4 -0
  20. package/dist/stories/ox-input-mass-fraction.stories.js +9 -2
  21. package/dist/stories/ox-input-mass-fraction.stories.js.map +1 -1
  22. package/dist/stories/ox-input-unit.stories.js +1 -0
  23. package/dist/stories/ox-input-unit.stories.js.map +1 -1
  24. package/dist/tsconfig.tsbuildinfo +1 -1
  25. package/package.json +5 -5
  26. package/src/ox-input-barcode.ts +127 -63
  27. package/src/ox-input-data.ts +95 -36
  28. package/src/ox-input-mass-fraction.ts +46 -32
  29. package/src/ox-input-unit-number.ts +17 -2
  30. package/stories/ox-input-barcode.stories.ts +4 -0
  31. package/stories/ox-input-data.stories.ts +55 -0
  32. package/stories/ox-input-mass-fraction.stories.ts +10 -1
  33. package/stories/ox-input-unit.stories.ts +1 -0
package/dist/src/ox-input-data.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-code'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputCode } from './ox-input-code.js'\n\n/**\nWEB Component for code-mirror based data editor.\n\nExample:\n\n <ox-input-data value=${text}>\n </ox-input-data>\n*/\n@customElement('ox-input-data')\nexport class OxInputData extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n div[datatype] {\n display: flex;\n align-items: center;\n padding: 2px;\n background-color: rgba(0, 0, 0, 0.08);\n font-size: small;\n }\n\n div[datatype] mwc-icon {\n margin-left: auto;\n }\n\n ox-input-code {\n flex: 1;\n max-width: 260px;\n overflow: auto;\n }\n `\n ]\n\n render() {\n return html`\n <div datatype>\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"string\"\n .checked=${typeof this.value == 'string'}\n @click=${() => this._setDataType('string')}\n ?disabled=${this.disabled}\n />string\n\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"number\"\n .checked=${typeof this.value == 'number'}\n @click=${() => this._setDataType('number')}\n ?disabled=${this.disabled}\n />number\n\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"object\"\n .checked=${typeof this.value == 'object'}\n @click=${() => this._setDataType('object')}\n ?disabled=${this.disabled}\n />object\n <mwc-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</mwc-icon>\n </div>\n\n <ox-input-code .value=${this._getData(this.value)} language=\"javascript\" editor ?disabled=${this.disabled}>\n </ox-input-code>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', e => {\n e.stopPropagation()\n const target = e.target as OxInputCode\n if (target.hasAttribute('editor')) {\n this.value = target.value\n }\n\n const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value')\n this._setDataType(type)\n })\n }\n\n udpated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n this.value = this._getData(this.value)\n }\n }\n\n _setDataType(type: string | undefined | null) {\n if (typeof this.value !== type) {\n var value = this.value\n\n try {\n switch (type) {\n case 'string':\n this.value = String(value || '')\n break\n case 'number':\n if (!isNaN(value)) {\n this.value = Number(value)\n }\n break\n case 'object':\n this.value = eval('(' + value + ')')\n break\n }\n } catch (e) {\n console.log(e)\n }\n }\n\n this._onAfterValueChange()\n }\n\n _clearData() {\n this.value = undefined\n this._onAfterValueChange()\n }\n\n _getData(data: any) {\n return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1)\n }\n\n _onAfterValueChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
1
+ {"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-code'\n\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputCode } from './ox-input-code.js'\nimport { isEqual } from 'lodash-es'\n\n/**\nWEB Component for code-mirror based data editor.\n\nExample:\n\n <ox-input-data value=${text}>\n </ox-input-data>\n*/\n@customElement('ox-input-data')\nexport class OxInputData extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n div[datatype] {\n display: flex;\n align-items: center;\n padding: 2px;\n background-color: rgba(0, 0, 0, 0.08);\n font-size: small;\n }\n\n div[datatype] mwc-icon {\n margin-left: auto;\n }\n\n ox-input-code {\n flex: 1;\n max-width: 260px;\n overflow: auto;\n }\n `\n ]\n\n render() {\n const valueType = typeof this.value\n\n return html`\n <div datatype>\n <input\n id=\"string\"\n type=\"radio\"\n name=\"data-type\"\n data-value=\"string\"\n .checked=${live(valueType == 'string')}\n @click=${() => this._setDataType('string')}\n ?disabled=${this.disabled}\n />\n <label for=\"string\">string</label>\n\n <input\n id=\"number\"\n type=\"radio\"\n name=\"data-type\"\n data-value=\"number\"\n .checked=${live(valueType == 'number')}\n @click=${() => this._setDataType('number')}\n ?disabled=${this.disabled}\n />\n <label for=\"number\">number</label>\n\n <input\n id=\"object\"\n type=\"radio\"\n name=\"data-type\"\n data-value=\"object\"\n .checked=${live(valueType == 'object')}\n @click=${() => this._setDataType('object')}\n ?disabled=${this.disabled}\n />\n <label for=\"object\">object</label>\n\n <mwc-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</mwc-icon>\n </div>\n\n <ox-input-code\n .value=${this._getStringData(this.value)}\n language=\"text\"\n editor\n ?disabled=${this.disabled}\n @change=${(e: CustomEvent) => {\n e.stopPropagation()\n this._setDataTypeAndValue(valueType, (e.target as any).value)\n }}\n >\n </ox-input-code>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', e => {\n e.stopPropagation()\n\n const target = e.target as OxInputCode\n if (target.hasAttribute('editor')) {\n if (this.value === undefined && target.value == '') {\n return\n }\n this.value = target.value\n }\n })\n }\n\n _setDataTypeAndValue(type: string | undefined | null, value: any) {\n /* value must be a string */\n try {\n switch (type) {\n case 'number':\n if (!isNaN(Number(value))) {\n value = Number(value)\n }\n break\n case 'object':\n value = eval('(' + value + ')')\n break\n }\n } catch (e) {}\n\n if (isEqual(this.value, value)) {\n return\n }\n\n this.value = value\n\n this.requestUpdate()\n this._onAfterValueChange()\n }\n\n _setDataType(type: string | undefined | null) {\n if (typeof this.value == type) {\n return\n }\n\n var value = this.value\n\n try {\n switch (type) {\n case 'string':\n value = this._getStringData(value)\n break\n case 'number':\n if (!isNaN(value)) {\n value = Number(value)\n }\n break\n case 'object':\n value = eval('(' + value + ')')\n break\n }\n } catch (e) {\n console.log(e)\n }\n\n if (isEqual(this.value, value)) {\n this.requestUpdate()\n return\n }\n\n this.value = value\n\n this.requestUpdate()\n this._onAfterValueChange()\n }\n\n _clearData() {\n this.value = undefined\n this._onAfterValueChange()\n }\n\n _getStringData(data: any) {\n const type = typeof data\n\n switch (type) {\n case 'object':\n return JSON.stringify(data, null, 1)\n case 'undefined':\n return ''\n default:\n return String(data) || ''\n }\n }\n\n async _onAfterValueChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
package/dist/src/ox-input-mass-fraction.d.ts CHANGED
@@ -28,6 +28,7 @@ export declare class OxInputMassFraction extends OxFormField {
28
28
  static styles: import("lit").CSSResult[];
29
29
  defaultValue: MassFraction;
30
30
  value: MassFraction;
31
+ composable: boolean;
31
32
  records: NodeListOf<HTMLElement>;
32
33
  private options;
33
34
  private changingNow;
package/dist/src/ox-input-mass-fraction.js CHANGED
@@ -25,6 +25,7 @@ let OxInputMassFraction = class OxInputMassFraction extends OxFormField {
25
25
  super(...arguments);
26
26
  this.defaultValue = {};
27
27
  this.value = {};
28
+ this.composable = false;
28
29
  this.options = FLUIDS.map(fluid => html `<div option value=${fluid}>${fluid}</div>`);
29
30
  this.changingNow = false;
30
31
  }
@@ -123,6 +124,10 @@ let OxInputMassFraction = class OxInputMassFraction extends OxFormField {
123
124
  display: block;
124
125
  text-align: center;
125
126
  }
127
+
128
+ [right-end] {
129
+ margin-left: auto;
130
+ }
126
131
  `
127
132
  ]; }
128
133
  firstUpdated() {
@@ -148,14 +153,18 @@ let OxInputMassFraction = class OxInputMassFraction extends OxFormField {
148
153
  list="value-template"
149
154
  ?disabled=${this.disabled}
150
155
  />
151
- <button
152
- class="record-action"
153
- @click=${(e) => this._delete(e)}
154
- tabindex="-1"
155
- ?disabled=${this.disabled}
156
- >
157
- <mwc-icon>remove</mwc-icon>
158
- </button>
156
+ ${this.composable
157
+ ? html `
158
+ <button
159
+ class="record-action"
160
+ @click=${(e) => this._delete(e)}
161
+ tabindex="-1"
162
+ ?disabled=${this.disabled}
163
+ >
164
+ <mwc-icon>remove</mwc-icon>
165
+ </button>
166
+ `
167
+ : nothing}
159
168
  <button
160
169
  class="record-action"
161
170
  @click=${(e) => this._up(e)}
@@ -181,36 +190,41 @@ let OxInputMassFraction = class OxInputMassFraction extends OxFormField {
181
190
  ? nothing
182
191
  : html `
183
192
  <div data-record-new>
184
- <ox-select
185
- data-key
186
- placeholder="Fluid"
187
- .value=${live('')}
188
- @change=${(e) => {
189
- e.stopPropagation();
190
- }}
191
- >
192
- <ox-popup-list with-search> ${this.options} </ox-popup-list>
193
- </ox-select>
193
+ ${this.composable
194
+ ? html `
195
+ <ox-select
196
+ data-key
197
+ placeholder="Fluid"
198
+ .value=${live('')}
199
+ @change=${(e) => {
200
+ e.stopPropagation();
201
+ }}
202
+ >
203
+ <ox-popup-list with-search> ${this.options} </ox-popup-list>
204
+ </ox-select>
194
205
 
195
- <input
196
- type="number"
197
- data-value
198
- placeholder="proportion"
199
- min="0"
200
- max="1"
201
- step="0.01"
202
- value=""
203
- list="value-template"
204
- />
205
- <button class="record-action" @click=${(e) => this._add()} tabindex="-1">
206
- <mwc-icon>add</mwc-icon>
207
- </button>
206
+ <input
207
+ type="number"
208
+ data-value
209
+ placeholder="proportion"
210
+ min="0"
211
+ max="1"
212
+ step="0.01"
213
+ value=""
214
+ list="value-template"
215
+ />
216
+ <button class="record-action" @click=${(e) => this._add()} tabindex="-1">
217
+ <mwc-icon>add</mwc-icon>
218
+ </button>
219
+ `
220
+ : nothing}
208
221
  <button
209
222
  title="fill with the values suggested"
210
223
  @click=${() => {
211
224
  this.value = { ...this.defaultValue };
212
225
  this.dispatchChangeEvent();
213
226
  }}
227
+ right-end
214
228
  >
215
229
  <mwc-icon>settings_suggest</mwc-icon>
216
230
  </button>
@@ -346,6 +360,9 @@ __decorate([
346
360
  __decorate([
347
361
  property({ type: Object })
348
362
  ], OxInputMassFraction.prototype, "value", void 0);
363
+ __decorate([
364
+ property({ type: Boolean, attribute: true })
365
+ ], OxInputMassFraction.prototype, "composable", void 0);
349
366
  __decorate([
350
367
  queryAll('[data-record]')
351
368
  ], OxInputMassFraction.prototype, "records", void 0);
package/dist/src/ox-input-mass-fraction.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-mass-fraction.js","sourceRoot":"","sources":["../../src/ox-input-mass-fraction.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport '@operato/popup/ox-popup-list.js'\nimport './ox-select.js'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { OxFormField } from './ox-form-field'\n\nconst FLUIDS = ['CH4', 'C2H6', 'C3H8', 'C4H10', 'CO2', 'H2O', 'H2S', 'N2', 'N2O', 'NO2', 'O2']\n\ntype ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[]\n ? ElementType\n : never\n\ntype FLUID = ArrayElement<typeof FLUIDS>\n\ntype MassFraction = { [key: FLUID]: number }\ntype ArrayedMassFraction = { key: FLUID; value: number }[]\n\n/**\n input component for mass-fraction map\n \n Example:\n \n <ox-input-mass-fraction \n value=${map}\n </ox-input-mass-fraction>\n */\n@customElement('ox-input-mass-fraction')\nexport class OxInputMassFraction extends OxFormField {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n\n [records] {\n flex: 1;\n\n overflow: overlay;\n }\n\n [records] > div {\n display: flex;\n flex-flow: row nowrap;\n gap: var(--mass-fraction-gap, 3px);\n margin-bottom: var(--margin-narrow);\n }\n\n [data-record-new] {\n display: flex;\n flex-flow: row nowrap;\n gap: var(--mass-fraction-gap, 3px);\n margin: var(--margin-narrow) 0;\n }\n\n button {\n display: inherit;\n align-self: center;\n border: var(--button-border);\n border-radius: var(--border-radius);\n background-color: var(--button-background-color);\n padding: var(--mass-fraction-button-padding-vertical, 3px) var(--mass-fraction-button-padding-horizontal, 3px);\n color: var(--button-color);\n cursor: pointer;\n }\n button mwc-icon {\n font-size: var(--fontsize-default);\n }\n button:focus,\n button:hover,\n button:active {\n border: var(--button-active-border);\n background-color: var(--button-background-focus-color);\n color: var(--theme-white-color);\n }\n\n input,\n ox-select {\n border: 0;\n border-bottom: var(--border-dark-color);\n font: var(--input-font);\n color: var(--primary-text-color);\n min-width: 50px;\n }\n\n input {\n padding: var(--input-padding);\n }\n\n ox-select {\n padding: 0;\n }\n\n [data-key] {\n flex: 2;\n }\n\n [data-value] {\n flex: 1;\n }\n\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n button.hidden {\n opacity: 0;\n cursor: default;\n }\n\n ox-popup-list {\n max-height: 300px;\n overflow: auto;\n left: 0;\n }\n\n [records] > [nofraction] {\n display: block;\n text-align: center;\n }\n `\n ]\n\n @property({ type: Object }) defaultValue: MassFraction = {}\n @property({ type: Object }) value: MassFraction = {}\n\n @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n private options = FLUIDS.map(fluid => html`<div option value=${fluid}>${fluid}</div>`)\n private changingNow: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n render() {\n const value = !this.value || typeof this.value !== 'object' ? {} : this.value\n const arrayed = this._toArray(value)\n\n return html`\n <div records>\n ${arrayed.length\n ? arrayed.map(\n (item, idx) => html`\n <div data-record>\n <input type=\"text\" data-key .value=${item.key} disabled />\n <input\n type=\"number\"\n data-value\n placeholder=\"fraction\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n .value=${String(item.value)}\n list=\"value-template\"\n ?disabled=${this.disabled}\n />\n <button\n class=\"record-action\"\n @click=${(e: MouseEvent) => this._delete(e)}\n tabindex=\"-1\"\n ?disabled=${this.disabled}\n >\n <mwc-icon>remove</mwc-icon>\n </button>\n <button\n class=\"record-action\"\n @click=${(e: MouseEvent) => this._up(e)}\n tabindex=\"-1\"\n ?disabled=${this.disabled || idx === 0}\n >\n <mwc-icon>arrow_upward</mwc-icon>\n </button>\n <button\n class=\"record-action\"\n @click=${(e: MouseEvent) => this._down(e)}\n tabindex=\"-1\"\n ?disabled=${this.disabled || idx === arrayed.length - 1}\n >\n <mwc-icon>arrow_downward</mwc-icon>\n </button>\n </div>\n `\n )\n : html`<div nofraction>No Fractions</div>`}\n </div>\n\n ${this.disabled\n ? nothing\n : html`\n <div data-record-new>\n <ox-select\n data-key\n placeholder=\"Fluid\"\n .value=${live('')}\n @change=${(e: Event) => {\n e.stopPropagation()\n }}\n >\n <ox-popup-list with-search> ${this.options} </ox-popup-list>\n </ox-select>\n\n <input\n type=\"number\"\n data-value\n placeholder=\"proportion\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n value=\"\"\n list=\"value-template\"\n />\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n <mwc-icon>add</mwc-icon>\n </button>\n <button\n title=\"fill with the values suggested\"\n @click=${() => {\n this.value = { ...this.defaultValue }\n this.dispatchChangeEvent()\n }}\n >\n <mwc-icon>settings_suggest</mwc-icon>\n </button>\n <button\n title=\"normalize fraction\"\n @click=${() => {\n this._normalize()\n }}\n >\n <mwc-icon>repartition</mwc-icon>\n </button>\n </div>\n `}\n `\n }\n\n _onChange(e: Event) {\n if (this.changingNow) {\n return\n }\n\n this.changingNow = true\n\n const input = e.target as HTMLInputElement\n\n const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement\n\n if (record.hasAttribute('data-record')) {\n this._build()\n } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n this._add()\n }\n\n this.changingNow = false\n }\n\n _normalize() {\n const fraction: MassFraction = this.value || {}\n const sum = Object.values(fraction).reduce((a, b) => a + b, 0)\n this.value = Object.keys(fraction).reduce((newvalue, key) => {\n newvalue[key] = fraction[key] / sum\n return newvalue\n }, {} as MassFraction)\n\n this.dispatchChangeEvent()\n }\n\n _build(includeNewRecord?: boolean) {\n if (includeNewRecord) {\n var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n } else {\n var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n }\n\n var newmap: MassFraction = {}\n\n for (var i = 0; i < records.length; i++) {\n var record = records[i]\n\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const inputs = record.querySelectorAll(\n '[data-value]:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement>\n\n if (!inputs || inputs.length == 0) {\n continue\n }\n\n var input = inputs[inputs.length - 1]\n\n var value = input.value\n\n if (key) {\n newmap[key] = Number(value) || 0\n }\n }\n\n this.value = newmap\n\n this.dispatchChangeEvent()\n }\n\n /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n _toArray(map: MassFraction) {\n var array: ArrayedMassFraction = []\n\n for (var key in map) {\n array.push({\n key: key,\n value: map[key]\n })\n }\n\n return array\n }\n\n _add() {\n this._build(true)\n\n const inputs = this.renderRoot.querySelectorAll(\n '[data-record-new] input:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement & { value: any }>\n\n for (var i = 0; i < inputs.length; i++) {\n let input = inputs[i]\n\n if (input.type == 'checkbox') input.checked = false\n else input.value = ''\n }\n\n inputs[0].focus()\n }\n\n _delete(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n\n ;(record!.querySelector('[data-key]') as HTMLInputElement)!.value = ''\n\n this._build()\n }\n\n _up(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n const array = Array.from(this.records)\n const index = array.indexOf(record) - 1\n\n if (index < 0) {\n return\n }\n\n const deleted = array.splice(index, 1)\n array.splice(index + 1, 0, ...deleted)\n\n this.value = array.reduce((sum, record) => {\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n sum[key] = Number(value) || 0\n return sum\n }, {} as MassFraction)\n\n this.dispatchChangeEvent()\n }\n\n _down(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n const array = Array.from(this.records)\n const index = array.indexOf(record)\n\n if (index > array.length) {\n return\n }\n\n array.splice(index, 1)\n array.splice(index + 1, 0, record)\n\n this.value = array.reduce((sum, record) => {\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n sum[key] = Number(value) || 0\n return sum\n }, {} as MassFraction)\n\n this.dispatchChangeEvent()\n }\n\n dispatchChangeEvent() {\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
1
+ {"version":3,"file":"ox-input-mass-fraction.js","sourceRoot":"","sources":["../../src/ox-input-mass-fraction.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport '@operato/popup/ox-popup-list.js'\nimport './ox-select.js'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { OxFormField } from './ox-form-field'\n\nconst FLUIDS = ['CH4', 'C2H6', 'C3H8', 'C4H10', 'CO2', 'H2O', 'H2S', 'N2', 'N2O', 'NO2', 'O2']\n\ntype ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[]\n ? ElementType\n : never\n\ntype FLUID = ArrayElement<typeof FLUIDS>\n\ntype MassFraction = { [key: FLUID]: number }\ntype ArrayedMassFraction = { key: FLUID; value: number }[]\n\n/**\n input component for mass-fraction map\n \n Example:\n \n <ox-input-mass-fraction \n value=${map}\n </ox-input-mass-fraction>\n */\n@customElement('ox-input-mass-fraction')\nexport class OxInputMassFraction extends OxFormField {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n\n [records] {\n flex: 1;\n\n overflow: overlay;\n }\n\n [records] > div {\n display: flex;\n flex-flow: row nowrap;\n gap: var(--mass-fraction-gap, 3px);\n margin-bottom: var(--margin-narrow);\n }\n\n [data-record-new] {\n display: flex;\n flex-flow: row nowrap;\n gap: var(--mass-fraction-gap, 3px);\n margin: var(--margin-narrow) 0;\n }\n\n button {\n display: inherit;\n align-self: center;\n border: var(--button-border);\n border-radius: var(--border-radius);\n background-color: var(--button-background-color);\n padding: var(--mass-fraction-button-padding-vertical, 3px) var(--mass-fraction-button-padding-horizontal, 3px);\n color: var(--button-color);\n cursor: pointer;\n }\n button mwc-icon {\n font-size: var(--fontsize-default);\n }\n button:focus,\n button:hover,\n button:active {\n border: var(--button-active-border);\n background-color: var(--button-background-focus-color);\n color: var(--theme-white-color);\n }\n\n input,\n ox-select {\n border: 0;\n border-bottom: var(--border-dark-color);\n font: var(--input-font);\n color: var(--primary-text-color);\n min-width: 50px;\n }\n\n input {\n padding: var(--input-padding);\n }\n\n ox-select {\n padding: 0;\n }\n\n [data-key] {\n flex: 2;\n }\n\n [data-value] {\n flex: 1;\n }\n\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n button.hidden {\n opacity: 0;\n cursor: default;\n }\n\n ox-popup-list {\n max-height: 300px;\n overflow: auto;\n left: 0;\n }\n\n [records] > [nofraction] {\n display: block;\n text-align: center;\n }\n\n [right-end] {\n margin-left: auto;\n }\n `\n ]\n\n @property({ type: Object }) defaultValue: MassFraction = {}\n @property({ type: Object }) value: MassFraction = {}\n @property({ type: Boolean, attribute: true }) composable: boolean = false\n\n @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n private options = FLUIDS.map(fluid => html`<div option value=${fluid}>${fluid}</div>`)\n private changingNow: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n render() {\n const value = !this.value || typeof this.value !== 'object' ? {} : this.value\n const arrayed = this._toArray(value)\n\n return html`\n <div records>\n ${arrayed.length\n ? arrayed.map(\n (item, idx) => html`\n <div data-record>\n <input type=\"text\" data-key .value=${item.key} disabled />\n <input\n type=\"number\"\n data-value\n placeholder=\"fraction\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n .value=${String(item.value)}\n list=\"value-template\"\n ?disabled=${this.disabled}\n />\n ${this.composable\n ? html`\n <button\n class=\"record-action\"\n @click=${(e: MouseEvent) => this._delete(e)}\n tabindex=\"-1\"\n ?disabled=${this.disabled}\n >\n <mwc-icon>remove</mwc-icon>\n </button>\n `\n : nothing}\n <button\n class=\"record-action\"\n @click=${(e: MouseEvent) => this._up(e)}\n tabindex=\"-1\"\n ?disabled=${this.disabled || idx === 0}\n >\n <mwc-icon>arrow_upward</mwc-icon>\n </button>\n <button\n class=\"record-action\"\n @click=${(e: MouseEvent) => this._down(e)}\n tabindex=\"-1\"\n ?disabled=${this.disabled || idx === arrayed.length - 1}\n >\n <mwc-icon>arrow_downward</mwc-icon>\n </button>\n </div>\n `\n )\n : html`<div nofraction>No Fractions</div>`}\n </div>\n\n ${this.disabled\n ? nothing\n : html`\n <div data-record-new>\n ${this.composable\n ? html`\n <ox-select\n data-key\n placeholder=\"Fluid\"\n .value=${live('')}\n @change=${(e: Event) => {\n e.stopPropagation()\n }}\n >\n <ox-popup-list with-search> ${this.options} </ox-popup-list>\n </ox-select>\n\n <input\n type=\"number\"\n data-value\n placeholder=\"proportion\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n value=\"\"\n list=\"value-template\"\n />\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n <mwc-icon>add</mwc-icon>\n </button>\n `\n : nothing}\n <button\n title=\"fill with the values suggested\"\n @click=${() => {\n this.value = { ...this.defaultValue }\n this.dispatchChangeEvent()\n }}\n right-end\n >\n <mwc-icon>settings_suggest</mwc-icon>\n </button>\n <button\n title=\"normalize fraction\"\n @click=${() => {\n this._normalize()\n }}\n >\n <mwc-icon>repartition</mwc-icon>\n </button>\n </div>\n `}\n `\n }\n\n _onChange(e: Event) {\n if (this.changingNow) {\n return\n }\n\n this.changingNow = true\n\n const input = e.target as HTMLInputElement\n\n const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement\n\n if (record.hasAttribute('data-record')) {\n this._build()\n } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n this._add()\n }\n\n this.changingNow = false\n }\n\n _normalize() {\n const fraction: MassFraction = this.value || {}\n const sum = Object.values(fraction).reduce((a, b) => a + b, 0)\n this.value = Object.keys(fraction).reduce((newvalue, key) => {\n newvalue[key] = fraction[key] / sum\n return newvalue\n }, {} as MassFraction)\n\n this.dispatchChangeEvent()\n }\n\n _build(includeNewRecord?: boolean) {\n if (includeNewRecord) {\n var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n } else {\n var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n }\n\n var newmap: MassFraction = {}\n\n for (var i = 0; i < records.length; i++) {\n var record = records[i]\n\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const inputs = record.querySelectorAll(\n '[data-value]:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement>\n\n if (!inputs || inputs.length == 0) {\n continue\n }\n\n var input = inputs[inputs.length - 1]\n\n var value = input.value\n\n if (key) {\n newmap[key] = Number(value) || 0\n }\n }\n\n this.value = newmap\n\n this.dispatchChangeEvent()\n }\n\n /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n _toArray(map: MassFraction) {\n var array: ArrayedMassFraction = []\n\n for (var key in map) {\n array.push({\n key: key,\n value: map[key]\n })\n }\n\n return array\n }\n\n _add() {\n this._build(true)\n\n const inputs = this.renderRoot.querySelectorAll(\n '[data-record-new] input:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement & { value: any }>\n\n for (var i = 0; i < inputs.length; i++) {\n let input = inputs[i]\n\n if (input.type == 'checkbox') input.checked = false\n else input.value = ''\n }\n\n inputs[0].focus()\n }\n\n _delete(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n\n ;(record!.querySelector('[data-key]') as HTMLInputElement)!.value = ''\n\n this._build()\n }\n\n _up(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n const array = Array.from(this.records)\n const index = array.indexOf(record) - 1\n\n if (index < 0) {\n return\n }\n\n const deleted = array.splice(index, 1)\n array.splice(index + 1, 0, ...deleted)\n\n this.value = array.reduce((sum, record) => {\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n sum[key] = Number(value) || 0\n return sum\n }, {} as MassFraction)\n\n this.dispatchChangeEvent()\n }\n\n _down(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n const array = Array.from(this.records)\n const index = array.indexOf(record)\n\n if (index > array.length) {\n return\n }\n\n array.splice(index, 1)\n array.splice(index + 1, 0, record)\n\n this.value = array.reduce((sum, record) => {\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n sum[key] = Number(value) || 0\n return sum\n }, {} as MassFraction)\n\n this.dispatchChangeEvent()\n }\n\n dispatchChangeEvent() {\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
package/dist/src/ox-input-unit-number.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  /**
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
+ import '@material/mwc-icon';
4
5
  import { PropertyValues } from 'lit';
5
6
  import { OxPopupList } from '@operato/popup';
6
7
  import { OxFormField } from './ox-form-field';
7
- export declare class OxInputUnit extends OxFormField {
8
+ export declare class OxInputUnitNumber extends OxFormField {
8
9
  static styles: import("lit").CSSResult[];
9
10
  placeholder?: string;
10
11
  stdUnit: string;
package/dist/src/ox-input-unit-number.js CHANGED
@@ -2,6 +2,7 @@
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
4
  import { __decorate } from "tslib";
5
+ import '@material/mwc-icon';
5
6
  import { css, html } from 'lit';
6
7
  import { customElement, property, query } from 'lit/decorators.js';
7
8
  import { ifDefined } from 'lit/directives/if-defined.js';
@@ -163,7 +164,7 @@ const UNIT_SYSTEMS = {
163
164
  '°C': [(v) => v - 273.15, (v) => v + 273.15]
164
165
  }
165
166
  };
166
- let OxInputUnit = class OxInputUnit extends OxFormField {
167
+ let OxInputUnitNumber = class OxInputUnitNumber extends OxFormField {
167
168
  static { this.styles = [
168
169
  css `
169
170
  :host {
@@ -199,13 +200,25 @@ let OxInputUnit = class OxInputUnit extends OxFormField {
199
200
  }
200
201
 
201
202
  #unit {
202
- display: inline;
203
+ flex: 1;
204
+ display: flex;
205
+ align-items: center;
203
206
  position: relative;
204
207
  margin-left: var(--margin-narrow);
205
208
  font: var(--label-font);
206
209
  color: var(--label-color);
207
210
  min-width: 24px;
208
211
  }
212
+
213
+ mwc-icon {
214
+ font-size: 18px;
215
+ color: var(--primary-color, #3c3938);
216
+ margin-left: auto;
217
+ }
218
+
219
+ ox-popup-list {
220
+ right: 0;
221
+ }
209
222
  `
210
223
  ]; }
211
224
  render() {
@@ -242,6 +255,7 @@ let OxInputUnit = class OxInputUnit extends OxFormField {
242
255
  <div option value=${this.stdUnit}>${this.stdUnit}</div>
243
256
  ${units.map(unit => html `<div option value=${unit}>${unit}</div>`)}
244
257
  </ox-popup-list>
258
+ <mwc-icon>expand_more</mwc-icon>
245
259
  </div>
246
260
  `;
247
261
  }
@@ -307,21 +321,21 @@ let OxInputUnit = class OxInputUnit extends OxFormField {
307
321
  };
308
322
  __decorate([
309
323
  property({ type: String })
310
- ], OxInputUnit.prototype, "placeholder", void 0);
324
+ ], OxInputUnitNumber.prototype, "placeholder", void 0);
311
325
  __decorate([
312
326
  property({ type: String, attribute: 'std-unit' })
313
- ], OxInputUnit.prototype, "stdUnit", void 0);
327
+ ], OxInputUnitNumber.prototype, "stdUnit", void 0);
314
328
  __decorate([
315
329
  property({ type: String, attribute: 'user-unit' })
316
- ], OxInputUnit.prototype, "userUnit", void 0);
330
+ ], OxInputUnitNumber.prototype, "userUnit", void 0);
317
331
  __decorate([
318
332
  query('input')
319
- ], OxInputUnit.prototype, "input", void 0);
333
+ ], OxInputUnitNumber.prototype, "input", void 0);
320
334
  __decorate([
321
335
  query('ox-popup-list')
322
- ], OxInputUnit.prototype, "popup", void 0);
323
- OxInputUnit = __decorate([
336
+ ], OxInputUnitNumber.prototype, "popup", void 0);
337
+ OxInputUnitNumber = __decorate([
324
338
  customElement('ox-input-unit-number')
325
- ], OxInputUnit);
326
- export { OxInputUnit };
339
+ ], OxInputUnitNumber);
340
+ export { OxInputUnitNumber };
327
341
  //# sourceMappingURL=ox-input-unit-number.js.map
package/dist/src/ox-input-unit-number.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-unit-number.js","sourceRoot":"","sources":["../../src/ox-input-unit-number.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxPopupList } from '@operato/popup'\n\nimport { OxFormField } from './ox-form-field'\n\nconst UNIT_SYSTEMS: { [unit: string]: { [unit: string]: number | ((v: number) => number)[] } } = {\n kg: {\n mg: 1000000,\n g: 1000,\n ton: 0.001\n },\n rad: {\n degree: 180 / Math.PI\n },\n sec: {\n msec: 1000,\n min: 1 / 60,\n hr: 1 / 3600,\n day: 1 / (3600 * 24),\n year: 1 / (3600 * 24 * 365)\n },\n m: {\n mm: 1000,\n cm: 100,\n inch: 39.37008\n },\n 'g/mol': {\n 'kg/kmol': 1,\n 'g/kmol': 1000\n },\n m2: {\n mm2: 1000000,\n cm2: 1000\n },\n m3: {\n cm3: 1000000,\n L: 1000,\n mL: 1000000\n },\n 'kg/m3': {\n 'g/m3': 1000,\n 'g/L': 1,\n 'g/cm3': 0.001,\n 'kg/L': 0.001,\n 'g/mL': 0.001\n },\n 'm/sec': {\n 'm/min': 60,\n 'm/hr': 3600,\n 'cm/sec': 100,\n 'cm/min': 6000,\n 'cm/hr': 360000\n },\n N: {\n kN: 0.001,\n kgf: 0.101971621\n },\n Pa: {\n atm: 1 / 101325,\n bar: 1 / 100000,\n 'kgf/cm2': 1 / 9.80665 / 10000,\n MPa: 1 / 1000000,\n kPa: 1 / 1000,\n psi: 1 / 6894.76,\n mmH2O: 1 / 9.80665,\n mmHg: 1 / 133.32\n },\n 'kg/sec': {\n 'kg/min': 60,\n 'kg/hr': 3600,\n 'ton/hr': 3.6,\n 'ton/year': (60 * 60 * 24 * 365) / 1000\n },\n 'kg/m2/sec': {\n 'kg/m2/min': 60,\n 'kg/m2/hr': 3600\n },\n 'mol/sec': {\n 'kmol/sec': 1 / 1000\n },\n 'mol/m2/sec': {\n 'kmol/m2/sec': 1 / 1000\n },\n 'Sm3/sec': {\n 'Sm3/hr': 3600,\n 'Sm3/min': 60,\n 'SL/min': 60000,\n 'SL/sec': 1000,\n 'Scm3/min': 60000000,\n 'Scm3/sec': 1000000\n },\n 'Nm3/sec': {\n 'Nm3/hr': 3600,\n 'Nm3/min': 60,\n 'NL/min': 60000,\n 'NL/sec': 1000,\n 'Ncm3/min': 60000000,\n 'Ncm3/sec': 1000000\n },\n 'Am3/sec': {\n 'Am3/hr': 3600,\n 'Am3/min': 60,\n 'AL/min': 60000,\n 'AL/sec': 1000,\n 'Acm3/min': 60000000,\n 'Acm3/sec': 1000000\n },\n J: {\n kJ: 1 / 1000,\n MJ: 1 / 1000000,\n cal: 1 / 4.184,\n kcal: 1 / 4.184 / 1000\n },\n W: {\n kW: 1 / 1000,\n MW: 1 / 1000000,\n 'kcal/hr': 859.85 / 1000,\n hp: 1 / 745.7\n },\n 'W/m2': {\n 'kW/m2': 1 / 1000,\n 'W/cm2': 1 / 10000,\n 'kW/cm2': 1 / 10000000\n },\n 'J/kg': {\n 'kJ/kg': 1 / 1000,\n 'cal/g': 1 / 4.184 / 1000,\n 'cal/kg': 1 / 4.184,\n 'kcal/kg': 1 / 4.184 / 1000\n },\n 'J/kg/K': {\n 'kJ/kg/K': 1 / 1000,\n 'cal/kg/K': 1 / 4.184,\n 'kcal/kg/K': 1 / 4.184 / 1000,\n 'cal/g/K': 1 / 4.184 / 1000\n },\n 'W/m/K': {\n 'kW/m/K': 1 / 1000,\n 'W/cm/K': 1 / 100,\n 'kW/cm/K': 1 / 100 / 1000\n },\n 'W/m2/K': {\n 'kW/m2/K': 1 / 1000,\n 'kcal/hr/m2/oC': 1 / 1.163\n },\n 'N sec/m2': {\n 'Pa sec': 1,\n 'mPa sec': 1000,\n 'kg/m/sec': 1,\n 'g/cm/sec': 10,\n P: 10,\n cP: 1000\n },\n 'm2 oC/W': {\n 'm2 oC/kW': 1000\n },\n '%': {},\n ppm: {},\n K: {\n '°C': [(v: number) => v - 273.15, (v: number) => v + 273.15]\n }\n}\n\n@customElement('ox-input-unit-number')\nexport class OxInputUnit extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n input {\n flex: 1;\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--input-padding);\n font: var(--input-font);\n color: var(--primary-text-color);\n min-width: 40px;\n }\n\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n input[type='number'] {\n text-align: right;\n -moz-appearance: textfield;\n }\n\n #unit {\n display: inline;\n position: relative;\n margin-left: var(--margin-narrow);\n font: var(--label-font);\n color: var(--label-color);\n min-width: 24px;\n }\n `\n ]\n\n @property({ type: String }) placeholder?: string\n @property({ type: String, attribute: 'std-unit' }) stdUnit!: string\n @property({ type: String, attribute: 'user-unit' }) userUnit?: string\n\n @query('input') input!: HTMLInputElement\n @query('ox-popup-list') popup!: OxPopupList\n\n render() {\n const userUnit = this.userUnit || this.stdUnit\n const units = (UNIT_SYSTEMS[this.stdUnit] && Object.keys(UNIT_SYSTEMS[this.stdUnit])) || []\n\n return html`\n <input\n type=\"number\"\n .value=${this._toUserUnit(this.value)}\n placeholder=${ifDefined(this.placeholder)}\n @change=${(e: Event) => this._onChangeValue(e)}\n ?disabled=${this.disabled}\n />\n <div\n id=\"unit\"\n @click=${(e: Event) => {\n if (this.disabled) {\n return\n }\n\n const target = e.currentTarget as HTMLElement\n this.popup.open({\n right: 0,\n top: target.clientTop + target.offsetHeight\n })\n }}\n >\n ${userUnit}\n <ox-popup-list\n .value=${userUnit}\n @select=${(e: CustomEvent) => {\n this.userUnit = e.detail\n }}\n >\n <div option value=${this.stdUnit}>${this.stdUnit}</div>\n ${units.map(unit => html`<div option value=${unit}>${unit}</div>`)}\n </ox-popup-list>\n </div>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n // if (changes.has('stdUnit')) {\n // this.userUnit = this.userUnit || this.stdUnit\n // }\n }\n\n _onChangeValue(e: Event) {\n this.value = this._toStdUnit(this.input.value)\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n _toUserUnit(stdValue: string | number | undefined) {\n if (!this.userUnit) {\n return\n }\n\n if (this.userUnit === this.stdUnit) {\n return Number(stdValue)\n }\n\n const converterValue = UNIT_SYSTEMS[this.stdUnit][this.userUnit]\n\n if (!converterValue) {\n delete this.userUnit\n return\n }\n\n if (typeof converterValue === 'number') {\n return this._toUserUnitByRate(stdValue, converterValue || 1)\n } /* should be converter function array */ else {\n return this._toUserUnitByFunction(stdValue, converterValue as ((v: number) => number)[])\n }\n }\n\n _toUserUnitByRate(stdValue: string | number | undefined, converterRate: number) {\n return Number(stdValue) * converterRate\n }\n\n _toUserUnitByFunction(stdValue: string | number | undefined, converterFunctions: ((v: number) => number)[]) {\n return converterFunctions[0](Number(stdValue))\n }\n\n _toStdUnit(userValue: string | number | undefined) {\n if (!this.userUnit) {\n return\n }\n\n if (this.userUnit === this.stdUnit) {\n return Number(userValue)\n }\n\n const converterValue = UNIT_SYSTEMS[this.stdUnit][this.userUnit]\n\n if (typeof converterValue === 'number') {\n return this._toStdUnitByRate(userValue, converterValue || 1)\n } /* should be converter function array */ else {\n return this._toStdUnitByFunction(userValue, converterValue as ((v: number) => number)[])\n }\n }\n\n _toStdUnitByRate(userValue: string | number | undefined, converterRate: number) {\n return isNaN(Number(userValue)) ? undefined : Number(userValue) / converterRate\n }\n\n _toStdUnitByFunction(userValue: string | number | undefined, converterFunctions: ((v: number) => number)[]) {\n return converterFunctions[1](Number(userValue))\n }\n}\n"]}
1
+ {"version":3,"file":"ox-input-unit-number.js","sourceRoot":"","sources":["../../src/ox-input-unit-number.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxPopupList } from '@operato/popup'\n\nimport { OxFormField } from './ox-form-field'\n\nconst UNIT_SYSTEMS: { [unit: string]: { [unit: string]: number | ((v: number) => number)[] } } = {\n kg: {\n mg: 1000000,\n g: 1000,\n ton: 0.001\n },\n rad: {\n degree: 180 / Math.PI\n },\n sec: {\n msec: 1000,\n min: 1 / 60,\n hr: 1 / 3600,\n day: 1 / (3600 * 24),\n year: 1 / (3600 * 24 * 365)\n },\n m: {\n mm: 1000,\n cm: 100,\n inch: 39.37008\n },\n 'g/mol': {\n 'kg/kmol': 1,\n 'g/kmol': 1000\n },\n m2: {\n mm2: 1000000,\n cm2: 1000\n },\n m3: {\n cm3: 1000000,\n L: 1000,\n mL: 1000000\n },\n 'kg/m3': {\n 'g/m3': 1000,\n 'g/L': 1,\n 'g/cm3': 0.001,\n 'kg/L': 0.001,\n 'g/mL': 0.001\n },\n 'm/sec': {\n 'm/min': 60,\n 'm/hr': 3600,\n 'cm/sec': 100,\n 'cm/min': 6000,\n 'cm/hr': 360000\n },\n N: {\n kN: 0.001,\n kgf: 0.101971621\n },\n Pa: {\n atm: 1 / 101325,\n bar: 1 / 100000,\n 'kgf/cm2': 1 / 9.80665 / 10000,\n MPa: 1 / 1000000,\n kPa: 1 / 1000,\n psi: 1 / 6894.76,\n mmH2O: 1 / 9.80665,\n mmHg: 1 / 133.32\n },\n 'kg/sec': {\n 'kg/min': 60,\n 'kg/hr': 3600,\n 'ton/hr': 3.6,\n 'ton/year': (60 * 60 * 24 * 365) / 1000\n },\n 'kg/m2/sec': {\n 'kg/m2/min': 60,\n 'kg/m2/hr': 3600\n },\n 'mol/sec': {\n 'kmol/sec': 1 / 1000\n },\n 'mol/m2/sec': {\n 'kmol/m2/sec': 1 / 1000\n },\n 'Sm3/sec': {\n 'Sm3/hr': 3600,\n 'Sm3/min': 60,\n 'SL/min': 60000,\n 'SL/sec': 1000,\n 'Scm3/min': 60000000,\n 'Scm3/sec': 1000000\n },\n 'Nm3/sec': {\n 'Nm3/hr': 3600,\n 'Nm3/min': 60,\n 'NL/min': 60000,\n 'NL/sec': 1000,\n 'Ncm3/min': 60000000,\n 'Ncm3/sec': 1000000\n },\n 'Am3/sec': {\n 'Am3/hr': 3600,\n 'Am3/min': 60,\n 'AL/min': 60000,\n 'AL/sec': 1000,\n 'Acm3/min': 60000000,\n 'Acm3/sec': 1000000\n },\n J: {\n kJ: 1 / 1000,\n MJ: 1 / 1000000,\n cal: 1 / 4.184,\n kcal: 1 / 4.184 / 1000\n },\n W: {\n kW: 1 / 1000,\n MW: 1 / 1000000,\n 'kcal/hr': 859.85 / 1000,\n hp: 1 / 745.7\n },\n 'W/m2': {\n 'kW/m2': 1 / 1000,\n 'W/cm2': 1 / 10000,\n 'kW/cm2': 1 / 10000000\n },\n 'J/kg': {\n 'kJ/kg': 1 / 1000,\n 'cal/g': 1 / 4.184 / 1000,\n 'cal/kg': 1 / 4.184,\n 'kcal/kg': 1 / 4.184 / 1000\n },\n 'J/kg/K': {\n 'kJ/kg/K': 1 / 1000,\n 'cal/kg/K': 1 / 4.184,\n 'kcal/kg/K': 1 / 4.184 / 1000,\n 'cal/g/K': 1 / 4.184 / 1000\n },\n 'W/m/K': {\n 'kW/m/K': 1 / 1000,\n 'W/cm/K': 1 / 100,\n 'kW/cm/K': 1 / 100 / 1000\n },\n 'W/m2/K': {\n 'kW/m2/K': 1 / 1000,\n 'kcal/hr/m2/oC': 1 / 1.163\n },\n 'N sec/m2': {\n 'Pa sec': 1,\n 'mPa sec': 1000,\n 'kg/m/sec': 1,\n 'g/cm/sec': 10,\n P: 10,\n cP: 1000\n },\n 'm2 oC/W': {\n 'm2 oC/kW': 1000\n },\n '%': {},\n ppm: {},\n K: {\n '°C': [(v: number) => v - 273.15, (v: number) => v + 273.15]\n }\n}\n\n@customElement('ox-input-unit-number')\nexport class OxInputUnitNumber extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n input {\n flex: 1;\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--input-padding);\n font: var(--input-font);\n color: var(--primary-text-color);\n min-width: 40px;\n }\n\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n input[type='number'] {\n text-align: right;\n -moz-appearance: textfield;\n }\n\n #unit {\n flex: 1;\n display: flex;\n align-items: center;\n position: relative;\n margin-left: var(--margin-narrow);\n font: var(--label-font);\n color: var(--label-color);\n min-width: 24px;\n }\n\n mwc-icon {\n font-size: 18px;\n color: var(--primary-color, #3c3938);\n margin-left: auto;\n }\n\n ox-popup-list {\n right: 0;\n }\n `\n ]\n\n @property({ type: String }) placeholder?: string\n @property({ type: String, attribute: 'std-unit' }) stdUnit!: string\n @property({ type: String, attribute: 'user-unit' }) userUnit?: string\n\n @query('input') input!: HTMLInputElement\n @query('ox-popup-list') popup!: OxPopupList\n\n render() {\n const userUnit = this.userUnit || this.stdUnit\n const units = (UNIT_SYSTEMS[this.stdUnit] && Object.keys(UNIT_SYSTEMS[this.stdUnit])) || []\n\n return html`\n <input\n type=\"number\"\n .value=${this._toUserUnit(this.value)}\n placeholder=${ifDefined(this.placeholder)}\n @change=${(e: Event) => this._onChangeValue(e)}\n ?disabled=${this.disabled}\n />\n <div\n id=\"unit\"\n @click=${(e: Event) => {\n if (this.disabled) {\n return\n }\n\n const target = e.currentTarget as HTMLElement\n this.popup.open({\n right: 0,\n top: target.clientTop + target.offsetHeight\n })\n }}\n >\n ${userUnit}\n <ox-popup-list\n .value=${userUnit}\n @select=${(e: CustomEvent) => {\n this.userUnit = e.detail\n }}\n >\n <div option value=${this.stdUnit}>${this.stdUnit}</div>\n ${units.map(unit => html`<div option value=${unit}>${unit}</div>`)}\n </ox-popup-list>\n <mwc-icon>expand_more</mwc-icon>\n </div>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n // if (changes.has('stdUnit')) {\n // this.userUnit = this.userUnit || this.stdUnit\n // }\n }\n\n _onChangeValue(e: Event) {\n this.value = this._toStdUnit(this.input.value)\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n _toUserUnit(stdValue: string | number | undefined) {\n if (!this.userUnit) {\n return\n }\n\n if (this.userUnit === this.stdUnit) {\n return Number(stdValue)\n }\n\n const converterValue = UNIT_SYSTEMS[this.stdUnit][this.userUnit]\n\n if (!converterValue) {\n delete this.userUnit\n return\n }\n\n if (typeof converterValue === 'number') {\n return this._toUserUnitByRate(stdValue, converterValue || 1)\n } /* should be converter function array */ else {\n return this._toUserUnitByFunction(stdValue, converterValue as ((v: number) => number)[])\n }\n }\n\n _toUserUnitByRate(stdValue: string | number | undefined, converterRate: number) {\n return Number(stdValue) * converterRate\n }\n\n _toUserUnitByFunction(stdValue: string | number | undefined, converterFunctions: ((v: number) => number)[]) {\n return converterFunctions[0](Number(stdValue))\n }\n\n _toStdUnit(userValue: string | number | undefined) {\n if (!this.userUnit) {\n return\n }\n\n if (this.userUnit === this.stdUnit) {\n return Number(userValue)\n }\n\n const converterValue = UNIT_SYSTEMS[this.stdUnit][this.userUnit]\n\n if (typeof converterValue === 'number') {\n return this._toStdUnitByRate(userValue, converterValue || 1)\n } /* should be converter function array */ else {\n return this._toStdUnitByFunction(userValue, converterValue as ((v: number) => number)[])\n }\n }\n\n _toStdUnitByRate(userValue: string | number | undefined, converterRate: number) {\n return isNaN(Number(userValue)) ? undefined : Number(userValue) / converterRate\n }\n\n _toStdUnitByFunction(userValue: string | number | undefined, converterFunctions: ((v: number) => number)[]) {\n return converterFunctions[1](Number(userValue))\n }\n}\n"]}
package/dist/stories/ox-input-barcode.stories.js CHANGED
@@ -17,6 +17,10 @@ const Template = ({ name = 'barcode', scannable = true, withoutEnter = true, eng
17
17
  <link href="/themes/app-theme.css" rel="stylesheet" />
18
18
  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
19
19
  <style>
20
+ #root {
21
+ height: 500px;
22
+ }
23
+
20
24
  ox-input-barcode {
21
25
  font-size: 80px;
22
26
  --input-font: initial;
package/dist/stories/ox-input-barcode.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-input-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACnC,iBAAiB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACzC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAkBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,WAAW,GAAG,KAAK,EACnB,iBAAiB,GAAG,KAAK,EACzB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;WAWT,IAAI;qBACM,YAAY;iBAChB,SAAS;oBACN,WAAW;2BACJ,iBAAiB;cAC9B,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;gBACnE,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,KAAK;IAClB,iBAAiB,EAAE,KAAK;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,iBAAiB,EAAE,KAAK;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAClD,iBAAiB,CAAC,IAAI,GAAG;IACvB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,iBAAiB,EAAE,IAAI;CACxB,CAAA","sourcesContent":["import '../src/ox-input-barcode.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-input-barcode',\n component: 'ox-input-barcode',\n argTypes: {\n name: { control: 'text' },\n value: { control: 'text' },\n scannable: { control: 'boolean' },\n withoutEnter: { control: 'boolean' },\n englishOnly: { control: 'boolean' },\n selectAfterChange: { control: 'boolean' },\n disabled: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n name?: string\n value?: string\n scannable?: boolean\n withoutEnter?: boolean\n englishOnly?: boolean\n selectAfterChange?: boolean\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n name = 'barcode',\n scannable = true,\n withoutEnter = true,\n englishOnly = false,\n selectAfterChange = false,\n disabled\n}: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n <style>\n ox-input-barcode {\n font-size: 80px;\n --input-font: initial;\n }\n </style>\n\n <ox-input-barcode\n name=${name}\n ?without-enter=${withoutEnter}\n ?scannable=${scannable}\n ?english-only=${englishOnly}\n ?select-after-change=${selectAfterChange}\n @change=${(e: CustomEvent) => console.log((e.target as HTMLInputElement).value)}\n ?disabled=${disabled}\n >\n </ox-input-barcode>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'barcode',\n scannable: true,\n withoutEnter: true,\n englishOnly: false,\n selectAfterChange: false\n}\n\nexport const EnglishOnly = Template.bind({})\nEnglishOnly.args = {\n name: 'barcode',\n scannable: true,\n withoutEnter: true,\n englishOnly: true,\n selectAfterChange: false\n}\n\nexport const selectAfterChange = Template.bind({})\nselectAfterChange.args = {\n name: 'barcode',\n scannable: true,\n withoutEnter: true,\n englishOnly: true,\n selectAfterChange: true\n}\n"]}
1
+ {"version":3,"file":"ox-input-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-input-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACnC,iBAAiB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACzC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAkBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,WAAW,GAAG,KAAK,EACnB,iBAAiB,GAAG,KAAK,EACzB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;WAeT,IAAI;qBACM,YAAY;iBAChB,SAAS;oBACN,WAAW;2BACJ,iBAAiB;cAC9B,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;gBACnE,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,KAAK;IAClB,iBAAiB,EAAE,KAAK;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,iBAAiB,EAAE,KAAK;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAClD,iBAAiB,CAAC,IAAI,GAAG;IACvB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,iBAAiB,EAAE,IAAI;CACxB,CAAA","sourcesContent":["import '../src/ox-input-barcode.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-input-barcode',\n component: 'ox-input-barcode',\n argTypes: {\n name: { control: 'text' },\n value: { control: 'text' },\n scannable: { control: 'boolean' },\n withoutEnter: { control: 'boolean' },\n englishOnly: { control: 'boolean' },\n selectAfterChange: { control: 'boolean' },\n disabled: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n name?: string\n value?: string\n scannable?: boolean\n withoutEnter?: boolean\n englishOnly?: boolean\n selectAfterChange?: boolean\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n name = 'barcode',\n scannable = true,\n withoutEnter = true,\n englishOnly = false,\n selectAfterChange = false,\n disabled\n}: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n <style>\n #root {\n height: 500px;\n }\n\n ox-input-barcode {\n font-size: 80px;\n --input-font: initial;\n }\n </style>\n\n <ox-input-barcode\n name=${name}\n ?without-enter=${withoutEnter}\n ?scannable=${scannable}\n ?english-only=${englishOnly}\n ?select-after-change=${selectAfterChange}\n @change=${(e: CustomEvent) => console.log((e.target as HTMLInputElement).value)}\n ?disabled=${disabled}\n >\n </ox-input-barcode>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'barcode',\n scannable: true,\n withoutEnter: true,\n englishOnly: false,\n selectAfterChange: false\n}\n\nexport const EnglishOnly = Template.bind({})\nEnglishOnly.args = {\n name: 'barcode',\n scannable: true,\n withoutEnter: true,\n englishOnly: true,\n selectAfterChange: false\n}\n\nexport const selectAfterChange = Template.bind({})\nselectAfterChange.args = {\n name: 'barcode',\n scannable: true,\n withoutEnter: true,\n englishOnly: true,\n selectAfterChange: true\n}\n"]}
package/dist/stories/ox-input-data.stories.d.ts ADDED
@@ -0,0 +1,33 @@
1
+ import '../src/ox-input-data.js';
2
+ import { TemplateResult } from 'lit';
3
+ declare const _default: {
4
+ title: string;
5
+ component: string;
6
+ argTypes: {
7
+ value: {
8
+ control: string;
9
+ };
10
+ name: {
11
+ control: string;
12
+ };
13
+ language: {
14
+ control: string;
15
+ options: string[];
16
+ };
17
+ disabled: {
18
+ control: string;
19
+ };
20
+ };
21
+ };
22
+ export default _default;
23
+ interface Story<T> {
24
+ (args: T): TemplateResult;
25
+ args?: Partial<T>;
26
+ argTypes?: Record<string, unknown>;
27
+ }
28
+ interface ArgTypes {
29
+ name?: string;
30
+ value?: string | number | object;
31
+ disabled?: boolean;
32
+ }
33
+ export declare const Regular: Story<ArgTypes>;
package/dist/stories/ox-input-data.stories.js ADDED
@@ -0,0 +1,40 @@
1
+ import '../src/ox-input-data.js';
2
+ import { html } from 'lit';
3
+ export default {
4
+ title: 'ox-input-data',
5
+ component: 'ox-input-data',
6
+ argTypes: {
7
+ value: { control: 'text' },
8
+ name: { control: 'text' },
9
+ language: { control: 'select', options: ['javascript', 'sql', 'json'] },
10
+ disabled: { control: 'boolean' }
11
+ }
12
+ };
13
+ const Template = ({ name = 'code', value = '', disabled }) => html `
14
+ <link href="/themes/app-theme.css" rel="stylesheet" />
15
+ <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
16
+ <style>
17
+ body {
18
+ }
19
+ ox-input-data {
20
+ height: 300px;
21
+ }
22
+ </style>
23
+
24
+ <ox-input-data
25
+ @change=${(e) => {
26
+ const value = e.target.value;
27
+ console.log('value : ', value, typeof value);
28
+ }}
29
+ name=${name}
30
+ .value=${value}
31
+ ?disabled=${disabled}
32
+ >
33
+ </ox-input-data>
34
+ `;
35
+ export const Regular = Template.bind({});
36
+ Regular.args = {
37
+ name: 'data',
38
+ value: ''
39
+ };
40
+ //# sourceMappingURL=ox-input-data.stories.js.map
package/dist/stories/ox-input-data.stories.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-input-data.stories.js","sourceRoot":"","sources":["../../stories/ox-input-data.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE;QACvE,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;cAY/E,CAAC,CAAQ,EAAE,EAAE;IACrB,MAAM,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;IAClD,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,KAAK,EAAE,OAAO,KAAK,CAAC,CAAA;AAC9C,CAAC;WACM,IAAI;aACF,KAAK;gBACF,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,EAAE;CACV,CAAA","sourcesContent":["import '../src/ox-input-data.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-input-data',\n component: 'ox-input-data',\n argTypes: {\n value: { control: 'text' },\n name: { control: 'text' },\n language: { control: 'select', options: ['javascript', 'sql', 'json'] },\n disabled: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n name?: string\n value?: string | number | object\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled }: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n <style>\n body {\n }\n ox-input-data {\n height: 300px;\n }\n </style>\n\n <ox-input-data\n @change=${(e: Event) => {\n const value = (e.target as HTMLInputElement).value\n console.log('value : ', value, typeof value)\n }}\n name=${name}\n .value=${value}\n ?disabled=${disabled}\n >\n </ox-input-data>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'data',\n value: ''\n}\n"]}
package/dist/stories/ox-input-mass-fraction.stories.d.ts CHANGED
@@ -13,6 +13,9 @@ declare const _default: {
13
13
  defaultValue: {
14
14
  control: string;
15
15
  };
16
+ composable: {
17
+ control: string;
18
+ };
16
19
  disabled: {
17
20
  control: string;
18
21
  };
@@ -28,6 +31,7 @@ interface ArgTypes {
28
31
  name?: string;
29
32
  value?: object;
30
33
  defaultValue?: object;
34
+ composable?: boolean;
31
35
  disabled?: boolean;
32
36
  }
33
37
  export declare const Regular: Story<ArgTypes>;
package/dist/stories/ox-input-mass-fraction.stories.js CHANGED
@@ -7,10 +7,11 @@ export default {
7
7
  name: { control: 'text' },
8
8
  value: { control: 'object' },
9
9
  defaultValue: { control: 'object' },
10
+ composable: { control: 'boolean' },
10
11
  disabled: { control: 'boolean' }
11
12
  }
12
13
  };
13
- const Template = ({ name = 'mass-fraction', value = {}, defaultValue = {}, disabled }) => html `
14
+ const Template = ({ name = 'mass-fraction', value = {}, defaultValue = {}, composable = true, disabled }) => html `
14
15
  <link href="/themes/app-theme.css" rel="stylesheet" />
15
16
  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
16
17
  <style>
@@ -25,6 +26,7 @@ const Template = ({ name = 'mass-fraction', value = {}, defaultValue = {}, disab
25
26
  name=${name}
26
27
  .value=${value}
27
28
  .defaultValue=${defaultValue}
29
+ ?composable=${composable}
28
30
  ?disabled=${disabled}
29
31
  >
30
32
  </ox-input-mass-fraction>
@@ -32,7 +34,12 @@ const Template = ({ name = 'mass-fraction', value = {}, defaultValue = {}, disab
32
34
  export const Regular = Template.bind({});
33
35
  Regular.args = {
34
36
  name: 'mass-fraction',
35
- value: {},
37
+ value: {
38
+ H2O: 0.8,
39
+ N2O: 0.1,
40
+ CO2: 0.1
41
+ },
42
+ composable: true,
36
43
  defaultValue: {
37
44
  H2O: 0.8,
38
45
  N2O: 0.1,