fix: hide currency element and decrease padding if currency argument is empty

ember-amount-input/src/components/amount-input.css

@@ -22,7 +22,7 @@
 .amount-input__value {
   width: 100%;
   font-size: 13px;
-  padding: 6px 12px 6px 41px;
+  padding: 6px 12px;
   border: 1px solid #e9eaf0; /* TODO: import as variable? */
   border-radius: 3px;
   transition: border-color 0.5s;
@@ -42,6 +42,10 @@
   cursor: not-allowed;
 }
 
+.amount-input__value.with-currency {
+  padding-left: 41px;
+}
+
 /* Remove spin button  */
 
 .amount-input input[type='number']::-webkit-inner-spin-button,

ember-amount-input/src/components/amount-input.hbs

@@ -1,10 +1,15 @@
 <div class='amount-input' ...attributes>
-  <span class='amount-input__currency {{if @value "black"}}'>
-    {{this.currency}}
-  </span>
+  {{#unless this.isCurrencyEmpty}}
+    <span class='amount-input__currency {{if @value "black"}}'>
+      {{this.currency}}
+    </span>
+  {{/unless}}
 
   <input
-    class='amount-input__value {{@inputClass}} {{if @disabled "disabled"}}'
+    class='amount-input__value
+      {{@inputClass}}
+      {{if @disabled "disabled"}}
+      {{unless this.isCurrencyEmpty "with-currency"}}'
     id={{this.inputId}}
     type='number'
     value={{@value}}

ember-amount-input/src/components/amount-input.ts

@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { isEmpty } from '@ember/utils';
 import './amount-input.css';
 
 const KEY_CODE_E = 69;
@@ -94,6 +95,13 @@ export default class AmountInput extends Component<AmountInputSignature> {
     return this.argOrDefault('currency', 'EUR');
   }
 
+  /**
+   * Returns true if the currency is an empty string, null, or undefined.
+   */
+  get isCurrencyEmpty(): boolean {
+    return isEmpty(this.currency);
+  }
+
   /**
    * A custom id applied on the input.
    * Defaults to `amount-input`.

test-app/tests/integration/components/amount-input/component-test.ts

@@ -73,7 +73,7 @@ module('Integration | Component | amount-input', function (hooks) {
       />
     `);
 
-    assert.dom('.amount-input__currency').hasText('');
+    assert.dom('.amount-input__currency').doesNotExist();
     assert.dom('input').hasNoAttribute('placeholder');
     assert.dom('input').hasNoAttribute('id');