@brightspace-ui-labs/navigation - npm Package Compare versions

Comparing version 6.2.0 to 6.3.0

d2l-navigation-immersive.js

@@ -10,2 +10,4 @@ import '@brightspace-ui/core/components/colors/colors.js';
 
+const mediaQueryList = window.matchMedia('(max-width: 615px)');
+
 class NavigationImmersive extends LitElement {
@@ -28,2 +30,6 @@
 			},
+			backLinkTextShort: {
+				attribute: 'back-link-text-short',
+				type: String
+			},
 			widthType: {
@@ -35,3 +41,4 @@ attribute: 'width-type',
 			_middleHidden: { state: true },
-			_middleNoRightBorder: { state: true }
+			_middleNoRightBorder: { state: true },
+			_smallWidth: { state: true }
 		};
@@ -164,2 +171,3 @@ }
 		super();
+		this._handlePageResize = this._handlePageResize.bind(this);
 		this._middleHidden = false;
@@ -169,2 +177,3 @@ this._middleNoRightBorder = true;
 		this._rightObserver = new ResizeObserver(this._onRightResize.bind(this));
+		this._smallWidth = false;
 	}
@@ -175,2 +184,3 @@
 		this._startObserving();
+		if (mediaQueryList.addEventListener) mediaQueryList.addEventListener('change', this._handlePageResize);
 	}
@@ -182,2 +192,3 @@
 		if (this._rightObserver) this._rightObserver.disconnect();
+		if (mediaQueryList.removeEventListener) mediaQueryList.removeEventListener('change', this._handlePageResize);
 	}
@@ -188,2 +199,3 @@
 		this._startObserving();
+		this._smallWidth = mediaQueryList.matches;
 	}
@@ -197,2 +209,3 @@
 		};
+		const backLinkText = this._smallWidth ? (this.backLinkTextShort || this.backLinkText) : this.backLinkText;
 		return html`
@@ -205,3 +218,3 @@ <div class="d2l-navigiation-immersive-fixed">
 								<slot name="left">
-									<d2l-navigation-link-back text="${this.backLinkText}" href="${this.backLinkHref}"></d2l-navigation-link-back>
+									<d2l-navigation-link-back text="${backLinkText}" href="${this.backLinkHref}"></d2l-navigation-link-back>
 								</slot>
@@ -223,2 +236,6 @@ </div>
 
+	_handlePageResize(e) {
+		this._smallWidth = e.matches;
+	}
+
 	_onMiddleResize(entries) {
@@ -225,0 +242,0 @@ if (!entries || entries.length === 0) {

package.json

 {
   "name": "@brightspace-ui-labs/navigation",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "type": "module",
@@ -5,0 +5,0 @@ "repository": "https://github.com/BrightspaceUILabs/navigation.git",

README.md

@@ -80,2 +80,3 @@ # navigation
 - Overflow can be enabled to facilitate components like dropdowns by including the `allow-overflow` boolean attribute
+- A shorter version of the back text can be provided by setting the `back-link-text-short` attribute
 
@@ -82,0 +83,0 @@ ## Secondary Components

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

Improved metrics

Total package byte prevSize

66734

increased by1.22%

Lines of code

1545

increased by0.98%

Number of lines in readme file

271

increased by0.37%

No dependency changes