@abgov/web-components 1.0.0-alpha.199 → 1.0.0-alpha.200

package/package.json

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

package/web-components.es.js

@@ -154,6 +154,9 @@ function set_data(text, data) {
     if (text.wholeText !== data)
         text.data = data;
 }
+function set_input_value(input, value) {
+    input.value = value == null ? '' : value;
+}
 function set_style(node, key, value, important) {
     if (value === null) {
         node.style.removeProperty(key);
@@ -15059,16 +15062,15 @@ function create_fragment$b(ctx) {
 			textarea = element("textarea");
 			t = space();
 			this.c = noop;
-			attr(textarea, "name", /*name*/ ctx[0]);
+			attr(textarea, "name", /*name*/ ctx[1]);
 			attr(textarea, "placeholder", /*placeholder*/ ctx[2]);
-			textarea.value = /*value*/ ctx[1];
 			attr(textarea, "rows", /*rows*/ ctx[3]);
-			attr(textarea, "aria-label", textarea_aria_label_value = /*arialabel*/ ctx[6] || /*name*/ ctx[0]);
+			attr(textarea, "aria-label", textarea_aria_label_value = /*arialabel*/ ctx[6] || /*name*/ ctx[1]);
 			attr(textarea, "class", "goa-textarea");
-			textarea.disabled = /*isDisabled*/ ctx[12];
-			textarea.readOnly = /*isReadonly*/ ctx[13];
+			textarea.disabled = /*isDisabled*/ ctx[13];
+			textarea.readOnly = /*isReadonly*/ ctx[14];
 			attr(textarea, "data-testid", /*testid*/ ctx[4]);
-			toggle_class(textarea, "error", /*isError*/ ctx[14]);
+			toggle_class(textarea, "error", /*isError*/ ctx[15]);
 			attr(div, "class", "container");
 
 			attr(div, "style", div_style_value = `
@@ -15079,48 +15081,50 @@ function create_fragment$b(ctx) {
 		m(target, anchor) {
 			insert(target, div, anchor);
 			append(div, textarea);
+			/*textarea_binding*/ ctx[19](textarea);
+			set_input_value(textarea, /*value*/ ctx[0]);
 			append(div, t);
 
 			if (!mounted) {
-				dispose = listen(textarea, "keyup", /*onChange*/ ctx[15]);
+				dispose = listen(textarea, "input", /*textarea_input_handler*/ ctx[20]);
 				mounted = true;
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*name*/ 1) {
-				attr(textarea, "name", /*name*/ ctx[0]);
+			if (dirty & /*name*/ 2) {
+				attr(textarea, "name", /*name*/ ctx[1]);
 			}
 
 			if (dirty & /*placeholder*/ 4) {
 				attr(textarea, "placeholder", /*placeholder*/ ctx[2]);
 			}
 
-			if (dirty & /*value*/ 2) {
-				textarea.value = /*value*/ ctx[1];
-			}
-
 			if (dirty & /*rows*/ 8) {
 				attr(textarea, "rows", /*rows*/ ctx[3]);
 			}
 
-			if (dirty & /*arialabel, name*/ 65 && textarea_aria_label_value !== (textarea_aria_label_value = /*arialabel*/ ctx[6] || /*name*/ ctx[0])) {
+			if (dirty & /*arialabel, name*/ 66 && textarea_aria_label_value !== (textarea_aria_label_value = /*arialabel*/ ctx[6] || /*name*/ ctx[1])) {
 				attr(textarea, "aria-label", textarea_aria_label_value);
 			}
 
-			if (dirty & /*isDisabled*/ 4096) {
-				textarea.disabled = /*isDisabled*/ ctx[12];
+			if (dirty & /*isDisabled*/ 8192) {
+				textarea.disabled = /*isDisabled*/ ctx[13];
 			}
 
-			if (dirty & /*isReadonly*/ 8192) {
-				textarea.readOnly = /*isReadonly*/ ctx[13];
+			if (dirty & /*isReadonly*/ 16384) {
+				textarea.readOnly = /*isReadonly*/ ctx[14];
 			}
 
 			if (dirty & /*testid*/ 16) {
 				attr(textarea, "data-testid", /*testid*/ ctx[4]);
 			}
 
-			if (dirty & /*isError*/ 16384) {
-				toggle_class(textarea, "error", /*isError*/ ctx[14]);
+			if (dirty & /*value*/ 1) {
+				set_input_value(textarea, /*value*/ ctx[0]);
+			}
+
+			if (dirty & /*isError*/ 32768) {
+				toggle_class(textarea, "error", /*isError*/ ctx[15]);
 			}
 
 			if (dirty & /*mt, mr, mb, ml, width*/ 1952 && div_style_value !== (div_style_value = `
@@ -15134,6 +15138,7 @@ function create_fragment$b(ctx) {
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(div);
+			/*textarea_binding*/ ctx[19](null);
 			mounted = false;
 			dispose();
 		}
@@ -15159,27 +15164,23 @@ function instance$8($$self, $$props, $$invalidate) {
 	let { mb = null } = $$props;
 	let { ml = null } = $$props;
 	let { maxcharcount = 0 } = $$props;
+	let _textAreaEl;
 
-	// $: showCounter = toBoolean(showcounter);
-	function onChange(e) {
-		const target = e.target;
-		const value = target.value;
-		if (isDisabled) return;
-
-		e.target.dispatchEvent(new CustomEvent("_change",
-		{
-				composed: true,
-				bubbles: false,
-				cancelable: true,
-				detail: { event: e, name, value }
-			}));
+	function textarea_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			_textAreaEl = $$value;
+			$$invalidate(12, _textAreaEl);
+		});
+	}
 
-		e.stopPropagation();
+	function textarea_input_handler() {
+		value = this.value;
+		$$invalidate(0, value);
 	}
 
 	$$self.$$set = $$props => {
-		if ('name' in $$props) $$invalidate(0, name = $$props.name);
-		if ('value' in $$props) $$invalidate(1, value = $$props.value);
+		if ('name' in $$props) $$invalidate(1, name = $$props.name);
+		if ('value' in $$props) $$invalidate(0, value = $$props.value);
 		if ('placeholder' in $$props) $$invalidate(2, placeholder = $$props.placeholder);
 		if ('rows' in $$props) $$invalidate(3, rows = $$props.rows);
 		if ('testid' in $$props) $$invalidate(4, testid = $$props.testid);
@@ -15197,21 +15198,36 @@ function instance$8($$self, $$props, $$invalidate) {
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*error*/ 65536) {
-			$$invalidate(14, isError = toBoolean(error));
+			$$invalidate(15, isError = toBoolean(error));
 		}
 
 		if ($$self.$$.dirty & /*disabled*/ 262144) {
-			$$invalidate(12, isDisabled = toBoolean(disabled));
+			$$invalidate(13, isDisabled = toBoolean(disabled));
 		}
 
 		if ($$self.$$.dirty & /*readonly*/ 131072) {
-			$$invalidate(13, isReadonly = toBoolean(readonly));
+			$$invalidate(14, isReadonly = toBoolean(readonly));
+		}
+
+		if ($$self.$$.dirty & /*_textAreaEl, isDisabled, name, value*/ 12291) {
+			// $: showCounter = toBoolean(showcounter);
+			{
+				if (_textAreaEl && !isDisabled) {
+					_textAreaEl.dispatchEvent(new CustomEvent("_change",
+					{
+							composed: true,
+							bubbles: false,
+							cancelable: true,
+							detail: { name, value }
+						}));
+				}
+			}
 		}
 	};
 
 	return [
-		name,
 		value,
+		name,
 		placeholder,
 		rows,
 		testid,
@@ -15222,13 +15238,15 @@ function instance$8($$self, $$props, $$invalidate) {
 		mb,
 		ml,
 		maxcharcount,
+		_textAreaEl,
 		isDisabled,
 		isReadonly,
 		isError,
-		onChange,
 		error,
 		readonly,
-		disabled
+		disabled,
+		textarea_binding,
+		textarea_input_handler
 	];
 }
 
@@ -15250,8 +15268,8 @@ class TextArea extends SvelteElement {
 			create_fragment$b,
 			safe_not_equal,
 			{
-				name: 0,
-				value: 1,
+				name: 1,
+				value: 0,
 				placeholder: 2,
 				rows: 3,
 				testid: 4,
@@ -15302,7 +15320,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get name() {
-		return this.$$.ctx[0];
+		return this.$$.ctx[1];
 	}
 
 	set name(name) {
@@ -15311,7 +15329,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get value() {
-		return this.$$.ctx[1];
+		return this.$$.ctx[0];
 	}
 
 	set value(value) {