@vaadin/app-layout 23.1.0-alpha3 → 23.1.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/app-layout",
-  "version": "23.1.0-alpha3",
+  "version": "23.1.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -34,17 +34,17 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.1.0-alpha3",
-    "@vaadin/component-base": "23.1.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
+    "@vaadin/button": "23.1.0-alpha4",
+    "@vaadin/component-base": "23.1.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha4",
+    "@vaadin/vaadin-material-styles": "23.1.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/tabs": "23.1.0-alpha3",
+    "@vaadin/tabs": "23.1.0-alpha4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
+  "gitHead": "aacdb7fe09811894751f0378ff7fb66071892c71"
 }

package/src/detect-ios-navbar.js

@@ -13,7 +13,7 @@ export function _detectIosNavbar() {
     const landscape = innerWidth > innerHeight;
     const clientHeight = document.documentElement.clientHeight;
     if (landscape && clientHeight > innerHeight) {
-      document.documentElement.style.setProperty('--vaadin-viewport-offset-bottom', clientHeight - innerHeight + 'px');
+      document.documentElement.style.setProperty('--vaadin-viewport-offset-bottom', `${clientHeight - innerHeight}px`);
     } else {
       document.documentElement.style.setProperty('--vaadin-viewport-offset-bottom', '');
     }

package/src/vaadin-app-layout.d.ts

@@ -185,13 +185,13 @@ declare class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(HTMLE
   addEventListener<K extends keyof AppLayoutEventMap>(
     type: K,
     listener: (this: AppLayout, ev: AppLayoutEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof AppLayoutEventMap>(
     type: K,
     listener: (this: AppLayout, ev: AppLayoutEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

package/src/vaadin-app-layout.js

@@ -341,9 +341,9 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
         observer: '__i18nChanged',
         value: () => {
           return {
-            drawer: 'Drawer'
+            drawer: 'Drawer',
           };
-        }
+        },
       },
 
       /**
@@ -358,7 +358,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
         value: 'navbar',
         notify: true,
         reflectToAttribute: true,
-        observer: '__primarySectionChanged'
+        observer: '__primarySectionChanged',
       },
 
       /**
@@ -374,7 +374,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
         notify: true,
         value: true,
         reflectToAttribute: true,
-        observer: '__drawerOpenedChanged'
+        observer: '__drawerOpenedChanged',
       },
 
       /**
@@ -387,7 +387,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
         notify: true,
         readOnly: true,
         value: false,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -400,8 +400,8 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
       closeDrawerOn: {
         type: String,
         value: 'vaadin-router-location-changed',
-        observer: '_closeDrawerOnChanged'
-      }
+        observer: '_closeDrawerOnChanged',
+      },
     };
   }
 
@@ -458,9 +458,16 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
   disconnectedCallback() {
     super.disconnectedCallback();
 
-    this._navbarChildObserver && this._navbarChildObserver.disconnect();
-    this._drawerChildObserver && this._drawerChildObserver.disconnect();
-    this._touchChildObserver && this._touchChildObserver.disconnect();
+    if (this._navbarChildObserver) {
+      this._navbarChildObserver.disconnect();
+    }
+    if (this._drawerChildObserver) {
+      this._drawerChildObserver.disconnect();
+    }
+    if (this._touchChildObserver) {
+      this._touchChildObserver.disconnect();
+    }
+
     window.removeEventListener('resize', this.__boundResizeListener);
     this.removeEventListener('drawer-toggle-click', this.__drawerToggleClickListener);
     window.removeEventListener('close-overlay-drawer', this.__drawerToggleClickListener);
@@ -581,13 +588,13 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
     const navbarBottom = this.$.navbarBottom;
     const navbarBottomRect = navbarBottom.getBoundingClientRect();
 
-    this.style.setProperty('--_vaadin-app-layout-navbar-offset-size', navbarRect.height + 'px');
-    this.style.setProperty('--_vaadin-app-layout-navbar-offset-size-bottom', navbarBottomRect.height + 'px');
+    this.style.setProperty('--_vaadin-app-layout-navbar-offset-size', `${navbarRect.height}px`);
+    this.style.setProperty('--_vaadin-app-layout-navbar-offset-size-bottom', `${navbarBottomRect.height}px`);
 
     const drawer = this.$.drawer;
     const drawerRect = drawer.getBoundingClientRect();
 
-    this.style.setProperty('--_vaadin-app-layout-drawer-offset-size', drawerRect.width + 'px');
+    this.style.setProperty('--_vaadin-app-layout-drawer-offset-size', `${drawerRect.width}px`);
   }
 
   /** @protected */
@@ -733,7 +740,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
 
   /** @protected */
   _updateTouchOptimizedMode() {
-    const touchOptimized = this._getCustomPropertyValue('--vaadin-app-layout-touch-optimized') == 'true';
+    const touchOptimized = this._getCustomPropertyValue('--vaadin-app-layout-touch-optimized') === 'true';
 
     const navbarItems = this.querySelectorAll('[slot*="navbar"]');
 

package/src/vaadin-drawer-toggle.js

@@ -71,8 +71,8 @@ class DrawerToggle extends Button {
       ariaLabel: {
         type: String,
         value: 'Toggle navigation panel',
-        reflectToAttribute: true
-      }
+        reflectToAttribute: true,
+      },
     };
   }
 

package/theme/lumo/vaadin-app-layout-styles.js

@@ -68,5 +68,5 @@ registerStyles(
       }
     }
   `,
-  { moduleId: 'lumo-app-layout' }
+  { moduleId: 'lumo-app-layout' },
 );

package/theme/material/vaadin-app-layout-styles.js

@@ -56,5 +56,5 @@ registerStyles(
       }
     }
   `,
-  { moduleId: 'material-app-layout' }
+  { moduleId: 'material-app-layout' },
 );

package/theme/material/vaadin-drawer-toggle-styles.js

@@ -47,5 +47,5 @@ const drawerToggle = css`
 `;
 
 registerStyles('vaadin-drawer-toggle', [button, drawerToggle], {
-  moduleId: 'material-drawer-toggle'
+  moduleId: 'material-drawer-toggle',
 });