@vaadin/vaadin-app-layout - npm Package Compare versions

Comparing version 20.0.0-alpha2 to 20.0.0-alpha3

package.json

 {
   "name": "@vaadin/vaadin-app-layout",
-  "version": "20.0.0-alpha2",
+  "version": "20.0.0-alpha3",
   "description": "vaadin-app-layout",
@@ -29,7 +29,7 @@ "main": "vaadin-app-layout.js",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-button": "^20.0.0-alpha2",
-    "@vaadin/vaadin-element-mixin": "^20.0.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "^20.0.0-alpha2",
-    "@vaadin/vaadin-material-styles": "^20.0.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "^20.0.0-alpha2"
+    "@vaadin/vaadin-button": "^20.0.0-alpha3",
+    "@vaadin/vaadin-element-mixin": "^20.0.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "^20.0.0-alpha3",
+    "@vaadin/vaadin-material-styles": "^20.0.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "^20.0.0-alpha3"
   },
@@ -40,4 +40,4 @@ "devDependencies": {
     "@polymer/iron-test-helpers": "^3.0.1",
-    "@vaadin/vaadin-icons": "^20.0.0-alpha2",
-    "@vaadin/vaadin-tabs": "^20.0.0-alpha2",
+    "@vaadin/vaadin-icons": "^20.0.0-alpha3",
+    "@vaadin/vaadin-tabs": "^20.0.0-alpha3",
     "sinon": "^9.2.1"
@@ -48,3 +48,3 @@ },
   },
-  "gitHead": "c1598b30fb55cacd72ee4105e9f39cf56c9d5c79"
+  "gitHead": "f0d7c0890e4924251040938f81b7689224a70e74"
 }

src/vaadin-app-layout.d.ts

@@ -20,3 +20,2 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-
 export interface AppLayoutElementEventMap {
@@ -98,2 +97,3 @@ 'drawer-opened-changed': AppLayoutDrawerOpenedChanged;
  * As the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.
+ * If you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.
  *
@@ -145,2 +145,10 @@ * In order to do so, there are two options:
   /**
+   * A global event that causes the drawer to close (be hidden) when it is in overlay mode.
+   * - The default is `vaadin-router-location-changed` dispatched by Vaadin Router
+   *
+   * @attr {string} close-drawer-on
+   */
+  closeDrawerOn: string;
+
+  /**
    * Helper static method that dispatches a `close-overlay-drawer` event
@@ -147,0 +155,0 @@ */

src/vaadin-app-layout.js

@@ -80,2 +80,3 @@ /**
  * As the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.
+ * If you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.
  *
@@ -306,3 +307,3 @@ * In order to do so, there are two options:
   static get version() {
-    return '20.0.0-alpha1';
+    return '20.0.0-alpha2';
   }
@@ -354,2 +355,15 @@
         reflectToAttribute: true
+      },
+
+      /**
+       * A global event that causes the drawer to close (be hidden) when it is in overlay mode.
+       * - The default is `vaadin-router-location-changed` dispatched by Vaadin Router
+       *
+       * @attr {string} close-drawer-on
+       * @type {string}
+       */
+      closeDrawerOn: {
+        type: String,
+        value: 'vaadin-router-location-changed',
+        observer: '_closeDrawerOnChanged'
       }
@@ -505,3 +519,3 @@ };
   _updateOverlayMode() {
-    const overlay = getComputedStyle(this).getPropertyValue('--vaadin-app-layout-drawer-overlay') == 'true';
+    const overlay = this._getCustomPropertyValue('--vaadin-app-layout-drawer-overlay') == 'true';
     const drawer = this.$.drawer;
@@ -537,2 +551,12 @@
 
+  /** @private */
+  _closeDrawerOnChanged(closeDrawerOn, oldCloseDrawerOn) {
+    if (oldCloseDrawerOn) {
+      window.removeEventListener(oldCloseDrawerOn, this.__closeOverlayDrawerListener);
+    }
+    if (closeDrawerOn) {
+      window.addEventListener(closeDrawerOn, this.__closeOverlayDrawerListener);
+    }
+  }
+
   /** @protected */
@@ -543,5 +567,11 @@ _close() {
 
+  /** @private */
+  _getCustomPropertyValue(customProperty) {
+    const customPropertyValue = getComputedStyle(this).getPropertyValue(customProperty);
+    return (customPropertyValue || '').trim().toLowerCase();
+  }
+
   /** @protected */
   _updateTouchOptimizedMode() {
-    const touchOptimized = getComputedStyle(this).getPropertyValue('--vaadin-app-layout-touch-optimized') == 'true';
+    const touchOptimized = this._getCustomPropertyValue('--vaadin-app-layout-touch-optimized') == 'true';
 
@@ -548,0 +578,0 @@ const navbarItems = this.querySelectorAll('[slot*="navbar"]');

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54024

increased by2.69%

Lines of code

1047

increased by3.46%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@vaadin/vaadin-button@^20.0.0-alpha3

• Updated@vaadin/vaadin-element-mixin@^20.0.0-alpha3

• Updated@vaadin/vaadin-lumo-styles@^20.0.0-alpha3

• Updated@vaadin/vaadin-material-styles@^20.0.0-alpha3

• Updated@vaadin/vaadin-themable-mixin@^20.0.0-alpha3