@abgov/web-components 1.0.0-alpha.209 → 1.0.0-alpha.210

package/package.json

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

package/web-components.es.js

@@ -9726,7 +9726,7 @@ function create_if_block_4$2(ctx) {
 	};
 }
 
-// (126:4) {#if leadingicon}
+// (140:4) {#if leadingicon}
 function create_if_block_3$8(ctx) {
 	let goa_icon;
 
@@ -9751,7 +9751,7 @@ function create_if_block_3$8(ctx) {
 	};
 }
 
-// (161:4) {#if trailingicon && !handlesTrailingIconClick}
+// (177:4) {#if trailingicon && !handlesTrailingIconClick}
 function create_if_block_2$8(ctx) {
 	let goa_icon;
 
@@ -9777,7 +9777,7 @@ function create_if_block_2$8(ctx) {
 	};
 }
 
-// (171:4) {#if trailingicon && handlesTrailingIconClick}
+// (187:4) {#if trailingicon && handlesTrailingIconClick}
 function create_if_block_1$9(ctx) {
 	let goa_icon_button;
 	let mounted;
@@ -9818,7 +9818,7 @@ function create_if_block_1$9(ctx) {
 	};
 }
 
-// (184:4) {#if suffix}
+// (200:4) {#if suffix}
 function create_if_block$g(ctx) {
 	let span;
 	let t;
@@ -9950,7 +9950,7 @@ function create_fragment$v(ctx) {
 			if (if_block1) if_block1.m(div2, null);
 			append(div2, t2);
 			append(div2, input);
-			/*input_binding*/ ctx[37](input);
+			/*input_binding*/ ctx[39](input);
 			append(div2, t3);
 			if (if_block2) if_block2.m(div2, null);
 			append(div2, t4);
@@ -9959,12 +9959,14 @@ function create_fragment$v(ctx) {
 			if (if_block4) if_block4.m(div2, null);
 			append(div2, t6);
 			append(div2, div1);
-			/*div3_binding*/ ctx[38](div3);
+			/*div3_binding*/ ctx[40](div3);
 
 			if (!mounted) {
 				dispose = [
 					listen(input, "keyup", /*onKeyUp*/ ctx[29]),
-					listen(input, "change", /*onKeyUp*/ ctx[29])
+					listen(input, "change", /*onKeyUp*/ ctx[29]),
+					listen(input, "focus", /*onFocus*/ ctx[30]),
+					listen(input, "blur", /*onBlur*/ ctx[31])
 				];
 
 				mounted = true;
@@ -10136,11 +10138,11 @@ function create_fragment$v(ctx) {
 			if (detaching) detach(div3);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
-			/*input_binding*/ ctx[37](null);
+			/*input_binding*/ ctx[39](null);
 			if (if_block2) if_block2.d();
 			if (if_block3) if_block3.d();
 			if (if_block4) if_block4.d();
-			/*div3_binding*/ ctx[38](null);
+			/*div3_binding*/ ctx[40](null);
 			mounted = false;
 			run_all(dispose);
 		}
@@ -10233,6 +10235,26 @@ function instance$s($$self, $$props, $$invalidate) {
 		$$invalidate(0, value = input.value);
 	}
 
+	function onFocus(e) {
+		const input = e.target;
+
+		input.dispatchEvent(new CustomEvent("_focus",
+		{
+				composed: true,
+				detail: { name, value: input.value }
+			}));
+	}
+
+	function onBlur(e) {
+		const input = e.target;
+
+		input.dispatchEvent(new CustomEvent("_blur",
+		{
+				composed: true,
+				detail: { name, value: input.value }
+			}));
+	}
+
 	onMount(() => {
 		validateType(type);
 		validateAutoCapitalize(autocapitalize);
@@ -10277,11 +10299,11 @@ function instance$s($$self, $$props, $$invalidate) {
 		if ('leadingicon' in $$props) $$invalidate(5, leadingicon = $$props.leadingicon);
 		if ('trailingicon' in $$props) $$invalidate(6, trailingicon = $$props.trailingicon);
 		if ('variant' in $$props) $$invalidate(7, variant = $$props.variant);
-		if ('disabled' in $$props) $$invalidate(30, disabled = $$props.disabled);
-		if ('handletrailingiconclick' in $$props) $$invalidate(31, handletrailingiconclick = $$props.handletrailingiconclick);
-		if ('focused' in $$props) $$invalidate(32, focused = $$props.focused);
-		if ('readonly' in $$props) $$invalidate(33, readonly = $$props.readonly);
-		if ('error' in $$props) $$invalidate(34, error = $$props.error);
+		if ('disabled' in $$props) $$invalidate(32, disabled = $$props.disabled);
+		if ('handletrailingiconclick' in $$props) $$invalidate(33, handletrailingiconclick = $$props.handletrailingiconclick);
+		if ('focused' in $$props) $$invalidate(34, focused = $$props.focused);
+		if ('readonly' in $$props) $$invalidate(35, readonly = $$props.readonly);
+		if ('error' in $$props) $$invalidate(36, error = $$props.error);
 		if ('testid' in $$props) $$invalidate(8, testid = $$props.testid);
 		if ('width' in $$props) $$invalidate(9, width = $$props.width);
 		if ('arialabel' in $$props) $$invalidate(10, arialabel = $$props.arialabel);
@@ -10290,7 +10312,7 @@ function instance$s($$self, $$props, $$invalidate) {
 		if ('step' in $$props) $$invalidate(13, step = $$props.step);
 		if ('prefix' in $$props) $$invalidate(14, prefix = $$props.prefix);
 		if ('suffix' in $$props) $$invalidate(15, suffix = $$props.suffix);
-		if ('debounce' in $$props) $$invalidate(35, debounce = $$props.debounce);
+		if ('debounce' in $$props) $$invalidate(37, debounce = $$props.debounce);
 		if ('maxlength' in $$props) $$invalidate(16, maxlength = $$props.maxlength);
 		if ('mt' in $$props) $$invalidate(17, mt = $$props.mt);
 		if ('mr' in $$props) $$invalidate(18, mr = $$props.mr);
@@ -10299,27 +10321,27 @@ function instance$s($$self, $$props, $$invalidate) {
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[1] & /*handletrailingiconclick*/ 1) {
+		if ($$self.$$.dirty[1] & /*handletrailingiconclick*/ 4) {
 			$$invalidate(28, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
 		}
 
-		if ($$self.$$.dirty[1] & /*focused*/ 2) {
-			$$invalidate(36, isFocused = toBoolean(focused));
+		if ($$self.$$.dirty[1] & /*focused*/ 8) {
+			$$invalidate(38, isFocused = toBoolean(focused));
 		}
 
-		if ($$self.$$.dirty[1] & /*readonly*/ 4) {
+		if ($$self.$$.dirty[1] & /*readonly*/ 16) {
 			$$invalidate(25, isReadonly = toBoolean(readonly));
 		}
 
-		if ($$self.$$.dirty[1] & /*error*/ 8) {
+		if ($$self.$$.dirty[1] & /*error*/ 32) {
 			$$invalidate(27, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty[0] & /*disabled*/ 1073741824) {
+		if ($$self.$$.dirty[1] & /*disabled*/ 2) {
 			$$invalidate(26, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty[0] & /*inputEl*/ 2097152 | $$self.$$.dirty[1] & /*isFocused*/ 32) {
+		if ($$self.$$.dirty[0] & /*inputEl*/ 2097152 | $$self.$$.dirty[1] & /*isFocused*/ 128) {
 			if (isFocused && inputEl) {
 				setTimeout(() => inputEl.focus(), 1);
 			}
@@ -10365,6 +10387,8 @@ function instance$s($$self, $$props, $$invalidate) {
 		isError,
 		handlesTrailingIconClick,
 		onKeyUp,
+		onFocus,
+		onBlur,
 		disabled,
 		handletrailingiconclick,
 		focused,
@@ -10406,11 +10430,11 @@ class Input extends SvelteElement {
 				leadingicon: 5,
 				trailingicon: 6,
 				variant: 7,
-				disabled: 30,
-				handletrailingiconclick: 31,
-				focused: 32,
-				readonly: 33,
-				error: 34,
+				disabled: 32,
+				handletrailingiconclick: 33,
+				focused: 34,
+				readonly: 35,
+				error: 36,
 				testid: 8,
 				width: 9,
 				arialabel: 10,
@@ -10419,7 +10443,7 @@ class Input extends SvelteElement {
 				step: 13,
 				prefix: 14,
 				suffix: 15,
-				debounce: 35,
+				debounce: 37,
 				maxlength: 16,
 				mt: 17,
 				mr: 18,
@@ -10547,7 +10571,7 @@ class Input extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[30];
+		return this.$$.ctx[32];
 	}
 
 	set disabled(disabled) {
@@ -10556,7 +10580,7 @@ class Input extends SvelteElement {
 	}
 
 	get handletrailingiconclick() {
-		return this.$$.ctx[31];
+		return this.$$.ctx[33];
 	}
 
 	set handletrailingiconclick(handletrailingiconclick) {
@@ -10565,7 +10589,7 @@ class Input extends SvelteElement {
 	}
 
 	get focused() {
-		return this.$$.ctx[32];
+		return this.$$.ctx[34];
 	}
 
 	set focused(focused) {
@@ -10574,7 +10598,7 @@ class Input extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[33];
+		return this.$$.ctx[35];
 	}
 
 	set readonly(readonly) {
@@ -10583,7 +10607,7 @@ class Input extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[34];
+		return this.$$.ctx[36];
 	}
 
 	set error(error) {
@@ -10664,7 +10688,7 @@ class Input extends SvelteElement {
 	}
 
 	get debounce() {
-		return this.$$.ctx[35];
+		return this.$$.ctx[37];
 	}
 
 	set debounce(debounce) {