fix(masthead-l1): set default active item based on host & pathname (#…

…12106)

### Related Ticket(s)

https://jsw.ibm.com/browse/ADCMS-6689

### Description

Modifies the fallback behavior of marking the "active" L1 items. 

Note how the L1 behaves on https://www.ibm.com/products/watsonx-orchestrate/ai-agent-for-hr
<img width="1286" alt="Screenshot 2024-11-13 at 10 04 31 AM" src="https://github.com/user-attachments/assets/6d556794-d1a5-41fb-b930-338c375c834b">

compared to https://www.ibm.com/products/watsonx-orchestrate/ai-agent-for-hr?lnk=hpUSrc4 (same url, with query params)
<img width="1283" alt="Screenshot 2024-11-13 at 10 05 12 AM" src="https://github.com/user-attachments/assets/70ea6914-e432-4d47-8a98-861a2d5fd58c">

### Changelog

**Changed**

- updates L1 active item fallback behavior to ignore query parameters

packages/web-components/src/components/masthead/__stories__/links.ts

@@ -88,7 +88,7 @@ const mastheadL1Data: MastheadL1 = {
       submenu: {
         columns: 2,
         announcement:
-          '<strong>Lorem ipsum:</strong> Full announcement may be linked or only a portion as an <a href="#">inline link</a>',
+          '<strong>Lorem ipsum:</strong> Full announcement may be linked or only a portion as an <a href="https://example.com">inline link</a>',
         footer: {
           title: 'View all lorem ipsum (B)',
           url: 'https://example.com',
@@ -145,7 +145,7 @@ const mastheadL1Data: MastheadL1 = {
       submenu: {
         columns: 3,
         announcement:
-          '<strong>Lorem ipsum:</strong> Full announcement may be linked or only a portion as an <a href="#">inline link</a>',
+          '<strong>Lorem ipsum:</strong> Full announcement may be linked or only a portion as an <a href="htts://example.com">inline link</a>',
         menuSections: [
           {
             span: 1,
@@ -236,7 +236,7 @@ const mastheadL1Data: MastheadL1 = {
       submenu: {
         columns: 3,
         announcement:
-          '<strong>Lorem ipsum:</strong> Full announcement may be linked or only a portion as an <a href="#">inline link</a>',
+          '<strong>Lorem ipsum:</strong> Full announcement may be linked or only a portion as an <a href="htts://example.com">inline link</a>',
         menuSections: [
           {
             span: 1,
@@ -407,7 +407,7 @@ const mastheadL1Data: MastheadL1 = {
       submenu: {
         columns: 2,
         announcement:
-          '<strong>Lorem ipsum:</strong> Full announcement may be linked or only a portion as an <a href="#">inline link</a>',
+          '<strong>Lorem ipsum:</strong> Full announcement may be linked or only a portion as an <a href="htts://example.com">inline link</a>',
         footer: {
           title: 'View all lorem ipsum (E)',
           url: 'https://example.com',

packages/web-components/src/components/masthead/masthead-l1.ts

@@ -933,9 +933,19 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
     }
     // Fall back to automated selection based on URL.
     else {
-      this.selectedElements = allLinks.filter(
-        (el) => el.href === currentUrlPath
-      );
+      this.selectedElements = allLinks.filter((el) => {
+        try {
+          const elURL = new URL(el.href);
+          const currURL = new URL(currentUrlPath || '');
+
+          // Compare url without query params.
+          return (
+            elURL.host === currURL.host && elURL.pathname === currURL.pathname
+          );
+        } catch (_error) {
+          return false;
+        }
+      });
     }
 
     if (this.selectedElements.length) {