From 32646d12a8de0e5b0b0a14e4303537bb960e5509 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <tomivirkki@users.noreply.github.com>
Date: Fri, 13 Dec 2024 16:38:09 +0200
Subject: [PATCH] experiment: add LitElement based version of
 vaadin-form-layout (#8343)

---
 .../src/vaadin-form-layout-mixin.js           | 12 +++--
 .../form-layout/src/vaadin-lit-form-item.d.ts |  6 +++
 .../form-layout/src/vaadin-lit-form-item.js   | 48 +++++++++++++++++++
 .../src/vaadin-lit-form-layout.d.ts           |  6 +++
 .../form-layout/src/vaadin-lit-form-layout.js | 44 +++++++++++++++++
 .../form-layout/test/form-item-lit.test.js    |  2 +
 .../test/form-item-polymer.test.js            |  2 +
 ...{form-item.test.js => form-item.common.js} |  1 -
 .../form-layout/test/form-layout-lit.test.js  |  4 ++
 .../test/form-layout-polymer.test.js          |  4 ++
 ...m-layout.test.js => form-layout.common.js} |  3 --
 .../theme/lumo/vaadin-lit-form-item.js        |  2 +
 .../theme/lumo/vaadin-lit-form-layout.js      |  2 +
 .../theme/material/vaadin-lit-form-item.js    |  2 +
 .../theme/material/vaadin-lit-form-layout.js  |  1 +
 .../form-layout/vaadin-lit-form-item.d.ts     |  1 +
 packages/form-layout/vaadin-lit-form-item.js  |  2 +
 .../form-layout/vaadin-lit-form-layout.d.ts   |  1 +
 .../form-layout/vaadin-lit-form-layout.js     |  2 +
 19 files changed, 137 insertions(+), 8 deletions(-)
 create mode 100644 packages/form-layout/src/vaadin-lit-form-item.d.ts
 create mode 100644 packages/form-layout/src/vaadin-lit-form-item.js
 create mode 100644 packages/form-layout/src/vaadin-lit-form-layout.d.ts
 create mode 100644 packages/form-layout/src/vaadin-lit-form-layout.js
 create mode 100644 packages/form-layout/test/form-item-lit.test.js
 create mode 100644 packages/form-layout/test/form-item-polymer.test.js
 rename packages/form-layout/test/{form-item.test.js => form-item.common.js} (99%)
 create mode 100644 packages/form-layout/test/form-layout-lit.test.js
 create mode 100644 packages/form-layout/test/form-layout-polymer.test.js
 rename packages/form-layout/test/{form-layout.test.js => form-layout.common.js} (99%)
 create mode 100644 packages/form-layout/theme/lumo/vaadin-lit-form-item.js
 create mode 100644 packages/form-layout/theme/lumo/vaadin-lit-form-layout.js
 create mode 100644 packages/form-layout/theme/material/vaadin-lit-form-item.js
 create mode 100644 packages/form-layout/theme/material/vaadin-lit-form-layout.js
 create mode 100644 packages/form-layout/vaadin-lit-form-item.d.ts
 create mode 100644 packages/form-layout/vaadin-lit-form-item.js
 create mode 100644 packages/form-layout/vaadin-lit-form-layout.d.ts
 create mode 100644 packages/form-layout/vaadin-lit-form-layout.js

diff --git a/packages/form-layout/src/vaadin-form-layout-mixin.js b/packages/form-layout/src/vaadin-form-layout-mixin.js
index abb0d329e3..1b094578f8 100644
--- a/packages/form-layout/src/vaadin-form-layout-mixin.js
+++ b/packages/form-layout/src/vaadin-form-layout-mixin.js
@@ -71,6 +71,7 @@ export const FormLayoutMixin = (superClass) =>
             ];
           },
           observer: '_responsiveStepsChanged',
+          sync: true,
         },
 
         /**
@@ -79,6 +80,7 @@ export const FormLayoutMixin = (superClass) =>
          */
         _columnCount: {
           type: Number,
+          sync: true,
         },
 
         /**
@@ -87,6 +89,7 @@ export const FormLayoutMixin = (superClass) =>
          */
         _labelsOnTop: {
           type: Boolean,
+          sync: true,
         },
 
         /** @private */
@@ -102,15 +105,12 @@ export const FormLayoutMixin = (superClass) =>
 
     /** @protected */
     ready() {
-      // Here we create and attach a style element that we use for validating
+      // Here we attach a style element that we use for validating
       // CSS values in `responsiveSteps`. We can't add this to the `<template>`,
       // because Polymer will throw it away. We need to create this before
       // `super.ready()`, because `super.ready()` invokes property observers,
       // and the observer for `responsiveSteps` does CSS value validation.
-      this._styleElement = document.createElement('style');
       this.appendChild(this._styleElement);
-      // Ensure there is a child text node in the style element
-      this._styleElement.textContent = ' ';
 
       super.ready();
 
@@ -120,6 +120,10 @@ export const FormLayoutMixin = (superClass) =>
     constructor() {
       super();
 
+      this._styleElement = document.createElement('style');
+      // Ensure there is a child text node in the style element
+      this._styleElement.textContent = ' ';
+
       this.__intersectionObserver = new IntersectionObserver(([entry]) => {
         if (!entry.isIntersecting) {
           // Prevent possible jump when layout becomes visible
diff --git a/packages/form-layout/src/vaadin-lit-form-item.d.ts b/packages/form-layout/src/vaadin-lit-form-item.d.ts
new file mode 100644
index 0000000000..bded2606a5
--- /dev/null
+++ b/packages/form-layout/src/vaadin-lit-form-item.d.ts
@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+export * from './vaadin-form-item.js';
diff --git a/packages/form-layout/src/vaadin-lit-form-item.js b/packages/form-layout/src/vaadin-lit-form-item.js
new file mode 100644
index 0000000000..2f87a10b59
--- /dev/null
+++ b/packages/form-layout/src/vaadin-lit-form-item.js
@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { FormItemMixin } from './vaadin-form-item-mixin.js';
+import { formItemStyles } from './vaadin-form-layout-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-form-item>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class FormItem extends FormItemMixin(ThemableMixin(PolylitMixin(LitElement))) {
+  static get is() {
+    return 'vaadin-form-item';
+  }
+
+  static get styles() {
+    return formItemStyles;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="label" part="label" @click="${this.__onLabelClick}">
+        <slot name="label" id="labelSlot" @slotchange="${this.__onLabelSlotChange}"></slot>
+        <span part="required-indicator" aria-hidden="true"></span>
+      </div>
+      <div id="spacing"></div>
+      <div id="content">
+        <slot id="contentSlot" @slotchange="${this.__onContentSlotChange}"></slot>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(FormItem);
+
+export { FormItem };
diff --git a/packages/form-layout/src/vaadin-lit-form-layout.d.ts b/packages/form-layout/src/vaadin-lit-form-layout.d.ts
new file mode 100644
index 0000000000..0e7b6c8686
--- /dev/null
+++ b/packages/form-layout/src/vaadin-lit-form-layout.d.ts
@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+export * from './vaadin-form-layout.js';
diff --git a/packages/form-layout/src/vaadin-lit-form-layout.js b/packages/form-layout/src/vaadin-lit-form-layout.js
new file mode 100644
index 0000000000..6626e4ac5f
--- /dev/null
+++ b/packages/form-layout/src/vaadin-lit-form-layout.js
@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { FormLayoutMixin } from './vaadin-form-layout-mixin.js';
+import { formLayoutStyles } from './vaadin-form-layout-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-form-layout>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class FormLayout extends FormLayoutMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-form-layout';
+  }
+
+  static get styles() {
+    return formLayoutStyles;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="layout">
+        <slot id="slot"></slot>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(FormLayout);
+
+export { FormLayout };
diff --git a/packages/form-layout/test/form-item-lit.test.js b/packages/form-layout/test/form-item-lit.test.js
new file mode 100644
index 0000000000..21d4e84802
--- /dev/null
+++ b/packages/form-layout/test/form-item-lit.test.js
@@ -0,0 +1,2 @@
+import '../vaadin-lit-form-item.js';
+import './form-item.common.js';
diff --git a/packages/form-layout/test/form-item-polymer.test.js b/packages/form-layout/test/form-item-polymer.test.js
new file mode 100644
index 0000000000..72ee874ffa
--- /dev/null
+++ b/packages/form-layout/test/form-item-polymer.test.js
@@ -0,0 +1,2 @@
+import '../vaadin-form-item.js';
+import './form-item.common.js';
diff --git a/packages/form-layout/test/form-item.test.js b/packages/form-layout/test/form-item.common.js
similarity index 99%
rename from packages/form-layout/test/form-item.test.js
rename to packages/form-layout/test/form-item.common.js
index 4b18892884..00e67d3605 100644
--- a/packages/form-layout/test/form-item.test.js
+++ b/packages/form-layout/test/form-item.common.js
@@ -3,7 +3,6 @@ import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '@vaadin/custom-field';
 import '@vaadin/text-field';
-import '../vaadin-form-item.js';
 
 describe('form-item', () => {
   let item, label, input;
diff --git a/packages/form-layout/test/form-layout-lit.test.js b/packages/form-layout/test/form-layout-lit.test.js
new file mode 100644
index 0000000000..ba3a3ce78b
--- /dev/null
+++ b/packages/form-layout/test/form-layout-lit.test.js
@@ -0,0 +1,4 @@
+import '@vaadin/text-field/vaadin-lit-text-field.js';
+import '../vaadin-lit-form-layout.js';
+import '../vaadin-lit-form-item.js';
+import './form-layout.common.js';
diff --git a/packages/form-layout/test/form-layout-polymer.test.js b/packages/form-layout/test/form-layout-polymer.test.js
new file mode 100644
index 0000000000..fa24ae6434
--- /dev/null
+++ b/packages/form-layout/test/form-layout-polymer.test.js
@@ -0,0 +1,4 @@
+import '@vaadin/text-field/vaadin-text-field.js';
+import '../vaadin-form-layout.js';
+import '../vaadin-form-item.js';
+import './form-layout.common.js';
diff --git a/packages/form-layout/test/form-layout.test.js b/packages/form-layout/test/form-layout.common.js
similarity index 99%
rename from packages/form-layout/test/form-layout.test.js
rename to packages/form-layout/test/form-layout.common.js
index 7616fdbe3c..94bb17cad8 100644
--- a/packages/form-layout/test/form-layout.test.js
+++ b/packages/form-layout/test/form-layout.common.js
@@ -2,9 +2,6 @@ import { expect } from '@vaadin/chai-plugins';
 import { aTimeout, fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '@polymer/polymer/lib/elements/dom-repeat.js';
-import '@vaadin/text-field/vaadin-text-field.js';
-import '../vaadin-form-layout.js';
-import '../vaadin-form-item.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 /**
diff --git a/packages/form-layout/theme/lumo/vaadin-lit-form-item.js b/packages/form-layout/theme/lumo/vaadin-lit-form-item.js
new file mode 100644
index 0000000000..6df64e795f
--- /dev/null
+++ b/packages/form-layout/theme/lumo/vaadin-lit-form-item.js
@@ -0,0 +1,2 @@
+import './vaadin-form-item-styles.js';
+import '../../src/vaadin-lit-form-item.js';
diff --git a/packages/form-layout/theme/lumo/vaadin-lit-form-layout.js b/packages/form-layout/theme/lumo/vaadin-lit-form-layout.js
new file mode 100644
index 0000000000..d36728bbc0
--- /dev/null
+++ b/packages/form-layout/theme/lumo/vaadin-lit-form-layout.js
@@ -0,0 +1,2 @@
+import './vaadin-form-layout-styles.js';
+import '../../src/vaadin-lit-form-layout.js';
diff --git a/packages/form-layout/theme/material/vaadin-lit-form-item.js b/packages/form-layout/theme/material/vaadin-lit-form-item.js
new file mode 100644
index 0000000000..6df64e795f
--- /dev/null
+++ b/packages/form-layout/theme/material/vaadin-lit-form-item.js
@@ -0,0 +1,2 @@
+import './vaadin-form-item-styles.js';
+import '../../src/vaadin-lit-form-item.js';
diff --git a/packages/form-layout/theme/material/vaadin-lit-form-layout.js b/packages/form-layout/theme/material/vaadin-lit-form-layout.js
new file mode 100644
index 0000000000..baed6f49db
--- /dev/null
+++ b/packages/form-layout/theme/material/vaadin-lit-form-layout.js
@@ -0,0 +1 @@
+import '../../src/vaadin-lit-form-layout.js';
diff --git a/packages/form-layout/vaadin-lit-form-item.d.ts b/packages/form-layout/vaadin-lit-form-item.d.ts
new file mode 100644
index 0000000000..6c71ce5cb7
--- /dev/null
+++ b/packages/form-layout/vaadin-lit-form-item.d.ts
@@ -0,0 +1 @@
+export * from './vaadin-form-item.js';
diff --git a/packages/form-layout/vaadin-lit-form-item.js b/packages/form-layout/vaadin-lit-form-item.js
new file mode 100644
index 0000000000..9c77e506e1
--- /dev/null
+++ b/packages/form-layout/vaadin-lit-form-item.js
@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-form-item.js';
+export * from './src/vaadin-lit-form-item.js';
diff --git a/packages/form-layout/vaadin-lit-form-layout.d.ts b/packages/form-layout/vaadin-lit-form-layout.d.ts
new file mode 100644
index 0000000000..f145a18f07
--- /dev/null
+++ b/packages/form-layout/vaadin-lit-form-layout.d.ts
@@ -0,0 +1 @@
+export * from './vaadin-form-layout.js';
diff --git a/packages/form-layout/vaadin-lit-form-layout.js b/packages/form-layout/vaadin-lit-form-layout.js
new file mode 100644
index 0000000000..01db582910
--- /dev/null
+++ b/packages/form-layout/vaadin-lit-form-layout.js
@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-form-layout.js';
+export * from './src/vaadin-lit-form-layout.js';