From 15671aab15dbd84a18d6d53bd281424a1f948b15 Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Fri, 13 Dec 2024 16:14:49 +0200
Subject: [PATCH 1/2] experiment: add LitElement based version of app-layout

---
 .../app-layout/src/vaadin-app-layout-mixin.js |  4 +
 .../app-layout/src/vaadin-lit-app-layout.d.ts |  1 +
 .../app-layout/src/vaadin-lit-app-layout.js   | 59 +++++++++++++
 .../src/vaadin-lit-drawer-toggle.d.ts         |  1 +
 .../src/vaadin-lit-drawer-toggle.js           | 87 +++++++++++++++++++
 .../app-layout/test/app-layout-lit.test.js    |  3 +
 .../test/app-layout-polymer.test.js           |  3 +
 ...pp-layout.test.js => app-layout.common.js} |  2 -
 .../app-layout/test/drawer-toggle-lit.test.js |  2 +
 .../test/drawer-toggle-polymer.test.js        |  2 +
 ...toggle.test.js => drawer-toggle.common.js} |  6 +-
 .../test/keyboard-desktop-lit.test.js         |  3 +
 .../test/keyboard-desktop-polymer.test.js     |  3 +
 ...top.test.js => keyboard-desktop.common.js} |  2 -
 .../test/keyboard-mobile-lit.test.js          |  3 +
 .../test/keyboard-mobile-polymer.test.js      |  3 +
 ...bile.test.js => keyboard-mobile.common.js} |  2 -
 .../theme/lumo/vaadin-lit-app-layout.js       |  2 +
 .../theme/lumo/vaadin-lit-drawer-toggle.js    |  2 +
 .../theme/material/vaadin-lit-app-layout.js   |  2 +
 .../material/vaadin-lit-drawer-toggle.js      |  2 +
 .../app-layout/vaadin-lit-app-layout.d.ts     |  1 +
 packages/app-layout/vaadin-lit-app-layout.js  |  2 +
 .../app-layout/vaadin-lit-drawer-toggle.d.ts  |  1 +
 .../app-layout/vaadin-lit-drawer-toggle.js    |  2 +
 25 files changed, 191 insertions(+), 9 deletions(-)
 create mode 100644 packages/app-layout/src/vaadin-lit-app-layout.d.ts
 create mode 100644 packages/app-layout/src/vaadin-lit-app-layout.js
 create mode 100644 packages/app-layout/src/vaadin-lit-drawer-toggle.d.ts
 create mode 100644 packages/app-layout/src/vaadin-lit-drawer-toggle.js
 create mode 100644 packages/app-layout/test/app-layout-lit.test.js
 create mode 100644 packages/app-layout/test/app-layout-polymer.test.js
 rename packages/app-layout/test/{app-layout.test.js => app-layout.common.js} (99%)
 create mode 100644 packages/app-layout/test/drawer-toggle-lit.test.js
 create mode 100644 packages/app-layout/test/drawer-toggle-polymer.test.js
 rename packages/app-layout/test/{drawer-toggle.test.js => drawer-toggle.common.js} (96%)
 create mode 100644 packages/app-layout/test/keyboard-desktop-lit.test.js
 create mode 100644 packages/app-layout/test/keyboard-desktop-polymer.test.js
 rename packages/app-layout/test/{keyboard-desktop.test.js => keyboard-desktop.common.js} (97%)
 create mode 100644 packages/app-layout/test/keyboard-mobile-lit.test.js
 create mode 100644 packages/app-layout/test/keyboard-mobile-polymer.test.js
 rename packages/app-layout/test/{keyboard-mobile.test.js => keyboard-mobile.common.js} (98%)
 create mode 100644 packages/app-layout/theme/lumo/vaadin-lit-app-layout.js
 create mode 100644 packages/app-layout/theme/lumo/vaadin-lit-drawer-toggle.js
 create mode 100644 packages/app-layout/theme/material/vaadin-lit-app-layout.js
 create mode 100644 packages/app-layout/theme/material/vaadin-lit-drawer-toggle.js
 create mode 100644 packages/app-layout/vaadin-lit-app-layout.d.ts
 create mode 100644 packages/app-layout/vaadin-lit-app-layout.js
 create mode 100644 packages/app-layout/vaadin-lit-drawer-toggle.d.ts
 create mode 100644 packages/app-layout/vaadin-lit-drawer-toggle.js

diff --git a/packages/app-layout/src/vaadin-app-layout-mixin.js b/packages/app-layout/src/vaadin-app-layout-mixin.js
index 75a589100e..58b22a9ab3 100644
--- a/packages/app-layout/src/vaadin-app-layout-mixin.js
+++ b/packages/app-layout/src/vaadin-app-layout-mixin.js
@@ -44,6 +44,7 @@ export const AppLayoutMixin = (superclass) =>
         i18n: {
           type: Object,
           observer: '__i18nChanged',
+          sync: true,
           value: () => {
             return {
               drawer: 'Drawer',
@@ -64,6 +65,7 @@ export const AppLayoutMixin = (superclass) =>
           notify: true,
           reflectToAttribute: true,
           observer: '__primarySectionChanged',
+          sync: true,
         },
 
         /**
@@ -80,6 +82,7 @@ export const AppLayoutMixin = (superclass) =>
           value: true,
           reflectToAttribute: true,
           observer: '__drawerOpenedChanged',
+          sync: true,
         },
 
         /**
@@ -93,6 +96,7 @@ export const AppLayoutMixin = (superclass) =>
           readOnly: true,
           value: false,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
diff --git a/packages/app-layout/src/vaadin-lit-app-layout.d.ts b/packages/app-layout/src/vaadin-lit-app-layout.d.ts
new file mode 100644
index 0000000000..ffe82c2bef
--- /dev/null
+++ b/packages/app-layout/src/vaadin-lit-app-layout.d.ts
@@ -0,0 +1 @@
+export * from './vaadin-app-layout.js';
diff --git a/packages/app-layout/src/vaadin-lit-app-layout.js b/packages/app-layout/src/vaadin-lit-app-layout.js
new file mode 100644
index 0000000000..34431b140b
--- /dev/null
+++ b/packages/app-layout/src/vaadin-lit-app-layout.js
@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './detect-ios-navbar.js';
+import './safe-area-inset.js';
+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 { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
+import { appLayoutStyles } from './vaadin-app-layout-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-app-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 AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-app-layout';
+  }
+
+  static get styles() {
+    return appLayoutStyles;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div part="navbar" id="navbarTop">
+        <slot name="navbar" @slotchange="${this._updateTouchOptimizedMode}"></slot>
+      </div>
+      <div part="backdrop" @click="${this._onBackdropClick}" @touchend="${this._onBackdropTouchend}"></div>
+      <div part="drawer" id="drawer">
+        <slot name="drawer" id="drawerSlot" @slotchange="${this._updateDrawerSize}"></slot>
+      </div>
+      <div content>
+        <slot></slot>
+      </div>
+      <div part="navbar" id="navbarBottom" bottom hidden>
+        <slot name="navbar-bottom"></slot>
+      </div>
+      <div hidden>
+        <slot id="touchSlot" name="navbar touch-optimized" @slotchange="${this._updateTouchOptimizedMode}"></slot>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(AppLayout);
+
+export { AppLayout };
diff --git a/packages/app-layout/src/vaadin-lit-drawer-toggle.d.ts b/packages/app-layout/src/vaadin-lit-drawer-toggle.d.ts
new file mode 100644
index 0000000000..3bb9cc0987
--- /dev/null
+++ b/packages/app-layout/src/vaadin-lit-drawer-toggle.d.ts
@@ -0,0 +1 @@
+export * from './vaadin-drawer-toggle.js';
diff --git a/packages/app-layout/src/vaadin-lit-drawer-toggle.js b/packages/app-layout/src/vaadin-lit-drawer-toggle.js
new file mode 100644
index 0000000000..d9c9dd6250
--- /dev/null
+++ b/packages/app-layout/src/vaadin-lit-drawer-toggle.js
@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 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 { buttonStyles } from '@vaadin/button/src/vaadin-button-base.js';
+import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { isEmptyTextNode } from '@vaadin/component-base/src/dom-utils.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { drawerToggle } from './vaadin-drawer-toggle-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-drawer-toggle>` 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 DrawerToggle extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-drawer-toggle';
+  }
+
+  static get styles() {
+    return [buttonStyles, drawerToggle];
+  }
+
+  static get properties() {
+    return {
+      ariaLabel: {
+        type: String,
+        value: 'Toggle navigation panel',
+        reflectToAttribute: true,
+        sync: true,
+      },
+
+      /** @private */
+      _showFallbackIcon: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('drawer-toggle-click', { bubbles: true, composed: true }));
+    });
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <slot id="slot" @slotchange="${this._toggleFallbackIcon}">
+        <div part="icon"></div>
+      </slot>
+      <div part="icon" ?hidden="${!this._showFallbackIcon}"></div>
+    `;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._toggleFallbackIcon();
+  }
+
+  /** @private */
+  _toggleFallbackIcon() {
+    const nodes = this.$.slot.assignedNodes();
+
+    // Show fallback icon if there are 1-2 empty text nodes assigned to the default slot.
+    this._showFallbackIcon = nodes.length > 0 && nodes.every((node) => isEmptyTextNode(node));
+  }
+}
+
+defineCustomElement(DrawerToggle);
+
+export { DrawerToggle };
diff --git a/packages/app-layout/test/app-layout-lit.test.js b/packages/app-layout/test/app-layout-lit.test.js
new file mode 100644
index 0000000000..a420384cd9
--- /dev/null
+++ b/packages/app-layout/test/app-layout-lit.test.js
@@ -0,0 +1,3 @@
+import '../src/vaadin-lit-app-layout.js';
+import '../src/vaadin-lit-drawer-toggle.js';
+import './app-layout.common.js';
diff --git a/packages/app-layout/test/app-layout-polymer.test.js b/packages/app-layout/test/app-layout-polymer.test.js
new file mode 100644
index 0000000000..c7bf966fc1
--- /dev/null
+++ b/packages/app-layout/test/app-layout-polymer.test.js
@@ -0,0 +1,3 @@
+import '../vaadin-app-layout.js';
+import '../vaadin-drawer-toggle.js';
+import './app-layout.common.js';
diff --git a/packages/app-layout/test/app-layout.test.js b/packages/app-layout/test/app-layout.common.js
similarity index 99%
rename from packages/app-layout/test/app-layout.test.js
rename to packages/app-layout/test/app-layout.common.js
index 102554389b..a16689aed2 100644
--- a/packages/app-layout/test/app-layout.test.js
+++ b/packages/app-layout/test/app-layout.common.js
@@ -9,8 +9,6 @@ import {
   oneEvent,
 } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
-import '../vaadin-app-layout.js';
-import '../vaadin-drawer-toggle.js';
 
 /**
  * Resolves once the function is invoked on the given object.
diff --git a/packages/app-layout/test/drawer-toggle-lit.test.js b/packages/app-layout/test/drawer-toggle-lit.test.js
new file mode 100644
index 0000000000..794093f1fb
--- /dev/null
+++ b/packages/app-layout/test/drawer-toggle-lit.test.js
@@ -0,0 +1,2 @@
+import '../src/vaadin-lit-drawer-toggle.js';
+import './drawer-toggle.common.js';
diff --git a/packages/app-layout/test/drawer-toggle-polymer.test.js b/packages/app-layout/test/drawer-toggle-polymer.test.js
new file mode 100644
index 0000000000..886dd82a8d
--- /dev/null
+++ b/packages/app-layout/test/drawer-toggle-polymer.test.js
@@ -0,0 +1,2 @@
+import '../vaadin-drawer-toggle.js';
+import './drawer-toggle.common.js';
diff --git a/packages/app-layout/test/drawer-toggle.test.js b/packages/app-layout/test/drawer-toggle.common.js
similarity index 96%
rename from packages/app-layout/test/drawer-toggle.test.js
rename to packages/app-layout/test/drawer-toggle.common.js
index 1e28753c4f..be7b60cdd5 100644
--- a/packages/app-layout/test/drawer-toggle.test.js
+++ b/packages/app-layout/test/drawer-toggle.common.js
@@ -1,13 +1,13 @@
 import { expect } from '@vaadin/chai-plugins';
-import { enter, fixtureSync, nextFrame, space } from '@vaadin/testing-helpers';
+import { enter, fixtureSync, nextFrame, nextRender, space } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
-import '../vaadin-drawer-toggle.js';
 
 describe('drawer-toggle', () => {
   let toggle;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     toggle = fixtureSync('<vaadin-drawer-toggle></vaadin-drawer-toggle>');
+    await nextRender();
   });
 
   describe('custom element definition', () => {
diff --git a/packages/app-layout/test/keyboard-desktop-lit.test.js b/packages/app-layout/test/keyboard-desktop-lit.test.js
new file mode 100644
index 0000000000..28aece9072
--- /dev/null
+++ b/packages/app-layout/test/keyboard-desktop-lit.test.js
@@ -0,0 +1,3 @@
+import '../src/vaadin-lit-app-layout.js';
+import '../src/vaadin-lit-drawer-toggle.js';
+import './keyboard-desktop.common.js';
diff --git a/packages/app-layout/test/keyboard-desktop-polymer.test.js b/packages/app-layout/test/keyboard-desktop-polymer.test.js
new file mode 100644
index 0000000000..73c32dd562
--- /dev/null
+++ b/packages/app-layout/test/keyboard-desktop-polymer.test.js
@@ -0,0 +1,3 @@
+import '../vaadin-app-layout.js';
+import '../vaadin-drawer-toggle.js';
+import './keyboard-desktop.common.js';
diff --git a/packages/app-layout/test/keyboard-desktop.test.js b/packages/app-layout/test/keyboard-desktop.common.js
similarity index 97%
rename from packages/app-layout/test/keyboard-desktop.test.js
rename to packages/app-layout/test/keyboard-desktop.common.js
index d9ff0b0842..867204b849 100644
--- a/packages/app-layout/test/keyboard-desktop.test.js
+++ b/packages/app-layout/test/keyboard-desktop.common.js
@@ -1,8 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers';
 import { setViewport } from '@web/test-runner-commands';
-import '../vaadin-app-layout.js';
-import '../vaadin-drawer-toggle.js';
 import { tab } from './helpers.js';
 
 describe('desktop navigation', () => {
diff --git a/packages/app-layout/test/keyboard-mobile-lit.test.js b/packages/app-layout/test/keyboard-mobile-lit.test.js
new file mode 100644
index 0000000000..481f244880
--- /dev/null
+++ b/packages/app-layout/test/keyboard-mobile-lit.test.js
@@ -0,0 +1,3 @@
+import '../src/vaadin-lit-app-layout.js';
+import '../src/vaadin-lit-drawer-toggle.js';
+import './keyboard-mobile.common.js';
diff --git a/packages/app-layout/test/keyboard-mobile-polymer.test.js b/packages/app-layout/test/keyboard-mobile-polymer.test.js
new file mode 100644
index 0000000000..f5790ad1ba
--- /dev/null
+++ b/packages/app-layout/test/keyboard-mobile-polymer.test.js
@@ -0,0 +1,3 @@
+import '../vaadin-app-layout.js';
+import '../vaadin-drawer-toggle.js';
+import './keyboard-mobile.common.js';
diff --git a/packages/app-layout/test/keyboard-mobile.test.js b/packages/app-layout/test/keyboard-mobile.common.js
similarity index 98%
rename from packages/app-layout/test/keyboard-mobile.test.js
rename to packages/app-layout/test/keyboard-mobile.common.js
index b99a29e05f..64e1f2b5a2 100644
--- a/packages/app-layout/test/keyboard-mobile.test.js
+++ b/packages/app-layout/test/keyboard-mobile.common.js
@@ -1,8 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers';
 import { setViewport } from '@web/test-runner-commands';
-import '../vaadin-app-layout.js';
-import '../vaadin-drawer-toggle.js';
 import { esc, shiftTab, tab } from './helpers.js';
 
 describe('mobile navigation', () => {
diff --git a/packages/app-layout/theme/lumo/vaadin-lit-app-layout.js b/packages/app-layout/theme/lumo/vaadin-lit-app-layout.js
new file mode 100644
index 0000000000..e709ff0f2c
--- /dev/null
+++ b/packages/app-layout/theme/lumo/vaadin-lit-app-layout.js
@@ -0,0 +1,2 @@
+import './vaadin-app-layout-styles.js';
+import '../../src/vaadin-lit-app-layout.js';
diff --git a/packages/app-layout/theme/lumo/vaadin-lit-drawer-toggle.js b/packages/app-layout/theme/lumo/vaadin-lit-drawer-toggle.js
new file mode 100644
index 0000000000..ccff83489e
--- /dev/null
+++ b/packages/app-layout/theme/lumo/vaadin-lit-drawer-toggle.js
@@ -0,0 +1,2 @@
+import './vaadin-drawer-toggle-styles.js';
+import '../../src/vaadin-lit-drawer-toggle.js';
diff --git a/packages/app-layout/theme/material/vaadin-lit-app-layout.js b/packages/app-layout/theme/material/vaadin-lit-app-layout.js
new file mode 100644
index 0000000000..e709ff0f2c
--- /dev/null
+++ b/packages/app-layout/theme/material/vaadin-lit-app-layout.js
@@ -0,0 +1,2 @@
+import './vaadin-app-layout-styles.js';
+import '../../src/vaadin-lit-app-layout.js';
diff --git a/packages/app-layout/theme/material/vaadin-lit-drawer-toggle.js b/packages/app-layout/theme/material/vaadin-lit-drawer-toggle.js
new file mode 100644
index 0000000000..ccff83489e
--- /dev/null
+++ b/packages/app-layout/theme/material/vaadin-lit-drawer-toggle.js
@@ -0,0 +1,2 @@
+import './vaadin-drawer-toggle-styles.js';
+import '../../src/vaadin-lit-drawer-toggle.js';
diff --git a/packages/app-layout/vaadin-lit-app-layout.d.ts b/packages/app-layout/vaadin-lit-app-layout.d.ts
new file mode 100644
index 0000000000..3b6ca44a19
--- /dev/null
+++ b/packages/app-layout/vaadin-lit-app-layout.d.ts
@@ -0,0 +1 @@
+export * from './src/vaadin-app-layout.js';
diff --git a/packages/app-layout/vaadin-lit-app-layout.js b/packages/app-layout/vaadin-lit-app-layout.js
new file mode 100644
index 0000000000..a27bacd0ba
--- /dev/null
+++ b/packages/app-layout/vaadin-lit-app-layout.js
@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-app-layout.js';
+export * from './src/vaadin-lit-app-layout.js';
diff --git a/packages/app-layout/vaadin-lit-drawer-toggle.d.ts b/packages/app-layout/vaadin-lit-drawer-toggle.d.ts
new file mode 100644
index 0000000000..7256360f4c
--- /dev/null
+++ b/packages/app-layout/vaadin-lit-drawer-toggle.d.ts
@@ -0,0 +1 @@
+export * from './src/vaadin-drawer-toggle.js';
diff --git a/packages/app-layout/vaadin-lit-drawer-toggle.js b/packages/app-layout/vaadin-lit-drawer-toggle.js
new file mode 100644
index 0000000000..1c4262ea91
--- /dev/null
+++ b/packages/app-layout/vaadin-lit-drawer-toggle.js
@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-drawer-toggle.js';
+export * from './src/vaadin-lit-drawer-toggle.js';

From 558b9f7699cb985c7dbce0aa1c033157f57a973e Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Fri, 13 Dec 2024 16:42:20 +0200
Subject: [PATCH 2/2] test: remove nextRender from drawer-toggle test

---
 packages/app-layout/test/drawer-toggle.common.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/app-layout/test/drawer-toggle.common.js b/packages/app-layout/test/drawer-toggle.common.js
index be7b60cdd5..90efcf84b9 100644
--- a/packages/app-layout/test/drawer-toggle.common.js
+++ b/packages/app-layout/test/drawer-toggle.common.js
@@ -1,13 +1,12 @@
 import { expect } from '@vaadin/chai-plugins';
-import { enter, fixtureSync, nextFrame, nextRender, space } from '@vaadin/testing-helpers';
+import { enter, fixtureSync, nextFrame, space } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 
 describe('drawer-toggle', () => {
   let toggle;
 
-  beforeEach(async () => {
+  beforeEach(() => {
     toggle = fixtureSync('<vaadin-drawer-toggle></vaadin-drawer-toggle>');
-    await nextRender();
   });
 
   describe('custom element definition', () => {