diff --git a/ember-amount-input/src/components/amount-input.css b/ember-amount-input/src/components/amount-input.css
index e777e610..9a5ae77f 100644
--- a/ember-amount-input/src/components/amount-input.css
+++ b/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,
diff --git a/ember-amount-input/src/components/amount-input.hbs b/ember-amount-input/src/components/amount-input.hbs
index a2c43572..75caa265 100644
--- a/ember-amount-input/src/components/amount-input.hbs
+++ b/ember-amount-input/src/components/amount-input.hbs
@@ -1,10 +1,15 @@
-
- {{this.currency}}
-
+ {{#unless this.isCurrencyEmpty}}
+
+ {{this.currency}}
+
+ {{/unless}}
{
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`.
diff --git a/test-app/tests/integration/components/amount-input/component-test.ts b/test-app/tests/integration/components/amount-input/component-test.ts
index 878c69e9..515842a3 100644
--- a/test-app/tests/integration/components/amount-input/component-test.ts
+++ b/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');