@abgov/web-components 1.15.0 → 1.15.1-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/web-components",
-  "version": "1.15.0",
+  "version": "1.15.1-alpha.1",
   "description": "Government of Alberta - UI Web components",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"
@@ -11,7 +11,7 @@
   "semantic-release": "semantic-release",
   "main": "web-components.es.js",
   "unpkg": "web-components.es.js",
-  "module": "web-components.umd.js",
+  "module": "web-components.es.js",
   "scripts": {
     "dev": "rollup -c rollup.config.js -w",
     "playground": "rollup -c rollup.playground.config.js -w",

package/web-components.es.js

@@ -26176,6 +26176,32 @@ class Pages extends SvelteElement {
 
 customElements.define("goa-pages", Pages);
 
+function isUrlMatch(windowUrl, testUrl) {
+  if (testUrl === void 0)
+    return -1;
+  const windowUrlParts = windowUrl.pathname.replace(/^\//, "").split("/");
+  const urlParts = testUrl.replace(/^\//, "").split("/");
+  if (windowUrlParts.length < urlParts.length) {
+    return -1;
+  }
+  if (windowUrl.hash.length > 0 && windowUrl.hash === testUrl) {
+    return 1;
+  }
+  if (urlParts.length === 1 && urlParts[0] === "") {
+    return 0;
+  }
+  let weight = -1;
+  let index = 0;
+  for (const part of windowUrlParts) {
+    if (urlParts[index] !== part) {
+      break;
+    }
+    weight += 1;
+    index++;
+  }
+  return weight >= 0 ? weight + 1 : weight;
+}
+
 /* src/components/side-menu/SideMenu.svelte generated by Svelte v3.59.2 */
 
 function create_fragment$4(ctx) {
@@ -26207,11 +26233,11 @@ function instance$4($$self, $$props, $$invalidate) {
 
 	onMount(async () => {
 		await tick();
-		setCurrent(window.location.toString());
+		setCurrentUrl();
 		addEventListeners();
 	});
 
-	function setCurrent(url) {
+	function setCurrentUrl() {
 		const slot = _rootEl.querySelector("slot");
 
 		if (!slot) {
@@ -26219,16 +26245,23 @@ function instance$4($$self, $$props, $$invalidate) {
 		}
 
 		const links = slot.assignedElements().filter(el => el.tagName === "A");
+		let currentEl;
+		let maxWeight = 0;
 
 		links.forEach(child => {
-			const current = url.endsWith(child.getAttribute("href"));
+			const weight = isUrlMatch(document.location, child.getAttribute("href"));
 
-			if (current) {
-				child.classList.add("current");
-			} else {
-				child.classList.remove("current");
+			if (weight > maxWeight) {
+				maxWeight = weight;
+				currentEl = child;
 			}
+
+			child.classList.remove("current");
 		});
+
+		if (currentEl) {
+			currentEl.classList.add("current");
+		}
 	}
 
 	function addEventListeners() {
@@ -26236,9 +26269,9 @@ function instance$4($$self, $$props, $$invalidate) {
 		let currentLocation = document.location.href;
 
 		const observer = new MutationObserver(_mutationList => {
-				if (currentLocation !== document.location.href) {
+				if (isUrlMatch(document.location, currentLocation)) {
 					currentLocation = document.location.href;
-					setCurrent(currentLocation);
+					setCurrentUrl();
 				}
 			});
 
@@ -26246,7 +26279,7 @@ function instance$4($$self, $$props, $$invalidate) {
 
 		// watch hash / browser history changes
 		window.addEventListener("popstate", () => {
-			setCurrent(document.location.href);
+			setCurrentUrl();
 		});
 	}
 
@@ -26310,7 +26343,7 @@ function create_else_block(ctx) {
 	};
 }
 
-// (189:4) {#if _open}
+// (193:4) {#if _open}
 function create_if_block$2(ctx) {
 	let goa_icon;
 
@@ -26424,24 +26457,6 @@ function toSlug(path) {
 	: path.toLowerCase().replace(/ /g, "-");
 }
 
-function matchesChild(el, url) {
-	if (url.endsWith(toSlug(el.heading))) {
-		return true;
-	}
-
-	const slot = el.querySelector("slot");
-
-	if (!slot) {
-		return false;
-	}
-
-	const children = slot.assignedElements();
-
-	return !!children.find(child => {
-		return url.endsWith(child.getAttribute("href"));
-	});
-}
-
 function instance$3($$self, $$props, $$invalidate) {
 	let _slug;
 	let { heading } = $$props;
@@ -26457,8 +26472,7 @@ function instance$3($$self, $$props, $$invalidate) {
 	});
 
 	function checkUrlMatches() {
-		const url = window.location.href;
-		$$invalidate(1, _open = matchesMenu(url) || matchesChild(_rootEl, url));
+		$$invalidate(1, _open = matchesMenu() || matchesChild(_rootEl));
 
 		if (_open) {
 			notifyParent(true);
@@ -26491,12 +26505,29 @@ function instance$3($$self, $$props, $$invalidate) {
 		});
 	}
 
-	function matchesMenu(url) {
-		return url.endsWith(_slug);
+	function matchesMenu() {
+		return isUrlMatch(document.location, _slug) >= 0;
+	}
+
+	function matchesChild(el) {
+		if (isUrlMatch(document.location, toSlug(el.heading)) >= 0) {
+			return true;
+		}
+
+		const slot = el.querySelector("slot");
+
+		if (!slot) {
+			return false;
+		}
+
+		const children = slot.assignedElements();
+
+		return !!children.find(child => {
+			return isUrlMatch(document.location, child.getAttribute("href")) >= 0;
+		});
 	}
 
 	function setCurrent() {
-		const url = document.location.href;
 		const slot = _rootEl.querySelector("slot");
 
 		if (!slot) {
@@ -26504,24 +26535,32 @@ function instance$3($$self, $$props, $$invalidate) {
 		}
 
 		const children = slot.assignedElements();
+		let maxMatchWeight = -1;
+		let matchedChild = null;
 		$$invalidate(2, _current = false);
 
 		children.forEach(child => {
-			const current = url.endsWith(child.getAttribute("href"));
+			const url = child.getAttribute("href");
+			const weight = isUrlMatch(document.location, url);
 
-			if (current) {
-				$$invalidate(2, _current = true);
-				child.classList.add("current");
-				notifyParent(true);
-			} else {
-				child.classList.remove("current");
+			if (weight > maxMatchWeight) {
+				maxMatchWeight = weight;
+				matchedChild = child;
 			}
 
+			child.classList.remove("current");
+
 			// get side-menu-group (level >= 2) marked as children
 			if (child.tagName === "GOA-SIDE-MENU-GROUP") {
 				child.setAttribute("child", "true");
 			}
 		});
+
+		if (matchedChild) {
+			$$invalidate(2, _current = true);
+			matchedChild.classList.add("current");
+			notifyParent(true);
+		}
 	}
 
 	function handleClick(e) {