@pagopa/io-app-design-system 1.15.0 → 1.16.1

package/lib/module/components/listitems/ListItemInfo.js

@@ -1,54 +1,65 @@
-import React from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { IOColors, IOListItemStyles, IOListItemVisualParams, IOStyles, useIOExperimentalDesign, useIOTheme } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useCallback, useMemo } from "react";
+import { View } from "react-native";
+import { IOListItemStyles, IOListItemVisualParams, IOStyles, useIOTheme } from "../../core";
 import { Icon } from "../icons";
-import { Body, H6, LabelSmall } from "../typography";
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyStyles = StyleSheet.create({
-  textValue: {
-    fontSize: 18,
-    lineHeight: 24,
-    ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb")
-  }
-});
+import { H6, LabelSmall } from "../typography";
+import { ButtonLink, IconButton } from "../buttons";
+import { Badge } from "../badge";
 export const ListItemInfo = _ref => {
   let {
     label,
     value,
     numberOfLines = 2,
     icon,
-    action,
+    endElement,
     accessibilityLabel,
     testID
   } = _ref;
-  const {
-    isExperimental
-  } = useIOExperimentalDesign();
   const theme = useIOTheme();
-
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  const legacyItemInfoText = /*#__PURE__*/React.createElement(React.Fragment, null, typeof label === "string" ? /*#__PURE__*/React.createElement(Body, {
-    weight: "Regular"
-  }, label) : label, typeof value === "string" ? /*#__PURE__*/React.createElement(Text, {
-    style: [legacyStyles.textValue, {
-      color: IOColors.bluegreyDark
-    }],
-    numberOfLines: numberOfLines
-  }, value) : value);
-  const itemInfoText = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelSmall, {
+  const componentValueToAccessibility = useMemo(() => typeof value === "string" ? value : "", [value]);
+  const listItemAccessibilityLabel = useMemo(() => accessibilityLabel ? accessibilityLabel : `${label}; ${componentValueToAccessibility}`, [label, componentValueToAccessibility, accessibilityLabel]);
+  const itemInfoTextComponent = useMemo(() => /*#__PURE__*/React.createElement(View, {
+    accessible: endElement === undefined ? true : false,
+    importantForAccessibility: endElement === undefined || endElement.type === "badge" ? "yes" : "no-hide-descendants",
+    accessibilityElementsHidden: endElement !== undefined && endElement.type !== "badge"
+  }, /*#__PURE__*/React.createElement(LabelSmall, {
     weight: "Regular",
     color: theme["textBody-tertiary"]
-  }, label), /*#__PURE__*/React.createElement(H6, {
+  }, label), typeof value === "string" ? /*#__PURE__*/React.createElement(H6, {
     color: theme["textBody-default"],
     numberOfLines: numberOfLines
-  }, value));
-  const itemInfoTextComponent = isExperimental ? itemInfoText : legacyItemInfoText;
+  }, value) : value), [label, value, numberOfLines, theme, endElement]);
+  const listItemInfoAction = useCallback(() => {
+    if (endElement) {
+      const {
+        type,
+        componentProps
+      } = endElement;
+      switch (type) {
+        case "buttonLink":
+          const buttonLinkAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
+          return /*#__PURE__*/React.createElement(ButtonLink, _extends({}, componentProps, {
+            accessibilityLabel: buttonLinkAccessibilityLabel
+          }));
+        case "iconButton":
+          const iconButtonAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
+          return /*#__PURE__*/React.createElement(IconButton, _extends({}, componentProps, {
+            accessibilityLabel: iconButtonAccessibilityLabel
+          }));
+        case "badge":
+          return /*#__PURE__*/React.createElement(Badge, componentProps);
+        default:
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+      }
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }, [endElement, listItemAccessibilityLabel]);
   return /*#__PURE__*/React.createElement(View, {
     style: IOListItemStyles.listItem,
     testID: testID,
-    accessible: true,
-    accessibilityLabel: accessibilityLabel
+    accessible: endElement === undefined ? true : false,
+    accessibilityLabel: listItemAccessibilityLabel
   }, /*#__PURE__*/React.createElement(View, {
     style: IOListItemStyles.listItemInner
   }, icon && /*#__PURE__*/React.createElement(View, {
@@ -61,11 +72,11 @@ export const ListItemInfo = _ref => {
     size: IOListItemVisualParams.iconSize
   })), /*#__PURE__*/React.createElement(View, {
     style: IOStyles.flex
-  }, itemInfoTextComponent), action && /*#__PURE__*/React.createElement(View, {
+  }, itemInfoTextComponent), endElement && /*#__PURE__*/React.createElement(View, {
     style: {
       marginLeft: IOListItemVisualParams.actionMargin
     }
-  }, action)));
+  }, listItemInfoAction())));
 };
 export default ListItemInfo;
 //# sourceMappingURL=ListItemInfo.js.map

package/lib/module/components/listitems/ListItemInfo.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","Text","View","IOColors","IOListItemStyles","IOListItemVisualParams","IOStyles","useIOExperimentalDesign","useIOTheme","makeFontStyleObject","Icon","Body","H6","LabelSmall","legacyStyles","create","textValue","fontSize","lineHeight","undefined","ListItemInfo","_ref","label","value","numberOfLines","icon","action","accessibilityLabel","testID","isExperimental","theme","legacyItemInfoText","createElement","Fragment","weight","style","color","bluegreyDark","itemInfoText","itemInfoTextComponent","listItem","accessible","listItemInner","marginRight","actionMargin","name","size","iconSize","flex","marginLeft"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemInfo.tsx"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useMemo","View","IOListItemStyles","IOListItemVisualParams","IOStyles","useIOTheme","Icon","H6","LabelSmall","ButtonLink","IconButton","Badge","ListItemInfo","_ref","label","value","numberOfLines","icon","endElement","accessibilityLabel","testID","theme","componentValueToAccessibility","listItemAccessibilityLabel","itemInfoTextComponent","createElement","accessible","undefined","importantForAccessibility","type","accessibilityElementsHidden","weight","color","listItemInfoAction","componentProps","buttonLinkAccessibilityLabel","_extends","iconButtonAccessibilityLabel","Fragment","style","listItem","listItemInner","marginRight","actionMargin","name","size","iconSize","flex","marginLeft"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemInfo.tsx"],"mappings":"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"}

package/lib/module/components/listitems/ListItemNav.js

@@ -4,8 +4,8 @@ import Animated, { Extrapolate, interpolate, interpolateColor, useAnimatedStyle,
 import { IOColors, IOListItemStyles, IOListItemVisualParams, IOScaleValues, IOSpringValues, IOStyles, hexToRgba, useIOExperimentalDesign, useIOTheme } from "../../core";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { Icon } from "../icons";
-import { Body, H6, LabelSmall } from "../typography";
 import { LogoPayment } from "../logos";
+import { Body, H6, LabelSmall } from "../typography";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyStyles = StyleSheet.create({
@@ -23,6 +23,7 @@ export const ListItemNav = _ref => {
     description,
     onPress,
     icon,
+    iconColor = "grey-450",
     paymentLogo,
     accessibilityLabel,
     testID
@@ -50,7 +51,7 @@ export const ListItemNav = _ref => {
     default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
     pressed: IOColors[theme["listItem-pressed"]]
   };
-  const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
+  const navIconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
 
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues === null || IOScaleValues === void 0 || (_IOScaleValues$basicB = IOScaleValues.basicButton) === null || _IOScaleValues$basicB === void 0 ? void 0 : _IOScaleValues$basicB.pressedState;
@@ -97,7 +98,7 @@ export const ListItemNav = _ref => {
     }
   }, /*#__PURE__*/React.createElement(Icon, {
     name: icon,
-    color: "grey-450",
+    color: iconColor,
     size: IOListItemVisualParams.iconSize
   })), paymentLogo && /*#__PURE__*/React.createElement(View, {
     style: {
@@ -114,7 +115,7 @@ export const ListItemNav = _ref => {
     }
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "chevronRightListItem",
-    color: iconColor,
+    color: navIconColor,
     size: IOListItemVisualParams.chevronSize
   })))));
 };

package/lib/module/components/listitems/ListItemNav.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","Pressable","StyleSheet","Text","View","Animated","Extrapolate","interpolate","interpolateColor","useAnimatedStyle","useDerivedValue","useSharedValue","withSpring","IOColors","IOListItemStyles","IOListItemVisualParams","IOScaleValues","IOSpringValues","IOStyles","hexToRgba","useIOExperimentalDesign","useIOTheme","makeFontStyleObject","Icon","Body","H6","LabelSmall","LogoPayment","legacyStyles","create","textValue","fontSize","lineHeight","color","bluegreyDark","undefined","ListItemNav","_ref","_IOScaleValues$basicB","value","description","onPress","icon","paymentLogo","accessibilityLabel","testID","isPressed","isExperimental","theme","legacyNavText","createElement","Fragment","style","weight","navText","navTextComponent","mapBackgroundStates","default","pressed","iconColor","animationScaleValue","basicButton","pressedState","progressPressed","button","animatedScaleStyle","scale","CLAMP","transform","animatedBackgroundStyle","backgroundColor","handlePressIn","handlePressOut","onPressIn","onPressOut","accessible","accessibilityRole","listItem","listItemInner","marginRight","iconMargin","name","size","iconSize","flex","marginLeft","chevronSize"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemNav.tsx"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","Pressable","StyleSheet","Text","View","Animated","Extrapolate","interpolate","interpolateColor","useAnimatedStyle","useDerivedValue","useSharedValue","withSpring","IOColors","IOListItemStyles","IOListItemVisualParams","IOScaleValues","IOSpringValues","IOStyles","hexToRgba","useIOExperimentalDesign","useIOTheme","makeFontStyleObject","Icon","LogoPayment","Body","H6","LabelSmall","legacyStyles","create","textValue","fontSize","lineHeight","color","bluegreyDark","undefined","ListItemNav","_ref","_IOScaleValues$basicB","value","description","onPress","icon","iconColor","paymentLogo","accessibilityLabel","testID","isPressed","isExperimental","theme","legacyNavText","createElement","Fragment","style","weight","navText","navTextComponent","mapBackgroundStates","default","pressed","navIconColor","animationScaleValue","basicButton","pressedState","progressPressed","button","animatedScaleStyle","scale","CLAMP","transform","animatedBackgroundStyle","backgroundColor","handlePressIn","handlePressOut","onPressIn","onPressOut","accessible","accessibilityRole","listItem","listItemInner","marginRight","iconMargin","name","size","iconSize","flex","marginLeft","chevronSize"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemNav.tsx"],"mappings":"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"}

package/lib/module/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -223,55 +223,71 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
         }
       }
     >
-      <Text
-        allowFontScaling={false}
-        color="bluegrey"
-        defaultColor="bluegrey"
-        defaultWeight="Regular"
-        font="TitilliumWeb"
-        fontStyle={
-          {
-            "fontSize": 16,
-            "lineHeight": 24,
+      <View
+        accessibilityElementsHidden={false}
+        accessible={true}
+        importantForAccessibility="yes"
+      >
+        <Text
+          allowFontScaling={false}
+          color="grey-700"
+          defaultColor="blue"
+          defaultWeight="Bold"
+          font="TitilliumWeb"
+          fontStyle={
+            {
+              "fontSize": 14,
+            }
           }
-        }
-        style={
-          [
+          style={
+            [
+              {
+                "fontSize": 14,
+              },
+              {
+                "color": "#555C70",
+                "fontFamily": "Titillium Web",
+                "fontStyle": "normal",
+                "fontWeight": "400",
+              },
+            ]
+          }
+          weight="Regular"
+        >
+          label
+        </Text>
+        <Text
+          allowFontScaling={false}
+          color="black"
+          defaultColor="black"
+          defaultWeight="SemiBold"
+          font="TitilliumWeb"
+          fontStyle={
             {
               "fontSize": 16,
               "lineHeight": 24,
-            },
-            {
-              "color": "#475A6D",
-              "fontFamily": "Titillium Web",
-              "fontStyle": "normal",
-              "fontWeight": "400",
-            },
-          ]
-        }
-        weight="Regular"
-      >
-        label
-      </Text>
-      <Text
-        numberOfLines={2}
-        style={
-          [
-            {
-              "fontFamily": "Titillium Web",
-              "fontSize": 18,
-              "fontStyle": "normal",
-              "fontWeight": "600",
-              "lineHeight": 24,
-            },
-            {
-              "color": "#17324D",
-            },
-          ]
-        }
-      >
-        testValue
-      </Text>
+            }
+          }
+          numberOfLines={2}
+          style={
+            [
+              {
+                "fontSize": 16,
+                "lineHeight": 24,
+              },
+              {
+                "color": "#0E0F13",
+                "fontFamily": "Titillium Web",
+                "fontStyle": "normal",
+                "fontWeight": "600",
+              },
+            ]
+          }
+          weight="SemiBold"
+        >
+          testValue
+        </Text>
+      </View>
     </View>
   </View>
 </View>

package/lib/module/components/numberpad/NumberButton.js

@@ -0,0 +1,81 @@
+import React, { useCallback, useMemo } from "react";
+import { Pressable } from "react-native";
+import Animated, { Extrapolate, interpolate, interpolateColor, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring } from "react-native-reanimated";
+import { IOColors, IONumberPadButtonStyles, IOScaleValues, IOSpringValues, useIOExperimentalDesign } from "../../core";
+import { H3 } from "../typography";
+const colorMap = {
+  light: {
+    background: "grey-50",
+    pressed: "grey-200",
+    foreground: "blueIO-500"
+  },
+  dark: {
+    background: "blueIO-400",
+    pressed: "blueIO-200",
+    foreground: "white"
+  }
+};
+const legacyColorMap = {
+  light: {
+    background: "grey-50",
+    pressed: "grey-200",
+    foreground: "blue"
+  },
+  dark: {
+    background: "blue",
+    pressed: "blue-600",
+    foreground: "white"
+  }
+};
+export const NumberButton = _ref => {
+  var _IOScaleValues$basicB;
+  let {
+    number,
+    variant,
+    onPress
+  } = _ref;
+  const {
+    isExperimental
+  } = useIOExperimentalDesign();
+  const colors = useMemo(() => isExperimental ? colorMap[variant] : legacyColorMap[variant], [variant, isExperimental]);
+  const isPressed = useSharedValue(0);
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues === null || IOScaleValues === void 0 || (_IOScaleValues$basicB = IOScaleValues.basicButton) === null || _IOScaleValues$basicB === void 0 ? void 0 : _IOScaleValues$basicB.pressedState;
+  // Using a spring-based animation for our interpolations
+  const progressPressed = useDerivedValue(() => withSpring(isPressed.value, IOSpringValues.button));
+
+  // Interpolate animation values from `isPressed` values
+  const pressedAnimationStyle = useAnimatedStyle(() => {
+    // Link color states to the pressed states
+    const bgColor = interpolateColor(progressPressed.value, [0, 1], [IOColors[colors.background], IOColors[colors.pressed]]);
+
+    // Scale down button slightly when pressed
+    const scale = interpolate(progressPressed.value, [0, 1], [1, animationScaleValue], Extrapolate.CLAMP);
+    return {
+      backgroundColor: bgColor,
+      transform: [{
+        scale
+      }]
+    };
+  });
+  const onPressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const onPressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
+  return /*#__PURE__*/React.createElement(Pressable, {
+    accessible: true,
+    accessibilityRole: "button",
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    onPress: () => onPress(number)
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [IONumberPadButtonStyles.button, IONumberPadButtonStyles.circularShape, IONumberPadButtonStyles.buttonSize, pressedAnimationStyle]
+  }, /*#__PURE__*/React.createElement(H3, {
+    color: colors.foreground
+  }, number)));
+};
+//# sourceMappingURL=NumberButton.js.map

package/lib/module/components/numberpad/NumberButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","Pressable","Animated","Extrapolate","interpolate","interpolateColor","useAnimatedStyle","useDerivedValue","useSharedValue","withSpring","IOColors","IONumberPadButtonStyles","IOScaleValues","IOSpringValues","useIOExperimentalDesign","H3","colorMap","light","background","pressed","foreground","dark","legacyColorMap","NumberButton","_ref","_IOScaleValues$basicB","number","variant","onPress","isExperimental","colors","isPressed","animationScaleValue","basicButton","pressedState","progressPressed","value","button","pressedAnimationStyle","bgColor","scale","CLAMP","backgroundColor","transform","onPressIn","onPressOut","createElement","accessible","accessibilityRole","View","style","circularShape","buttonSize","color"],"sourceRoot":"../../../../src","sources":["components/numberpad/NumberButton.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,SAAS,QAAQ,cAAc;AACxC,OAAOC,QAAQ,IACbC,WAAW,EACXC,WAAW,EACXC,gBAAgB,EAChBC,gBAAgB,EAChBC,eAAe,EACfC,cAAc,EACdC,UAAU,QACL,yBAAyB;AAChC,SACEC,QAAQ,EACRC,uBAAuB,EACvBC,aAAa,EACbC,cAAc,EACdC,uBAAuB,QAClB,YAAY;AACnB,SAASC,EAAE,QAAQ,eAAe;AAgBlC,MAAMC,QAA0D,GAAG;EACjEC,KAAK,EAAE;IACLC,UAAU,EAAE,SAAS;IACrBC,OAAO,EAAE,UAAU;IACnBC,UAAU,EAAE;EACd,CAAC;EACDC,IAAI,EAAE;IACJH,UAAU,EAAE,YAAY;IACxBC,OAAO,EAAE,YAAY;IACrBC,UAAU,EAAE;EACd;AACF,CAAC;AAED,MAAME,cAAgE,GAAG;EACvEL,KAAK,EAAE;IACLC,UAAU,EAAE,SAAS;IACrBC,OAAO,EAAE,UAAU;IACnBC,UAAU,EAAE;EACd,CAAC;EACDC,IAAI,EAAE;IACJH,UAAU,EAAE,MAAM;IAClBC,OAAO,EAAE,UAAU;IACnBC,UAAU,EAAE;EACd;AACF,CAAC;AAED,OAAO,MAAMG,YAAY,GAAGC,IAAA,IAIH;EAAA,IAAAC,qBAAA;EAAA,IAJI;IAC3BC,MAAM;IACNC,OAAO;IACPC;EACiB,CAAC,GAAAJ,IAAA;EAClB,MAAM;IAAEK;EAAe,CAAC,GAAGf,uBAAuB,CAAC,CAAC;EAEpD,MAAMgB,MAAM,GAAG9B,OAAO,CACpB,MAAO6B,cAAc,GAAGb,QAAQ,CAACW,OAAO,CAAC,GAAGL,cAAc,CAACK,OAAO,CAAE,EACpE,CAACA,OAAO,EAAEE,cAAc,CAC1B,CAAC;EACD,MAAME,SAAS,GAAGvB,cAAc,CAAC,CAAC,CAAC;EACnC;EACA,MAAMwB,mBAAmB,GAAGpB,aAAa,aAAbA,aAAa,gBAAAa,qBAAA,GAAbb,aAAa,CAAEqB,WAAW,cAAAR,qBAAA,uBAA1BA,qBAAA,CAA4BS,YAAY;EACpE;EACA,MAAMC,eAAe,GAAG5B,eAAe,CAAC,MACtCE,UAAU,CAACsB,SAAS,CAACK,KAAK,EAAEvB,cAAc,CAACwB,MAAM,CACnD,CAAC;;EAED;EACA,MAAMC,qBAAqB,GAAGhC,gBAAgB,CAAC,MAAM;IACnD;IACA,MAAMiC,OAAO,GAAGlC,gBAAgB,CAC9B8B,eAAe,CAACC,KAAK,EACrB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC1B,QAAQ,CAACoB,MAAM,CAACZ,UAAU,CAAC,EAAER,QAAQ,CAACoB,MAAM,CAACX,OAAO,CAAC,CACxD,CAAC;;IAED;IACA,MAAMqB,KAAK,GAAGpC,WAAW,CACvB+B,eAAe,CAACC,KAAK,EACrB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,CAAC,EAAEJ,mBAAmB,CAAC,EACxB7B,WAAW,CAACsC,KACd,CAAC;IAED,OAAO;MACLC,eAAe,EAAEH,OAAO;MACxBI,SAAS,EAAE,CAAC;QAAEH;MAAM,CAAC;IACvB,CAAC;EACH,CAAC,CAAC;EAEF,MAAMI,SAAS,GAAG7C,WAAW,CAAC,MAAM;IAClC;IACAgC,SAAS,CAACK,KAAK,GAAG,CAAC;EACrB,CAAC,EAAE,CAACL,SAAS,CAAC,CAAC;EACf,MAAMc,UAAU,GAAG9C,WAAW,CAAC,MAAM;IACnC;IACAgC,SAAS,CAACK,KAAK,GAAG,CAAC;EACrB,CAAC,EAAE,CAACL,SAAS,CAAC,CAAC;EAEf,oBACEjC,KAAA,CAAAgD,aAAA,CAAC7C,SAAS;IACR8C,UAAU,EAAE,IAAK;IACjBC,iBAAiB,EAAE,QAAS;IAC5BJ,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA,UAAW;IACvBjB,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACF,MAAM;EAAE,gBAE/B5B,KAAA,CAAAgD,aAAA,CAAC5C,QAAQ,CAAC+C,IAAI;IACZC,KAAK,EAAE,CACLvC,uBAAuB,CAAC0B,MAAM,EAC9B1B,uBAAuB,CAACwC,aAAa,EACrCxC,uBAAuB,CAACyC,UAAU,EAClCd,qBAAqB;EACrB,gBAEFxC,KAAA,CAAAgD,aAAA,CAAC/B,EAAE;IAACsC,KAAK,EAAEvB,MAAM,CAACV;EAAW,GAAEM,MAAW,CAC7B,CACN,CAAC;AAEhB,CAAC"}

package/lib/module/components/numberpad/NumberPad.js

@@ -0,0 +1,102 @@
+/* eslint-disable functional/immutable-data */
+import React, { useRef } from "react";
+import { View } from "react-native";
+import { IONumberPadButtonStyles, IOStyles } from "../../core";
+import { VSpacer } from "../spacer";
+import { IconButton } from "../buttons";
+import { NumberButton } from "./NumberButton";
+const mapIconSpecByBiometric = {
+  FACE_ID: {
+    icon: "biomFaceID",
+    size: 32
+  },
+  TOUCH_ID: {
+    icon: "fingerprint",
+    size: 24
+  },
+  BIOMETRICS: {
+    icon: "fingerprint",
+    size: 24
+  }
+};
+const ButtonWrapper = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [IONumberPadButtonStyles.buttonSize, IOStyles.alignCenter, IOStyles.centerJustified]
+  }, children);
+};
+export const NumberPad = _ref2 => {
+  let {
+    variant = "dark",
+    onValueChange,
+    biometricType,
+    onBiometricPress,
+    biometricAccessibilityLabel,
+    deleteAccessibilityLabel
+  } = _ref2;
+  const numberPadValue = useRef("");
+  const numberPadPress = number => {
+    numberPadValue.current = `${numberPadValue.current}${number}`;
+    onValueChange(numberPadValue.current);
+  };
+  const onDeletePress = () => {
+    numberPadValue.current = numberPadValue.current.slice(0, -1);
+    onValueChange(numberPadValue.current);
+  };
+  const RowButtons = _ref3 => {
+    let {
+      buttons
+    } = _ref3;
+    return /*#__PURE__*/React.createElement(View, {
+      style: [IOStyles.flex, IOStyles.rowSpaceBetween, {
+        justifyContent: "space-between",
+        alignItems: "center"
+      }]
+    }, buttons.map(elem => {
+      if (typeof elem === "number") {
+        return /*#__PURE__*/React.createElement(NumberButton, {
+          key: elem,
+          number: elem,
+          onPress: numberPadPress,
+          variant: variant
+        });
+      }
+      if (elem === "delete") {
+        return /*#__PURE__*/React.createElement(ButtonWrapper, {
+          key: elem
+        }, /*#__PURE__*/React.createElement(IconButton, {
+          icon: "cancel",
+          color: variant === "dark" ? "contrast" : "primary",
+          onPress: onDeletePress,
+          accessibilityLabel: deleteAccessibilityLabel
+        }));
+      }
+      return biometricType ? /*#__PURE__*/React.createElement(ButtonWrapper, {
+        key: elem
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        icon: mapIconSpecByBiometric[biometricType].icon,
+        iconSize: mapIconSpecByBiometric[biometricType].size,
+        color: variant === "dark" ? "contrast" : "primary",
+        onPress: onBiometricPress,
+        accessibilityLabel: biometricAccessibilityLabel
+      })) : /*#__PURE__*/React.createElement(View, {
+        key: "emptyElem",
+        style: IONumberPadButtonStyles.buttonSize
+      });
+    }));
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: IOStyles.horizontalContentPadding
+  }, /*#__PURE__*/React.createElement(RowButtons, {
+    buttons: [1, 2, 3]
+  }), /*#__PURE__*/React.createElement(VSpacer, null), /*#__PURE__*/React.createElement(RowButtons, {
+    buttons: [4, 5, 6]
+  }), /*#__PURE__*/React.createElement(VSpacer, null), /*#__PURE__*/React.createElement(RowButtons, {
+    buttons: [7, 8, 9]
+  }), /*#__PURE__*/React.createElement(VSpacer, null), /*#__PURE__*/React.createElement(RowButtons, {
+    buttons: ["biometric", 0, "delete"]
+  }));
+};
+//# sourceMappingURL=NumberPad.js.map

package/lib/module/components/numberpad/NumberPad.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","View","IONumberPadButtonStyles","IOStyles","VSpacer","IconButton","NumberButton","mapIconSpecByBiometric","FACE_ID","icon","size","TOUCH_ID","BIOMETRICS","ButtonWrapper","_ref","children","createElement","style","buttonSize","alignCenter","centerJustified","NumberPad","_ref2","variant","onValueChange","biometricType","onBiometricPress","biometricAccessibilityLabel","deleteAccessibilityLabel","numberPadValue","numberPadPress","number","current","onDeletePress","slice","RowButtons","_ref3","buttons","flex","rowSpaceBetween","justifyContent","alignItems","map","elem","key","onPress","color","accessibilityLabel","iconSize","horizontalContentPadding"],"sourceRoot":"../../../../src","sources":["components/numberpad/NumberPad.tsx"],"mappings":"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"}

package/lib/module/components/numberpad/index.js

@@ -0,0 +1,3 @@
+// export * from "./NumberButton";
+export * from "./NumberPad";
+//# sourceMappingURL=index.js.map

package/lib/module/components/numberpad/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/numberpad/index.tsx"],"mappings":"AAAA;AACA,cAAc,aAAa"}