@abgov/web-components 1.14.0-alpha.2 → 1.15.0-alpha.1

package/web-components.es.js

@@ -9163,7 +9163,8 @@ function create_if_block_2$9(ctx) {
 	let div;
 	let t0;
 	let t1;
-	let show_if = /*requirement*/ ctx[8] && /*REQUIREMENT_TYPES*/ ctx[10].includes(/*requirement*/ ctx[8]);
+	let show_if = /*requirement*/ ctx[9] && /*REQUIREMENT_TYPES*/ ctx[11].includes(/*requirement*/ ctx[9]);
+	let div_class_value;
 	let if_block = show_if && create_if_block_3$9(ctx);
 
 	return {
@@ -9172,8 +9173,8 @@ function create_if_block_2$9(ctx) {
 			t0 = text(/*label*/ ctx[5]);
 			t1 = space();
 			if (if_block) if_block.c();
-			attr(div, "class", "label");
-			attr(div, "id", /*id*/ ctx[9]);
+			attr(div, "class", div_class_value = `label ${/*labelsize*/ ctx[6]}`);
+			attr(div, "id", /*id*/ ctx[10]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -9183,7 +9184,7 @@ function create_if_block_2$9(ctx) {
 		},
 		p(ctx, dirty) {
 			if (dirty & /*label*/ 32) set_data(t0, /*label*/ ctx[5]);
-			if (dirty & /*requirement*/ 256) show_if = /*requirement*/ ctx[8] && /*REQUIREMENT_TYPES*/ ctx[10].includes(/*requirement*/ ctx[8]);
+			if (dirty & /*requirement*/ 512) show_if = /*requirement*/ ctx[9] && /*REQUIREMENT_TYPES*/ ctx[11].includes(/*requirement*/ ctx[9]);
 
 			if (show_if) {
 				if (if_block) {
@@ -9198,8 +9199,12 @@ function create_if_block_2$9(ctx) {
 				if_block = null;
 			}
 
-			if (dirty & /*id*/ 512) {
-				attr(div, "id", /*id*/ ctx[9]);
+			if (dirty & /*labelsize*/ 64 && div_class_value !== (div_class_value = `label ${/*labelsize*/ ctx[6]}`)) {
+				attr(div, "class", div_class_value);
+			}
+
+			if (dirty & /*id*/ 1024) {
+				attr(div, "id", /*id*/ ctx[10]);
 			}
 		},
 		d(detaching) {
@@ -9209,7 +9214,7 @@ function create_if_block_2$9(ctx) {
 	};
 }
 
-// (35:6) {#if requirement && REQUIREMENT_TYPES.includes(requirement)}
+// (37:6) {#if requirement && REQUIREMENT_TYPES.includes(requirement)}
 function create_if_block_3$9(ctx) {
 	let em;
 	let t0;
@@ -9220,7 +9225,7 @@ function create_if_block_3$9(ctx) {
 		c() {
 			em = element("em");
 			t0 = text("(");
-			t1 = text(/*requirement*/ ctx[8]);
+			t1 = text(/*requirement*/ ctx[9]);
 			t2 = text(")");
 		},
 		m(target, anchor) {
@@ -9230,7 +9235,7 @@ function create_if_block_3$9(ctx) {
 			append(em, t2);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*requirement*/ 256) set_data(t1, /*requirement*/ ctx[8]);
+			if (dirty & /*requirement*/ 512) set_data(t1, /*requirement*/ ctx[9]);
 		},
 		d(detaching) {
 			if (detaching) detach(em);
@@ -9238,7 +9243,7 @@ function create_if_block_3$9(ctx) {
 	};
 }
 
-// (43:2) {#if error}
+// (45:2) {#if error}
 function create_if_block_1$b(ctx) {
 	let div;
 	let goa_icon;
@@ -9250,7 +9255,7 @@ function create_if_block_1$b(ctx) {
 			div = element("div");
 			goa_icon = element("goa-icon");
 			t0 = space();
-			t1 = text(/*error*/ ctx[7]);
+			t1 = text(/*error*/ ctx[8]);
 			set_custom_element_data(goa_icon, "type", "warning");
 			set_custom_element_data(goa_icon, "size", "small");
 			set_custom_element_data(goa_icon, "theme", "filled");
@@ -9264,7 +9269,7 @@ function create_if_block_1$b(ctx) {
 			append(div, t1);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*error*/ 128) set_data(t1, /*error*/ ctx[7]);
+			if (dirty & /*error*/ 256) set_data(t1, /*error*/ ctx[8]);
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -9272,7 +9277,7 @@ function create_if_block_1$b(ctx) {
 	};
 }
 
-// (49:2) {#if helptext}
+// (51:2) {#if helptext}
 function create_if_block$l(ctx) {
 	let div;
 	let t;
@@ -9280,7 +9285,7 @@ function create_if_block$l(ctx) {
 	return {
 		c() {
 			div = element("div");
-			t = text(/*helptext*/ ctx[6]);
+			t = text(/*helptext*/ ctx[7]);
 			attr(div, "class", "help-msg");
 		},
 		m(target, anchor) {
@@ -9288,7 +9293,7 @@ function create_if_block$l(ctx) {
 			append(div, t);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*helptext*/ 64) set_data(t, /*helptext*/ ctx[6]);
+			if (dirty & /*helptext*/ 128) set_data(t, /*helptext*/ ctx[7]);
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -9304,8 +9309,8 @@ function create_fragment$B(ctx) {
 	let t2;
 	let div1_style_value;
 	let if_block0 = /*label*/ ctx[5] && create_if_block_2$9(ctx);
-	let if_block1 = /*error*/ ctx[7] && create_if_block_1$b(ctx);
-	let if_block2 = /*helptext*/ ctx[6] && create_if_block$l(ctx);
+	let if_block1 = /*error*/ ctx[8] && create_if_block_1$b(ctx);
+	let if_block2 = /*helptext*/ ctx[7] && create_if_block$l(ctx);
 
 	return {
 		c() {
@@ -9348,7 +9353,7 @@ function create_fragment$B(ctx) {
 				if_block0 = null;
 			}
 
-			if (/*error*/ ctx[7]) {
+			if (/*error*/ ctx[8]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
@@ -9361,7 +9366,7 @@ function create_fragment$B(ctx) {
 				if_block1 = null;
 			}
 
-			if (/*helptext*/ ctx[6]) {
+			if (/*helptext*/ ctx[7]) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
@@ -9401,6 +9406,7 @@ function instance$y($$self, $$props, $$invalidate) {
 	let { mb = null } = $$props;
 	let { ml = null } = $$props;
 	let { label = "" } = $$props;
+	let { labelsize = "regular" } = $$props;
 	let { helptext = "" } = $$props;
 	let { error = "" } = $$props;
 	let { requirement = "" } = $$props;
@@ -9417,10 +9423,11 @@ function instance$y($$self, $$props, $$invalidate) {
 		if ('mb' in $$props) $$invalidate(3, mb = $$props.mb);
 		if ('ml' in $$props) $$invalidate(4, ml = $$props.ml);
 		if ('label' in $$props) $$invalidate(5, label = $$props.label);
-		if ('helptext' in $$props) $$invalidate(6, helptext = $$props.helptext);
-		if ('error' in $$props) $$invalidate(7, error = $$props.error);
-		if ('requirement' in $$props) $$invalidate(8, requirement = $$props.requirement);
-		if ('id' in $$props) $$invalidate(9, id = $$props.id);
+		if ('labelsize' in $$props) $$invalidate(6, labelsize = $$props.labelsize);
+		if ('helptext' in $$props) $$invalidate(7, helptext = $$props.helptext);
+		if ('error' in $$props) $$invalidate(8, error = $$props.error);
+		if ('requirement' in $$props) $$invalidate(9, requirement = $$props.requirement);
+		if ('id' in $$props) $$invalidate(10, id = $$props.id);
 	};
 
 	return [
@@ -9430,6 +9437,7 @@ function instance$y($$self, $$props, $$invalidate) {
 		mb,
 		ml,
 		label,
+		labelsize,
 		helptext,
 		error,
 		requirement,
@@ -9442,7 +9450,7 @@ class FormItem extends SvelteElement {
 	constructor(options) {
 		super();
 		const style = document.createElement('style');
-		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}*{box-sizing:border-box}.label{display:block;font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:0.5rem 0}.label em{color:var(--goa-color-greyscale-700);font-weight:var(--goa-font-weight-regular);font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--goa-font-size-2);color:var(--goa-color-text-default);margin-right:56px}.error-msg{display:inline-flex;gap:0.25rem;font-size:var(--goa-font-size-2);color:var(--goa-color-interactive-error);margin-bottom:0.25rem}`;
+		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}*{box-sizing:border-box}.label{display:block;font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:0.5rem 0}.label.large{font:var(--goa-typography-heading-l)}.label em{color:var(--goa-color-greyscale-700);font-weight:var(--goa-font-weight-regular);font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--goa-font-size-2);color:var(--goa-color-text-default);margin-right:56px}.error-msg{display:inline-flex;gap:0.25rem;font-size:var(--goa-font-size-2);color:var(--goa-color-interactive-error);margin-bottom:0.25rem}`;
 		this.shadowRoot.appendChild(style);
 
 		init(
@@ -9462,10 +9470,11 @@ class FormItem extends SvelteElement {
 				mb: 3,
 				ml: 4,
 				label: 5,
-				helptext: 6,
-				error: 7,
-				requirement: 8,
-				id: 9
+				labelsize: 6,
+				helptext: 7,
+				error: 8,
+				requirement: 9,
+				id: 10
 			},
 			null
 		);
@@ -9490,6 +9499,7 @@ class FormItem extends SvelteElement {
 			"mb",
 			"ml",
 			"label",
+			"labelsize",
 			"helptext",
 			"error",
 			"requirement",
@@ -9551,17 +9561,26 @@ class FormItem extends SvelteElement {
 		flush();
 	}
 
-	get helptext() {
+	get labelsize() {
 		return this.$$.ctx[6];
 	}
 
+	set labelsize(labelsize) {
+		this.$$set({ labelsize });
+		flush();
+	}
+
+	get helptext() {
+		return this.$$.ctx[7];
+	}
+
 	set helptext(helptext) {
 		this.$$set({ helptext });
 		flush();
 	}
 
 	get error() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[8];
 	}
 
 	set error(error) {
@@ -9570,7 +9589,7 @@ class FormItem extends SvelteElement {
 	}
 
 	get requirement() {
-		return this.$$.ctx[8];
+		return this.$$.ctx[9];
 	}
 
 	set requirement(requirement) {
@@ -9579,7 +9598,7 @@ class FormItem extends SvelteElement {
 	}
 
 	get id() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[10];
 	}
 
 	set id(id) {
@@ -16622,7 +16641,7 @@ function create_else_block$6(ctx) {
 	};
 }
 
-// (83:2) {#if _isTableRoot}
+// (85:2) {#if _isTableRoot}
 function create_if_block$a(ctx) {
 	let slot;
 
@@ -16754,49 +16773,56 @@ function instance$h($$self, $$props, $$invalidate) {
 	});
 
 	async function attachSortEventHandling() {
+		var _a;
 		await tick();
-		const headings = _rootEl.querySelectorAll("goa-table-sort-header");
-
-		headings.forEach(heading => {
-			heading.addEventListener("click", () => {
-				const sortBy = heading.getAttribute("name");
-				let sortDir;
+		const contentSlot = _rootEl.querySelector("slot");
 
-				// relay state to all children
-				headings.forEach(child => {
-					if (child.getAttribute("name") === sortBy) {
-						const direction = child["direction"];
+		const headings = (_a = contentSlot.assignedElements().find(el => el.tagName === "THEAD" || el.tagName === "TABLE")) === null || _a === void 0
+		? void 0
+		: _a.querySelectorAll("goa-table-sort-header");
 
-						// starting direction is asc
-						const newDirection = direction === "asc" ? "desc" : "asc";
+		headings === null || headings === void 0
+		? void 0
+		: headings.forEach(heading => {
+				heading.addEventListener("click", () => {
+					const sortBy = heading.getAttribute("name");
+					let sortDir;
+
+					// relay state to all children
+					headings.forEach(child => {
+						if (child.getAttribute("name") === sortBy) {
+							const direction = child["direction"];
+
+							// starting direction is asc
+							const newDirection = direction === "asc" ? "desc" : "asc";
+
+							sortDir = newDirection === "asc" ? 1 : -1;
+							child.setAttribute("direction", newDirection);
+						} else {
+							child.setAttribute("direction", "none");
+						}
+					});
 
-						sortDir = newDirection === "asc" ? 1 : -1;
-						child.setAttribute("direction", newDirection);
-					} else {
-						child.setAttribute("direction", "none");
-					}
+					dispatch(heading, { sortBy, sortDir });
 				});
 
-				dispatch(heading, { sortBy, sortDir });
+				// dispatch the default sort params if initially set
+				const initialSortBy = heading.getAttribute("name");
+
+				const initialDirection = heading["direction"];
+
+				if (initialDirection && initialDirection !== "none") {
+					setTimeout(
+						() => {
+							dispatch(heading, {
+								sortBy: initialSortBy,
+								sortDir: initialDirection === "asc" ? 1 : -1
+							});
+						},
+						10
+					);
+				}
 			});
-
-			// dispatch the default sort params if initially set
-			const initialSortBy = heading.getAttribute("name");
-
-			const initialDirection = heading["direction"];
-
-			if (initialDirection && initialDirection !== "none") {
-				setTimeout(
-					() => {
-						dispatch(heading, {
-							sortBy: initialSortBy,
-							sortDir: initialDirection === "asc" ? 1 : -1
-						});
-					},
-					10
-				);
-			}
-		});
 	}
 
 	function div_binding($$value) {