@abgov/web-components 1.0.0-alpha.25 → 1.0.0-alpha.28

package/web-components.es.js

@@ -976,7 +976,7 @@ function fromBoolean(value) {
 
 /* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.44.3 */
 
-function create_else_block$4(ctx) {
+function create_else_block$3(ctx) {
 	let div;
 
 	return {
@@ -1050,7 +1050,7 @@ function create_fragment$u(ctx) {
 
 	function select_block_type(ctx, dirty) {
 		if (/*showIcon*/ ctx[4]) return create_if_block_1$9;
-		return create_else_block$4;
+		return create_else_block$3;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -2080,46 +2080,7 @@ customElements.define("goa-card-image", CardImage);
 
 /* libs/web-components/src/components/checkbox/Checkbox.svelte generated by Svelte v3.44.3 */
 
-function create_if_block$b(ctx) {
-	let if_block_anchor;
-
-	function select_block_type(ctx, dirty) {
-		if (/*isIndeterminate*/ ctx[4]) return create_if_block_1$8;
-		return create_else_block$3;
-	}
-
-	let current_block_type = select_block_type(ctx);
-	let if_block = current_block_type(ctx);
-
-	return {
-		c() {
-			if_block.c();
-			if_block_anchor = empty();
-		},
-		m(target, anchor) {
-			if_block.m(target, anchor);
-			insert(target, if_block_anchor, anchor);
-		},
-		p(ctx, dirty) {
-			if (current_block_type !== (current_block_type = select_block_type(ctx))) {
-				if_block.d(1);
-				if_block = current_block_type(ctx);
-
-				if (if_block) {
-					if_block.c();
-					if_block.m(if_block_anchor.parentNode, if_block_anchor);
-				}
-			}
-		},
-		d(detaching) {
-			if_block.d(detaching);
-			if (detaching) detach(if_block_anchor);
-		}
-	};
-}
-
-// (54:6) {:else}
-function create_else_block$3(ctx) {
+function create_if_block_1$8(ctx) {
 	let svg;
 	let path;
 
@@ -2129,6 +2090,7 @@ function create_else_block$3(ctx) {
 			path = svg_element("path");
 			attr(path, "d", "M5.09,9.64,1.27,5.82,0,7.09l5.09,5.09L16,1.27,14.73,0Z");
 			attr(svg, "id", "checkmark");
+			attr(svg, "data-testid", "checkmark");
 			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
 			attr(svg, "viewBox", "0 0 16 12.18");
 		},
@@ -2142,8 +2104,8 @@ function create_else_block$3(ctx) {
 	};
 }
 
-// (50:6) {#if isIndeterminate}
-function create_if_block_1$8(ctx) {
+// (51:4) {#if isIndeterminate}
+function create_if_block$b(ctx) {
 	let svg;
 	let rect;
 
@@ -2154,6 +2116,7 @@ function create_if_block_1$8(ctx) {
 			attr(rect, "width", "15");
 			attr(rect, "height", "2");
 			attr(svg, "id", "dashmark");
+			attr(svg, "data-testid", "dashmark");
 			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
 			attr(svg, "viewBox", "0 0 15 2");
 		},
@@ -2179,7 +2142,14 @@ function create_fragment$l(ctx) {
 	let t2;
 	let mounted;
 	let dispose;
-	let if_block = /*isChecked*/ ctx[3] && create_if_block$b(ctx);
+
+	function select_block_type(ctx, dirty) {
+		if (/*isIndeterminate*/ ctx[6]) return create_if_block$b;
+		if (/*isChecked*/ ctx[5]) return create_if_block_1$8;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block = current_block_type && current_block_type(ctx);
 
 	return {
 		c() {
@@ -2191,22 +2161,24 @@ function create_fragment$l(ctx) {
 			t1 = space();
 			div1 = element("div");
 			slot = element("slot");
-			t2 = text(/*text*/ ctx[1]);
+			t2 = text(/*text*/ ctx[2]);
 			this.c = noop;
-			attr(input, "id", /*id*/ ctx[7]);
-			attr(input, "name", /*name*/ ctx[0]);
-			input.checked = /*isChecked*/ ctx[3];
-			input.disabled = /*isDisabled*/ ctx[6];
+			attr(input, "id", /*id*/ ctx[0]);
+			attr(input, "data-testid", /*testid*/ ctx[4]);
+			attr(input, "name", /*name*/ ctx[1]);
+			input.checked = /*isChecked*/ ctx[5];
+			input.disabled = /*isDisabled*/ ctx[8];
 			attr(input, "type", "checkbox");
-			input.value = input_value_value = `${/*value*/ ctx[2]}`;
+			input.value = input_value_value = `${/*value*/ ctx[3]}`;
 			attr(div0, "class", "goa-checkbox-container");
-			toggle_class(div0, "goa-checkbox--selected", /*isChecked*/ ctx[3]);
+			toggle_class(div0, "goa-checkbox--selected", /*isChecked*/ ctx[5]);
 			attr(slot, "name", "main");
 			attr(div1, "class", "goa-checkbox-text");
-			attr(label, "for", /*id*/ ctx[7]);
+			attr(div1, "data-testid", "text");
+			attr(label, "for", /*id*/ ctx[0]);
 			attr(label, "class", "goa-checkbox");
-			toggle_class(label, "goa-checkbox--disabled", /*isDisabled*/ ctx[6]);
-			toggle_class(label, "goa-checkbox--error", /*isError*/ ctx[5]);
+			toggle_class(label, "goa-checkbox--disabled", /*isDisabled*/ ctx[8]);
+			toggle_class(label, "goa-checkbox--error", /*isError*/ ctx[7]);
 		},
 		m(target, anchor) {
 			insert(target, label, anchor);
@@ -2220,67 +2192,72 @@ function create_fragment$l(ctx) {
 			append(slot, t2);
 
 			if (!mounted) {
-				dispose = listen(input, "change", /*onChange*/ ctx[8]);
+				dispose = listen(input, "change", /*onChange*/ ctx[9]);
 				mounted = true;
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*id*/ 128) {
-				attr(input, "id", /*id*/ ctx[7]);
+			if (dirty & /*id*/ 1) {
+				attr(input, "id", /*id*/ ctx[0]);
 			}
 
-			if (dirty & /*name*/ 1) {
-				attr(input, "name", /*name*/ ctx[0]);
+			if (dirty & /*testid*/ 16) {
+				attr(input, "data-testid", /*testid*/ ctx[4]);
+			}
+
+			if (dirty & /*name*/ 2) {
+				attr(input, "name", /*name*/ ctx[1]);
 			}
 
-			if (dirty & /*isChecked*/ 8) {
-				input.checked = /*isChecked*/ ctx[3];
+			if (dirty & /*isChecked*/ 32) {
+				input.checked = /*isChecked*/ ctx[5];
 			}
 
-			if (dirty & /*isDisabled*/ 64) {
-				input.disabled = /*isDisabled*/ ctx[6];
+			if (dirty & /*isDisabled*/ 256) {
+				input.disabled = /*isDisabled*/ ctx[8];
 			}
 
-			if (dirty & /*value*/ 4 && input_value_value !== (input_value_value = `${/*value*/ ctx[2]}`)) {
+			if (dirty & /*value*/ 8 && input_value_value !== (input_value_value = `${/*value*/ ctx[3]}`)) {
 				input.value = input_value_value;
 			}
 
-			if (/*isChecked*/ ctx[3]) {
+			if (current_block_type !== (current_block_type = select_block_type(ctx))) {
+				if (if_block) if_block.d(1);
+				if_block = current_block_type && current_block_type(ctx);
+
 				if (if_block) {
-					if_block.p(ctx, dirty);
-				} else {
-					if_block = create_if_block$b(ctx);
 					if_block.c();
 					if_block.m(div0, null);
 				}
-			} else if (if_block) {
-				if_block.d(1);
-				if_block = null;
 			}
 
-			if (dirty & /*isChecked*/ 8) {
-				toggle_class(div0, "goa-checkbox--selected", /*isChecked*/ ctx[3]);
+			if (dirty & /*isChecked*/ 32) {
+				toggle_class(div0, "goa-checkbox--selected", /*isChecked*/ ctx[5]);
 			}
 
-			if (dirty & /*text*/ 2) set_data(t2, /*text*/ ctx[1]);
+			if (dirty & /*text*/ 4) set_data(t2, /*text*/ ctx[2]);
 
-			if (dirty & /*id*/ 128) {
-				attr(label, "for", /*id*/ ctx[7]);
+			if (dirty & /*id*/ 1) {
+				attr(label, "for", /*id*/ ctx[0]);
 			}
 
-			if (dirty & /*isDisabled*/ 64) {
-				toggle_class(label, "goa-checkbox--disabled", /*isDisabled*/ ctx[6]);
+			if (dirty & /*isDisabled*/ 256) {
+				toggle_class(label, "goa-checkbox--disabled", /*isDisabled*/ ctx[8]);
 			}
 
-			if (dirty & /*isError*/ 32) {
-				toggle_class(label, "goa-checkbox--error", /*isError*/ ctx[5]);
+			if (dirty & /*isError*/ 128) {
+				toggle_class(label, "goa-checkbox--error", /*isError*/ ctx[7]);
 			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(label);
-			if (if_block) if_block.d();
+
+			if (if_block) {
+				if_block.d();
+			}
+
 			mounted = false;
 			dispose();
 		}
@@ -2288,18 +2265,18 @@ function create_fragment$l(ctx) {
 }
 
 function instance$k($$self, $$props, $$invalidate) {
-	let id;
 	let isDisabled;
 	let isError;
 	let isChecked;
 	let isIndeterminate;
 	let { name } = $$props;
+	let { id = "" } = $$props;
 	let { text = "" } = $$props;
 	let { value = "" } = $$props;
 	let { checked } = $$props;
 	let { disabled } = $$props;
-	let { indeterminate } = $$props;
 	let { error } = $$props;
+	let { testid = "" } = $$props;
 
 	function onChange(e) {
 		// An empty string is required as setting the second value to `null` caused the data to get
@@ -2320,50 +2297,49 @@ function instance$k($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('name' in $$props) $$invalidate(0, name = $$props.name);
-		if ('text' in $$props) $$invalidate(1, text = $$props.text);
-		if ('value' in $$props) $$invalidate(2, value = $$props.value);
-		if ('checked' in $$props) $$invalidate(9, checked = $$props.checked);
-		if ('disabled' in $$props) $$invalidate(10, disabled = $$props.disabled);
-		if ('indeterminate' in $$props) $$invalidate(11, indeterminate = $$props.indeterminate);
+		if ('name' in $$props) $$invalidate(1, name = $$props.name);
+		if ('id' in $$props) $$invalidate(0, id = $$props.id);
+		if ('text' in $$props) $$invalidate(2, text = $$props.text);
+		if ('value' in $$props) $$invalidate(3, value = $$props.value);
+		if ('checked' in $$props) $$invalidate(10, checked = $$props.checked);
+		if ('disabled' in $$props) $$invalidate(11, disabled = $$props.disabled);
 		if ('error' in $$props) $$invalidate(12, error = $$props.error);
+		if ('testid' in $$props) $$invalidate(4, testid = $$props.testid);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*name*/ 1) {
-			$$invalidate(7, id = `id-${name}`);
+		if ($$self.$$.dirty & /*id, name*/ 3) {
+			$$invalidate(0, id = id ? id : `id-${name}`);
 		}
 
-		if ($$self.$$.dirty & /*disabled*/ 1024) {
-			$$invalidate(6, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*disabled*/ 2048) {
+			$$invalidate(8, isDisabled = toBoolean(disabled));
 		}
 
 		if ($$self.$$.dirty & /*error*/ 4096) {
-			$$invalidate(5, isError = toBoolean(error));
-		}
-
-		if ($$self.$$.dirty & /*checked*/ 512) {
-			$$invalidate(3, isChecked = toBoolean(checked));
+			$$invalidate(7, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*indeterminate*/ 2048) {
-			$$invalidate(4, isIndeterminate = toBoolean(indeterminate));
+		if ($$self.$$.dirty & /*checked*/ 1024) {
+			$$invalidate(5, isChecked = toBoolean(checked));
 		}
 	};
 
+	$$invalidate(6, isIndeterminate = false); // Desighn review. To be built with TreeView Later
+
 	return [
+		id,
 		name,
 		text,
 		value,
+		testid,
 		isChecked,
 		isIndeterminate,
 		isError,
 		isDisabled,
-		id,
 		onChange,
 		checked,
 		disabled,
-		indeterminate,
 		error
 	];
 }
@@ -2384,13 +2360,14 @@ class Checkbox extends SvelteElement {
 			create_fragment$l,
 			safe_not_equal,
 			{
-				name: 0,
-				text: 1,
-				value: 2,
-				checked: 9,
-				disabled: 10,
-				indeterminate: 11,
-				error: 12
+				name: 1,
+				id: 0,
+				text: 2,
+				value: 3,
+				checked: 10,
+				disabled: 11,
+				error: 12,
+				testid: 4
 			},
 			null
 		);
@@ -2408,11 +2385,11 @@ class Checkbox extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["name", "text", "value", "checked", "disabled", "indeterminate", "error"];
+		return ["name", "id", "text", "value", "checked", "disabled", "error", "testid"];
 	}
 
 	get name() {
-		return this.$$.ctx[0];
+		return this.$$.ctx[1];
 	}
 
 	set name(name) {
@@ -2420,8 +2397,17 @@ class Checkbox extends SvelteElement {
 		flush();
 	}
 
+	get id() {
+		return this.$$.ctx[0];
+	}
+
+	set id(id) {
+		this.$$set({ id });
+		flush();
+	}
+
 	get text() {
-		return this.$$.ctx[1];
+		return this.$$.ctx[2];
 	}
 
 	set text(text) {
@@ -2430,7 +2416,7 @@ class Checkbox extends SvelteElement {
 	}
 
 	get value() {
-		return this.$$.ctx[2];
+		return this.$$.ctx[3];
 	}
 
 	set value(value) {
@@ -2439,7 +2425,7 @@ class Checkbox extends SvelteElement {
 	}
 
 	get checked() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[10];
 	}
 
 	set checked(checked) {
@@ -2448,7 +2434,7 @@ class Checkbox extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[10];
+		return this.$$.ctx[11];
 	}
 
 	set disabled(disabled) {
@@ -2456,21 +2442,21 @@ class Checkbox extends SvelteElement {
 		flush();
 	}
 
-	get indeterminate() {
-		return this.$$.ctx[11];
+	get error() {
+		return this.$$.ctx[12];
 	}
 
-	set indeterminate(indeterminate) {
-		this.$$set({ indeterminate });
+	set error(error) {
+		this.$$set({ error });
 		flush();
 	}
 
-	get error() {
-		return this.$$.ctx[12];
+	get testid() {
+		return this.$$.ctx[4];
 	}
 
-	set error(error) {
-		this.$$set({ error });
+	set testid(testid) {
+		this.$$set({ testid });
 		flush();
 	}
 }
@@ -2655,7 +2641,7 @@ const messageChannel$1 = writable({});
 
 /* libs/web-components/src/components/dropdown/Dropdown.svelte generated by Svelte v3.44.3 */
 
-function create_if_block_3$3(ctx) {
+function create_if_block_3$4(ctx) {
 	let div;
 	let div_data_testid_value;
 	let mounted;
@@ -2853,7 +2839,7 @@ function create_fragment$j(ctx) {
 	let t0;
 	let div0;
 	let t1;
-	let if_block0 = /*isMenuVisible*/ ctx[5] && create_if_block_3$3(ctx);
+	let if_block0 = /*isMenuVisible*/ ctx[5] && create_if_block_3$4(ctx);
 	let if_block1 = (!/*isMenuVisible*/ ctx[5] || !/*isAutoComplete*/ ctx[9]) && create_if_block_2$5(ctx);
 	let if_block2 = /*isMenuVisible*/ ctx[5] && create_if_block$a(ctx);
 
@@ -2884,7 +2870,7 @@ function create_fragment$j(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_3$3(ctx);
+					if_block0 = create_if_block_3$4(ctx);
 					if_block0.c();
 					if_block0.m(div1, t0);
 				}
@@ -3708,7 +3694,7 @@ function create_if_block_2$4(ctx) {
 	let label_1;
 	let t0;
 	let t1;
-	let if_block = /*isOptional*/ ctx[4] && create_if_block_3$2();
+	let if_block = /*isOptional*/ ctx[4] && create_if_block_3$3();
 
 	return {
 		c() {
@@ -3729,7 +3715,7 @@ function create_if_block_2$4(ctx) {
 
 			if (/*isOptional*/ ctx[4]) {
 				if (if_block) ; else {
-					if_block = create_if_block_3$2();
+					if_block = create_if_block_3$3();
 					if_block.c();
 					if_block.m(label_1, null);
 				}
@@ -3750,7 +3736,7 @@ function create_if_block_2$4(ctx) {
 }
 
 // (18:6) {#if isOptional}
-function create_if_block_3$2(ctx) {
+function create_if_block_3$3(ctx) {
 	let em;
 
 	return {
@@ -5279,17 +5265,18 @@ function create_if_block$6(ctx) {
 	let div2;
 	let div3_intro;
 	let div3_outro;
+	let div4_style_value;
 	let noscroll_action;
 	let div4_intro;
 	let div4_outro;
 	let current;
 	let mounted;
 	let dispose;
-	let if_block0 = /*title*/ ctx[0] && create_if_block_3$1(ctx);
-	let if_block1 = /*isClosable*/ ctx[4] && create_if_block_2$2();
+	let if_block0 = /*title*/ ctx[0] && create_if_block_3$2(ctx);
+	let if_block1 = /*isClosable*/ ctx[4] && create_if_block_2$2(ctx);
 
 	function select_block_type(ctx, dirty) {
-		if (/*isScrollable*/ ctx[3]) return create_if_block_1$4;
+		if (/*isScrollable*/ ctx[5]) return create_if_block_1$4;
 		return create_else_block$2;
 	}
 
@@ -5313,12 +5300,16 @@ function create_if_block$6(ctx) {
 			t4 = space();
 			div2 = element("div");
 			div2.innerHTML = `<slot name="actions"></slot>`;
+			attr(div0, "data-testid", "modal-overlay");
 			attr(div0, "class", "modal-overlay");
+			attr(div1, "data-testid", "modal-content");
 			attr(div1, "class", "modal-content");
+			attr(div2, "data-testid", "modal-actions");
 			attr(div2, "class", "modal-actions");
 			attr(div3, "class", "modal-pane");
+			attr(div4, "data-testid", "modal");
 			attr(div4, "class", "modal");
-			set_style(div4, "--scroll-offset", /*scrollOffset*/ ctx[2] + "px");
+			attr(div4, "style", div4_style_value = "--scroll-offset: " + /*scrollOffset*/ ctx[3] + "px; " + (/*width*/ ctx[1] && `--width: ${/*width*/ ctx[1]};`) + ";");
 		},
 		m(target, anchor) {
 			insert(target, div4, anchor);
@@ -5339,8 +5330,8 @@ function create_if_block$6(ctx) {
 
 			if (!mounted) {
 				dispose = [
-					listen(div0, "click", close),
-					action_destroyer(noscroll_action = noScroll.call(null, div4, { enable: /*isOpen*/ ctx[1] }))
+					listen(div0, "click", /*close*/ ctx[6]),
+					action_destroyer(noscroll_action = noScroll.call(null, div4, { enable: /*isOpen*/ ctx[2] }))
 				];
 
 				mounted = true;
@@ -5351,7 +5342,7 @@ function create_if_block$6(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_3$1(ctx);
+					if_block0 = create_if_block_3$2(ctx);
 					if_block0.c();
 					if_block0.m(div3, t1);
 				}
@@ -5364,7 +5355,7 @@ function create_if_block$6(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_2$2();
+					if_block1 = create_if_block_2$2(ctx);
 					if_block1.c();
 					if_block1.m(div3, t2);
 				}
@@ -5383,11 +5374,11 @@ function create_if_block$6(ctx) {
 				}
 			}
 
-			if (!current || dirty & /*scrollOffset*/ 4) {
-				set_style(div4, "--scroll-offset", /*scrollOffset*/ ctx[2] + "px");
+			if (!current || dirty & /*scrollOffset, width*/ 10 && div4_style_value !== (div4_style_value = "--scroll-offset: " + /*scrollOffset*/ ctx[3] + "px; " + (/*width*/ ctx[1] && `--width: ${/*width*/ ctx[1]};`) + ";")) {
+				attr(div4, "style", div4_style_value);
 			}
 
-			if (noscroll_action && is_function(noscroll_action.update) && dirty & /*isOpen*/ 2) noscroll_action.update.call(null, { enable: /*isOpen*/ ctx[1] });
+			if (noscroll_action && is_function(noscroll_action.update) && dirty & /*isOpen*/ 4) noscroll_action.update.call(null, { enable: /*isOpen*/ ctx[2] });
 		},
 		i(local) {
 			if (current) return;
@@ -5426,8 +5417,8 @@ function create_if_block$6(ctx) {
 	};
 }
 
-// (38:6) {#if title}
-function create_if_block_3$1(ctx) {
+// (49:6) {#if title}
+function create_if_block_3$2(ctx) {
 	let div;
 	let t;
 
@@ -5435,6 +5426,7 @@ function create_if_block_3$1(ctx) {
 		c() {
 			div = element("div");
 			t = text(/*title*/ ctx[0]);
+			attr(div, "data-testid", "modal-title");
 			attr(div, "class", "modal-title");
 		},
 		m(target, anchor) {
@@ -5450,7 +5442,7 @@ function create_if_block_3$1(ctx) {
 	};
 }
 
-// (41:6) {#if isClosable}
+// (52:6) {#if isClosable}
 function create_if_block_2$2(ctx) {
 	let div;
 	let goa_icon_button;
@@ -5461,6 +5453,7 @@ function create_if_block_2$2(ctx) {
 		c() {
 			div = element("div");
 			goa_icon_button = element("goa-icon-button");
+			set_custom_element_data(goa_icon_button, "testid", "modal-close-button");
 			set_custom_element_data(goa_icon_button, "type", "close");
 			attr(div, "class", "modal-close");
 		},
@@ -5469,7 +5462,7 @@ function create_if_block_2$2(ctx) {
 			append(div, goa_icon_button);
 
 			if (!mounted) {
-				dispose = listen(goa_icon_button, "click", close);
+				dispose = listen(goa_icon_button, "click", /*close*/ ctx[6]);
 				mounted = true;
 			}
 		},
@@ -5482,7 +5475,7 @@ function create_if_block_2$2(ctx) {
 	};
 }
 
-// (51:8) {:else}
+// (62:8) {:else}
 function create_else_block$2(ctx) {
 	let div;
 
@@ -5501,7 +5494,7 @@ function create_else_block$2(ctx) {
 	};
 }
 
-// (47:8) {#if isScrollable}
+// (58:8) {#if isScrollable}
 function create_if_block_1$4(ctx) {
 	let goa_scrollable;
 
@@ -5525,7 +5518,7 @@ function create_if_block_1$4(ctx) {
 function create_fragment$b(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*isOpen*/ ctx[1] && create_if_block$6(ctx);
+	let if_block = /*isOpen*/ ctx[2] && create_if_block$6(ctx);
 
 	return {
 		c() {
@@ -5539,11 +5532,11 @@ function create_fragment$b(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*isOpen*/ ctx[1]) {
+			if (/*isOpen*/ ctx[2]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*isOpen*/ 2) {
+					if (dirty & /*isOpen*/ 4) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -5578,46 +5571,51 @@ function create_fragment$b(ctx) {
 	};
 }
 
-function close(e) {
-	e.target.dispatchEvent(new CustomEvent("_close", { composed: true }));
-	e.stopPropagation();
-}
-
 function instance$a($$self, $$props, $$invalidate) {
 	let isClosable;
 	let isScrollable;
 	let isOpen;
-	console.log('here');
 	let { title } = $$props;
 	let { closable } = $$props;
 	let { scrollable } = $$props;
 	let { open } = $$props;
+	let { width } = $$props;
 	let scrollOffset = 0;
 
+	function close(e) {
+		if (!isClosable) {
+			return;
+		}
+
+		e.target.dispatchEvent(new CustomEvent("_close", { composed: true }));
+		e.stopPropagation();
+	}
+
 	$$self.$$set = $$props => {
 		if ('title' in $$props) $$invalidate(0, title = $$props.title);
-		if ('closable' in $$props) $$invalidate(5, closable = $$props.closable);
-		if ('scrollable' in $$props) $$invalidate(6, scrollable = $$props.scrollable);
-		if ('open' in $$props) $$invalidate(7, open = $$props.open);
+		if ('closable' in $$props) $$invalidate(7, closable = $$props.closable);
+		if ('scrollable' in $$props) $$invalidate(8, scrollable = $$props.scrollable);
+		if ('open' in $$props) $$invalidate(9, open = $$props.open);
+		if ('width' in $$props) $$invalidate(1, width = $$props.width);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closable*/ 32) {
+		if ($$self.$$.dirty & /*closable*/ 128) {
 			$$invalidate(4, isClosable = toBoolean(closable));
 		}
 
-		if ($$self.$$.dirty & /*scrollable*/ 64) {
-			$$invalidate(3, isScrollable = toBoolean(scrollable));
+		if ($$self.$$.dirty & /*scrollable*/ 256) {
+			$$invalidate(5, isScrollable = toBoolean(scrollable));
 		}
 
-		if ($$self.$$.dirty & /*open*/ 128) {
-			$$invalidate(1, isOpen = toBoolean(open));
+		if ($$self.$$.dirty & /*open*/ 512) {
+			$$invalidate(2, isOpen = toBoolean(open));
 		}
 
-		if ($$self.$$.dirty & /*isOpen*/ 2) {
+		if ($$self.$$.dirty & /*isOpen*/ 4) {
 			{
 				if (isOpen) {
-					$$invalidate(2, scrollOffset = window.pageYOffset);
+					$$invalidate(3, scrollOffset = window.pageYOffset);
 				}
 			}
 		}
@@ -5625,10 +5623,12 @@ function instance$a($$self, $$props, $$invalidate) {
 
 	return [
 		title,
+		width,
 		isOpen,
 		scrollOffset,
-		isScrollable,
 		isClosable,
+		isScrollable,
+		close,
 		closable,
 		scrollable,
 		open
@@ -5638,7 +5638,7 @@ function instance$a($$self, $$props, $$invalidate) {
 class Modal extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:absolute;top:var(--scroll-offset, 0);left: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}.modal-pane{position:relative;background-color:#fff;z-index:1001;max-width:60ch;margin:1rem;box-shadow:var(--shadow-2);border-radius:4px;width:90%;max-height:90%}@media(min-width: 640px){.modal-pane{margin:1rem;max-height:80%;width:600px}}@media(min-width: 1024px){.modal-pane{width:65ch;max-height:80%}}.modal-actions{text-align:right;padding:0 1.75rem;margin:1.75rem 0;flex:1 1  auto}.modal-close{position:absolute;top:1rem;right:1rem}.modal-title{font-size:var(--fs-xl);padding-bottom:1rem;padding:0 1.75rem;margin:1.75rem 0;margin-right:40px;flex:0 0 auto}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:absolute;top:var(--scroll-offset, 0);left: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}.modal-pane{position:relative;background-color:#fff;z-index:1001;max-width:var(--width, 60ch);margin:1rem;box-shadow:var(--shadow-2);border-radius:4px;max-height:90%}@media(min-width: 640px){.modal-pane{max-height:80%}}.modal-actions{text-align:right;padding:0 1.75rem;margin:1.75rem 0;flex:1 1  auto}.modal-close{position:absolute;top:1rem;right:1rem}.modal-title{font-size:var(--fs-xl);padding-bottom:1rem;padding:0 1.75rem;margin:1.75rem 0;margin-right:40px;flex:0 0 auto}</style>`;
 
 		init(
 			this,
@@ -5652,9 +5652,10 @@ class Modal extends SvelteElement {
 			safe_not_equal,
 			{
 				title: 0,
-				closable: 5,
-				scrollable: 6,
-				open: 7
+				closable: 7,
+				scrollable: 8,
+				open: 9,
+				width: 1
 			},
 			null
 		);
@@ -5672,7 +5673,7 @@ class Modal extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["title", "closable", "scrollable", "open"];
+		return ["title", "closable", "scrollable", "open", "width"];
 	}
 
 	get title() {
@@ -5685,7 +5686,7 @@ class Modal extends SvelteElement {
 	}
 
 	get closable() {
-		return this.$$.ctx[5];
+		return this.$$.ctx[7];
 	}
 
 	set closable(closable) {
@@ -5694,7 +5695,7 @@ class Modal extends SvelteElement {
 	}
 
 	get scrollable() {
-		return this.$$.ctx[6];
+		return this.$$.ctx[8];
 	}
 
 	set scrollable(scrollable) {
@@ -5703,13 +5704,22 @@ class Modal extends SvelteElement {
 	}
 
 	get open() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[9];
 	}
 
 	set open(open) {
 		this.$$set({ open });
 		flush();
 	}
+
+	get width() {
+		return this.$$.ctx[1];
+	}
+
+	set width(width) {
+		this.$$set({ width });
+		flush();
+	}
 }
 
 customElements.define("goa-modal", Modal);
@@ -6061,7 +6071,7 @@ function create_else_block$1(ctx) {
 	let goa_spinner;
 	let goa_spinner_progress_value;
 	let t;
-	let if_block = /*message*/ ctx[1] && create_if_block_3(ctx);
+	let if_block = /*message*/ ctx[1] && create_if_block_3$1(ctx);
 
 	return {
 		c() {
@@ -6093,7 +6103,7 @@ function create_else_block$1(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_3(ctx);
+					if_block = create_if_block_3$1(ctx);
 					if_block.c();
 					if_block.m(div, null);
 				}
@@ -6202,7 +6212,7 @@ function create_if_block_1$3(ctx) {
 }
 
 // (30:6) {#if message}
-function create_if_block_3(ctx) {
+function create_if_block_3$1(ctx) {
 	let div;
 	let t;
 
@@ -7019,7 +7029,7 @@ customElements.define("goa-scrollable", Scrollable);
 
 /* libs/web-components/src/components/service-level-header/ServiceLevelHeader.svelte generated by Svelte v3.44.3 */
 
-function create_if_block_2(ctx) {
+function create_if_block_3(ctx) {
 	let div0;
 	let t0;
 	let div1;
@@ -7048,7 +7058,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (27:2) {#if level !== "live"}
+// (28:2) {#if level !== "live"}
 function create_if_block_1$2(ctx) {
 	let div0;
 	let t0_value = capitalize(/*level*/ ctx[0]) + "";
@@ -7056,6 +7066,10 @@ function create_if_block_1$2(ctx) {
 	let div0_class_value;
 	let t1;
 	let div1;
+	let t2;
+	let a;
+	let t4;
+	let if_block = /*feedbackurl*/ ctx[2] && create_if_block_2(ctx);
 
 	return {
 		c() {
@@ -7063,9 +7077,16 @@ function create_if_block_1$2(ctx) {
 			t0 = text(t0_value);
 			t1 = space();
 			div1 = element("div");
-			div1.innerHTML = `This is a new <a href="https://www.alberta.ca/index.aspx" class="web-link">Alberta Government</a> service`;
+			t2 = text("This is a new ");
+			a = element("a");
+			a.textContent = "Alberta Government";
+			t4 = text(" service\n      ");
+			if (if_block) if_block.c();
 			attr(div0, "data-testid", "level");
 			attr(div0, "class", div0_class_value = "service-level service-level--" + /*level*/ ctx[0]?.toLowerCase());
+			attr(a, "href", "https://www.alberta.ca/index.aspx");
+			attr(a, "class", "web-link");
+			attr(div1, "data-testid", "site-text");
 			attr(div1, "class", "site-text");
 		},
 		m(target, anchor) {
@@ -7073,6 +7094,10 @@ function create_if_block_1$2(ctx) {
 			append(div0, t0);
 			insert(target, t1, anchor);
 			insert(target, div1, anchor);
+			append(div1, t2);
+			append(div1, a);
+			append(div1, t4);
+			if (if_block) if_block.m(div1, null);
 		},
 		p(ctx, dirty) {
 			if (dirty & /*level*/ 1 && t0_value !== (t0_value = capitalize(/*level*/ ctx[0]) + "")) set_data(t0, t0_value);
@@ -7080,16 +7105,64 @@ function create_if_block_1$2(ctx) {
 			if (dirty & /*level*/ 1 && div0_class_value !== (div0_class_value = "service-level service-level--" + /*level*/ ctx[0]?.toLowerCase())) {
 				attr(div0, "class", div0_class_value);
 			}
+
+			if (/*feedbackurl*/ ctx[2]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block_2(ctx);
+					if_block.c();
+					if_block.m(div1, null);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
 		},
 		d(detaching) {
 			if (detaching) detach(div0);
 			if (detaching) detach(t1);
 			if (detaching) detach(div1);
+			if (if_block) if_block.d();
+		}
+	};
+}
+
+// (34:6) {#if feedbackurl}
+function create_if_block_2(ctx) {
+	let span;
+	let t0;
+	let a;
+	let t1;
+
+	return {
+		c() {
+			span = element("span");
+			t0 = text("— help us improve it by giving ");
+			a = element("a");
+			t1 = text("feedback");
+			attr(a, "href", /*feedbackurl*/ ctx[2]);
+			attr(a, "class", "web-link");
+			attr(span, "data-testid", "feedback");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t0);
+			append(span, a);
+			append(a, t1);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*feedbackurl*/ 4) {
+				attr(a, "href", /*feedbackurl*/ ctx[2]);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(span);
 		}
 	};
 }
 
-// (36:2) {#if version}
+// (40:2) {#if version}
 function create_if_block$3(ctx) {
 	let div;
 	let t;
@@ -7120,7 +7193,7 @@ function create_fragment$4(ctx) {
 	let t1;
 	let div;
 	let t2;
-	let if_block0 = /*level*/ ctx[0] === "live" && create_if_block_2();
+	let if_block0 = /*level*/ ctx[0] === "live" && create_if_block_3();
 	let if_block1 = /*level*/ ctx[0] !== "live" && create_if_block_1$2(ctx);
 	let if_block2 = /*version*/ ctx[1] && create_if_block$3(ctx);
 
@@ -7151,7 +7224,7 @@ function create_fragment$4(ctx) {
 		p(ctx, [dirty]) {
 			if (/*level*/ ctx[0] === "live") {
 				if (if_block0) ; else {
-					if_block0 = create_if_block_2();
+					if_block0 = create_if_block_3();
 					if_block0.c();
 					if_block0.m(header, t0);
 				}
@@ -7205,13 +7278,15 @@ function capitalize(val) {
 function instance$4($$self, $$props, $$invalidate) {
 	let { level } = $$props;
 	let { version } = $$props;
+	let { feedbackurl } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('level' in $$props) $$invalidate(0, level = $$props.level);
 		if ('version' in $$props) $$invalidate(1, version = $$props.version);
+		if ('feedbackurl' in $$props) $$invalidate(2, feedbackurl = $$props.feedbackurl);
 	};
 
-	return [level, version];
+	return [level, version, feedbackurl];
 }
 
 class ServiceLevelHeader extends SvelteElement {
@@ -7229,7 +7304,7 @@ class ServiceLevelHeader extends SvelteElement {
 			instance$4,
 			create_fragment$4,
 			safe_not_equal,
-			{ level: 0, version: 1 },
+			{ level: 0, version: 1, feedbackurl: 2 },
 			null
 		);
 
@@ -7246,7 +7321,7 @@ class ServiceLevelHeader extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["level", "version"];
+		return ["level", "version", "feedbackurl"];
 	}
 
 	get level() {
@@ -7266,6 +7341,15 @@ class ServiceLevelHeader extends SvelteElement {
 		this.$$set({ version });
 		flush();
 	}
+
+	get feedbackurl() {
+		return this.$$.ctx[2];
+	}
+
+	set feedbackurl(feedbackurl) {
+		this.$$set({ feedbackurl });
+		flush();
+	}
 }
 
 customElements.define("goa-service-level-header", ServiceLevelHeader);