From f3a7d1bb782d46f844669018435ff39dde33a0aa Mon Sep 17 00:00:00 2001
From: yamaha252 <mail@yamaha252.ru>
Date: Tue, 6 Mar 2018 17:58:40 +0500
Subject: [PATCH] support multiple name fields

---
 README.md   | 10 +++++++++-
 src/card.js | 16 ++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 8f02fc9..8583baa 100644
--- a/README.md
+++ b/README.md
@@ -78,7 +78,7 @@ angular.module('app', ['gavruk.card'])
 }]);
 ```
 
-#### Using multiple fields for card expiry
+#### Using multiple fields
 
 Simply use 2 input fields for the expiry, and pass either `month`, or `year` to the directive.
 
@@ -86,3 +86,11 @@ Simply use 2 input fields for the expiry, and pass either `month`, or `year` to
 <input placeholder="MM" type="text" name="CardExpiryMonth" card-expiry="month" data-ng-model="card.expiryMonth" />
 <input placeholder="YYYY" type="text" name="CardExpiryYear" card-expiry="year" data-ng-model="card.expiryYear" />
 ```
+
+
+Simply use 2 input fields for the name, and pass either `first`, or `last` to the directive.
+
+```js
+<input placeholder="CARD" type="text" name="CardFirstName" card-name="first" data-ng-model="card.firstName" />
+<input placeholder="HOLDER" type="text" name="CardLastName" card-name="last" data-ng-model="card.lastName" />
+```
diff --git a/src/card.js b/src/card.js
index f4fa44b..27fbb37 100644
--- a/src/card.js
+++ b/src/card.js
@@ -81,8 +81,11 @@ var hasRequire = window && window.angular ? false : typeof require === 'function
         if (cardCtrl.cvcInput && cardCtrl.cvcInput.length > 0) {
           opts.formSelectors.cvcInput = 'input[name="' + cardCtrl.cvcInput[0].name + '"]';
         }
-        if (cardCtrl.nameInput && cardCtrl.nameInput.length > 0) {
-          opts.formSelectors.nameInput = 'input[name="' + cardCtrl.nameInput[0].name + '"]';
+
+        if (angular.isDefined(cardCtrl.nameInput.combined)) {
+          opts.formSelectors.nameInput = 'input[name="' + cardCtrl.nameInput.combined[0].name + '"]';
+        } else if (angular.isDefined(cardCtrl.nameInput.first) && angular.isDefined(cardCtrl.nameInput.last)) {
+          opts.formSelectors.nameInput = 'input[name="' + cardCtrl.nameInput.first[0].name + '"], input[name="' + cardCtrl.nameInput.last[0].name + '"]';
         }
 
         //Don't initialize card until angular has had a chance to update the DOM with any interpolated bindings
@@ -127,7 +130,8 @@ var hasRequire = window && window.angular ? false : typeof require === 'function
     return {
       restrict: 'A',
       scope: {
-        ngModel: '='
+        ngModel: '=',
+        type: '@cardName'
       },
       require: [
         '^card',
@@ -135,7 +139,11 @@ var hasRequire = window && window.angular ? false : typeof require === 'function
       ],
       link: function (scope, element, attributes, ctrls) {
         var cardCtrl = ctrls[0];
-        cardCtrl.nameInput = element;
+        var nameType = scope.type || 'combined';
+        if (angular.isUndefined(cardCtrl.nameInput)) {
+          cardCtrl.nameInput = {};
+        }
+        cardCtrl.nameInput[nameType] = element;
         scope.$watch('ngModel', function (newVal, oldVal) {
           if (!oldVal && !newVal) {
             return;