@abgov/web-components 1.16.0 → 1.17.0-alpha.1

package/web-components.es.js

@@ -11850,16 +11850,32 @@ customElements.define("goa-input", Input);
 
 function create_if_block_3$7(ctx) {
 	let div;
+	let t0;
+	let a;
+	let t1;
+	let a_target_value;
 
 	return {
 		c() {
 			div = element("div");
-			div.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
+			t0 = text("An official site of the ");
+			a = element("a");
+			t1 = text("Alberta Government");
+			attr(a, "href", "https://www.alberta.ca/index.aspx");
+			attr(a, "target", a_target_value = `_${/*headerurltarget*/ ctx[4]}`);
 			attr(div, "data-testid", "type");
 			attr(div, "class", "site-text");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
+			append(div, t0);
+			append(div, a);
+			append(a, t1);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*headerurltarget*/ 16 && a_target_value !== (a_target_value = `_${/*headerurltarget*/ ctx[4]}`)) {
+				attr(a, "target", a_target_value);
+			}
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -11867,7 +11883,7 @@ function create_if_block_3$7(ctx) {
 	};
 }
 
-// (31:4) {#if ["alpha", "beta"].includes(type)}
+// (37:4) {#if ["alpha", "beta"].includes(type)}
 function create_if_block_1$8(ctx) {
 	let div0;
 	let t0_value = capitalize(/*type*/ ctx[0]) + "";
@@ -11877,6 +11893,8 @@ function create_if_block_1$8(ctx) {
 	let div1;
 	let t2;
 	let a;
+	let t3;
+	let a_target_value;
 	let t4;
 	let if_block = /*feedbackurl*/ ctx[2] && create_if_block_2$7(ctx);
 
@@ -11888,12 +11906,13 @@ function create_if_block_1$8(ctx) {
 			div1 = element("div");
 			t2 = text("This is a new ");
 			a = element("a");
-			a.textContent = "Alberta Government";
+			t3 = text("Alberta Government");
 			t4 = text(" service\n        ");
 			if (if_block) if_block.c();
 			attr(div0, "data-testid", "type");
 			attr(div0, "class", div0_class_value = "service-type service-type--" + /*type*/ ctx[0].toLowerCase());
 			attr(a, "href", "https://www.alberta.ca/index.aspx");
+			attr(a, "target", a_target_value = `_${/*headerurltarget*/ ctx[4]}`);
 			attr(div1, "data-testid", "site-text");
 			attr(div1, "class", "site-text");
 		},
@@ -11904,6 +11923,7 @@ function create_if_block_1$8(ctx) {
 			insert(target, div1, anchor);
 			append(div1, t2);
 			append(div1, a);
+			append(a, t3);
 			append(div1, t4);
 			if (if_block) if_block.m(div1, null);
 		},
@@ -11914,6 +11934,10 @@ function create_if_block_1$8(ctx) {
 				attr(div0, "class", div0_class_value);
 			}
 
+			if (dirty & /*headerurltarget*/ 16 && a_target_value !== (a_target_value = `_${/*headerurltarget*/ ctx[4]}`)) {
+				attr(a, "target", a_target_value);
+			}
+
 			if (/*feedbackurl*/ ctx[2]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
@@ -11936,12 +11960,13 @@ function create_if_block_1$8(ctx) {
 	};
 }
 
-// (40:8) {#if feedbackurl}
+// (46:8) {#if feedbackurl}
 function create_if_block_2$7(ctx) {
 	let span;
 	let t0;
 	let a;
 	let t1;
+	let a_target_value;
 
 	return {
 		c() {
@@ -11950,6 +11975,7 @@ function create_if_block_2$7(ctx) {
 			a = element("a");
 			t1 = text("feedback");
 			attr(a, "href", /*feedbackurl*/ ctx[2]);
+			attr(a, "target", a_target_value = `_${/*feedbackurltarget*/ ctx[5]}`);
 			attr(span, "data-testid", "feedback");
 		},
 		m(target, anchor) {
@@ -11962,6 +11988,10 @@ function create_if_block_2$7(ctx) {
 			if (dirty & /*feedbackurl*/ 4) {
 				attr(a, "href", /*feedbackurl*/ ctx[2]);
 			}
+
+			if (dirty & /*feedbackurltarget*/ 32 && a_target_value !== (a_target_value = `_${/*feedbackurltarget*/ ctx[5]}`)) {
+				attr(a, "target", a_target_value);
+			}
 		},
 		d(detaching) {
 			if (detaching) detach(span);
@@ -11969,7 +11999,7 @@ function create_if_block_2$7(ctx) {
 	};
 }
 
-// (46:4) {#if version}
+// (52:4) {#if version}
 function create_if_block$i(ctx) {
 	let div;
 	let t;
@@ -12003,7 +12033,7 @@ function create_fragment$x(ctx) {
 	let div0;
 	let t2;
 	let header_style_value;
-	let if_block0 = /*type*/ ctx[0] === "live" && create_if_block_3$7();
+	let if_block0 = /*type*/ ctx[0] === "live" && create_if_block_3$7(ctx);
 	let if_block1 = show_if && create_if_block_1$8(ctx);
 	let if_block2 = /*version*/ ctx[1] && create_if_block$i(ctx);
 
@@ -12037,8 +12067,10 @@ function create_fragment$x(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (/*type*/ ctx[0] === "live") {
-				if (if_block0) ; else {
-					if_block0 = create_if_block_3$7();
+				if (if_block0) {
+					if_block0.p(ctx, dirty);
+				} else {
+					if_block0 = create_if_block_3$7(ctx);
 					if_block0.c();
 					if_block0.m(div1, t0);
 				}
@@ -12101,9 +12133,16 @@ function instance$u($$self, $$props, $$invalidate) {
 	let { version = "" } = $$props;
 	let { feedbackurl = "" } = $$props;
 	let { maxcontentwidth = "100%" } = $$props;
+	let { headerurltarget = "blank" } = $$props;
+	let { feedbackurltarget = "blank" } = $$props;
+
+	// Validator
+	const [UrlTarget, validateUrlTargetType] = typeValidator("URL target values", ["self", "blank"]);
 
 	onMount(() => {
 		setTimeout(() => validateType(type), 1);
+		validateUrlTargetType(headerurltarget);
+		validateUrlTargetType(feedbackurltarget);
 	});
 
 	$$self.$$set = $$props => {
@@ -12111,16 +12150,29 @@ function instance$u($$self, $$props, $$invalidate) {
 		if ('version' in $$props) $$invalidate(1, version = $$props.version);
 		if ('feedbackurl' in $$props) $$invalidate(2, feedbackurl = $$props.feedbackurl);
 		if ('maxcontentwidth' in $$props) $$invalidate(3, maxcontentwidth = $$props.maxcontentwidth);
+		if ('headerurltarget' in $$props) $$invalidate(4, headerurltarget = $$props.headerurltarget);
+		if ('feedbackurltarget' in $$props) $$invalidate(5, feedbackurltarget = $$props.feedbackurltarget);
 	};
 
-	return [type, version, feedbackurl, maxcontentwidth];
+	return [
+		type,
+		version,
+		feedbackurl,
+		maxcontentwidth,
+		headerurltarget,
+		feedbackurltarget
+	];
 }
 
 class MicrositeHeader extends SvelteElement {
 	constructor(options) {
 		super();
 		const style = document.createElement('style');
-		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);cursor:pointer}a:hover{color:var(--goa-color-interactive-hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive-hover);outline-offset:0px}.goa-official-site-header{font-size:var(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);padding:0.5rem 1rem}.content-container{display:flex;align-items:start;justify-content:space-between;max-width:min(var(--max-content-width), 100%);margin:0 auto}@media screen and (max-width: 623px){@media not (max-color:2147477350){.goa-official-site-header{padding:0.25rem 2rem}.content-container{align-items:center}}}@media not  screen and (max-width: 623px){@media not (color:2147477350){.goa-official-site-header{padding:0.25rem 2rem}.content-container{align-items:center}}}@media screen and (min-width: 1024px){.goa-official-site-header{padding:0.25rem 4.5rem}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.service-type--beta{background-color:var(--goa-color-brand-default);color:var(--goa-color-text-light)}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}`;
+
+		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);cursor:pointer}a:hover{color:var(--goa-color-interactive-hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive-hover);outline-offset:0px}a[target="_blank"]::after{content:"";width:var(--goa-icon-size-s);height:var(--goa-icon-size-s);background-color:var(--goa-color-interactive-default);display:inline-block;margin-left:var(--goa-space-2xs);vertical-align:sub;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22ionicon%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M384%20224v184a40%2040%200%200%201-40%2040H104a40%2040%200%200%201-40-40V168a40%2040%200%200%201%2040-40h167.48M336%2064h112v112M224%20288%20440%2072%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2232%22%2F%3E%3C%2Fsvg%3E")
+    center bottom no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22ionicon%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M384%20224v184a40%2040%200%200%201-40%2040H104a40%2040%200%200%201-40-40V168a40%2040%200%200%201%2040-40h167.48M336%2064h112v112M224%20288%20440%2072%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2232%22%2F%3E%3C%2Fsvg%3E")
+    center bottom no-repeat}a[target="_blank"]:hover:after{background-color:var(--goa-color-interactive-hover)}.goa-official-site-header{font-size:var(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);padding:0.5rem 1rem}.content-container{display:flex;align-items:start;justify-content:space-between;max-width:min(var(--max-content-width), 100%);margin:0 auto}@media screen and (max-width: 623px){@media not (max-color:2147477350){.goa-official-site-header{padding:0.25rem 2rem}.content-container{align-items:center}}}@media not  screen and (max-width: 623px){@media not (color:2147477350){.goa-official-site-header{padding:0.25rem 2rem}.content-container{align-items:center}}}@media screen and (min-width: 1024px){.goa-official-site-header{padding:0.25rem 4.5rem}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.service-type--beta{background-color:var(--goa-color-brand-default);color:var(--goa-color-text-light)}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}`;
+
 		this.shadowRoot.appendChild(style);
 
 		init(
@@ -12137,7 +12189,9 @@ class MicrositeHeader extends SvelteElement {
 				type: 0,
 				version: 1,
 				feedbackurl: 2,
-				maxcontentwidth: 3
+				maxcontentwidth: 3,
+				headerurltarget: 4,
+				feedbackurltarget: 5
 			},
 			null
 		);
@@ -12155,7 +12209,14 @@ class MicrositeHeader extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["type", "version", "feedbackurl", "maxcontentwidth"];
+		return [
+			"type",
+			"version",
+			"feedbackurl",
+			"maxcontentwidth",
+			"headerurltarget",
+			"feedbackurltarget"
+		];
 	}
 
 	get type() {
@@ -12193,6 +12254,24 @@ class MicrositeHeader extends SvelteElement {
 		this.$$set({ maxcontentwidth });
 		flush();
 	}
+
+	get headerurltarget() {
+		return this.$$.ctx[4];
+	}
+
+	set headerurltarget(headerurltarget) {
+		this.$$set({ headerurltarget });
+		flush();
+	}
+
+	get feedbackurltarget() {
+		return this.$$.ctx[5];
+	}
+
+	set feedbackurltarget(feedbackurltarget) {
+		this.$$set({ feedbackurltarget });
+		flush();
+	}
 }
 
 customElements.define("goa-microsite-header", MicrositeHeader);
@@ -12810,7 +12889,7 @@ class Modal extends SvelteElement {
 	constructor(options) {
 		super();
 		const style = document.createElement('style');
-		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}:host *{box-sizing:border-box}.modal{font-family:var(--goa-font-family-sans);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:var(--goa-space-xl)}.content header{display:flex;justify-content:space-between}.content header.has-content{margin-bottom:var(--goa-space-l)}@media screen and (max-width: 623px){.content{margin:var(--goa-space-l)}.content header.has-content{margin-bottom:var(--goa-space-m)}}.modal-pane{background-color:#fff;z-index:1001;width:90%;display:flex;box-shadow:var(--goa-shadow-modal);border-radius:4px;border:1px solid var(--goa-color-greyscale-700)}.modal-actions ::slotted(*){padding:var(--goa-space-xl) 0 0}@media screen and (max-width: 623px){.modal-pane{max-width:var(--maxwidth)}.modal-actions ::slotted(*){padding:var(--goa-space-l) 0 0}}.modal-content{margin:0 -2rem;line-height:1.75rem}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-title{font:var(--goa-typography-heading-m)}.modal-close{padding-left:var(--goa-space-m);margin-top:var(--goa-space-2xs)}.scroll-top{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-middle{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1), inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-bottom{box-shadow:inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}`;
+		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}:host *{box-sizing:border-box}.modal{font-family:var(--goa-font-family-sans);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:var(--goa-space-xl)}.content header{display:flex;justify-content:space-between}.content header.has-content{margin-bottom:var(--goa-space-l)}@media screen and (max-width: 623px){.content{margin:var(--goa-space-l)}.content header.has-content{margin-bottom:var(--goa-space-m)}.modal-actions ::slotted(*){padding:var(--goa-space-l) 0 0}}@media screen and (min-width: 1024px){.modal-pane{max-width:var(--maxwidth)}}.modal-pane{background-color:#fff;z-index:1001;width:90%;display:flex;box-shadow:var(--goa-shadow-modal);border-radius:4px;border:1px solid var(--goa-color-greyscale-700)}.modal-actions ::slotted(*){padding:var(--goa-space-xl) 0 0}.modal-content{margin:0 -2rem;line-height:1.75rem}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-title{font:var(--goa-typography-heading-m)}.modal-close{padding-left:var(--goa-space-m);margin-top:var(--goa-space-2xs)}.scroll-top{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-middle{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1), inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-bottom{box-shadow:inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}`;
 		this.shadowRoot.appendChild(style);
 
 		init(
@@ -26072,18 +26151,29 @@ class Pages extends SvelteElement {
 customElements.define("goa-pages", Pages);
 
 function isUrlMatch(windowUrl, testUrl) {
-  if (!testUrl)
-    return false;
-  const pathParts = windowUrl.pathname.split("/");
-  testUrl = testUrl.replace(/^\//, "");
-  for (const part of pathParts) {
-    if (part === testUrl)
-      return true;
+  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 === testUrl) {
-    return true;
+  if (windowUrl.hash.length > 0 && windowUrl.hash === testUrl) {
+    return 1;
   }
-  return false;
+  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 */
@@ -26129,16 +26219,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 = isUrlMatch(document.location, 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() {
@@ -26220,7 +26317,7 @@ function create_else_block(ctx) {
 	};
 }
 
-// (190:4) {#if _open}
+// (193:4) {#if _open}
 function create_if_block$2(ctx) {
 	let goa_icon;
 
@@ -26383,11 +26480,11 @@ function instance$3($$self, $$props, $$invalidate) {
 	}
 
 	function matchesMenu() {
-		return isUrlMatch(document.location, _slug);
+		return isUrlMatch(document.location, _slug) >= 0;
 	}
 
 	function matchesChild(el) {
-		if (isUrlMatch(document.location, toSlug(el.heading))) {
+		if (isUrlMatch(document.location, toSlug(el.heading)) >= 0) {
 			return true;
 		}
 
@@ -26400,12 +26497,11 @@ function instance$3($$self, $$props, $$invalidate) {
 		const children = slot.assignedElements();
 
 		return !!children.find(child => {
-			return isUrlMatch(document.location, child.getAttribute("href"));
+			return isUrlMatch(document.location, child.getAttribute("href")) >= 0;
 		});
 	}
 
 	function setCurrent() {
-		document.location.href;
 		const slot = _rootEl.querySelector("slot");
 
 		if (!slot) {
@@ -26413,25 +26509,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 url = child.getAttribute("href");
-			const current = isUrlMatch(document.location, url);
+			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) {