@operato/form 2.0.0-alpha.92 → 2.0.0-beta.0

package/CHANGELOG.md

@@ -3,6 +3,287 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0-beta.0](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.158...v2.0.0-beta.0) (2024-06-01)
+
+**Note:** Version bump only for package @operato/form
+
+
+
+
+
+## [2.0.0-alpha.157](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.156...v2.0.0-alpha.157) (2024-06-01)
+
+**Note:** Version bump only for package @operato/form
+
+
+
+
+
+## [2.0.0-alpha.156](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.155...v2.0.0-alpha.156) (2024-06-01)
+
+
+### :bug: Bug Fix
+
+* theming styles ([3b282c2](https://github.com/hatiolab/operato/commit/3b282c21d93af03bacc5aa40027591e005f1a067))
+
+
+
+## [2.0.0-alpha.154](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.153...v2.0.0-alpha.154) (2024-06-01)
+
+
+### :rocket: New Features
+
+* partial reset for search-form and filters-form ([b4c2bc4](https://github.com/hatiolab/operato/commit/b4c2bc4707e6e5d17f29b228b34810532c9a8aec))
+
+
+
+## [2.0.0-alpha.153](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.152...v2.0.0-alpha.153) (2024-05-31)
+
+
+### :bug: Bug Fix
+
+* readonly property for form inputs ([b814347](https://github.com/hatiolab/operato/commit/b814347e76a911488f498b5ab98ad172c2c1a961))
+* update theme file for form module ([6bcc259](https://github.com/hatiolab/operato/commit/6bcc25933b8be42f8e15ab71cdaf0b75ca5a3a72))
+
+
+### :rocket: New Features
+
+* partial reset for search-form and filters-form ([eb02ea1](https://github.com/hatiolab/operato/commit/eb02ea169c9803eceb071eedd5be2c3a8a05fb5d))
+
+
+
+## [2.0.0-alpha.152](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.151...v2.0.0-alpha.152) (2024-05-30)
+
+**Note:** Version bump only for package @operato/form
+
+
+
+
+
+## [2.0.0-alpha.151](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.150...v2.0.0-alpha.151) (2024-05-30)
+
+
+### :bug: Bug Fix
+
+* theming styles ([c5f59c2](https://github.com/hatiolab/operato/commit/c5f59c2e55a36eedf9056bcf2187c218556ded3e))
+
+
+
+## [2.0.0-alpha.150](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.149...v2.0.0-alpha.150) (2024-05-30)
+
+**Note:** Version bump only for package @operato/form
+
+
+
+
+
+## [2.0.0-alpha.149](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.148...v2.0.0-alpha.149) (2024-05-30)
+
+
+### :bug: Bug Fix
+
+* styles ([9ec269b](https://github.com/hatiolab/operato/commit/9ec269b18bc82a931083137214fb6e3017201107))
+
+
+
+## [2.0.0-alpha.148](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.147...v2.0.0-alpha.148) (2024-05-30)
+
+
+### :rocket: New Features
+
+* md3 ([2d85145](https://github.com/hatiolab/operato/commit/2d8514510e4dd88d3ff0652e0b22c9992cabce5c))
+* md3 ([55b7496](https://github.com/hatiolab/operato/commit/55b7496ea46a6b65ac6ab71bc1be7c89d1ba91e5))
+
+
+### :bug: Bug Fix
+
+* context style ([d3cac99](https://github.com/hatiolab/operato/commit/d3cac9909a61befa05ec30331a32e2de6d39ba5e))
+
+
+### :sparkles: Styling
+
+* form ([4a71d2b](https://github.com/hatiolab/operato/commit/4a71d2be48d7c95a6611a5cf0e1ff46d50c63cb3))
+* list, grid, card ([773b57c](https://github.com/hatiolab/operato/commit/773b57c8f85536ddfc2bd883f0209341c0ff2a0b))
+* themes update, ox-buttons-radio, ox-checkbo ([0da66c4](https://github.com/hatiolab/operato/commit/0da66c47f053ee6675a247d6968ceaf818f06ad3))
+
+
+
+## [2.0.0-alpha.147](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.146...v2.0.0-alpha.147) (2024-05-30)
+
+
+### :bug: Bug Fix
+
+* remove unused code from form module ([a737e1c](https://github.com/hatiolab/operato/commit/a737e1c0934c4917829e0cd8ce7afd0f060f6b01))
+
+
+
+## [2.0.0-alpha.146](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.145...v2.0.0-alpha.146) (2024-05-29)
+
+**Note:** Version bump only for package @operato/form
+
+
+
+
+
+## [2.0.0-alpha.145](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.144...v2.0.0-alpha.145) (2024-05-28)
+
+**Note:** Version bump only for package @operato/form
+
+
+
+
+
+## [2.0.0-alpha.143](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.142...v2.0.0-alpha.143) (2024-05-23)
+
+**Note:** Version bump only for package @operato/form
+
+
+
+
+
+## [2.0.0-alpha.142](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.141...v2.0.0-alpha.142) (2024-05-21)
+
+**Note:** Version bump only for package @operato/form
+
+
+
+
+
+## [2.0.0-alpha.137](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.136...v2.0.0-alpha.137) (2024-05-15)
+
+
+### :rocket: New Features
+
+* p13n-mixin에서 preference loading 횟수를 최적화함 ([a6d1e70](https://github.com/hatiolab/operato/commit/a6d1e70bb9cb0fc6cca696510efa0cd9b3aa295e))
+
+
+
+## [2.0.0-alpha.134](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.133...v2.0.0-alpha.134) (2024-05-13)
+
+
+### :bug: Bug Fix
+
+* ox-filter-personalizer bug on sorting ([4527ba5](https://github.com/hatiolab/operato/commit/4527ba598605d54380e81c8a00f2d5188197f757))
+* page preference load 시에 해당 페이지의 모든 preference를 모두 로딩하도록 함 ([4f8039e](https://github.com/hatiolab/operato/commit/4f8039e6a95bdb03153a9d7b8e3e86c83b02cb47))
+
+
+
+## [2.0.0-alpha.133](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.132...v2.0.0-alpha.133) (2024-05-12)
+
+
+### :bug: Bug Fix
+
+* missing dependencies ([6065a94](https://github.com/hatiolab/operato/commit/6065a94c852c3518322ec25980c4883ca6e31d93))
+
+
+### :rocket: New Features
+
+* add personalization for ox-filter-form-base ([c60874c](https://github.com/hatiolab/operato/commit/c60874c9f3f6ca2ef68f81d62cd3781fd62074fe))
+
+
+
+## [2.0.0-alpha.130](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.129...v2.0.0-alpha.130) (2024-05-10)
+
+
+### :bug: Bug Fix
+
+* ox-search-form 내 input 에서 엔터키가 발생했을 때, change 이벤트를 발생시키도록 함 ([7325996](https://github.com/hatiolab/operato/commit/7325996e081309c680f9902de94df0f805c33ce3))
+
+
+
+## [2.0.0-alpha.127](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.126...v2.0.0-alpha.127) (2024-05-08)
+
+
+### :rocket: New Features
+
+* form Field 들의 개별 동작 기능 ([99d6c8d](https://github.com/hatiolab/operato/commit/99d6c8dfd5ca9973736dc887f68db11ad827aa91))
+
+
+
+## [2.0.0-alpha.122](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.121...v2.0.0-alpha.122) (2024-05-06)
+
+**Note:** Version bump only for package @operato/form
+
+
+
+
+
+## [2.0.0-alpha.111](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.110...v2.0.0-alpha.111) (2024-05-02)
+
+**Note:** Version bump only for package @operato/form
+
+
+
+
+
+## [2.0.0-alpha.110](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.109...v2.0.0-alpha.110) (2024-05-02)
+
+**Note:** Version bump only for package @operato/form
+
+
+
+
+
+## [2.0.0-alpha.108](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.107...v2.0.0-alpha.108) (2024-05-02)
+
+
+### :rocket: New Features
+
+* add reset method to ox-search-form and ox-filters-form to clear fields ([b41c48f](https://github.com/hatiolab/operato/commit/b41c48f93f3b1c947724b5f888cc17e6d2e1a385))
+
+
+
+## [2.0.0-alpha.107](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.106...v2.0.0-alpha.107) (2024-05-01)
+
+
+### :bug: Bug Fix
+
+* form related stories ([e722c51](https://github.com/hatiolab/operato/commit/e722c51d1d26809e36a113574d848085386b24cd))
+
+
+
+## [2.0.0-alpha.106](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.105...v2.0.0-alpha.106) (2024-04-26)
+
+**Note:** Version bump only for package @operato/form
+
+
+
+
+
+## [2.0.0-alpha.105](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.104...v2.0.0-alpha.105) (2024-04-26)
+
+**Note:** Version bump only for package @operato/form
+
+
+
+
+
+## [2.0.0-alpha.104](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.103...v2.0.0-alpha.104) (2024-04-26)
+
+**Note:** Version bump only for package @operato/form
+
+
+
+
+
+## [2.0.0-alpha.103](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.102...v2.0.0-alpha.103) (2024-04-26)
+
+
+### :bug: Bug Fix
+
+* ox-filter-form과 ox-search-form에서 필터들간에 연관 기능 지원 ([bc081f8](https://github.com/hatiolab/operato/commit/bc081f8dfbb303f8aa219f0b776aa0cc4b18e9cd))
+
+
+
+## [2.0.0-alpha.94](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.93...v2.0.0-alpha.94) (2024-04-20)
+
+
+### :bug: Bug Fix
+
+* support 'checkbox' type in ox-filters-form-base ([1ffe0e5](https://github.com/hatiolab/operato/commit/1ffe0e5fc16480240c8c5accf57d247bb3299867))
+
+
+
 ## [2.0.0-alpha.92](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.91...v2.0.0-alpha.92) (2024-04-19)
 
 **Note:** Version bump only for package @operato/form

package/dist/src/components/ox-custom-input.js

@@ -70,14 +70,14 @@ let CustomInput = class CustomInput extends LitElement {
 CustomInput.styles = css `
     input {
       margin: auto 0;
-      border-style: var(--form-input-border-style, solid);
-      border-width: var(--form-input-border-width, 1px);
-      border-color: var(--form-input-border-color, #c4c5c6);
-      padding: var(--form-input-padding, 5px);
+      border: 1px solid var(--md-sys-color-outline);
+      padding: 0 var(--spacing-small);
       min-width: var(--form-input-width, 300px);
       max-width: var(--form-input-width, 300px);
+      height: var(--form-element-height-medium);
       outline: var(--form-input-outline, none);
-      background-color: var(--form-input-background-color, #fff);
+      color: var(--form-input-background-color, var(--md-sys-color-on-surface-variant));
+      background-color: var(--form-input-background-color, var(--md-sys-color-surface-variant));
     }
   `;
 __decorate([

package/dist/src/components/ox-custom-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-custom-input.js","sourceRoot":"","sources":["../../../src/components/ox-custom-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\n@customElement('ox-custom-input')\nexport class CustomInput extends LitElement {\n  static styles = css`\n    input {\n      margin: auto 0;\n      border-style: var(--form-input-border-style, solid);\n      border-width: var(--form-input-border-width, 1px);\n      border-color: var(--form-input-border-color, #c4c5c6);\n      padding: var(--form-input-padding, 5px);\n      min-width: var(--form-input-width, 300px);\n      max-width: var(--form-input-width, 300px);\n      outline: var(--form-input-outline, none);\n      background-color: var(--form-input-background-color, #fff);\n    }\n  `\n\n  @property({ type: String }) name?: string\n  @property({ type: String }) placeholder?: string\n  @property({ type: String }) type?: string\n  @property({ type: Object }) props: any\n  @property({ type: Array }) attrs: any\n  @property({ type: String }) valueField?: string\n  @property({ type: Object }) value: any\n  @property({ type: Boolean }) autofocus: boolean = false\n\n  @query('input') input!: HTMLInputElement\n\n  render() {\n    return html`\n      <input\n        name=${this.name}\n        placeholder=${this.placeholder}\n        type=${this.type || 'text'}\n        value=${this.value || ''}\n        @input=${(e: InputEvent) => (this.value = (e.currentTarget as HTMLInputElement).value)}\n        ?autofocus=${this.autofocus}\n      />\n    `\n  }\n\n  get checked() {\n    return this.input.checked\n  }\n\n  set checked(checked) {\n    this.input.checked = checked\n  }\n\n  firstUpdated() {\n    this.dispatchEvent(new CustomEvent('load'))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('props')) {\n      if (this._isObject(this.props)) {\n        for (let prop in this.props) {\n          if (this.props[prop]) {\n            this.input.setAttribute(prop, this.props[prop])\n            this.setAttribute(prop, this.props[prop])\n          }\n        }\n      }\n    }\n\n    if (changes.has('attrs')) {\n      if (this.attrs && Array.isArray(this.attrs)) {\n        this.attrs.forEach(attr => {\n          this.input.setAttribute(attr, '')\n          this.setAttribute(attr, '')\n        })\n      }\n    }\n\n    if (changes.has('value') && this._isObject(this.value)) {\n      let value = this.value\n      this.value = (this.valueField && value[this.valueField]) || value[Object.keys(value)[0]]\n    }\n  }\n\n  _isObject(v: any) {\n    return v instanceof Object && !Array.isArray(v)\n  }\n\n  focus() {\n    this.input.focus()\n  }\n\n  select() {\n    this.input.select()\n  }\n\n  blur() {\n    this.input.blur()\n  }\n\n  checkValidity() {\n    return this.input.checkValidity()\n  }\n}\n"]}
+{"version":3,"file":"ox-custom-input.js","sourceRoot":"","sources":["../../../src/components/ox-custom-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAA;AAGlE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAsBwB,cAAS,GAAY,KAAK,CAAA;IA2EzD,CAAC;IAvEC,MAAM;QACJ,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,IAAI;sBACF,IAAI,CAAC,WAAW;eACvB,IAAI,CAAC,IAAI,IAAI,MAAM;gBAClB,IAAI,CAAC,KAAK,IAAI,EAAE;iBACf,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,aAAkC,CAAC,KAAK,CAAC;qBACzE,IAAI,CAAC,SAAS;;KAE9B,CAAA;IACH,CAAC;IAED,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAA;IAC3B,CAAC;IAED,IAAI,OAAO,CAAC,OAAO;QACjB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAA;IAC9B,CAAC;IAED,YAAY;QACV,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,CAAC,CAAC,CAAA;IAC7C,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC/B,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBAC5B,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;wBACrB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAA;wBAC/C,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAA;oBAC3C,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC5C,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBACxB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAA;oBACjC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAA;gBAC7B,CAAC,CAAC,CAAA;YACJ,CAAC;QACH,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACvD,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;YACtB,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAC1F,CAAC;IACH,CAAC;IAED,SAAS,CAAC,CAAM;QACd,OAAO,CAAC,YAAY,MAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;IACjD,CAAC;IAED,KAAK;QACH,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;IACpB,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAA;IACrB,CAAC;IAED,IAAI;QACF,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAA;IACnB,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAA;IACnC,CAAC;;AA/FM,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;GAYlB,AAZY,CAYZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAW;AACX;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;0CAAW;AACT;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAW;AACT;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAA2B;AAEvC;IAAf,KAAK,CAAC,OAAO,CAAC;0CAAyB;AAxB7B,WAAW;IADvB,aAAa,CAAC,iBAAiB,CAAC;GACpB,WAAW,CAiGvB","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\n@customElement('ox-custom-input')\nexport class CustomInput extends LitElement {\n  static styles = css`\n    input {\n      margin: auto 0;\n      border: 1px solid var(--md-sys-color-outline);\n      padding: 0 var(--spacing-small);\n      min-width: var(--form-input-width, 300px);\n      max-width: var(--form-input-width, 300px);\n      height: var(--form-element-height-medium);\n      outline: var(--form-input-outline, none);\n      color: var(--form-input-background-color, var(--md-sys-color-on-surface-variant));\n      background-color: var(--form-input-background-color, var(--md-sys-color-surface-variant));\n    }\n  `\n\n  @property({ type: String }) name?: string\n  @property({ type: String }) placeholder?: string\n  @property({ type: String }) type?: string\n  @property({ type: Object }) props: any\n  @property({ type: Array }) attrs: any\n  @property({ type: String }) valueField?: string\n  @property({ type: Object }) value: any\n  @property({ type: Boolean }) autofocus: boolean = false\n\n  @query('input') input!: HTMLInputElement\n\n  render() {\n    return html`\n      <input\n        name=${this.name}\n        placeholder=${this.placeholder}\n        type=${this.type || 'text'}\n        value=${this.value || ''}\n        @input=${(e: InputEvent) => (this.value = (e.currentTarget as HTMLInputElement).value)}\n        ?autofocus=${this.autofocus}\n      />\n    `\n  }\n\n  get checked() {\n    return this.input.checked\n  }\n\n  set checked(checked) {\n    this.input.checked = checked\n  }\n\n  firstUpdated() {\n    this.dispatchEvent(new CustomEvent('load'))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('props')) {\n      if (this._isObject(this.props)) {\n        for (let prop in this.props) {\n          if (this.props[prop]) {\n            this.input.setAttribute(prop, this.props[prop])\n            this.setAttribute(prop, this.props[prop])\n          }\n        }\n      }\n    }\n\n    if (changes.has('attrs')) {\n      if (this.attrs && Array.isArray(this.attrs)) {\n        this.attrs.forEach(attr => {\n          this.input.setAttribute(attr, '')\n          this.setAttribute(attr, '')\n        })\n      }\n    }\n\n    if (changes.has('value') && this._isObject(this.value)) {\n      let value = this.value\n      this.value = (this.valueField && value[this.valueField]) || value[Object.keys(value)[0]]\n    }\n  }\n\n  _isObject(v: any) {\n    return v instanceof Object && !Array.isArray(v)\n  }\n\n  focus() {\n    this.input.focus()\n  }\n\n  select() {\n    this.input.select()\n  }\n\n  blur() {\n    this.input.blur()\n  }\n\n  checkValidity() {\n    return this.input.checkValidity()\n  }\n}\n"]}

package/dist/src/components/ox-custom-select.js

@@ -61,7 +61,8 @@ CustomSelect.styles = css `
       border-color: var(--form-input-border-color, #c4c5c6);
       padding: var(--form-input-padding, 5px);
       outline: var(--form-input-outline, none);
-      background-color: var(--form-input-background-color, #fff);
+      color: var(--form-input-background-color, var(--md-sys-color-on-surface-variant));
+      background-color: var(--form-input-background-color, var(--md-sys-color-surface-variant));
       min-width: calc(
         var(--form-input-width, 300px) + 2 * var(--form-input-padding, 5px) + 2 * var(--form-input-border-width, 1px)
       );

package/dist/src/components/ox-custom-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-custom-select.js","sourceRoot":"","sources":["../../../src/components/ox-custom-select.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n@customElement('ox-custom-select')\nexport class CustomSelect extends LitElement {\n  static styles = css`\n    select {\n      margin: auto 0;\n      border-style: var(--form-input-border-style, solid);\n      border-width: var(--form-input-border-width, 1px);\n      border-color: var(--form-input-border-color, #c4c5c6);\n      padding: var(--form-input-padding, 5px);\n      outline: var(--form-input-outline, none);\n      background-color: var(--form-input-background-color, #fff);\n      min-width: calc(\n        var(--form-input-width, 300px) + 2 * var(--form-input-padding, 5px) + 2 * var(--form-input-border-width, 1px)\n      );\n      max-width: calc(\n        var(--form-input-width) + 2 * var(--form-input-padding, 5px) + 2 * var(--form-input-border-width, 1px)\n      );\n      -webkit-appearance: none;\n      -webkit-border-radius: 0px;\n    }\n  `\n\n  @property({ type: String }) name?: string\n  @property({ type: Array }) options?: { name: string; value: any }[]\n  @property({ type: Object }) props: any\n  @property({ type: Array }) attrs: any\n  @property({ type: String }) value: any\n  @property({ type: Boolean }) autofocus: boolean = false\n\n  @query('select') select!: HTMLInputElement\n\n  render() {\n    return html`\n      <select\n        name=${this.name}\n        ?autofocus=${this.autofocus}\n        @change=${(e: Event) => (this.value = (e.currentTarget as HTMLSelectElement).value)}\n      >\n        ${(this.options || []).map(\n          option => html`\n            <option value=${option.value} ?selected=${this.value === option.value}>${option.name}</option>\n          `\n        )}\n      </select>\n    `\n  }\n\n  firstUpdated() {\n    this.dispatchEvent(new CustomEvent('load'))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('props') && this._isObject(this.props)) {\n      for (let prop in this.props) {\n        if (this.props[prop]) {\n          this.select.setAttribute(prop, this.props[prop])\n          this.setAttribute(prop, this.props[prop])\n        }\n      }\n    }\n\n    if (changes.has('attrs')) {\n      if (this.attrs && Array.isArray(this.attrs)) {\n        this.attrs.forEach(attr => {\n          this.select.setAttribute(attr, '')\n          this.setAttribute(attr, '')\n        })\n      }\n    }\n  }\n\n  _isObject(v: any) {\n    return v instanceof Object && !Array.isArray(v)\n  }\n\n  focus() {\n    this.select.focus()\n  }\n\n  blur() {\n    this.select.blur()\n  }\n\n  checkValidity() {\n    return this.select.checkValidity()\n  }\n}\n"]}
+{"version":3,"file":"ox-custom-select.js","sourceRoot":"","sources":["../../../src/components/ox-custom-select.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n@customElement('ox-custom-select')\nexport class CustomSelect extends LitElement {\n  static styles = css`\n    select {\n      margin: auto 0;\n      border-style: var(--form-input-border-style, solid);\n      border-width: var(--form-input-border-width, 1px);\n      border-color: var(--form-input-border-color, #c4c5c6);\n      padding: var(--form-input-padding, 5px);\n      outline: var(--form-input-outline, none);\n      color: var(--form-input-background-color, var(--md-sys-color-on-surface-variant));\n      background-color: var(--form-input-background-color, var(--md-sys-color-surface-variant));\n      min-width: calc(\n        var(--form-input-width, 300px) + 2 * var(--form-input-padding, 5px) + 2 * var(--form-input-border-width, 1px)\n      );\n      max-width: calc(\n        var(--form-input-width) + 2 * var(--form-input-padding, 5px) + 2 * var(--form-input-border-width, 1px)\n      );\n      -webkit-appearance: none;\n      -webkit-border-radius: 0px;\n    }\n  `\n\n  @property({ type: String }) name?: string\n  @property({ type: Array }) options?: { name: string; value: any }[]\n  @property({ type: Object }) props: any\n  @property({ type: Array }) attrs: any\n  @property({ type: String }) value: any\n  @property({ type: Boolean }) autofocus: boolean = false\n\n  @query('select') select!: HTMLInputElement\n\n  render() {\n    return html`\n      <select\n        name=${this.name}\n        ?autofocus=${this.autofocus}\n        @change=${(e: Event) => (this.value = (e.currentTarget as HTMLSelectElement).value)}\n      >\n        ${(this.options || []).map(\n          option => html`\n            <option value=${option.value} ?selected=${this.value === option.value}>${option.name}</option>\n          `\n        )}\n      </select>\n    `\n  }\n\n  firstUpdated() {\n    this.dispatchEvent(new CustomEvent('load'))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('props') && this._isObject(this.props)) {\n      for (let prop in this.props) {\n        if (this.props[prop]) {\n          this.select.setAttribute(prop, this.props[prop])\n          this.setAttribute(prop, this.props[prop])\n        }\n      }\n    }\n\n    if (changes.has('attrs')) {\n      if (this.attrs && Array.isArray(this.attrs)) {\n        this.attrs.forEach(attr => {\n          this.select.setAttribute(attr, '')\n          this.setAttribute(attr, '')\n        })\n      }\n    }\n  }\n\n  _isObject(v: any) {\n    return v instanceof Object && !Array.isArray(v)\n  }\n\n  focus() {\n    this.select.focus()\n  }\n\n  blur() {\n    this.select.blur()\n  }\n\n  checkValidity() {\n    return this.select.checkValidity()\n  }\n}\n"]}

package/dist/src/components/ox-file-uploader.js

@@ -92,7 +92,7 @@ FileUploader.styles = [
         text-transform: capitalize;
 
         border: var(--file-uploader-border);
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         font: var(--file-uploader-font) !important;
         color: var(--file-uploader-color);
       }

package/dist/src/components/ox-file-uploader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-file-uploader.js","sourceRoot":"","sources":["../../../src/components/ox-file-uploader.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { FileDropHelper } from '@operato/utils'\n\n@customElement('ox-file-uploader')\nexport class FileUploader extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        border-radius: var(--border-radius);\n        text-align: center;\n        padding-bottom: 5px !important;\n        text-transform: capitalize;\n\n        border: var(--file-uploader-border);\n        background-color: var(--main-section-background-color);\n        font: var(--file-uploader-font) !important;\n        color: var(--file-uploader-color);\n      }\n      :host > md-icon {\n        color: var(--file-uploader-icon-color);\n      }\n\n      :host(.candrop) {\n        background-color: var(--file-uploader-candrop-background-color);\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        position: relative;\n        width: auto;\n        border: none;\n        text-transform: capitalize;\n\n        padding: var(--file-uploader-label-padding);\n        border-radius: var(--file-uploader-label-border-radius);\n        background-color: var(--file-uploader-label-background-color);\n        color: var(--file-uploader-label-color);\n        font: var(--file-uploader-label-font) !important;\n      }\n\n      ul {\n        max-width: 500px;\n        list-style: none;\n        padding: 0;\n      }\n      li {\n        text-align: left;\n\n        padding: var(--file-uploader-li-padding);\n        border-bottom: var(--file-uploader-li-border-bottom);\n      }\n      li md-icon {\n        float: right;\n        cursor: pointer;\n        font: var(--file-uploader-li-icon-font);\n        margin: var(--file-uploader-li-icon-margin);\n      }\n      li md-icon:hover,\n      li md-icon:active {\n        color: var(--file-uploader-li-icon-focus-color);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) multiple: boolean = false\n  @property({ type: String }) accept: string = '*/*'\n  @property({ type: String }) label?: string\n\n  @property({ type: Array }) _files: File[] = []\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <md-icon>post_add</md-icon>\n      <span>add file or drop files here!</span>\n      <input\n        id=\"input-file\"\n        type=\"file\"\n        accept=${this.accept}\n        ?multiple=${this.multiple}\n        hidden\n        @change=${(e: Event) => {\n          const fileInput = e.currentTarget as HTMLInputElement\n          const files = fileInput.files as FileList\n          //// Temporary Validation preventing file size more than 10mb to be uploaded\n          for (let index = 0; index < files.length; index++) {\n            if (files[index].size > 9999999) {\n              document.dispatchEvent(\n                new CustomEvent('notify', {\n                  detail: {\n                    type: 'error',\n                    message: 'File size must be less than 10 MB.'\n                  }\n                })\n              )\n              throw new Error('File size must be less than 10 MB.')\n            }\n          }\n\n          this._files = [...this._files, ...Array.from(files)]\n\n          this.dispatchEvent(\n            new CustomEvent('files-change', {\n              bubbles: true,\n              composed: true,\n              detail: {\n                files: files\n              }\n            })\n          )\n\n          fileInput.value = ''\n        }}\n      />\n      <label for=\"input-file\">${this.label || 'select file'}</label>\n\n      ${this._files?.length\n        ? html` <ul>\n            ${this._files.map(\n              file => html`\n                <li>\n                  - ${file.name}\n                  <md-icon\n                    @click=${(e: Event) => {\n                      this._files.splice(this._files.indexOf(file), 1)\n                      this.requestUpdate()\n                    }}\n                    >delete_outline</md-icon\n                  >\n                </li>\n              `\n            )}\n          </ul>`\n        : ''}\n    `\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n\n    this.addEventListener('file-drop', (e: Event) => {\n      const de = e as any\n      this._files = this.multiple ? de.detail : de.detail[0] ? [de.detail[0]] : []\n    })\n  }\n\n  get files() {\n    return this._files\n  }\n\n  reset() {\n    this.fileInput.value = ''\n    this._files = []\n  }\n}\n"]}
+{"version":3,"file":"ox-file-uploader.js","sourceRoot":"","sources":["../../../src/components/ox-file-uploader.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { FileDropHelper } from '@operato/utils'\n\n@customElement('ox-file-uploader')\nexport class FileUploader extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        border-radius: var(--border-radius);\n        text-align: center;\n        padding-bottom: 5px !important;\n        text-transform: capitalize;\n\n        border: var(--file-uploader-border);\n        background-color: var(--md-sys-color-background);\n        font: var(--file-uploader-font) !important;\n        color: var(--file-uploader-color);\n      }\n      :host > md-icon {\n        color: var(--file-uploader-icon-color);\n      }\n\n      :host(.candrop) {\n        background-color: var(--file-uploader-candrop-background-color);\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        position: relative;\n        width: auto;\n        border: none;\n        text-transform: capitalize;\n\n        padding: var(--file-uploader-label-padding);\n        border-radius: var(--file-uploader-label-border-radius);\n        background-color: var(--file-uploader-label-background-color);\n        color: var(--file-uploader-label-color);\n        font: var(--file-uploader-label-font) !important;\n      }\n\n      ul {\n        max-width: 500px;\n        list-style: none;\n        padding: 0;\n      }\n      li {\n        text-align: left;\n\n        padding: var(--file-uploader-li-padding);\n        border-bottom: var(--file-uploader-li-border-bottom);\n      }\n      li md-icon {\n        float: right;\n        cursor: pointer;\n        font: var(--file-uploader-li-icon-font);\n        margin: var(--file-uploader-li-icon-margin);\n      }\n      li md-icon:hover,\n      li md-icon:active {\n        color: var(--file-uploader-li-icon-focus-color);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) multiple: boolean = false\n  @property({ type: String }) accept: string = '*/*'\n  @property({ type: String }) label?: string\n\n  @property({ type: Array }) _files: File[] = []\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <md-icon>post_add</md-icon>\n      <span>add file or drop files here!</span>\n      <input\n        id=\"input-file\"\n        type=\"file\"\n        accept=${this.accept}\n        ?multiple=${this.multiple}\n        hidden\n        @change=${(e: Event) => {\n          const fileInput = e.currentTarget as HTMLInputElement\n          const files = fileInput.files as FileList\n          //// Temporary Validation preventing file size more than 10mb to be uploaded\n          for (let index = 0; index < files.length; index++) {\n            if (files[index].size > 9999999) {\n              document.dispatchEvent(\n                new CustomEvent('notify', {\n                  detail: {\n                    type: 'error',\n                    message: 'File size must be less than 10 MB.'\n                  }\n                })\n              )\n              throw new Error('File size must be less than 10 MB.')\n            }\n          }\n\n          this._files = [...this._files, ...Array.from(files)]\n\n          this.dispatchEvent(\n            new CustomEvent('files-change', {\n              bubbles: true,\n              composed: true,\n              detail: {\n                files: files\n              }\n            })\n          )\n\n          fileInput.value = ''\n        }}\n      />\n      <label for=\"input-file\">${this.label || 'select file'}</label>\n\n      ${this._files?.length\n        ? html` <ul>\n            ${this._files.map(\n              file => html`\n                <li>\n                  - ${file.name}\n                  <md-icon\n                    @click=${(e: Event) => {\n                      this._files.splice(this._files.indexOf(file), 1)\n                      this.requestUpdate()\n                    }}\n                    >delete_outline</md-icon\n                  >\n                </li>\n              `\n            )}\n          </ul>`\n        : ''}\n    `\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n\n    this.addEventListener('file-drop', (e: Event) => {\n      const de = e as any\n      this._files = this.multiple ? de.detail : de.detail[0] ? [de.detail[0]] : []\n    })\n  }\n\n  get files() {\n    return this._files\n  }\n\n  reset() {\n    this.fileInput.value = ''\n    this._files = []\n  }\n}\n"]}

package/dist/src/components/ox-search-form.d.ts

@@ -2,30 +2,10 @@ import '@material/web/icon/icon.js';
 import './ox-custom-input.js';
 import './ox-custom-select.js';
 import { LitElement, PropertyValues } from 'lit';
-export declare class SearchForm extends LitElement {
+import { SearchFormField } from '../types.js';
+export declare class OxSearchForm extends LitElement {
     static styles: import("lit").CSSResult[];
-    fields?: {
-        type: string;
-        hidden: boolean;
-        name: string;
-        id: string;
-        label: string;
-        placeholder: string;
-        value: any;
-        field: string;
-        queryName: string;
-        props: {
-            [prop: string]: string;
-        };
-        attrs: string[];
-        options: {
-            name: string;
-            value: string;
-        }[];
-        handlers: {
-            [event: string]: EventListener;
-        };
-    }[];
+    fields?: SearchFormField[];
     hideSearchButton: boolean;
     autofocus: boolean;
     form: HTMLFormElement;
@@ -34,8 +14,14 @@ export declare class SearchForm extends LitElement {
         field: string;
         _value: any;
     })[];
+    private autoUpdateTargetsOnChange;
     render(): import("lit-html").TemplateResult<1>;
+    renderSelect(field: SearchFormField): import("lit-html").TemplateResult<1>;
+    renderCheckbox(field: SearchFormField): import("lit-html").TemplateResult<1>;
+    renderObject(field: SearchFormField, autofocusConsumed: number): import("lit-html").TemplateResult<1>;
+    renderElse(field: SearchFormField, autofocusConsumed: number): import("lit-html").TemplateResult<1>;
     updated(changes: PropertyValues<this>): Promise<void>;
+    getFieldByName(name: string): Element | null;
     _checkInputValidity(): void;
     get searchParams(): string;
     get queryFilters(): {
@@ -53,5 +39,8 @@ export declare class SearchForm extends LitElement {
     serialize(): {
         [name: string]: any;
     };
+    reset(value?: string[] | {
+        [field: string]: any;
+    }): void;
     submit(): void;
 }