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

package/package.json

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

package/web-components.es.js

@@ -8412,7 +8412,7 @@ function create_if_block_4$1(ctx) {
 	};
 }
 
-// (86:4) {#if leadingicon}
+// (95:4) {#if leadingicon}
 function create_if_block_3$2(ctx) {
 	let goa_icon;
 
@@ -8437,7 +8437,7 @@ function create_if_block_3$2(ctx) {
 	};
 }
 
-// (116:4) {#if trailingicon && !handlesTrailingIconClick}
+// (125:4) {#if trailingicon && !handlesTrailingIconClick}
 function create_if_block_2$3(ctx) {
 	let goa_icon;
 
@@ -8463,7 +8463,7 @@ function create_if_block_2$3(ctx) {
 	};
 }
 
-// (126:4) {#if trailingicon && handlesTrailingIconClick}
+// (135:4) {#if trailingicon && handlesTrailingIconClick}
 function create_if_block_1$3(ctx) {
 	let goa_icon_button;
 	let mounted;
@@ -8503,7 +8503,7 @@ function create_if_block_1$3(ctx) {
 	};
 }
 
-// (138:4) {#if suffix}
+// (147:4) {#if suffix}
 function create_if_block$5(ctx) {
 	let span;
 	let t;
@@ -8528,19 +8528,23 @@ function create_if_block$5(ctx) {
 }
 
 function create_fragment$e(ctx) {
-	let div1;
-	let div0;
+	let div3;
+	let div2;
 	let t0;
+	let div0;
 	let t1;
+	let t2;
 	let input;
 	let input_class_value;
 	let input_style_value;
 	let input_aria_label_value;
-	let t2;
 	let t3;
 	let t4;
-	let div0_class_value;
-	let div1_style_value;
+	let t5;
+	let t6;
+	let div1;
+	let div2_class_value;
+	let div3_style_value;
 	let mounted;
 	let dispose;
 	let if_block0 = /*prefix*/ ctx[14] && create_if_block_4$1(ctx);
@@ -8551,20 +8555,27 @@ function create_fragment$e(ctx) {
 
 	return {
 		c() {
-			div1 = element("div");
-			div0 = element("div");
+			div3 = element("div");
+			div2 = element("div");
 			if (if_block0) if_block0.c();
 			t0 = space();
-			if (if_block1) if_block1.c();
+			div0 = element("div");
+			div0.innerHTML = `<slot name="leadingContent"></slot>`;
 			t1 = space();
-			input = element("input");
+			if (if_block1) if_block1.c();
 			t2 = space();
-			if (if_block2) if_block2.c();
+			input = element("input");
 			t3 = space();
-			if (if_block3) if_block3.c();
+			if (if_block2) if_block2.c();
 			t4 = space();
+			if (if_block3) if_block3.c();
+			t5 = space();
 			if (if_block4) if_block4.c();
+			t6 = space();
+			div1 = element("div");
+			div1.innerHTML = `<slot name="trailingContent"></slot>`;
 			this.c = noop;
+			attr(div0, "class", "leading-content");
 			attr(input, "class", input_class_value = `input--${/*variant*/ ctx[7]}`);
 			attr(input, "style", input_style_value = `--search-icon-offset: ${/*trailingicon*/ ctx[6] ? "-0.5rem" : "0"}`);
 			input.readOnly = /*isReadonly*/ ctx[23];
@@ -8580,37 +8591,42 @@ function create_fragment$e(ctx) {
 			attr(input, "step", /*step*/ ctx[13]);
 			attr(input, "role", "textbox");
 			attr(input, "aria-label", input_aria_label_value = /*arialabel*/ ctx[10] || /*name*/ ctx[2]);
+			attr(div1, "class", "trailing-content");
 
-			attr(div0, "class", div0_class_value = `
+			attr(div2, "class", div2_class_value = `
       goa-input
       ${/*isDisabled*/ ctx[21] ? "goa-input--disabled" : ""}
       variant--${/*variant*/ ctx[7]}
       type--${/*type*/ ctx[1]}
     `);
 
-			toggle_class(div0, "error", /*isError*/ ctx[22]);
-			attr(div1, "class", "container");
+			toggle_class(div2, "error", /*isError*/ ctx[22]);
+			attr(div3, "class", "container");
 
-			attr(div1, "style", div1_style_value = `
+			attr(div3, "style", div3_style_value = `
     ${calculateMargin(/*mt*/ ctx[16], /*mr*/ ctx[17], /*mb*/ ctx[18], /*ml*/ ctx[19])};
     --width: ${/*width*/ ctx[9]};
   `);
 		},
 		m(target, anchor) {
-			insert(target, div1, anchor);
-			append(div1, div0);
-			if (if_block0) if_block0.m(div0, null);
-			append(div0, t0);
-			if (if_block1) if_block1.m(div0, null);
-			append(div0, t1);
-			append(div0, input);
+			insert(target, div3, anchor);
+			append(div3, div2);
+			if (if_block0) if_block0.m(div2, null);
+			append(div2, t0);
+			append(div2, div0);
+			append(div2, t1);
+			if (if_block1) if_block1.m(div2, null);
+			append(div2, t2);
+			append(div2, input);
 			/*input_binding*/ ctx[32](input);
-			append(div0, t2);
-			if (if_block2) if_block2.m(div0, null);
-			append(div0, t3);
-			if (if_block3) if_block3.m(div0, null);
-			append(div0, t4);
-			if (if_block4) if_block4.m(div0, null);
+			append(div2, t3);
+			if (if_block2) if_block2.m(div2, null);
+			append(div2, t4);
+			if (if_block3) if_block3.m(div2, null);
+			append(div2, t5);
+			if (if_block4) if_block4.m(div2, null);
+			append(div2, t6);
+			append(div2, div1);
 
 			if (!mounted) {
 				dispose = [
@@ -8628,7 +8644,7 @@ function create_fragment$e(ctx) {
 				} else {
 					if_block0 = create_if_block_4$1(ctx);
 					if_block0.c();
-					if_block0.m(div0, t0);
+					if_block0.m(div2, t0);
 				}
 			} else if (if_block0) {
 				if_block0.d(1);
@@ -8641,7 +8657,7 @@ function create_fragment$e(ctx) {
 				} else {
 					if_block1 = create_if_block_3$2(ctx);
 					if_block1.c();
-					if_block1.m(div0, t1);
+					if_block1.m(div2, t2);
 				}
 			} else if (if_block1) {
 				if_block1.d(1);
@@ -8710,7 +8726,7 @@ function create_fragment$e(ctx) {
 				} else {
 					if_block2 = create_if_block_2$3(ctx);
 					if_block2.c();
-					if_block2.m(div0, t3);
+					if_block2.m(div2, t4);
 				}
 			} else if (if_block2) {
 				if_block2.d(1);
@@ -8723,7 +8739,7 @@ function create_fragment$e(ctx) {
 				} else {
 					if_block3 = create_if_block_1$3(ctx);
 					if_block3.c();
-					if_block3.m(div0, t4);
+					if_block3.m(div2, t5);
 				}
 			} else if (if_block3) {
 				if_block3.d(1);
@@ -8736,37 +8752,37 @@ function create_fragment$e(ctx) {
 				} else {
 					if_block4 = create_if_block$5(ctx);
 					if_block4.c();
-					if_block4.m(div0, null);
+					if_block4.m(div2, t6);
 				}
 			} else if (if_block4) {
 				if_block4.d(1);
 				if_block4 = null;
 			}
 
-			if (dirty[0] & /*isDisabled, variant, type*/ 2097282 && div0_class_value !== (div0_class_value = `
+			if (dirty[0] & /*isDisabled, variant, type*/ 2097282 && div2_class_value !== (div2_class_value = `
       goa-input
       ${/*isDisabled*/ ctx[21] ? "goa-input--disabled" : ""}
       variant--${/*variant*/ ctx[7]}
       type--${/*type*/ ctx[1]}
     `)) {
-				attr(div0, "class", div0_class_value);
+				attr(div2, "class", div2_class_value);
 			}
 
 			if (dirty[0] & /*isDisabled, variant, type, isError*/ 6291586) {
-				toggle_class(div0, "error", /*isError*/ ctx[22]);
+				toggle_class(div2, "error", /*isError*/ ctx[22]);
 			}
 
-			if (dirty[0] & /*mt, mr, mb, ml, width*/ 983552 && div1_style_value !== (div1_style_value = `
+			if (dirty[0] & /*mt, mr, mb, ml, width*/ 983552 && div3_style_value !== (div3_style_value = `
     ${calculateMargin(/*mt*/ ctx[16], /*mr*/ ctx[17], /*mb*/ ctx[18], /*ml*/ ctx[19])};
     --width: ${/*width*/ ctx[9]};
   `)) {
-				attr(div1, "style", div1_style_value);
+				attr(div3, "style", div3_style_value);
 			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div1);
+			if (detaching) detach(div3);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
 			/*input_binding*/ ctx[32](null);
@@ -8830,6 +8846,12 @@ function instance$c($$self, $$props, $$invalidate) {
 		$$invalidate(0, value = ee.value);
 	}
 
+	onMount(() => {
+		if (prefix != "" || suffix != "") {
+			console.warn("GoAInput [prefix] and [suffix] properties are deprecated. Instead use leadingContent and trailingContent.");
+		}
+	});
+
 	function input_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			inputEl = $$value;
@@ -8942,7 +8964,7 @@ class Input extends SvelteElement {
 	constructor(options) {
 		super();
 
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type="text"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="number"]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix{background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.prefix{border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix{border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix{border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix{border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type="text"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="number"]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
       center center no-repeat}</style>`;
 
 		init(