@abgov/react-components 4.0.0-alpha.35 → 4.0.0-alpha.36

package/experimental/package.json

@@ -5,6 +5,7 @@
   "typings": "./index.d.ts",
   "dependencies": {},
   "peerDependencies": {
-    "react": "17.0.2"
+    "react": "17.0.2",
+    "date-fns": "^2.29.2"
   }
 }

package/lib/input/input.d.ts

@@ -58,14 +58,14 @@ export declare const GoAInput: FC<Props & {
 }>;
 export declare const GoAInputText: FC<Props>;
 export declare const GoAInputPassword: FC<Props>;
-export declare const GoAInputDate: FC<Props & {
-    min?: string;
-    max?: string;
+export declare const GoAInputDate: FC<Omit<Props, "value"> & {
+    value: Date | string;
 }>;
-export declare const GoAInputTime: FC<Props>;
-export declare const GoAInputDateTime: FC<Props & {
-    min?: string;
-    max?: string;
+export declare const GoAInputTime: FC<Omit<Props, "value"> & {
+    value: Date | string;
+}>;
+export declare const GoAInputDateTime: FC<Omit<Props, "value"> & {
+    value: Date;
 }>;
 export declare const GoAInputEmail: FC<Props>;
 export declare const GoAInputSearch: FC<Props>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.35",
+  "version": "4.0.0-alpha.36",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"
@@ -18,9 +18,11 @@
   },
   "peerDependencies": {
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "date-fns": "^2.29.2"
   },
   "main": "./react-components.umd.js",
   "module": "./react-components.esm.js",
-  "typings": "./index.d.ts"
+  "typings": "./index.d.ts",
+  "dependencies": {}
 }

package/react-components.esm.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
+import { format } from 'date-fns';
 
 function noop() {}
 
@@ -6432,7 +6433,7 @@ function instance$i($$self, $$props, $$invalidate) {
     /*variant, isInverted*/
     544) {
       // private
-      $$invalidate(8, css = `goa-icon-button goa-icon-button--${variant} ${isInverted ? "goa-icon-button--inverted" : ""}`);
+      $$invalidate(8, css = `${variant} ${isInverted ? "inverted" : ""}`);
     }
 
     if ($$self.$$.dirty &
@@ -6458,7 +6459,7 @@ function instance$i($$self, $$props, $$invalidate) {
 class IconButton extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}.goa-icon-button,.goa-icon-button *{box-sizing:border-box}.goa-icon-button{display:inline-flex;align-items:center;background:transparent;cursor:pointer;padding:0;border:none}.goa-icon-button--color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.goa-icon-button--color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.goa-icon-button--color:active,.goa-icon-button--nocolor:active{transform:scale(0.9);border:none}.goa-icon-button--color:hover{background-color:var(--goa-color-primary-light)}.goa-icon-button--color.goa-icon-button--inverted:hover{background-color:var(--goa-color-primary-dark)}.goa-icon-button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}.goa-icon-button:disabled:hover{background-color:transparent}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;justify-content:center;background:transparent;cursor:pointer;border:none}.color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.color:active,.nocolor:active{transform:scale(0.9);border:none}.color:hover{background-color:var(--goa-color-primary-light)}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}button:disabled:hover{background-color:transparent}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -6659,7 +6660,6 @@ function create_if_block_3$3(ctx) {
   return {
     c() {
       goa_icon_button = element("goa-icon-button");
-      set_custom_element_data(goa_icon_button, "class", "goa-input-trailing-icon");
       set_custom_element_data(goa_icon_button, "disabled",
       /*isDisabled*/
       ctx[16]);
@@ -6705,7 +6705,7 @@ function create_if_block_3$3(ctx) {
     }
 
   };
-} // (126:2) {#if showCounter}
+} // (125:2) {#if showCounter}
 
 
 function create_if_block$a(ctx) {
@@ -6756,7 +6756,7 @@ function create_if_block$a(ctx) {
     }
 
   };
-} // (131:31) 
+} // (130:31) 
 
 
 function create_if_block_2$5(ctx) {
@@ -6790,7 +6790,7 @@ function create_if_block_2$5(ctx) {
     }
 
   };
-} // (127:4) {#if maxcharcount > 0}
+} // (126:4) {#if maxcharcount > 0}
 
 
 function create_if_block_1$6(ctx) {
@@ -7272,16 +7272,16 @@ function instance$h($$self, $$props, $$invalidate) {
     width = "30ch"
   } = $$props;
   let {
-    arialabel = ""
+    arialabel = null
   } = $$props;
   let {
-    min = ""
+    min = null
   } = $$props;
   let {
-    max = ""
+    max = null
   } = $$props;
   let {
-    step
+    step = null
   } = $$props;
   let {
     showcounter = "false"
@@ -7396,7 +7396,7 @@ function instance$h($$self, $$props, $$invalidate) {
 class Input extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@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);background:white;display:inline-flex;align-items:center;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{display:flex;align-items:center;margin-left:0.5rem}.goa-input-trailing-icon{display:flex;align-items:center;margin-right:0.5rem}.goa-input-trailing-icon>.goa-icon-button{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[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}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}.counter{position:absolute;padding-top:0.25rem;right:0;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)}.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;font-family:var(--font-family)}.container{position:relative;width:100%}@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);background:white;display:inline-flex;align-items:center;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=date],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}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}.counter{position:absolute;padding-top:0.25rem;right:0;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)}.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,
@@ -13924,18 +13924,55 @@ const GoAInputPassword = props => {
     type: "password"
   }), void 0);
 };
-const GoAInputDate = props => {
+const GoAInputDate = _a => {
+  var {
+    value,
+    min,
+    max
+  } = _a,
+      props = __rest(_a, ["value", "min", "max"]);
+
+  const _value = typeof value === "string" ? new Date(value) : value;
+
+  const _min = min ? format(new Date(min), "yyyy-MM-dd") : "";
+
+  const _max = max ? format(new Date(max), "yyyy-MM-dd") : "";
+
   return jsx(GoAInput, Object.assign({}, props, {
+    min: _min,
+    max: _max,
+    value: format(_value, "yyyy-MM-dd"),
     type: "date"
   }), void 0);
 };
-const GoAInputTime = props => {
-  return jsx(GoAInput, Object.assign({}, props, {
-    type: "time"
-  }), void 0);
+const GoAInputTime = _a => {
+  var {
+    value
+  } = _a,
+      props = __rest(_a, ["value"]);
+
+  try {
+    const d = typeof value === "string" ? new Date(value) : value;
+    return jsx(GoAInput, Object.assign({}, props, {
+      value: format(d, "hh:mm"),
+      type: "time"
+    }), void 0);
+  } catch (e) {
+    return jsx(GoAInput, Object.assign({}, props, {
+      value: value,
+      type: "time"
+    }), void 0);
+  }
 };
-const GoAInputDateTime = props => {
+const GoAInputDateTime = _a => {
+  var {
+    value
+  } = _a,
+      props = __rest(_a, ["value"]);
+
+  const d = typeof value === "string" ? new Date(value) : value;
   return jsx(GoAInput, Object.assign({}, props, {
+    value: format(d, "yyyy-MM-dd'T'hh:mm"),
     type: "datetime-local"
   }), void 0);
 };

package/react-components.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react')) :
-	typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react'], factory) :
-	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactComponents = {}, global.jsxRuntime, global.React));
-})(this, (function (exports, jsxRuntime, react) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('date-fns')) :
+	typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', 'date-fns'], factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactComponents = {}, global.jsxRuntime, global.React, global.dateFns));
+})(this, (function (exports, jsxRuntime, react, dateFns) { 'use strict';
 
 	function _await(value, then, direct) {
 	  if (direct) {
@@ -6475,7 +6475,7 @@
 	    /*variant, isInverted*/
 	    544) {
 	      // private
-	      $$invalidate(8, css = `goa-icon-button goa-icon-button--${variant} ${isInverted ? "goa-icon-button--inverted" : ""}`);
+	      $$invalidate(8, css = `${variant} ${isInverted ? "inverted" : ""}`);
 	    }
 
 	    if ($$self.$$.dirty &
@@ -6501,7 +6501,7 @@
 	class IconButton extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}.goa-icon-button,.goa-icon-button *{box-sizing:border-box}.goa-icon-button{display:inline-flex;align-items:center;background:transparent;cursor:pointer;padding:0;border:none}.goa-icon-button--color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.goa-icon-button--color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.goa-icon-button--color:active,.goa-icon-button--nocolor:active{transform:scale(0.9);border:none}.goa-icon-button--color:hover{background-color:var(--goa-color-primary-light)}.goa-icon-button--color.goa-icon-button--inverted:hover{background-color:var(--goa-color-primary-dark)}.goa-icon-button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}.goa-icon-button:disabled:hover{background-color:transparent}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;justify-content:center;background:transparent;cursor:pointer;border:none}.color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.color:active,.nocolor:active{transform:scale(0.9);border:none}.color:hover{background-color:var(--goa-color-primary-light)}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}button:disabled:hover{background-color:transparent}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -6702,7 +6702,6 @@
 	  return {
 	    c() {
 	      goa_icon_button = element("goa-icon-button");
-	      set_custom_element_data(goa_icon_button, "class", "goa-input-trailing-icon");
 	      set_custom_element_data(goa_icon_button, "disabled",
 	      /*isDisabled*/
 	      ctx[16]);
@@ -6748,7 +6747,7 @@
 	    }
 
 	  };
-	} // (126:2) {#if showCounter}
+	} // (125:2) {#if showCounter}
 
 
 	function create_if_block$a(ctx) {
@@ -6799,7 +6798,7 @@
 	    }
 
 	  };
-	} // (131:31) 
+	} // (130:31) 
 
 
 	function create_if_block_2$5(ctx) {
@@ -6833,7 +6832,7 @@
 	    }
 
 	  };
-	} // (127:4) {#if maxcharcount > 0}
+	} // (126:4) {#if maxcharcount > 0}
 
 
 	function create_if_block_1$6(ctx) {
@@ -7315,16 +7314,16 @@
 	    width = "30ch"
 	  } = $$props;
 	  let {
-	    arialabel = ""
+	    arialabel = null
 	  } = $$props;
 	  let {
-	    min = ""
+	    min = null
 	  } = $$props;
 	  let {
-	    max = ""
+	    max = null
 	  } = $$props;
 	  let {
-	    step
+	    step = null
 	  } = $$props;
 	  let {
 	    showcounter = "false"
@@ -7439,7 +7438,7 @@
 	class Input extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@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);background:white;display:inline-flex;align-items:center;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{display:flex;align-items:center;margin-left:0.5rem}.goa-input-trailing-icon{display:flex;align-items:center;margin-right:0.5rem}.goa-input-trailing-icon>.goa-icon-button{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[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}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}.counter{position:absolute;padding-top:0.25rem;right:0;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)}.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;font-family:var(--font-family)}.container{position:relative;width:100%}@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);background:white;display:inline-flex;align-items:center;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=date],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}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}.counter{position:absolute;padding-top:0.25rem;right:0;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)}.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,
@@ -13977,18 +13976,49 @@
 	    type: "password"
 	  }), void 0);
 	};
-	var GoAInputDate = function GoAInputDate(props) {
+	var GoAInputDate = function GoAInputDate(_a) {
+	  var value = _a.value,
+	      min = _a.min,
+	      max = _a.max,
+	      props = __rest(_a, ["value", "min", "max"]);
+
+	  var _value = typeof value === "string" ? new Date(value) : value;
+
+	  var _min = min ? dateFns.format(new Date(min), "yyyy-MM-dd") : "";
+
+	  var _max = max ? dateFns.format(new Date(max), "yyyy-MM-dd") : "";
+
 	  return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+	    min: _min,
+	    max: _max,
+	    value: dateFns.format(_value, "yyyy-MM-dd"),
 	    type: "date"
 	  }), void 0);
 	};
-	var GoAInputTime = function GoAInputTime(props) {
-	  return jsxRuntime.jsx(GoAInput, __assign({}, props, {
-	    type: "time"
-	  }), void 0);
+	var GoAInputTime = function GoAInputTime(_a) {
+	  var value = _a.value,
+	      props = __rest(_a, ["value"]);
+
+	  try {
+	    var d = typeof value === "string" ? new Date(value) : value;
+	    return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+	      value: dateFns.format(d, "hh:mm"),
+	      type: "time"
+	    }), void 0);
+	  } catch (e) {
+	    return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+	      value: value,
+	      type: "time"
+	    }), void 0);
+	  }
 	};
-	var GoAInputDateTime = function GoAInputDateTime(props) {
+	var GoAInputDateTime = function GoAInputDateTime(_a) {
+	  var value = _a.value,
+	      props = __rest(_a, ["value"]);
+
+	  var d = typeof value === "string" ? new Date(value) : value;
 	  return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+	    value: dateFns.format(d, "yyyy-MM-dd'T'hh:mm"),
 	    type: "datetime-local"
 	  }), void 0);
 	};