@abgov/react-components 4.0.0-alpha.98 → 4.0.0-alpha.99

package/lib/input/input.d.ts

@@ -54,6 +54,8 @@ interface BaseProps extends Margins {
     suffix?: string;
     testId?: string;
     ariaLabel?: string;
+    leadingContent?: React.ReactNode;
+    trailingContent?: React.ReactNode;
 }
 declare type OnChange = (name: string, value: string) => void;
 export interface InputProps extends BaseProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.98",
+  "version": "4.0.0-alpha.99",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -10357,7 +10357,7 @@ function create_if_block_4$1(ctx) {
     }
 
   };
-} // (86:4) {#if leadingicon}
+} // (95:4) {#if leadingicon}
 
 
 function create_if_block_3$2(ctx) {
@@ -10391,7 +10391,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) {
@@ -10426,7 +10426,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) {
@@ -10481,7 +10481,7 @@ function create_if_block_1$3(ctx) {
     }
 
   };
-} // (138:4) {#if suffix}
+} // (147:4) {#if suffix}
 
 
 function create_if_block$5(ctx) {
@@ -10517,19 +10517,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 =
@@ -10553,20 +10557,27 @@ function create_fragment$e(ctx) {
   ctx[15] && create_if_block$5(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]}`);
@@ -10612,7 +10623,8 @@ function create_fragment$e(ctx) {
       ctx[10] ||
       /*name*/
       ctx[2]);
-      attr(div0, "class", div0_class_value = `
+      attr(div1, "class", "trailing-content");
+      attr(div2, "class", div2_class_value = `
       goa-input
       ${
       /*isDisabled*/
@@ -10624,11 +10636,11 @@ function create_fragment$e(ctx) {
       /*type*/
       ctx[1]}
     `);
-      toggle_class(div0, "error",
+      toggle_class(div2, "error",
       /*isError*/
       ctx[22]);
-      attr(div1, "class", "container");
-      attr(div1, "style", div1_style_value = `
+      attr(div3, "class", "container");
+      attr(div3, "style", div3_style_value = `
     ${calculateMargin(
       /*mt*/
       ctx[16],
@@ -10645,22 +10657,26 @@ function create_fragment$e(ctx) {
     },
 
     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 = [listen(input, "keyup",
@@ -10681,7 +10697,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);
@@ -10696,7 +10712,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);
@@ -10829,7 +10845,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);
@@ -10846,7 +10862,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);
@@ -10861,7 +10877,7 @@ 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);
@@ -10870,7 +10886,7 @@ function create_fragment$e(ctx) {
 
       if (dirty[0] &
       /*isDisabled, variant, type*/
-      2097282 && div0_class_value !== (div0_class_value = `
+      2097282 && div2_class_value !== (div2_class_value = `
       goa-input
       ${
       /*isDisabled*/
@@ -10882,20 +10898,20 @@ function create_fragment$e(ctx) {
       /*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",
+        toggle_class(div2, "error",
         /*isError*/
         ctx[22]);
       }
 
       if (dirty[0] &
       /*mt, mr, mb, ml, width*/
-      983552 && div1_style_value !== (div1_style_value = `
+      983552 && div3_style_value !== (div3_style_value = `
     ${calculateMargin(
       /*mt*/
       ctx[16],
@@ -10909,7 +10925,7 @@ function create_fragment$e(ctx) {
       /*width*/
       ctx[9]};
   `)) {
-        attr(div1, "style", div1_style_value);
+        attr(div3, "style", div3_style_value);
       }
     },
 
@@ -10917,7 +10933,7 @@ function create_fragment$e(ctx) {
     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*/
@@ -11036,6 +11052,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;
@@ -11129,7 +11151,7 @@ function instance$c($$self, $$props, $$invalidate) {
 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(this, {
       target: this.shadowRoot,
@@ -16661,6 +16683,8 @@ const GoAInput = ({
   mr,
   mb,
   ml,
+  leadingContent,
+  trailingContent,
   onTrailingIconClick,
   onChange
 }) => {
@@ -16691,7 +16715,7 @@ const GoAInput = ({
       current.removeEventListener("_trailingIconClick", clickListener);
     };
   }, [ref, onChange, onTrailingIconClick]);
-  return jsx("goa-input", {
+  return jsxs("goa-input", Object.assign({
     ref: ref,
     focused: focused,
     type: type,
@@ -16719,7 +16743,17 @@ const GoAInput = ({
     mb: mb,
     ml: ml,
     handletrailingiconclick: !!onTrailingIconClick
-  }, void 0);
+  }, {
+    children: [leadingContent && jsx("div", Object.assign({
+      slot: "leadingContent"
+    }, {
+      children: leadingContent
+    }), void 0), trailingContent && jsx("div", Object.assign({
+      slot: "trailingContent"
+    }, {
+      children: trailingContent
+    }), void 0)]
+  }), void 0);
 };
 
 const onDateChangeHandler = onChange => {

package/react-components.umd.js

@@ -10402,7 +10402,7 @@
 	    }
 
 	  };
-	} // (86:4) {#if leadingicon}
+	} // (95:4) {#if leadingicon}
 
 
 	function create_if_block_3$2(ctx) {
@@ -10436,7 +10436,7 @@
 	    }
 
 	  };
-	} // (116:4) {#if trailingicon && !handlesTrailingIconClick}
+	} // (125:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
 	function create_if_block_2$3(ctx) {
@@ -10471,7 +10471,7 @@
 	    }
 
 	  };
-	} // (126:4) {#if trailingicon && handlesTrailingIconClick}
+	} // (135:4) {#if trailingicon && handlesTrailingIconClick}
 
 
 	function create_if_block_1$3(ctx) {
@@ -10526,7 +10526,7 @@
 	    }
 
 	  };
-	} // (138:4) {#if suffix}
+	} // (147:4) {#if suffix}
 
 
 	function create_if_block$5(ctx) {
@@ -10562,19 +10562,23 @@
 	}
 
 	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 =
@@ -10598,20 +10602,27 @@
 	  ctx[15] && create_if_block$5(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]}`);
@@ -10657,7 +10668,8 @@
 	      ctx[10] ||
 	      /*name*/
 	      ctx[2]);
-	      attr(div0, "class", div0_class_value = `
+	      attr(div1, "class", "trailing-content");
+	      attr(div2, "class", div2_class_value = `
       goa-input
       ${
       /*isDisabled*/
@@ -10669,11 +10681,11 @@
       /*type*/
       ctx[1]}
     `);
-	      toggle_class(div0, "error",
+	      toggle_class(div2, "error",
 	      /*isError*/
 	      ctx[22]);
-	      attr(div1, "class", "container");
-	      attr(div1, "style", div1_style_value = `
+	      attr(div3, "class", "container");
+	      attr(div3, "style", div3_style_value = `
     ${calculateMargin(
       /*mt*/
       ctx[16],
@@ -10690,22 +10702,26 @@
 	    },
 
 	    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 = [listen(input, "keyup",
@@ -10726,7 +10742,7 @@
 	        } 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);
@@ -10741,7 +10757,7 @@
 	        } 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);
@@ -10874,7 +10890,7 @@
 	        } 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);
@@ -10891,7 +10907,7 @@
 	        } 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);
@@ -10906,7 +10922,7 @@
 	        } 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);
@@ -10915,7 +10931,7 @@
 
 	      if (dirty[0] &
 	      /*isDisabled, variant, type*/
-	      2097282 && div0_class_value !== (div0_class_value = `
+	      2097282 && div2_class_value !== (div2_class_value = `
       goa-input
       ${
       /*isDisabled*/
@@ -10927,20 +10943,20 @@
       /*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",
+	        toggle_class(div2, "error",
 	        /*isError*/
 	        ctx[22]);
 	      }
 
 	      if (dirty[0] &
 	      /*mt, mr, mb, ml, width*/
-	      983552 && div1_style_value !== (div1_style_value = `
+	      983552 && div3_style_value !== (div3_style_value = `
     ${calculateMargin(
       /*mt*/
       ctx[16],
@@ -10954,7 +10970,7 @@
       /*width*/
       ctx[9]};
   `)) {
-	        attr(div1, "style", div1_style_value);
+	        attr(div3, "style", div3_style_value);
 	      }
 	    },
 
@@ -10962,7 +10978,7 @@
 	    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*/
@@ -11081,6 +11097,12 @@
 	    $$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;
@@ -11174,7 +11196,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(this, {
 	      target: this.shadowRoot,
@@ -16704,6 +16726,8 @@
 	      mr = _a.mr,
 	      mb = _a.mb,
 	      ml = _a.ml,
+	      leadingContent = _a.leadingContent,
+	      trailingContent = _a.trailingContent,
 	      onTrailingIconClick = _a.onTrailingIconClick,
 	      onChange = _a.onChange;
 	  var ref = react.useRef(null);
@@ -16732,7 +16756,7 @@
 	      current.removeEventListener("_trailingIconClick", clickListener);
 	    };
 	  }, [ref, onChange, onTrailingIconClick]);
-	  return jsxRuntime.jsx("goa-input", {
+	  return jsxRuntime.jsxs("goa-input", __assign({
 	    ref: ref,
 	    focused: focused,
 	    type: type,
@@ -16760,7 +16784,17 @@
 	    mb: mb,
 	    ml: ml,
 	    handletrailingiconclick: !!onTrailingIconClick
-	  }, void 0);
+	  }, {
+	    children: [leadingContent && jsxRuntime.jsx("div", __assign({
+	      slot: "leadingContent"
+	    }, {
+	      children: leadingContent
+	    }), void 0), trailingContent && jsxRuntime.jsx("div", __assign({
+	      slot: "trailingContent"
+	    }, {
+	      children: trailingContent
+	    }), void 0)]
+	  }), void 0);
 	};
 
 	var onDateChangeHandler = function onDateChangeHandler(onChange) {