From fae53c3981c02fdba494bf0b7adfa3fa7581a48e Mon Sep 17 00:00:00 2001
From: Victor Elci <victor.elci@aboveproperty.com>
Date: Fri, 10 May 2024 10:17:48 -0400
Subject: [PATCH] feat: allow specifying input type

---
 addon/components/input-credit-card-cvc.hbs                  | 2 +-
 addon/components/input-credit-card-cvc.js                   | 4 ++++
 addon/components/input-credit-card-number.hbs               | 2 +-
 addon/components/input-credit-card-number.js                | 4 ++++
 tests/integration/components/input-credit-card-cvc-test.js  | 6 ++++++
 .../integration/components/input-credit-card-number-test.js | 6 ++++++
 6 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/addon/components/input-credit-card-cvc.hbs b/addon/components/input-credit-card-cvc.hbs
index 2404d5f..421b5f7 100644
--- a/addon/components/input-credit-card-cvc.hbs
+++ b/addon/components/input-credit-card-cvc.hbs
@@ -1,5 +1,5 @@
 <Input
-  @type="tel"
+  @type={{this.type}}
   @value={{this.cvc}}
   class="input-credit-card-cvc"
   placeholder="•••"
diff --git a/addon/components/input-credit-card-cvc.js b/addon/components/input-credit-card-cvc.js
index 1fd9c16..8815430 100644
--- a/addon/components/input-credit-card-cvc.js
+++ b/addon/components/input-credit-card-cvc.js
@@ -10,6 +10,10 @@ function inputValid(value) {
 }
 
 export default class InputCreditCardCvcComponent extends Component {
+  get type() {
+    return this.args.type || 'tel';
+  }
+
   get cvc() {
     return formatters.formatCvc(this.args.cvc);
   }
diff --git a/addon/components/input-credit-card-number.hbs b/addon/components/input-credit-card-number.hbs
index 6ac1adb..2ed21cd 100644
--- a/addon/components/input-credit-card-number.hbs
+++ b/addon/components/input-credit-card-number.hbs
@@ -1,5 +1,5 @@
 <Input
-  @type="tel"
+  @type={{this.type}}
   @value={{this.number}}
   autocomplete="cc-number"
   class="input-credit-card-number"
diff --git a/addon/components/input-credit-card-number.js b/addon/components/input-credit-card-number.js
index 20234ee..50e471c 100644
--- a/addon/components/input-credit-card-number.js
+++ b/addon/components/input-credit-card-number.js
@@ -24,6 +24,10 @@ function inputValid(value) {
 }
 
 export default class InputCreditCardNumberComponent extends Component {
+  get type() {
+    return this.args.type || 'tel';
+  }
+
   get number() {
     return formatters.formatNumber(this.args.number);
   }
diff --git a/tests/integration/components/input-credit-card-cvc-test.js b/tests/integration/components/input-credit-card-cvc-test.js
index f872ffb..3671ae7 100644
--- a/tests/integration/components/input-credit-card-cvc-test.js
+++ b/tests/integration/components/input-credit-card-cvc-test.js
@@ -17,4 +17,10 @@ module('Integration | Component | input-credit-card-cvc', function (hooks) {
 
     assert.equal(this.element.querySelector('.form-control').value, '300');
   });
+
+  test('it can specify the input type', async function (assert) {
+    await render(hbs`<InputCreditCardCvc @type="password" />`);
+
+    assert.dom('input').hasAttribute('type', 'password');
+  });
 });
diff --git a/tests/integration/components/input-credit-card-number-test.js b/tests/integration/components/input-credit-card-number-test.js
index ad55514..df39e2f 100644
--- a/tests/integration/components/input-credit-card-number-test.js
+++ b/tests/integration/components/input-credit-card-number-test.js
@@ -43,4 +43,10 @@ module('Integration | Component | input-credit-card-number', function (hooks) {
     await typeIn('input', '1');
     assert.equal(this.number, '4111111111111111');
   });
+
+  test('it can specify the input type', async function (assert) {
+    await render(hbs`<InputCreditCardNumber @type="password" />`);
+
+    assert.dom('input').hasAttribute('type', 'password');
+  });
 });