From 6d0842dcf9c01abb8b0e5002e1ce7566beffa285 Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Fri, 7 Feb 2025 10:54:30 +0200
Subject: [PATCH] Add field components, convert BigDecimalField

---
 shared/web-components-vite-plugin.ts          |  6 +++
 .../frontend/vaadin-big-decimal-field.js      | 40 +++++++++----------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/shared/web-components-vite-plugin.ts b/shared/web-components-vite-plugin.ts
index 316167473e1..0a854bea1ce 100644
--- 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/vaadin-text-field-flow-parent/vaadin-text-field-flow/src/main/resources/META-INF/resources/frontend/vaadin-big-decimal-field.js b/vaadin-text-field-flow-parent/vaadin-text-field-flow/src/main/resources/META-INF/resources/frontend/vaadin-big-decimal-field.js
index 61ca9e1a6c0..4763605c5c9 100644
--- a/vaadin-text-field-flow-parent/vaadin-text-field-flow/src/main/resources/META-INF/resources/frontend/vaadin-big-decimal-field.js
+++ b/vaadin-text-field-flow-parent/vaadin-text-field-flow/src/main/resources/META-INF/resources/frontend/vaadin-big-decimal-field.js
@@ -13,32 +13,31 @@
  * 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() {
@@ -46,6 +45,7 @@ customElements.whenDefined('vaadin-text-field').then(() => {
         _decimalSeparator: {
           type: String,
           value: '.',
+          sync: true,
           observer: '__decimalSeparatorChanged'
         }
       };