@operato/input 2.0.0-beta.0 → 2.0.0-beta.2

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0-beta.2](https://github.com/hatiolab/operato/compare/v2.0.0-beta.1...v2.0.0-beta.2) (2024-06-04)
+
+
+### :bug: Bug Fix
+
+* search form theming styles ([a8924a4](https://github.com/hatiolab/operato/commit/a8924a440d249a226dee4df277d7009c629c9b18))
+
+
+
+## [2.0.0-beta.1](https://github.com/hatiolab/operato/compare/v2.0.0-beta.0...v2.0.0-beta.1) (2024-06-03)
+
+
+### :bug: Bug Fix
+
+* ox-input-direction ([0553490](https://github.com/hatiolab/operato/commit/05534907e4499eba5e557321dd93a16cec4eb291))
+* style for label in ox-input-mass-fraction ([5bc6ec1](https://github.com/hatiolab/operato/commit/5bc6ec116c9caadbdaeed13712979927cd86bdc0))
+
+
+
 ## [2.0.0-beta.0](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.158...v2.0.0-beta.0) (2024-06-01)
 
 **Note:** Version bump only for package @operato/input

package/dist/src/index.d.ts

@@ -27,3 +27,4 @@ export * from './ox-input-duration.js';
 export * from './ox-input-quantifier.js';
 export * from './ox-input-select-buttons.js';
 export * from './ox-input-textarea.js';
+export * from './ox-input-direction.js';

package/dist/src/index.js

@@ -27,4 +27,5 @@ export * from './ox-input-duration.js';
 export * from './ox-input-quantifier.js';
 export * from './ox-input-select-buttons.js';
 export * from './ox-input-textarea.js';
+export * from './ox-input-direction.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\n"]}

package/dist/src/ox-input-direction.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/web/icon/icon.js';
+import { OxFormField } from './ox-form-field';
+export declare class OxInputDirection extends OxFormField {
+    static styles: import("lit").CSSResult;
+    value?: string;
+    render(): import("lit-html").TemplateResult<1>;
+    onClick(e: MouseEvent): void;
+}

package/dist/src/ox-input-direction.js

@@ -0,0 +1,60 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { OxFormField } from './ox-form-field';
+let OxInputDirection = class OxInputDirection extends OxFormField {
+    static { this.styles = css `
+    :host {
+      --md-icon-size: 1.4em;
+    }
+
+    div {
+      display: flex;
+      justify-content: space-between;
+      max-width: 140px;
+    }
+
+    md-icon {
+      color: var(--md-sys-color-on-background);
+      background-color: var(--md-sys-color-background);
+    }
+
+    md-icon[selected] {
+      color: var(--md-sys-color-on-primary);
+      background-color: var(--md-sys-color-primary);
+    }
+  `; }
+    render() {
+        const value = this.value;
+        return html `
+      <div @click=${this.onClick.bind(this)}>
+        <md-icon ?selected=${value == 'W'} data-value="W">arrow_back</md-icon>
+        <md-icon ?selected=${value == 'N'} data-value="N">arrow_upward</md-icon>
+        <md-icon ?selected=${value == 'S'} data-value="S">arrow_downward</md-icon>
+        <md-icon ?selected=${value == 'E'} data-value="E">arrow_forward</md-icon>
+      </div>
+    `;
+    }
+    onClick(e) {
+        e.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        const target = e.target;
+        const value = target.getAttribute('data-value');
+        this.value = this.value === value ? undefined : value;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
+    }
+};
+__decorate([
+    property({ type: String })
+], OxInputDirection.prototype, "value", void 0);
+OxInputDirection = __decorate([
+    customElement('ox-input-direction')
+], OxInputDirection);
+export { OxInputDirection };
+//# sourceMappingURL=ox-input-direction.js.map

package/dist/src/ox-input-direction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-direction.js","sourceRoot":"","sources":["../../src/ox-input-direction.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGtC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;aACxC,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;GAoBlB,AApBY,CAoBZ;IAID,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;6BACd,KAAK,IAAI,GAAG;6BACZ,KAAK,IAAI,GAAG;6BACZ,KAAK,IAAI,GAAG;6BACZ,KAAK,IAAI,GAAG;;KAEpC,CAAA;IACH,CAAC;IAED,OAAO,CAAC,CAAa;QACnB,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAAiB,CAAA;QAClC,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,YAAY,CAAW,CAAA;QAEzD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAA;QAErD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;IACtG,CAAC;;AA5B2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAe;AAvB/B,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAoD5B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-direction')\nexport class OxInputDirection extends OxFormField {\n  static styles = css`\n    :host {\n      --md-icon-size: 1.4em;\n    }\n\n    div {\n      display: flex;\n      justify-content: space-between;\n      max-width: 140px;\n    }\n\n    md-icon {\n      color: var(--md-sys-color-on-background);\n      background-color: var(--md-sys-color-background);\n    }\n\n    md-icon[selected] {\n      color: var(--md-sys-color-on-primary);\n      background-color: var(--md-sys-color-primary);\n    }\n  `\n\n  @property({ type: String }) value?: string\n\n  render() {\n    const value = this.value\n\n    return html`\n      <div @click=${this.onClick.bind(this)}>\n        <md-icon ?selected=${value == 'W'} data-value=\"W\">arrow_back</md-icon>\n        <md-icon ?selected=${value == 'N'} data-value=\"N\">arrow_upward</md-icon>\n        <md-icon ?selected=${value == 'S'} data-value=\"S\">arrow_downward</md-icon>\n        <md-icon ?selected=${value == 'E'} data-value=\"E\">arrow_forward</md-icon>\n      </div>\n    `\n  }\n\n  onClick(e: MouseEvent) {\n    e.stopPropagation()\n\n    if (this.disabled) {\n      return\n    }\n\n    const target = e.target as Element\n    const value = target.getAttribute('data-value') as string\n\n    this.value = this.value === value ? undefined : value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}

package/dist/src/ox-input-mass-fraction.js

@@ -101,6 +101,7 @@ let OxInputMassFraction = class OxInputMassFraction extends OxFormField {
 
       label {
         text-align: center;
+        text-wrap: nowrap;
       }
 
       ox-select {

package/dist/src/ox-input-mass-fraction.js.map

@@ -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/web/icon/icon.js'\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        --md-icon-size: var(--fontsize-default, 14px);\n      }\n\n      [records] {\n        flex: 1;\n\n        overflow: overlay;\n\n        > 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        > [nofraction] {\n          display: block;\n          text-align: center;\n        }\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        &:focus,\n        &:hover,\n        &:active {\n          border: var(--button-active-border, 1px solid rgba(0, 0, 0, 0.2));\n          background-color: var(--button-background-focus-color);\n          color: var(--md-sys-color-primary-container);\n        }\n      }\n\n      input,\n      label,\n      ox-select {\n        border: 0;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n        font: var(--input-font);\n        color: var(--md-sys-color-on-primary-container);\n        min-width: 50px;\n      }\n\n      input,\n      label {\n        padding: var(--spacing-tiny);\n      }\n\n      label {\n        text-align: center;\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(--md-sys-color-on-primary-container);\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      [right-end] {\n        margin-left: auto;\n      }\n\n      [hidden] {\n        opacity: 0;\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        <div data-header>\n          <label data-key>성분</label>\n          <label data-value>체적비(몰분율)</label>\n          <button hidden><md-icon>remove</md-icon></button>\n          <button hidden><md-icon>remove</md-icon></button>\n          ${this.composable ? html` <button hidden><md-icon>remove</md-icon></button>` : nothing}\n        </div>\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                          <md-icon>remove</md-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                    <md-icon>arrow_upward</md-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                    <md-icon>arrow_downward</md-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                      <md-icon>add</md-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                <md-icon>settings_suggest</md-icon>\n              </button>\n              <button\n                title=\"normalize fraction\"\n                @click=${() => {\n                  this._normalize()\n                }}\n              >\n                <md-icon>repartition</md-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"]}
+{"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/web/icon/icon.js'\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        --md-icon-size: var(--fontsize-default, 14px);\n      }\n\n      [records] {\n        flex: 1;\n\n        overflow: overlay;\n\n        > 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        > [nofraction] {\n          display: block;\n          text-align: center;\n        }\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        &:focus,\n        &:hover,\n        &:active {\n          border: var(--button-active-border, 1px solid rgba(0, 0, 0, 0.2));\n          background-color: var(--button-background-focus-color);\n          color: var(--md-sys-color-primary-container);\n        }\n      }\n\n      input,\n      label,\n      ox-select {\n        border: 0;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n        font: var(--input-font);\n        color: var(--md-sys-color-on-primary-container);\n        min-width: 50px;\n      }\n\n      input,\n      label {\n        padding: var(--spacing-tiny);\n      }\n\n      label {\n        text-align: center;\n        text-wrap: nowrap;\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(--md-sys-color-on-primary-container);\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      [right-end] {\n        margin-left: auto;\n      }\n\n      [hidden] {\n        opacity: 0;\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        <div data-header>\n          <label data-key>성분</label>\n          <label data-value>체적비(몰분율)</label>\n          <button hidden><md-icon>remove</md-icon></button>\n          <button hidden><md-icon>remove</md-icon></button>\n          ${this.composable ? html` <button hidden><md-icon>remove</md-icon></button>` : nothing}\n        </div>\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                          <md-icon>remove</md-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                    <md-icon>arrow_upward</md-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                    <md-icon>arrow_downward</md-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                      <md-icon>add</md-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                <md-icon>settings_suggest</md-icon>\n              </button>\n              <button\n                title=\"normalize fraction\"\n                @click=${() => {\n                  this._normalize()\n                }}\n              >\n                <md-icon>repartition</md-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.js

@@ -208,7 +208,7 @@ let OxInputUnitNumber = class OxInputUnitNumber extends OxFormField {
         position: relative;
         margin-left: var(--margin-narrow);
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         min-width: 24px;
       }
 

package/dist/src/ox-input-unit-number.js.map

@@ -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 '@material/web/icon/icon.js'\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        --md-icon-size: var(--fontsize-default, 14px);\n      }\n\n      input {\n        flex: 1;\n        border: 0;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n        padding: var(--spacing-tiny);\n        font: var(--input-font);\n        color: var(--md-sys-color-on-primary-container);\n        min-width: 40px;\n      }\n\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--md-sys-color-on-primary-container);\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      md-icon {\n        color: var(--md-sys-color-on-primary-container, #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        <md-icon>expand_more</md-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"]}
+{"version":3,"file":"ox-input-unit-number.js","sourceRoot":"","sources":["../../src/ox-input-unit-number.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAIxD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE7C,MAAM,YAAY,GAA+E;IAC/F,EAAE,EAAE;QACF,EAAE,EAAE,OAAO;QACX,CAAC,EAAE,IAAI;QACP,GAAG,EAAE,KAAK;KACX;IACD,GAAG,EAAE;QACH,MAAM,EAAE,GAAG,GAAG,IAAI,CAAC,EAAE;KACtB;IACD,GAAG,EAAE;QACH,IAAI,EAAE,IAAI;QACV,GAAG,EAAE,CAAC,GAAG,EAAE;QACX,EAAE,EAAE,CAAC,GAAG,IAAI;QACZ,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC;QACpB,IAAI,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,EAAE,GAAG,GAAG,CAAC;KAC5B;IACD,CAAC,EAAE;QACD,EAAE,EAAE,IAAI;QACR,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,QAAQ;KACf;IACD,OAAO,EAAE;QACP,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,IAAI;KACf;IACD,EAAE,EAAE;QACF,GAAG,EAAE,OAAO;QACZ,GAAG,EAAE,IAAI;KACV;IACD,EAAE,EAAE;QACF,GAAG,EAAE,OAAO;QACZ,CAAC,EAAE,IAAI;QACP,EAAE,EAAE,OAAO;KACZ;IACD,OAAO,EAAE;QACP,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,CAAC;QACR,OAAO,EAAE,KAAK;QACd,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,KAAK;KACd;IACD,OAAO,EAAE;QACP,OAAO,EAAE,EAAE;QACX,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,MAAM;KAChB;IACD,CAAC,EAAE;QACD,EAAE,EAAE,KAAK;QACT,GAAG,EAAE,WAAW;KACjB;IACD,EAAE,EAAE;QACF,GAAG,EAAE,CAAC,GAAG,MAAM;QACf,GAAG,EAAE,CAAC,GAAG,MAAM;QACf,SAAS,EAAE,CAAC,GAAG,OAAO,GAAG,KAAK;QAC9B,GAAG,EAAE,CAAC,GAAG,OAAO;QAChB,GAAG,EAAE,CAAC,GAAG,IAAI;QACb,GAAG,EAAE,CAAC,GAAG,OAAO;QAChB,KAAK,EAAE,CAAC,GAAG,OAAO;QAClB,IAAI,EAAE,CAAC,GAAG,MAAM;KACjB;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE;QACZ,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,GAAG;QACb,UAAU,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI;KACxC;IACD,WAAW,EAAE;QACX,WAAW,EAAE,EAAE;QACf,UAAU,EAAE,IAAI;KACjB;IACD,SAAS,EAAE;QACT,UAAU,EAAE,CAAC,GAAG,IAAI;KACrB;IACD,YAAY,EAAE;QACZ,aAAa,EAAE,CAAC,GAAG,IAAI;KACxB;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,IAAI;QACd,SAAS,EAAE,EAAE;QACb,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,IAAI;QACd,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,OAAO;KACpB;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,IAAI;QACd,SAAS,EAAE,EAAE;QACb,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,IAAI;QACd,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,OAAO;KACpB;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,IAAI;QACd,SAAS,EAAE,EAAE;QACb,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,IAAI;QACd,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,OAAO;KACpB;IACD,CAAC,EAAE;QACD,EAAE,EAAE,CAAC,GAAG,IAAI;QACZ,EAAE,EAAE,CAAC,GAAG,OAAO;QACf,GAAG,EAAE,CAAC,GAAG,KAAK;QACd,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,IAAI;KACvB;IACD,CAAC,EAAE;QACD,EAAE,EAAE,CAAC,GAAG,IAAI;QACZ,EAAE,EAAE,CAAC,GAAG,OAAO;QACf,SAAS,EAAE,MAAM,GAAG,IAAI;QACxB,EAAE,EAAE,CAAC,GAAG,KAAK;KACd;IACD,MAAM,EAAE;QACN,OAAO,EAAE,CAAC,GAAG,IAAI;QACjB,OAAO,EAAE,CAAC,GAAG,KAAK;QAClB,QAAQ,EAAE,CAAC,GAAG,QAAQ;KACvB;IACD,MAAM,EAAE;QACN,OAAO,EAAE,CAAC,GAAG,IAAI;QACjB,OAAO,EAAE,CAAC,GAAG,KAAK,GAAG,IAAI;QACzB,QAAQ,EAAE,CAAC,GAAG,KAAK;QACnB,SAAS,EAAE,CAAC,GAAG,KAAK,GAAG,IAAI;KAC5B;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,CAAC,GAAG,IAAI;QACnB,UAAU,EAAE,CAAC,GAAG,KAAK;QACrB,WAAW,EAAE,CAAC,GAAG,KAAK,GAAG,IAAI;QAC7B,SAAS,EAAE,CAAC,GAAG,KAAK,GAAG,IAAI;KAC5B;IACD,OAAO,EAAE;QACP,QAAQ,EAAE,CAAC,GAAG,IAAI;QAClB,QAAQ,EAAE,CAAC,GAAG,GAAG;QACjB,SAAS,EAAE,CAAC,GAAG,GAAG,GAAG,IAAI;KAC1B;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,CAAC,GAAG,IAAI;QACnB,eAAe,EAAE,CAAC,GAAG,KAAK;KAC3B;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,CAAC;QACX,SAAS,EAAE,IAAI;QACf,UAAU,EAAE,CAAC;QACb,UAAU,EAAE,EAAE;QACd,CAAC,EAAE,EAAE;QACL,EAAE,EAAE,IAAI;KACT;IACD,SAAS,EAAE;QACT,UAAU,EAAE,IAAI;KACjB;IACD,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,EAAE;IACP,CAAC,EAAE;QACD,IAAI,EAAE,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,MAAM,CAAC;KAC7D;CACF,CAAA;AAGM,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;aACzC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsDF;KACF,AAxDY,CAwDZ;IASD,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAA;QAC9C,MAAM,KAAK,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA;QAE3F,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;sBACvB,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;kBAC/B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;oBAClC,IAAI,CAAC,QAAQ;;;;iBAIhB,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAM;YACR,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,aAA4B,CAAA;YAC7C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;gBACd,KAAK,EAAE,CAAC;gBACR,GAAG,EAAE,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,YAAY;aAC5C,CAAC,CAAA;QACJ,CAAC;;UAEC,QAAQ;;mBAEC,QAAQ;oBACP,CAAC,CAAc,EAAE,EAAE;YAC3B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAA;QAC1B,CAAC;;8BAEmB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO;YAC9C,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,qBAAqB,IAAI,IAAI,IAAI,QAAQ,CAAC;;;;KAIvE,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,gCAAgC;QAChC,kDAAkD;QAClD,IAAI;IACN,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAE9C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;IAED,WAAW,CAAC,QAAqC;QAC/C,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAM;QACR,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YACnC,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAA;QACzB,CAAC;QAED,MAAM,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAEhE,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,QAAQ,CAAA;YACpB,OAAM;QACR,CAAC;QAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE,CAAC;YACvC,OAAO,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,cAAc,IAAI,CAAC,CAAC,CAAA;QAC9D,CAAC,CAAC,wCAAwC;aAAM,CAAC;YAC/C,OAAO,IAAI,CAAC,qBAAqB,CAAC,QAAQ,EAAE,cAA2C,CAAC,CAAA;QAC1F,CAAC;IACH,CAAC;IAED,iBAAiB,CAAC,QAAqC,EAAE,aAAqB;QAC5E,OAAO,MAAM,CAAC,QAAQ,CAAC,GAAG,aAAa,CAAA;IACzC,CAAC;IAED,qBAAqB,CAAC,QAAqC,EAAE,kBAA6C;QACxG,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAA;IAChD,CAAC;IAED,UAAU,CAAC,SAAsC;QAC/C,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAM;QACR,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YACnC,OAAO,MAAM,CAAC,SAAS,CAAC,CAAA;QAC1B,CAAC;QAED,MAAM,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAEhE,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE,CAAC;YACvC,OAAO,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,IAAI,CAAC,CAAC,CAAA;QAC9D,CAAC,CAAC,wCAAwC;aAAM,CAAC;YAC/C,OAAO,IAAI,CAAC,oBAAoB,CAAC,SAAS,EAAE,cAA2C,CAAC,CAAA;QAC1F,CAAC;IACH,CAAC;IAED,gBAAgB,CAAC,SAAsC,EAAE,aAAqB;QAC5E,OAAO,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,aAAa,CAAA;IACjF,CAAC;IAED,oBAAoB,CAAC,SAAsC,EAAE,kBAA6C;QACxG,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAA;IACjD,CAAC;;AAzH2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAqB;AACG;IAAlD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;kDAAiB;AACf;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;mDAAkB;AAErD;IAAf,KAAK,CAAC,OAAO,CAAC;gDAAyB;AAChB;IAAvB,KAAK,CAAC,eAAe,CAAC;gDAAoB;AAhEhC,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAqL7B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\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        --md-icon-size: var(--fontsize-default, 14px);\n      }\n\n      input {\n        flex: 1;\n        border: 0;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n        padding: var(--spacing-tiny);\n        font: var(--input-font);\n        color: var(--md-sys-color-on-primary-container);\n        min-width: 40px;\n      }\n\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--md-sys-color-on-primary-container);\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, var(--md-sys-color-on-surface));\n        min-width: 24px;\n      }\n\n      md-icon {\n        color: var(--md-sys-color-on-primary-container, #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        <md-icon>expand_more</md-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/src/ox-input-work-shift.js

@@ -54,7 +54,7 @@ let OxInputWorkShift = class OxInputWorkShift extends OxFormField {
     }
     [data-header] span {
       font: var(--label-font);
-      color: var(--label-color);
+      color: var(--label-color, var(--md-sys-color-on-surface));
       text-transform: var(--label-text-transform);
       text-align: center;
     }

package/dist/src/ox-input-work-shift.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-work-shift.js","sourceRoot":"","sources":["../../src/ox-input-work-shift.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\n\ntype WorkShift = { name: string; fromDate: number; fromTime: string; toDate: number; toTime: string }\n\n/**\nwork-shift array value editor element\n\nExample:\n\n  <ox-input-work-shift\n    .value=${value}\n  </ox-input-work-shift>\n*/\n\n@localized()\n@customElement('ox-input-work-shift')\nexport class OxInputWorkShift extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n\n      width: 100%;\n      overflow: hidden;\n\n      --md-icon-size: var(--fontsize-default, 14px);\n    }\n\n    div {\n      display: flex;\n      flex-flow: row nowrap;\n      gap: var(--spacing-medium);\n    }\n\n    empty-element {\n      width: 34px;\n      text-align: center;\n    }\n\n    input,\n    select,\n    span {\n      flex: 1;\n    }\n    [data-header] {\n      background-color: rgba(var(--md-sys-color-on-primary-container-rgb), 0.05);\n      padding: var(--padding-narrow);\n    }\n    [data-header] span {\n      font: var(--label-font);\n      color: var(--label-color);\n      text-transform: var(--label-text-transform);\n      text-align: center;\n    }\n    [data-record] {\n      margin-bottom: var(--margin-narrow);\n    }\n    input,\n    select {\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: var(--spacing-tiny);\n      font: var(--input-font);\n      color: var(--md-sys-color-on-primary-container);\n\n      max-height: 35px;\n    }\n    input:focus,\n    select:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    input:required:invalid {\n      border: 1px dashed red;\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--border-radius);\n      background-color: var(--button-background-color);\n      padding: var(--padding-narrow) var(--padding-default);\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button:focus,\n    button:hover,\n    button:active {\n      border: var(--button-activ-border);\n      background-color: var(--button-background-focus-color);\n      color: var(--md-sys-color-primary-container);\n    }\n\n    [placeholder='value'] {\n      flex: 2;\n    }\n  `\n\n  @property({ type: Array }) value: WorkShift[] = []\n\n  private _changingNow: boolean = false\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const workshifts = this.value || []\n\n    return html`\n      <div data-header>\n        <span>${msg('name')}</span>\n        <span>${msg('from date')}</span>\n        <span>${msg('from time')}</span>\n        <span>${msg('to date')}</span>\n        <span>${msg('to time')}</span>\n        <empty-element></empty-element>\n      </div>\n\n      ${workshifts.map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-name .value=${item.name} required ?disabled=${this.disabled} />\n\n            <select data-from-date .value=${String(item.fromDate || 0)} ?disabled=${this.disabled}>\n              <option value=\"-1\">${msg('The day before')}</option>\n              <option value=\"0\">${msg('The day')}</option>\n              <option value=\"1\">${msg('The day after')}</option>\n            </select>\n            <input type=\"time\" data-from-time .value=${item.fromTime} step=\"1800\" required ?disabled=${this.disabled} />\n\n            <select data-to-date .value=${String(item.toDate || 0)} ?disabled=${this.disabled}>\n              <option value=\"-1\">${msg('The day before')}</option>\n              <option value=\"0\">${msg('The day')}</option>\n              <option value=\"1\">${msg('The day after')}</option>\n            </select>\n            <input type=\"time\" data-to-time .value=${item.toTime} step=\"1800\" required ?disabled=${this.disabled} />\n\n            <button\n              class=\"record-action\"\n              @click=${(e: Event) => this._delete(e)}\n              tabindex=\"-1\"\n              ?disabled=${this.disabled}\n            >\n              <md-icon>remove</md-icon>\n            </button>\n          </div>\n        `\n      )}\n      ${this.disabled\n        ? nothing\n        : html`\n            <div data-record-new>\n              <input type=\"text\" data-name />\n\n              <select data-from-date>\n                <option value=\"-1\">${msg('The day before')}</option>\n                <option value=\"0\" selected>${msg('The day')}</option>\n                <option value=\"+1\">${msg('The day after')}</option>\n              </select>\n              <input type=\"time\" data-from-time step=\"1800\" />\n\n              <select data-to-date>\n                <option value=\"-1\">${msg('The day before')}</option>\n                <option value=\"0\" selected>${msg('The day')}</option>\n                <option value=\"+1\">${msg('The day after')}</option>\n              </select>\n              <input type=\"time\" data-to-time step=\"1800\" />\n\n              <button class=\"record-action\" @click=${(e: Event) => this._add()} tabindex=\"-1\">\n                <md-icon>add</md-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 div = input.parentElement as HTMLDivElement\n\n    if (div.hasAttribute('data-record')) {\n      this._build()\n    } else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n      this._add()\n    }\n\n    this._changingNow = false\n  }\n\n  _build(includeNewRecord?: boolean) {\n    if (includeNewRecord) {\n      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]')\n    }\n\n    var value: WorkShift[] = []\n    for (var i = 0; i < records.length; i++) {\n      const record = records[i]\n\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n\n      const fromDate = (record.querySelector('[data-from-date]') as HTMLSelectElement).value\n      const fromTime = (record.querySelector('[data-from-time]') as HTMLInputElement).value\n      const toDate = (record.querySelector('[data-to-date]') as HTMLSelectElement).value\n      const toTime = (record.querySelector('[data-to-time]') as HTMLInputElement).value\n\n      if (!name) {\n        ;(record.querySelector('[data-name]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (!fromDate) {\n        ;(record.querySelector('[data-from-date]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (!fromTime) {\n        ;(record.querySelector('[data-from-time]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (!toDate) {\n        ;(record.querySelector('[data-to-date]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (!toTime) {\n        ;(record.querySelector('[data-to-time]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (name) {\n        value.push({\n          name,\n          fromDate: Number(fromDate),\n          fromTime,\n          toDate: Number(toDate),\n          toTime\n        })\n      }\n    }\n\n    this.value = value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\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; type: string }>\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i]\n      input.value = ''\n    }\n\n    inputs[0].focus()\n  }\n\n  _delete(e: Event) {\n    const record = (e.target as Element).parentElement\n\n    const dataName = record!.querySelector('[data-name]') as HTMLInputElement\n    dataName.name = ''\n\n    this._build()\n  }\n}\n"]}
+{"version":3,"file":"ox-input-work-shift.js","sourceRoot":"","sources":["../../src/ox-input-work-shift.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\n\ntype WorkShift = { name: string; fromDate: number; fromTime: string; toDate: number; toTime: string }\n\n/**\nwork-shift array value editor element\n\nExample:\n\n  <ox-input-work-shift\n    .value=${value}\n  </ox-input-work-shift>\n*/\n\n@localized()\n@customElement('ox-input-work-shift')\nexport class OxInputWorkShift extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n\n      width: 100%;\n      overflow: hidden;\n\n      --md-icon-size: var(--fontsize-default, 14px);\n    }\n\n    div {\n      display: flex;\n      flex-flow: row nowrap;\n      gap: var(--spacing-medium);\n    }\n\n    empty-element {\n      width: 34px;\n      text-align: center;\n    }\n\n    input,\n    select,\n    span {\n      flex: 1;\n    }\n    [data-header] {\n      background-color: rgba(var(--md-sys-color-on-primary-container-rgb), 0.05);\n      padding: var(--padding-narrow);\n    }\n    [data-header] span {\n      font: var(--label-font);\n      color: var(--label-color, var(--md-sys-color-on-surface));\n      text-transform: var(--label-text-transform);\n      text-align: center;\n    }\n    [data-record] {\n      margin-bottom: var(--margin-narrow);\n    }\n    input,\n    select {\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: var(--spacing-tiny);\n      font: var(--input-font);\n      color: var(--md-sys-color-on-primary-container);\n\n      max-height: 35px;\n    }\n    input:focus,\n    select:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    input:required:invalid {\n      border: 1px dashed red;\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--border-radius);\n      background-color: var(--button-background-color);\n      padding: var(--padding-narrow) var(--padding-default);\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button:focus,\n    button:hover,\n    button:active {\n      border: var(--button-activ-border);\n      background-color: var(--button-background-focus-color);\n      color: var(--md-sys-color-primary-container);\n    }\n\n    [placeholder='value'] {\n      flex: 2;\n    }\n  `\n\n  @property({ type: Array }) value: WorkShift[] = []\n\n  private _changingNow: boolean = false\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const workshifts = this.value || []\n\n    return html`\n      <div data-header>\n        <span>${msg('name')}</span>\n        <span>${msg('from date')}</span>\n        <span>${msg('from time')}</span>\n        <span>${msg('to date')}</span>\n        <span>${msg('to time')}</span>\n        <empty-element></empty-element>\n      </div>\n\n      ${workshifts.map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-name .value=${item.name} required ?disabled=${this.disabled} />\n\n            <select data-from-date .value=${String(item.fromDate || 0)} ?disabled=${this.disabled}>\n              <option value=\"-1\">${msg('The day before')}</option>\n              <option value=\"0\">${msg('The day')}</option>\n              <option value=\"1\">${msg('The day after')}</option>\n            </select>\n            <input type=\"time\" data-from-time .value=${item.fromTime} step=\"1800\" required ?disabled=${this.disabled} />\n\n            <select data-to-date .value=${String(item.toDate || 0)} ?disabled=${this.disabled}>\n              <option value=\"-1\">${msg('The day before')}</option>\n              <option value=\"0\">${msg('The day')}</option>\n              <option value=\"1\">${msg('The day after')}</option>\n            </select>\n            <input type=\"time\" data-to-time .value=${item.toTime} step=\"1800\" required ?disabled=${this.disabled} />\n\n            <button\n              class=\"record-action\"\n              @click=${(e: Event) => this._delete(e)}\n              tabindex=\"-1\"\n              ?disabled=${this.disabled}\n            >\n              <md-icon>remove</md-icon>\n            </button>\n          </div>\n        `\n      )}\n      ${this.disabled\n        ? nothing\n        : html`\n            <div data-record-new>\n              <input type=\"text\" data-name />\n\n              <select data-from-date>\n                <option value=\"-1\">${msg('The day before')}</option>\n                <option value=\"0\" selected>${msg('The day')}</option>\n                <option value=\"+1\">${msg('The day after')}</option>\n              </select>\n              <input type=\"time\" data-from-time step=\"1800\" />\n\n              <select data-to-date>\n                <option value=\"-1\">${msg('The day before')}</option>\n                <option value=\"0\" selected>${msg('The day')}</option>\n                <option value=\"+1\">${msg('The day after')}</option>\n              </select>\n              <input type=\"time\" data-to-time step=\"1800\" />\n\n              <button class=\"record-action\" @click=${(e: Event) => this._add()} tabindex=\"-1\">\n                <md-icon>add</md-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 div = input.parentElement as HTMLDivElement\n\n    if (div.hasAttribute('data-record')) {\n      this._build()\n    } else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n      this._add()\n    }\n\n    this._changingNow = false\n  }\n\n  _build(includeNewRecord?: boolean) {\n    if (includeNewRecord) {\n      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]')\n    }\n\n    var value: WorkShift[] = []\n    for (var i = 0; i < records.length; i++) {\n      const record = records[i]\n\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n\n      const fromDate = (record.querySelector('[data-from-date]') as HTMLSelectElement).value\n      const fromTime = (record.querySelector('[data-from-time]') as HTMLInputElement).value\n      const toDate = (record.querySelector('[data-to-date]') as HTMLSelectElement).value\n      const toTime = (record.querySelector('[data-to-time]') as HTMLInputElement).value\n\n      if (!name) {\n        ;(record.querySelector('[data-name]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (!fromDate) {\n        ;(record.querySelector('[data-from-date]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (!fromTime) {\n        ;(record.querySelector('[data-from-time]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (!toDate) {\n        ;(record.querySelector('[data-to-date]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (!toTime) {\n        ;(record.querySelector('[data-to-time]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (name) {\n        value.push({\n          name,\n          fromDate: Number(fromDate),\n          fromTime,\n          toDate: Number(toDate),\n          toTime\n        })\n      }\n    }\n\n    this.value = value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\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; type: string }>\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i]\n      input.value = ''\n    }\n\n    inputs[0].focus()\n  }\n\n  _delete(e: Event) {\n    const record = (e.target as Element).parentElement\n\n    const dataName = record!.querySelector('[data-name]') as HTMLInputElement\n    dataName.name = ''\n\n    this._build()\n  }\n}\n"]}

package/dist/stories/ox-input-direction.stories.d.ts

@@ -0,0 +1,34 @@
+import '../src/ox-input-direction.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        value: {
+            control: string;
+        };
+        name: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        theme: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    name?: string;
+    value?: object | string;
+    disabled?: boolean;
+    theme?: string;
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-input-direction.stories.js

@@ -0,0 +1,70 @@
+import '../src/ox-input-direction.js';
+import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+export default {
+    title: 'ox-input-direction',
+    component: 'ox-input-direction',
+    argTypes: {
+        value: { control: 'object' },
+        name: { control: 'text' },
+        disabled: { control: 'boolean' },
+        theme: { control: 'select', options: ['light', 'dark'] }
+    }
+};
+const Template = ({ name = 'options', value, disabled, theme = 'light' }) => html `
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+  </style>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container">
+    <ox-input-direction
+      @change=${(e) => {
+    console.log(e.target.value);
+}}
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-direction>
+  </div>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    name: 'options',
+    value: ''
+};
+//# sourceMappingURL=ox-input-direction.stories.js.map

package/dist/stories/ox-input-direction.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-direction.stories.js","sourceRoot":"","sources":["../../stories/ox-input-direction.stories.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtG,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;;gBAKxB,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,EAAE;CACV,CAAA","sourcesContent":["import '../src/ox-input-direction.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-input-direction',\n  component: 'ox-input-direction',\n  argTypes: {\n    value: { control: 'object' },\n    name: { control: 'text' },\n    disabled: { control: 'boolean' },\n    theme: { control: 'select', options: ['light', 'dark'] }\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?: object | string\n  disabled?: boolean\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'options', value, disabled, theme = 'light' }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"container\">\n    <ox-input-direction\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n    </ox-input-direction>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'options',\n  value: ''\n}\n"]}