@paykka/card-checkout-ui 0.5.17 → 0.6.0

package/dist/es/components/CardNumberField/index.js

@@ -1,39 +1,48 @@
-import { w, A, F, h, u } from "../../core.js";
+import { w, A, F, h, y, u } from "../../core.js";
 import { clamp } from "../../utils/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
 import "../../core/context.js";
 import "../../i18n/util.js";
 import "../../i18n/locales/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { IconCardNo } from "../internal/icons/IconCardNo.js";
 import { Input } from "../internal/Input/Input.js";
-import { FieldType } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
-import { getSupportedCardBrands, getSupportedCardBrandsLengths, findCardBrandInfo } from "../../utils/card-brand/index.js";
+import "../internal/Input/type.js";
+import { EFieldType } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
+import { getSupportedCardBrands, getSupportedCardBrandsLengths, finCardBrandInfoByCode, findCardBrandInfo } from "../../utils/card-brand/index.js";
 import { trimAll, limitedToNumber } from "../../utils/format.js";
 const CardNumberField = w((props, ref) => {
-  var _a;
-  const { supportedCardBrands = [], className, style, security } = props;
+  const { supportedCardBrands = [], className, security, showLabel } = props;
   const inputRef = A(null);
   const formItemRef = A(null);
   F(ref, () => ({
     input: inputRef.current,
     focus: () => {
-      var _a2;
-      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      var _a;
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
     },
     blur: () => {
-      var _a2;
-      (_a2 = inputRef.current) == null ? void 0 : _a2.blur();
+      var _a;
+      (_a = inputRef.current) == null ? void 0 : _a.blur();
     },
     resetValidation: (status, errorTip) => {
-      var _a2;
-      (_a2 = formItemRef.current) == null ? void 0 : _a2.resetValidation(status, [{ message: errorTip }]);
+      var _a;
+      (_a = formItemRef.current) == null ? void 0 : _a.resetValidation(status, [{ message: errorTip }]);
     },
     binValueChanged: (binValue) => {
       setValue(binValue);
     },
+    brandChanged: (brand) => {
+      if (brand) {
+        const brandInfo = finCardBrandInfoByCode(brand);
+        setBrandIcon(() => brandInfo == null ? void 0 : brandInfo.icon);
+      } else {
+        setBrandIcon(void 0);
+      }
+    },
     getCardBrand: () => findCardBrandInfo(trimAll(value), brands) || {}
   }));
   const { i18n } = useI18n();
@@ -41,7 +50,13 @@ const CardNumberField = w((props, ref) => {
   const [validationStatus, setValidationStatus] = h("");
   const brands = getSupportedCardBrands(supportedCardBrands);
   const brandLengths = getSupportedCardBrandsLengths(brands);
-  const cardBrandIcon = (_a = findCardBrandInfo(trimAll(value), brands)) == null ? void 0 : _a.icon;
+  const [brandIcon, setBrandIcon] = h(void 0);
+  y(() => {
+    setBrandIcon(value ? () => {
+      var _a;
+      return (_a = findCardBrandInfo(trimAll(value), brands)) == null ? void 0 : _a.icon;
+    } : void 0);
+  }, [value]);
   const rule = {
     trigger: ["blur", "submit"],
     validator(value2) {
@@ -65,7 +80,7 @@ const CardNumberField = w((props, ref) => {
     }
   };
   function onInput(event) {
-    var _a2;
+    var _a;
     const { currentTarget, inputType } = event;
     const selectionStart = currentTarget.selectionStart;
     let val = limitedToNumber(currentTarget.value);
@@ -76,11 +91,11 @@ const CardNumberField = w((props, ref) => {
     }
     setValue(currentTarget.value = val);
     currentTarget.setSelectionRange(pos, pos);
-    (_a2 = props.onInput) == null ? void 0 : _a2.call(props, event);
+    (_a = props.onInput) == null ? void 0 : _a.call(props, event);
   }
   const RightIcon = () => {
     if (validationStatus !== "error") {
-      const Icon = cardBrandIcon ?? IconCardNo;
+      const Icon = brandIcon ?? IconCardNo;
       return /* @__PURE__ */ u(Icon, { size: 32 });
     }
   };
@@ -88,12 +103,12 @@ const CardNumberField = w((props, ref) => {
     FormItem,
     {
       label: i18n.get("card.cardNumber.label"),
+      showLabel,
       path: "number",
       ref: formItemRef,
       rule,
       onValidationStatusChange: setValidationStatus,
       className,
-      style,
       children: /* @__PURE__ */ u(
         Input,
         {
@@ -105,7 +120,7 @@ const CardNumberField = w((props, ref) => {
           onInput,
           rightIcon: RightIcon(),
           placeholder: i18n.get("card.cardNumber.placeholder"),
-          children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": FieldType.CARD_NUMBER })
+          children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": EFieldType.CARD_NUMBER })
         }
       )
     }

package/dist/es/components/CardSecurityCodeField/index.js

@@ -7,13 +7,15 @@ import { useI18n } from "../../hooks/useI18n.js";
 import "../../core/context.js";
 import "../../i18n/util.js";
 import "../../i18n/locales/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
-import { FieldType } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
+import "../internal/Input/type.js";
+import { EFieldType } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
 const CardSecurityCodeField = w((props, ref) => {
-  const { className, style, security } = props;
+  const { className, style, security, showLabel } = props;
   const inputRef = A(null);
   const formItemRef = A(null);
   F(ref, () => ({
@@ -60,6 +62,7 @@ const CardSecurityCodeField = w((props, ref) => {
     FormItem,
     {
       label: i18n.get("card.cardSecurityCode.label"),
+      showLabel,
       path: "securityCode",
       ref: formItemRef,
       rule,
@@ -75,7 +78,7 @@ const CardSecurityCodeField = w((props, ref) => {
           value,
           onInput,
           placeholder: i18n.get("card.cardSecurityCode.placeholder"),
-          children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": FieldType.CVV })
+          children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": EFieldType.CVV })
         }
       )
     }

package/dist/es/components/CardSelector/index.js

@@ -6,6 +6,7 @@ import { finCardBrandInfoByCode } from "../../utils/card-brand/index.js";
 import "../../utils/system-info/get-browser-info.js";
 import "../../i18n/util.js";
 import "../../i18n/locales/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";

package/dist/es/components/CombinedEncryptedField/index.js

@@ -0,0 +1,75 @@
+import { w, A, F, h, u, b } from "../../core.js";
+import "../internal/Form/type.js";
+import "../internal/Form/context.js";
+import { FormItem } from "../internal/Form/FormItem.js";
+import "../internal/Form/Form.js";
+import { Input } from "../internal/Input/Input.js";
+import "../internal/Input/type.js";
+import { EFieldType } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
+import { getSupportedCardBrands, finCardBrandInfoByCode, findCardBrandInfo } from "../../utils/card-brand/index.js";
+import "../../utils/system-info/get-browser-info.js";
+import { trimAll } from "../../utils/format.js";
+import { IconCardNo } from "../internal/icons/IconCardNo.js";
+const CombinedEncryptedField = w((props, ref) => {
+  const { supportedCardBrands = [], className } = props;
+  const inputRef = A(null);
+  const formItemRef = A(null);
+  F(ref, () => ({
+    input: inputRef.current,
+    focus: () => {
+      var _a;
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    },
+    blur: () => {
+      var _a;
+      (_a = inputRef.current) == null ? void 0 : _a.blur();
+    },
+    resetValidation: (status, errorTip) => {
+      var _a;
+      (_a = formItemRef.current) == null ? void 0 : _a.resetValidation(status, [{ message: errorTip }]);
+    },
+    binValueChanged: (binValue2) => {
+      setBinValue(binValue2);
+    },
+    brandChanged: (brand) => {
+      if (brand) {
+        const brandInfo = finCardBrandInfoByCode(brand);
+        setBrandIcon(() => brandInfo == null ? void 0 : brandInfo.icon);
+      } else {
+        setBrandIcon(void 0);
+      }
+    },
+    getCardBrand: () => findCardBrandInfo(trimAll(binValue), brands) || {}
+  }));
+  const [binValue, setBinValue] = h("");
+  const brands = getSupportedCardBrands(supportedCardBrands);
+  const [brandIcon, setBrandIcon] = h(void 0);
+  const LeftIcon = () => {
+    const Icon = brandIcon ?? IconCardNo;
+    return /* @__PURE__ */ u(Icon, { size: 32 });
+  };
+  return /* @__PURE__ */ u(
+    FormItem,
+    {
+      showLabel: false,
+      ref: formItemRef,
+      className,
+      children: /* @__PURE__ */ u(
+        Input,
+        {
+          ref: inputRef,
+          leftIcon: LeftIcon(),
+          rightIcon: /* @__PURE__ */ u(b, {}),
+          children: /* @__PURE__ */ u("div", { style: "width:100%;height:100%;display:flex", children: [
+            /* @__PURE__ */ u("div", { style: "flex:1", "data-sf": EFieldType.CARD_NUMBER }),
+            /* @__PURE__ */ u("div", { style: "width:100px", "data-sf": EFieldType.EXPIRE_DATE }),
+            /* @__PURE__ */ u("div", { style: "width:60px", "data-sf": EFieldType.CVV })
+          ] })
+        }
+      )
+    }
+  );
+});
+export {
+  CombinedEncryptedField
+};

package/dist/es/components/EmailField/EmailField.js

@@ -12,10 +12,12 @@ import { useI18n } from "../../hooks/useI18n.js";
 import "../../core/context.js";
 import "../../i18n/util.js";
 import "../../i18n/locales/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
+import "../internal/Input/type.js";
 class EmailState {
   constructor(email) {
     __publicField(this, "_email");