@abgov/react-components 4.0.0-alpha.14 → 4.0.0-alpha.17

package/react-components.esm.js

@@ -2,6 +2,235 @@ import '@abgov/web-components';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 
+const GoABadge = ({
+  type,
+  content,
+  icon,
+  testId
+}) => {
+  return jsx("goa-badge", {
+    type: type,
+    content: content,
+    icon: icon,
+    testid: testId
+  }, void 0);
+};
+const GoAInfoBadge = ({
+  content,
+  testId
+}) => {
+  return jsx(GoABadge, {
+    type: "information",
+    icon: "information-circle",
+    content: content,
+    testId: testId
+  }, void 0);
+};
+const GoASuccessBadge = ({
+  content,
+  testId
+}) => {
+  return jsx(GoABadge, {
+    type: "success",
+    icon: "checkmark-circle",
+    content: content,
+    testId: testId
+  }, void 0);
+};
+const GoAWarningBadge = ({
+  content,
+  testId
+}) => {
+  return jsx(GoABadge, {
+    type: "warning",
+    icon: "warning",
+    content: content,
+    testId: testId
+  }, void 0);
+};
+const GoAEmergencyBadge = ({
+  content,
+  testId
+}) => {
+  return jsx(GoABadge, {
+    type: "emergency",
+    icon: "alert-circle",
+    content: content,
+    testId: testId
+  }, void 0);
+};
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+const GoAInput = ({
+  id,
+  name,
+  type,
+  leadingIcon,
+  trailingIcon,
+  variant: _variant = 'goa',
+  focused,
+  disabled,
+  readonly,
+  value,
+  placeholder,
+  error,
+  width,
+  showCounter,
+  maxCharCount,
+  testId,
+  onTrailingIconClick,
+  onChange
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const current = ref.current;
+
+    const changeListener = e => {
+      const {
+        name,
+        value
+      } = e.detail;
+      onChange(name, value);
+    };
+
+    const clickListener = e => {
+      onTrailingIconClick === null || onTrailingIconClick === void 0 ? void 0 : onTrailingIconClick();
+    };
+
+    current.addEventListener('_change', changeListener);
+    current.addEventListener('_trailingIconClick', clickListener);
+    return () => {
+      current.removeEventListener('_change', changeListener);
+      current.removeEventListener('_trailingIconClick', clickListener);
+    };
+  }, [ref, onChange, onTrailingIconClick]);
+  return jsx("goa-input", {
+    ref: ref,
+    focused: focused,
+    type: type,
+    name: name,
+    id: id,
+    leadingicon: leadingIcon,
+    trailingicon: trailingIcon,
+    variant: _variant,
+    disabled: disabled,
+    readonly: readonly,
+    placeholder: placeholder,
+    error: error,
+    "data-testid": testId,
+    value: value,
+    width: width,
+    showcounter: showCounter,
+    maxcharcount: maxCharCount,
+    handletrailingiconclick: !!onTrailingIconClick
+  }, void 0);
+};
+const GoAInputText = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "text"
+  }), void 0);
+};
+const GoAInputPassword = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "password"
+  }), void 0);
+};
+const GoAInputDate = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "date"
+  }), void 0);
+};
+const GoAInputTime = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "time"
+  }), void 0);
+};
+const GoAInputDateTime = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "datetime-local"
+  }), void 0);
+};
+const GoAInputEmail = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "email"
+  }), void 0);
+};
+const GoAInputSearch = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "search",
+    trailingIcon: "search"
+  }), void 0);
+};
+const GoAInputUrl = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "url"
+  }), void 0);
+};
+const GoAInputTel = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "tel"
+  }), void 0);
+};
+const GoAInputFile = props => {
+  return jsx("input", {
+    id: props.id,
+    name: props.name,
+    type: "file",
+    onChange: e => props.onChange(e.target.name, e.target.value),
+    style: {
+      backgroundColor: 'revert'
+    }
+  }, void 0);
+};
+const GoAInputMonth = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "month"
+  }), void 0);
+};
+const GoAInputNumber = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    value: props.value.toString(),
+    type: "number"
+  }), void 0);
+};
+const GoAInputRange = _a => {
+  var props = __rest(_a, ["step"]);
+
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "range"
+  }), void 0);
+};
+
 const GoAAppHeader = ({
   title,
   url,
@@ -68,64 +297,6 @@ const GoANavigationLink = ({
   }), void 0);
 };
 
-const GoABadge = ({
-  type,
-  content,
-  icon,
-  testId
-}) => {
-  return jsx("goa-badge", {
-    type: type,
-    content: content,
-    icon: icon,
-    testid: testId
-  }, void 0);
-};
-const GoAInfoBadge = ({
-  content,
-  testId
-}) => {
-  return jsx(GoABadge, {
-    type: "information",
-    icon: "information-circle",
-    content: content,
-    testId: testId
-  }, void 0);
-};
-const GoASuccessBadge = ({
-  content,
-  testId
-}) => {
-  return jsx(GoABadge, {
-    type: "success",
-    icon: "checkmark-circle",
-    content: content,
-    testId: testId
-  }, void 0);
-};
-const GoAWarningBadge = ({
-  content,
-  testId
-}) => {
-  return jsx(GoABadge, {
-    type: "warning",
-    icon: "warning",
-    content: content,
-    testId: testId
-  }, void 0);
-};
-const GoAEmergencyBadge = ({
-  content,
-  testId
-}) => {
-  return jsx(GoABadge, {
-    type: "emergency",
-    icon: "alert-circle",
-    content: content,
-    testId: testId
-  }, void 0);
-};
-
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -160,8 +331,8 @@ const GoAButton = ({
   title,
   disabled: _disabled = false,
   type: _type = 'primary',
-  size: _size = 'normal',
-  variant: _variant = 'default',
+  size: _size = '',
+  variant: _variant = '',
   leadingIcon,
   trailingIcon,
   children,
@@ -322,13 +493,15 @@ const GoACircularProgress = ({
 const GoAContainer = ({
   headingSize,
   title,
+  colored: _colored = false,
   children,
   actions,
   variant: _variant = 'default'
 }) => {
   return jsxs("goa-container", Object.assign({
     variant: _variant,
-    headingsize: headingSize
+    headingsize: headingSize,
+    colored: _colored
   }, {
     children: [title && jsx("div", Object.assign({
       slot: "title"
@@ -365,9 +538,10 @@ const GoADropdown = props => {
     const handler = state => {
       const {
         name,
+        value,
         values
       } = state.detail;
-      props.onChange(name, values);
+      props.onChange(name, props.multiselect ? values : value);
     };
 
     current.addEventListener('_change', handler);
@@ -494,176 +668,6 @@ const GoAIconButton = ({
   }), void 0);
 };
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-const GoAInput = ({
-  id,
-  name,
-  type,
-  leadingIcon,
-  trailingIcon,
-  variant: _variant = 'goa',
-  focused,
-  disabled,
-  readonly,
-  value,
-  placeholder,
-  error,
-  width,
-  showCounter,
-  maxCharCount,
-  testId,
-  onTrailingIconClick,
-  onChange
-}) => {
-  const ref = useRef(null);
-  useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-
-    const current = ref.current;
-
-    const changeListener = e => {
-      const {
-        name,
-        value
-      } = e.detail;
-      onChange(name, value);
-    };
-
-    const clickListener = e => {
-      onTrailingIconClick === null || onTrailingIconClick === void 0 ? void 0 : onTrailingIconClick();
-    };
-
-    current.addEventListener('_change', changeListener);
-    current.addEventListener('_trailingIconClick', clickListener);
-    return () => {
-      current.removeEventListener('_change', changeListener);
-      current.removeEventListener('_trailingIconClick', clickListener);
-    };
-  }, [ref, onChange, onTrailingIconClick]);
-  return jsx("goa-input", {
-    ref: ref,
-    focused: focused,
-    type: type,
-    name: name,
-    id: id,
-    leadingicon: leadingIcon,
-    trailingicon: trailingIcon,
-    variant: _variant,
-    disabled: disabled,
-    readonly: readonly,
-    placeholder: placeholder,
-    error: error,
-    "data-testid": testId,
-    value: value,
-    width: width,
-    showcounter: showCounter,
-    maxcharcount: maxCharCount,
-    handletrailingiconclick: !!onTrailingIconClick
-  }, void 0);
-};
-const GoAInputText = props => {
-  return jsx(GoAInput, Object.assign({}, props, {
-    type: "text"
-  }), void 0);
-};
-const GoAInputPassword = props => {
-  return jsx(GoAInput, Object.assign({}, props, {
-    type: "password"
-  }), void 0);
-};
-const GoAInputDate = props => {
-  return jsx(GoAInput, Object.assign({}, props, {
-    type: "date"
-  }), void 0);
-};
-const GoAInputTime = props => {
-  return jsx(GoAInput, Object.assign({}, props, {
-    type: "time"
-  }), void 0);
-};
-const GoAInputDateTime = props => {
-  return jsx(GoAInput, Object.assign({}, props, {
-    type: "datetime-local"
-  }), void 0);
-};
-const GoAInputEmail = props => {
-  return jsx(GoAInput, Object.assign({}, props, {
-    type: "email"
-  }), void 0);
-};
-const GoAInputSearch = props => {
-  return jsx(GoAInput, Object.assign({}, props, {
-    type: "search",
-    trailingIcon: "search"
-  }), void 0);
-};
-const GoAInputUrl = props => {
-  return jsx(GoAInput, Object.assign({}, props, {
-    type: "url"
-  }), void 0);
-};
-const GoAInputTel = props => {
-  return jsx(GoAInput, Object.assign({}, props, {
-    type: "tel"
-  }), void 0);
-};
-const GoAInputFile = props => {
-  return jsx("input", {
-    id: props.id,
-    name: props.name,
-    type: "file",
-    onChange: e => props.onChange(e.target.name, e.target.value),
-    style: {
-      backgroundColor: 'revert'
-    }
-  }, void 0);
-};
-const GoAInputMonth = props => {
-  return jsx(GoAInput, Object.assign({}, props, {
-    type: "month"
-  }), void 0);
-};
-const GoAInputNumber = props => {
-  return jsx(GoAInput, Object.assign({}, props, {
-    type: "number"
-  }), void 0);
-};
-const GoAInputRange = _a => {
-  var props = __rest(_a, ["step"]);
-
-  return jsx(GoAInput, Object.assign({}, props, {
-    type: "range"
-  }), void 0);
-};
-
 const GoAMicrositeHeader = ({
   level,
   version,
@@ -730,12 +734,12 @@ const GoANotification = ({
   }), void 0);
 };
 
-const GoAPageBlock = ({
-  children
-}) => {
-  return jsx("goa-page-block", {
-    children: children
-  }, void 0);
+const GoAPageBlock = props => {
+  return jsx("goa-page-block", Object.assign({
+    width: props.width
+  }, {
+    children: props.children
+  }), void 0);
 };
 
 const GoARadioItem = ({
@@ -839,6 +843,7 @@ const GoATextArea = ({
   disabled,
   showCounter,
   maxCharCount,
+  width,
   testId,
   error,
   onChange
@@ -873,9 +878,33 @@ const GoATextArea = ({
     disabled: disabled,
     showcounter: showCounter,
     maxcharcount: maxCharCount,
+    width: width,
     error: error,
     "data-testid": testId
   }, void 0);
 };
 
-export { GoAAppFooter, GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMetaLink, GoAMicrositeHeader, GoAModal, GoANavigationLink, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge };
+const GoAFlexCol = ({
+  gap,
+  children
+}) => {
+  return jsx("goa-flex-col", Object.assign({
+    gap: gap
+  }, {
+    children: children
+  }), void 0);
+};
+
+function GoAPage(props) {
+  return jsx("goa-page", {
+    children: props.children
+  }, void 0);
+}
+
+function GoADivider(props) {
+  return jsx("goa-divider", {
+    spacing: props.spacing
+  }, void 0);
+}
+
+export { GoAAppFooter, GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexCol, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMetaLink, GoAMicrositeHeader, GoAModal, GoANavigationLink, GoANotification, GoAPage, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge };