@abgov/web-components 1.0.0-alpha.139 → 1.0.0-alpha.140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/web-components",
-  "version": "1.0.0-alpha.139",
+  "version": "1.0.0-alpha.140",
   "description": "Government of Alberta - UI Web components",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/web-components.es.js

@@ -1209,7 +1209,7 @@ function create_else_block$3(ctx) {
 	};
 }
 
-// (42:2) {#if showIcon}
+// (45:2) {#if showIcon}
 function create_if_block_1$a(ctx) {
 	let goa_icon;
 
@@ -1233,7 +1233,7 @@ function create_if_block_1$a(ctx) {
 	};
 }
 
-// (47:2) {#if content}
+// (50:2) {#if content}
 function create_if_block$g(ctx) {
 	let div;
 	let t;
@@ -1346,6 +1346,7 @@ function create_fragment$E(ctx) {
 function instance$z($$self, $$props, $$invalidate) {
 	let showIcon;
 	let iconType;
+	const [Types, validateType] = typeValidator("Badge type", ["success", "important", "information", "emergency", "dark", "midtone", "light"], true);
 	let { type } = $$props;
 	let { testid = "" } = $$props;
 	let { content = "" } = $$props;
@@ -1356,6 +1357,8 @@ function instance$z($$self, $$props, $$invalidate) {
 	let { ml = null } = $$props;
 
 	onMount(() => {
+		validateType(type);
+
 		if (!showIcon && !content) {
 			console.warn("GoABadge must have either then content or icon property set");
 		}
@@ -2462,6 +2465,7 @@ function create_fragment$A(ctx) {
 
 function instance$v($$self, $$props, $$invalidate) {
 	let iconType;
+	const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
 	let { mt = null } = $$props;
 	let { mr = null } = $$props;
 	let { mb = "l" } = $$props;
@@ -2470,6 +2474,10 @@ function instance$v($$self, $$props, $$invalidate) {
 	let { heading = "" } = $$props;
 	let { testid = "" } = $$props;
 
+	onMount(() => {
+		validateType(type);
+	});
+
 	$$self.$$set = $$props => {
 		if ('mt' in $$props) $$invalidate(0, mt = $$props.mt);
 		if ('mr' in $$props) $$invalidate(1, mr = $$props.mr);
@@ -4114,7 +4122,7 @@ function create_if_block$b(ctx) {
 	};
 }
 
-// (38:19) 
+// (43:19) 
 function create_if_block_3$4(ctx) {
 	let div;
 	let goa_spinner;
@@ -4178,7 +4186,7 @@ function create_if_block_3$4(ctx) {
 	};
 }
 
-// (27:2) {#if fullscreen}
+// (32:2) {#if fullscreen}
 function create_if_block_1$6(ctx) {
 	let div;
 	let goa_spinner;
@@ -4262,7 +4270,7 @@ function create_if_block_1$6(ctx) {
 	};
 }
 
-// (41:6) {#if message}
+// (46:6) {#if message}
 function create_if_block_4$2(ctx) {
 	let div;
 	let t;
@@ -4286,7 +4294,7 @@ function create_if_block_4$2(ctx) {
 	};
 }
 
-// (34:6) {#if message}
+// (39:6) {#if message}
 function create_if_block_2$5(ctx) {
 	let div;
 	let t;
@@ -4368,6 +4376,8 @@ function create_fragment$s(ctx) {
 
 function instance$q($$self, $$props, $$invalidate) {
 	let isVisible;
+	const [Variants, validateVariant] = typeValidator("Circular progress variant", ["fullscreen", "inline"]);
+	const [Sizes, validateSize] = typeValidator("Button size", ["small", "large"]);
 	let { variant = "inline" } = $$props;
 	let { size = "large" } = $$props;
 	let { message = "" } = $$props;
@@ -4378,6 +4388,8 @@ function instance$q($$self, $$props, $$invalidate) {
 	let inline;
 
 	onMount(async () => {
+		validateVariant(variant);
+		validateSize(size);
 		$$invalidate(2, spinnerSize = size === "small" ? "large" : "xlarge");
 		$$invalidate(3, fullscreen = variant === "fullscreen");
 		$$invalidate(4, inline = variant === "inline");
@@ -4580,6 +4592,9 @@ function create_fragment$r(ctx) {
 }
 
 function instance$p($$self, $$props, $$invalidate) {
+	const [Types, validateType] = typeValidator("Container type", ["interactive", "info", "error", "success", "important", "non-interactive"]);
+	const [Accents, validateAccent] = typeValidator("Container accent", ["thick", "thin", "filled"]);
+	const [Paddings, validatePadding] = typeValidator("Container padding", ["relaxed", "compact"]);
 	let { type = "interactive" } = $$props;
 	let { accent = "filled" } = $$props;
 	let { padding = "relaxed" } = $$props;
@@ -4589,6 +4604,12 @@ function instance$p($$self, $$props, $$invalidate) {
 	let { mb = "m" } = $$props;
 	let { ml = null } = $$props;
 
+	onMount(() => {
+		validateType(type);
+		validateAccent(accent);
+		validatePadding(padding);
+	});
+
 	$$self.$$set = $$props => {
 		if ('type' in $$props) $$invalidate(0, type = $$props.type);
 		if ('accent' in $$props) $$invalidate(1, accent = $$props.accent);
@@ -7024,7 +7045,7 @@ function create_if_block_2$4(ctx) {
 	};
 }
 
-// (38:6) {#if requirement && REQUIREMENT_TYPES.includes(requirement)}
+// (34:6) {#if requirement && REQUIREMENT_TYPES.includes(requirement)}
 function create_if_block_3$3(ctx) {
 	let em;
 	let t0;
@@ -7053,7 +7074,7 @@ function create_if_block_3$3(ctx) {
 	};
 }
 
-// (46:2) {#if error}
+// (42:2) {#if error}
 function create_if_block_1$4(ctx) {
 	let div;
 	let goa_icon;
@@ -7087,7 +7108,7 @@ function create_if_block_1$4(ctx) {
 	};
 }
 
-// (52:2) {#if helptext}
+// (48:2) {#if helptext}
 function create_if_block$7(ctx) {
 	let div;
 	let t;
@@ -7209,27 +7230,19 @@ function create_fragment$j(ctx) {
 }
 
 function instance$h($$self, $$props, $$invalidate) {
+	const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
 	let { testid = "" } = $$props;
 	let { mt = null } = $$props;
 	let { mr = null } = $$props;
 	let { mb = null } = $$props;
 	let { ml = null } = $$props;
-	const REQUIREMENT_TYPES = ["optional", "required", ""];
-
-	// type check function
-	function isRequirementType(value) {
-		return REQUIREMENT_TYPES.includes(value);
-	}
-
 	let { label = "" } = $$props;
 	let { helptext = "" } = $$props;
 	let { error = "" } = $$props;
 	let { requirement = "" } = $$props;
 
 	onMount(() => {
-		if (!isRequirementType(requirement)) {
-			console.error("Invalid requirement type", requirement);
-		}
+		validateRequirementType(requirement);
 	});
 
 	$$self.$$set = $$props => {
@@ -7792,6 +7805,7 @@ function instance$e($$self, $$props, $$invalidate) {
 	let isDisabled;
 	let isInverted;
 	let _paddingSize;
+	const [Variants, validateVariant] = typeValidator("Icon Button Variant", ["color", "nocolor", "dark"], true);
 	let { icon } = $$props;
 	let { size = "medium" } = $$props;
 	let { theme = "outline" } = $$props;
@@ -7805,6 +7819,10 @@ function instance$e($$self, $$props, $$invalidate) {
 	let { mb = null } = $$props;
 	let { ml = null } = $$props;
 
+	onMount(() => {
+		validateVariant(variant);
+	});
+
 	$$self.$$set = $$props => {
 		if ('icon' in $$props) $$invalidate(0, icon = $$props.icon);
 		if ('size' in $$props) $$invalidate(1, size = $$props.size);
@@ -8412,7 +8430,7 @@ function create_if_block_4$1(ctx) {
 	};
 }
 
-// (95:4) {#if leadingicon}
+// (100:4) {#if leadingicon}
 function create_if_block_3$2(ctx) {
 	let goa_icon;
 
@@ -8437,7 +8455,7 @@ function create_if_block_3$2(ctx) {
 	};
 }
 
-// (125:4) {#if trailingicon && !handlesTrailingIconClick}
+// (130:4) {#if trailingicon && !handlesTrailingIconClick}
 function create_if_block_2$3(ctx) {
 	let goa_icon;
 
@@ -8463,7 +8481,7 @@ function create_if_block_2$3(ctx) {
 	};
 }
 
-// (135:4) {#if trailingicon && handlesTrailingIconClick}
+// (140:4) {#if trailingicon && handlesTrailingIconClick}
 function create_if_block_1$3(ctx) {
 	let goa_icon_button;
 	let mounted;
@@ -8503,7 +8521,7 @@ function create_if_block_1$3(ctx) {
 	};
 }
 
-// (147:4) {#if suffix}
+// (152:4) {#if suffix}
 function create_if_block$5(ctx) {
 	let span;
 	let t;
@@ -8805,6 +8823,24 @@ function instance$c($$self, $$props, $$invalidate) {
 	let isReadonly;
 	let isError;
 	let isDisabled;
+
+	const [Types, validateType] = typeValidator("Input type", [
+		"text",
+		"number",
+		"password",
+		"email",
+		"date",
+		"datetime-local",
+		"month",
+		"range",
+		"search",
+		"tel",
+		"time",
+		"url",
+		"week"
+	]);
+
+	const [AutoCapitalize, validateAutoCapitalize] = typeValidator("Input auto capitalize", ["on", "off", "none", "sentences", "words", "characters"]);
 	let { type = "text" } = $$props;
 	let { name = "" } = $$props;
 	let { value = "" } = $$props;
@@ -8847,6 +8883,9 @@ function instance$c($$self, $$props, $$invalidate) {
 	}
 
 	onMount(() => {
+		validateType(type);
+		validateAutoCapitalize(autocapitalize);
+
 		if (prefix != "" || suffix != "") {
 			console.warn("GoAInput [prefix] and [suffix] properties are deprecated. Instead use leadingContent and trailingContent.");
 		}
@@ -9309,7 +9348,7 @@ function create_if_block_3$1(ctx) {
 	};
 }
 
-// (34:2) {#if ["alpha", "beta"].includes(type)}
+// (41:2) {#if ["alpha", "beta"].includes(type)}
 function create_if_block_1$2(ctx) {
 	let div0;
 	let t0_value = capitalize(/*type*/ ctx[0]) + "";
@@ -9378,7 +9417,7 @@ function create_if_block_1$2(ctx) {
 	};
 }
 
-// (43:6) {#if feedbackurl}
+// (50:6) {#if feedbackurl}
 function create_if_block_2$2(ctx) {
 	let span;
 	let t0;
@@ -9411,7 +9450,7 @@ function create_if_block_2$2(ctx) {
 	};
 }
 
-// (49:2) {#if version}
+// (56:2) {#if version}
 function create_if_block$4(ctx) {
 	let div;
 	let t;
@@ -9528,10 +9567,15 @@ function capitalize(val) {
 }
 
 function instance$b($$self, $$props, $$invalidate) {
+	const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
 	let { type } = $$props;
 	let { version = "" } = $$props;
 	let { feedbackurl = "" } = $$props;
 
+	onMount(() => {
+		validateType(type);
+	});
+
 	$$self.$$set = $$props => {
 		if ('type' in $$props) $$invalidate(0, type = $$props.type);
 		if ('version' in $$props) $$invalidate(1, version = $$props.version);
@@ -9813,7 +9857,7 @@ function create_if_block$3(ctx) {
 	};
 }
 
-// (65:8) {#if calloutvariant !== null}
+// (67:8) {#if calloutvariant !== null}
 function create_if_block_4(ctx) {
 	let div;
 	let goa_icon;
@@ -9857,7 +9901,7 @@ function create_if_block_4(ctx) {
 	};
 }
 
-// (74:10) {#if heading}
+// (76:10) {#if heading}
 function create_if_block_3(ctx) {
 	let div;
 	let t;
@@ -9882,7 +9926,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (77:10) {#if isClosable}
+// (79:10) {#if isClosable}
 function create_if_block_2$1(ctx) {
 	let div;
 	let goa_icon_button;
@@ -9916,7 +9960,7 @@ function create_if_block_2$1(ctx) {
 	};
 }
 
-// (89:12) {#if isScrollable}
+// (91:12) {#if isScrollable}
 function create_if_block_1$1(ctx) {
 	let goa_scrollable;
 
@@ -9998,6 +10042,7 @@ function instance$a($$self, $$props, $$invalidate) {
 	let _transitionTime;
 	let iconType;
 	const [CALLOUT_VARIANT, validateCalloutVariant] = typeValidator("Callout variant", ["emergency", "important", "information", "success", "event"]);
+	const [Transitions, validateTransition] = typeValidator("Modal transition", ["fast", "slow", "none"]);
 	let { heading = "" } = $$props;
 	let { closable = "false" } = $$props;
 	let { open = "false" } = $$props;
@@ -10016,6 +10061,7 @@ function instance$a($$self, $$props, $$invalidate) {
 
 	onMount(() => {
 		validateCalloutVariant(calloutvariant);
+		validateTransition(transition);
 	});
 
 	$$self.$$set = $$props => {
@@ -10324,20 +10370,12 @@ function create_fragment$b(ctx) {
 
 function instance$9($$self, $$props, $$invalidate) {
 	let iconType;
+	const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
 	let { type = "" } = $$props;
-	const NOTIFICATION_TYPES = ["emergency", "important", "information", "event"];
-
-	// type check function
-	function isNotificationType(value) {
-		return NOTIFICATION_TYPES.includes(value);
-	}
-
 	let show = true;
 
 	onMount(() => {
-		if (!isNotificationType(type)) {
-			console.error("Invalid notification type");
-		}
+		validateType(type);
 	});
 
 	function close() {
@@ -10534,11 +10572,11 @@ customElements.define("goa-page-block", PageBlock);
 
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[20] = list[i];
+	child_ctx[22] = list[i];
 	return child_ctx;
 }
 
-// (60:2) {#each options as option (option.value)}
+// (66:2) {#each options as option (option.value)}
 function create_each_block$1(key_1, ctx) {
 	let label;
 	let input;
@@ -10549,7 +10587,7 @@ function create_each_block$1(key_1, ctx) {
 	let div;
 	let t1;
 	let span;
-	let t2_value = (/*option*/ ctx[20].label || /*option*/ ctx[20].value) + "";
+	let t2_value = (/*option*/ ctx[22].label || /*option*/ ctx[22].value) + "";
 	let t2;
 	let t3;
 	let label_data_testid_value;
@@ -10557,7 +10595,7 @@ function create_each_block$1(key_1, ctx) {
 	let dispose;
 
 	function change_handler() {
-		return /*change_handler*/ ctx[18](/*option*/ ctx[20]);
+		return /*change_handler*/ ctx[18](/*option*/ ctx[22]);
 	}
 
 	return {
@@ -10574,13 +10612,13 @@ function create_each_block$1(key_1, ctx) {
 			t3 = space();
 			attr(input, "type", "radio");
 			attr(input, "name", /*name*/ ctx[1]);
-			input.value = input_value_value = /*option*/ ctx[20].value;
+			input.value = input_value_value = /*option*/ ctx[22].value;
 			input.disabled = /*isDisabled*/ ctx[12];
-			input.checked = input_checked_value = /*option*/ ctx[20].value === /*value*/ ctx[0];
+			input.checked = input_checked_value = /*option*/ ctx[22].value === /*value*/ ctx[0];
 			attr(input, "aria-label", input_aria_label_value = /*arialabel*/ ctx[4] || /*name*/ ctx[1]);
 			attr(div, "class", "goa-radio-icon");
 			attr(span, "class", "goa-radio-label");
-			attr(label, "data-testid", label_data_testid_value = "radio-option-" + /*option*/ ctx[20].value);
+			attr(label, "data-testid", label_data_testid_value = "radio-option-" + /*option*/ ctx[22].value);
 			attr(label, "class", "goa-radio");
 			toggle_class(label, "goa-radio--disabled", /*isDisabled*/ ctx[12]);
 			toggle_class(label, "goa-radio--error", /*isError*/ ctx[10]);
@@ -10608,7 +10646,7 @@ function create_each_block$1(key_1, ctx) {
 				attr(input, "name", /*name*/ ctx[1]);
 			}
 
-			if (dirty & /*options*/ 512 && input_value_value !== (input_value_value = /*option*/ ctx[20].value)) {
+			if (dirty & /*options*/ 512 && input_value_value !== (input_value_value = /*option*/ ctx[22].value)) {
 				input.value = input_value_value;
 			}
 
@@ -10616,7 +10654,7 @@ function create_each_block$1(key_1, ctx) {
 				input.disabled = /*isDisabled*/ ctx[12];
 			}
 
-			if (dirty & /*options, value*/ 513 && input_checked_value !== (input_checked_value = /*option*/ ctx[20].value === /*value*/ ctx[0])) {
+			if (dirty & /*options, value*/ 513 && input_checked_value !== (input_checked_value = /*option*/ ctx[22].value === /*value*/ ctx[0])) {
 				input.checked = input_checked_value;
 			}
 
@@ -10624,9 +10662,9 @@ function create_each_block$1(key_1, ctx) {
 				attr(input, "aria-label", input_aria_label_value);
 			}
 
-			if (dirty & /*options*/ 512 && t2_value !== (t2_value = (/*option*/ ctx[20].label || /*option*/ ctx[20].value) + "")) set_data(t2, t2_value);
+			if (dirty & /*options*/ 512 && t2_value !== (t2_value = (/*option*/ ctx[22].label || /*option*/ ctx[22].value) + "")) set_data(t2, t2_value);
 
-			if (dirty & /*options*/ 512 && label_data_testid_value !== (label_data_testid_value = "radio-option-" + /*option*/ ctx[20].value)) {
+			if (dirty & /*options*/ 512 && label_data_testid_value !== (label_data_testid_value = "radio-option-" + /*option*/ ctx[22].value)) {
 				attr(label, "data-testid", label_data_testid_value);
 			}
 
@@ -10655,7 +10693,7 @@ function create_fragment$9(ctx) {
 	let div_style_value;
 	let div_class_value;
 	let each_value = /*options*/ ctx[9];
-	const get_key = ctx => /*option*/ ctx[20].value;
+	const get_key = ctx => /*option*/ ctx[22].value;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context$1(ctx, each_value, i);
@@ -10723,6 +10761,7 @@ function create_fragment$9(ctx) {
 
 function instance$7($$self, $$props, $$invalidate) {
 	let isDisabled;
+	const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
 	let { name } = $$props;
 	let { value } = $$props;
 	let { orientation = "vertical" } = $$props;
@@ -10753,6 +10792,10 @@ function instance$7($$self, $$props, $$invalidate) {
 		deleteContext(name);
 	});
 
+	onMount(() => {
+		validateOrientation(orientation);
+	});
+
 	const change_handler = option => onChange(option.value);
 
 	function div_binding($$value) {
@@ -11247,11 +11290,11 @@ customElements.define("goa-scrollable", Scrollable);
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[9] = list[i];
+	child_ctx[13] = list[i];
 	return child_ctx;
 }
 
-// (46:2) {:else}
+// (55:2) {:else}
 function create_else_block(ctx) {
 	let div;
 	let div_class_value;
@@ -11277,7 +11320,7 @@ function create_else_block(ctx) {
 	};
 }
 
-// (42:29) 
+// (51:29) 
 function create_if_block_2(ctx) {
 	let each_1_anchor;
 	let current;
@@ -11361,7 +11404,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (32:31) 
+// (41:31) 
 function create_if_block_1(ctx) {
 	let div2;
 	let div0;
@@ -11451,7 +11494,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (21:2) {#if type === "card"}
+// (30:2) {#if type === "card"}
 function create_if_block$1(ctx) {
 	let div1;
 	let skeleton0;
@@ -11543,7 +11586,7 @@ function create_if_block$1(ctx) {
 	};
 }
 
-// (43:4) {#each Array(linecount) as _item}
+// (52:4) {#each Array(linecount) as _item}
 function create_each_block(ctx) {
 	let skeleton;
 	let current;
@@ -11669,8 +11712,27 @@ function create_fragment$6(ctx) {
 }
 
 function instance$4($$self, $$props, $$invalidate) {
+	const [Types, validateType] = typeValidator(
+		"Skeleton type",
+		[
+			"image",
+			"text",
+			"title",
+			"text-small",
+			"avatar",
+			"header",
+			"paragraph",
+			"thumbnail",
+			"card",
+			"profile",
+			"lines"
+		],
+		true
+	);
+
+	const [Sizes, validateSize] = typeValidator("Skeleton size", ["1", "2", "3", "4"]);
 	let { maxwidth = "" } = $$props;
-	let { size = 1 } = $$props;
+	let { size = "1" } = $$props;
 	let { linecount = 3 } = $$props;
 	let { type } = $$props;
 	let { testid = "" } = $$props;
@@ -11679,6 +11741,11 @@ function instance$4($$self, $$props, $$invalidate) {
 	let { mb = null } = $$props;
 	let { ml = null } = $$props;
 
+	onMount(() => {
+		validateType(type);
+		validateSize(size);
+	});
+
 	$$self.$$set = $$props => {
 		if ('maxwidth' in $$props) $$invalidate(0, maxwidth = $$props.maxwidth);
 		if ('size' in $$props) $$invalidate(1, size = $$props.size);