@operato/input 9.0.0-beta.10 → 9.0.0-beta.14

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.0.0-beta.14](https://github.com/hatiolab/operato/compare/v9.0.0-beta.13...v9.0.0-beta.14) (2025-01-27)
+
+
+### :rocket: New Features
+
+* module property-panel ([d78e4cf](https://github.com/hatiolab/operato/commit/d78e4cf7080b95fa74e61b42094b9f3f59f1409b))
+
+
+
+## [9.0.0-beta.11](https://github.com/hatiolab/operato/compare/v9.0.0-beta.10...v9.0.0-beta.11) (2025-01-25)
+
+
+### :bug: Bug Fix
+
+* tsconfig option useDefineForClassFields=false ([0d77c0a](https://github.com/hatiolab/operato/commit/0d77c0aa620282c65b3c05f8e0b559e82836b6ab))
+
+
+
 ## [9.0.0-beta.10](https://github.com/hatiolab/operato/compare/v9.0.0-beta.9...v9.0.0-beta.10) (2025-01-25)
 
 

package/dist/src/index.d.ts

@@ -14,13 +14,10 @@ export * from './ox-input-barcode.js';
 export * from './ox-input-code.js';
 export * from './ox-input-color.js';
 export * from './ox-input-multiple-colors.js';
-export * from './ox-input-color-stops.js';
-export * from './ox-input-color-gradient.js';
 export * from './ox-input-file.js';
 export * from './ox-input-image.js';
 export * from './ox-input-value-ranges.js';
 export * from './ox-input-value-map.js';
-export * from './ox-input-table.js';
 export * from './ox-input-scene-component-id.js';
 export * from './ox-input-crontab.js';
 export * from './ox-input-partition-keys.js';

package/dist/src/index.js

@@ -14,13 +14,10 @@ export * from './ox-input-barcode.js';
 export * from './ox-input-code.js';
 export * from './ox-input-color.js';
 export * from './ox-input-multiple-colors.js';
-export * from './ox-input-color-stops.js';
-export * from './ox-input-color-gradient.js';
 export * from './ox-input-file.js';
 export * from './ox-input-image.js';
 export * from './ox-input-value-ranges.js';
 export * from './ox-input-value-map.js';
-export * from './ox-input-table.js';
 export * from './ox-input-scene-component-id.js';
 export * from './ox-input-crontab.js';
 export * from './ox-input-partition-keys.js';

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,sBAAsB,CAAA;AACpC,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;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA;AACpC,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-switch.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'\nexport * from './ox-input-table-column-config.js'\nexport * from './ox-input-search.js'\nexport * from './ox-input-signature.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,sBAAsB,CAAA;AACpC,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,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,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;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA;AACpC,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-switch.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-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-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'\nexport * from './ox-input-table-column-config.js'\nexport * from './ox-input-search.js'\nexport * from './ox-input-signature.js'\n"]}

package/dist/src/ox-buttons-radio.js

@@ -21,7 +21,17 @@ Example:
   </ox-buttons-radio>
 */
 let OxButtonsRadio = class OxButtonsRadio extends OxFormField {
-    static styles = [
+    constructor() {
+        super(...arguments);
+        /**
+         * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.
+         */
+        this.value = null;
+        this._slotObserver = new MutationObserver(mutations => {
+            this._onChanged();
+        });
+    }
+    static { this.styles = [
         css `
       :host {
         display: inline-block;
@@ -55,15 +65,7 @@ let OxButtonsRadio = class OxButtonsRadio extends OxFormField {
         --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);
       }
     `
-    ];
-    /**
-     * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.
-     */
-    value = null;
-    mandatory;
-    _slotObserver = new MutationObserver(mutations => {
-        this._onChanged();
-    });
+    ]; }
     render() {
         return html ` <slot @click=${(e) => this._onTapButton(e)}></slot> `;
     }

package/dist/src/ox-buttons-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.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, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n/**\n여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.\n\nExample:\n\n  <ox-buttons-radio\n    class=\"light\"\n    @change=${(e: CustomEvent) => console.log(e.detail)}\n    value=\"1\"\n  >\n    <md-outlined-button data-value=\"1\" ?active=${value == '1'}>Option 1</md-outlined-button>\n    <md-outlined-button data-value=\"2\" ?active=${value == '2'}>Option 2</md-outlined-button>\n    <md-outlined-button data-value=\"3\" ?active=${value == '3'}>Option 3</md-outlined-button>\n  </ox-buttons-radio>\n*/\n@customElement('ox-buttons-radio')\nexport class OxButtonsRadio extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n        background-color: var(--ox-buttons-radio-background-color, var(--md-sys-color-surface));\n\n        --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);\n        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-outlined-button-container-height: var(--form-element-height-medium);\n        --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-outlined-button-leading-space: var(--spacing-large);\n        --md-outlined-button-trailing-space: var(--spacing-large);\n        --md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);\n        --md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);\n        --md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);\n\n        --md-filled-button-container-color: var(--md-sys-color-primary);\n        --md-filled-button-label-text-color: var(--md-sys-color-primary-container);\n        --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-filled-button-container-height: var(--form-element-height-medium);\n        --md-filled-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-filled-button-leading-space: var(--spacing-large);\n        --md-filled-button-trailing-space: var(--spacing-large);\n        --md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);\n        --md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);\n        --md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);\n\n        --md-text-button-container-height: var(--form-element-height-medium);\n        --md-text-button-container-shape: var(--md-sys-shape-corner-small);\n\n        --md-elevated-button-container-height: var(--form-element-height-medium);\n        --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);\n      }\n    `\n  ]\n\n  /**\n   * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.\n   */\n  @property({ type: Object }) value: Object | null = null\n  @property({ type: Boolean }) mandatory!: boolean\n\n  @state() _slotObserver: MutationObserver = new MutationObserver(mutations => {\n    this._onChanged()\n  })\n\n  render() {\n    return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this._slotObserver?.observe(this, { childList: true })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this._slotObserver?.disconnect()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('value') && this._onChanged()\n  }\n\n  get buttons() {\n    return Array.from(this.querySelectorAll('*'))\n  }\n\n  _onChanged() {\n    this.buttons.forEach(button => {\n      if (this.value === button.getAttribute('data-value')) {\n        button.setAttribute('active', '')\n      } else {\n        button.removeAttribute('active')\n      }\n    })\n  }\n\n  _onTapButton(e: Event) {\n    var target = e.target as HTMLElement\n    target = target.closest('[data-value]') as HTMLElement\n\n    if (!target || target === this) {\n      return\n    }\n\n    var old = this.value\n\n    if (!this.mandatory) {\n      if (!target.getAttribute('active')) {\n        this.value = target.getAttribute('data-value')\n        target.setAttribute('active', '')\n      } else {\n        this.value = null\n        target.removeAttribute('active')\n      }\n    } else {\n      this.value = target.getAttribute('data-value')\n      target.setAttribute('active', '')\n    }\n\n    if (old !== this.value) {\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: this.value\n        })\n      )\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.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, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n/**\n여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.\n\nExample:\n\n  <ox-buttons-radio\n    class=\"light\"\n    @change=${(e: CustomEvent) => console.log(e.detail)}\n    value=\"1\"\n  >\n    <md-outlined-button data-value=\"1\" ?active=${value == '1'}>Option 1</md-outlined-button>\n    <md-outlined-button data-value=\"2\" ?active=${value == '2'}>Option 2</md-outlined-button>\n    <md-outlined-button data-value=\"3\" ?active=${value == '3'}>Option 3</md-outlined-button>\n  </ox-buttons-radio>\n*/\n@customElement('ox-buttons-radio')\nexport class OxButtonsRadio extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n        background-color: var(--ox-buttons-radio-background-color, var(--md-sys-color-surface));\n\n        --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);\n        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-outlined-button-container-height: var(--form-element-height-medium);\n        --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-outlined-button-leading-space: var(--spacing-large);\n        --md-outlined-button-trailing-space: var(--spacing-large);\n        --md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);\n        --md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);\n        --md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);\n\n        --md-filled-button-container-color: var(--md-sys-color-primary);\n        --md-filled-button-label-text-color: var(--md-sys-color-primary-container);\n        --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-filled-button-container-height: var(--form-element-height-medium);\n        --md-filled-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-filled-button-leading-space: var(--spacing-large);\n        --md-filled-button-trailing-space: var(--spacing-large);\n        --md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);\n        --md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);\n        --md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);\n\n        --md-text-button-container-height: var(--form-element-height-medium);\n        --md-text-button-container-shape: var(--md-sys-shape-corner-small);\n\n        --md-elevated-button-container-height: var(--form-element-height-medium);\n        --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);\n      }\n    `\n  ]\n\n  /**\n   * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.\n   */\n  @property({ type: Object }) value: Object | null = null\n  @property({ type: Boolean }) mandatory!: boolean\n\n  @state() _slotObserver: MutationObserver = new MutationObserver(mutations => {\n    this._onChanged()\n  })\n\n  render() {\n    return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this._slotObserver?.observe(this, { childList: true })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this._slotObserver?.disconnect()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('value') && this._onChanged()\n  }\n\n  get buttons() {\n    return Array.from(this.querySelectorAll('*'))\n  }\n\n  _onChanged() {\n    this.buttons.forEach(button => {\n      if (this.value === button.getAttribute('data-value')) {\n        button.setAttribute('active', '')\n      } else {\n        button.removeAttribute('active')\n      }\n    })\n  }\n\n  _onTapButton(e: Event) {\n    var target = e.target as HTMLElement\n    target = target.closest('[data-value]') as HTMLElement\n\n    if (!target || target === this) {\n      return\n    }\n\n    var old = this.value\n\n    if (!this.mandatory) {\n      if (!target.getAttribute('active')) {\n        this.value = target.getAttribute('data-value')\n        target.setAttribute('active', '')\n      } else {\n        this.value = null\n        target.removeAttribute('active')\n      }\n    } else {\n      this.value = target.getAttribute('data-value')\n      target.setAttribute('active', '')\n    }\n\n    if (old !== this.value) {\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: this.value\n        })\n      )\n    }\n  }\n}\n"]}

package/dist/src/ox-checkbox.js

@@ -9,7 +9,15 @@ import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
 let OxCheckbox = class OxCheckbox extends OxFormField {
-    static styles = [
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+        this.indeterminatable = false;
+        this.indeterminate = false;
+        this.left = false;
+        this._hasInner = !!this.innerHTML.trim().length;
+    }
+    static { this.styles = [
         css `
       div {
         display: flex;
@@ -66,12 +74,7 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
         font-weight: 700;
       }
     `
-    ];
-    checked = false;
-    indeterminatable = false;
-    indeterminate = false;
-    left = false;
-    _hasInner = !!this.innerHTML.trim().length;
+    ]; }
     render() {
         return html `
       <div ?disabled=${this.disabled} @click=${this.onClick}>

package/dist/src/ox-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\n/*\n  This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n  static styles = [\n    css`\n      div {\n        display: flex;\n        gap: var(--input-intra-gap, 7px);\n\n        align-items: center;\n        cursor: pointer;\n      }\n\n      [disabled] {\n        opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n        cursor: auto;\n      }\n\n      .checkbox {\n        display: flex;\n        border-radius: var(--ox-checkbox-border-radius, 4px);\n        background-color: var(--ox-checkbox-unchecked-background-color, var(--md-sys-color-surface-container-lowest));\n        border: var(--ox-checkbox-unchecked-border, 1px solid var(--md-sys-color-outline));\n        width: var(--ox-checkbox-size, 15px);\n        height: var(--ox-checkbox-size, 15px);\n        align-items: center;\n        justify-content: center;\n      }\n\n      :host([checked]) .checkbox {\n        background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-primary));\n      }\n\n      path {\n        fill: var(--ox-checkbox-unchecked-color, var(--md-sys-color-surface-container-lowest));\n      }\n\n      :host([indeterminate]) line {\n        stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));\n      }\n\n      :host([checked]) path {\n        fill: var(--ox-checkbox-checked-color, var(--md-sys-color-on-primary));\n      }\n\n      svg {\n        width: var(--ox-checkbox-size, 15px);\n        height: var(--ox-checkbox-size, 15px);\n      }\n\n      .label {\n        color: var(--ox-checkbox-label-color, var(--md-sys-color-on-surface));\n        line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);\n      }\n\n      :host([checked]) .label {\n        color: var(ox-checkbox-label-checked-color, var(--md-sys-color-on-surface));\n        font-weight: 700;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false\n  @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n  @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\n  @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false\n\n  @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n  render() {\n    return html`\n      <div ?disabled=${this.disabled} @click=${this.onClick}>\n        ${this._hasInner && this.left\n          ? html` <span label>\n              <slot></slot>\n            </span>`\n          : ''}\n        <a href=\"#\" @click=${(e: Event) => e.preventDefault()} class=\"checkbox\">\n          ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}\n        </a>\n        ${this._hasInner && !this.left\n          ? html` <span class=\"label\">\n              <slot></slot>\n            </span>`\n          : ''}\n      </div>\n    `\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', this.onKeyDown)\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    this.setAttribute('tabindex', '-1')\n    this.removeEventListener('keydown', this.onKeyDown)\n  }\n\n  onClick() {\n    if (this.disabled) {\n      return\n    }\n\n    if (!this.indeterminatable) {\n      this.indeterminate = false\n      this.checked = !this.checked\n    } else {\n      if (this.indeterminate) {\n        this.indeterminate = false\n        this.checked = true\n      } else if (this.checked) {\n        this.indeterminate = false\n        this.checked = false\n      } else {\n        this.indeterminate = true\n        this.checked = undefined\n      }\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.checked\n      })\n    )\n  }\n\n  get checkedIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n      </svg>\n    `\n  }\n\n  get uncheckedIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n      </svg>\n    `\n  }\n\n  get indeterminateIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    `\n  }\n\n  onKeyDown(e: KeyboardEvent) {\n    e.preventDefault()\n\n    if (e.key === ' ' || e.key == 'Spacebar') {\n      this.onClick()\n    }\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')\n  }\n}\n"]}
+{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\n/*\n  This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n  static styles = [\n    css`\n      div {\n        display: flex;\n        gap: var(--input-intra-gap, 7px);\n\n        align-items: center;\n        cursor: pointer;\n      }\n\n      [disabled] {\n        opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n        cursor: auto;\n      }\n\n      .checkbox {\n        display: flex;\n        border-radius: var(--ox-checkbox-border-radius, 4px);\n        background-color: var(--ox-checkbox-unchecked-background-color, var(--md-sys-color-surface-container-lowest));\n        border: var(--ox-checkbox-unchecked-border, 1px solid var(--md-sys-color-outline));\n        width: var(--ox-checkbox-size, 15px);\n        height: var(--ox-checkbox-size, 15px);\n        align-items: center;\n        justify-content: center;\n      }\n\n      :host([checked]) .checkbox {\n        background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-primary));\n      }\n\n      path {\n        fill: var(--ox-checkbox-unchecked-color, var(--md-sys-color-surface-container-lowest));\n      }\n\n      :host([indeterminate]) line {\n        stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));\n      }\n\n      :host([checked]) path {\n        fill: var(--ox-checkbox-checked-color, var(--md-sys-color-on-primary));\n      }\n\n      svg {\n        width: var(--ox-checkbox-size, 15px);\n        height: var(--ox-checkbox-size, 15px);\n      }\n\n      .label {\n        color: var(--ox-checkbox-label-color, var(--md-sys-color-on-surface));\n        line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);\n      }\n\n      :host([checked]) .label {\n        color: var(ox-checkbox-label-checked-color, var(--md-sys-color-on-surface));\n        font-weight: 700;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false\n  @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n  @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\n  @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false\n\n  @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n  render() {\n    return html`\n      <div ?disabled=${this.disabled} @click=${this.onClick}>\n        ${this._hasInner && this.left\n          ? html` <span label>\n              <slot></slot>\n            </span>`\n          : ''}\n        <a href=\"#\" @click=${(e: Event) => e.preventDefault()} class=\"checkbox\">\n          ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}\n        </a>\n        ${this._hasInner && !this.left\n          ? html` <span class=\"label\">\n              <slot></slot>\n            </span>`\n          : ''}\n      </div>\n    `\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', this.onKeyDown)\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    this.setAttribute('tabindex', '-1')\n    this.removeEventListener('keydown', this.onKeyDown)\n  }\n\n  onClick() {\n    if (this.disabled) {\n      return\n    }\n\n    if (!this.indeterminatable) {\n      this.indeterminate = false\n      this.checked = !this.checked\n    } else {\n      if (this.indeterminate) {\n        this.indeterminate = false\n        this.checked = true\n      } else if (this.checked) {\n        this.indeterminate = false\n        this.checked = false\n      } else {\n        this.indeterminate = true\n        this.checked = undefined\n      }\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.checked\n      })\n    )\n  }\n\n  get checkedIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n      </svg>\n    `\n  }\n\n  get uncheckedIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n      </svg>\n    `\n  }\n\n  get indeterminateIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    `\n  }\n\n  onKeyDown(e: KeyboardEvent) {\n    e.preventDefault()\n\n    if (e.key === ' ' || e.key == 'Spacebar') {\n      this.onClick()\n    }\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')\n  }\n}\n"]}

package/dist/src/ox-form-field.js

@@ -5,11 +5,11 @@ import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 export class OxFormField extends LitElement {
-    name;
-    disabled;
-    value;
-    _form = null;
-    _formdataEventHandler = null;
+    constructor() {
+        super(...arguments);
+        this._form = null;
+        this._formdataEventHandler = null;
+    }
     connectedCallback() {
         super.connectedCallback();
         if (this.name) {

package/dist/src/ox-form-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-form-field.js","sourceRoot":"","sources":["../../src/ox-form-field.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,OAAgB,WAAY,SAAQ,UAAU;IACL,IAAI,CAAS;IAC7B,QAAQ,CAAU;IACnC,KAAK,CAAM;IAEb,KAAK,GAA2B,IAAI,CAAA;IACpC,qBAAqB,GAAyB,IAAI,CAAA;IAEnD,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;YACjC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;gBAC5E,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAA;YACrE,CAAC;QACH,CAAC;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAsB,CAAC,CAAA;YACvE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YACjB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAA;QACnC,CAAC;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAM;QAEtB,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAA;QACvB,IAAI,CAAC,CAAC,MAAM,YAAY,KAAK,CAAC,EAAE,CAAC;YAC/B,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACvB,CAAC;QAED,MAAM,CAAC,OAAO,CAAC,CAAC,KAAU,EAAE,EAAE;YAC5B,QAAQ,CAAC,MAAM,CACb,IAAI,CAAC,IAAK,EACV,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CACvG,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AA5C8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;yCAAc;AAC7B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAmB;AACnC;IAAX,QAAQ,EAAE;0CAAY","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nexport abstract class OxFormField extends LitElement {\n  @property({ type: String, attribute: true }) name?: string\n  @property({ type: Boolean }) disabled?: boolean\n  @property() value?: any\n\n  protected _form: HTMLFormElement | null = null\n  protected _formdataEventHandler: EventListener | null = null\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n\n    if (this.name) {\n      this._form = this.closest('form')\n      if (this._form) {\n        this._formdataEventHandler = this.appendFormData.bind(this) as EventListener\n        this._form.addEventListener('formdata', this._formdataEventHandler)\n      }\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    if (this._form) {\n      this._form.removeEventListener('formdata', this._formdataEventHandler!)\n      this._form = null\n      this._formdataEventHandler = null\n    }\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    if (!this.name) return\n\n    var values = this.value\n    if (!(values instanceof Array)) {\n      values = [this.value]\n    }\n\n    values.forEach((value: any) => {\n      formData.append(\n        this.name!,\n        typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n      )\n    })\n  }\n}\n"]}
+{"version":3,"file":"ox-form-field.js","sourceRoot":"","sources":["../../src/ox-form-field.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAKY,UAAK,GAA2B,IAAI,CAAA;QACpC,0BAAqB,GAAyB,IAAI,CAAA;IAuC9D,CAAC;IArCU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;YACjC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;gBAC5E,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAA;YACrE,CAAC;QACH,CAAC;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAsB,CAAC,CAAA;YACvE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YACjB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAA;QACnC,CAAC;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAM;QAEtB,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAA;QACvB,IAAI,CAAC,CAAC,MAAM,YAAY,KAAK,CAAC,EAAE,CAAC;YAC/B,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACvB,CAAC;QAED,MAAM,CAAC,OAAO,CAAC,CAAC,KAAU,EAAE,EAAE;YAC5B,QAAQ,CAAC,MAAM,CACb,IAAI,CAAC,IAAK,EACV,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CACvG,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AA5C8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;yCAAc;AAC7B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAmB;AACnC;IAAX,QAAQ,EAAE;0CAAY","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nexport abstract class OxFormField extends LitElement {\n  @property({ type: String, attribute: true }) name?: string\n  @property({ type: Boolean }) disabled?: boolean\n  @property() value?: any\n\n  protected _form: HTMLFormElement | null = null\n  protected _formdataEventHandler: EventListener | null = null\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n\n    if (this.name) {\n      this._form = this.closest('form')\n      if (this._form) {\n        this._formdataEventHandler = this.appendFormData.bind(this) as EventListener\n        this._form.addEventListener('formdata', this._formdataEventHandler)\n      }\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    if (this._form) {\n      this._form.removeEventListener('formdata', this._formdataEventHandler!)\n      this._form = null\n      this._formdataEventHandler = null\n    }\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    if (!this.name) return\n\n    var values = this.value\n    if (!(values instanceof Array)) {\n      values = [this.value]\n    }\n\n    values.forEach((value: any) => {\n      formData.append(\n        this.name!,\n        typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n      )\n    })\n  }\n}\n"]}

package/dist/src/ox-input-3axis.js

@@ -7,7 +7,7 @@ import { customElement } from 'lit/decorators.js';
 import { localized } from '@lit/localize';
 import { OxFormField } from './ox-form-field.js';
 let OxInput3Axis = class OxInput3Axis extends OxFormField {
-    static styles = [
+    static { this.styles = [
         css `
       :host {
         display: flex;
@@ -33,7 +33,7 @@ let OxInput3Axis = class OxInput3Axis extends OxFormField {
         border-color: var(--md-sys-color-secondary-fixed-dim);
       }
     `
-    ];
+    ]; }
     firstUpdated() {
         this.renderRoot.addEventListener('change', this._onChange.bind(this));
     }

package/dist/src/ox-input-3axis.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-3axis.js","sourceRoot":"","sources":["../../src/ox-input-3axis.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAIzC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAC3C,MAAM,CAAC,MAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;KAwBF;KACF,CAAA;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,EAAE,GAAG,OAAO,CAAC,EAAqB,CAAA;QACtC,IAAI,KAAK,GAAG,MAAM,CAAE,OAA4B,CAAC,KAAK,CAAC,CAAA;QAEvD,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,EAAE,CAAC,EAAE,KAAK;SACZ,CAAA;QAED,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,MAAM;QACJ,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAC9B,OAAO,IAAI,CAAA;2DAC4C,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;2DACpC,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;2DACpC,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;KAC1F,CAAA;IACH,CAAC;;AA9DU,YAAY;IAFxB,SAAS,EAAE;IACX,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA+DxB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@localized()\n@customElement('ox-input-3axis')\nexport class OxInput3Axis extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n      }\n\n      input {\n        box-sizing: border-box;\n        padding: 0 var(--spacing-small);\n        height: var(--form-element-height-medium);\n        border: 1px solid var(--md-sys-color-outline);\n        border-radius: var(--md-sys-shape-corner-small);\n        background-color: var(--md-sys-color-on-primary);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n      }\n\n      input:not(:last-child) {\n        margin-right: var(--margin-default, 2px);\n      }\n\n      input:focus {\n        outline: none;\n        border-color: var(--md-sys-color-secondary-fixed-dim);\n      }\n    `\n  ]\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  _onChange(e: Event) {\n    e.stopPropagation()\n    e.preventDefault()\n\n    var element = e.target as HTMLElement\n    var id = element.id as 'x' | 'y' | 'z'\n    var value = Number((element as HTMLInputElement).value)\n\n    this.value = {\n      ...this.value,\n      [id]: value\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  render() {\n    const { x, y, z } = this.value\n    return html`\n      <input type=\"number\" id=\"x\" placeholder=\"X\" .value=${String(x)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"y\" placeholder=\"Y\" .value=${String(y)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"z\" placeholder=\"Z\" .value=${String(z)} ?disabled=${this.disabled} />\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-input-3axis.js","sourceRoot":"","sources":["../../src/ox-input-3axis.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAIzC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;KAwBF;KACF,AA1BY,CA0BZ;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,EAAE,GAAG,OAAO,CAAC,EAAqB,CAAA;QACtC,IAAI,KAAK,GAAG,MAAM,CAAE,OAA4B,CAAC,KAAK,CAAC,CAAA;QAEvD,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,EAAE,CAAC,EAAE,KAAK;SACZ,CAAA;QAED,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,MAAM;QACJ,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAC9B,OAAO,IAAI,CAAA;2DAC4C,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;2DACpC,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;2DACpC,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;KAC1F,CAAA;IACH,CAAC;;AA9DU,YAAY;IAFxB,SAAS,EAAE;IACX,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA+DxB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@localized()\n@customElement('ox-input-3axis')\nexport class OxInput3Axis extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n      }\n\n      input {\n        box-sizing: border-box;\n        padding: 0 var(--spacing-small);\n        height: var(--form-element-height-medium);\n        border: 1px solid var(--md-sys-color-outline);\n        border-radius: var(--md-sys-shape-corner-small);\n        background-color: var(--md-sys-color-on-primary);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n      }\n\n      input:not(:last-child) {\n        margin-right: var(--margin-default, 2px);\n      }\n\n      input:focus {\n        outline: none;\n        border-color: var(--md-sys-color-secondary-fixed-dim);\n      }\n    `\n  ]\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  _onChange(e: Event) {\n    e.stopPropagation()\n    e.preventDefault()\n\n    var element = e.target as HTMLElement\n    var id = element.id as 'x' | 'y' | 'z'\n    var value = Number((element as HTMLInputElement).value)\n\n    this.value = {\n      ...this.value,\n      [id]: value\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  render() {\n    const { x, y, z } = this.value\n    return html`\n      <input type=\"number\" id=\"x\" placeholder=\"X\" .value=${String(x)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"y\" placeholder=\"Y\" .value=${String(y)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"z\" placeholder=\"Z\" .value=${String(z)} ?disabled=${this.disabled} />\n    `\n  }\n}\n"]}

package/dist/src/ox-input-3dish.js

@@ -8,7 +8,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { localized, msg } from '@lit/localize';
 import { OxFormField } from './ox-form-field.js';
 let OxInput3Dish = class OxInput3Dish extends OxFormField {
-    static styles = [
+    static { this.styles = [
         css `
       :host {
         display: grid;
@@ -56,11 +56,7 @@ let OxInput3Dish = class OxInput3Dish extends OxFormField {
         border-color: var(--md-sys-color-secondary-fixed-dim);
       }
     `
-    ];
-    dimension;
-    position;
-    rotate;
-    scale;
+    ]; }
     firstUpdated() {
         this.renderRoot.addEventListener('change', this._onChange.bind(this));
     }

package/dist/src/ox-input-3dish.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-3dish.js","sourceRoot":"","sources":["../../src/ox-input-3dish.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-angle.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputAngle } from './ox-input-angle.js'\n\n@localized()\n@customElement('ox-input-3dish')\nexport class OxInput3Dish extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: repeat(7, minmax(50px, 1fr));\n        grid-gap: var(--spacing-medium);\n      }\n\n      label {\n        text-align: right;\n        align-self: center;\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n        text-transform: var(--label-text-transform);\n        grid-column: span 1;\n      }\n\n      span {\n        grid-column: span 2;\n        text-align: center;\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-surface-tint);\n        font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));\n      }\n\n      input,\n      ox-input-angle {\n        grid-column: span 2;\n        box-sizing: border-box;\n        padding: 0 var(--spacing-small);\n        height: var(--form-element-height-medium);\n        border: 1px solid var(--md-sys-color-outline);\n        border-radius: var(--md-sys-shape-corner-small);\n        overflow: hidden;\n        background-color: var(--md-sys-color-on-primary);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n      }\n\n      ox-input-angle {\n        --input-border: 0;\n      }\n\n      input:focus {\n        outline: none;\n        border-color: var(--md-sys-color-secondary-fixed-dim);\n      }\n    `\n  ]\n\n  @property({ type: Object }) dimension?: { width?: number; height?: number; depth?: number }\n  @property({ type: Object }) position?: { x?: number; y?: number; z?: number }\n  @property({ type: Object }) rotate?: { x?: number; y?: number; z?: number }\n  @property({ type: Object }) scale?: { x?: number; y?: number; z?: number }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  _onChange(e: Event) {\n    e.stopPropagation()\n    e.preventDefault()\n\n    var element = e.target as HTMLElement\n    var id = element.id\n    var prop = id.substr(1)\n    var value = Number((element as HTMLInputElement).value)\n\n    switch (element.tagName) {\n      case 'PROPERTY-ANGLE':\n        value = Number((element as OxInputAngle).value || 0)\n        break\n    }\n\n    switch (id) {\n      case 'tx':\n      case 'ty':\n      case 'tz':\n        this.position = {\n          ...this.position,\n          [prop]: value\n        }\n\n        this.dispatchEvent(\n          new CustomEvent('position-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: this.position\n            }\n          })\n        )\n        break\n\n      case 'rx':\n      case 'ry':\n      case 'rz':\n        this.rotate = {\n          ...this.rotate,\n          [prop]: value\n        }\n\n        this.dispatchEvent(\n          new CustomEvent('rotate-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: this.rotate\n            }\n          })\n        )\n        break\n\n      case 'sx':\n      case 'sy':\n      case 'sz':\n        this.scale = {\n          ...this.scale,\n          [prop]: value\n        }\n\n        this.dispatchEvent(\n          new CustomEvent('scale-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: this.scale\n            }\n          })\n        )\n        break\n\n      default:\n        // dimension\n        this.dimension = {\n          ...this.dimension,\n          [prop]: value\n        }\n\n        this.dispatchEvent(\n          new CustomEvent('dimension-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: this.dimension\n            }\n          })\n        )\n    }\n\n    this.value = {\n      position: this.position,\n      rotate: this.rotate,\n      scale: this.scale,\n      dimension: this.dimension\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  render() {\n    return html`\n      <label></label> <span>${msg('x-axes')}</span>\n      <span>${msg('y-axes')}</span>\n      <span>${msg('z-axes')}</span>\n\n      <label>${msg('dimension')}</label>\n      <input type=\"number\" id=\"dwidth\" .value=${String(this.dimension?.width)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"dheight\" .value=${String(this.dimension?.height)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"ddepth\" .value=${String(this.dimension?.depth)} ?disabled=${this.disabled} />\n\n      <label>${msg('position')}</label>\n      <input type=\"number\" id=\"tx\" .value=${String(this.position?.x)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"ty\" .value=${String(this.position?.y)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"tz\" .value=${String(this.position?.z)} ?disabled=${this.disabled} />\n\n      <label>${msg('scale')}</label>\n      <input type=\"number\" id=\"sx\" .value=${String(this.scale?.x)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"sy\" .value=${String(this.scale?.y)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"sz\" .value=${String(this.scale?.z)} ?disabled=${this.disabled} />\n\n      <label>${msg('rotate')}</label>\n      <ox-input-angle id=\"rx\" .value=${String(this.rotate?.x)} ?disabled=${this.disabled}></ox-input-angle>\n      <ox-input-angle id=\"ry\" .value=${String(this.rotate?.y)} ?disabled=${this.disabled}></ox-input-angle>\n      <ox-input-angle id=\"rz\" .value=${String(this.rotate?.z)} ?disabled=${this.disabled}></ox-input-angle>\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-input-3dish.js","sourceRoot":"","sources":["../../src/ox-input-3dish.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-angle.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputAngle } from './ox-input-angle.js'\n\n@localized()\n@customElement('ox-input-3dish')\nexport class OxInput3Dish extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: repeat(7, minmax(50px, 1fr));\n        grid-gap: var(--spacing-medium);\n      }\n\n      label {\n        text-align: right;\n        align-self: center;\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n        text-transform: var(--label-text-transform);\n        grid-column: span 1;\n      }\n\n      span {\n        grid-column: span 2;\n        text-align: center;\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-surface-tint);\n        font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));\n      }\n\n      input,\n      ox-input-angle {\n        grid-column: span 2;\n        box-sizing: border-box;\n        padding: 0 var(--spacing-small);\n        height: var(--form-element-height-medium);\n        border: 1px solid var(--md-sys-color-outline);\n        border-radius: var(--md-sys-shape-corner-small);\n        overflow: hidden;\n        background-color: var(--md-sys-color-on-primary);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n      }\n\n      ox-input-angle {\n        --input-border: 0;\n      }\n\n      input:focus {\n        outline: none;\n        border-color: var(--md-sys-color-secondary-fixed-dim);\n      }\n    `\n  ]\n\n  @property({ type: Object }) dimension?: { width?: number; height?: number; depth?: number }\n  @property({ type: Object }) position?: { x?: number; y?: number; z?: number }\n  @property({ type: Object }) rotate?: { x?: number; y?: number; z?: number }\n  @property({ type: Object }) scale?: { x?: number; y?: number; z?: number }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  _onChange(e: Event) {\n    e.stopPropagation()\n    e.preventDefault()\n\n    var element = e.target as HTMLElement\n    var id = element.id\n    var prop = id.substr(1)\n    var value = Number((element as HTMLInputElement).value)\n\n    switch (element.tagName) {\n      case 'PROPERTY-ANGLE':\n        value = Number((element as OxInputAngle).value || 0)\n        break\n    }\n\n    switch (id) {\n      case 'tx':\n      case 'ty':\n      case 'tz':\n        this.position = {\n          ...this.position,\n          [prop]: value\n        }\n\n        this.dispatchEvent(\n          new CustomEvent('position-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: this.position\n            }\n          })\n        )\n        break\n\n      case 'rx':\n      case 'ry':\n      case 'rz':\n        this.rotate = {\n          ...this.rotate,\n          [prop]: value\n        }\n\n        this.dispatchEvent(\n          new CustomEvent('rotate-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: this.rotate\n            }\n          })\n        )\n        break\n\n      case 'sx':\n      case 'sy':\n      case 'sz':\n        this.scale = {\n          ...this.scale,\n          [prop]: value\n        }\n\n        this.dispatchEvent(\n          new CustomEvent('scale-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: this.scale\n            }\n          })\n        )\n        break\n\n      default:\n        // dimension\n        this.dimension = {\n          ...this.dimension,\n          [prop]: value\n        }\n\n        this.dispatchEvent(\n          new CustomEvent('dimension-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: this.dimension\n            }\n          })\n        )\n    }\n\n    this.value = {\n      position: this.position,\n      rotate: this.rotate,\n      scale: this.scale,\n      dimension: this.dimension\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  render() {\n    return html`\n      <label></label> <span>${msg('x-axes')}</span>\n      <span>${msg('y-axes')}</span>\n      <span>${msg('z-axes')}</span>\n\n      <label>${msg('dimension')}</label>\n      <input type=\"number\" id=\"dwidth\" .value=${String(this.dimension?.width)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"dheight\" .value=${String(this.dimension?.height)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"ddepth\" .value=${String(this.dimension?.depth)} ?disabled=${this.disabled} />\n\n      <label>${msg('position')}</label>\n      <input type=\"number\" id=\"tx\" .value=${String(this.position?.x)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"ty\" .value=${String(this.position?.y)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"tz\" .value=${String(this.position?.z)} ?disabled=${this.disabled} />\n\n      <label>${msg('scale')}</label>\n      <input type=\"number\" id=\"sx\" .value=${String(this.scale?.x)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"sy\" .value=${String(this.scale?.y)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"sz\" .value=${String(this.scale?.z)} ?disabled=${this.disabled} />\n\n      <label>${msg('rotate')}</label>\n      <ox-input-angle id=\"rx\" .value=${String(this.rotate?.x)} ?disabled=${this.disabled}></ox-input-angle>\n      <ox-input-angle id=\"ry\" .value=${String(this.rotate?.y)} ?disabled=${this.disabled}></ox-input-angle>\n      <ox-input-angle id=\"rz\" .value=${String(this.rotate?.z)} ?disabled=${this.disabled}></ox-input-angle>\n    `\n  }\n}\n"]}

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

@@ -6,7 +6,7 @@ import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
 let OxInputAngle = class OxInputAngle extends OxFormField {
-    static styles = [
+    static { this.styles = [
         css `
       :host {
         display: inline-block;
@@ -30,9 +30,7 @@ let OxInputAngle = class OxInputAngle extends OxFormField {
         border-color: var(--md-sys-color-secondary-fixed-dim);
       }
     `
-    ];
-    placeholder;
-    input;
+    ]; }
     render() {
         return html `
       <input

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-angle.js","sourceRoot":"","sources":["../../src/ox-input-angle.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAC3C,MAAM,CAAC,MAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBF;KACF,CAAA;IAE2B,WAAW,CAAS;IAEhC,KAAK,CAAmB;IAExC,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;uBAC5B,IAAI,CAAC,WAAW,IAAI,IAAI;kBAC7B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;oBAClC,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAE7C,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,SAAS,CAAC,KAAkC;QAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAED,SAAS,CAAC,MAAmC;QAC3C,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,CAAA;IAC7E,CAAC;;AAlC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAqB;AAEhC;IAAf,KAAK,CAAC,OAAO,CAAC;2CAAyB;AA7B7B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA8DxB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-angle')\nexport class OxInputAngle extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n\n      input {\n        width: 100%;\n        height: 100%;\n        min-height: var(--form-element-height-medium);\n        padding: 0 var(--spacing-small);\n        box-sizing: border-box;\n        border: var(--input-border, 1px solid var(--md-sys-color-outline));\n        border-radius: var(--md-sys-shape-corner-small);\n        background-color: var(--md-sys-color-on-primary);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n      }\n\n      input:focus {\n        outline: var(--input-focus-outline, inherit);\n        border-color: var(--md-sys-color-secondary-fixed-dim);\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n\n  @query('input') input!: HTMLInputElement\n\n  render() {\n    return html`\n      <input\n        type=\"number\"\n        .value=${String(this._toDegree(this.value))}\n        .placeholder=${this.placeholder || '0°'}\n        @change=${(e: Event) => this._onChangeValue(e)}\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n\n  _onChangeValue(e: Event) {\n    this.value = this._toRadian(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  _toDegree(value: string | number | undefined) {\n    return Math.round(((Number(value) || 0) * 180) / Math.PI)\n  }\n\n  _toRadian(degree: string | number | undefined) {\n    return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180)\n  }\n}\n"]}
+{"version":3,"file":"ox-input-angle.js","sourceRoot":"","sources":["../../src/ox-input-angle.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBF;KACF,AAxBY,CAwBZ;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;uBAC5B,IAAI,CAAC,WAAW,IAAI,IAAI;kBAC7B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;oBAClC,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAE7C,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,SAAS,CAAC,KAAkC;QAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAED,SAAS,CAAC,MAAmC;QAC3C,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,CAAA;IAC7E,CAAC;;AAlC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAqB;AAEhC;IAAf,KAAK,CAAC,OAAO,CAAC;2CAAyB;AA7B7B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA8DxB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-angle')\nexport class OxInputAngle extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n\n      input {\n        width: 100%;\n        height: 100%;\n        min-height: var(--form-element-height-medium);\n        padding: 0 var(--spacing-small);\n        box-sizing: border-box;\n        border: var(--input-border, 1px solid var(--md-sys-color-outline));\n        border-radius: var(--md-sys-shape-corner-small);\n        background-color: var(--md-sys-color-on-primary);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n      }\n\n      input:focus {\n        outline: var(--input-focus-outline, inherit);\n        border-color: var(--md-sys-color-secondary-fixed-dim);\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n\n  @query('input') input!: HTMLInputElement\n\n  render() {\n    return html`\n      <input\n        type=\"number\"\n        .value=${String(this._toDegree(this.value))}\n        .placeholder=${this.placeholder || '0°'}\n        @change=${(e: Event) => this._onChangeValue(e)}\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n\n  _onChangeValue(e: Event) {\n    this.value = this._toRadian(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  _toDegree(value: string | number | undefined) {\n    return Math.round(((Number(value) || 0) * 180) / Math.PI)\n  }\n\n  _toRadian(degree: string | number | undefined) {\n    return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180)\n  }\n}\n"]}

package/dist/src/ox-input-background-pattern.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/web/icon/icon.js';
+import '@operato/i18n/ox-i18n.js';
+import '@operato/attachment/ox-attachment-selector.js';
+import './ox-input-color.js';
+import { OxFormField } from './ox-form-field.js';
+export type BackgroundPatternOption = {
+    image?: HTMLImageElement | string;
+    color?: string;
+    align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom';
+    offsetX?: number;
+    offsetY?: number;
+    width?: number;
+    height?: number;
+    fitPattern?: boolean;
+    noRepeat?: boolean;
+};
+/**
+ * 컴포넌트의 fill pattern을 편집하는 element
+ *
+ * Example:
+ *  <ox-input-background-pattern
+ *    @change="${e => { this.pattern = e.target.value }}"
+ *    .value=${this.pattern}"
+ *  ></ox-input-background-pattern>
+ */
+export declare class OxInputBackgroundPattern extends OxFormField {
+    static styles: import("lit").CSSResult[];
+    value?: BackgroundPatternOption;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    _onChange(e: Event): void;
+}

package/dist/src/ox-input-background-pattern.js

@@ -0,0 +1,111 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/i18n/ox-i18n.js';
+import '@operato/attachment/ox-attachment-selector.js';
+import './ox-input-color.js';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
+import { OxFormField } from './ox-form-field.js';
+/**
+ * 컴포넌트의 fill pattern을 편집하는 element
+ *
+ * Example:
+ *  <ox-input-background-pattern
+ *    @change="${e => { this.pattern = e.target.value }}"
+ *    .value=${this.pattern}"
+ *  ></ox-input-background-pattern>
+ */
+let OxInputBackgroundPattern = class OxInputBackgroundPattern extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.value = undefined;
+    }
+    static { this.styles = [
+        PropertyGridStyles,
+        css `
+      :host {
+        display: flex;
+      }
+    `
+    ]; }
+    render() {
+        const value = this.value || {};
+        return html `
+      <div class="property-grid">
+        <label> <ox-i18n msgid="label.image">image</ox-i18n> </label>
+
+        <ox-attachment-selector
+          value-key="image"
+          .value=${value.image || ''}
+          .properties=${{
+            category: 'image'
+        }}
+          class="custom-editor"
+        ></ox-attachment-selector>
+
+        <label> <ox-i18n msgid="label.align">align</ox-i18n> </label>
+
+        <select value-key="align" .value=${value.align}>
+          <option value="left-top">Left Top</option>
+          <option value="top">Center Top</option>
+          <option value="right-top">Right Top</option>
+          <option value="left">Left Center</option>
+          <option value="center">Center Center</option>
+          <option value="right">Right Center</option>
+          <option value="left-bottom">Left Bottom</option>
+          <option value="bottom">Center Bottom</option>
+          <option value="right-bottom">Right Bottom</option>
+        </select>
+
+        <label> <ox-i18n msgid="label.offset-x">offsetX</ox-i18n> </label>
+        <input type="number" value-key="offsetX" .value=${value.offsetX} />
+
+        <label> <ox-i18n msgid="label.offset-y">offsetY</ox-i18n> </label>
+        <input type="number" value-key="offsetY" .value=${value.offsetY} />
+
+        <label> <ox-i18n msgid="label.width">width</ox-i18n> </label>
+        <input type="number" value-key="width" .value=${value.width} />
+
+        <label> <ox-i18n msgid="label.height">height</ox-i18n> </label>
+        <input type="number" value-key="height" .value=${value.height} />
+
+        <label><md-icon>format_color_fill</md-icon></label>
+        <ox-input-color class="custom-editor" value-key="color" .value=${value.color}> </ox-input-color>
+
+        <input id="fitPattern" value-key="fitPattern" type="checkbox" ?checked=${value.fitPattern} required />
+        <label for="fitPattern"> <ox-i18n msgid="label.fit">fit</ox-i18n> </label>
+
+        <input id="noRepeat" value-key="noRepeat" type="checkbox" ?checked=${value.noRepeat} required />
+        <label for="noRepeat"> <ox-i18n msgid="label.no-repeat">no repeat</ox-i18n> </label>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onChange.bind(this));
+    }
+    _onChange(e) {
+        var element = e.target;
+        var key = element.getAttribute('value-key');
+        var value = element.value;
+        if (key === 'fitPattern' || key === 'noRepeat') {
+            value = element.checked;
+        }
+        this.value = {
+            ...this.value,
+            [key]: value
+        };
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ type: Object })
+], OxInputBackgroundPattern.prototype, "value", void 0);
+OxInputBackgroundPattern = __decorate([
+    customElement('ox-input-background-pattern')
+], OxInputBackgroundPattern);
+export { OxInputBackgroundPattern };
+//# sourceMappingURL=ox-input-background-pattern.js.map

package/dist/src/ox-input-background-pattern.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-background-pattern.js","sourceRoot":"","sources":["../../src/ox-input-background-pattern.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AACjC,OAAO,+CAA+C,CAAA;AACtD,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAchD;;;;;;;;GAQG;AAGI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,WAAW;IAAlD;;QAUuB,UAAK,GAA6B,SAAS,CAAA;IA4EzE,CAAC;aArFQ,WAAM,GAAG;QACd,kBAAkB;QAClB,GAAG,CAAA;;;;KAIF;KACF,AAPY,CAOZ;IAID,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAK,EAA8B,CAAA;QAE3D,OAAO,IAAI,CAAA;;;;;;mBAMI,KAAK,CAAC,KAAK,IAAI,EAAE;wBACZ;YACZ,QAAQ,EAAE,OAAO;SAClB;;;;;;2CAMgC,KAAK,CAAC,KAAK;;;;;;;;;;;;;0DAaI,KAAK,CAAC,OAAO;;;0DAGb,KAAK,CAAC,OAAO;;;wDAGf,KAAK,CAAC,KAAK;;;yDAGV,KAAK,CAAC,MAAM;;;yEAGI,KAAK,CAAC,KAAK;;iFAEH,KAAK,CAAC,UAAU;;;6EAGpB,KAAK,CAAC,QAAQ;;;KAGtF,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAC3C,IAAI,KAAK,GAAQ,OAAO,CAAC,KAAK,CAAA;QAE9B,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,UAAU,EAAE,CAAC;YAC/C,KAAK,GAAG,OAAO,CAAC,OAAO,CAAA;QACzB,CAAC;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAI,CAAC,EAAE,KAAK;SACd,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AA3E2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA4C;AAV5D,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAsFpC","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/attachment/ox-attachment-selector.js'\nimport './ox-input-color.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\nexport type BackgroundPatternOption = {\n  image?: HTMLImageElement | string\n  color?: string\n  align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'\n  offsetX?: number\n  offsetY?: number\n  width?: number\n  height?: number\n  fitPattern?: boolean\n  noRepeat?: boolean\n}\n\n/**\n * 컴포넌트의 fill pattern을 편집하는 element\n *\n * Example:\n *  <ox-input-background-pattern\n *    @change=\"${e => { this.pattern = e.target.value }}\"\n *    .value=${this.pattern}\"\n *  ></ox-input-background-pattern>\n */\n\n@customElement('ox-input-background-pattern')\nexport class OxInputBackgroundPattern extends OxFormField {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      :host {\n        display: flex;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: BackgroundPatternOption = undefined\n\n  render() {\n    const value = this.value || ({} as BackgroundPatternOption)\n\n    return html`\n      <div class=\"property-grid\">\n        <label> <ox-i18n msgid=\"label.image\">image</ox-i18n> </label>\n\n        <ox-attachment-selector\n          value-key=\"image\"\n          .value=${value.image || ''}\n          .properties=${{\n            category: 'image'\n          }}\n          class=\"custom-editor\"\n        ></ox-attachment-selector>\n\n        <label> <ox-i18n msgid=\"label.align\">align</ox-i18n> </label>\n\n        <select value-key=\"align\" .value=${value.align}>\n          <option value=\"left-top\">Left Top</option>\n          <option value=\"top\">Center Top</option>\n          <option value=\"right-top\">Right Top</option>\n          <option value=\"left\">Left Center</option>\n          <option value=\"center\">Center Center</option>\n          <option value=\"right\">Right Center</option>\n          <option value=\"left-bottom\">Left Bottom</option>\n          <option value=\"bottom\">Center Bottom</option>\n          <option value=\"right-bottom\">Right Bottom</option>\n        </select>\n\n        <label> <ox-i18n msgid=\"label.offset-x\">offsetX</ox-i18n> </label>\n        <input type=\"number\" value-key=\"offsetX\" .value=${value.offsetX} />\n\n        <label> <ox-i18n msgid=\"label.offset-y\">offsetY</ox-i18n> </label>\n        <input type=\"number\" value-key=\"offsetY\" .value=${value.offsetY} />\n\n        <label> <ox-i18n msgid=\"label.width\">width</ox-i18n> </label>\n        <input type=\"number\" value-key=\"width\" .value=${value.width} />\n\n        <label> <ox-i18n msgid=\"label.height\">height</ox-i18n> </label>\n        <input type=\"number\" value-key=\"height\" .value=${value.height} />\n\n        <label><md-icon>format_color_fill</md-icon></label>\n        <ox-input-color class=\"custom-editor\" value-key=\"color\" .value=${value.color}> </ox-input-color>\n\n        <input id=\"fitPattern\" value-key=\"fitPattern\" type=\"checkbox\" ?checked=${value.fitPattern} required />\n        <label for=\"fitPattern\"> <ox-i18n msgid=\"label.fit\">fit</ox-i18n> </label>\n\n        <input id=\"noRepeat\" value-key=\"noRepeat\" type=\"checkbox\" ?checked=${value.noRepeat} required />\n        <label for=\"noRepeat\"> <ox-i18n msgid=\"label.no-repeat\">no repeat</ox-i18n> </label>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  _onChange(e: Event) {\n    var element = e.target as HTMLInputElement\n    var key = element.getAttribute('value-key')\n    var value: any = element.value\n\n    if (key === 'fitPattern' || key === 'noRepeat') {\n      value = element.checked\n    }\n\n    this.value = {\n      ...this.value,\n      [key!]: value\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -36,7 +36,12 @@ const barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAA
  * @customElement
  */
 let OxInputBarcode = class OxInputBarcode extends OxFormField {
-    static styles = [
+    constructor() {
+        super(...arguments);
+        this.popup = null;
+        this.video = null;
+    }
+    static { this.styles = [
         css `
       :host {
         display: flex;
@@ -85,31 +90,7 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
         display: none;
       }
     `
-    ];
-    /**
-     * Indicates whether barcode scanning is enabled.
-     * @property {Boolean} scannable
-     */
-    scannable;
-    /**
-     * If true, the "Enter" key press event is not fired after scanning a barcode.
-     * @property {Boolean} withoutEnter
-     */
-    withoutEnter;
-    /**
-     * If true, only English characters are allowed in the input field.
-     * @property {Boolean} englishOnly
-     */
-    englishOnly;
-    /**
-     * If true, the input field is automatically selected after a change event.
-     * @property {Boolean} selectAfterChange
-     */
-    selectAfterChange;
-    stream;
-    input;
-    popup = null;
-    video = null;
+    ]; }
     connectedCallback() {
         super.connectedCallback();
         if (navigator.mediaDevices) {