@operato/input 9.0.0-beta.4 → 9.0.0-beta.47

package/CHANGELOG.md

@@ -3,6 +3,202 @@
 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.47](https://github.com/hatiolab/operato/compare/v9.0.0-beta.46...v9.0.0-beta.47) (2025-02-14)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [9.0.0-beta.41](https://github.com/hatiolab/operato/compare/v9.0.0-beta.40...v9.0.0-beta.41) (2025-02-09)
+
+
+### :bug: Bug Fix
+
+* ontap => onclick for ox-input-select-buttons ([cd09dc3](https://github.com/hatiolab/operato/commit/cd09dc337bcff1d4c52071eaea9ad68e1e77cde7))
+
+
+
+## [9.0.0-beta.38](https://github.com/hatiolab/operato/compare/v9.0.0-beta.37...v9.0.0-beta.38) (2025-02-02)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [9.0.0-beta.37](https://github.com/hatiolab/operato/compare/v9.0.0-beta.36...v9.0.0-beta.37) (2025-02-01)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [9.0.0-beta.35](https://github.com/hatiolab/operato/compare/v9.0.0-beta.34...v9.0.0-beta.35) (2025-02-01)
+
+
+### :bug: Bug Fix
+
+* change tap => click event (due to polymer library being removed) ([2f1add0](https://github.com/hatiolab/operato/commit/2f1add0ed89214b63acb127de34f65caf3bec9b5))
+
+
+
+## [9.0.0-beta.34](https://github.com/hatiolab/operato/compare/v9.0.0-beta.33...v9.0.0-beta.34) (2025-01-31)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [9.0.0-beta.33](https://github.com/hatiolab/operato/compare/v9.0.0-beta.32...v9.0.0-beta.33) (2025-01-31)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [9.0.0-beta.32](https://github.com/hatiolab/operato/compare/v9.0.0-beta.31...v9.0.0-beta.32) (2025-01-31)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [9.0.0-beta.31](https://github.com/hatiolab/operato/compare/v9.0.0-beta.30...v9.0.0-beta.31) (2025-01-31)
+
+
+### :rocket: New Features
+
+* add @operato/pickr ([ab5acaa](https://github.com/hatiolab/operato/commit/ab5acaad73d9a9af236dc4efaf612d7065b69725))
+
+
+### :bug: Bug Fix
+
+* incorrect path - ox-input-table.stories.ts ([f19fb74](https://github.com/hatiolab/operato/commit/f19fb74bd50ef74ff212ec12311c96010e331996))
+* missing table border styling event ([d5b7556](https://github.com/hatiolab/operato/commit/d5b7556ddc66a4b3ca24f45c025652d26211cb08))
+
+
+
+## [9.0.0-beta.29](https://github.com/hatiolab/operato/compare/v9.0.0-beta.28...v9.0.0-beta.29) (2025-01-30)
+
+
+### :rocket: New Features
+
+* upgrade ox-input-color ([5405d0b](https://github.com/hatiolab/operato/commit/5405d0ba3dc07051f54251d17c1eaac6b491aad9))
+
+
+
+## [9.0.0-beta.28](https://github.com/hatiolab/operato/compare/v9.0.0-beta.27...v9.0.0-beta.28) (2025-01-28)
+
+
+### :rocket: New Features
+
+* module property-panel ([d3dd184](https://github.com/hatiolab/operato/commit/d3dd18461756814dc17e33157a397d8d679650a6))
+
+
+
+## [9.0.0-beta.21](https://github.com/hatiolab/operato/compare/v9.0.0-beta.20...v9.0.0-beta.21) (2025-01-28)
+
+
+### :rocket: New Features
+
+* module property-panel ([4f308a0](https://github.com/hatiolab/operato/commit/4f308a0ace57bb156e489eef7998cf443c38fa11))
+* module property-panel ([b3e2576](https://github.com/hatiolab/operato/commit/b3e2576bfeb9d6d00eed64786764ff6e823bcb85))
+
+
+
+## [9.0.0-beta.20](https://github.com/hatiolab/operato/compare/v9.0.0-beta.19...v9.0.0-beta.20) (2025-01-27)
+
+
+### :rocket: New Features
+
+* module property-panel ([03fb303](https://github.com/hatiolab/operato/commit/03fb303816c1629adca2a0ad843a8696ffaa4bef))
+
+
+
+## [9.0.0-beta.18](https://github.com/hatiolab/operato/compare/v9.0.0-beta.17...v9.0.0-beta.18) (2025-01-27)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [9.0.0-beta.16](https://github.com/hatiolab/operato/compare/v9.0.0-beta.15...v9.0.0-beta.16) (2025-01-27)
+
+
+### :rocket: New Features
+
+* module property-panel ([eaa45f9](https://github.com/hatiolab/operato/commit/eaa45f98e3f4349732f2d0d9d346eef8093be3e8))
+
+
+
+## [9.0.0-beta.15](https://github.com/hatiolab/operato/compare/v9.0.0-beta.14...v9.0.0-beta.15) (2025-01-27)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [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)
+
+
+### :bug: Bug Fix
+
+* @undecaf/zbar-wasm@0.11.0 ([722c68e](https://github.com/hatiolab/operato/commit/722c68e24275b28c84cf057d3038fb9c6a0e6e78))
+* tweak tsconfig.json ([3c424b1](https://github.com/hatiolab/operato/commit/3c424b18d046f95d5619076d113d49a4b4dc9bbb))
+
+
+
+## [9.0.0-beta.7](https://github.com/hatiolab/operato/compare/v9.0.0-beta.6...v9.0.0-beta.7) (2025-01-20)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [9.0.0-beta.6](https://github.com/hatiolab/operato/compare/v9.0.0-beta.5...v9.0.0-beta.6) (2025-01-20)
+
+
+### :bug: Bug Fix
+
+* esm module ([9642b97](https://github.com/hatiolab/operato/commit/9642b97650623d9ce71f6db0fd1995a2379205b5))
+
+
+
+## [9.0.0-beta.5](https://github.com/hatiolab/operato/compare/v9.0.0-beta.4...v9.0.0-beta.5) (2025-01-20)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
 ## [9.0.0-beta.4](https://github.com/hatiolab/operato/compare/v9.0.0-beta.3...v9.0.0-beta.4) (2025-01-20)
 
 

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-input-angle.js

@@ -15,10 +15,8 @@ let OxInputAngle = class OxInputAngle extends OxFormField {
       input {
         width: 100%;
         height: 100%;
-        min-height: var(--form-element-height-medium);
-        padding: 0 var(--spacing-small);
         box-sizing: border-box;
-        border: var(--input-border, 1px solid var(--md-sys-color-outline));
+        border: none;
         border-radius: var(--md-sys-shape-corner-small);
         background-color: var(--md-sys-color-on-primary);
         font-size: var(--md-sys-typescale-label-large-size, 0.875rem);

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;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"]}
+{"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;;;;;;;;;;;;;;;;;;;;KAoBF;KACF,AAtBY,CAsBZ;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;AA3B7B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA4DxB","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        box-sizing: border-box;\n        border: none;\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-color-gradient.d.ts

@@ -1,26 +1,28 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
+import '@material/web/icon/icon.js';
 import '@operato/i18n/ox-i18n.js';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
-import '@polymer/paper-listbox/paper-listbox';
-import '@polymer/paper-item/paper-item';
-import '@operato/input/ox-input-angle.js';
-import '@operato/input/ox-input-color-stops.js';
-import { ColorStop } from './ox-input-color-stops.js';
+import './ox-select.js';
+import './ox-input-angle.js';
+import './ox-input-color-stops.js';
 import { OxFormField } from './ox-form-field.js';
+import { ColorStop } from './ox-input-color-stops.js';
+type GradientDirection = 'left-to-right' | 'lefttop-to-rightbottom' | 'top-to-bottom' | 'righttop-to-leftbottom' | 'right-to-left' | 'rightbottom-to-lefttop' | 'bottom-to-top' | 'leftbottom-to-righttop' | 'left-to-right' | 'center-to-corner';
 export type GradientOption = {
     type: 'linear' | 'radial';
     rotation: number;
-    direction?: 'left-to-right' | 'lefttop-to-rightbottom' | 'top-to-bottom' | 'righttop-to-leftbottom' | 'right-to-left' | 'rightbottom-to-lefttop' | 'bottom-to-top' | 'leftbottom-to-righttop' | 'left-to-right' | 'center-to-corner';
+    direction?: GradientDirection;
     center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom';
     colorStops?: ColorStop[];
 };
 export declare class OxInputColorGradient extends OxFormField {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     value: GradientOption;
     firstUpdated(): void;
-    _onChange(e: Event): void;
     render(): import("lit-html").TemplateResult<1>;
-    _convertDirectionToRotation(direction: string): number;
+    private onChange;
+    private convertDirectionToRotation;
+    private convertRotationToDirection;
 }
+export {};