Add field components, convert BigDecimalField

vaadin · Feb 7, 2025 · 6d0842d · 6d0842d
1 parent 8c0c709
commit 6d0842d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 20 deletions.
diff --git a/shared/web-components-vite-plugin.ts b/shared/web-components-vite-plugin.ts
@@ -57,12 +57,16 @@ export function useLitWebComponents(): PluginOption {
             'date-time-picker',
             'details',
             'dialog',
+            'email-field',
             'horizontal-layout',
             'list-box',
+            'integer-field',
             'item',
             'map',
             'multi-select-combo-box',
             'notification',
+            'number-field',
+            'password-field',
             'radio-button',
             'radio-button-group',
             'scroller',
@@ -71,6 +75,8 @@ export function useLitWebComponents(): PluginOption {
             'tabs',
             'tab',
             'tabsheet',
+            'text-area',
+            'text-field',
             'time-picker',
             'vertical-layout',
             'virtual-list'

diff --git a/...ext-field-flow/src/main/resources/META-INF/resources/frontend/vaadin-big-decimal-field.js b/...ext-field-flow/src/main/resources/META-INF/resources/frontend/vaadin-big-decimal-field.js
@@ -13,39 +13,39 @@
  * License for the specific language governing permissions and limitations under
  * the License.
  */
-let memoizedTemplate;
+import { css } from 'lit';
 
 customElements.whenDefined('vaadin-text-field').then(() => {
   class BigDecimalFieldElement extends customElements.get('vaadin-text-field') {
-    static get template() {
-      if (!memoizedTemplate) {
-        memoizedTemplate = super.template.cloneNode(true);
-        memoizedTemplate.innerHTML += `<style>
-                :host {
-                  width: 8em;
-                }
+    static get is() {
+      return 'vaadin-big-decimal-field';
+    }
 
-                :host([dir="rtl"]) [part="input-field"] {
-                  direction: ltr;
-                }
+    static get styles() {
+      return [
+        ...super.styles,
+        css`
+          :host {
+            width: 8em;
+          }
 
-                :host([dir="rtl"]) [part="input-field"] ::slotted(input) {
-                  --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em) !important;
-                }
-          </style>`;
-      }
-      return memoizedTemplate;
-    }
+          :host([dir='rtl']) [part='input-field'] {
+            direction: ltr;
+          }
 
-    static get is() {
-      return 'vaadin-big-decimal-field';
+          :host([dir='rtl']) [part='input-field'] ::slotted(input) {
+            --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em) !important;
+          }
+        `
+      ];
     }
 
     static get properties() {
       return {
         _decimalSeparator: {
           type: String,
           value: '.',
+          sync: true,
           observer: '__decimalSeparatorChanged'
         }
       };